Nybörjarens guide till webbdesign Del 1

Under hela serien kommer du att lära dig hur du skapar en webbplats med det senaste inom webbdesignsteknik (HTML5 och CSS3). Denna serie riktar sig till dem med absolut ingen tidigare kunskaper om webbdesign.

Finns även i serien:

Nybörjarens guide till webbdesign: Del 1
Nybörjarens guide till webbdesign: Del 2
Nybörjarens guide till webbdesign: Del 3

Modern webbläsare

Eftersom vi ska skapa våra webbsidor med de senaste standarderna (HTML5 och CSS3) behöver vi en modern webbläsare som kan förstå det senaste inom webteknik.

Versioner av Microsofts Internet Explorer-webbläsare under IE8 kommer helt enkelt inte att skära den. Om du använder IE7 eller under, ladda ner en av webbläsarna nedan.

Om du redan använder en annan webbläsare, kontrollera att den överensstämmer med minimikraven nedan för bästa prestanda.

Mozilla Firefox 3+
Google Chrome
Apple Safari 4+
Opera 10+
Microsoft Internet Explorer 8

"Varför behöver jag en viss webbläsare?" du kanske frågar. Tja, eftersom HTML5 är relativt ny, förstår inte äldre webbläsare hur man läser koden och gör den till en webbsida korrekt.

Textredigerare

HTML-filer är helt enkelt textfiler med en .html-tillägg, så du behöver inte någon specialist eller dyr programvara som Dreamweaver för att skapa dem. Faktum är att datorn kommer förinstallerad med programvara som du kan skriva webbsidor i - "Anteckningsblock" på Windows, eller "TextEdit" (i "vanlig textläge") på Mac.

Medan mjukvaran är förinstallerad på din dator ska göra, det är långt ifrån bäst. Jag rekommenderar att du laddar ner Notepad ++ om du är på Windows eller TextWrangler på Mac. Båda programmen är helt gratis och erbjuder ett antal funktioner som är användbara för webbutvecklare, som syntaxmarkering, tabbad filredigering och radnummerering.

För Mac-användare rekommenderar jag starkt att du köper antingen TextMate, Coda eller Espresso. Windows-användare, försök E-TextEditor.

Introduktion till HTML

Varje webbplats på internet är skrivet i Hyper-Text Markup Language (HTML). HTML-språket har ökat och utökats under åren eftersom webben har blivit mer vanligt och webbplatser befinner sig som kräver nya funktioner.

HTML-språket underhålls av World Wide Web Consortium (W3C) och den senaste specifikationen är för närvarande HTML 5, som har lagt till ett antal nya funktioner på språket och bidrar till att bana väg till fler interaktiva och funktionsrika webbsidor.

En enkel HTML-sida ser ut som:

Hej världen!

Hej och välkommen till min hemsida.

Ovanstående kod kommer att skapa följande webbplats när den öppnas i en webbläsare:

HTML är ett mycket enkelt språk att lära. Du lägger enkelt in "taggar" i ditt innehåll som beskriver hur varje innehållsinnehåll ska visas i en webbläsare.
Du kan till exempel lägga in taggar i din sida där du vill ha nya stycken text som ska börja, att göra texten till en rubrik i dokumentet, att infoga bilder, länkar till andra sidor på din webbplats eller på andra ställen på Internet etc..

HTML-taggar är inslagna inuti < > vinklar. Om du tittar på föregående exempel kommer du att se varje "tagg" är ett par. Vi har på toppen och på botten.
informerar webbläsaren om att allt inom taggparet är HTML-kod. De tagg berättar webbläsaren HTML-innehållet har upphört. "Slash" i den sista taggen betecknar detta som "stängning" -taggen.

NOTERA: De Linjen måste inkluderas längst upp i någon HTML5 för att den ska betraktas som "giltig" kod. Den här raden berättar webbläsarens dokumenttyp för resten av sidan - med andra ord, vilken version av HTML dokumentet är markerat så att webbläsaren kan göra det korrekt.

De ... avsnittet omedelbart efter är där du placerar information om webbsidan som inte kommer att visas på huvudsidan själv, men innehåller metadata om din sida för webbläsaren.

Inuti avsnittet har vi texten "Hej världen!" insvept inuti ... taggar.
innehåller bokstavligen titeln på den aktuella webbsidan som används av webbläsaren för att namnge fönstret / fliken:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_4.png"><br> <p>Följer <head> avsnitt har vi <body>. Det är här det faktiska innehållet för din webbsida är placerad. I kroppen har vi en <p> tagg med lite välkommen text inuti.<br><p> markerar-upp en punkt på din sida. Till exempel:</p> <pre> <p>En gång i ett land långt, långt därifrån bodde en prinsessa som levde lyckligt någonsin efter.</p> <p>Slutet.</p></pre> <p>Markerar upp två stycken text. Om vi skulle se det i en webbläsare ser vi följande:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_5.png"><br> <p>Du kanske undrar varför vi behöver dessa <p> och </p> taggar för att visa en paragraf. Tja, om vi inte gjorde det, och skrev webbsidan så här:</p> <pre> En gång i ett land långt, långt därifrån bodde en prinsessa som levde lyckligt någonsin efter. Slutet.</pre> <p>Sidan kommer att se ut så här i en webbläsare:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_6.png"><br> <p>Som du kan se ignorerar webbläsaren vilken formatering vi gör i filen. Vi kunde skriva vår exemplarwebbplats enligt följande och den kommer att visa samma i webbläsaren:</p> <pre> <!doctype html><html><head><title>Hej världen!

