HTML är det som anger strukturen för webbsidors innehåll och står för Hyper Text Markup Language. Både utseende och innehåll styrs i HTML-koden och har alltid en start- och sluttagg.
<html> = startar sidan
</html> = avslutar sidan
<head> = header
<body> = sidan
<h1> = rubrikstorlek 1 (1 är störst och 6 är det minsta, byt bara ut siffran)
<p> = nytt textstycke (paragraph)
<html> berättar för webbläsaren att det är här som koden börjar och </html> ska alltid avsluta en sida. Fattas denna kommer sidan att visas precis som i texteditorn där du skrivit koden.
Nedan kan du se ett kort exempel på hur en HTML-kod kan se ut och vad resultatet blir
<html> = startar sidan
</html> = avslutar sidan
<head> = header
<body> = sidan
<h1> = rubrikstorlek 1 (1 är störst och 6 är det minsta, byt bara ut siffran)
<p> = nytt textstycke (paragraph)
<html> berättar för webbläsaren att det är här som koden börjar och </html> ska alltid avsluta en sida. Fattas denna kommer sidan att visas precis som i texteditorn där du skrivit koden.
Nedan kan du se ett kort exempel på hur en HTML-kod kan se ut och vad resultatet blir
Det spelar ingen roll om du skriver HTML-koder med stora eller små bokstäver.
Användbara taggar för text
<i> = kursiv stil
<b> = fet stil
<center> = centrerat
Precis som innan så ska alla taggar avslutas med ett snedstreck (</i>, </b> osv).
Användbara taggar för text
<i> = kursiv stil
<b> = fet stil
<center> = centrerat
Precis som innan så ska alla taggar avslutas med ett snedstreck (</i>, </b> osv).
HTML-koden ovan är en aning mer avancerad. Jag har bl.a. lagt in bildkälla och länkat i koden, samt redigerat typsnittet m.m.
Resultatet ser du nedan.
Resultatet ser du nedan.
För att lägga in Handelsakademins logga på sidan har jag använt mig av koden
<img src="http://www.yhguiden.se/files/school/logo/37/2479_YH14_HAK_logo.jpg" alt="handelsakademin.se">
"img src" står för image source, alltså bildkälla och det är efter det som du klistrar in länken till platsen där du hämtat bilden du vill använda.
Jag har även lagt in en länk till Handelsakademins hemsida genom följande kod
<h1 style="font-family:helvetica"><a href="http://www.handelsakademin.se/html/">Till Handelsakademin</a></h1>
Om vi går igenom koden ovan del för del
Denna HTML-fil har jag även kopplat samman med en CSS-fil (stilmall), vilken styr bakgrundsfärg etc. Detta kommer jag att berätta mer om i kommande inlägg här på bloggen.
Om du vill lära dig mer om HTML och kanske sitta och testa lite fram och tillbaka vad man kan göra med HTML-koden så är W3schools en mycket bra sida. Där finns den try it-editor som jag använt mig av i bilden ovan för att se vad koden ger för färdig sida.
Vill du ha en väldigt enkel guide i det mest grundläggande inom HTML kan du klicka här för 9 bra lektioner på webben.
<img src="http://www.yhguiden.se/files/school/logo/37/2479_YH14_HAK_logo.jpg" alt="handelsakademin.se">
"img src" står för image source, alltså bildkälla och det är efter det som du klistrar in länken till platsen där du hämtat bilden du vill använda.
Jag har även lagt in en länk till Handelsakademins hemsida genom följande kod
<h1 style="font-family:helvetica"><a href="http://www.handelsakademin.se/html/">Till Handelsakademin</a></h1>
Om vi går igenom koden ovan del för del
- h1 = största storlek på texten
- font-family:helvetica = texten får typsnittet som kallas helvetica
- <a href="adressen dit du vill länka">Vad du vill namnet på länken ska vara</a>
Denna HTML-fil har jag även kopplat samman med en CSS-fil (stilmall), vilken styr bakgrundsfärg etc. Detta kommer jag att berätta mer om i kommande inlägg här på bloggen.
Om du vill lära dig mer om HTML och kanske sitta och testa lite fram och tillbaka vad man kan göra med HTML-koden så är W3schools en mycket bra sida. Där finns den try it-editor som jag använt mig av i bilden ovan för att se vad koden ger för färdig sida.
Vill du ha en väldigt enkel guide i det mest grundläggande inom HTML kan du klicka här för 9 bra lektioner på webben.