De beginnershandleiding voor webdesign deel 1

In deze serie leert u hoe u een website kunt maken met de nieuwste webontwerptechnieken (HTML5 & CSS3). Deze serie is bedoeld voor mensen zonder enige voorkennis van webdesign.

Ook verkrijgbaar in deze serie:

De beginnershandleiding voor webdesign: deel 1
De beginnershandleiding voor webontwerp: deel 2
De beginnershandleiding voor webontwerp: deel 3

Moderne webbrowser

Omdat we onze webpagina's met behulp van de nieuwste standaarden (HTML5 en CSS3) gaan maken, hebben we een moderne webbrowser nodig die de nieuwste webtechnologieën kan begrijpen.

Versies van Microsoft's Internet Explorer-browser onder IE8 zullen het eenvoudigweg niet snappen. Als u IE7 of lager gebruikt, downloadt u een van de onderstaande webbrowsers.

Als u al een andere webbrowser gebruikt, controleert u of deze overeenkomt met de onderstaande minimale vereisten voor de beste prestaties.

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

"Waarom heb ik een bepaalde browser nodig?" je mag vragen. Welnu, aangezien HTML5 relatief nieuw is, begrijpen oudere browsers niet hoe de code moet worden gelezen en moet deze correct worden omgezet in een webpagina.

Teksteditor

HTML-bestanden zijn gewoon tekstbestanden met de extensie .html, dus u hebt geen gespecialiseerde of dure software nodig zoals Dreamweaver om ze te maken. In feite is uw computer vooraf geïnstalleerd met software waarmee u webpagina's kunt schrijven in - 'Notepad' op Windows, of 'TextEdit' (in 'gewone tekstmodus') op Mac.

Hoewel de software vooraf is geïnstalleerd op uw computer zal ik doen, het is verre van de beste. Ik raad aan om Notepad ++ te downloaden als je op Windows of TextWrangler op Mac zit. Beide programma's zijn volledig gratis en bieden een aantal functies die nuttig zijn voor webontwikkelaars, zoals syntax highlighting, bewerken van tabbladen en regelnummers.

Voor Mac-gebruikers, raad ik aan om TextMate, Coda of Espresso te kopen. Windows-gebruikers, probeer E-TextEditor.

Inleiding tot HTML

Elke website op internet is geschreven in Hyper-Text Markup Language (HTML). De HTML-taal is in de loop der jaren gegroeid en uitgebreid doordat het internet meer mainstream is geworden en websites nieuwe functies vereisen.

De HTML-taal wordt onderhouden door het World Wide Web Consortium (W3C) en de nieuwste specificatie is momenteel HTML 5, die een aantal nieuwe functies aan de taal heeft toegevoegd en helpt om de weg te effenen naar meer interactieve en functierijke webpagina's.

Een eenvoudige HTML-pagina ziet er als volgt uit:

Hallo Wereld!

Hallo en welkom op mijn website.

De bovenstaande code zal de volgende website creëren wanneer geopend in een webbrowser:

HTML is een heel eenvoudige taal om te leren. U voegt eenvoudig 'tags' in uw inhoud in, die aangeven hoe elk stukje inhoud in een webbrowser moet worden weergegeven.
U voegt bijvoorbeeld labels toe aan uw pagina waar u nieuwe alinea's van de tekst wilt laten beginnen, om tekst een kop in het document te maken, om afbeeldingen in te voegen, links naar andere pagina's op uw site of elders op internet enz..

HTML-tags zijn ingepakt in < > punthaken. Als u naar het vorige voorbeeld kijkt, ziet u dat elke 'tag' een paar is. Wij hebben aan de bovenkant, en aan de onderkant.
informeert de webbrowser dat alles binnen het tagpaar HTML-code is. De tag vertelt de browser dat de HTML-inhoud is beëindigd. De 'schuine streep' in de laatste tag duidt dit aan als de 'afsluitende' tag.