Hej och välkommen till min hemsida

Webbläsaren är bara intresserad av vad HTML-taggarna säger att den ska göra. Det kommer att ignorera vilken blankutrymme du inkluderar i dokumentet (extra utrymmen, flikar, nya rader etc.)

Skapa en enkel webbsida

Nu förstår du grunden till HTML, låt oss göra vår första webbsida! Bilden ovan är vad den här sidan så småningom kommer att se ut.

Skapa en ny mapp någonstans på din dator och namnge den 'html-from-scratch'. Använd din föredragna textredigerare, skapa en ny tom fil och spara den i den här mappen som "min första webbsida.html".
Ange följande i filen:

    HTML från grunden

Ovanstående är en grundläggande HTML 5-fillayout. Vi har förklarat dokumenttypen på första raden, öppnade vår och taggar och ange "HTML From Scratch" som titel för sidan. Vi stänger sedan huvudet och öppnar kroppen.

På rad 7 har vi tagit med en kommentar. Använd kommentarer för att lämna extra information i din kod som inte kommer att visas på din webbsida. Markera en kommentar genom att lägga in din text inuti taggar.

Slutligen stänger vi av vår öppna kropp och HTML-taggar för att slutföra dokumentet.

Rubrik

Ta bort rad från din källkod och skriv ut följande:

  HTML från grunden

De tagg är ett nytt element introducerat i HTML5 som existerar för att mark-up och strukturera avsnittet "rubrik" på en webbsida. Sidhuvudet är den övre delen av en webbsida, vanligtvis där webbplatsens namn är.

Före HTML5 använde vi

och

(eller något liknande), men jag kommer inte att gå in i detaljer om äldre specifikationer för HTML eftersom vi lär oss den senaste standarden.

VIKTIG: ska inte förväxlas med . De är båda helt olika taggar.

Inne i vår rubrik ingår vi a

märka. H1 används för att markera huvudrubriken på din sida (i detta fall namnet på vår sajt). HTML innehåller header-taggar från 1-6, med

vara den största, viktigaste titeln på sidan ner till

.

Navigering

Därefter markerar vi navigationsmenyn för webbplatsen. Efter avslutningen , skriv ut följande:

   Hem
 Nettuts
 Google

