Wat is HTML, structuurkenmerken

HTML is zonder twijfel de belangrijkste taal van internet,is bij hem ontstaan. Op de een of andere manier is hij betrokken bij de creatie en werking van elke webpagina op het World Wide Web. Zonder te begrijpen wat HTML is en hoe het werkt, is het onmogelijk om een ​​continue stroom tekst, die oorspronkelijk elk document is, om te zetten in een gestructureerde, mooie en gebruiksvriendelijke site.

HTML en het World Wide Web

De afkorting is afgeleid van het EngelsHyperText Markup Language-zinnen. De vertaling legt volledig uit wat HTML is - het is een hypertekstopmaaktaal. Het verscheen aan het begin van de ontwikkeling van internet en was bedoeld voor het ontwerpen van webpagina's met wetenschappelijke en technische documentatie, die vooral correct moet worden opgemaakt.

Tim Berners-Lee, de maker van de taal, stelde dat voormet zijn hulp zal het mogelijk zijn om eenvoudig eenvoudige maar begrijpelijke documenten te creëren voor uitwisseling tussen wetenschappers uit verschillende steden en landen. Hij ontwikkelde een reeks descriptoren - elementen die tekst opmaken. We kennen ze nu als "tags".

U heeft nodig om de HTML-tekst correct weer te gevenhet verwerken. Dit wordt gedaan door speciale programma's - browsers. Ze ontvangen de opmaakpagina, interpreteren de tagbeschrijvingen en geven de tekst weer zoals de gebruiker deze zou moeten zien.

Een heel belangrijk deel van de taal, dat zelfs vanuitde naam is hypertext-ondersteuning. Dit betekent dat sommige HTML-pagina's links naar andere kunnen bevatten. Het kruisverwijzingssysteem was van bijzonder belang voor wetenschappelijke artikelen, omdat het toeliet om niet diep in te gaan op de uitleg van een complexe term, maar om de lezer eenvoudig naar het corresponderende hoofdstuk te sturen, indien nodig.

Taal ontwikkeling

Naarmate de tijd verstreek, een eenvoudige set tags die HTML wasaan het begin van zijn bestaan ​​is het gegroeid en versterkt. Nu is het mogelijk om multimedia-inhoud op een pagina in te sluiten, tabellen te maken en de rangschikking van afbeeldingen te regelen.

De spontane uitbreiding van de taal moest worden beteugeld en onder controle worden gebracht, er waren bepaalde normen nodig.

1995 - tijdstip van goedkeuring van de derde versiespecificaties en een keerpunt in het lot van lay-outontwerpers. Moderne browsers konden op dat moment niet langer de implementatie van geaccepteerde standaarden garanderen, improvisatie en gelaagdheid begonnen. Elke internetbrowser had zijn eigen mening over wat HTML is en hoe specifieke descriptoren moeten worden geïnterpreteerd.

Gelukkig zijn de belangrijkste conflicten tussen browsers nu gladgestreken, wat frontend-ontwikkelaars veel energie en zenuwen bespaart.

HTML5

De vijfde norm is relevant voor 2018HTML, waarvan eind 2007 een concept verscheen. Hij introduceerde veel nieuwe elementen en attributen, met bijzondere nadruk op de semantiek van webpagina's en hun toegankelijkheid voor gebruikers met een handicap.

De taal blijft zich actief ontwikkelen en verbeteren.

HTML-basisprincipes

De belangrijkste HTML-structuren zijn descriptors, of tags, en entiteiten. Gewone tekst die met hun hulp wordt verwerkt, verandert in een webdocument.

Hypertext Markup-entiteiten zijn geheugensteuntjes voor speciale Unicode-tekens die niet beschikbaar zijn op conventionele toetsenborden.

Voorbeelden van entiteiten:

<	open hoekbeugel
>	sluitingshoekbeugel
& larr;	dunne pijl die naar links wijst
uarr;	dunne pijl die omhoog wijst

HTML-entiteiten beginnen met een ampersand,eindigt met een puntkomma en bevat een gemakkelijk te onthouden code voor het teken. Ze zijn belangrijk omdat u hiermee tekens kunt weergeven die niet rechtstreeks in HTML-code kunnen worden geschreven.

Deze borden bevatten bijvoorbeeld punthaken. In hypertekstopmaaktaal dienen ze als tag-ID's en omringen ze de descriptornaam aan beide zijden.

HTML-tags

Tags zijn de belangrijkste structurele componenten van een webdocument. Het zijn containers van de openende en sluitende delen en de inhoud daartussenin.

Voorbeeld tag:

<i> tekst in de tag </i>

Dit is de HTML-descriptor ikwat een cursief lettertype definieert. De letter i is de eerste letter van het woord cursief. Hij heeft:

• openingsdeel <i>;
• dekkingsdeel </i>gekenmerkt door de aanwezigheid van een schuine streep;
• inhoud die cursief wordt weergegeven nadat deze door de browser is geparseerd.

De meeste descriptors hebben dezelfde structuur, maar er is een kleine groep lege tags.

Lange tekst die <br> in meerdere regels moet worden opgesplitst <br> om de leesbaarheid te verbeteren.

Label <br> na het ontleden wordt het vervangen door een regeleinde. Het heeft geen inhoud, dus er is geen afdekdeel nodig.

De volgende tags zijn ook leeg:

• <hr>aanduiding van een dunne grijze lijn die blokken tekst van elkaar scheidt;
• <input>het vertegenwoordigen van een hele familie van interactieve formulierelementen;
• <img>het afbeeldingsbestand verbinden;
• een aantal servicetags - <meta>, <link>.

