Welke tags definiëren het zichtbare deel van het document. Tags - wat is het en wat zijn het

laat een reactie achter 6,950

De mens kan niet leven van woorden alleen,
hoeveel hij ze ook doorslikte.
Adlai Stevenson.

Over het algemeen is HTML geen programmeertaal. Dit is de HyperText-opmaaktaal. Dat wil zeggen, het is niet correct om het "HTML-taal" te noemen.

Simpel gezegd, HTML is taglijst(controlewoorden), waarmee u platte tekst op een opgemaakte manier kunt weergeven. Selecteer het bijvoorbeeld vetgedrukt, of schuingedrukt enz. Maar u kunt de tekst op deze manier alleen presenteren in speciale programma's - (programma's waarmee u op internet surft).

Ze geven alleen opgemaakte tekst weer en verbergen HTML-tags gebruikt voor opmaak. Om het duidelijker te maken waar ik het over heb, klik met de rechtermuisknop op deze pagina en selecteer "Broncode" of iets dergelijks in het menu dat wordt geopend. Deze pagina wordt in zijn huidige vorm voor u geopend.


U kunt HTML-code zowel in gewone programma's maken als in speciale programma's, de zogenaamde. Visuele editors verschillen van teksteditors doordat ze zijn ontworpen voor een reeks HTML, CSS, JavaScript, PHP, enz., d.w.z. voor webprogrammering. Bovendien stellen ze u in staat om onmiddellijk de vruchten van uw werk in de ingebouwde browser te bekijken en enkele fouten in de getypte code te markeren.

Ik raad ten zeerste aan om alle code met de hand te typen (om de directheid van deze handen te verbeteren), visuele editors maken dit proces veel gemakkelijker. Persoonlijk gebruik ik . Dit is niet de nieuwste versie, maar ik heb meer dan genoeg van zijn mogelijkheden.

Ik doe dit: ik typ de code in Dreamweaver, sla op en klik op de knop "Bekijken in browser" (u bewerkt de lijst met browsers in dit menu), ga dan terug naar Dreamweaver en ga verder met bewerken. Hier . Dit is wat de tools betreft, laten we nu direct naar de HTML-tags gaan.

Laten we beginnen met de structuur van de html-pagina, of liever met de belangrijkste tags.

Vereiste HTML-paginatags

De vereiste (basis) HTML-tags die in elk html-document worden gebruikt, zijn onder meer:

Opmerking. Om ervoor te zorgen dat de browser de HTML-code als tekst uitvoert (niet interpreteert in code), na elke openingshoekhaak " » Ik laat een gat. Jij, wanneer je de code typt, spaties GA NIET WEG.

Zoals je ziet, alle tags zijn gekoppeld(er is een openingstag en een sluitingstag), bijna alle tags in HTML zijn zo. De openingstag verschilt van de sluitingstag doordat de sluittag wordt voorafgegaan door een schuine streep " / ". Deze tags worden ook wel container, omdat er andere tags tussen kunnen worden ingevoegd, d.w.z. in een container doen. U kunt zelf zien dat er andere tags tussen de tags en .

U kunt tagnamen zowel in hoofdletters als in kleine letters typen, er is geen verschil. Dat wil zeggen, records van het formulier en voor de browser hebben geen verschillen en worden op dezelfde manier geïnterpreteerd. Laten we nu in meer detail praten over wat deze tags betekenen.

Dus de hoofdtags laten browsers en andere hypertext-paginaviewers zien dat ze te maken hebben met een hypertext-document. Elk html-document moet beginnen met en eindigen met. Dat wil zeggen, tussen deze tags is ALLE html paginacode.

Tussen de tags en zijn metatags (paginatitel, beschrijving, trefwoorden, enz.). Ze slaan informatie op over de html-pagina en technische informatie. Over het algemeen is deze tag optioneel, d.w.z. zonder deze wordt het html-document normaal weergegeven door browsers. Maar zelfs als u niet van plan bent het kopgedeelte te gebruiken, houd het dan in ieder geval eenvoudig. Dit is nodig voor compatibiliteit tussen verschillende versies van programma's.

Alle informatie tussen de "HEAD"-tags wordt op geen enkele manier weergegeven door de browser (behalve de informatie tussen de tags, waar de naam van het html-document zich bevindt, weergegeven in het bovenste paneel van de browser). Maar ze kunnen een grote impact hebben op het uiterlijk van een html-pagina, het leven op internet en de ranking. We zullen later meer praten over de tags die zich in de kop van een hypertext-document bevinden.

