HTML voor beginners:

De tijdlijn van webtechnologieën


2009

2005

2002

2000

1998

1997

1996

1994

1991

HTML5

AJAX

Tabloos webdesign

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

HTML

Contents

Invoering

Als u een webmaster wilt worden en wilt leren hoe u een website maakt, is het wellicht een hele uitdaging om HTML onder de knie te krijgen.

Dit is echter niet te vermijden, aangezien de overgrote meerderheid van de bestemmingspagina’s van websites die u bezoekt, zijn geschreven en gestructureerd met HTML-elementen. In feite is HTML nu gebruikt door meer dan 74% van alle bekende websites, terwijl deze taal ook helpt om alles te verbeteren, van het ontwerp van uw site tot de kwaliteit van de inhoud die het bevat.

In deze gids zullen we de basisprincipes van HTML en de mogelijke toepassingen ervan onderzoeken, voordat we kijken naar voorbeelden van de individuele elementen die u gebruikt bij het coderen van uw website.

Wat is HTML?

Percentages van websites die verschillende subcategorieën HTML gebruiken

verschillende subcategorieën van HTML-percentages

In simpele termen, HTML staat voor de standaard opmaaktaal voor het online maken van webpagina’s. Het staat voor Hyper Text Markup Language en de belangrijkste functie is het vaststellen van de structuur, lay-out en presentatie van individuele bestemmingspagina’s. Hoewel webbrowsers HTML-taal niet rechtstreeks weergeven, speelt het een cruciale rol bij het creëren van een zichtbare, toegankelijke en gebruiksvriendelijke site.

HTML wordt ook ondersteund door een aantal individuele elementen, die geleidelijk webpagina’s opbouwen, de presentatie van inhoud structureren en uw website tot leven brengen. Deze elementen zijn gemaakt en opgenomen in ‘tags’, die alternatieve stukjes inhoud definiëren, zoals koppen, alinea’s en vergelijkbare voorbeelden.

We zullen deze elementen en hun constructie hieronder in meer detail onderzoeken, terwijl we ook kijken hoe ze kunnen worden gepersonaliseerd om kleur, links en variabele typografie op uw website te introduceren.


Waar wordt HTML gebruikt?

Populaire websites die HTML gebruiken

Waar wordt HTML gebruikt

Zoals we kunnen zien, is de meest gebruikelijke toepassing voor HTML het ontwerp van de afzonderlijke bestemmingspagina’s waaruit uw website bestaat. Dit is niet de enige toepassing van de populaire coderingstool, maar als u het aanvullende gebruik ervan begrijpt, kunt u als nieuwe webmaster het meeste uit de taal halen. Hier volgen enkele van de andere manieren waarop HTML kan worden toegepast:

  • Maak aanpasbare elementen binnen een bestaande pagina

    Als u van plan bent reacties op blogposts of de door gebruikers gegenereerde inhoud op uw website toe te staan, kunt u HTML-codefragmenten gebruiken om dit in te schakelen. Met deze elementen kunnen gebruikers zoekwoorden benadrukken, links insluiten en opmerkingen opmaken, afhankelijk van de beperkingen die u als moderator heeft ingesteld.

  • Maak extra inhoud voor e-mail

    E-mail gebruikt ook HTML als de taal voor rich text-berichten, die links, tekst en een verscheidenheid aan andere elementen bevatten die niet alleen in platte tekst kunnen worden weergegeven. Dus als u een e-boek wilt delen dat betrekking heeft op uw website via e-mail, kunt u HTML gebruiken om de impact van uw bericht te optimaliseren.

  • Begrijp Offline Help-documenten die op uw computer zijn geïnstalleerd

    Interessant is dat HTML wordt gebruikt als het formaat voor computergebaseerde helpdocumenten die offline toegankelijk zijn. Basiskennis van HTML kan u daarom helpen problemen met uw hardware te begrijpen en sneller op te lossen, wat er op zijn beurt voor kan zorgen dat u uw website sneller kunt herstellen wanneer deze offline is gegaan.

HTML & CSS
HTML & CSS bekijken [Cheat Sheet]

HTML-paginastructuur

</strong><br/> <strong>
Pagina inhoud

