På denna sida kommer det finnas lite grundläggande HTML som vi har gått igenom på lektionerna. Varje del finns också länk till W3Schools för att läsa ytterligare. Tanken är att ni snabbare ska kunna hitta de taggar som vi har gått igenom och som ni behöver använda er av.
Rubriker
För att skapa en rubrik i HTML använder vi oss av taggen h. Det finns 6 olika storlekar på rubriker. Taggen har också en betydelse, h betyder att det är en rubrik och siffran efter bestämmer hur viktig den är. h1 är således den största och viktigaste rubriken på en sida, vi ska bara ha en h1 per HTML-sida.
Glöm inte att stänga taggen.
<h1>Detta är den största och viktigaste rubriken.</h1>
<h2>Efter ettan så kommer tvåan som är lite mindre.</h2>
<h3>Ännu lite mindre...</h3>
<h4>...och så vidare</h4>
<h5>...</h5>
<h6>...</h6>https://www.w3schools.com/html/html_headings.asp
Brödtext (paragrafer)
Vanlig flödande text om vi till exempel ska skriva som ett inlägg eller text så använder vi taggen p som står för paragraf eller stycke. Vi kan med fördel använda flera p för att skapa flera stycken i vår text, då får vi lite mellanrum mellan styckena så det inte blir så jobbigt att läsa.
<p>Mellan p-taggarna skriver vi vanlig lite längre text. All text som inte ska vara i rubriker eller eventuellt andra taggar bör vara mellan p-taggar.</p>
<p>Det går utmärkt att ha flera p-taggar för att göra fler stycken.</p>https://www.w3schools.com/html/html_paragraphs.asp
Länkar
Länkar använder vi för att länka till egna sidor (interna länkar) på vår webbplats eller till andra sidor (externa länkar). För att länka använder vi a-taggen. Skillnaden mot det två tidigare taggarna att när vi länkar måste vi också använda attribut och attributet måste ha ett värde. Attributet vi använder när vi länkar är href och värdet är webbadressen dit vi ska länka eller om vi har en intern länkning så räcker det med filnamnet.
<a href="minsida.html">Dett blir en intern länkning till minsida.html</a>
<a href="https://w3schools.com">Och detta är en extern länkning till W3Schools.</a>På markupen kan vi se att attributet blir grönt och värdet är blått. Färgen på dessa styrs av editorn så för att det syns så här behöver inte betyda att det är likadant i din editor.
https://www.w3schools.com/html/html_links.asp
Bilder
En hemsida utan bilder kan bli lite tråkig. För att lägga in bilder så använder vi oss av img-taggen. Även här behöver vi använda attribut för att bestämma vilken bild vi ska visa. Det är snarlikt som när vi länkar men attributet här heter src. På bilder ska vi också ha ett till attribut, detta heter alt och värdet på det är vanlig text som ska förklara vad bilden visar. Bilder är något som vi inte behöver stänga.
<img src="minbild.jpg" alt="Förklaring vad min bild föreställer">
<img src="https://grillska.se/minbild.jpg" alt="En bild på som ligger på en annan sida och föreställer en byggnad">"https://www.w3schools.com/html/html_images.asp
På ovanstående markup så är värdet minbild.jpg, det betyder att filnamnet på bilden är minbild.jpg och att bilden är i samma mapp som HTML-filen som jag redigerar. Ligger däremot bilden i en undermapp från min HTML-fil så behöver jag berätta det i värdet. Heter mappen exempelvis bilder så blir det bilder/minbild.jpg
<img src="bilder/minbild.jpg" alt="Förklaring vad min bild föreställer">Formatering
Om vi vill förändra vår text i exempelvis ett stycke så kan vi formatera texten. Vi kanske vill få texten kursiv (lutande text/skrivstil) eller fet stil. Det finns flera olika men nedan är några av de vanligaste.
<b>Denna texten blir fet stil</b>
<strong>Denna text blir också fet stil men med strong så betyder den också att den är viktig</strong>
<i>Denna text är kursiv</i>När vi arbetar med formatering är det vanligt att vi har element i varandra så kallade nested elements. Det betyder alltså att exempelvis b-taggen finns mellan p-taggarna som nedan.
<p>Här börjar mitt stycke. Men i mitt stycke ske det vara <b>fet stil</b> och sen är det slut</p>Läs mer om formatering på W3Schools – https://www.w3schools.com/html/html_formatting.asp
Listor
I HTML kan vi göra två olika listor, det är punktlista eller numrerad lista. För att ändra från nummer till punkter är det bara en liten del vi behöver förändra. När jag skrev om formatering innan skrev jag om nested elements. När vi arbetar med listor kommer vi också använda det. För övrigt kommer vi i slutet av kursen ha många nested elements för att kunna bygga en hemsida.
Listor görs med taggen ul eller ol, ul berättar att det är en punktlista och står för unordered list. Ol står för ordered list och då blir det siffror istället. Vi måste också bestämma vad som ska finnas i listan och det gör vi med li, för varje li får jag en ny punkt eller nummer.
<ul>
<li>Detta blir första punkten</li>
<li>Och detta blir andra</li>
<li>Ju fler li jag gör desto fler punkter</li>
<li>Jag kan fortsätta ända tills jag stänger min ul som nedan</li>
</ul>Den lilla ändringen jag behöver göra från ovanstående för att det ska bli siffror istället för punkter är att byta ul till ol.
<ol>
<li>Detta blir siffran, alltså 1</li>
<li>Och detta blir nummer två</li>
<li>Ju fler li jag gör desto fler siffror</li>
<li>Jag kan fortsätta ända tills jag stänger min ul som nedan</li>
</ol>