Basis van html. Algemene regels

En soortgelijke veelgebruikte tags. Desalniettemin vullen blok- en inline-elementen elkaar goed aan, omdat u hiermee het uiterlijk van de samenstellende webpagina's op alle niveaus kunt wijzigen. Voorbeeld 3.16 toont het gebruik van de tag om afzonderlijke woorden te markeren.

Voorbeeld 3.16. Tag-applicatie

Ga op je buik op de grond liggen... Breng je voeten bij elkaar door je knieën te buigen en naar de zijkanten te draaien. Handen achter je hoofd. Strek je hoofd met je handen omhoog en naar voren totdat het volledig is samengetrokken. buikspieren... Houd twee seconden vast. uitvoeren acht herhalingen.

Het resultaat van het voorbeeld wordt hieronder getoond (Fig. 3.25).

Rijst. 3.25. Gestileerde tekst

In dit voorbeeld is de tag en stijlen worden gebruikt om stukjes tekst op verschillende manieren te markeren. De selectie vindt met name plaats vanwege de achtergrondkleur, het kader rond de tekst en het veranderen van de kleur. Merk op dat de terugloop van de tekst ook de rand eromheen wikkelt naar een andere regel. In veel gevallen ziet dit er niet erg mooi uit, dus je kunt tekstterugloop door witruimte voorkomen: nowrap.

Voor tekst die niet is omgeven door een inline-tag zoals er wordt een anoniem inline-element gemaakt. Voor het bovenstaande voorbeeld ziet het circuit van elementen er als volgt uit (Fig. 3.26).

Rijst. 3.26. Anonieme inline-elementen

De tekst in de tag is grijs gemarkeerd in de afbeelding , en de stippellijn is anonieme inline-elementen. Voor dergelijke elementen kunt u de stijl niet rechtstreeks instellen, deze wordt overgenomen van het bovenliggende element.

Converteren naar inline-element

Inline-elementen kunnen worden omgezet in blokelementen door de eigenschap display en de bijbehorende blokwaarde te gebruiken. De tegenovergestelde actie is ook mogelijk via de inline waarde (voorbeeld 3.17).

Voorbeeld 3.17. Eigenschap weergeven

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Opmerking

Op basis van verschillende criteria, waarvan de belangrijkste indicatoren zijn voor de haalbaarheid en effectiviteit van de geleverde inspanningen, kan het volgende ondubbelzinnig worden gezegd. Het bereiken van de gewenste resultaten vereist namelijk een flexibele aanpak op basis van ervaring en een diep begrip van de betekenis van het bovenstaande.

Het resultaat van het voorbeeld wordt getoond in Fig. 3.27.

Rijst. 3.27. Een blokelement vervangen door een inline-element

In dit voorbeeld is de bloktag

Wordt weergegeven als een inline-element op een webpagina. Dit is nodig zodat de breedte van de achtergrond en rand gelijk is aan de breedte van de tekst zelf, rekening houdend met de marges. Zoals u weet, hangt de breedte van blokelementen niet af van de breedte van de inhoud, dus u moet de tag vertegenwoordigen

Als inline-element. In principe zou een vergelijkbare oplossing zijn om in plaats van

Label .

Houd er rekening mee dat het converteren van een element naar inline niet het recht geeft om de nestvolgorde van tags en nestblokelementen binnen inline-elementen te verbreken.

In het eerste artikel over html gaf ik een lijst met tags die naar mijn mening een lay-outontwerper moet weten. De rest van de tags zijn naar mijn mening overbodig of zelfs overbodig. In dit artikel wil ik het hebben over de basisprincipes van html en de html-tags, head, title, body, evenals div en span. Deze tags zijn naar mijn mening een goed startpunt voor het leren van html.

