|
HTML GrunderHTML (förkortning för Hyper Text Markup Language) är ett märkspråk och webbstandard för strukturering av text, hypertext, media och inbyggda objekt på exempelvis webbsidor och i e postmeddelanden. Läs mer om HTML på Wikipedia: Syftet och grundtanken med min HTML kurs är att försöka hålla det så enkelt som det bara går i början. Jag har medvetet valt bort vissa HTML-taggar och dokument definitioner för att göra koden mer läsbar för nybörjaren. Min tanke är att denna kunskap är lättare att ta till sig efter det att man bekantat sig med, och känner sig mer bekväm med att skriva HTML. Kursen är skriven för grundskolan i Stockholm där i stort sett alla elever använder sig av Windows 7 som operativsystem. Vissa komandon är system specifika med det jag lär ut kan användas i alla operativsystem och datorer då HTML standarden inte är plattforms beroende. För att börja hacka HTML behöver du:
Det finns också en PDF version av detta dokument som du kan ladda hem här: http://www.heap.se/downloads/pdf/HTML-Grunder.pdf Grundläggande formaterings-taggar för text
HTML KodSkapa en arbetsmapp någonstans i din dator som heter "html", till exempel i hemmamappen "Dokument". Innan vi fortsätter så måste du ändra en inställning i din dator så att filnamnstillägg visas. Detta gör man under "Verktyg > Mappalternativ..." i mappfönstret. I Windows XP är Detta menyval synligt men i Windows 7 (även Vista) så måste man trycka på [alt] knappen på tangentbordet (i den aktiva mappen) för att detta ska poppa fram.
Tyck på fliken "Visning" och ta bort bocken vid "Dölj filnamnstillägg för kända filtyper".
Högerklicka i mappen och välj "Nytt > Textdokument". Byt namn på denna så att den heter "minforsta.html". Högerklicka på dokumentet och öppna det med Anteckningar eller Notepad++, markera, kopiera och klistra in koden här nedan.
<html> <head> <title>Min första sida</title> </head> <body> <h1>Rubriker H1</h1> <h2>Rubriker H2</h2> <h3>Rubriker H3</h3> <h4>Rubriker H4</h4> <h5>Rubriker H5</h5> <h6>Rubriker H6</h6> <p>Punktlistor</p> <ul> <li>Listrad 1</li> <li>Listrad 2</li> <li>Listrad 3</li> </ul> <ol> <li>Listrad 1</li> <li>Listrad 2</li> <li>Listrad 3</li> </ol> <p> <b>Fet Text (Bold)</b> <br /> <i>Kursiv Text (Italic)</i> <p> <p> Lorem ipsum dolor sit amet, <b>consectetur</b> adipiscing elit... </p> <p> Aenean <i>ac lacus sed ligula</i> laoreet mollis eget sagittis est... </p> <p> Fusce rutrum purus cursus metus pretium vitae eleifend velit faucibus... </p> </body> </html>
Spara dokumentet. Öppna din webbläsare, Internet Explorer, Safari, Firefox eller vad du nu helst använder dig av. Se till att du ser både mappen du jobbar i och webbläsarfönstret. Dra och släpp ditt HTML dokument i webbläsarfönstret.
TabellerDet bästa sättet att beskriva en tabell är att likna det vid ett Exel kalkylblad. En tabell består av rader, kolumner och celler. A, B och C är kolumner. 1, 2 och 3 är rader. Cell 1 till Cell 9 är dataceller.
Denna tabell kan skrivas med HTML kod och ser då ut så här:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</table>
Tabeller är användbara till en mängd olika saker. Till exempel om man vill placera en text bredvid en bild.
Koden för detta är mycket enkel och skrivs så här:
<table> <tr> <td><img src="bild.jpg" alt="bild" /></td> <td>Lorem ipsum dolor sit amet, consectetur...</td> </tr> </table>
Några användbara avancerade attribut för tabeller. Attribut skrivs med ett mellanrum, dock utan mellanrum i attribut specificeringen. Ett exempel på tabell attribut:
<table cellpadding="2" cellspacing="2" border="0" bgcolor="#cccccc" width="100%"> ...
Inbäddade TabellerTabeller kan också bäddas in i tabeller. Detta kan med fördel användas om man vill ha en väldigt precis placering av olika objekt på en sida. Ett exempel på inbäddad tabell:
HTML koden för detta upplägg är <table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" bgcolor="#cccccc"><strong>Stort vänsterfält</strong></td>
<td>
<!-- Här kommer den inbäddade tabellen -->
<table width="100%" border="0" cellspacing="0">
<tr>
<th>Mängd</th>
<th>Vara</th>
</tr>
<tr>
<td>10</td>
<td>Äpplen</td>
</tr>
<tr>
<td>3</td>
<td>Päron</td>
</tr>
<tr>
<td>4</td>
<td>Jordgubbar</td>
</tr>
<tr>
<td>19</td>
<td>Bananer</td>
</tr>
</table>
</td>
</tr>
</table>
Länkar & SökvägarInnan vi börjar med länkar kan det vara bra att känna till lite om hur en webplats och en server fungerar. Då syftet men denna grundläggande HTML kurs är att hålla det så enkelt som det bara går så ska jag försöka undvika att gå in allt för mycket i dom tekniska termerna. URLUniform Resource Locator (URL) är den formella benämningen för en webbadress, som till exempel: http://www.heap.se/Webbmedia/Grunder/HTML_Grunder.html URL:en är konstruerad för att peka ut resurser på Internet och ange hur de kan hittas. En URL kan även användas för att hitta en fil på den egna datorn. Exempelvis URL:en "http://www.heap.se/Webbmedia/Grunder/HTML_Grunder.html" består av fyra olika delar som var och en visar olika information som är nödvändig för att hitta viss information på Internet.
Länkar mellan dokument
Det vanliga är att man skapar ett dokument som heter index.html. Detta dokument utgör huvuddokumentet för mappen och kommer att visas om inget HTML dokument angetts när man skriver: http://www.heap.se/Media/ (OBS! Notera att detta är en serverinställning så detta fungerar inte om man surfar lokalt på egen dator.) För att skriva en länk till ett annat dokument i samma mapp skriver man: <a href="HTML_Del2.html">Fortsätt till föregående sida</a> <!--eller--> <a href="HTML_Del4.html">Fortsätt till nästa sida</a> För att komma åt en fil i en annan mapp utanför den man befinner sig i. Till exempel: http://www.heap.se/Media/Video/Spela_in_TV_i_Linux.html Vi befinner oss i mappen HTML som ligger i mappen Documents. I ovanstående URL så ser vi att dokumentet vi vill komma åt ligger i mappen TV som också ligger i mappen Documents. För att länka till den kan man skriva: <a href="../TV/Spela_in_TV_i_Linux.html">Hur man spelar in TV i datorn</a> ../ betyder att vi hoppar upp en nivå i mappstrukturen ../../ betyder att vi hoppar upp 2 nivåer i mappstrukturen ../../../../../ betyder att vi hoppar upp 5 nivåer i mappstrukturen undermapp/en_till_undermapp betyder att vi går ner två steg i mappstrukturen. Inbäddade bilderAtt bädda in bilder fungerar på liknande sätt som länkar. <img src="../../bilder/landskap.png" alt="Ett landskap"> Vi befinner oss i mappen HTML. Bilden befinner sig i mappen webserver/bilder. För att komma åt den måste vi hoppa upp två nivåer, gå in i mappen bilder för att slutligen ange bildfilen som heter landskap.png. Attribut för inbäddade bilder
"HTML Grunder", Hans E Andersson: 2010-09-30 08:49:44, ändrad: 2013-03-08 16:00:54
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
