Možete koristiti oznaku i. HTML5: stare oznake s novom svrhom

Svi znaju da oznake , , , su prezentacijski, pa se stoga, na temelju paradigme "struktura, prezentacija, ponašanje", ne potiče njihova uporaba. Elementi se čine mnogo poznatijim , , . Tako je kroz dugogodišnju razvojnu praksu. Međutim, dosta se promijenilo u semantici ovih elemenata dolaskom HTML5. Sada imamo 4 nove oznake sa značenjem i neredom u našim glavama.

u odnosu na

Ako su prije svi udžbenici s rasporedom bili prepuni izraza poput „koristite umjesto ”, a to je bila napola istina, onda danas takva navika može odigrati okrutnu semantičku šalu. Ali stvar je u tome što autori HTML5 predlažu korištenje istaknuti dijelove teksta kako bi privukli pozornost čitatelja, ali bez impliciranja povećanja značaja teksta ili intonacije. Specifikacija pruža primjere kako se ključne riječi mogu koristiti za označavanje dokumenta.

The frobonitor i barbinator komponente se prže.

I vodi (prvi odlomak članka u novinarstvu)


Mačiće "usvojio" kućni ljubimac kunić


Šest napuštenih mačića pronašlo je neočekivanu novu majčinu figuru - kućnog ljubimca zeca.


Veterinarska sestra Melanie Humble odvela je tri tjedna stare mačiće u svoj dom u Aberdeenu.


Sa svoje strane , kao i do sada, znači povećan značaj njegovog sadržaja.

u odnosu na

Odsada pa nadalje sadrži tekst koji odskače od opće okoline, ali nema emocionalni prizvuk. Po mom mišljenju, Logično je koristiti tamo gdje tipografska tradicija zahtijeva kurziv (npr. riječi na stranom jeziku, termini i sl.)

Per aspera ad Astra— u prijevodu s latinskog, izreka znači “Preko trnja do zvijezda”.

to znači emfatički naglasak, emocionalno naglašavanje određenog odlomka teksta. To je slučaj kada u govoru ističemo riječi glasom (intonacijom, glasnoćom itd.)

Izvršiti Zabranjeno je, imaj milosti.

Pažljivo pročitajte ugovor!

“Sitniji tekst” (informacija koja je pravna formalnost, poput poslovne licence ili pravne adrese itd.) u pravilu označavamo elementom s klasom koja određuje manji font u vizualnim korisničkim agentima. Sada se u našem arsenalu pojavio novi stari semantički element - .

Holivar o

Ranije nije bio ništa više od prekriženog teksta. Sada predstavlja informaciju koja je izgubila na važnosti.
Imamo i element , zadani rezultat obrade u vizualnim korisničkim agentima je precrtani tekst. To znači izmjene na dokumentu, a na prvi pogled njihova svrha može izgledati ista. Međutim, ovdje postoji jedna suptilna točka. Pogledajmo primjer stranice proizvoda u online trgovini.
Može označavati dvije cijene, od kojih je jedna prekrižena. Označavamo ga elementom . To znači da je stara cijena izgubila na važnosti (nije bitno kada je bila, bitna je sama činjenica). Kako provjeriti da nije ? podrazumijeva izmjene napravljene na dokumentu(važno je to u nekom trenutku dokument je promijenjen). U našem slučaju novi dokument već sadrži nevažne podatke.

Nova semantika i stari doctype

Ako iz nekog nepoznatog razloga ne možete zamijeniti doctype novim i formalno je raspored u HTML 4.01, nemojte očajavati. Koristite stare nove elemente s novim značenjem i s vremenom ćete biti zahvalni. Možda će netko reći da je to pogrešno, ali ovi elementi, osim nisu ni nevažeći. Osim toga, HTML5 je dizajniran imajući na umu kompatibilnost sa starijim verzijama, a isto se odnosi i na novu semantiku starih elemenata. Ništa se nije radikalno promijenilo, već je samo dodan semantički začin.

Sada ćemo proučiti glavne oznake. Počnimo s oznakama koje su potrebne na stranici, tvoreći njezinu strukturu.

Blok. Jednostavna struktura stranice

Web stranica je obična tekstualna datoteka s ekstenzijom .html. Tekst HTML stranice zajedno s oznakama pohranjuje se unutar ove datoteke. Ova datoteka mora imati sljedeće oznake: oznaka , koja bi trebala sadržavati tekst cijele stranice (sve što je napisano izvan ove oznake preglednik će ignorirati), a unutar nje bi trebale biti još dvije oznake: tag za sadržaj i oznaku servisne stranice - za glavni tekst, koji je vidljiv na ekranu preglednika.