Helaas zijn moderne browsers erg loyaal aan webdesigners. Ze proberen te interpreteren wat hun wordt gevoerd. Niet-afgesloten tags, tags in verschillende registers, onbegrijpelijke tags, tags die staan ​​waar ze niet horen, etc. Ik zag bijvoorbeeld persoonlijk een site waar de hoofdcontainer zich in het lichaam bevond en de titeltag zelfs buiten de hoofdcontainer. Tegelijkertijd zag de site er aan de buitenkant prima uit!

Ik hoop echt dat op een dag de normen rigide zullen worden en dat verkeerd ingedeelde pagina's niet correct worden weergegeven. Toegegeven, dit vereist dat alle browsers html en CSS op dezelfde manier verwerken ... Nou, ik liet me meeslepen.

Zoals gebruikelijk in dergelijke gevallen, gooien we eerst het lesplan in:

1. Algemene regels
2. Documentstructuur

Algemene regels

Om te beginnen is html een behoorlijk trouwe taal. Er is een versie van html, waarvan de standaard strenger is - xhtml. Ik probeer me aan deze norm te houden. In het bijzonder gaat deze standaard ervan uit dat alle tags in kleine letters en gesloten zijn geschreven. Zelfs enkele. Hoe - wordt hieronder weergegeven. Alle attributen zijn in kleine letters geschreven en hun waarden zijn tussen dubbele aanhalingstekens geplaatst en hebben een aanduiding van de hoeveelheid waarin hun waarde wordt gemeten. Wij zullen ons aan deze regels houden.

De normen voorzien in een bepaalde rangschikking van sommige elementen. Als een element, dat ergens zou moeten staan, zich op een andere plaats bevindt, wordt dit als een fout beschouwd. In het algemeen dient een dergelijk document niet of ten onrechte te worden verwerkt. Maar browsers sparen de onzorgvuldige ontwikkelaars. Om precies te zijn, hun gebruikers die naar sites kijken die zijn ontwikkeld door onzorgvuldige ontwikkelaars.

Nu over de labels. Tags kunnen gepaard of enkelvoudig zijn. Gepaarde tags zijn ook onderverdeeld in blok- en inline-tags. Een paar tags worden soms een container genoemd.

Zoals je zou kunnen raden, hebben gepaarde tags een paar en staan ​​singles op zichzelf. Een tagpaar wordt gevormd uit een starttag en een eindtag. Enkele tags zijn tegelijkertijd openings- en sluitingstags.

Containervoorbeeld (gekoppelde tags):

Enkele tag voorbeeld

enkele regel tekst
deze tekst staat al op een andere regel

Het containervoorbeeld gebruikte de constructieDit is een opmerking. Alles wat binnen de twee pijlen staat, wordt niet geanalyseerd door de browser en wordt niet weergegeven op het scherm. Deze opmerkingen zijn soms erg handig om te gebruiken bij het opmaken van verwarrende punten, of om logische delen van een lay-out in code te scheiden.

Blok- en inline-tags

Het verschil tussen blok- en inline-tags is dat een blokelement de neiging heeft om het hele scherm in de breedte te vullen. (als de breedte niet expliciet is gespecificeerd), en inline neemt precies evenveel ruimte in beslag als de inhoud. Bovendien wordt alles wat volgt op het blokelement weergegeven op een nieuwe regel, en wat volgt op het inline-element wordt direct daarna weergegeven. De container-div is standaard op blokniveau en de span-tag is inline. (hoewel dit gedrag gemakkelijk te veranderen is met CSS). Laten we het gedrag van deze tags illustreren.

Tags moeten logisch na elkaar volgen, met inachtneming van de hiërarchie. Wanneer u de ene tag in de andere opneemt, moet u voorzichtig zijn om de volgorde van de eindtags te behouden.

Niet correct:

Ik wil nog één ding zeggen: tags kunnen attributen hebben. Het attribuut specificeert specifiek gedrag of vult de tag op de een of andere manier aan. Het attribuut wordt rechtstreeks in de tag geschreven, gescheiden door een spatie van de naam, in het formaat: ATTRIBUTE_NAME = "VALUE [measure]". ATTRIBUTE_NAME en VALUE, ik denk dat het duidelijk is wat het is. Een maat is een aanduiding van meeteenheden. Als er geen meeteenheid is, is het ook niet nodig om deze uit te vinden.