NOTITIE: De regel moet worden opgenomen aan de bovenkant van een HTML5 zodat deze als "geldige" code wordt beschouwd. Deze regel vertelt de webbrowser het documenttype van de rest van de pagina, met andere woorden, in welke HTML-versie het document is gemarkeerd, zodat de browser het correct kan weergeven.

De ... In het volgende gedeelte wordt informatie over de webpagina geplaatst die niet op de hoofdpagina zelf wordt weergegeven, maar meta-gegevens over uw pagina voor de browser bevat.

Binnen in de sectie, we hebben de tekst "Hallo, Wereld!" ingepakt binnen ... labels.
bevat letterlijk de titel van de huidige webpagina die door de webbrowser wordt gebruikt om het venster / tabblad een naam te geven:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_4.png"><br> <p>Volgens de <head> sectie, we hebben <body>. Dit is waar de daadwerkelijke inhoud voor uw webpagina wordt geplaatst. In het lichaam hebben we een <p> label met een kleine welkomsttekst erin.<br><p> markeert een alinea op uw pagina. Bijvoorbeeld:</p> <pre> <p>Er was eens in een land ver, ver weg woonde een prinses die nog lang en gelukkig leefde.</p> <p>Het einde.</p></pre> <p>Markeert twee alinea's tekst. Als we dit in een browser zouden bekijken, zien we het volgende:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_5.png"><br> <p>U vraagt zich misschien af waarom we deze nodig hebben <p> en </p> tags om een alinea weer te geven. Nou, als we dat niet deden, en de webpagina zo hebben geschreven:</p> <pre> Er was eens in een land ver, ver weg woonde een prinses die nog lang en gelukkig leefde. Het einde.</pre> <p>De pagina ziet er als volgt uit in een browser:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_6.png"><br> <p>Zoals je ziet, negeert de browser elke opmaak die we in het bestand maken. We kunnen onze voorbeeldwebpagina als volgt schrijven en deze zal in de browser worden weergegeven:</p> <pre> <!doctype html><html><head><title>Hallo Wereld!

Hallo en welkom op mijn website

De browser is alleen geïnteresseerd in wat de HTML-tags aangeven. Het negeert alle spaties die u in het document opneemt (extra spaties, tabs, nieuwe regels etc.)

Een eenvoudige webpagina maken

Nu begrijp je de basisprincipes van HTML, laten we onze allereerste webpagina maken! De bovenstaande afbeelding is hoe deze pagina er uiteindelijk uit zal zien.

Maak ergens op je computer een nieuwe map en noem die 'html-from-scratch'. Gebruik de gewenste teksteditor om een nieuw, leeg bestand te maken en sla het in deze map op als 'mijn eerste webpagina.html'.
Voer het volgende in bestand in:

    HTML van Scratch

Het bovenstaande is een eenvoudige HTML 5-bestandsindeling. We hebben het documenttype op de eerste regel aangegeven, hebben onze en tags en stel "HTML From Scratch" in als de titel voor de pagina. We sluiten dan het hoofd en openen het lichaam.

Op regel 7 hebben we een opmerking toegevoegd. Gebruik opmerkingen om extra info achter te laten in uw code die niet wordt weergegeven op uw webpagina. Markeer een opmerking door je tekst in te pakken labels.

Ten slotte sluiten we onze geopende body en html-tags af om het document te voltooien.

hoofd

Verwijder de regel uit je broncode en typ het volgende:

  HTML van Scratch

De tag is een nieuw element dat is geïntroduceerd in HTML5 en dat bestaat om het gedeelte 'header' van een webpagina op te waarderen en te structureren. De koptekst is het bovenste gedeelte van een webpagina, meestal waar de naam van de site is.

Voorafgaand aan HTML5 hebben we gebruikt

(of iets dergelijks), maar ik zal niet ingaan op details over oudere specificaties van HTML terwijl we de nieuwste standaard leren.

