Skapa din första webbsida – HTML5 semantisk uppmärkning

⇓ OBS! ⇓

Den där blå remsan nere på botten av sidan innehåller en HTML & CSS redigerare och fungerar så här – om du vill visa/gömma redigeraren kan du göra det genom att klicka på den blå remsan där det står “Klicka här för att visa/gömma redigerare” – klicka på fliken medtexten “HTML Redigerare” och skriv in din HTML, klicka på fliken med texten “CSS Redigerare” och skriv in din CSS och för att se resultat klickar du på fliken där det står “Resultat visas här”.

 

HTML5 kan se ut som raketforskning för den oinvigde, men det är inte det, jag lovar ! Om du klarade av algebra i högstadiet kommer du att kunna du räkna ut det här. När du har slutfört den här guiden kommer du att ha en grundläggande förståelse för HTML5 och vet hur man gör för att skapa ett ramverk för en webbsida. Du får ut mest av den här guiden om du kan en del HTML sedan innan, men det är inte nödvändigt då den här guiden kommer att vara rätt så grundlig.

Om du vill hitta en bra bok om HTML5 så har några förslag efter artikeln.

Författaren Daniel Karjanlahti – “Mitt mål med cr8gr8designs.com är att ge dig och alla andra som vill, en bra startpunkt att utgå ifrån när det gäller webbutveckling”

Vi gå igenom dom nya elementen som har tillkommit i HTML version 5, eller mer känd som som HTML5.

Vårat mål blir att skapa en blogg sida, och här är en mockup av den:

Bild - HTML5 blog mockup uppmärkt

Vi kommer att använda oss av dom nya elementen i stället för div för att kapsla in de olika delarna av sidan och här är en lista över dom:

<header>  <!--  -->
<hgroup>  <!--  -->
<nav>     <!--  -->
<aside>   <!--  -->
<section> <!--  -->
<article> <!--  -->
<footer>  <!--  -->

 

<header>

Header är en huvuddel av något, som t.ex. en hemsida, sektion eller en artikel. Där har man tidigare använt en div med id- eller klass- namn header. Oftast har man en huvudrubrik som t.ex. h1 eller h2 i en header. Du kan även ha en kort sammanfattning, sidans meny, en innehållsförteckning, författarnamn och datum i en header. Det går även att ha flera header:s på samma sida, som t.ex. en header för hela sidan med logo, plus en header för varje artikel med rubrik, författare och datum.

Okej, som du såg i vår mockup har vi in en header högst upp på sidan så då är det vettigt att vi placerar den först:

<!doctype html>
<html lang="sv">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 skelett</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <!-- Vi använder body som en behållare för hela sidan -->
    <body id="wrapper">
       <header id="main-header">
          <!-- Vi lägger in logo bilden först i header:n -->
          <img src="logo-130x75.png" alt="Logotype" />
          <h1>Huvudrubrik</h1>
       </header>
    </body>
</html>

Nu kan det vara bra att lägga till lite CSS för att särskilja header:n från allt annat:

* {
    /* 
     * box-sizing syftar på box-modellen (padding, margin och border)
     * och vi sätter den till border-box d.v.s. att man ska inkludera
     * padding, margin och border till givna mått
     */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/* 
 * visa HTML5 element som => block element, 
 * för äldre webbläsare vet inte hur den ska visa dom 
 */
header, section, footer, aside, nav,
article, figure, audio, video, canvas {
    display:block;
}

/* nu börjar vi stylingen */
body {
    /* ange bredd för body */
    width:768px;
    /* 
     * centrera body med margin auto för vänster & höger
     * och ge den 1em margin upp och ner 
     */
    margin:1em auto;
}
/* vi använder in ID på header:n för vi ska ha fler header:s */
header#main-header {
    width:100%;
    /* vi sätter minimi höjd till 125px */
    min-height: 125px;
    /* bakgrundsfärg så att vi ser header:n */
    background:rgb(126,123,255);
} 
/* 
 * > betyder img måste vara direkt nästlad under headern
 * det är h1 också vilket gör dom till syskon & båda är barn till header:n
 */
#main-header > img {
    /* float left för bilden */
    float:left;
    /* marginaler > centrera vertikalt & lite mellanrum till vänster */
    margin-left:1em;
    margin-top:25px;
}
#main-header > h1 {
    /* placera rubriken ungefät i mitten */
    margin-left:5em;
    padding-top:15px;
    /* 
     * line-height 120px ger oss lite utrymme upp & ner
     * det här står alla värden för i kortformen font:
     * font-weight = 100 | font-size = 3.5em | line-height = 140% | font-family
     */
    font:100 3.5em/140% 'Helvetica neue', Helvetica;
}

 

