Headers (h1 t/m h6) en paragrafen p tags

uit de cursus Basiskennis HTML

Headers (h1 t/m h6) en paragrafen p tags
Geef een waardering

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen
Volgende video: De Body

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML

perm_identity Belinda | video_library 40 video's | query_builder 2:50:32

In de cursus basiskennis HTML leer je hoe je webpagina’s structureert met de juiste HTML-tags. Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Wat kun je hierna?

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Belangrijke onderwerpen in deze online basiscursus zijn:

  • Leren maken van de juiste mappenstructuur voor webproducties voor elke dag
  • Semantische beteknis van HTML-tags
  • Pagina’s structureren met HTML-tags conform het W3C
  • Inzicht in de reglementen van het W3C
  • Tabellen toepassen

Dit is de eerste video van het onderdeel 'Content structureren met HTML'.

Voordat we gaan beginnen maken we eerst een nieuw project aan in het programma Dreamweaver.

Dan gaan we een map aanwijzen als zijnde de Local Root Folder.

In deze map gaan we alle bestanden bewaren die we in dit onderdeel gaan maken.

Het maken van een Local Root Folder gaat als volgt:

Activeer het programma Adobe Dreamweaver.

Ga naar de menubalk 'Site' en kies voor 'Nieuwe Site'.

Een infovenster verschijnt en geef de Site een herkenbare naam.

Ik voer als naam in 'Starten met html tags'.

Vervolgens wijs je de map aan waarin deze hele website bewaard moet gaan worden.

Klik op het zoekicoontje achter de naam.

Kies een map uit waarin je je document wilt bewaren. ik kies voor de map 'Documenten'.

En hierin bevindt zich al een map 'archief'. maar ik maak specifiek een nieuwe map aan.

Ik noem deze 'starten met html'.

En belangrijk is dat je bij de naamvoering van bestanden en mappen,

geen gebruik maakt van vreemde leestekens of hoofdletters en gemengd met kleine letters,

Wil je een scheiding aanbrengen dan kan je dat doen met een underscore.

En ik zeg 'Maak aan'. Dit wordt mijn Local Root Folder.

Zorg ervoor dat de map actief is en ga naar 'Kiezen'.

Vervolgens, controleer dat de map voor de website ook inderdaad, in mijn geval 'Starten met HTML' heet en klik op 'Opslaan'.

Maak een nieuw html-bestand aan via Bestand > Nieuw.

We starten met het maken van een HTML- pagina.

Kies bij paginatype voor HTML en bij documenttype voor HTML-.

En klik op Maken.

Dreamweaver biedt de mogelijkheid om zowel naar de code te kijken

Als naar een voorvertoning van de HTML-code.

Maar in eerste instantie zorg ik ervoor dat ik alleen de code in beeld heb.

En kies ik bovenin mijn venster voor Code weergave tonen.

Wil ik naar gedeeld gaan klik ik op Gedeeld.

In de komt zometeen de inhoud van de webpagina te staan.

De inhoud is in dit geval tekst

en die tekst gaan wij vervolgens structureren met de juiste HTML-tags.

Teksten worden geschreven in allerlei tekstprogramma's.

Dat kan Open office zijn, dat kan Microsoft Word zijn of elk ander simpel tekstprogrammaatje.

In dit voorbeeld is de tekst geschreven in het programma Open Office.

Je ziet dat de tekst al enigzins is vormgegeven.

Een manier om teksten te plaatsen in een HTML-document is simpelweg

de tekst te openen in het programma van oorsprong

Alles te selecteren en te kiezen voor kopiëren.

Dat kan via Bewerken > Kopiëren. Keer terug naar het programma Dreamweaver.

Zorg ervoor dat je met de cursor in de Code-weergave gaat staan achter de

en kies vervolgens voor Bewerken > Plakken.

Zoals je ziet wordt de tekst keurig netjes geplakt in de broncode.

Alleen de opmaak die je zojuist zag in het opmaakprogramma is hier niet aanwezig.

Dat kun je controleren door in Dreamweaver te vragen voor het gedeelde scherm,