De html-, head- en body-elementen maken sinds het midden van de jaren negentig deel uit van de HTML-specificatie en waren tot een paar jaar geleden de belangrijkste elementen die werden gebruikt om structuur te geven aan HTML-documenten.
De situatie is de afgelopen jaren echter drastisch veranderd, aangezien HTML5 een hele reeks nieuwe tags heeft toegevoegd die kunnen worden gebruikt om een ​​rijke semantische betekenis toe te voegen aan de structuur van een HTML-document.

HTML-documenten zijn vereist om te beginnen met een documenttypeverklaring (informeel een “doctype”). In browsers helpt het doctype om de weergavemodus te definiëren. HTML5 definieert geen DTD; daarom is in HTML5 de doctype-verklaring eenvoudiger en korter.


Voordat je een html-pagina kunt bouwen, heb je de basis nodig.

Normaal gesproken bestaat een pagina uit drie structurele elementen:

1. Koptekst: De koptekst bevat inhoud die relevant is voor alle pagina’s op uw site, zoals een logo of websitenaam en een navigatiesysteem. De koptekst is te zien op elke pagina.

2. Hoofdgedeelte: Dit beslaat het grootste gebied op een webpagina. Het bevat inhoud die specifiek is voor de pagina die wordt bekeken.

3. Voettekst: De inhoud van de voettekst bevat meestal contactgegevens, een verzendadres of wettelijke vermeldingen. Net als de koptekst verschijnt de voettekst op elke pagina, maar staat onderaan.

Zo zien die fundamentele structurele elementen eruit als ze samenkomen:


U kunt hier tekst of code plaatsen, zoals een
Google Analytics-trackingcode voor
voorbeeld.

Het hoofdgedeelte van uw pagina gaat
hier. Vul het met tekst en afbeeldingen!

Hier is nog een voorbeeld: het gebruik van koptags en de alineatag om inhoud esthetisch te structureren. Bovendien hebben we een voettekst toegevoegd voor inhoud onder het hoofdgedeelte van een pagina:


U kunt hier tekst of code plaatsen, zoals een
Google Analytics-trackingcode voor
voorbeeld.

Mijn eerste kop

Welkom op mijn website!

contactgegevens kunnen hier terecht


HTML-tags

HTML-tags

Het uitgangspunt voor elke HTML-code zijn individuele tags, die kunnen worden gebruikt om alle cruciale elementen te maken en uw webpagina’s te structureren. Hieronder zullen we de meest voorkomende tags bekijken voordat we onderzoeken hoe ze kunnen worden gebruikt om specifieke elementen op de pagina te genereren:

Koptags

Alle online documenten, inclusief webpagina’s, beginnen met een kop. Deze zijn gemaakt met HTML-tags, waarbij de taal momenteel maximaal zes elementen van verschillende grootte mogelijk maakt, waardoor u uw inhoud ook kunt structureren met extra titels, ondertitels en gemarkeerde vetgedrukte regels. Om uw kop te beginnen, prefix u de relevante tekst met de

,

,

,

,

of
tag afhankelijk van de gewenste maat.
U moet dan een afsluitende tag aan het einde van de kop toepassen om de tekst in te kapselen en wordt als volgt weergegeven in HTML-indeling:

Er zijn 12 categorieën tags:


Dit is rubriek 1

Dit is rubriek 2

Dit is rubriek 3

Dit is rubriek 4

Dit is rubriek 5

Dit is rubriek 6

Toonaangevende technologieën voor HTML-tags
delen op internet

0,27%

HTML5
Canvas Tag

0,29%

HTML5
Audiotag

0,69%

HTML5
Videotag

3,1%

HTML5
SVG-tag

6,54%

HTML5
Tag insluiten


Eenmaal bevestigd, vertaalt dit zich in de volgende esthetiek op uw website’s bestemmingspagina:

Dit is rubriek 1

Dit is rubriek 2

Dit is rubriek 3

Dit is rubriek 4

Dit is rubriek 5

Dit is rubriek 6

Hier zijn de verschillende formaten van de variabele koppen duidelijk te zien, evenals het feit dat de browser een regel voor en na de kop toevoegt. U zult ook merken dat de afsluitende tag aan het einde van de koptekst een iets andere esthetiek heeft, maar dit zal in het volgende hoofdstuk worden behandeld, aangezien we tags gebruiken om specifieke elementen te definiëren.

Paragraaf-tags

Video- en audio-ondersteuning
Vergeet Flash Player en andere mediaspelers van derden, maak uw video’s en audio echt toegankelijk met de nieuwe HTML5

