Vsako besedilo ima svojo edinstveno strukturo: knjige so razdeljene na dele, razdelke in poglavja, časopisi in revije imajo ločene naslove in podnaslove, ki pa vključujejo fragmente besedila, ki imajo prav tako svojo strukturo: odstavke, alineje itd.

Tudi besedilo, objavljeno na spletnih straneh, mora imeti logično strukturo, ki je razumljiva vsakemu uporabniku. Navsezadnje je veliko odvisno od tega, kako priročno in preprosto je zaznano besedilo na strani: najprej, kakšen vtis bo obiskovalec dobil o vašem spletnem mestu.

Če želite ustvariti strukturne besedilne enote, kot so odstavki, dokumenti HTML uporabite oznako

, ki ločuje fragmente besedila z navpičnim zamikom (pred in za odstavkom je dodana prazna vrstica).

Opomba: privzeto je razdalja med odstavki 1em (em je merska enota, enaka višini pisave), torej je razdalja med odstavki neposredno odvisna od velikosti pisave.

Če želite spremeniti robove med odstavki brez spreminjanja velikosti pisave, lahko uporabite lastnost roba CSS.

Ne pozabite na zaključno oznako

Večina brskalnikov bo pravilno upodobila dokument HTML, tudi če pozabite zaključno oznako.

odstavek

Še en odstavek

Ta koda bo delovala v večini brskalnikov, vendar se ne zanašajte nanjo. Pozabljena zaključna oznaka lahko povzroči nepričakovane rezultate ali napake.

rdeča črta

Kaj je rdeča črta? Po definiciji je to začetna vrstica odstavka, ki je bila prej označena z rdečo (od tod tudi ime). Pred izumom tiska so knjige pisali ročno – poglavje ali del besedila, prvo besedo ali črko so pisali z rdečo barvo. Tako se je pojavil koncept "pisanje iz rdeče črte" - to pomeni začetek nove misli, poglavja ali dela.

Vendar pa se pri ustvarjanju spletnih strani zasnova rdeče črte uporablja precej redko, kljub dejstvu, da je veliko bolj priročno vizualno zaznati besedilo, kar je zelo pomembno za tradicionalnega bralca - ni vsem udobno brati elektronske različice besedilo.

Če želite svojim odstavkom dodati rdečo črto, morate uporabiti lastnost CSS zamik besedila, ki omogoča zamik prvega stavka:

Poskusite »

V zgornjem primeru se bo prva vrstica vsakega odstavka na strani začela z zamikom 25 slikovnih pik. Spodnji primer prikazuje, kako lahko nastavite rdečo črto samo za določen odstavek na strani.

Kot v vsaki pravi umetnosti tudi v dobrih besedilih ni malenkosti, kamor nekateri uvrščajo rdečo črto, saj menijo, da njena uporaba ni tako pomembna. Vendar moramo razumeti, da vsaka vejica nosi tako estetsko kot semantično obremenitev in ni le poklon pravilom slovnice - to velja tudi za oblikovanje.

Poskusite »

Opomba: zamika ni treba nastaviti na 25 slikovnih pik, optimalno velikost zamika lahko izberete sami, z lastnostjo text-indent pa lahko naredite črto, ki štrli nad preostalim besedilom; za to morate nastaviti negativno vrednost za lastnost (na primer: -30px).

Odstavki in naslovi

Glavni način predstavitve informacij na internetu je besedilo; večina ljudi išče besedilne informacije, besedilne besede in besedne zveze pa uporabljajo za to iskanje posebni iskalniki. Zato bo od tega, kako dobro in priročno je strukturirano besedilo na straneh, v veliki meri odvisno, ali se bo obiskovalec zadržal na spletnem mestu ali šel iskat ugodnejši vir informacij. Navsezadnje se strinjate, da je branje neprekinjenega besedila veliko težje kot branje razdeljenega na odstavke in tematske pododdelke. V HTML je več oznak odgovornih za to strukturiranje besedila in o njih bomo govorili v tej lekciji.

Oznaka

Ali pa stran razdelimo na odstavke (odstavke)

