<html encoding="utf-8">
<head>
<title> Marias HTML </title>
</head>
<body>
<h1>
Marias introduktion till HTML (det här är rubrik 1, dvs <H1>)
</h1>
<p>
(Första stycket) <br>
HTML (hypertext markup language) är ett programmeringsspråk som används för att skapa webbsidor. Baskunskaperna är relativt lätta att tillägna sig. Jag ska här försöka dela med mig av det lilla jag lärt mig.
</p>
<p>
(Andra stycket)<br>
En grundprincip är att HTML används för två saker samtidigt: 1) att producera innehåll till en webbsida och 2) att definiera hur innehållet ska se ut. Det här har Michael Wesch illustrerat mycket bra på sin YouTube-video, kallad <a href=" http://www.youtube.com/watch?v=6gmP4nk0EOE ">The Machine</a> (Om det här är nytt för dig, lönar det sig att se videon flera gånger, och ta paus för att hinna smälta innehållet!)
</p>
<p>
Ett programmeringsspråk går ut på att man åt datorn ger kommandon om vad dator ska göra. Alla HTML-kommandon skrivs inom ett slags klammertecken, och så gott som alla kommandon har både en början , <kommandot> och ett slut , </kommandot slut> (Observera snedstrecket innanför klammertecknet på slutkommandot!).
</p>
<p>
Då man vill programmera en webb-sida skriver man ett HTML-dokument. Alla HTML-dokument börjar på samma sätt, med ett första kommando, som berättar att det här är ett HTML-dokument. Sedan kommer titeln, som är osynlig för den som ser webbsidan på nätet:
</p>
<p>
<HTML>
<HEAD>
<TITLE> Namnet på dokumentet </TITLE>
</HEAD>
</HTML>
</p>
<p>
Det ovanstående var ett HTML-dokument utan något som helst innehåll (notera slutkommandot, </HTML>!) Om man alltså vill ha ett innehåll på sidan, ska det komma före HTML-sidans slutkommando. Innehållet kallas för webb-sidans "kropp" (body), och innanför "kropp" -kommandot kommer allt som sidan innehåller. Den enklaste formen av en webbsida skapad med HTML skulle då kunna se ut så här:
</p>
<p>
<pre>
<HTML>
<HEAD>
<TITLE> Namnet på dokumentet </TITLE>
</HEAD>
<BODY>
Hej! Det här är Marias webbsida.
</BODY>
</HTML>
</pre>
</p>
<p>
Förutom dessa helt primära kommandon finns även några baskommandon som tillsammans utgör ett bra startpaket om man vill pröva på att programmera sin egen första webb-sida med HTML, dvs kommandon som definierar hur texten ska se ut, hur man kan skapa tabeller och hyperlänkar (eller bara länkar) samt hur man infogar bilder. Mera om dessa här nedan.
</p>
<h2>Utseendet på texten</h2>
<p>
Kommandon som definerar texttyp är bla <B>, <U> och <I> för fet (bold), understreckad (underline) och kursiverad (italic) stil. <H1>, <H2>, <H3> osv är tecken på rubriker (heading 1, 2, 3 osv), och <P> definierar stycke (parpgraph). Två nyttiga komandon är de som definerar tabell och hyperlänk, <TABLE> och <A>. Kom alltid ihåg slutkommandona, </slutkommando>!
</p>
<p>
Ett kommando som inte kräver slutkommando är <BR>, som står för radbyte (break).
</p>
<p>
Här kommer prov på de olika stilarna:
</p>
<p>
<b>Fet stil</b>, <u>understreckad</u> och <i>kursiverad</i>. Så ett radbyte <br>
mitt i meningen, och </br>
ett till. Här nedanför ska jag försöka göra hyperlänkar och tabeller.
</p>
<h2>Tabeller</h2>
<p>
Nu ska jag försöka sätta in en tabell, och då skriver jag först kommandot för en tabell <TABLE>. För att få tabellens konturer att synas definerar jag dem med kommandot BORDER="1", och så vill jag också definera bredden på tabellen och skriver WIDTH="600" (det betyder 600 punkter, vilket är ungefär så många punkter det ryms på en A4). Sammanskrivet blir det så mycket som "<TABLE BORDER="1" WIDTH = "300">. Alternativt kunde jag definiera bredden i procent, vilket betyder att tabellens bredd anpassar sig till hur stort min webbläsares fönster är. I så fall skulle jag skriva WIDTH = “100%” (eller 50% eller vad jag tycker är lämpligt).
</p>
<p>
Tabellens rader skapar med kommandot <TR>, kolumner med <TD>
Nu ska vi se om jag lyckas skapa en tabell med två kolumner och två rader..
</p>
<table border="1" width = "300">
<tr>
<td> första raden, första kolumnen </td>
<td> första raden, andra kolumnen </td>
<tr>
<tr>
<td> andra raden, första kolumnen </td>
<td> andra raden, andra kolumnen </td>
<tr>
</table>
<h2> Länkar</h2><p>
Hyperlänkar ska jag också klara av.. <a href="http://abo.fi">Här</a> finns en länk till Åbo Akademi, och den har jag kodat så här:<br>
<A HREF="http://abo.fi"> Här </A>
</p>
<h2> Bilder</h2>
<p>
Och bilder.. Hur var det nu man satte in bilder? Först ska jag ha en bild som jag kan länka till (på min dator om jag gör html-dokumentet lokalt, endast för mig, eller på internet om jag vill göra ett riktigt exempel) Här kommer bilden: <br>
<img src="http://farm4.static.flickr.com/3456/3371727792_43847d13e4_m.jpg" width="304" height="228">
</p>
<p>
För att få fram bilden använde jag bildkommandot <IMG SRC="(adressen där datorn ska söka fram bilden)">., där img står för bild (image) och src för källa (source). Dessutom definierade jag hur stor bilden ska vara på skärmen med kommandona WIDTH="304" HEIGHT="228"(siffrorna står för punkter på skärmen, width är bredd och height är höjd)
</p>
<p>
Bilden fanns på Flickr, med en CC (Creative Commons) licens, och den var tagen av signaturen “Mlle Bé”.)
</p>
<p>
För att ta del av hur någon sida programmerats, tryck på "View" "Page source" på webbläsarens (browserns) verktygsbalk.
</p>
<p>
Det var min första kontakt med HTML. Jag tyckte det var mycket roligt! Hoppas du också kan ha någon glädje av detta dokument!
</p>
<p>
P.S: Om du vill lära dig mera, kan jag tipsa om en webbsida, <a href=”http://www.w3schools.com/">w3schools</a> där man kan hitta guider, inte bara i html utan också allt möjligt annat som man kan använda till programmering av webbsidor. Enjoy!
</p>
</body>
</html>