Screen-Shot: main-header
Bild: header ID => main

 

 

<nav>

Nav är en förkortning för navigation, och taggen används för en sektion av sidan som länkar till andra sidor, även kallad meny. Menyer brukar placeras högst upp och/eller längst ner på sidan, men även i höger- eller vänster- sidofält (vi har en sidofält som en <aside>). Man får dock ha flera nav på en sida.

Nav ska användas för länkar till andra sidor, länkar till delar inom sidan, men det är inte så att alla grupper av länkar på en sida måste vara i ett nav element. Nav elementet är lämplig endast för sektioner som består av stora navigeringsblock. Framför allt är det vanligt att i en sidfot ha en kort lista med länkar till olika sidor på en webbplats, till exempel villkoren för tjänsten, hemsidan, och en upphovsrättssida, och då är en footer element tillräckligt i stället för ett nav elementet.  källa – W3C Wiki

Jag tänkte att vi ska nästla vår menu på botten av header:n, och har i den ett par symboliska länkar till sidor:

<!doctype html>
<html lang="sv">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 skelett</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body id="wrapper">
        <header id="main-header">
            <img src="logo-130x75.png" alt="Logotype" />
            <h1>Huvudrubrik</h1>
            <nav>
                <ul id="nav">
                    <li><a href="#home">Start</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#about">Om Oss</a></li>
                    <li><a href="#contact">Kontact</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

Och nu ska vi placera den oordnade listan horisontellt genom att sätta float left på list artiklarna ( li ):

/* höjden är den viktigaste biten för ul */
#nav {
	height:2.6em;
}

#nav li {
	/* ta bort list punkterna */
	list-style-type:none;
	float:left;
	line-height:2.6em;
	padding-left:.75em;
	color:#777;
}
#nav li a {
	/*  */
	display:block;
	padding:0 15px 0 0;
}
#nav li a:link,#crumbs li a:visited{
	text-decoration:none;
	color:#fff;
}
#nav li a:hover,#crumbs li a:focus{
	color:#ccc;
}

 

Screen-Shot-main-navigation
Bild: navigation ID => nav

 

 

<section>

“Section representerar en generisk dokument eller applikations del. I detta sammanhang är en sektion en tematisk gruppering av innehåll, vanligtvis med sidhuvud, eventuellt med en sidfot. Exempel är kapitel i en bok, de olika flikar i en flikdialogruta, eller de numrerade sektionerna i en avhandling. En webbplats startsida kan delas upp i sektioner för introduktion, innehållsinformation, reklamspalten, nyhetsområdet eller en sektion med länkar till olika relevanta blanketter/dokument. Section elementet är inte en generisk kontainer- element såsom en div, utan definierar avsnitt i ett dokument, som till exempel kapitel, sidhuvuden, sidfot eller andra delar av dokumentet” källa – HTML5 Doctor (min egen tolkning)

Så den borde vara alldeles utmärkt för vår huvudsektion med artikeln.

<!doctype html>
<html lang="sv">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 skelett</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body id="wrapper">
        <header id="main-header">
            <img src="logo-130x75.png" alt="Logotype" />
            <h1>Huvudrubrik</h1>
            <nav>
                <ul id="nav">
                    <li><a href="#home">Start</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#about">Om Oss</a></li>
                    <li><a href="#contact">Kontact</a></li>
                </ul>
            </nav>
        </header>

        <!-- Här börjar huvud-sektionen -->
        <section id="content">
            <img src="yellow-rose.jpg" alt="Gul ros">
            <header class="article-header">
                <h1>Artikel Rubrik</h1>
                <span class="author">
                <a href="mailto:mail@namn.com">
                    Av - Daniel Karjanlahti</a>&nbsp;
                    <time datetime="2014-10-06">6 Sep 2014</time>
                </span>
            </header>
            <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
