Om het een specifieke stijl te geven, moet u de tekst in de juiste container plaatsen.

Alle opmaaktags kunnen in drie groepen worden verdeeld:

1. Titeltags ( h1-h6).

2. Ontwerptags voor hoofdtekst ( , , ,

, 
 enz.).
3. Tags groeperen ( 

, 

, 

)

Titeltags
Overzetten platte tekst in een kop van een bepaald niveau.  Label 

 creëert een kop op het eerste niveau - de grootste en belangrijkste (meestal de titel van het artikel op de pagina), 

 is verantwoordelijk voor de rubriek op het zesde niveau - de kleinste en meest onopvallende.  Deze tags zijn belangrijk voor zowel gebruikers als zoekmachines. Ze houden allebei van kopjes met subkoppen.  De hiërarchie van niveaus moet in acht worden genomen, dat wil zeggen: 

 moet gaan 

, en niet andersom.

Om te begrijpen hoe dit werkt, voert u de volgende code in het HTML-bestand in:
 
Koptekst van het eerste niveau
Kop van het tweede niveau
Kop van het derde niveau
Kop van het vierde niveau
Kop van het vijfde niveau
Kop van niveau zes

In de browser ziet het er zo uit:
Ontwerptags voor hoofdtekst
Maakt opmaak op tekenniveau mogelijk.  Laten we eens kijken wat u ermee kunt doen.
Vetgedrukte tekst
Nodig om de aandacht op de tekst te vestigen.  Het is ook belangrijk voor zoekmachines; ze kunnen trefwoorden markeren.
Verantwoordelijk voor opvallende stijltags 
 En .

Superscript en subscript
Ze kunnen worden gebruikt in formules, vergelijkingen en de aanduiding van bepaalde grootheden.
De tag is verantwoordelijk voor het maken van subscripts 
, voor de bovenste wordt de tag gebruikt 
.
X 1=32 m 2
Inkrimping
Als u de tekst op de hele pagina één minder wilt maken dan de ingestelde waarde, moet u de tag gebruiken 

Platte tekst. Gereduceerde tekst.
Onderstrepen
Dit type markering kan worden gebruikt om wijzigingen in een document aan te geven of eenvoudigweg om de aandacht op de tekst te vestigen.
Platte tekst. Onderstreepte tekst.
Doorhalen
U kunt informatie doorhalen als deze al zijn relevantie heeft verloren.  Dit is de tag hiervoor 
.
Cursief
Het is nodig om de aandacht op de tekst te vestigen en kan met een tag worden gemaakt 
 of 
.

Computertekstinvoer
Het komt voor dat u de broncode van een programma en de resultaten van zijn werk aan een webpagina moet toevoegen.  Om het gemakkelijk te maken om verschillende delen van de tekst visueel van elkaar te onderscheiden, hebben HTML-ontwikkelaars tags van deze groep geïntroduceerd.
In container 
 bevat de programmacode en de variabelen ervan worden gemarkeerd met de tag 
, en het resultaat van de uitvoering is 
.  Houder 
 bevat tekst die de gebruiker vanaf het toetsenbord moet invoeren wanneer hij met het programma werkt, en alles wat tussen tags is ingesloten 
, behoudt het originele formaat inclusief extra ruimtes en regeleinden.

  Dus a, b, c, Hier resultaat van de uitvoering van het programma , en dit is gebruiker heeft tekst ingevoerd 
zoiets weergegeven
.

Citaten en definities
De programmacode ziet er als volgt uit 
 Dus 
, worden de variabelen als volgt aangeduid: 
 a, b, c 
, Hier 
 resultaat van de uitvoering van het programma 
, en dit is 
 gebruiker heeft tekst ingevoerd 
.  Behoud de originele opmaak 
 zoiets weergegeven 

.

 
Citeer in de blockquote-tag.
Citaat in citeercontainer.Kort citaat getagd met q.Specifieke definitie.Afkorting (NPO, IP).

Algemeen voorbeeld
Om beter te begrijpen waarvoor elke tag verantwoordelijk is en hoe deze werkt, bekijkt u de volgende code en het resultaat van de uitvoering ervan.
 