Descriptors kunnen op een willekeurig aantal niveaus in elkaar worden genest. De enige uitzonderingen zijn lege tags, die geen inhoud kunnen bevatten.

Tag attributen

Van groot belang bij het maken van webdocumenten zijn de attributen die in het openingstag-element worden geplaatst. Een descriptor kan een of meer eigenschappen hebben, of helemaal geen.

In de meeste gevallen met attributensommige aspecten van het gedrag van het element worden verduidelijkt, en soms kunnen ze de visuele presentatie radicaal veranderen. Een aantal eigenschappen wordt gebruikt voor servicedoeleinden, waardoor u HTML-tags vanuit CSS of JavaScript kunt manipuleren.

Kenmerkinstelling:

Selecteer kleur:  <input type = "checkbox" name = "red"> Rood  <input type = "checkbox" name = "yellow" aangevinkt> Geel  <input type = "checkbox" name = "green"> Groen

Hier is een groep van drie interactieve <input> -elementen. Attribuut type definieert hun weergave als selectievakjes, naam bevat de naam van een specifiek veld en de eigenschap gecontroleerd, onbelangrijk, maakt de tweede invoer de standaard.

Er zijn algemene attributen die voor elke descriptor kunnen worden gedefinieerd, en specifieke attributen die specifiek zijn voor specifieke tags.

Universele eigenschappen zijn onder meer: ​​id, class, title.

Specifiek - het bovengenoemde type, aangevinkt, evenals src, href en een aantal anderen.

Syntaxisfuncties

Bij ontvangst van een HTML-pagina, parseert de browser deze en gooit alle onnodige items weg. In de meeste gevallen worden dus meerdere spaties en regeleinden genegeerd.

De volgende twee codefragmenten zijn volledig identiek voor de browser, hoewel een ervan veel opeenvolgende spaties bevat en in regels is onderverdeeld, en de tweede niet.

​- eerste fragment -> <p> Lorem ipsum <i> dolor sit </i> amet. </p> <p> <b> doloribus sunt, </b> ad provident. </p>  <! - tweede fragment -> <p> Lorem ipsum <i> dolor sit </i> amet. </p> <p> <b> doloribus sunt, </b> ad provident. </p>

Koppeltekens en tabs kunnen worden gebruikt voorvisuele structurering van de code, maar ze hebben geen betekenis voor de browser. In sommige gevallen, wanneer het nodig is om het originele tekstformaat te behouden, samen met spaties en inspringingen, zijn er tags die hun inhoud weergeven zonder voorafgaande verwerking door de browser, bijvoorbeeld <pre>.

HTML is niet hoofdlettergevoelig.Dit betekent dat tags, namen en attribuutwaarden in kleine letters of hoofdletters kunnen worden geschreven en dat beide opties even correct door de browser worden verwerkt. Indien gewenst kunt u zelfs combinaties van hoofdletters en kleine letters gebruiken, maar dit verstoort de normale waarneming van de code.

Als u eenmaal vertrouwd bent geraakt met tags, hun eigenschappen en syntaxis, kunt u van de basisprincipes van HTML naar de structuur van een HTML-document als geheel gaan.

Een HTML-document bouwen

Elke webpagina moet een soort skelet hebben om de browser correct weer te geven.

De vereiste structuur van een HTML-document omvat:

• een doctype-verklaring om een ​​goede browserweergave te garanderen;
• html-wrapper voor de hele pagina;
• speciaal serviceonderdeel hoofd.

<! DOCTYPE html> <html> <hoofd> <! - service-informatie voor de browser en zoekrobots -> </head> <body>   </body> </html>

HTML5 vereist geen tag lichaam in een document is het echter raadzaam het nog steeds te gebruiken om een ​​inhoudsgebied aan te duiden.

De belangrijke maar optionele servicebeschrijvingen zijn:

• titel met de titel van de pagina;
• metatags die codering, seo-informatie, http-headers en andere belangrijke instellingen definiëren.

<hoofd> <title> Paginatitel </title> <meta charset = "utf-8"> <meta name = "description" content = "Beschrijving van de pagina voor zoekrobots"> </head>

Anders kan de structuur van de HTML-pagina van alles zijn. De kenmerken zijn afhankelijk van het specifieke project.

De hoofdregel die moet worden nageleefd inelk webdocument is het correct nesten van tags. Eerst wordt de descriptor op het diepste nestniveau gesloten, en vervolgens alle externe een voor een.

<body> <hoofd> <artikel> <p> Paragraaf tekst </p> <! - de alinea wordt als eerste gesloten -> </article> <! - dan artikel -> </main> <! - dan de hoofdtag -> </body> <! - en tenslotte de body van het document ->

Semantische structuur

Zoals de specificatie ende opkomst van nieuwe descriptoren veranderde de technologie voor het maken van webdocumenten. Aanvankelijk gingen de teksten in een continue stroom, alleen verdeeld in alinea's. Toen kwam het tijdperk van de tabelopmaak, die het mogelijk maakte om blokken in elke configuratie op een pagina te plaatsen, bijvoorbeeld in kolommen.

Met de ontwikkeling van CSS werd het gebruik van tabellen langzamerhand verlaten, omdat stijlen het mogelijk maakten om een ​​document naar wens te ontwerpen.

De nieuwe HTML-standaard verwelkomt semantiek in de structuur van een HTML-document. Dit wordt bereikt door semantische tags te gebruiken, zoals koptekst, voettekst, hoofd, artikel, nav, sectie en anderen.

De hoofdtaal van internet is heel eenvoudig. Iedereen kan achterhalen wat HTML is en deze kennis met succes toepassen door zijn eigen webpagina's te maken.