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)
Š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.
Mačiće "usvojio" kućni ljubimac kunić
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 Imamo i element
Može označavati dvije cijene, od kojih je jedna prekrižena. Označavamo ga elementom
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, osimSada ć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 oznakaTakođer, prije oznake konstrukcija je obično napisana doctype, š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 - .
Dakle, pogledajmo osnovnu strukturu stranice (za pokretanje ovog primjera u pregledniku, kopirajte ga u tekstualnu datoteku s ekstenzijom .html i otvorite u pregledniku, ako imate problema s tim, pogledajte video ispod primjera):
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 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.
,
,
,
. 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.
,
. 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:
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 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 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
- , koji mora sadržavati oznake
- . Označiti ul specificira samu listu i oznake li trebaju biti postavljene stavke popisa (to jest, jedan li odgovara jednoj oznaci popisa). Imajte na umu da se li oznake ne mogu koristiti zasebno. Pogledajte primjer:
Ovo je naslov naslova - Prva stavka na popisu.
- Druga stavka na popisu.
- Treća stavka na popisu.
Ovako će kod izgledati u pregledniku:
- Prva stavka na popisu.
- Druga stavka na popisu.
- Treća stavka na popisu.
Popisi stvoreni putem oznake ul, se zovu poremećen popisi. Ovo ime im je dano jer postoje i naredio popisi koji imaju brojčane oznake umjesto točkastih oznaka. Takve liste umjesto oznake ul imaju oznaku
- , a stavke takvih popisa također se kreiraju putem oznaka li.
- Prva stavka na popisu.
- Druga stavka na popisu.
- Treća stavka na popisu.
- Prva stavka na popisu.
- Druga stavka na popisu.
- Treća stavka na popisu.
- Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata ( Moguća preporuka) - skupina odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
- Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
- Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
- Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
- Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.
- boja – postavlja boju teksta;
- veličina – veličina slova u konvencionalnim jedinicama.
- lice – koristi se za postavljanje obitelji fontova teksta koji će se koristiti unutar oznake . Podržano je nekoliko vrijednosti odvojenih zarezima.
- - postavlja u html podebljani font. Označiti sličan u djelovanju prethodnom;
- — veličina je veća od zadane;
- — manja veličina slova;
- — tekst u kurzivu (kurziv). Slična oznaka ;
- — tekst s podvlačenjem;
- prekrižen;- — prikaz teksta samo malim slovima;
- - velikim slovima.
- U pikselima;
- U apsolutnom smislu ( xx-mali, x-mali, mali, srednji, veliki);
- U postocima;
- U bodovima (pt).
- normalno – normalan pravopis;
- kurziv – kurziv;
- oblique – font nakošen udesno;
- naslijediti – nasljeđuje pravopis nadređenog elementa.
- podebljano – postavlja html font podebljano;
- hrabriji – hrabriji u odnosu na normalno;
- svjetlije - manje zasićeno u odnosu na normalno;
- normalno – normalan pravopis;
- 100-900 – postavlja debljinu fonta u numeričkom ekvivalentu.
- natpis - za gumbe;
- ikona – za ikone;
- jelovnik - jelovnik;
- okvir za poruke – za dijaloške okvire;
- mali natpis – za male kontrole;
- status-bar – font statusne trake.
- normal - normalan font;
- italic - kurzivni stil;
- oblique – kosi stil.
Napravimo uređeni popis pomoću oznake ol:
Ovo je naslov naslova
Ovako će kod izgledati u pregledniku:
Pogodnost poredanih popisa je u tome što mogu umetnuti novu stavku popisa bilo gdje - a numeriranje će se samo preurediti (to jest, ne moram ga pratiti u slučaju bilo kakvih promjena, kao što bi bio slučaj da sam posložio to ručno).
Blok. Linkovi
Linkovi su elementi koji internet čine internetom. Klikom na linkove možemo se kretati s jedne stranice na drugu stranicu. Da ne postoje, Internet bi bio samo skup stranica koje nisu ni na koji način međusobno povezane.
Ovo je naslov naslova Link na stranicu phphtml.net.
Ovako će kod izgledati u pregledniku:
Postoje poveznice apsolutni I relativna, osim toga, mogu voditi i na vaše i na tuđe stranice. Ove teške trenutke bolje je prikazati nego opisivati u tekstu, pa sam za vas napravio sljedeći video. Pogledajte i tek onda nastavite s daljnjim čitanjem:
Blok. Slike
Hajde sada shvatiti kako postaviti slika na stranici vaše web stranice. Tome služi oznaka
koji ima traženi atribut src, koji pohranjuje put do slikovne datoteke.
Pogledajmo kako to funkcionira u sljedećem primjeru:
Ovo je naslov naslova
Ovako će kod izgledati u pregledniku:
Imajte na umu da oznaka
ne zahtijeva završnu oznaku.
Blok. Linkovi u obliku slika
Veza može postojati ne samo tekst, već i slika- za ovo je dovoljna oznaka
staviti u oznaku , kao što je učinjeno u sljedećem primjeru. Kliknite na sliku i slijedit ćete poveznicu do web stranice phphtml.net (da biste se zatim vratili natrag na knjigu, kliknite gumb "natrag" u pregledniku):
Ovo je naslov naslova
Ovako će kod izgledati u pregledniku:
Blok. Prijelom retka
Zapamtite što će se dogoditi ako, na primjer, napravite dva odlomka jedan pored drugog - u ovom slučaju, tekst koji se nalazi u svakom od njih počet će s novi linije.
Pogledajmo to na sljedećem primjeru:
Ovo je naslov naslova Ovo je prvi paragraf.
Ovo je drugi paragraf.
Ovako će kod izgledati u pregledniku:
Ovo je prvi paragraf.
Ovo je drugi paragraf.
Postoje, međutim, situacije u kojima bismo htjeli imati jedan odlomak, ali dio teksta u njemu počinje u novom retku. Zašto bi ovo moglo biti potrebno? Na primjer, želim upisati pjesmu, ali ne želim rastaviti svaki red u poseban odlomak, jer to ne bi bilo baš logično.
Da biste to učinili, na mjestu gdje bi trebao biti prijelom retka, trebali biste napisati oznaku
. Imajte na umu da je ova oznaka posebna i da nema završnu oznaku.Pogledajmo kako to funkcionira pomoću sljedećeg primjera:
Ovo je naslov naslova Ovo je prvi red teksta,
a ovo je drugi.
Ovako će kod izgledati u pregledniku:
Ovo je prvi red teksta,
a ovo je drugi.Blok. HTML komentari
Gotovo svi programski jezici imaju takav koncept kao "komentari".
Opis
Postavlja kurzivni stil fonta. Prihvatljivo je koristiti ovu oznaku u kombinaciji s drugim oznakama koje definiraju stil teksta.
Sintaksa
TekstZavršna oznaka
Potreban.
Atributi
Slično CSS-u
Primjer. Korištenje oznake
Oznaka I Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Bilješka
Iako je korištenje oznake u HTML-u se ne osuđuje; upotreba stilova pruža veću kontrolu nad stilom teksta.
Specifikacija ?
✖
Specifikacija
Svaka specifikacija prolazi kroz nekoliko faza odobravanja.
Živ stoji odvojeno HTML standard(Living) - ne pridržava se tradicionalnog numeriranja verzija, jer je u stalnom razvoju i redovito se ažurira.
Preglednici: Desktop Mobile ?
Internet Explorer Krom Opera Safari Firefox 2 1 2 1 1 Android Firefox Mobile Opera Mobile Safari Mobile 1 1 6 1 U html-u veličina fonta igra važnu ulogu. Omogućuje vam da privučete pozornost korisnika važna informacija, objavljeno na stranici stranice. Iako nije važna samo veličina slova, već i njihova boja, debljina, pa čak i obitelj.
Oznake i atributi pri radu s html fontovima
Jezik hiperteksta ima širok raspon alata za rad s fontovima. Uostalom, oblikovanje teksta je glavni zadatak html-a.
Razlog za stvaranje HTML jezika bio je problem prikazivanja pravila oblikovanja teksta u preglednicima.
Pogledajmo oznake koje se koriste za rad s fontovima u HTML-u i njihove atribute. Glavna je oznaka . Pomoću vrijednosti njegovih atributa možete postaviti nekoliko karakteristika fonta:Podržane su pozitivne vrijednosti atributa od 1 do 7.
Formatiran je samo tekst koji se nalazi između dijelova par oznaka font. Ostatak teksta prikazuje se standardnim zadanim fontom.
Također u html-u postoji niz uparenih oznaka koje određuju samo jedno pravilo oblikovanja. To uključuje:Običan tekst
Sličica
Sličica
Više nego inače
Manje nego inače
Kurziv
Kurziv
S podvlakom
PrekriženMogućnosti atributa stila
Osim opisanih oznaka, postoji još nekoliko načina za promjenu fonta u html-u. Jedan od njih je korištenje generičkog atributa stila. Pomoću vrijednosti njegovih svojstava možete postaviti stil prikaza fontova:
1) font-family – svojstvo postavlja obitelj fontova. Moguće je ispisati više vrijednosti.
Promjena fonta u html-u na sljedeću vrijednost dogodit će se ako prethodna obitelj nije postavljena na operacijski sustav korisnik.Sintaksa pisanja:
obitelj-fontova: naziv-fonta [, naziv-fonta[, ...]]
2) veličina fonta – veličina je postavljena od 1 do 7. Ovo je jedan od glavnih načina na koji možete povećati font u HTML-u.
Sintaksa pisanja:veličina-fonta: apsolutna veličina | relativna veličina | značenje | kamata | naslijediti
Također možete postaviti veličinu fonta:
Veličina slova: 7
Veličina fonta: 24 px
Veličina fonta: x-veliko
Veličina fonta: 200%
Veličina fonta: 24 pt
3) font-style – postavlja stil pisanja fonta. Sintaksa:stil fonta: normalan | kurziv | koso | naslijediti
Vrijednosti:
Primjer kako promijeniti font u html-u pomoću ovog svojstva:
font-style:nasljedi
font-style:kurziv
font-style:normal
font-style: oblique
4) varijanta fonta – pretvara sva velika slova u velika slova. Sintaksa:varijanta fonta: normalno | mala slova | naslijediti
Primjer kako promijeniti font u html-u s ovim svojstvom:
font-varijanta: naslijediti
font-varijanta:normalno
font-varijanta: mala velika slova
5) font-weight – omogućuje vam postavljanje debljine teksta (zasićenost). Sintaksa:težina-fonta: podebljano|podebljano|svjetlije|normalno|100|200|300|400|500|600|700|800|900
Vrijednosti:
težina-fonta: podebljano
font-weight:bolder
font-weight:lighter
težina fonta: normalna
težina slova: 900
težina slova: 100
Svojstvo HTML fonta i boja fonta
Font je još jedno svojstvo spremnika. U sebi je kombinirao vrijednosti nekoliko svojstava namijenjenih za promjenu fontova. sintaksa fonta:
font: veličina-font-familija | naslijediti
Vrijednost se također može postaviti na fontove koje koristi sustav u oznakama na različitim kontrolama:
font: ikona
font:naslov
font:izbornik
font:box-poruka
mali natpis
font: statusna traka
font:kurziv 50px bold "Times New Roman", Times, serif
Za postavljanje boje fonta u HTML-u, možete koristiti svojstvo boje. Omogućuje vam postavljanje boje pomoću ključna riječ, i to u rgb formatu. I također u heksadecimalnom kodu.Kurziv je jedan od najpopularnijih načina za isticanje dijela teksta i davanje određenog značaja. Idealan je za citate, fusnote, naslove i vlastita imena. U HTML-u postoje dvije posebne oznake za prikaz kurzivnog stila. U CSS-u, kurziv je kontroliran svojstvom font-style.
Kurziv ili kurziv?
Isti font može izgledati drugačije u kurzivu.
Slika prikazuje tri bloka teksta ispisanog istim fontom Playfair Displaya. Prvi ima uobičajeni rimski stil, dok drugi i treći imaju kurziv. Otvoreni su u istom Google preglednik Chrome, ali izgledaju potpuno drugačije.
Činjenica je da neki fontovi imaju vlastite skupove znakova u kurzivu. Ako preglednik nema pristup ovom skupu, ali naiđe na tekst koji bi trebao biti prikazan u kurzivu, pokušat će ga sam staviti u kurziv.
U drugom bloku nalazi se upravo takva verzija koju obrađuje preglednik, au trećem je originalna kurzivna verzija fonta Playfair Display, koja ima jedinstveni stil, više nalik rukom pisanom. Preglednik jednostavno naginje svaki znak teksta pod određenim kutom, simulirajući kurziv.
Kada shvaćate kako napraviti kurziv u CSS-u ili HTML-u, važno je upamtiti da u slučaju određenih fontova morate pregledniku omogućiti pristup njihovim skupovima kurziva. U nekim slučajevima, rezultat algoritama nagiba preglednika može biti nezadovoljavajući.
HTML kurziv
Postoje dvije posebne oznake za prikaz kurzivnog teksta u HTML-u: i (od riječi italic) i em. Stil tekstualnog fragmenta zatvorenog u bilo kojem od ovih deskriptora bit će isti.
Razlika je u logičnom odabiru. Oznaka em označava poseban značaj fragmenta. Ovo je važno za robote za pretraživanje i čitače zaslona, koji će istaknuti navedeni tekst pomoću intonacije.
svojstvo stila fonta
U CSS-u, kurziv je kontroliran naredbom o stilu fonta. Može uzeti jednu od tri osnovne vrijednosti:
Trenutno većina moderni preglednici postupajte s kosim i kurzivnim vrijednostima na isti način, no izvorno se pretpostavljalo da je prvi rezultat posebnih algoritama preglednika koji naginju svaki znak udesno.
Ako preglednik ne pronađe font koji tražite, kurziv će izgledati potpuno isto kao kosi.
Za razliku od oznake em, ne daje posebnu važnost odabiru, već odgovara deskriptoru i.
Primjeri
Navodnici se često koriste u kurzivu. Pokušajmo da izgleda lijepo.
Citat (font-style: italic; border-left: 5px puna ljubičasta; padding-left: 20px; )
Uz ukrasni obrub s desne strane i uvlake, blok navodnika ima pravilo stila fonta s vrijednošću kurziv.
Koristite ga za postavljanje kurziva u CSS-u.