Vet tekst kan in tags worden omgezet sterk En B.  Voor cursief antwoord em En i.
Labels sub En sup gebruikt om te creëren lager(X 1…X N) En bovenste (42=16) indexen. Del doorstreept, ins - benadrukt.
Labels code, kbd, var En monster worden zelden gebruikt en zijn nodig om programmaoverzichten weer te geven
 afkorting nodig om afkortingen aan te geven ( HTML).  De tags blockquote, cite en q worden gebruikt om citaten op te maken ( De lucht ademde al de herfst in)
De pre-tag wordt opgeslagen initiële opmaak tekst zonder spaties of regeleinden te verwijderen.

De browser interpreteert deze code als volgt:

Tags groeperen
Het is noodzakelijk dat de tekst niet in één doorlopende regel loopt, maar is opgedeeld in logische componenten.
Binnen de tags staat een paragraaf.
 
Eerste paragraaf
Tweede paragraaf


Label 

 maakt de overstap naar volgende regel binnen een alinea (er zal geen inspringing vóór de regel zijn).

 maakt het mogelijk om te tekenen horizontale lijn.  U kunt het gebruiken om tekst duidelijker te scheiden.  Kenmerken breedte, maat, kleur, uitlijnen En geen schaduw stel respectievelijk de breedte, dikte, kleur, uitlijning en het ontbreken van 3D-effect van de lijn in.
 
Lijn boven lijn. 
Lijn onder lijn.

Rode html-regel kan worden ingesteld 4 op verschillende manieren.  Hoewel er bepaalde normen zijn voor dit fenomeen gegeven taal biedt geen programmering, dus er zijn geen beperkingen in dit opzicht.  In dit artikel zullen we niet helemaal gebruiken standaard ingesteld betekent het creëren van een rode lijn.
1e methode
Het is de moeite waard om met de meest gebruikelijke methode te beginnen.  Alleen in dit geval is het nodig om trapsgewijze tabellen te gebruiken, omdat CSS onlosmakelijk verbonden is met de taal hypertext-opmaak.  De rode html-regel kan worden ingesteld met behulp van de eigenschap "text-indent".  Het is voldoende om het gewenste element en de afstand aan te geven die zal worden gebruikt voor inspringing aan de linkerkant van het document.  Als u bijvoorbeeld schrijft: "p (text-indent: 20px;)" betekent dit dat er in elke alinea p een rode lijn van 20 pixels wordt gemaakt.  U kunt elk tekstblok gebruiken als element waarvoor u de waarde opgeeft.  Eigenlijk dit pand zet geen rode lijn, maar geeft eenvoudigweg de inspringing aan voor de eerste regel van het geselecteerde element.  Maar wie zal het verschil merken?  De eigenschap "text-indent" kan drie namen bevatten verschillende soorten waarden:
Elke algemeen aanvaarde meeteenheid, bijvoorbeeld px (pixels), in (inch), pt (punten) en andere.
Procentuele waarde.  IN in dit geval er wordt rekening gehouden met de afstand tot het ouderelement.
Erven.  Wanneer gespecificeerd gegeven waarde de eigenschap wordt overgenomen van het bovenliggende element.
2e methode
In HTML kan de rode lijn worden ingesteld zonder trapsgewijze tabellen met elkaar te verbinden.  Het is voldoende om het vóór het eerste teken te plaatsen broncode pagina's met meerdere spaties.  Je hoeft alleen maar speciale tekens te gebruiken, namelijk “”, want als je zet reguliere ruimte, dan wordt er slechts met één rekening gehouden.  En gebruiken van dit symbool u kunt de gewenste inspringing instellen.  Zo'n rode HTML-regel heeft geen algemene toepassing en u zult alle spaties handmatig moeten toevoegen.  Dit minpuntje zal je enorm belasten als je ermee werkt een groot aantal documenten.  Deze methode zal ook uw paginacode ongeldig verklaren.
3e methode
Conclusie
Concluderend kunnen we zeggen dat je met HTML samen met CSS een grote verscheidenheid aan effecten kunt creëren.  Soms worden eigenschappen en elementen niet gebruikt waarvoor ze bedoeld zijn, maar daar mag je niet te veel van afwijken standaard waarde labels
– tijdens het maken van een website moeten we veel werken met tekstblokken of tekstzinnen.  Op een dag moest ik een tekstzin zo toevoegen dat er vóór deze tekstzin een zin stond tekst inspringen vanaf randen html
 blok waarin deze tekst is toegevoegd.