zodat aan de rechterkant een voorvertoning van mijn broncode verschijnt.

Het is inderdaad duidelijk, hierin is nog niks gestructureerd en opgemaakt.

En ik keer weer terug naar mijn codeomgeving.

Want dat is wat we nu leren. Hoe je met gebruik van Header tot en met header

en paragrafen structuur aanbrengt in je tekst.

'Hoofdstuk ' is een kopje, maar niet de allerbelangrijkste.

Ik maak hiervan een Header .

Alles wat je opstart met een HTML-tag moet ook weer afgesloten worden.

Dus aan het einde van 'Hoofdstuk ' zet ik neer, einde h (

).

Vervolgens volgt hier dé belangrijkste kop van de pagina.

en dat ie een

.

En die eindigt met een einde h (

)

Alle leesteksten! Daarvan maak je een paragraaf.

Een paragraaf heeft een begin (

) en een einde (

).

Dan, opnieuw een kopje. Niet de allerbelangrijkste.

En ik maak daarvan een

en ook deze moet ik afsluiten met een sluittag (

).

En de paragraaf geef ik weer keurig aan met een begin-paragraaf (

) en de tag einde paragraaf (

).

En ook hier begin paragraaf (

), einde paragraaf (

).

Nogmaals een kopje. Ik maak daar ook van een

Sluit hem af met een einde h (

).

Eindig vervolgens met mijn laatste stuk leestekst, laatste paragraaf.

Wil ik nog iets uitleggen.

Over de

's en de overige koppen.

tot en met

.

Een

kan maar één keer op een pagina voorkomen en is voorbehouden aan de belangrijkste kop.

Maar alle overige koppen kun je meerdere malen gebruiken.

Om een voorvertoning van mijn webpagina te bekijken in een browser,

zal ik eerst het document moeten opslaan.

Een document opslaan doe je via Bestand > Opslaan.

Kies voor de Local Root Folder en geef de allereerste startpagina de naam 'index.html'.

Klik op Bewaar.

Bovenin je document bevindt zich een snelkoppeling waarmee je een voorvertoning in een browser kan vragen.

Kies een browser uit de lijst.

En Voilá, dit is het resultaat van onze gestructureerde tekst.

Ja, nu staan alle koppen wel keurig netjes op een eigen regel en zit er ook verschil in de grootte van de koppen.

Standaard verbindt de browser al bepaalde opmaakeigenschappen aan HTML-tags en dat kun je duidelijk terugzien.

De

is het allergrootst en vet vormgegeven,

de paragrafen hebben allemaal een vormgeving wat het lezen prettig maakt

en je kunt duidelijk het verschil zien tussen de wijze waarop de kopjes, de headers worden vormgegeven in grootte en ze zijn vet.

Misschien leuk om even te laten zien, maar dit is een voorbeeld van de standaard vormgeving van een browser

van alle headers die er zijn de header (

) tot en met (

).

De laatste tag die we gaan behandelen in deze video is de Break.

Wil ik dat binnen een paragraaf een zin op een eigen regel begint,

dan kan ik hiervoor de break, ga naar volgende regel opdracht gebruiken en die ziet er zo uit.

De 'break' is een zogenaamd 'leeg element'.

Want op het moment dat ik hem opstart sluit hij zichzelf eigenlijk ook al af.

Er zijn een paar HTML-tags die op het moment dat ze opgestart worden ook direct mogen worden afgesloten.

Dit is een groot verschil met de tags die een start-tag bevatten

En vervolgens aangeven waar deze moet eindigen.

Maar deze break die begint en dan typ je een spatie en vervolgens het afsluitende teken en hiermee kun je een tag direct beginnen en afsluiten.

Rest ons nog een voorbeeld te bekijken in het voorvertoningsvenster van Dreamweaver.

En dan zie je vervolgens dat het woord 'webpagina's' inderdaad naar de volgende regel is verschoven

en dat komt door onze Break-tag ().

Wil je een voorvertoning zien in een browser dan ga je naar één van de voorvertoningsmogelijkheden in een browser.

En ook in de browser wordt het woord 'webpagina's' naar de volgende regel verplaatst.