Hier stellen we het hoogte-attribuut in voor de container div (Eigenlijk is het beter om dit met CSS te doen, maar in dit geval heb ik dit geschreven om te laten zien hoe het eruit zou kunnen zien)... Attributen kunnen alleen worden toegewezen in openingstags. Het aantal spaties maakt niet uit. U kunt spaties gebruiken tussen de tagnaam en het attribuut, tussen de attribuutnaam en het gelijkteken, en tussen het gelijkteken en het aanhalingsteken. U kunt spaties tussen aanhalingstekens plaatsen, maar niet tussen de waarde en zijn eenheden! De aanhalingstekens hoeven niet dubbel te zijn, u kunt "enkele aanhalingstekens" gebruiken, maar alleen in paren. De optie "aanhalingstekens" werkt niet. In dit geval wordt het enkele aanhalingsteken, zoals alles erna, geïnterpreteerd als onderdeel van de attribuutwaarde.

Het lijkt erop dat dit alles is wat ik in het algemeen wilde zeggen. Dus, ter zake!

Documentstructuur

Wat hieronder wordt beschreven, is slechts een van de verplichte. Denk dus niet dat als "het al wordt weergegeven", dit normaal is. Het is niet normaal.

Elk document moet worden verpakt in tags Deze tags lijken te zijn gekoppeld. Vergeet dus niet om zo'n tag aan het begin van het document te openen en aan het einde te sluiten. In theorie, alles wat volgt op de afsluitende tag zou niet langer door Browser moeten worden geanalyseerd. Maar het wordt geanalyseerd en zelfs weergegeven. Maar ik raad je af om dit te gebruiken. Wat opmerkelijk is, vóór de openingstag andere inhoud kan verdwijnen. Maar in dit artikel ga ik het er niet over hebben. Iedereen die wil kan zoeken op DOCTYPE.

Alle andere inhoud van het document moet in de html-container staan. Het document is opgedeeld in twee delen. De ene heeft een besturingsfunctie en aanvullende informatie voor de browser. En de andere is informatie voor de gebruiker. Het besturingsgedeelte heet , en zinvol - ... Bovendien moet de kopcontainer altijd voor het lichaam komen. Deze twee containers hoeven elkaar niet te bevatten.

Elk document moet een titel hebben. De titel van het document is een zeer belangrijk element van de pagina. Het wordt weergegeven in de titel van het browservenster; zoekmachines hechten er veel belang aan. De paginatitel kan worden ingesteld met behulp van de container ... Deze container dient zich in de container te bevinden. ... Ik zal hieraan toevoegen dat hoe hoger (in regels) de titel is, hoe beter de pagina wordt geïndexeerd door zoekmachines.

Het eenvoudigste html-document ziet er dus als volgt uit:

Hier is de hoofdtekst van het document

U kunt deze tekst naar Kladblok (of vergelijkbare teksteditor) kopiëren, dit bestand opslaan met de extensie .html en naar uw browservenster slepen. U zult zien dat de tekst in de titelcontainer wordt weergegeven in de titel van de pagina en de tekst uit de hoofdtekst wordt weergegeven in het gebruikersgedeelte.

Laten we de belangrijkste documenttags afronden en aan de slag gaan met inhoudspresentatietags.

Tags voor het logisch scheiden van inhoud

Om te beginnen zal ik zeggen dat de tags die ik hieronder zal bespreken alleen in de body-tag kunnen staan.