De hoofdinhoud van het html-document bevindt zich tussen de en tags. Hier is alles wat we zien als we een html-pagina openen: tekst, afbeeldingen, menu's, knoppen, enz. Dit is de hoofdtekst van de pagina.

Alle andere tags die worden gebruikt bij het maken van een html-document bevinden zich tussen (d.w.z. binnen) deze vereiste tags. Bijna alle tags in HTML hebben verschillende attributen, eigenschappen en parameters waarmee u informatie precies kunt weergeven zoals de ontwikkelaar het bedoeld heeft. Als je bijvoorbeeld schrijft:

De achtergrond van de hele pagina wordt rood.

Hier label- dit is eigenlijk een tag; bgcolor- zijn attribuut; "#FF0000"- attribuutwaarde (een tag kan meerdere attributen hebben).

Opmerking. Alle tag-attributen en hun waarden zijn gespecificeerd in opening tag (degene die zonder schuine streep), maar nooit in de laatste.

En zo kwamen we erachter wat de belangrijkste tags van het html-document waren. Nu is het tijd om de rest in meer detail te verkennen. Hier wil ik een kleine uitweiding maken.

Hoe ik voorstel om HTML te leren

Door de opgedane kennis in de praktijk toe te passen, realiseerde ik me wat een fout de meeste auteurs van deze boeken en tutorials maakten. Al deze leerboeken zijn in de eerste plaats bedoeld nieuwkomers, ten tweede, de studie van de basisprincipes van HTML gaat ze op volgorde in.

