HTML Grunder

HTML (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:
http://sv.wikipedia.org/wiki/HTML

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:

  • Ett Text program (OBS! Använd inte Word). Anteckningar funkar bra men har du möjlighet så kan jag rekommenderar att du laddar ner Notapad++ eller Ermald editor
  • En webbläsare, helst flera så att du kan jämföra resultaten då webbläsare kan skilja sig åt hur dom ritar upp sidor. Dom vanligaste webbläsarna idag är: Internet Explorer (finns i alla Windows datorer), Firefox, Safari, Opera och Google Chrome
  • Ett bildbehandlingsprogram. Adobe Photoshop är dyrt program och kanske inget för nybörjare men är dagsläget fortfarande det bästa som finns. Gimp är ett gratisprogram som klarar det mesta. Fler gratisalternativ är IfranView och i värsta fall kan man använda det medföljande Windowsprogramet Paint (lite väl yxigt att anvädna i alla sammanhang)

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

Tag Förklaring
<html> ... </html> Början och slut på HTML dokument.
<head> ... </head> Dokument huvud, innehåller bland annat dokument-titel samt eventuellt andra dokumentspecifika taggar.
<body> ... </body> Dokumentkropp (body betyder kropp på engelska) är den synliga delen av HTML sidan.
<h1> ... </h1> Rubrik (header på engelska). H1 är störst och H6 är minst.
<p> ... </p> Markerar ett text stycke (paragraph på engelska)
<b> ... </b> Fet text (bold på engelska)
<i> ... </i> Kursiv text (italic på engelska)
<ul> ... </ul> Onumrerad lista (unordered list på engelska). Varje listpunkt markeras med <li> ... </li>, se exempel nedan.
<ol> ... </ol> Numrerad lista (ordered list på engelska). Varje listpunkt markeras med <li> ... </li>, se exempel nedan.

HTML Kod

Skapa 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.

Mappinställningar

Tyck på fliken "Visning" och ta bort bocken vid "Dölj filnamnstillägg för kända filtyper".

Mappinställningar

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.

Exempel 1

 

Tabeller

Det 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.

exelblad

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.

biblan01.jpg Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla suscipit sem sit amet imperdiet. Vivamus diam nisl, dignissim mattis suscipit facilisis, porta porttitor sapien. Curabitur venenatis iaculis velit, eget imperdiet mi consectetur a. Nulla erat orci, ullamcorper at semper at, accumsan vitae nibh. Ut ac massa vel mauris ornare aliquet. Vestibulum blandit, nulla in molestie vulputate, nulla augue bibendum mi, malesuada egestas ipsum sapien at mauris.

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%">
...

 

table
border="0" Anger tabellramens höjd, 0..{ett positivt heltal}. Siffran 0 betyder ingen synlig ram.
cellpadding="2" Anger cellens inre marginaler, 0..{ett positivt heltal}
cellspacing="2" Tabellramens bredd, 0..{ett positivt heltal}
bgcolor="#ffffff" Anger tabellens bakgrundsfärg, hexadecimal färgkod
width="100%", eller width="512" Tabellens bredd, antingen i procent eller ett positivt heltal som anger bredden i pixlar.
style="stilmall attribut" Mer om stilmallar senare
td
align="left" Cellinnehållets horisontella placering. Attributvärden kan vara: left, center, right.
valign="middle" Cellinnehållets vertikala placering. Attributvärden kan vara: top, middle eller bottom.
bgcolor="#ffffff" Anger cellens bakgrundsfärg, (hexadecimal färgkod)
width="25%", eller width="128" Cellens bredd, antingen i procent eller ett positivt heltal som anger bredden i pixlar. Tänk på att inte överskrida tabellens mått.
rowspan="2" Anger att cellen ska spänna över två tabellrader
colspan="2" Anger att cellen ska spänna över två tabellkolumner
style="stilmall attribut" Mer om stilmallar senare

Inbäddade Tabeller

Tabeller 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:

Stort vänsterfält
Mängd Vara
10 Äpplen
3 Päron
4 Jordgubbar
19 Bananer

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ägar

Innan 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.

URL

Uniform 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.

  1. http: talar om vilket protokoll (språk) som skall användas. I detta fall används protokollet HTTP (det vanligaste på WWW). Allt som följer efter : beror på vilket protokoll som man har angett i URLen. Andra vanliga protokoll är FTP (ftp://användarnamn:lösenord@domain/sökväg/fil) eller file:// för en lokal fil. Protokollet kan också avgöra vilket program datorn ska använda för att öppna länken, till exempel mailto: öppnar ens E-postklient.
  2. //www.heamedia.com talar om vilken domän (server/dator) vi ska leta oss fram till. Genom domännamnssystemet omvandlas domännamnet till en IP-adress (IP-adressen kan också ges direkt).
  3. /Documents/HTML/ visar mappstrukturen på serverdatorn. Snedstrecket avskiljer mappar i en hierarki.
  4. HTML_Grundkurs.html är själva HTML dokumentet som visas här på denna sida.
Mappstruktur

Mappstruktur på serverdatorn

webserver är webbserverns definierade baskatalog, även kallat rootkatalog.
Documents
är en undermapp i baskatalogen
HTML
är en undermapp till Documents

Länkar mellan dokument

Mappinnehåll

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 bilder

Att 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

img
src="en_mapp/en_bild.jpg" Sökvägen till bilden
border="0" Anger om bilden ska ha en ram eller inte. Bredd på ram, 0..{ett positivt heltal}. Siffran 0 betyder ingen synlig ram.
width="512" Anger bildens bredd i pixlar, {ett positivt heltal}
height="256" Anger bildens höjdi pixlar, {ett positivt heltal}
alt="En bild" Anger ett namnalternativ för bilden om den inte hittas.

 

 

 


"HTML Grunder", Hans E Andersson: 2010-09-30 08:49:44, ändrad: 2013-03-08 16:00:54

 

Copyright © 2005 - 2019 HEAP. Alla rätter förbehållna. Integritetspolicy