BELANGRIJK: moet niet worden verward met . Het zijn allebei compleet verschillende tags.

In onze header hebben we een

label. H1 wordt gebruikt voor het markeren van de hoofdkop op uw pagina (in dit geval de naam van onze site). HTML bevat header-tags van 1-6, met

de grootste, meest belangrijke titel op de pagina zijn tot

.

Navigatie

Vervolgens markeren we het navigatiemenu voor de website. Na de sluiting , typ het volgende:

   Huis
 Nettuts
 Google

Dit stuk code lijkt misschien een beetje eng, maar laten we het opsplitsen. Het bovenstaande blok markeert een navigatiegebied (

) die een ongeordende lijst bevat (

).
is een nieuw HTML5-element voor het markeren van een navigatiegebied op een website. Dit wordt meestal gebruikt om het hoofdnavigatiemenu voor uw website te houden, maar aangezien we nu slechts één enkele webpagina maken, maken we gewoon een link naar Nettuts en Google.
- item (lijstitem) is een nieuw opsommingsteken in de lijst.
  
  Sla uw bestand op en open 'my-first-webpage.html' in uw webbrowser. Je zou dit moeten zien:
  
  Zoals u kunt zien, de tag werkt correct, de <h1> tag geeft een grote titel weer bovenaan de pagina en onze lijst met opsommingstekens wordt correct weergegeven.</p> <p>U merkt misschien dat we momenteel één probleem hebben met onze navigatielijst: de items zijn geen hyperlinks en kunnen dus niet worden aangeklikt. Om dit op te lossen, wijzigt u de drie lijstitems (<li>) naar:</p> <pre> <li> Huis </li> <li> Nettuts </li> <li> Google </li></pre> <p>In elk van onze <li> lijst items, we hebben de tekst in hyper-links gemaakt. De <a> tag maakt een anker - een hyperlink naar een andere pagina op uw website of een andere locatie op internet.</p> <p>Om ervoor te zorgen dat de ankertag daadwerkelijk ergens linkt, bieden we hem het adres om naar binnen een 'href' parameter te linken. Parameters gaan binnen de openingstag (<a>...).<br>Op onze webpagina gaat de link 'Startpagina' naar de huidige pagina ('mijn-eerste-webpagina.html'), 'Nettuts' gaat naar Nettuts (http://net.tutsplus.com) en de link 'Google' gaat naar, je raadt het al, Google.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_10.png"><br> <hr> <h2>Belangrijkste inhoud</h2> <p>Volgens de tag, typ het volgende:</p> <pre> <section> <p>Dit is de belangrijkste inhoud voor mijn website.<br /> Hier zijn wat dingen over mij:</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> tag is ook nieuw in HTML5 (we gebruikten zoiets als <div>) en maakt letterlijk een 'gedeelte' van inhoud op de webpagina. In dit geval gebruiken we <section> om het hoofdgedeelte van de pagina te markeren waar onze inhoud staat.</p> <p>Binnenin hebben we twee alinea's met willekeurige tekst. Kennisgeving in de eerste alinea hebben we een <br /> label. Dit is een regeleinde; met andere woorden, de volgende tekst wordt weergegeven op een nieuwe regel, maar in dezelfde alinea.</p> <p>De <br /> tag is speciaal omdat het geen afsluitende tag heeft. In plaats daarvan wordt de afsluitende voorwaartse schuine streep ('/') opgenomen aan het einde van de tag. Dit komt omdat een regelafbreking geen inhoud bevat, het bestaat puur voor esthetische doeleinden, anders zouden we schrijven <br></br> wat een beetje zinloos is.</p> <p>Verschillende andere tags zijn ook zelfsluitend, zoals <img /> en <hr />, waar we later naar zullen kijken.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_11.png"><br> <hr> <h2>Afbeeldingen</h2> <p>Maak een nieuwe map met de naam 'afbeeldingen' in de map 'html-from-scratch'. Sla de onderstaande afbeelding op in die map (klik met de rechtermuisknop, Afbeelding opslaan als):</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1.jpg"><br> <p>Nu, terug in de hoofdinhoud van de website, vóór de afsluiting </section> label, vul het volgende in om de afbeelding op onze pagina in te voegen:</p> <pre> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_2.jpg" alt="Envato Stock Afbeelding" /></pre> <p>De <img /> tag, net als de ankertag, is zelfsluitend en accepteert de meeste inhoud als parameters in de openingstag.<br>src = "..." staat voor 'source' (het pad naar de afbeelding). De afbeelding kan ergens anders op internet of lokaal met de webpagina worden opgeslagen. Hier hebben we de tag ingesteld om de afbeelding weer te geven die we in onze afbeeldingenmap hebben opgeslagen.</p> <p>alt = "..." bevat de 'Alternatieve tekst' die wordt weergegeven als de afbeelding niet kan worden geladen. U beschrijft de afbeelding hier meestal kort.</p> <p>Bekijk nu de pagina. De afbeelding zou moeten weergeven:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_12.png"><br> <hr> <h2>De zijbalk</h2> <p>Laten we vervolgens de zijbalk van onze webpagina markeren. Vul het volgende in <strong>na</strong> de afsluiting </section> label:</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>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </aside></pre> <p><aside> is een HTML5-tag voor het markeren van een gedeelte van uw webpagina dat is gereserveerd naast de hoofdinhoud, zoals een zijbalk, die minder belangrijke informatie-inhoud bevat dan het hoofdgedeelte van de pagina.</p> <p>In onze zijbalk hebben we een titel op het derde niveau (H3) met de titel 'Zijbalk', een alinea met een willekeurige plaatsaanduidingstekst en vervolgens een ongeordende lijst met 3 items.</p> <p>Neem een kijkje op uw pagina en u zou de bovenstaande inhoud direct onder de inhoud van de pagina moeten zien <section> label. Maak je geen zorgen dat de zijbalk nog niet echt een zijbalk is, dit is de manier waarop HTML is ontworpen. Daarover binnenkort meer.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_13.png"><br> <hr> <h2>De voettekst</h2> <p>In de voettekst, helemaal onderaan, van onze website, zullen we een kleine copyright-melding opnemen. Sommige websites zetten hun voetje een beetje verder en andere details zoals een sitemap.</p> <pre> <footer> <p> Copyright © Uw naam 2010.<br /> Onderdeel van een tutorial voor Nettuts+. </p> </footer></pre> <p><footer> is ook een nieuwe tag die is geïntroduceerd in HTML5. U krijgt dit waarschijnlijk nu onder de knie, en het zou moeten opvallen dat we een alinea in het voetgedeelte met onze copyrightkennisgeving en een regelafbreking hebben opgenomen, gevolgd door een link naar Nettuts.</p> <p><strong>NOTITIE:</strong> Zie je dat '©' in onze voettekst? Dat is een HTML-entiteit. Deze entiteit geeft een copyright-symbool (©) weer als deze in de browser wordt weergegeven.<br>Lees meer over HTML-tekens op Wikipedia.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_14.png"><br> <hr> <h2>In deel 2</h2> <p>Dat is het eerste deel van deze serie. In slechts een korte tijd heb je al heel wat bereikt! U hebt een aantal eenvoudige HTML-tags geleerd en uw eerste webpagina met de hand gecodeerd.</p> <p>In het volgende deel zullen we leren hoe je HTML's partner-in-crime-CSS kunt gebruiken om de webpagina te maken <em>kijken</em> leuk, en verander de eenvoudige, niet-gestileerde pagina hierboven in ons eindproduct:</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">Code</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">De beginnershandleiding voor webontwerp deel 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">De beginnershandleiding voor het gebruik van TeX in 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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </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="Zoeken..."> <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>