U servisni sadržaj, koji se nalazi unutar oznake , uključeno je mnogo različitih stvari, ali za sada nam trebaju samo dvije. Ovo je oznaka , koji određuje naslov stranice, koji će biti vidljiv u kartici preglednika, i oznaku <meta>, koji specificira kodiranje stranice (smješta se u atribut <b>skup znakova</b> i obično je bitno <b>utf-8</b>, više o tome u videu koji će biti par odlomaka niže).</p> <p>Također, prije oznake <html>konstrukcija je obično napisana <b>doctype</b>, što označava verziju HTML-a u kojem je stranica napravljena. Trenutna verzija jezika je broj pet i doctype za nju bi trebao izgledati ovako -<!DOCTYPE html> .</p> <p>Dakle, pogledajmo osnovnu strukturu stranice (za pokretanje ovog primjera u pregledniku, kopirajte ga u tekstualnu datoteku s ekstenzijom <b>.html</b> i otvorite u pregledniku, ako imate problema s tim, pogledajte video ispod primjera):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ovo je naslov naslova Ovo je glavni sadržaj stranice.

Pogledajte ovu poveznicu da vidite kako ovaj primjer izgleda u pregledniku.

Mislim da nakon što ste pročitali o osnovnoj strukturi stranice, još uvijek ste pomalo zbunjeni kako to sve izgleda u praksi. Stoga sam napravio poseban video u kojem ću vam pokazati kako napraviti svoju prvu HTML stranicu i pokrenuti je u pregledniku (u njemu ću također govoriti o naslovu stranice, o kodiranju, o dizajnu koda). Pogledajte i tek onda nastavite s daljnjim čitanjem:

Pa, sada, nakon što sam naučio stvarati jednostavne stranice, prijeći ćemo na istraživanje korisnih oznaka koje bi se trebale koristiti unutar oznake . To će biti oznake za odlomke, naslove, popise, veze i druge korisne stvari. Pa krenimo.

Blok. Odlomci

Jedan od glavnih elemenata stranice je stavci. Mogu se usporediti s odlomcima u knjizi - svaki odlomak počinje u novom retku i ima tzv. crvenu liniju (to je kada je prvi red teksta odlomka malo uvučen udesno). Prema zadanim postavkama nema crvene linije, ali ju je lako izraditi (više o tome kasnije).

Odlomak se stvara pomoću oznake

Tako:

Ovo je naslov naslova

Ovo je paragraf.

To je još jedan paragraf.

I još jedan paragraf.



Ovo je paragraf.

To je još jedan paragraf.

I još jedan paragraf.

Blok. Naslovi h1, h2, h3, h4, h5, h6

Osim odlomaka, važne stvari na stranici su zaglavlja. Mogu se usporediti i s naslovima iz knjige - svako poglavlje ima svoj naslov (naslov tog poglavlja) i podijeljeno je na paragrafe, koji također imaju svoje naslove. Pa, glavni tekst stranice nalazi se u paragrafima.

Stvorena su zaglavlja pomoću oznaka

,

,

,

,

,
. Imaju različite stupnjeve važnosti. U naslovu h1 treba nalaziti naslov cijele HTML stranice, V h2- Ime blokovi stranice, u h3- naziv podblokova i tako dalje.

Sva su zaglavlja prema zadanim postavkama podebljana i imaju različite veličine (ovo se može promijeniti putem CSS-a, ali više o tome kasnije). Pogledajte primjer:

Ovo je naslov naslova

Naslov h1

Naslov h2

Naslov h3

Naslov h4

Naslov h5
Naslov h6

Ovo je prvi paragraf.

Ovo je drugi paragraf.

Ovo je treći paragraf.



Ovako će kod izgledati u pregledniku:

Naslov h1

Naslov h2

Naslov h3

Naslov h4

Naslov h5
Naslov h6

Ovo je prvi paragraf.

Ovo je drugi paragraf.

Ovo je treći paragraf.

Blok. masnoća

Već znate da su zaglavlja standardna masna. Međutim, možete ga podebljati i čisti tekst- samo označite . Pogledajte primjer:

Ovo je naslov naslova

Ovo je normalan tekst, a ovo je masna tekst.



Ovako će kod izgledati u pregledniku:

Ovo je normalan tekst, a ovo je masna tekst.

treba koristiti unutar neke druge oznake, kao što je paragraf. U ovom slučaju odlomci stvaraju ukupnu strukturu stranice (odlomke i naslove) i oznaku b podebljava pojedinačne dijelove teksta.

Blok. Kurziv

Osim masnog, možete napraviti i kurziv pomoću oznake :

Ovo je naslov naslova

Ovo je normalan tekst, a ovo je kurziv tekst.



Ovako će kod izgledati u pregledniku:

Blok. Popisi

Uz odlomke i naslove, postoji još jedan važan element stranice - ovo popisi. Takvi su elementi vjerojatno poznati svim korisnicima interneta. Predstavljaju popis nečega (listu) točku po točku. Uz svaku stavku na popisu obično se nalazi popunjeni krug (zove se marker popis).

Popisi se izrađuju pomoću oznake