Een soortgelijk principe wordt toegepast op het starten van alineatags, die worden afgebeeld door

. Hierdoor kunt u uw inhoud structureren en onderverdelen in relevante alinea’s, wat zich op zijn beurt vertaalt in een eenvoudigere en meer naadloze leeservaring. Nogmaals, de

tag moet aan het begin van de relevante tekst worden geplaatst, voordat de alternatieve sluitingstag aan het einde wordt toegepast om het effect te voltooien. In tegenstelling tot koptags zijn er echter geen numerieke verschillen die de grootte van de tekst in de alinea kunnen wijzigen. Bijvoorbeeld:

Uw eerste alinea

Uw tweede alinea

Uw derde alinea

Gebruik van HTML5-videotags door websites over de hele wereld

Land
Aantal websites
Verenigde Staten
140.008
Rusland
87.508
Duitsland
34.519
Verenigd Koningkrijk
26.609
Frankrijk
25.697
Japan
23.578
Taiwan
19.798
Oekraïne
19.204
Brazilië
16.773
China
16.523
Rest van de wereld
265.371

Buiten de HTML-indeling wordt de tekst als volgt opgesplitst op uw voltooide webpagina:

Uw eerste alinea

Uw tweede alinea

Uw derde alinea

Regeleinde-tags

De eerste voorbeelden vertegenwoordigen de meest eenvoudige HTML-tags, maar er zijn andere die een ander formaat gebruiken en alternatieve sluitingen. Neem bijvoorbeeld regeleinden die een onderscheid maken waarbij tekstregels worden onderbroken en op de volgende regel worden voortgezet. Er is een groot verschil tussen regeleinden en alinea’s op het gebied van HTML, aangezien de laatste standaardblokelementen zijn die tekst bevatten, maar de eerste een scheiding creëert binnen een bestaande

element.

Daarom vertegenwoordigen regeleindes een leeg element in HTML en worden daarom niet gedefinieerd door openings- of sluitingstags. In plaats daarvan worden ze afgebeeld door de
tag, die in bestaande kan worden ingevoegd

elementen om tekst op te splitsen en mogelijk belangrijke stukjes informatie te markeren. De enkele spatie tussen het teken br en de schuine streep naar voren is cruciaal, omdat de tag anders niet herkenbaar is in HTML-indeling.

Hier is een voorbeeld:

is de HTML5-tekentag voor tekenen waarmee u nog meer mogelijkheden van webinteractiviteit en webanimatie kunt gebruiken dan de vorige rijke internettoepassingsplatforms zoals Flash.
Je kunt zelfs games ontwikkelen met HTML5’s label. HTML5 biedt een geweldige, mobielvriendelijke manier om een ​​leuk, interactief spel te ontwikkelen

Goedemorgen

Hartelijk dank voor uw aanvraag, we nemen contact met u op als we iets anders nodig hebben.

Vriendelijke groeten

Mr Jones

Eenmaal toegepast, wordt de tekst als volgt verdeeld:

Goedemorgen,

Hartelijk dank voor uw aanvraag, we nemen contact met u op als we iets anders nodig hebben.

Vriendelijke groeten

Mr Jones

Zoals u kunt zien, kunt u binnen een bestaand alinea-element zo vaak als u wilt regeleinden toepassen, op voorwaarde dat ze waarde toevoegen en de informatie gemakkelijker te verteren maken. U zult ook zien dat de alineatags voor openen en sluiten ongewijzigd blijven, met regeleinde-tags die worden gebruikt om de lay-out van de tekst in.

Dit is een van de voorbeelden van hoe HTML-tags kunnen worden gebruikt om bestaande elementen te wijzigen, wat een sleutelrol speelt bij het definiëren van de visuele lay-out van uw webpagina’s en inhoud.

Horizontale lijnen

Websitecategorieën waar HTML5 Canvas Tag wordt gebruikt

Websitecategorieën waar HTML5 Canvas Tag wordt gebruikt

Evenzo zijn er andere tags die kunnen worden gebruikt binnen de

element of om tekst verder te scheiden op uw webpagina. Een van de meest gebruikte is de


tag, wat helpt om een ​​leeg element te creëren dat een visuele, horizontale lijn trekt tussen alternatieve secties van een online document. U kunt bijvoorbeeld een lijn tussen twee tekstteksten plaatsen om de lezer opnieuw te focussen of gewoon een nieuw visueel element te introduceren. Zo creëer je zo’n onderbreking in HTML:

Uw eerste alinea


Uw tweede alinea

Hier markeert het breken tussen de hr-tekens en de schuine streep naar voren de constructie van een leeg element, terwijl er opnieuw geen sluitingstag nodig is om het effect te voltooien. Dit zal het volgende beeld opleveren:

Uw eerste alinea
________________________________________

Uw tweede alinea

Uw eerste alinea
_______________________

Uw tweede alinea

Mobiele browsers hebben HTML5 volledig overgenomen, dus het maken van projecten die geschikt zijn voor mobiele apparaten is net zo eenvoudig als het ontwerpen en bouwen voor hun kleinere touchscreens – vandaar de populariteit van Responsive Design. Er zijn enkele geweldige metatags waarmee je ook kunt optimaliseren voor mobiel
78% van de contentontwikkelaars is het ermee eens dat de structuur geschikt is voor het maken van mobiele apps en 68% zegt dat het geschikt is voor het ontwerpen van allerlei soorten apps


Afbeeldingstags

Afbeeldingslabels vertegenwoordigen ook lege elementen in HTML, wat opnieuw betekent dat ze geen afsluitende tag bevatten. Omdat ze alleen kenmerken bevatten die betrekking hebben op de URL van de afbeelding die u op de site insluit, worden ze eenvoudig gedefinieerd door de tag aan het begin van het element. Deze kunnen overal op uw website worden geplaatst, hoewel het ongebruikelijk is om ze op te nemen in bestaande elementen zoals alinea’s of koppen. Hier is hoe een typische HTML-afbeeldingstag zichzelf zal presenteren:

some_text

U moet ook alternatieve tekst voor uw afbeelding opgeven, zodat mensen deze kunnen bekijken in het geval van langzame laadtijden of het gebruik van een schermlezer. Op deze manier zal de browser, als hij geen afbeelding kan vinden, de waarde van het alternatieve attribuut voor kijkers weergeven. Dit gebruikt opnieuw de afbeeldingstag, maar bevat een andere set kenmerken:

 HTML5 Icon

HTML-elementen

html-elementen

Eerder hebben we gekeken hoe eenvoudige HTML-tags worden gebruikt om elementen op de pagina te definiëren, terwijl we ook hebben onderzocht hoe ze verder kunnen worden aangepast door lege elementen te gebruiken die tags voor afbeeldingen en regeleinden bevatten. Dit helpt ons om de relatie tussen tags en elementen te begrijpen en hoe ze kunnen worden gebruikt om verschillende soorten inhoud op uw website te definiëren.

Hoewel alle aspecten van de HTML-taal bijvoorbeeld worden vertegenwoordigd door een tag, moet een gedefinieerd element dat inhoud bevat zowel een start- als een sluitingstag hebben. Koppen en alinea’s zijn dus HTML-elementen omdat ze beginnende en sluitende tags gebruiken om de relevante tekst in te kapselen en uit te breiden. Daarentegen bevatten lege elementen attributen of helemaal geen inhoud, waardoor ze binnen bestaande elementen kunnen worden gebruikt zonder dat een afsluitende tag nodig is.

HTML-elementen definiëren

HTML5 gaat nergens heen en naarmate meer en meer elementen worden overgenomen, zullen meer en meer bedrijven zich gaan ontwikkelen in HTML5

Bij het gebruik van voorbeelden zoals koppen en alinea’s is de juiste toepassing van start- en sluitingstags cruciaal. Het is de begintag (zoals

of

) die het betreffende element definieert, bijvoorbeeld, terwijl de afsluitende tag ervoor zorgt dat dit element niet wordt voortgezet op de rest van de webpagina. Als u de sluiting niet gebruikt tag aan het einde van een gewenste alinea, de tekst zal bijvoorbeeld verschijnen in een enkel blok dat onooglijk en uiterst moeilijk te lezen is.

Alle afsluitende tags zijn identiek aan startende tags, afgezien van het feit dat de eerste een schuine streep voor de relevante karakters bevatten. Dus in het geval van een

kop, de afsluitende tag zal zijn , terwijl u voor alinea’s altijd zult gebruiken om de tekstonderbreking te definiëren. Dit vereist aandacht voor detail tijdens het coderen, en het is belangrijk om op te merken bij het programmeren van koppen dat het nummer dat u gebruikt (zoals h1 of h2) wordt toegepast in zowel de start- als de sluitingstags.