Denna bit av kod kan verka lite skrämmande, men låt oss bryta ner den. Blokken ovan markerar-upp ett navigeringsområde (

) som innehåller en oorderad lista (

).
är ett nytt HTML5-element för att markera ett navigationsområde på en webbplats. Detta brukar användas för att hålla huvudnavigationsmenyn för din webbplats, men eftersom vi bara skapar en enda webbsida just nu gör vi bara en länk till Nettuts och Google.
- objekt (listobjekt) är en ny punktpunkt i listan.
  
  Spara filen och öppna "min-första-webbsida.html" i din webbläsare. Du borde se detta:
  
  Som du kan se, är taggen fungerar korrekt, <h1> tagg visar en stor titel högst upp på sidan och vår punktlista navigationslista visas korrekt.</p> <p>Du kanske märker att vi har ett problem med vår navigeringslista just nu: objekten är inte hyperlänkar och så är de inte klickbara. För att åtgärda detta, ändra de tre listobjekten (<li>) till:</p> <pre> <li> Hem </li> <li> Nettuts </li> <li> Google </li></pre> <p>Inuti var och en av våra <li> lista objekt, vi har gjort texten till hyperlänkar. De <a> tagg skapar ett ankare - en hyperlänk till en annan sida på din webbplats eller en annan plats på Internet.</p> <p>För ankaretiketten att faktiskt länka någonstans, ger vi den adressen med länken till en "href" -parameter. Parametrarna går in i öppningstaggen (<a>...).<br>På vår hemsida går länken "Hem" till den aktuella sidan ("min första webbsida.html"), "Nettuts" går till Nettuts (http://net.tutsplus.com) och länken "Google" till, gissade du det, Google.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_10.png"><br> <hr> <h2>Huvudinnehåll</h2> <p>Följer tagga ut följande:</p> <pre> <section> <p>Detta är huvudinnehållet för min hemsida.<br /> Här är några saker om mig:</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </section></pre> <p>De <section> taggen är också ny i HTML5 (vi brukade använda något liknande <div>) och skapar bokstavligen en "sektion" av innehåll på webbsidan. I det här fallet använder vi <section> att markera huvuddelen av sidan där vårt innehåll går.</p> <p>Inne har vi två stycken som innehåller slumpmässig text. Meddelande i första stycket vi har a <br /> märka. Detta är en radbrytning; Med andra ord kommer texten som följer efter att visas på en ny rad, men i samma stycke.</p> <p>De <br /> taggen är speciell eftersom den inte har en stängningskod. I stället ingår det slutliga snedstrecket ('/') i slutet av taggen. Detta beror på att en radbrytning inte innehåller något innehåll, det existerar endast för estetiska ändamål, annars skulle vi skriva <br></br> vilket är lite meningslöst.</p> <p>Flera andra taggar är också självslutande, till exempel <img /> och <hr />, som vi kommer att titta på senare.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_11.png"><br> <hr> <h2>Bilder</h2> <p>Inne i mappen "html-from-scratch", skapa en ny mapp med namnet "bilder". Spara bilden nedan i den mappen (högerklicka, Spara bild som):</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1.jpg"><br> <p>Nu tillbaka in i huvudinnehållet för webbplatsen, innan stängningen </section> tagg, ange följande för att infoga bilden på vår sida:</p> <pre> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_2.jpg" alt="Envato Stock Image" /></pre> <p>De <img /> tagg, som ankaretiketten, är självstängande och accepterar det mesta av innehållet som parametrar i öppningsetiketten.<br>src = "..." står för "källa" (sökvägen till bilden). Bilden kan lagras någon annanstans på Internet, eller lokalt med webbsidan. Här har vi satt taggen för att visa bilden vi sparade i vår bildkatalog.</p> <p>alt = "..." innehåller alternativtexten som kommer att visas om bilden inte laddas. Du brukar kort beskriva bilden här.</p> <p>Ta en titt på sidan nu. Bilden ska visas:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_12.png"><br> <hr> <h2>Sidofältet</h2> <p>Låt oss sedan markera sidans sidor på vår webbsida. Skriv följande <strong>efter</strong> stängningen </section> märka:</p> <pre> <aside> <hr /><h2>Sidebar</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas:</p> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Alquam tincidunt mauris eu risus.</li> <li>Vägbeskrivning.</li> </ul> </aside></pre> <p><aside> är en HTML5-tagg för att markera en sektion av din webbsida som är avsatt för huvudinnehållet, till exempel ett sidofält, som innehåller mindre viktigt innehåll än huvudsidan på sidan.</p> <p>Inne i vårt sidofält har vi en rubrik på tredje nivån (H3) med titeln Sidebar, en paragraf som innehåller lite slumpmässig platshållare och sedan en oorderad lista med 3 poster.</p> <p>Ta en titt på din sida, och du borde se ovanstående innehåll direkt under vad vi placerade i <section> märka. Oroa dig inte att sidofältet inte är ett sidofält ännu, det här är hur HTML utformades. Mer om det inom kort.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_13.png"><br> <hr> <h2>Footer</h2> <p>I sidfoten, längst ner på vår hemsida, kommer vi att inkludera ett litet upphovsrättsmeddelande. Några webbplatser tar sin footer lite längre och andra detaljer som en webbplatskarta.</p> <pre> <footer> <p> Copyright © Ditt namn 2010.<br /> Del av en handledning för Nettuts+. </p> </footer></pre> <p><footer> är också en ny tagg som introduceras i HTML5. Du kommer förmodligen att hänga på det här och bör märka att vi har tagit med ett stycke i sidfoten som innehåller vårt upphovsrättsmeddelande och en rastavbrott, följt av en länk tillbaka till Netuts.</p> <p><strong>NOTERA:</strong> Se det "©" i vår sidfot? Det är en HTML-enhet. Denna enhet kommer att visa en upphovsrättssymbol (©) när den görs i webbläsaren.<br>Läs mer om HTML-karaktärsenheter på Wikipedia.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_14.png"><br> <hr> <h2>I del 2</h2> <p>Det avslutar den första delen av denna serie. På bara kort tid har du redan gjort en hel del! Du har lärt dig några grundläggande HTML-taggar och handkodade din första webbsida.</p> <p>I nästa del lär vi oss att använda HTML: s partner-in-crime-CSS-för att göra webbsidan <em>se</em> trevligt och vänd den grundläggande, ostilade sidan ovan till vår slutprodukt:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_7.png"><br> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Koda</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/the-beginners-guide-to-web-design-part-2.html">Nybörjarens guide till webbdesign Del 2</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-2_24.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/computers/the-beginners-guide-to-using-tex-in-os-x.html">Nybörjarhandboken för att använda TeX i OS X</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/the-beginners-guide-to-using-tex-in-os-x_7.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Căutare..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>