<br /><br />
Det är ett välkänt faktum att läsare distraheras av läsbar text på en sida när man skall studera layouten. Poängen med Lorem Ipsum är att det ger ett normalt ordflöde, till skillnad från "Text här, Text här", och ger intryck av att vara läsbar text. Många publiseringprogram och webbutvecklare använder Lorem Ipsum som test-text, och en sökning efter "Lorem Ipsum" avslöjar många webbsidor under uteckling. Olika versioner har dykt upp under åren, ibland av olyckshändelse, ibland med flit (mer eller mindre humoristiska).
<br /><br />
I motsättning till vad många tror, är inte Lorem Ipsum slumvisa ord. Det har sina rötter i ett stycke klassiskt litteratur på latin från 45 år före år 0, och är alltså över 2000 år gammalt. Richard McClintock, en professor i latin på Hampden-Sydney College i Virginia, översatte ett av de mer ovanliga orden, consectetur, från ett stycke Lorem Ipsum och fann dess ursprung genom att studera användningen av dessa ord i klassisk litteratur. Lorem Ipsum kommer från styckena 1.10.32 och 1.10.33 av "de Finibus Bonorum et Malorum" (Ytterligheterna av ont och gott) av Cicero, skriven 45 före år 0. Boken är en avhandling i teorier om etik, och var väldigt populär under renäsanssen. Den inledande meningen i Lorem Ipsum, "Lorem Ipsum dolor sit amet...", kommer från stycke 1.10.32.</p>
        </section><!-- slut huvud-sektionen -->
    </body>
</html>

Och CSS:

section#main-article {
  background-color:rgb(125,180,154);
  padding:.5em;
}
section#main-article img {
  float:right;
  margin:.5em;
}
section#main-article header {
  width:50%;
  text-align:left;
  padding-left:1em;
}
screen-shot Huvud sektion
Bild: Huvud sektion

 

 

<article>

Article elementet utgör en komponent i en sida som består av en sluten komposition i ett dokument, sida, applikation eller webbplats och som är avsedd att vara oberoende utdelningsbara eller återanvändbara, t.ex. i en syndikering. Detta skulle kunna vara ett blogginlägg, en tidskrift eller tidningsartikel, ett blogginlägg, en kommentar från en användare, en interaktiv widget eller gadget, eller någon annan oberoende objekt av innehåll.  källa HTML5 Doctor

Vi ska ha tre kommentarblock som vi omsluter med article elementet och dom tre är alla omslutna av en section:

<!doctype html>
<html lang="sv">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 skelett</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <!-- Vi använder body som en behållare för hela sidan -->
    <body id="wrapper">
       <header id="main-header">
          <!-- Vi lägger in logo bilden först i header:n -->
          <img src="logo.png" alt="Logotype" />
          <h1>Huvudrubrik</h1>
	  <nav>
                <ul id="nav">
                    <li><a href="#home">Start</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#about">Om Oss</a></li>
                    <li><a href="#contact">Kontact</a></li>
                </ul>
           </nav>
       </header>

       <section id="main-article">
            <img src="yellow-rose.jpg">
            <header class="article-header">
                <h1>Artikel Rubrik</h1>
                <span class="author">
                <a href="mailto:mail@namn.com">
                    Av - Daniel Karjanlahti</a>&nbsp;
                    <time datetime="2014-10-06">6 Sep 2014</time>
                </span>
            </header>
            <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.<br /><br />
Det är ett välkänt faktum att läsare distraheras av läsbar text på en sida när man skall studera layouten. Poängen med Lorem Ipsum är att det ger ett normalt ordflöde, till skillnad från "Text här, Text här", och ger intryck av att vara läsbar text. Många publiseringprogram och webbutvecklare använder Lorem Ipsum som test-text, och en sökning efter "Lorem Ipsum" avslöjar många webbsidor under uteckling. Olika versioner har dykt upp under åren, ibland av olyckshändelse, ibland med flit (mer eller mindre humoristiska).<br /><br />
I motsättning till vad många tror, är inte Lorem Ipsum slumvisa ord. Det har sina rötter i ett stycke klassiskt litteratur på latin från 45 år före år 0, och är alltså över 2000 år gammalt. Richard McClintock, en professor i latin på Hampden-Sydney College i Virginia, översatte ett av de mer ovanliga orden, consectetur, från ett stycke Lorem Ipsum och fann dess ursprung genom att studera användningen av dessa ord i klassisk litteratur. Lorem Ipsum kommer från styckena 1.10.32 och 1.10.33 av "de Finibus Bonorum et Malorum" (Ytterligheterna av ont och gott) av Cicero, skriven 45 före år 0. Boken är en avhandling i teorier om etik, och var väldigt populär under renäsanssen. Den inledande meningen i Lorem Ipsum, "Lorem Ipsum dolor sit amet...", kommer från stycke 1.10.32.</p>
        </section><!-- slut huvud-artikeln -->

        <!-- Här börjar kommentarblocket -->
	<section id="comment-block">
            <article class="comment yellow">
                <h2>Kommentar</h2>
                <span class="author"><a href="mailto:mail@namn.com">Av Namn På Kommentatör</a>&nbsp;<time datetime="2014-01-14">14 Jan 2014</time></span>
                <p>Kommentar innehåll ska in här...</p>
            </article>
            <article class="comment yellow">
                <h2>Kommentar</h2>
                <span class="author"><a href="mailto:mail@namn.com">Av Namn På Kommentatör</a>&nbsp;<time datetime="2014-10-06">6 Sep 2014</time></span>
                <p>Kommentar innehåll ska in här...</p>
            </article>
            <article class="comment yellow">
                <h2>Kommentar</h2>
                <span class="author"><a href="mailto:mail@namn.com">Av Namn På Kommentatör</a>&nbsp;<time datetime="2014-06-22">22 Jun 2014</time></span>
                <p>Kommentar innehåll ska in här...</p> 
            </article>
        </section>
    </body>