Če se spomnite, potem z oznako

V tem učbeniku ste se že srečali, no, zdaj je čas, da ga v celoti preučite. Torej oznaka

Odgovoren za ustvarjanje odstavkov na strani HTML in je blok element. Upam, da ste se že spomnili, kaj so oznake na ravni blokov. Da, vendar poleg tega, da ustvarja prelome vrstic pred in za seboj do začetka, nad in pod seboj nastavi tudi majhne robove (zunanje zamike) praznega prostora, zaradi česar je besedilo vizualno razdeljeno na odstavke. . Višina teh polj je enaka eni prazni vrstici.

Zdaj je najpomembnejša stvar oznaka

Vsebuje lahko samo elemente na ravni vrstice (inline) in nič drugega. Zato na primer ne more vsebovati drugega odstavka, saj sam

Je blok element. No, k temu se bomo še večkrat vrnili. Mimogrede, vsako besedilo brez oznak se prav tako šteje za element v vrstici.

Primer odstavkov v HTML

Prvi odstavek.

Drugi odstavek.

Rezultat v brskalniku

Prvi odstavek.

Drugi odstavek.

Na splošno zaključna oznaka

Ni ga treba nastaviti - takoj ko brskalnik naleti na naslednji odstavek, samodejno zapre prejšnjega. Toda, kot sem že rekel, je bolje zapreti vse neobvezne oznake.

Pri oznaki

Obstaja en izbirni atribut, poravnaj, ki nastavi položaj besedila znotraj bloka. to pomeni, da imate lahko vsako vrstico odstavka na sredini strani ali pritisnjeno na desno stran namesto na levo kot običajno. Edina težava je, da atribut align ni v strogi različici HTML in ga morda sodobni brskalniki v bližnji prihodnosti ne bodo več podpirali. Torej, kaj naj storimo? Naredili bomo naslednje: v eni od naslednjih lekcij vam bom pokazal univerzalno metodo, s katero lahko spremenite položaj vsebine ne samo znotraj odstavkov, ampak tudi znotraj poljubnih blokovnih elementov strani HTML (naslovi, tabele, seznami). itd.). Toda glavna stvar je, da vsi brskalniki to razumejo in bodo razumeli.

Oznake

-

ali glave strani HTML

Naslovi igrajo zelo pomembno vlogo v HTML; z njihovo pomočjo lahko razdelite besedilo strani na logične dele in poudarite pomembnost vsakega, kar obiskovalcem omogoča hitro iskanje informacij, ki jih potrebujejo. Poleg tega iskalniki (Yandex, Google itd.) dajejo večjo "težo" besedilu v naslovih. Obstaja šest vrst, kjer

najpomembnejši naslov (prva raven, vrh) in

najmanj pomemben (šesta stopnja, nižja). na primer

lahko naslov strani,

- njegovi deli,

- pododdelki itd.

Naslovne oznake so blokovni elementi in tako kot odstavki lahko vsebuje samo oznake in besedilo na ravni vrstice. Brskalniki naredijo besedilo naslovov krepko v različnih velikostih (odvisno od oznake) in dodajo robove praznega prostora na vrhu in na dnu, spet kot odstavki.

Sintaksa za pisanje glav v HTML

Glava prve stopnje

Naslov druge stopnje

Naslov tretje stopnje

Naslov četrte stopnje

Naslov pete stopnje

Naslov šeste stopnje

Naslovne oznake imajo dva neobvezna atributa - znano staromodno poravnavo in atribut naslova, ki prikaže opis orodja, ko miškin kazalec premaknete nad naslov. Tako kot pri odstavkih ne bomo uporabljali align , ampak se bomo kmalu naučili drugače.

Primer uporabe glav v HTML

Glava prve stopnje

odstavek

Naslov druge stopnje

odstavek

odstavek

Rezultat v brskalniku

Glava prve stopnje

odstavek

Naslov druge stopnje

odstavek

odstavek

Domača naloga.

V tej nalogi boste morali ustvariti stran, ki simulira majhen članek, napisati poljubno besedilo. Takoj lahko vidite rezultat primera, tako da imate idejo, kaj je treba narediti.