T . e. Eerst wordt gekeken naar de heading-tags van het html-document (, en vervolgens naar de “body”-tags ().

Op basis van mijn eigen ervaring durf ik te zeggen dat een dergelijke volgorde van het leren van de basis van HTML voor een beginner absoluut onaanvaardbaar is. Een beginner doet een poging om al deze talrijke en obscure title-tags te leren, ten eerste zonder de resultaten van zijn leren te zien (ik herinner u eraan dat title-tags niet door de browser worden weergegeven). En ten tweede, zonder zelfs maar te vermoeden dat de meeste van deze tags niet nodig zullen zijn om de site te maken die hij heeft bedacht (tenminste aan het begin van het werk).

Zo verspilt hij alleen maar tijd en verlangen om HTML te blijven leren. Tegelijkertijd bevestigt hij de mening dat alleen "goeroes" het voor goed geld kunnen doen. Ik zou ook stoppen met deze les als het me niets kon schelen wat ik nog steeds niet begrijp en niet verder zou gaan.

Daarom stel ik voor dat u eerst de tags bekijkt die betrekking hebben op de "body" van het html-document (), en pas daarna verder gaat met de rest. Bovendien bevat de "body" van de html-pagina informatie voor welke sitebezoekers zullen komen. En het maken of vinden ervan is veel moeilijker dan het schrijven van code.

Welnu, druk nu zonder een moment vertraging op de knop "Volgende" en leer hoe deze ongeschoren en slaperige jongens websites maken.


Basis html-tags vormen de basis waarop bijna elke website/blog is gebouwd. Uit dit artikel leer je precies die 20% tags die je altijd nodig hebt.

Zoals in elke taal, is ook hier de 20/80 pareto-regel van toepassing (20% van de gevallen is 80% belangrijk om het gewenste resultaat te bereiken), wat betekent dat het voldoende is om slechts 20% van de codes te kennen om vol vertrouwen uw doel te bereiken. doelen bij het bouwen van websites.

HTML is geen programmeertaal, omdat het een hypertext-opmaaktaal is, die voor zichzelf spreekt, het stelt u in staat om blokken op pagina's te markeren voor een correcte weergave, om tekstopmaak voor webpagina's te maken. Met zijn hulp worden er ook koppelingen gemaakt van de ene pagina van de site naar de andere. Alle links op internet worden gemaakt met behulp van het hypertext-gedeelte van de html-code.

Het is de eenvoudigste taal ooit! Als je besluit om het te bestuderen, is het belangrijk om vanaf het begin te begrijpen dat hier geen problemen mee zijn. We kunnen met vertrouwen zeggen dat het voor kinderen op school, in de informaticales, veel moeilijker is.

Dus laten we beginnen. Het is beter om codes te schrijven in een kladblok, dat is opgenomen in de standaardprogramma's van het Windows-besturingssysteem of in het gratis programma Notepad++.

Laten we eerst definiëren wat een tag is. Een tag is een cel van de html-taal zelf, van waaruit deze over het algemeen is opgebouwd. Door middel van tags begrijpen browsers hoe tekst moet worden weergegeven en waar afbeeldingen moeten worden ingevoegd. Tags zijn de opmaakelementen zelf.

HTML-tags voor het maken van een siteframe

Tags zijn gekoppeld en niet gekoppeld. Gepaarde kamers openen en sluiten, d.w.z. er is een backslash "/" in de sluitende kamers.

Het eerste dat in elk html-document moet staan ​​bij het maken van een blogpagina is:

  • - vertel de browser dat alles daartussen html-code is;
  • - van Engels. "head", bevat de naam, codering, metatags voor zoekmachines;
  • TITEL- metatag, voornamelijk voor zoekmachines, bevat de naam van het document, weergegeven bovenaan de browser;
  • - een enkele tag die de taalcodering van de browser aangeeft, waarbij windows-1251 aangeeft dat de tekst van deze pagina in het Russisch is (windows-1252 is voor Engels);
  • - voor site-trefwoorden;
  • - een samenvatting van de pagina;
  • DOCUMENT LICHAAM

    - van Engels. "body", bevat de volledige pagina van de site.

Deze waren standaard html-codetags, waarmee, zonder wijzigingen, alle pagina's van de site / blog in deze vorm zouden moeten beginnen:











Lijst met html-tags in de hoofdtekst van de pagina

Tussen tags

de hoofdtekst van de sitepagina zelf zal zich bevinden waar:

  • koptekst

    - het belangrijkste 1 niveau;
  • van

    ondertitel

    Aan
    ondertitel
    - onderverdelingen van respectievelijk de niveaus 2, 3, 4, 5 en 6;
  • ankerlinks— link, waarbij » target=»_blank»» een attribuut is dat verantwoordelijk is voor het openen in een nieuw venster, » title=»» de naam is van wat de link zal zijn;
  • en — tags die vet moeten worden gemarkeerd. "" zijn verouderd en aanbevolen om te gebruiken " »;
  • - voor cursief;
  • - een enkele tag die verantwoordelijk is voor het invoegen van een afbeelding op de pagina;
  • - "p" uit het Engels. "paragraaf", wat betekent dat het de tekst in alinea's verdeelt. Standaard links uitgelijnd;

  • - een logische tag die het einde van de regel en de overgang naar de volgende betekent;
  • — attribuut dat de tekst in het midden uitlijnt;
  • - attribuut uitlijnen tekst naar rechts;
  • —
  • color="green" is verantwoordelijk voor de kleur van de tekst. In dit geval is het groen. Het woord "groen" wordt meestal vervangen door een code uit het hexadecimale kleurensysteem, bijvoorbeeld: "#088f47";
  • face="verdana" - een attribuut dat het lettertype in de tekst aangeeft;
  • size = "3" - lettergrootte;
    1. eerst
    2. seconde
    3. derde
    - genummerde lijst;
    • woord
    • woord
    • woord
    - lijst met opsommingstekens;

HTML-tags voor het maken van een tabel

Er kunnen veel tags in de tabel zelf zijn, dit zijn veranderingen in de kleur van de tabelrand, uitlijning van woorden in de tabel, enz., maar aangezien het artikel over de hoofdtags gaat, zullen we ons alleen concentreren op tags voor het maken van de tafel zelf.

  • - de tag die verantwoordelijk is voor het maken van de tabel, waarbij "1" de breedte van de tabelrand is, waarbij "450" ​​​​de breedte van de tabel is, en u "midden" al kent;
  • - de tag binnen "
    ' en maakt een rij aan in de tabel;
  • - maakt een kolom op een rij, staat binnen de tags " ". "150", zoals je waarschijnlijk al geraden had - de breedte van de kolom;

Geheel html-tabeltags zie er ongeveer zo uit:












cel nummer 1

cel nummer 2

cel nummer 3

cel nummer 4

celnummer 5

celnummer 6

Ik benadruk nogmaals dat dit de belangrijkste tags van de html-code zijn en dat je er veel aan kunt veranderen. En het is ook vermeldenswaard dat de html-code zelf een sjabloon is, zonder css is het over het algemeen onmogelijk om er iets mee te doen dat de moeite waard is. Alleen samen doen html en css wonderen, maar iets eenvoudigs kan worden gedaan zonder diepgaande kennis van css, puur op html.

Videoles over het onderwerp - "Wat is HTML? indexhtml-bestand":

Deel het als je het leuk vindt:

Misschien vind je het ook interessant om te weten:


Iedereen die deze les leest, weet waarschijnlijk wat HTML is. Maar door de basis te herzien, kunt u uw kennis vergroten en uw vaardigheden aanscherpen, vooral in een steeds veranderende webomgeving.

Er wordt tegenwoordig veel gesproken over de veranderingen die HTML 5 heeft gebracht. Elke tag die in dit artikel wordt genoemd, wordt ondersteund in zowel HTML 4.01 als HTML 5. Hoewel sommige van deze tags veel worden gebruikt, is het erg nuttig om de methoden betrokken.

1.

Elk boek over programmeren bevat een vermelding dat het erg nuttig is om uit te leggen wat uw code doet. Waarom is commentaar geven een goede gewoonte? Dit helpt veel mensen die uw code lezen om de essentie te begrijpen van wat er gebeurt.

Voor HTML kan commentaar een punt lijken dat gewicht aan een pagina toevoegt. Opmerkingen kunnen echter nuttig zijn voor het definiëren van secties en voor het onderhouden van de structuur en organisatie van de paginacode. Het begin en einde van verschillende secties markeren kan echt helpen bij het werken aan een project.

  • Menu-item 1
  • Menu-item 2

Dit is de hoofdinhoud.

...

2. Tabelstijlen: , , En

Om een ​​goed tafelontwerp te maken, moet u de tags gebruiken die in de subkop worden vermeld. Ze hebben allemaal invloed op tabelrijen en kunnen gemakkelijk worden gestyled.

item aantal
som 7
#1 3
#2 4

Wikkel tabelrijen in . Zo wordt de kop van de tabel gevormd.

De lijnen inpakken vormen de laatste rijen onderaan de tabel. Snaren moet vóór de regels worden gedefinieerd , zodat de totale rijen vóór de rest van de tabelrijen worden weergegeven.

We wikkelen datalijnen in .

Paragraaf aantal
Som 7
#1 3
#2 4

3.

Een vervolgkeuzelijst is een geweldige manier om gegevens te presenteren die een gebruiker kan selecteren. Ze nemen niet alleen weinig ruimte in beslag, ze zijn ook vertrouwd voor gebruikers en gemakkelijk te gebruiken. wonderbaarlijke eigendom is de mogelijkheid om categorieën (of subkoppen) te maken voor lijstitems.

Detroit Tigers Chicago Cubs Detroit Lions Chicago Bears

4. Kopteksten -

,

,

,

,

, En

Natuurlijk gebruikt iedereen headers. Maar om eerlijk te zijn, wanneer was de laatste keer dat je gebruikte?

of een nog lager niveau? Met koppen kunt u minder semantische constructies maken, zoals extra stijlen voor tekst in
.

Je hoeft geen extra werk voor jezelf te creëren. Onthoud de titeltags.

5.
En

Iedereen houdt van sites die het gemakkelijk maken om de informatie te vinden die je nodig hebt tussen logisch gegroepeerde items.

groepen vormen samen elementen door er een rechthoekig kader omheen te tekenen. Het is ook mogelijk om een ​​titel aan zo'n sectie toe te voegen met .

Algemene informatie:

6.

Label heeft op geen enkele manier invloed op de stijl. Het beïnvloedt de functionaliteit van de pagina.

7.

Als je een bepaalde uitdrukking een dramatisch effect wilt geven, kun je

. Standaard wordt er een lege string voor en na het element ingevoegd. Er wordt ook inspringing toegevoegd om de tekst in het element te scheiden van de rest van de inhoud.

Voorbeeld van taggebruik

Voorbeeld van taggebruik

8.

Dat kan niet gezegd worden verwijst naar

maar ze worden meestal samen gebruikt.

Onthoud de tag wanneer u iemand moet citeren.

Voorbeeld van taggebruik
samen met tag . Deze aanbieding is getagd .

Een voorbeeld van het gebruik van de blockquote-tag in combinatie met de cite-tag. Deze aanbieding is getagd .

9.

Lijsten bieden een geweldige manier om informatie te ordenen. Iedereen weet ervan