Structuur van het HTML-document: hoofdtags, voorbeeld
HTML is de taal van markup. Veel mensen beschouwen het als programmeertaal, maar dat is het niet. In HTML zijn er geen variabelen, berekeningen, arrays of andere elementen aanwezig in een programmeertaal.
Met HTML kan de ontwikkelaar alleen makenuiterlijk van de site. Het is belangrijk om te weten dat er geen site bestaat zonder markeringen. HTML is de basis voor het maken van webpagina's. De rest van de functionaliteit wordt toegevoegd door verschillende programmeertalen.
Een html-document maken
Maak een eenvoudige webpagina in eende redacteur. Zelfs "Notepad" zal het doen. Het wordt aanbevolen voor een beginnende ontwikkelaar om andere editors te gebruiken die functies voor automatische vervanging en andere aanwijzingen hebben. Dankzij dit kunt u kant-en-klare tabellen, koppelingen, afbeeldingen en andere elementen maken. En in 'Notepad' moet elke letter handmatig worden geschreven.
In de regel wordt "Kladblok" alleen daarin gebruiktgevallen waarin er geen andere hulpmiddelen bij de hand zijn. Eerst wordt een tekstdocument gemaakt en vervolgens opgeslagen in html-indeling. Alle pagina's op de site moeten de html-extensie hebben.
De html-taal is hiërarchisch. Dat wil zeggen, er is een speciale structuur voor het html-document. Wat is het? Laten we eens kijken voor de duidelijkheid.
Structuur van het html-document. voorbeeld
De structuur is altijd hetzelfde. Als u iets wilt wijzigen, kan de browser dit niet verwerken. Het gevolg is dat je niet krijgt wat je van plan was.
De bovenstaande afbeelding toont de structuur van elkhtml-bestand. Het eerste item geeft het type bestand aan. Deze tag wordt één keer opgegeven. Als u speciale editors gebruikt, wordt de hele structuur automatisch gemaakt. U moet de standaardwaarden aanpassen.
De structuur van het html-document bestaat uit de hoofdtags:
- <Html>
- <Head>
- <Body>
Van deze drie tags is het skelet van de hele site. Besteed aandacht aan de foto. Al deze tags hebben een afsluitende tag met een "/" -teken. Als je met de hand schrijft, wen er dan aan om beide tags tegelijk te plaatsen - openen en sluiten.
Er werd hierboven gezegd dat pagina's van websites hebbenextensie .html. Dat wil zeggen dat als u een tekstdocument maakt, maar tegelijkertijd de juiste code schrijft, de browser u nog steeds alleen de tekst laat zien. Er zal geen codeconversie zijn.
Hoofdgedeelte
In de figuur hieronder, paragraaf 3, is het hoofdgedeelte aangegeven. Dit gedeelte geeft de service-informatie aan. U kunt bijvoorbeeld de codering (item 4) en de paginatitel opgeven (stap 5).
De titel zou altijd moeten zijn. Zonder dit kan geen enkele zoekmachine de naam van de inhoud (tekst) op de webpagina bepalen. En dit is slecht voor website-promotie. Bovendien specificeert de browser bovenaan de titel van de pagina niet. Dit is een ongemak voor de gebruiker.
De structuur van het html-document is zodanig dat de titel <titel> alleen in de kopsectie wordt gespecificeerd. Als de tag <title> in de bodysectie of erna wordt opgegeven, let de handler er niet op.
Bovendien specificeert het hoofdgedeelteinformatie voor het verbinden van scripts, stijlbestanden, instructies voor zoekmachines of andere gegevens die de gebruiker niet hoeft te zien, maar ze zijn belangrijk voor de browser of programmeurs.
Stijlen verbinden
De structuur van het html-document maakt het mogelijk om verbinding te makenstijlen op verschillende manieren. Bovendien kunnen ze afzonderlijk in elk element worden geschreven. Maar deze methode wordt niet aanbevolen, omdat de code te groot en ongemakkelijk wordt.
Zoekmachines bevelen aan dat alle stijlen in een apart bestand worden weergegeven en dat in elementen eenvoudig verschillende klassen worden gebruikt.
Het bestand is als volgt verbonden.
<link rel = "stylesheet" href = "style.css" type = "text / css">
Het href-kenmerk geeft het pad naar het bestand aan. Als er een fout in het pad zit, worden de stijlen niet geladen. Ook is het typekenmerk vereist, wat aangeeft dat dit een CSS-bestand is.
Een andere optie is om stijlen rechtstreeks in de kopsectie te definiëren.
Maar deze optie is ook niet erg aan te bevelen. Deze methoden zijn heel verschillend omdat het css-bestand er één kan zijn voor de hele site en alle wijzigingen erin onmiddellijk op alle pagina's kunnen worden toegepast. En als u de methode gebruikt die wordt weergegeven in de bovenstaande afbeelding, moet u wijzigingen aanbrengen in alle bestaande pagina's op de site.
Als de klas die u aanmaakt alleen op één pagina wordt gebruikt, dan is deze optie geschikt voor u.
Verbindende scripts
De scripts zijn als volgt verbonden.
<script type = "text / javascript" src = "main.js"> </ script>
Hier zijn twee attributen nodig: type en src. Geef in de eerste aan dat dit een Javascript-bestand is, en de tweede is waar het bestand zich bevindt. Als je een typfout maakt, werkt niets.
Sectie body
De structuur van het html-document is zodanig dat het noodzakelijk is om inhoud te plaatsen die alleen zichtbaar is voor de gebruiker in de body-sectie. De tagnaam spreekt voor zich.
Dit specificeert de hoofdpaginacode, die een onbeperkt aantal elementen kan bevatten. Maar hoe langer de code, hoe langer deze zal worden verwerkt.
Overweeg de meest basistags die u in het hoofdgedeelte kunt gebruiken. Er zijn niet zo veel basale. Al de rest zul je ontdekken als je kennis en praktijk groeit.
Standaard tags
De structuur van het html-document vereist een verplichtvolgorde van de schrijfelementen. Tags moeten altijd tussen haakjes worden geplaatst <>. Zonder dit begrijpt de browser niet dat het een tag is. Na het openingshaakje volgt altijd de naam van het element (tag). Als u ruimte tussen <en naam toestaat, beschouwt de browser dit als tekst.
Overweeg het voorbeeld van een afbeeldingstag. Merk op dat deze tag niet sluit, in tegenstelling tot links, alinea's en vele andere.
De volgorde van de attributen doet er niet toe. Maar hun schrijven is erg belangrijk. Altijd de naam van het attribuut eerst komt, dan is het gelijkteken, dan is de waarde van het attribuut geschreven tussen aanhalingstekens. De waarde kan verschillen - digitaal of tekst.
Het src-attribuut in alle tags geeft het pad van het bestand aan,welke je moet laden. Het alt-attribuut in alle elementen geeft een korte beschrijving aan. In dit geval wordt een foto van bird.jpg geladen met een beschrijving van een vogelfoto.
Bovendien kunt u in de img-tag dimensies opgeven, alleen de breedte of hoogte, titel, uitlijning, stijlklasse of frame.
Overweeg de andere hoofdtags die worden vermeld in de hoofdgedeelte.
label | afspraak |
<a> ... </a> | referenties |
<Img> | image |
<p> ... </ p> | paragraaf |
The <br> | Tekst overbrengen naar een nieuwe regel |
<strong> ... </ strong> | Vetgedrukte tekst |
<i> ... </ i> | cursief |
<s> ... </ s> | Doorstreping van tekst |
<u> ... </ u> | Onderstreepte tekst |
<ol> </ ol>, <ul> </ ul> | lijsten |
<tabel> </ table> | tafels |
Hoe kan ik me dit alles in mijn hoofd voorstellen?
Beginontwikkelaars kunnen zich niet altijd meteen voorstellen dat dit allemaal speculatief is. Kijk naar een paar voorbeelden van de structuur van webpagina's, en dan zul je duidelijk worden.
Er is zo'n optie:
En dit:
Stijlen gebruiken
Zoals eerder vermeld, kunt u stijlen verbinden met zowel het bestand als opgeven in de kopsectie. In elk geval is de beschrijving van de klassen vrijwel hetzelfde.
U kunt bijvoorbeeld een stijl voor de kop opgeven. Dan moet u h1 schrijven (aangezien de stijl voor de header van het tweede niveau zal zijn), haakjes openen en schrijven welke eigenschappen in dit element zullen zijn. Als je Engels kent, zouden er geen problemen moeten zijn. Alle eigenschappen worden menselijke taal genoemd.
Als je deze stijl voor meerdere elementen tegelijk wilt specificeren, schrijf ze dan gescheiden door komma's.
Het resultaat is een rode kop.
De bovenstaande methoden zijn geschikt voor het ontwerp van standaardelementen. Maar u kunt ook uw eigen klassen maken. Hun naam moet beginnen met een punt, waarna elke willekeurige naam wordt geschreven.
Je moet ze zo gebruiken.
Let op: Als u stijlinstellingen hebt opgegeven voor een standaardelement, hoeft u de woordklasse niet te schrijven. De stijl wordt standaard toegepast. In het klassenkenmerk kunt u alleen die stijlen opgeven die u met een punt begint.