1. Odprite stran iz prejšnje lekcije v urejevalniku HTML.
2. Uporaba naslovov

   ,

   in

   ustvarite naslov članka, njegova dva razdelka in tri pododdelke v drugem delu.

3. Prepričajte se, da se ob premikanju miške nad naslov članka prikaže ustrezen napis.
4. Napišite en odstavek za vsak razdelek in pododdelek.

Če želite dati poseben slog, morate besedilo postaviti v ustrezen vsebnik.

Vse oznake za oblikovanje lahko razdelimo v tri skupine:

1. Naslovne oznake ( h1-h6).

2. Oznake oblikovanja telesa besedila ( , , ,

, 
 itd.).
3. Združevanje oznak ( 

, 

, 

)

Naslovne oznake
Običajno besedilo spremenijo v naslov določene ravni.  Oznaka 

 ustvari naslov prve stopnje - največji in najpomembnejši (običajno naslov članka na strani), 

 je odgovoren za naslov šeste ravni - najmanjši in najbolj neopazen.  Te oznake so pomembne tako za uporabnike kot za iskalnike – oboji obožujejo naslove s podnaslovi.  Upoštevati je treba hierarhijo ravni, tj. 

 moram iti 

, in ne obratno.

Če želite razumeti, kako to deluje, v datoteko html vnesite to kodo:
 
Glava prve stopnje
Naslov druge stopnje
Naslov tretje stopnje
Naslov četrte ravni
Naslov pete stopnje
Naslov šeste stopnje

V brskalniku bo videti takole:
Oznake za oblikovanje besedila telesa
Omogoča oblikovanje na ravni znakov.  Poglejmo, kaj lahko storite z njimi.
Krepka pisava
Potrebno je osredotočiti pozornost na besedilo.  Pomembno je tudi za iskalnike, saj lahko označijo ključne besede.
Odgovoren za krepke slogovne oznake 
 in .

Nadpis in podpis
Uporabljajo se lahko v formulah, enačbah in označevanju določenih količin.
Oznaka je odgovorna za ustvarjanje indeksov 
, za zgornje se uporablja oznaka 
.
X 1=32 m 2
Zmanjševanje
Če morate na celotni strani narediti besedilo za eno manj od nastavljene vrednosti, morate uporabiti oznako 

Golo besedilo. Zmanjšano besedilo.
Podčrtaj
To vrsto označevanja lahko uporabite za označevanje sprememb v dokumentu ali preprosto za pritegnitev pozornosti na besedilo.
Golo besedilo. Podčrtano besedilo.
Prečrtano
Informacije lahko prečrtate, če so že izgubile pomembnost.  To je oznaka za to 
.
Poševno
Potreben je za osredotočanje pozornosti na besedilo in ga je mogoče ustvariti z oznako 
 oz 
.

Računalniški vnos besedila
Zgodi se, da morate na spletno stran dodati izvorno kodo programa in rezultate njegovega dela.  Da bi olajšali vizualno razlikovanje različnih delov besedila drug od drugega, so razvijalci HTML uvedli oznake te skupine.
V posodo 
 vsebuje programsko kodo, njene spremenljivke pa so označene z oznako 
, rezultat izvedbe pa je 
.  Posoda 
 vsebuje besedilo, ki ga mora uporabnik vnesti s tipkovnico pri delu s programom, in vse, kar je obdano z oznakami 
, ohrani izvirno obliko, vključno z dodatnimi presledki in prelomi vrstic.

  torej a, b, c, Tukaj rezultat izvajanja programa , in to je besedilo, ki ga vnese uporabnik 
prikazal nekaj takega
.

Citati in definicije
Programska koda bo videti takole 
 torej 
, so spremenljivke označene na naslednji način: 
 a, b, c 
, Tukaj 
 rezultat izvajanja programa 
, in to je 
 besedilo, ki ga vnese uporabnik 
.  Ohranite izvirno oblikovanje 
 prikazal nekaj takega 