De eerste methode is dus de meest natuurlijke en eenvoudige.  Om vóór tekst te laten inspringen, voegt u vóór tekst toe html-code spatie - U kunt html-spatiecode toevoegen in elke html-editor. 

Hier is een voorbeeld van werkende code voor het instellen van de inspringing van tekst met behulp van de spatiecode:
 









HTML tekstinspringing links,
gebruik spatiecode









 
IN in dit voorbeeld, vóór de tekst die we hebben geselecteerd, staat de spatiecode  vier keer toegevoegd, als resultaat krijgen we het streepje dat we nodig hebben.
We weten dat de spatiecode door elke browser wordt verwerkt.  Door het vereiste aantal spaties vóór de tekst toe te voegen, kunt u de vereiste inspringing voor de tekst verkrijgen.
Deze methode is goed omdat deze gegarandeerd door elke browser wordt verwerkt. 


 

Maar deze methode Er is aanzienlijk nadeel.  Om de tekst lang genoeg in de html-code te laten inspringen, moet je vóór de tekst toevoegen groot aantal ruimtetekens, die er lelijk, omvangrijk en onprofessioneel uit kunnen zien. 

Eén oplossing voor dit probleem is de volgende methode voor het instellen van de inspringing.
HTML-tekstinspringing, methode twee - deze methode is gebaseerd op de eigenschappen van de blockquote-tag.  Met deze tag wordt links en rechts een inspringing van ongeveer 40 pixels ingesteld voor de tekst die erin wordt geplaatst.  Bovendien wordt de inspringing bovenaan en onderaan gespecificeerd. Voorbeeld html De code voor het gebruik van deze methode wordt hieronder gegeven:

 
aan de linkerkant, gebruik de tag blokcitaat

Zoals u kunt zien, is deze methode voor het instellen van de inspringing van tekst heel gemakkelijk te gebruiken, maar deze methode heeft ook een aanzienlijk nadeel.  De inspringing die door de tag wordt ingesteld blokcitaat staat vast en is altijd gelijk aan dezelfde waarde – 40px.
Om de situatie te corrigeren, en bij het toevoegen html-inspringing en voor tekst om elke waarde te kunnen instellen, gebruiken we de derde methode.
HTML-tekstinspringing, methode drie.
Hier zullen we de eigenschap text-indent van CSS Cascading Style Sheets gebruiken.
Als je opent CSS-referentie Op de pagina met een beschrijving van de eigenschappen van text-indent zullen we zien dat we met text-indent de inspringingswaarde van de eerste regel of eerste alinea, of een ander tekstblok, kunnen instellen.
We kijken naar een voorbeeld met een kort tekstblok, dus de eigenschappen voor tekstinspringing zijn redelijk geschikt voor ons geval.
Hieronder staat de html-code die tekst inspringt met behulp van text-indent.  Uit het voorbeeld blijkt duidelijk dat de instelling voor tekstinspringing is verschillende betekenissen argumenten, kunnen we de hoeveelheid tekstinspringing wijzigen:

 
 HTMLinkepingtekst, werkt CSS-stijl - tekst-inspringen
Naar mijn mening is deze methode voor het instellen van een streepje voor tekst het meest optimaal, maar laten we toch eens kijken naar een andere manier om een ​​streepje in te stellen, met behulp van afbeeldingen.
HTML-tekstinspringing, vierde methode - hier gebruiken we een afbeelding om de inspringing in te stellen.
Laten we als werkend voorbeeld meteen naar de html-code kijken die laat zien hoe deze methode werkt:
aan de linkerkant, gebruik de afbeelding

Uit het bovenstaande voorbeeld blijkt duidelijk dat we, door de breedte van de afbeelding te wijzigen, de positie van de tekst kunnen wijzigen, dat wil zeggen, de gewenste inspringing voor de tekst kunnen instellen.
Als afbeelding kunt u een afbeelding gebruiken waarvan de breedte en hoogte gelijk zijn aan één pixel.  Om te voorkomen dat de afbeelding die we gebruiken zichtbaar is op de pagina, stellen we de kleur ervan exact hetzelfde in als de achtergrond van de sitepagina.
Naar mijn mening zijn de bovenstaande methoden voor het instellen van inspringingen voor tekst voldoende om de inspringing te organiseren die u in elke situatie nodig heeft bij het toevoegen van inhoud aan de pagina van uw sites.

