html hso

orjhan

Download

Post to :

URL :

Related Presentations :

Add to Flag Embed

Uploaded from authorPOINTLite

Views: 780

Category: Education

Presentation Description

No description available.

Comments

By: AZHAR0822 (14 month(s) ago) Private Comment

DSGDFG

Presentation Transcript

Slide1:

Introduktion till HTML

Slide2:

Filformat och extensioner Olika typer av filer har olika format. Ett worddokument är organiserat på ett sätt och en bildfil på ett helt annat vis. Vissa filformat kan bara öppnas och tolkas på ett begripligt sätt i ett visst program medan andra filformat följer en öppen standard och kan öppnas, tolkas och ändras i många olika program. Man känner som regel igen vilket format en viss fil har på filens extension (=filändelse). Extensionen brukar oftast bestå av tre bokstäver, t ex doc, xls, gif och tif. Några filändelser har två eller fyra bokstäver som ps och html. I Windows är filändelserna ofta associerade till ett visst program. Filändelser som är associerade till ett program kan ibland vara dolda, men det är en inställningssak. Är en fil associerad till ett visst program brukar det programmets ikon synas på filen, annars syns en mer generell ikon.

Slide3:

Några vanliga filformat och extensioner är: .exe -- Körbart program .txt -- Ren textfil, öppnas med NOTEPAD, emacs mfl. .html -- Websida, öppnas med NOTEPAD, scintilla mfl eller med en webläsare som Internet Explorer .doc -- Worddokument, ordbehandlingsfil som öppnas med Microsoft Word eller StarOffice Writer. .xls -- Exceldokument, kalkylblad som öppnas med Microsoft Excel .tif -- Bildfil (fotografi eller liknande). Öppnas med Paint Shop Pro eller annat bildbehandlingsprogram. OBS! Bilder i detta format är ofta mycket utrymmeskrävande. Konvertera till jpg så räcker utrymmet på P: bättre. .jpg -- Bildfil (fotografi eller liknande). Öppnas med Paint Shop Pro eller annat bildbehandlingsprogram. .pdf -- Portable Document Format, öppnas med Adobe Acrobat Reader. Man bör veta i vilket program och vilken version av detta program en fil är skapad. Filformaten kan nämligen tyvärr skilja sig åt från version till version av ett och samma program. Det kan vara en god ide att undvika bokstäverna å, ä och ö i filnamn och namn på mappar.

Olika typer av program:

Olika typer av program Koda själv : Notepad Scintilla Visuella program WYSIWYG: Frontpage Dreamweaver NVU

Var spara- adress (URL)?:

Var spara- adress (URL)? ~ = Alt Gr http://10.10.10.8

Kapitel:

Vad är HTML? 3 HTML dokumentets struktur 7 Texthantering 13 Hyperlänkar 33 Bilder 36 Image maps 40 Tabeller 43 Frames (ramar) 54 Formulär 62 Kapitel

Vad är HTML?:

Vad är HTML? Taggbaserat filformat för text-dokument Stödjer ”hyperlänkar” Konstruerat av Tim Berners Lee 1989 Utvecklat från SGML Standarder sätts av W3C Enkelt att lära sig Senaste versionen är 4.01 http://developer.netscape.com/docs/manuals/htmlguid/index.htm

Hyper Text Markup Language:

Hyper Text Markup Language Hyper Text är klickbara referenser till andra dokument Markup Language är märkspråket för att beskriva dokumentets utseende och innehåll

Vad är en tagg?:

Vad är en tagg? <TAGG> innehåll </TAGG> Start-tagg Slut-tagg HTML-container

Taggens utseende:

Taggens utseende <FONT SIZE="6"> Hej </FONT> Element Attribut Värde Element – Instruktion till webbläsaren Attribut – Tillägg för att beskriva taggen Värde – Värdet för attributet

HTML dokumentets struktur:

HTML dokumentets struktur HEAD BODY TITLE HTML

Grundstommen:

Grundstommen <HTML> <HEAD> <TITLE>Rubrik</TITLE> </HEAD> <BODY> Sidans innehåll </BODY> </HTML>

Slide13:

<HTML> <HEAD> <TITLE> Min första Hemsida </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <H1> Välkommen till min första hemsida </H1> <P>Detta är en mycket enkel hemsida</P> </BODY> </HTML>

Slide14:

BODY-taggen:

BODY-taggen Innehåller det som syns i dokumentet Attribut: BGCOLOR="färg" BACKGROUND="bildfil" TEXT="färg" LINK="färg" VLINK="färg" <BODY BGCOLOR="yellow" TEXT="red">

Färger:

Färger Anges med W3C's färgnamn eller röd-grön-blå värden i hexadecimalt format

Färgcirkeln:

Färgcirkeln Röd Blå Grön Magenta Gul Cyan

Färgrymden:

Färgrymden R B G M Y C FF 0 W K FF FF

Texthantering:

Texthantering Text formateras mha taggar Den text som skall formateras OMGES av en start-tagg och en slut-tagg Exempel: <START-TAGG>Text</SLUT-TAGG>

Stycken:

Stycken Stycken för brödtext skapas med <P> Automatisk tom rad före och efter Exempel: <P> Brödtext </P>

Justering av stycke:

Justering av stycke Attribut: ALIGN="left"|"center"|"right" <P ALIGN="center"> Centern är ett<BR> mittenparti. </P>

Global centrering:

Global centrering För att centrera allt innehåll används <CENTER> taggen <CENTER> Sidans innehåll </CENTER>

Radbrytning:

Radbrytning Sker automatiskt efter ett stycke Eller med taggen <BR> Exempel: <P> Rad 1<BR> Rad 2<BR> </P>

Rubriker:

Rubriker Rubriker skapas med <H> Det finns 6 storlekar (<H1>-<H6>) <H1> är störst och <H6> är minst Exempel: <H3>Rubriktext</H3> <P>Brödtext</P>

Horisontella linjer:

Horisontella linjer Används för att avgränsa brödtext Skapas med taggen <HR> Attribut: NOSHADE SIZE="storlek" COLOR="färg" <HR NOSHADE SIZE="3">

Textformattering:

Textformattering För att skapa olika stilar på texten <B> - Fet (Bold) <I> - Kursiv (Italic) <U> - Understruken (Underlined) <TT> - Skrivmaskin (TeleType) <P>Denna text är <I>kursiv</I> och <B>fet</B></P>

Nästling av taggar:

Nästling av taggar HTML-taggar kan nästlas (dvs flera taggar i varandra) Nästlade taggar får inte gå omlott <B><I>Text</B></I> Fel! <B><I>Text</I></B> Rätt!

Specialtaggar:

Specialtaggar För ytterligare formatering av text <SUP> - Upphöjd <SUB> - Nedsänkt <BIG> - Stor text <SMALL> - Liten text <STRIKE> - Överstruken

Å, Ä och Ö:

Å, Ä och Ö För att de skall bli rätt i alla länder enligt ISO 8859-1 å - å ä - ä ö - ö Å - Å Ä - Ä Ö - Ö

Särskilda tecken:

Särskilda tecken < - Mindre än < > - Större än > & - Och-tecken & " - Citationstecken ® - Registrerat varumärke © - Copyright   - Obrytbart mellanslag &#___; - Tecknet ISO 8859-1 kod http://www.w3.org/MarkUp/html3/latin1.html

Typsnitt:

Typsnitt För att ändra typsnitt, storlek och färg i text används taggen <FONT> Attribut: SIZE="storlek" COLOR="färg" FACE="typsnitt" <FONT SIZE="1" FACE="verdana">

Kommentarer:

Kommentarer För att kunna skriva anteckningar i HTML-koden utan att det syns på webbsidan

Sorterad lista:

Sorterad lista Listor är bra för att stapla upp innehåll eller dispositioner Skapas med <OL> (Ordered List) <OL> <LI>Banan <LI>Äpple <LI>Apelsin </OL>

Sorterad lista:

Sorterad lista Attribut: START="värde" TYPE="A"|"a"|"I"|"i"|"1" <OL START="4" TYPE="a">

Osorterad lista:

Osorterad lista En osorterad är en meny med symboler på varje rad istället för numrerad Skapas med <UL> (Unordered List) eller <DIR> och <MENU> <UL> <LI>Ettan <LI>Tvåan <LI>Trean </UL>

Osorterad lista:

Osorterad lista Attribut: TYPE="circle"|"disc"|"square" <UL TYPE="square">

Hyperlänkar:

Hyperlänkar En länktagg beskriver en klickbar referens till ett annat dokument, fil eller ankarpunkt Kan även länka till andra tjänster än WWW Det finns tre nivåer för att beskriva sökvägen till referensen: - Ankarpunkt (samma sida) - Relativ (på samma sajt) - Absolut (till extern sajt)