</html>

Och så lite CSS på det:

section#comment-block {
	width:60%;
	float:left;
}
#comment-block article {
	width:100%;
	background-color:rgb(255,255,118);
	margin-bottom:1em;
	padding:.5em;
}
#comment-block article:last-of-type {
	/*margin-bottom:0;*/
}
ScreenShot-comment-block
Bild: comment-block

 

 

 

<aside>

Nu kommer vi till den högra sidofältet som vi använder en aside till.

Representerar en sektion av en sida som består av innehåll som är tangentiellt relaterad till innehåll kring aside elementet, och som kan betraktas separat från innehållet. Sådana avsnitt är ofta representerade som sidofält i tryckt typografi. källa – HTML5 Doctor

<!doctype html>
<html lang="sv">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 skelett</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body id="wrapper">
       <header id="main-header">
          <img src="logo.png" alt="Logotype" />
          <h1>Huvudrubrik</h1>
	  <nav>
                <ul id="nav">
                    <li><a href="#home">Start</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#about">Om Oss</a></li>
                    <li><a href="#contact">Kontact</a></li>
                </ul>
           </nav>
       </header>

       <section id="main-article">
            <img src="yellow-rose.jpg">
            <header class="article-header">
                <h1>Artikel Rubrik</h1>
                <span class="author">
                <a href="mailto:mail@namn.com">
                    Av - Daniel Karjanlahti</a>&nbsp;
                    <time datetime="2014-10-06">6 Sep 2014</time>
                </span>
            </header>
            <p>Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.<br /><br />
Det är ett välkänt faktum att läsare distraheras av läsbar text på en sida när man skall studera layouten. Poängen med Lorem Ipsum är att det ger ett normalt ordflöde, till skillnad från "Text här, Text här", och ger intryck av att vara läsbar text. Många publiseringprogram och webbutvecklare använder Lorem Ipsum som test-text, och en sökning efter "Lorem Ipsum" avslöjar många webbsidor under uteckling. Olika versioner har dykt upp under åren, ibland av olyckshändelse, ibland med flit (mer eller mindre humoristiska).<br /><br />
I motsättning till vad många tror, är inte Lorem Ipsum slumvisa ord. Det har sina rötter i ett stycke klassiskt litteratur på latin från 45 år före år 0, och är alltså över 2000 år gammalt. Richard McClintock, en professor i latin på Hampden-Sydney College i Virginia, översatte ett av de mer ovanliga orden, consectetur, från ett stycke Lorem Ipsum och fann dess ursprung genom att studera användningen av dessa ord i klassisk litteratur. Lorem Ipsum kommer från styckena 1.10.32 och 1.10.33 av "de Finibus Bonorum et Malorum" (Ytterligheterna av ont och gott) av Cicero, skriven 45 före år 0. Boken är en avhandling i teorier om etik, och var väldigt populär under renäsanssen. Den inledande meningen i Lorem Ipsum, "Lorem Ipsum dolor sit amet...", kommer från stycke 1.10.32.</p>
        </section><!-- slut huvud-artikeln -->

	<section id="comment-block">
            <article class="comment yellow">
                <h2>Kommentar</h2>
                <span class="author"><a href="mailto:mail@namn.com">Av Namn På Kommentatör</a>&nbsp;<time datetime="2014-01-14">14 Jan 2014</time></span>
                <p>Kommentar innehåll ska in här...</p>
            </article>
            <article class="comment yellow">
                <h2>Kommentar</h2>
                <span class="author"><a href="mailto:mail@namn.com">Av Namn På Kommentatör</a>&nbsp;<time datetime="2014-10-06">6 Sep 2014</time></span>
                <p>Kommentar innehåll ska in här...</p>
            </article>
            <article class="comment yellow">
                <h2>Kommentar</h2>
                <span class="author"><a href="mailto:mail@namn.com">Av Namn På Kommentatör</a>&nbsp;<time datetime="2014-06-22">22 Jun 2014</time></span>
                <p>Kommentar innehåll ska in här...</p> 
            </article>
        </section>

	<aside>
            <h2>Sidospalt</h2>
            <ul>
		<li>Nummer #01</li>
		<li>Nummer #02</li>
		<li>Nummer #03</li>
		<li>Nummer #04</li>
		<li>Nummer #05</li>
		<li>Nummer #06</li>
	    </ul>
        </aside>
    </body>