Laten we dus direct beginnen met studeren HTML-taal.  Tenslotte nog een paar woorden off-topic.
Tijdens het presenteren van het materiaal zullen er veel voorbeelden worden gegeven, die ik u aanbeveel om zelf te doen.  Nadat je de voorbeeldtekst hebt getypt, kijk dan eens naar wat je hebt gekregen (ik denk dat je zelf geïnteresseerd zult zijn).  Als u een gespecialiseerde HTML-editor gebruikt, heeft zo'n programma in de regel een eigen ingebouwde browser waarmee u de resultaten van uw werk kunt zien.
Als het erg moeilijk is en u een gewoon notitieblok gebruikt, moet u het opslaan om het te bekijken bron met de extensie .htm of .html en bekijk het opgeslagen bestand vervolgens in een browser.  Als u Windows heeft, dan de browser Internet Explorer wordt automatisch ingebouwd tijdens de systeeminstallatie.
Nou, dat lijkt alles te zijn.
Laten we aan de slag gaan.
Vereiste tags (tags)
Er zijn verschillende basis-HTML-tags die aanwezig moeten zijn in de tekst van elke webpagina.  Elke webpagina moet een tag (tag) bevatten 

, helemaal aan het begin.  Deze tag (tag) beschrijft uw document als een webpagina in HTML-indeling.  Direct achter het handvat 

 meestal gevolgd door tag (tag) 

, wat de aanwezigheid aangeeft van tekst met de paginanaam en aanvullende informatie over haar.
Het HEAD-gedeelte bevat meestal een tag (tag) 

Websitetekst





Een normale HTML-editor beschikt al over een set van bovenstaande tags (tags) bij het maken van een nieuwe pagina.  Het moet gezegd worden dat de keuze van namen voor webpagina's zeer serieus moet worden genomen, omdat  ze worden door zoekmachines gebruikt om catalogi van webpagina's te maken.  Een zoekmachine is een website waarmee gebruikers snel de informatie kunnen vinden waarin ze geïnteresseerd zijn.  De kans is groter dat uw pagina wordt gevonden door een zoekmachine die een specifieke set van gegevens krijgt trefwoorden zoek of deze woorden voorkomen in de paginatitel.  Een van de meest populaire zoekmachines zou Yandex, Google, Aport, Yahoo, Rambler moeten heten.

Maak een alinea, spaties, kop
Webbrowsers houden doorgaans geen rekening met de nieuweregeltekens die door de gebruiker in de tekstfase worden ingevoerd.  Gebruik een tag (tag) om een ​​nieuwe paragraaf te beginnen 


.
Na het openen van een pagina in een webbrowservenster worden alle paragrafen van de tekst gemarkeerd met een tag (tag) 

, zijn gescheiden lege regels, wat de lay-out en het uiterlijk verbetert.
Standaard formatteert de browser alinea's meestal links uitgelijnd.  Om de uitlijning te forceren, gebruikt u het align-attribuut.  Met behulp hiervan kunnen alinea's links, rechts, gecentreerd en uitgevuld worden uitgelijnd.
Voorbeeld:

HTML-code:

alinea is links uitgelijnd...

De alinea is rechts uitgelijnd...

alinea is gecentreerd uitgelijnd...

paragraaf is gerechtvaardigd...



Browserweergave:

paragraaf links uitgelijnd paragraaf links uitgelijnd paragraaf paragraaf links uitgelijnd paragraaf links uitgelijnd paragraaf paragraaf links uitgelijnd paragraaf paragraaf links uitgelijnd paragraaf paragraaf links uitgelijnd paragraaf paragraaf links uitgelijnd paragraaf paragraaf links uitgelijnd
paragraaf rechts uitgelijnd paragraaf rechts uitgelijnd paragraaf rechts uitgelijnd paragraaf rechts uitgelijnd paragraaf rechts uitgelijnd paragraaf rechts uitgelijnd paragraaf rechts uitgelijnd paragraaf rechts uitgelijnd paragraaf rechts uitgelijnd
paragraaf uitgelijnd op het midden paragraaf uitgelijnd op het midden paragraaf paragraaf uitgelijnd op de middelste paragraaf paragraaf uitgelijnd op de middelste paragraaf paragraaf uitgelijnd op de middelste paragraaf paragraaf uitgelijnd op het midden paragraaf paragraaf uitgelijnd op de middelste paragraaf paragraaf uitgelijnd op het midden paragraaf uitgelijnd op het midden
paragraaf gerechtvaardigd paragraaf gerechtvaardigd paragraaf gerechtvaardigd paragraaf paragraaf gerechtvaardigd paragraaf gerechtvaardigd paragraaf gerechtvaardigd paragraaf gerechtvaardigd paragraaf gerechtvaardigd paragraaf gerechtvaardigd paragraaf gerechtvaardigd paragraaf gerechtvaardigd paragraaf gerechtvaardigd