Gebruiksfrequentie van verschillende HTML-elementen

XHTML-elementnaam
hoofd
titel
html
lichaam
een
meta
Afb
tafel
td
tr
br
p
script
lettertype
div
b
koppeling
centrum
span
het formulier
invoer
stijl
uur
sterk
ik
hl
li
noscript
kaart
Oppervlakte
ul
selecteer
keuze
h3
h2
kader
frameset
param
integreren
em
u
voorwerp
blockquote
Nee
kaders
tbody
iframe
klein
h4
baseren
noord





























0
10
20
30
40
50
60
70
80
90
100

Geneste HTML-elementen gebruiken

In dit stadium is het duidelijk dat HTML-documenten en webpagina’s worden gevormd door een boom met verschillende elementen, die als bouwstenen dienen voor een reeks activa. We hebben ook gekeken hoe deze elementen kunnen worden gevormd en gebruikt om online inhoud te structureren, en we zullen dit nu voortzetten door te kijken naar geneste HTML-elementen.

Net zoals lege elementen en stand-alone tags (zoals
kunnen worden opgenomen in gedefinieerde HTML-elementen, zogenaamde geneste elementen kunnen ook worden gehuisvest in inhoud zoals koppen en alinea’s. Deze omvatten voorbeelden zoals vetgedrukte en cursieve letters en onderstreepte tekst, terwijl ze kunnen worden toegepast om persoonlijkheid aan uw inhoud toe te voegen en de aandacht van de lezer te vestigen op specifieke aandachtspunten.

Vetgedrukte, cursieve en onderstreepte tekst in HTML

Laat’s zeggen dat u een woord binnen een bestaand alinea-element wilt markeren. U kunt dit bereiken door het vet te maken met behulp van eenvoudige tags binnen de standaard

element. Met HTML programmeert u dit als volgt:

ik wil deze woord om vet te zijn.


Hier heeft het geneste element zowel een begin- als een eindlabel, die elk een vergelijkbare indeling hebben als die welke verband houden met koppen en alinea’s. Ze kunnen naadloos worden gebruikt binnen bestaande elementen en in dit geval zal het de volgende resultaten opleveren:

ik wil deze woord om vet te zijn.

Laten we nu’s zeggen dat u ook de typografie van dit woord wilt wijzigen zodat het ook cursief is. Dit kan eenvoudig worden bereikt door een ander genest element toe te voegen, dat als volgt moet worden gecodeerd:

ik wil deze woord om vet te zijn.

Zoals u kunt zien, zijn de cursieve begin- en eindmarkeringen eenvoudig in de

element. Hierdoor wordt de inhoud binnen het element nu getransformeerd, zodat deze er als volgt uitziet:

HTML-titels zijn en blijven altijd het belangrijkste HTML-signaal dat zoekmachines gebruiken om te begrijpen waar een pagina over gaat. Als uw HTML-titels als slecht of niet beschrijvend worden beschouwd, wijzigt Google deze zelfs
ik wil deze woord om vet te zijn.

Natuurlijk kunt u besluiten dat u dit woord liever op een andere manier wilt benadrukken. U kunt daarom een ​​alternatief genest element gebruiken, zoals onderstrepen (wat wordt weergegeven door de en tags. Deze tags kunnen op dezelfde manier worden toegepast binnen de

element, dat er als volgt uitziet in HTML:

ik wil deze te onderstrepen woord.

In dit geval wordt de tekst als volgt weergegeven op uw document of bestemmingspagina:

Nieuwe semantische elementen die door HTML5 zijn geïntroduceerd, zullen het veel gemakkelijker te lezen zijn voor beginnende ontwikkelaars. In plaats van regel na regel te zien
en elementen, meer gedefinieerde tags zoals
,
en
ik wil deze te onderstrepen woord.

Dit biedt inzicht in elementen die kunnen worden gevormd door tags, die op hun beurt de structuur van uw webpagina’s bepalen en de inhoud die ze bevatten. Niet alleen dit, maar ook lege en geneste elementen kunnen worden gebruikt om uw inhoud verder te definiëren.

HTML-kenmerken

Globale kenmerken zijn kenmerken die gemeenschappelijk zijn voor alle HTML-elementen; ze kunnen op alle elementen worden gebruikt, hoewel de attributen mogelijk geen effect hebben op sommige elementen. Globale attributen kunnen worden gespecificeerd op alle HTML-elementen, zelfs die niet gespecificeerd in de standaard


Als tags de bouwstenen zijn die elementen construeren en definiëren, kunnen HTML-kenmerken worden gebruikt om hun kenmerken aan te passen (zoals stijl, kleur en taal. Alle HTML-elementen hebben kernkenmerken, die kerninformatie bieden en worden altijd gespecificeerd in de stat-tag Ze komen meestal in paren, dus zullen ze vaak in het volgende formaat verschijnen: naam =”waarde.“

Eenvoudig gezegd vertegenwoordigt de naam de eigenschap die u wilt instellen, terwijl de waarde betrekking heeft op de specifieke criteria die u wilt opnemen.

Er zijn een groot aantal kenmerken die op uw HTML-elementen kunnen worden toegepast, maar de kenmerken die het meest relevant zijn voor beginnende webmasters zijn:

Het ‘Lang’ -kenmerk

Het meest elementaire attribuut, dit definieert de taal van het document en zijn elementen. Het wordt verklaard met behulp van de ‘lang’ attribuut, en hoewel het gemakkelijk over het hoofd wordt gezien, heeft het het voordeel dat de inhoud toegankelijker wordt voor schermlezers en zoekmachines. Het wordt meestal aan het begin van het document gepresenteerd in het volgende formaat:

Er zijn verschillende soorten basiskenmerken herkend, waaronder:

vereiste kenmerken, nodig voor een bepaald elementtype om dat elementtype correct te laten functioneren

optionele attributen, gebruikt om de standaardfunctionaliteit van een elementtype te wijzigen

standaard attributen, ondersteund door een groot aantal elementtypes

gebeurteniskenmerken, gebruikt om ervoor te zorgen dat elementtypen scripts specificeren die onder specifieke omstandigheden moeten worden uitgevoerd


Na het lang attribuut specificeren de eerste twee letters de taal (in dit geval Engels). Na het koppelteken stelt de volgende twee letters het dialect vast, hoewel dit niet voor elke taal aanwezig zal zijn. Het is belangrijk dat u dit kenmerk goed krijgt om uw doelgroep te bereiken.

Het kenmerk ‘Uitlijnen’

We hebben het formaat van HTML-attributen (naam =”waarde), en de beste belichaming hiervan vindt plaats wanneer u probeert de inhoud binnen uw elementen uit te lijnen. U kunt bijvoorbeeld besluiten om alle alinea’s op een specifieke pagina te centreren, waarbij de uitlijning de eigenschap is die u wilt instellen. Hierop volgend, ’centrum’ is de waarde van het attribuut, hoewel je de keuze hebt om je tekst links of rechts uit te lijnen. Bijvoorbeeld:

Deze tekst is gecentreerd

Soorten apps gebouwd met HTML5

Productiviteit
54%
Nut
38%
Klant
35%
LOB
22%
Sociaal netwerken
18%
Entertainment
17%
Levensstijl
12%
Reizen
9%
Spellen
8%
Andere
13%

Dit zal je uitlijnen

elementen in het midden van de pagina en creëer een uniforme lay-out die past bij de specifieke aard van uw website (zie hieronder):

Deze tekst is gecentreerd
Deze tekst is gecentreerd
Deze tekst is gecentreerd

Het ‘Href’ -kenmerk

HTML5 wordt ook geleverd met een groot aantal geweldige API’s waarmee u een betere gebruikerservaring en een krachtigere, meer dynamische webapplicatie kunt bouwen – hier is een korte lijst met native API’s:
  • Slepen en neerzetten (DnD)
  • Offline opslagdatabase
  • Beheer van browsergeschiedenis
  • Documentbewerking
  • Getimed afspelen van media

Als u een zichtbare website gaat bouwen, is het belangrijk dat u zowel inkomende als uitgaande links opneemt. Het bouwen van een linkportfolio met backlinks naar interne bestemmingspagina’s is ook een haalbare strategie, dus u zult moeten leren hoe u deze in HTML kunt coderen.

HTML-links worden gedefinieerd met de tag, die de bestemmingslink bevat samen met de aangesloten ankertekst die de URL zal bevatten. Het is de ‘href ’ attribuut dat het siteadres specificeert, maar dit is opgenomen als onderdeel van de start-tag. Het is als volgt gecodeerd in HTML:

Google

Dit benadrukt duidelijk het onderscheid tussen de start- en de sluitingstag en vertaalt zich als volgt op uw bestemmingspagina:

HTML5 wordt niet beheerd door één bedrijf. Een van de beste eigenschappen is dat het een open standaard is. Ontwikkelaars hebben de vrijheid om hun creativiteit de vrije loop te laten en zoveel mogelijk functies en kenmerken toe te voegen


Het kenmerk ‘Kleur’

Dit is een ander belangrijk kenmerk, omdat het gebruik van kleur uw website tot leven kan wekken en tegelijkertijd belangrijke contrasten en een sterk ontwerpesthetiek kan creëren. In HTML kan een kleur worden gespecificeerd door de naam te gebruiken, hoewel het ook mogelijk is om een ​​RGB- of een HEX-waarde te gebruiken om dit doel te bereiken. De eerste optie is echter het gemakkelijkst te volgen, maar kan ook worden toegepast op koppen, alinea’s en andere elementen op uw pagina.

HTML5 Canvas
HTML5 Canvas [Cheat Sheet] bekijken

Dit is een stijlkenmerk, waarbij uw kleurkeuze de waarde vertegenwoordigt die u wilt instellen. Wanneer u bijvoorbeeld de kleur rood op een hoofdkop toepast, ziet deze er als volgt uit:

Achtergrondkleur ingesteld met rood

Eenmaal toegepast, verschijnt dit element als volgt op uw website:

Achtergrondkleur ingesteld met rood
In vergelijking met andere browsers zorgt elke Google Chrome-update voor ondersteuning voor HTML5. Bovendien is de standaardspeler van YouTube nu HTML5 en worden de Flash-advertenties van Google nu geconverteerd naar HTML5


Nogmaals, er is een duidelijk onderscheid tussen de start- en sluitingstags die het element definiëren, terwijl dit een van de gemakkelijkste attributen is om in HTML toe te passen. Het benadrukt ook verder de naam =”waardeformaat van HTML-attributen, waardoor het leerproces en het toepassen ervan veel gemakkelijker wordt op uw hele website.

Test jezelf

Met een basiskennis van HTML en de afzonderlijke elementen ervan, is de volgende stap het uitvoeren van enkele eenvoudige projecten en het toepassen van uw theoretische kennis om praktische uitdagingen op te lossen.

Browsergebaseerde applicaties die HTML5 draaien, zullen geen probleem hebben met geolocatie

In de onderstaande oefening hebben we een tekst weergegeven, behalve en gevraagd om verschillende aspecten op te maken met HTML. Gebruik de gids en alles wat je tot nu toe hebt geleerd om de uitdaging aan te gaan terwijl je je voorbereidt om je eigen website te coderen.
________________________________________

Hoofdkop

Welkom op onze website, Example.com! We hopen dat u onze inhoud met plezier leest, neem gerust contact met ons op.

Bedankt voor het bezoeken!

Kom meer te weten.

Gebruik van HTML5 door ontwikkelaars
(per regio)

Noord- en Latijns-Amerika
70%
Zuid-Amerika
61%
ASPAC
60%
Australië
60%
Europa
59%
Afrika
50%

________________________________________

Vragen:

  1. Vul het header-element in met de juiste sluittag.
  2. Maak de koptekst vet.
  3. Voeg een horizontale lijn onder de koptekst in.
  4. Gebruik het kleurkenmerk en de schaduw ‘Bedankt voor het bezoeken’ in het groen
  5. Voeg deze hyperlink in (https://www.w3schools.com/html/) in de ankertekst “Leren
    meer.”
  6. Gebruik bovenaan de pagina de naam =”waardeformaat om de alinea’s links uit te lijnen


Conclusie

Hoewel HTML pas in 1991 is gemaakt (met de eerste versie van de codeertaal die vervolgens in 1995 werd gelanceerd), is het snel een baanbrekend hulpmiddel geworden bij het ontwerpen van functionele en visueel aantrekkelijke websites. Het niveau van invloed van HTML blijft ook evolueren, waarbij de nieuwste iteratie (HTML5) wordt overgenomen door een groeiend aantal websites over de hele wereld.

In dit opzicht is het leren van de basiselementen van HTML en het toepassen ervan de belangrijkste stap die u zult nemen bij het opzetten van een succesvolle, zichtbare en uiteindelijk concurrerende website.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map