Länktaggen:

Länktaggen Länkar beskrivs med <A> taggen Attribut: HREF="referens" TARGET="fönster" ONCLICK="skript" ONMOUSEOUT="skript" ONMOUSEOVER="skript"

Referenser:

Referenser Ankarpunkt <A HREF="#namn">Klick</A> Länkar till <A NAME="namn"> Relativ <A HREF="sida2.html">Sida 2</A> Absolut <A HREF="http://www.dn.se">DN</A>

Bilder:

Bildexempel:

Bildexempel <IMG SRC="bild.gif" BORDER="2"> <IMG SRC="mapp/bild.gif"> <IMG SRC="http://www.google.com/images/hp0.gif">

Länka med bilder:

Länka med bilder <A HREF="http://www.google.com"> <IMG SRC="http://www.google.com/images/hp0.gif"> </A>

Image maps:

Image maps Bilder med klickbara områden (länkar) 2 typer - Serverside (används ej längre) - Clientside hotspot bild

Image map taggarna:

Image map taggarna Taggen <IMG> används som vanligt för att visa bilden (med attributet USEMAP) Skapas med <MAP> taggen Attribut: NAME="kartnamn" Områdena definieras med <AREA> Attribut: SHAPE="CIRCLE"|"RECT"|"POLYGON" COORDS="x,y,d"|"x1,y1..." HREF="url"

Image map exempel:

Image map exempel <IMG SRC="bild.jpg" USEMAP="#karta"> <MAP NAME="karta"> <AREA SHAPE="CIRCLE" COORDS="50,50,25" HREF="http://www.dn.se"> <AREA SHAPE="RECT" COORDS="100,100,150,150" HREF="http://www.aftonbladet.se"> <AREA SHAPE="POLYGON" COORDS="0,0,50,20,40,60,10,30" HREF="http://www.tidningen.to"> </MAP>

Tabeller:

Tabeller Används för att presentera data prydligt uppspaltat "Osynliga" tabeller används för positionering av text och bilder (layout) Skapas med taggen <TABLE> Tabellrader skapas med <TR> Tabellceller på raderna med <TD>

Tabellens struktur:

Tabellens struktur Cell 1 Cell 2 Cell 3 Cell 4

Tabellens struktur:

Tabellens struktur <TABLE> </TABLE> <TD> </TD> <TR> </TR> </TR> <TD> </TD> <TD> </TD> <TD> </TD> Cell 1 Cell 2 Cell 3 Cell 4 <TR>

Kodens struktur:

Kodens struktur <TABLE> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 3</TD> <TD>Cell 4</TD> </TR> </TABLE>

TABLE-taggen:

TABLE-taggen Omringar hela tabellen Attribut: BORDER="n" (ramens storlek) CELLPADDING="n" (marginal i celler) CELLSPACING="n" (mellan celler) WIDTH="px"|"%" (tabellens bredd) HEIGHT="px"|"%" (tabellens höjd) BGCOLOR="färg" (bakgrundsfärg)

TD-taggen:

Slå ihop celler horizontellt:

Slå ihop celler horizontellt Cell 1 Cell 3 Cell 4

COLSPAN:

COLSPAN <TABLE> <TR> <TD COLSPAN="2">Cell 1</TD> </TR> <TR> <TD>Cell 3</TD> <TD>Cell 4</TD> </TR> </TABLE>

Slå ihop celler vertikalt:

Slå ihop celler vertikalt Cell 2 Cell 1 Cell 4

ROWSPAN:

ROWSPAN <TABLE> <TR> <TD ROWSPAN="2">Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 4</TD> </TR> </TABLE>

Övningar – Tabeller:

Övningar – Tabeller Se boken

Frames:

Frames Ramar används för att dela upp webbläsarefönstret i mindre delar, med ett HTML-dokument i varje ram Stöds av Netscape 2+ och Iexplorer 3+ Skapas med <FRAMESET> taggen Innehållet i varje ram beskrivs med <FRAME> taggen

Ett enkelt frameset:

Ett enkelt frameset meny.html valk.html frameset.html meny main

Koden för enkelt frameset:

Koden för enkelt frameset Skapa 4 filer: frameset.html meny.html valk.html huvud.html <HTML> <FRAMESET COLS="200,*"> <FRAME NAME="meny" SRC="meny.html"> <FRAME NAME="main" SRC="valk.html"> </FRAMESET> </HTML>

Ett dubbelt frameset:

Ett dubbelt frameset meny.html valk.html frameset.html meny main huvud

Koden för dubbelt frameset:

Koden för dubbelt frameset Ändra koden i framset.html till: <FRAMESET ROWS="130,*"> <FRAME NAME="huvud" SRC="huvud.html"> <FRAMESET COLS="200,*"> <FRAME NAME="meny" SRC="meny.html"> <FRAME NAME="main" SRC="valk.html"> </FRAMESET> </FRAMESET>

FRAMESET-taggen:

FRAMESET-taggen Attribut: COLS="kol1,kol2..." ROWS="rad1,rad2..." BORDER="pixlar" BORDERCOLOR="ramfärg" FRAMEBORDER="YES"|"NO"

FRAME-taggen:

FRAME-taggen Attribut: BORDERCOLOR="färg" FRAMEBORDER="YES"|"NO" MARGINHEIGHT="pixlar" MARGINWIDTH="pixlar" NAME="ramnamn" NORESIZE SCROLLING="YES"|"NO"|"AUTO" SRC="filnamn"

Övningar – Frames:

Övningar – Frames Se läroboken

Formulär:

Formulär Används för att användare skall kunna skicka data till en www-server Formulärdata kan skickas på två sätt GET – läggs till efter URL'en POST – läggs till en ny header i huvudet Används även för client-side script (DHTML) Skapas med <FORM> taggen

Hur skickas data?:

Hur skickas data? WWW server Klient HTTP förfrågning http://www.server.com?namn=Sven%20Svensson&... Skickar formuläret Data processas av program

Formulärelement:

Formulärelement Textrutor Lösenordsrutor Radioknappar Kryssrutor Rullgardiner Flervalsrutor Textfält Bekräfta-knapp Ångra-knapp

FORM-taggen:

FORM-taggen Skapar formuläret och beskriver hur och vart datat skall skickas Attribut: METHOD="GET"|"POST" ACTION="serverprogram" <FORM METHOD="GET" ACTION="cgi-bin/form.cgi">

Textrutor:

Textrutor Vanligast för textinmatning Attribut: NAME="namn" SIZE="tecken" MAXLENGTH="tecken" VALUE="text" Ditt namn: <INPUT TYPE="text" NAME="namn">

Knappar:

Knappar För att skicka formulär, rensa formulär eller exekvera clientside scirpts <INPUT TYPE="submit"> <INPUT TYPE="reset"> <INPUT TYPE="button" VALUE="Kör skript" ONCLICK="skript">

Lösenord:

Lösenord Likadan som textrutor med "dold" text Attribut: NAME="namn" SIZE="tecken" MAXLENGTH="tecken" VALUE="text" Lösenord: <INPUT TYPE="password" NAME="namn">

Radioknappar:

Radioknappar Knappgrupper med ETT möjligt val Attribut: NAME="namn" VALUE="värde" CHECKED <INPUT TYPE="radio" NAME="smak" VALUE="banan">Banan <INPUT TYPE="radio" NAME="smak" VALUE="jordgubb">Jordgubb <INPUT TYPE="radio" NAME="smak" VALUE="vanilj">Vanilj

Kryssrutor:

Kryssrutor Knappgrupper med FLERA möjliga val Attribut: NAME="namn" VALUE="värde" CHECKED <INPUT TYPE="checkbox" NAME="tech">Tekniknytt <INPUT TYPE="checkbox" NAME="fun">Skämt <INPUT TYPE="checkbox" NAME="stock">Aktiekurser

Knappar med bilder:

Knappar med bilder BUTTON är ett alternativ till SUBMIT och RESET Finns bara i HTML version 4 <BUTTON TYPE="submit"> <IMG SRC="bild.gif"> </BUTTON>

Rullgardiner:

Rullgardiner Dropdown-menyer med ETT möjligt val Attribut: NAME="namn" VALUE="värde" SELECTED <SELECT NAME="rullgardin"> <OPTION SELECTED>Välj färg <OPTION VALUE="1">Röd <OPTION VALUE="2">Grön <OPTION VALUE="3">Blå </SELECT>

Multichoice:

Multichoice Menyruta med FLERA möjliga val Attribut: NAME="namn" VALUE="värde" SELECTED <SELECT NAME="rullgardin" MULTIPLE> <OPTION SELECTED>Välj färg <OPTION VALUE="1">Röd <OPTION VALUE="2">Grön <OPTION VALUE="3">Blå </SELECT>

View More Presentations

Presentation Statistics

loading.....