Webbrowsers laten tekst binnen alinea's automatisch op een nieuwe regel lopen.  Als het de taak is om een ​​combinatie van woorden op één regel te plaatsen, wordt hiervoor een tag gebruikt. 
.

Om naar toe te gaan nieuwe lijn label wordt gebruikt 
.  Het vertelt de browser om te stoppen met het plaatsen van tekst en andere pagina-elementen erin huidige lijn en ga naar een nieuwe regel.  Deze tag (tag) heeft geen slash-tegenhanger, de zogenaamde afsluitende tag (tag).
Het belangrijkste gebruik van deze tag(s) is om te forceren dat inline-elementen op een specifieke locatie op de pagina worden geplaatst.  Het is ook handig in gevallen waarin het nodig is om de lege ruimtes ertussen te vergroten afzonderlijke elementen pagina's.
Goedemiddag lieve lezers.  Vandaag een korte opmerking over hoe te handelen rode lijn voor elke paragraaf op de html-pagina.  Als iemand het niet weet: de rode lijn is de inspringing van de eerste regel in een tekstblok.  Een dergelijke inspringing in alinea's is te vinden in vrijwel elke gedrukte tekst, maar bij het maken van websites is het ontwerp van een rode lijn vrij zeldzaam, ondanks het feit dat dit de tekst veel gemakkelijker waar te nemen maakt.  Mocht een klant plotseling eisen dat alinea's op zijn website met een rode lijn beginnen, dan geef ik je een eenvoudig recept om dit probleem op te lossen.
U kunt het probleem op veel manieren oplossen. U kunt bijvoorbeeld meerdere alinea's achter elkaar invoegen aan het begin van elke alinea. speciale karakters, maar dit kan behoorlijk lang duren.  Daarom raad ik aan om te gebruiken CSS-eigenschap tekst-inspringen, die instelt eerste regel inspringen blok tekst.  In dit geval wordt er geen effect op de resterende regels uitgevoerd.
De eigenschap text-indent heeft een eenvoudige syntaxis:
tekst-inspringen:<значение> | <проценты>|  erven
U kunt pixels (px), punten (pt) en andere eenheden opgeven die in CSS als waarden worden geaccepteerd.  De waarde bepaalt hoeveel de tekst van de eerste regel naar rechts moet verschuiven uitgangspositie.  Het is acceptabel om negatieve waarden op te geven, waarna de tekst naar links wordt verplaatst.  Bij het opgeven van percentagewaarden wordt de inspringing van de eerste regel berekend, afhankelijk van de breedte van het tekstblok.
Als u aan slechts één alinea een rode lijn wilt toevoegen, kunt u dit als volgt doen:

Resultaat:
Aan de rand van de weg stond een eik.  Hij was waarschijnlijk tien keer ouder dan de berken waaruit het bos bestond, tien keer dikker en twee keer zo hoog als elke berk.  Het was een enorme eik, twee singels breed, met gebroken takken en schors, begroeid met oude zweren.  Met enorme, onhandige, asymmetrisch gespreide knoestige armen en vingers stond hij als een oude, boze en minachtende freak tussen de lachende berken.  Alleen hij wilde zich niet onderwerpen aan de charme van de lente en wilde de lente en de zon niet zien.
Of voeg alinea's toe die met een rode lijn moeten beginnen klasse attribuut en voeg de gewenste stijl toe:


Prins Andrei keek verschillende keren achterom naar deze eik terwijl hij door het bos reed.  Er waren bloemen en gras onder de eik, maar hij stond er nog steeds middenin, somber, roerloos, lelijk en koppig. 


Resultaat:
Prins Andrei keek verschillende keren achterom naar deze eik terwijl hij door het bos reed.  Er waren bloemen en gras onder de eik, maar hij stond er nog steeds middenin, somber, roerloos, lelijk en koppig.
Nu kan dat gemakkelijk trek een rode lijn over de jouwe html-pagina's
.  Tot ziens!