.

 
Citat v oznaki blockquote.
Ponudba znotraj vsebnika cite.Kratek citat z oznako q.Namenska definicija.Okrajšava (NPO, IP).

Splošni primer
Če želite bolje razumeti, za kaj je vsaka oznaka odgovorna in kako deluje, si oglejte naslednjo kodo in rezultat njene izvedbe.
 
Maščobni besedilo je mogoče pretvoriti v oznake močan in b.  zadaj poševno odgovor em in jaz.
Oznake sub in sup uporablja za ustvarjanje nižje(x 1…x n) In zgornji (42=16) indeksi. Del prečrta, ins - poudarja.
Oznake Koda, kbd, var in vzorec se redko uporabljajo in so potrebni za prikaz seznamov programov
 okrajšava potrebno navesti okrajšave ( HTML).  Oznake blockquote, cite in q se uporabljajo za oblikovanje narekovajev ( Nebo je že dihalo v jeseni)
Predoznaka ohrani izvirno oblikovanje besedila brez odstranjevanja presledkov ali prelomov vrstic.

Brskalnik interpretira to kodo na naslednji način:

Združevanje oznak
Potrebno je, da besedilo ne teče v eni neprekinjeni vrstici, ampak je razdeljeno na logične komponente.
Znotraj oznak je odstavek.
 
Prvi odstavek
Drugi odstavek


Oznaka 

 premakne v naslednjo vrstico znotraj odstavka (pred vrstico ne bo zamika).

 omogoča risanje vodoravne črte.  Uporabite ga lahko za bolj jasno ločevanje besedila.  Lastnosti premer, velikost, barva, poravnati in noshade nastavite širino, debelino, barvo, poravnavo in pomanjkanje 3D učinka črte.
 
Vrstica nad vrstico. 
Vrstica pod črto.

Naloga
V prvo vrstico vsakega odstavka dodajte zamik.
rešitev
Ko morate nastaviti zamik odstavka, imenovan tudi zamik, je najbolje uporabiti lastnost sloga zamik besedila.  Njegova vrednost določa, za koliko premakniti besedilo prve vrstice v desno od prvotnega položaja.  Širina besedilnega bloka se ne spremeni in ostane nastavljena na začetku.  Količina zamika se lahko določi v slikovnih pikah, odstotkih ali drugih razpoložljivih enotah (primer 1).
Primer 1: Zamik prve vrstice
HTML5 CSS 2.1 IE Cr Op Sa Fx

 

 
 
 
 
 
 
 
Babilonski pandemonij je po svetopisemski legendi neuspeli poskus kralja Nimroda, da bi v Babilonu zgradil v nebo visok steber.  Bog, jezen na ljudi zaradi njihove nepremišljene želje, se je odločil kaznovati graditelje: zmešal jim je jezik, tako da se niso več razumeli, bili so prisiljeni ustaviti gradnjo in se malo po malo razkropili po vsem svetu.  Od tod, kot so pojasnili starodavni, prihaja razlika v jezikih.
 
Babilonski pandemonij v običajnem konceptu pomeni nered, zmedo z veliko množico ljudi.
 

Rezultat tega primera je prikazan na sl.  1.
 seznami slik povezave tabele obrazci video avdio HTML referenca CSS referenca Postavitev spletne strani 
Z naslovom strani H1 in odstavkom P smo se delno seznanili v prvi lekciji o strukturi dokumenta HTML.  Zdaj pa si podrobneje oglejmo logične označevalne oznake: naslove, odstavke, sezname, vidne elemente elementa Body in oznake fizičnega oblikovanja.  Če želite to narediti, nekoliko spremenimo našo primerno stran ali jo znova vtipkajte:
 
Na našo html stran za usposabljanje smo dodali (označeno s puščicami, enkrat): naslov 2. ravni - oznaka H2, dva naslova 3. ravni - oznaka H3, drug odstavek - oznaka P, označeni seznam - Ul in več oznak za fizično oblikovanje .  Odprimo stran v brskalniku:
 

 
Oznake H1-H3 označujejo naslove različnih ravni - skupaj jih je šest.  Naslov najnižje ravni je H6.  Naslovi morajo biti uporabljeni logično, naslov H1 najvišje ravni pa se mora pojaviti samo enkrat na strani.  Naslov H1 je v brskalnikih prikazan z veliko pisavo, velikost pisave v naslovih naslednjih nivojev pa se ustrezno zmanjša.
 
