HTML5 - Tutorial
Hyper Text Markup Language
Här kommer vi gå igenom olika tutorials för hur man skriver HTML5 koder. HTML5 är den senaste standarden för märkspråken HTML och XHTML och står för Hyper Text Markup Language som är det språket som används för att bygga upp strukturen på hemsidor. Det så kallade HTML elementen är det som är grundstenarna för att kunna bygga en webbsida i HTML. Dom karaktiseras genom taggar (<>) som skrivs till vänster och höger om elementet. HTML taggar markerar och definerar innehållet så att t.ex. rubriker och texter skall synas i webbläsarens fönster, utan att elementens taggar syns.
HTML grundstruktur
<!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Sido titel</title> </head> <body> <p>Här skriver du den kod som du vill skall synas på sidan </p> </body> </html>Exempel 1 - Rubriker
Rubriker i olika storlekar som man kan använda sig av i HTML, här använder vi oss av h1 upp till h6.
<h1>Detta är en h1 rubrik </h1 >
<h2>Detta är en h2 rubrik </h2 >
<h3>Detta är en h3 rubrik </h3 >
<h4>Detta är en h4 rubrik </h4 >
<h5>Detta är en h5 rubrik </h5 >
<h6>Detta är en h6 rubrik </h6 >
Detta är en h1 rubrik
Detta är en h2 rubrik
Detta är en h3 rubrik
Detta är en h4 rubrik
Detta är en h5 rubrik
Detta är en h6 rubrik
Exempel 2 -Textformatering och fysiska element
Här kommer vi visa olika exempel på vad man kan skriva i ett HTML dokument.
<p>Detta är text i p-taggar, som man vanligtvis använder sig av när man skriver text</p>
<b>Detta är en fet text</b >
<i>Detta är kursiv text</i >
<small>Detta är lite mindre text</small >
<u>Detta är understruken text</u >
<s>Detta är genomstruken text</s >
<br>br bryter en rad och skapar mellanrum
<hr>hr skapar ett långt streck sopm bryter av element
Detta är<em>en betoning</em > med kursiv text
Detta är<strong>en betoning</strong > med fet text
<mark>Detta markerar en text</mark > och kan också <mark>markera<mark>ett ord
<blockquote>Här kan man skriva ett vackert citat om någon/något</blockquote>
<q>Du kan också skriva ett citat på detta sätt</q >
Text med upphöjt i som t.ex. Area: 15m<sup>2</sup >
Text med nedsänkt i som t.ex. Vatten: 15m<sub>2</sub >0
Detta är text i p-taggar, som man vanligtvis använder sig av när man skriver texter
Detta är en fet text
Detta är kursiv text
Detta är lite mindre text
Detta är understruken text
Detta är genomstruken text
br bryter en rad
hr skapar ett långt streck som bryter av elementen
Detta är en betoning med kursiv text
Detta är en betoning med fet text
Detta markerar en text och kan också markera ett ord
"Här kan du skriva ett vackert citat om något eller någon."
Du kan också skriva ett citat på detta vis
Text med upphöjt i som t.ex. Area: 15m2
Text med nedsänkt i som t.ex. Vatten: H2O
Exempel 3 - Listor,punktlistor, ordnade (ol) och oordnade (ul) listor
Här visar vi olika sätt du kan strukturera upp listor på i ett HTML dokument. Notera även att här har vi lagt in rubriker i form av <h4> och <h3> och även <br> och <hr>. Dessa är ej nödvändiga när du skapar listor men här har vi gjort detta för att man på ett tydligt sätt skall se vad som står.
Här visas en oordnad lista i punkform
<ul>
<li>Här visas</li>
<li>en oordnad</li>
<li>lista</li>
</ul>
Här visas en ordnad lista som kan visas med både nummer och bokstäver
<ol>
<li>Rita mockup</li>
<li>Designa hemsidan med HTML, CSS och JS</li>
<li>Redovisa resultatet</li>
</ol>
Om du vill hoppa nummerordningen i en numrerad lista eller t.ex. börja från nummer 10
<ol start="10">
<li>Lär dig agila arbetsmetoder</li>
<li>Lär dig Github </li>
</ol>
En lista i omvänd sifferordning
<ol reversed="reversed">
<li>Lär dig HTML</li>
<li>Lär dig CSS </li>
<li>Lär dig JS</li>
</ol>
Ändra typ av lista till:
Små bokstäver
<ol type="a">
<li>Lär dig HTML</li>
<li>Lär dig CSS </li>
<li>Lär dig JS</li>
</ol>
Stora bokstäver
<ol type="A">
<li>Lär dig Agila arbetsmetoder</li>
<li>Lär dig Github </li>
<li>Lär dig Trello</li>
</ol>
Romerska siffror
<ol type="I">
<li>Lär dig pusha upp till github</li>
<li>Lär dig att commita </li>
<li>Lär dig merga ihop arbeten</li>
</ol>
Stora siffror
<ol type="1">
<li>Lär dig ha tålamod</li>
<li>Lär dig att skratta</li>
<li>Lär dig att ha roligt påvägen</li>
</ol>
<hr>
Nästlade listor, där en lista kan innehålla ytterligare en lista
<ul>
<li>Kaffe</li>
<li>Te
<ul>
<li>Svart te</li>
<li>Grönt te</li>
<li>Rött te</li>
</ul>
</li>
<li>Caffe-latte</li>
<li>Cappuccino</li>
</ul>
Här visas en oordnad lista i punkform
- Här visas
- en oordnad
- lista
Här visas en numrerad lista
- Rita mockup
- Designa hemsidan med HTML, CSS och JS
- Redovisa resultatet
Om du vill hoppa nummerordningen i en numrerad lista eller t.ex. börja från nummer 10
- Lär dig agila arbetsmetoder
- Lär dig Github
En lista i omvänd sifferordning
- Lär dig HTML
- Lär dig CSS
- Lär dig JS
Ändra typ av lista till:
Små bokstäver
- Lär dig HTML
- Lär dig CSS
- Lär dig JS
Stora bokstäver
- Lär dig Agila arbetsmetoder
- Lär dig Github
- Lär dig Trello
Romerska siffror
- Lär dig pusha upp till github
- Lär dig att commita
- Lär dig merga ihop arbeten
Stora siffror
- Lär dig ha tålamod
- Lär dig att skratta
- Lär dig att ha roligt påvägen
Nästlade listor, där en lista kan innehålla ytterligare en lista
- Kaffe
- Te
- Svart te
- Grönt te
- Rött te
- Caffe-latte
- Cappuccino
Exempel 4 - HTML formulär
Här visar vi olika sätt du kan skapa formulär i HTML.
HTML elementet <form> definierar ett HTML format som samlar in användarinmatning av olika slag.
Det viktigaste form-elementet är <input> elementet som används för att specifiera en inmatning av data från användaren så som t.ex. användarnamn eller lösenord.
Man kan placera olika typer av attribut i elementet input så som t.ex. text, submit knapp eller radio knappar.
Med elementet <select> så skapas en drop-down lista där elementet <option> skapar olika alternativ man kan välja emellan
Med HTML elementet <textarea> skapas en inmatningsruta som man kan skriva i.
Med HTML elementet <fieldset> så grupperas relaterade element till en form och skapar en box runt omkring. <legend> ger en text i ramen av den boxen
Elementet <label> definerar en beteckning för elementen <button>, <input>, <meter>, <output>, <progress>, <select>, och <textarea>.
Ett standardformulär med två rutor för namn och en knapp för att skicka
<form>action="backend.php" method="POST">
Förnamn: <input>type="text" name="firstname">
Efternamn: <input>type="text" name="firstname">
<input type="submit" value="Skicka" name="knapp">
</form>
Ett standardformulär för inloggning
<form action="action_page.php" method="POST">
Användarnamn: <input type="text" name="username" size="15" maxlength="15">
<input type="text" name="username" size="15" maxlength="15">
Lösenord: <input type="password" name="password" size="15" maxlength="15">
<input type="submit" value="Logga in">
</form>
Textruta där man kan skriva text i och sedan skicka
<form action="backend.php" method="POST" >
Skriv gärna en kommentar här: <textarea name="comments" cols="30" rows="10"> Här matas meddelande in</textarea>
<input type="submit" value="Skicka" name="messagebutton">
</form>
Radioknappar
Med radioknappar kan man bara välja ett av alternativen
<form action="backend.php" method="POST">
Vilken ögonfärg har du:
Bruna
<input type="radio" name="color" value="bruna" >
Nötbruna
<input type="radio" name="color" value="nötbruna" >
Gråa
<input type="radio" name="color" value="gråa" >
Gröna:
<input type="radio" name="color" value="gröna" >
Blåa
<input type="radio" name="color" value="blåa" >
Olikfärgade ögon
<input type="radio" name="color" value="olika" >
</form>
Kryssrutor (checkbox)
Här kan man kryssa i flera alternativ
<form action="checkbox.php" method="POST">
Kryssa i vilken/vilka allergier du har:
Pollenallergi
<input type="checkbox" name="Service" value="pollen" >
Pälsallergi
<input type="checkbox" name="Service" value="päls" >
Matallergi
<input type="checkbox" name="Service" value="matrial" >
Kontaktallergi(hud)
<input type="checkbox" name="Service" value="kontakt" >
</form>
Fieldset
Används för att gruppera relaterade element i en form och skapar en box runt de relaterade elementen
<form action="fieldset.php" method="POST" >
<fieldset>
<legend>Kontakta mig</legend>
<label for="fieldsetfirstname">Förnamn: </label>
<input type="text" name="firstname" id="fieldsetfirstname" required >
<label for="fieldsetlastname" >Efternamn: </label>
<input type="text" name="lastname" id="fieldsetlastname" required >
<label for="fieldsetemail">Email: </label>
<input type="email" name="email" id="fieldsetemail" required >
<input type="submit" value="Skicka">
</fieldset>
</form>
Drop-down lista
En lista som du kan trycka på för att få en nedåtgående lista med alternativ att välja emellan
<form action="drop_down_list.php" method="POST">
Välj den storlek du vill ha
<select name="device">
<option > option value="1">Välj Storlek</option>
<option > option value="2">X-Small</option>
<option > option value="3">Small</option>
<option > option value="4">Medium</option>
<option > option value="5">Large</option>
<option > option value="6">X-Large</option>
</select>
</form>
Datumfält
<form action="date.php">
<label for="Departure">Välj ett datum: </label>
<input input type="date" name="Departure" id="Departure">
<input type="submit" value="Skicka">
</form>
Sökfält
Två exempel på hur man kan infoga sökfält i html. I den första rutan går det att skriva och trycka enter direkt. I den andra så finns det två knappar; en sök-knapp och en rensa-knapp. Det finns även ett kryss direkt i denna sökruta som tar bort texten i fältet.
<form action="searchfield.php">
<input name="searchtext" type="text">
<input type="search" name="search" placeholder="Sök...">
<input type="submit" value="Sök">
<input type="reset" value="Rensa" >
</form>
Ladda upp en fil
På detta sätt kan du göra det möjligt att ladda upp filer via html
<form action='uploadfile.php' method='POST'>
Ladda upp en fil här:
<input type="file" name="song">
< input type="submit" value="Ladda upp">
</form>
Ett standardformulär med två rutor för namn och en knapp för att skicka
Ett standardformulär för inloggning
Textruta där man kan skriva text i och sedan skicka
Radioknappar
Med radioknappar kan man bara välja ett av alternativen
Kryssrutor (checkbox)
Här kan man kryssa i flera alternativ
Fieldset
Används för att gruppera relaterade element i ett formulär och skapar en box runt elementen.
Drop-down-lista
En lista som du kan trycka på för att få en nedåtgående lista med alternativ att välja emellan.
Datumfält
Sökfält
Två exempel på hur man kan infoga sökfält i html. I den första rutan går det att skriva och trycka enter direkt. I den andra så finns det två knappar; en sök-knapp och en rensa-knapp. Det finns även ett kryss direkt i denna sökruta som tar bort texten i fältet.
Ladda upp en fil
På detta sätt kan du göra det möjligt att ladda upp filer via html