Deze container is ontworpen om wat tekst te combineren tot een logisch blok, gescheiden van de rest van de pagina-inhoud. Als u de tekst van ons eenvoudigste document neemt en de tekst uit de hoofdtekst van het document in deze container plaatst, zult u geen externe wijzigingen opmerken. Ze zijn er echter nog steeds. Er kan een enkele stijl worden opgegeven voor tekst die is ingesloten in een div-container. Dit blok kan een bepaalde breedte hebben, er een ander lettertype voor instellen, het rechts uitgelijnd maken of wat dan ook. Hier is een voorbeeld van het gebruik van de div-tag (voor de beknoptheid zal ik niet de volledige tekst van het document in zijn geheel geven. Maar u moet niet vergeten dat u de ondergeschikte constructie in de body-container moet invoegen om het te zien werken.):

Laat je niet intimideren door het onbekende stijlkenmerk en de onbegrijpelijke woorden die erin staan ​​(zijn ze zo onbegrijpelijk?). Het was alleen dat de div-container beter samen met dit attribuut werd weergegeven. Meestal worden in de juiste lay-out de id- en class-attributen gebruikt voor containers, die dienen om een ​​tag te associëren met CSS of deze te identificeren met JavaScript. Maar dit loopt al vooruit ;)

De div-container is een blokelement. Maar dit gedrag is gemakkelijk te veranderen.

De span-container is ontworpen om een ​​deel van de tekst te markeren. Het gebruik is hetzelfde, alleen merkbaar nadat de tag speciale eigenschappen heeft gekregen. Vaak wordt het gewenste effect bereikt met CSS. We zagen een eenvoudig voorbeeld van het gebruik van de span-tag toen we keken naar het verschil tussen blok- en inline-elementen, dus we zullen er niet bij stilstaan.

Resultaat

In dit artikel leerden we over de algemene regels van html, leerden we over de minimale structuur van een html-document, over gepaarde en ongepaarde tags en over blok- en inline-containers. We zagen het verschil tussen containers van verschillende typen en maakten kennis met de logische containers div en span.

Als je deze mini-cursus leuk vond, of als het vragen of wensen opriep, als je ergens over wilt kibbelen, hoor ik je feedback graag in de comments of per mail.

Blokelementen nemen de volledige breedte van hun bovenliggende (container) in beslag en vormen formeel een "blok" (vandaar de naam).

Browsers geven meestal blokelementen weer met regelinvoer voor en na het element. Blokelementen kunnen worden gezien als een stapel dozen. Het volgende voorbeeld laat zien hoe dit eruit ziet:

Blok elementen

HTML

Deze paragraaf is een blokelement; de achtergrondkleur is gekleurd om de ouder van de alinea weer te geven.

CSS

Gebruik

• Blokelementen kunnen alleen binnen een element worden weergegeven en zijn nakomelingen.

Blokkeren versus kleine letters

Er zijn een aantal belangrijke verschillen tussen blok- en inline-elementen:

Inhoud Over het algemeen kunnen blokelementen inline-elementen en andere blokelementen bevatten. Een integraal onderdeel hiervan structureel verschil is het idee dat blok elementen maak een "grotere" structuur dan inline-elementen. Standaardopmaak Standaard beginnen blokelementen op een nieuwe regel en inline-elementen kunnen overal op een regel beginnen.

Items opsplitsen in blok en kleine letters gebruikt in de specificatie: HTML tot versie 4.01. HTML5 vervangt deze tegenstelling door een complexere reeks inhoudscategorieën. Categorie« kleine letters»Elementen komt ongeveer overeen met de categorie, en voor Er zijn geen directe match "block"-elementen, maar "block" en "inline" elementen samen komen ongeveer overeen categorieën van streaming inhoud in HTML5 (dat wil zeggen, ruwweg gezegd, "blok"-elementen zijn streaming inhoud minus tekstinhoud).Daarnaast is er ook andere categorieën, zoals interactieve inhoud.

De elementen

Hieronder is de volledige lijst van alles blokelementen (hoewel formeel concept« blokkerig"Is niet van toepassing naar nieuwe elementen in HTML5).