</html>

Och så klart ska vi få det att bli snyggt med CSS:

aside {
  width: 36%;
  height: 467px;
  float:right;
  background-color:rgb(255,122,255);
}
aside h2 {
  text-align:center;
}
aside ul {
  list-style-type:none;
  padding-left:0;
  line-height:200%;
  font-size:1.5em;
  width:100%;
}
aside ul li {
  border:1px solid #ccc;
  padding-left:.5em;
}
Screen-Shot-aside
Screen-Shot-aside

 

 

<footer>

Nu är det dags för den nedre delen av sidan, d.v.s. sidfoten. Och här kommer hela koden:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5 skelett</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <!-- Vi använder body som en behållare för hela sidan -->
    <body id="wrapper">
        <header id="main-header">
            <img src="logo.jpg" alt="Logotype" />
            <h1>Huvudrubrik</h1>
            <nav id="main-nav">
                <ul>
                    <li><a href="#home">Start</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#about">Om Oss</a></li>
                    <li><a href="#contact">Kontact</a></li>
                </ul>
            </nav>
        </header>
        <section id="content">
            <img src="bild.jpg">
            <header class="article-header">
                <h1>Artikel Rubrik</h1>
                <span class="author">
                <a href="mailto:mail@namn.com">
                    Av - Daniel Karjanlahti</a>&nbsp;
                    <time datetime="2014-10-06">6 Sep 2014</time>
                </span>
            </header>
            <p>Most of its text is made up from sections 1.10.32–3 of Cicero's De finibus bonorum et malorum (On the Boundaries of Goods and Evils; finibus may also be translated as purposes). Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit is the first known version ("Neither is there anyone who loves grief itself since it is grief and thus wants to obtain it"). It was found by Richard McClintock, a philologist, director of publications at Hampden-Sydney College in Virginia; he searched for citings of consectetur in classical Latin literature, a term of remarkably low frequency in that literary corpus.</p>
        </section>
        <section id="comment-block">
            <article class="comment">
                <h2>Kommentar</h2>
                <span class="author"><a href="mailto:mail@namn.com">Av Namn På Kommentatör</a>&nbsp;<time datetime="2014-01-14">14 Jan 2014</time></span>
                <p>Kommentar innehåll ska in här...</p>
            </article>
            <article class="comment">
                <h2>Kommentar</h2>
                <span class="author"><a href="mailto:mail@namn.com">Av Namn På Kommentatör</a>&nbsp;<time datetime="2014-10-06">6 Sep 2014</time></span>
                <p>Kommentar innehåll ska in här...</p>
            </article>
            <article class="comment">
                <h2>Kommentar</h2>
                <span class="author"><a href="mailto:mail@namn.com">Av Namn På Kommentatör</a>&nbsp;<time datetime="2014-06-22">22 Jun 2014</time></span>
                <p>Kommentar innehåll ska in här...</p> 
            </article>
        </section>
        <aside>
            <h2>Sidospalt</h2>
            <aside>
            <h2>Sidospalt</h2>
            <ul>
		<li>Nummer #01</li>
		<li>Nummer #02</li>
		<li>Nummer #03</li>
		<li>Nummer #04</li>
		<li>Nummer #05</li>
		<li>Nummer #06</li>
	    </ul>
        </aside>
        </aside>
        <footer>
            <!-- Sidfot med copyright &amp; författare -->
            <span>&copy; <time datetime="2014-12-12">12 Dec 2014</time><a href="mailto:admin@mail.com">Daniel K</span>
        </footer>
    </body>
</html>

 

Länkar:

PDF bok – Dive into HTML5 av Mark Pilgrim

PDF böcker – IT eBooks info search engine (HTML5 böcker)

Skapa din första webbsida – HTML5 semantisk uppmärkning

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Rulla till toppen