Iskalni roboti dajejo velik pomen vsebini naslovov na najvišji ravni.  Poleg tega je uporabnikom lažje krmariti po strani z logično pravilno sestavljenimi naslovi.
 
Oznake za fizično oblikovanje
 
Na strani za drugim odstavkom je vidna vodoravna vrstica - ustvari jo element Hr, ki nima zaključne oznake.  Oznaka Br pomeni novo vrstico, prav tako ni seznanjena - brez zaključne oznake.  Pri oblikovanju besedila lahko uporabite več elementov Br zaporedoma - vsak naslednji bo dodal novo prazno vrstico.
 
Zdaj pa bodimo pozorni na besedo »telo« v drugem odstavku, ki je obdana s seznanjeno oznako B, zaradi česar je beseda krepka.  Besedna zveza "format text" je prikazana v poševnem tisku - to dosežemo z oznako I. Oznaka U nastavi podčrtaj (v našem primeru ni).
 

 
Poleg teh oznak, ki poudarjajo fragmente besedila, obstaja v HTML tudi oznaka Strong - poudari del, ki je pomensko pomemben (krepko).  In oznaka Em je malo manj pomembna (ležeče).  Iskalni roboti so bolj pozorni na ti dve oznaki, ki označujeta fraze, ki so pomembne v svojem logičnem pomenu.  Priporočljivo je, da vanje vključite ključne besede, vendar ne smete pretiravati.  Enako velja za naslove.
 
Tukaj je še nekaj fizičnih oznak za oblikovanje besedila: Q – Označi citat v vrstici.  Element bloka Blockquote – ta oznaka lahko vsebuje več odstavkov.
 
Oznaka kode se uporablja za označevanje fragmentov kode; treba je uporabiti prelome vrstic in neprekinjene presledke: za njihovo označevanje se uporabljajo posebni simboli.  simbol (prvi znak - ampersand: tipka 7 z držanim Shift v angleški postavitvi).  Toda oznaka Pre prikaže programsko kodo, kakršna je, s presledki in toliko vrsticami, kolikor je v kodi.
 
To so najpogosteje uporabljeni elementi za oblikovanje besedila; za druge oznake za oblikovanje in posebne znake glejte Referenco HTML, ki se nahaja na istem mestu - ima preprosto abecedno navigacijo.
 
Ustvarjanje html seznamov
 
Preostane nam še razmisliti o ustvarjanju seznamov, označili smo ga in določili s parno oznako Ul, njegove elemente oziroma elemente pa z oznako Li (1. posnetek zaslona).  Z uporabo atributa type lahko za oznake Ul in Li spremenimo vrsto markerja.  Privzeto, tj.  če atribut ni določen, je njegova vrednost "disk" - krog.  Atribut tipa lahko nastavite z vrednostjo "krog" - krog.  ali takole: 
- dobili bomo seznam s kvadratnimi oznakami.

 
Pravzaprav se ne bom osredotočal na atribute oznak, razen na obvezne in nekaj primerov za splošno razumevanje.  Za nastavitev slogov je bolje uporabiti lastnosti CSS - prišli bomo do njih, atribute pa boste našli v priročniku.
 
Poleg označenih obstajajo še oštevilčeni seznami, ki jih podajamo z oznako Ol, elementi seznama, tako kot označeni, pa z oznako Li.  Poleg tega lahko za obe vrsti seznamov ustvarite ugnezdeni seznami.  Zapletimo nalogo in spremenimo naš seznam na vzorčni strani v naslednje:
 

 
Odprimo stran v brskalniku in lahko jasno vidimo: oštevilčen seznam z označenim seznamom, ugnezdenim v njem, za katerega "kvadratna" vrednost atributa type določa kvadratne oznake.