U ovom poglavlju:
Sintaksa elementa
HTML element je osnovna strukturna jedinica web stranice napisana u HTML jeziku. Slika ispod pokazuje sintaksu elemenata. Za većinu oznaka, sintaksa elementa će izgledati isto osim za pojedinačne oznake.
Svi elementi u HTML-u slijede isti format:
- Element počinje početnom oznakom.
- Element završava završnom oznakom.
- Sadržaj elementa je sve između otvaranja i zatvaranja oznake.
- Neki elementi nemaju sadržaj (prazni elementi).
- Većina elemenata može sadržavati atribute
Napomena: ne zaboravite staviti " / ", govori pretraživaču da je vaš element završio i da je ono što će biti napisano nakon njega već drugi element.
Prazni elementi
Postoji nekoliko elemenata u HTML-u koji nemaju završnu oznaku, na primjer ili
... Takvi elementi se nazivaju prazan jer ne sadrže nikakav sadržaj i nemaju završnu oznaku.
Ugniježđeni elementi
Svi HTML dokumenti su sastavljeni od ugniježđenih elemenata. Većina njih može sadržavati ili druge elemente, ili sami mogu biti ugniježđeni u druge elemente, dok dubina ugniježđenja elemenata nije ograničena.
Sljedeći primjer ima tri elementa, od kojih su dva ugniježđena:
Moj prvi paragraf
Kada ugniježdite jedan element u drugi, pazite da ugniježđeni element počinje i završava unutar istog elementa. Dakle, sljedeći primjer nije tačan:
Ovo vrlo
zanimljivoPostoje dvije vrste elemenata u HTML-u - blok elementi i inline elementi. U nastavku ćete naučiti karakteristike ovih elemenata i razliku između njih, kao i načine da ih kontrolirate putem CSS pravila.
Blok elementi
Blok elementi su osnova koja se koristi za izgled web stranica. Takav element je pravougaonik koji po defaultu zauzima cijelu dostupnu širinu stranice (osim ako nije drugačije navedeno u CSS-u), a dužina elementa ovisi o njegovom sadržaju. Takav element uvijek počinje u novom redu, odnosno nalazi se ispod prethodnog elementa. Blok element može sadržavati druge blok i inline elemente.
Primjeri blok elemenata:
,
- ,
- Inline elementi mogu sadržavati samo podatke ili druge inline elemente, dok blok elementi mogu sadržavati druge blok elemente, inline elemente i podatke. Drugim riječima, inline elementi ne mogu pohraniti blok elemente ni na koji način.
- Blok elementi uvijek počinju u novom redu, a elementi malih slova nisu naglašeni na ovaj način.
- Blok elementi zauzimaju cjelokupnu dostupnu širinu, na primjer, prozora pretraživača, a ugrađeni elementi imaju istu širinu kao i njihov sadržaj plus vrijednosti za popunjavanje, margine i granice.
- ,
itd.
Inline elementi
Za razliku od blok elementa, inline element se ne premotava u novu liniju, već se nalazi na istoj liniji kao i prethodni element. Takvi elementi se obično nalaze unutar blok elemenata i njihova širina zavisi samo od sadržaja i CSS postavki. Druga razlika između inline elementa i blok elementa je u tome što on može sadržavati samo sadržaj i druge inline elemente. Blok elementi ne mogu biti ugniježđeni u inline elemente.
Primjeri inline elemenata: , , , , itd.
Bilješka: u HTML5, redoslijed ugniježđenja oznaka nije bitan. Elementi više nisu jednostavno podijeljeni na blok i inline, već su grupirani po značenju i svrsi, predstavljajući kategorije sadržaja.
CSS svojstvo prikaza: promjena tipa elementa
Sa izuzetno korisnim svojstvom CSS prikaza, možete učiniti da se blok element pojavljuje u liniji i obrnuto. Da bi se blok element ponašao kao inline element (tj. da se ne bi prenio u novi red), za njega se mora napisati pravilo:
Prikaz: inline;
Ako trebate prikazati inline element kao blok element (tako da se prije i poslije elementa dogodi prijelom reda), napišite sljedeće:
Displej: blok;
Akcija (prikaz: inline) i (prikaz: blok)
Takođe možete napraviti "hibrid" - blok element sa inline ponašanjem. U ovom slučaju, cijeli sadržaj takvih blok elemenata će biti prikazan kao i obično, ali će se blokovi ponašati kao inline elementi, poređajući se u jednom redu jedan za drugim i prelamajući u novi red samo ako je potrebno. Kolaps marže u takvim slučajevima prestaje da funkcioniše. Da biste pretvorili element u blok-in-line, napišite:
Prikaz: inline-block;
Akcija (prikaz: inline-block)
Dalje niz tutorijal: CSS border property. Naučit ćete kako dodati ivice elementima web stranice i koje postavke možete primijeniti na njih pomoću kaskadnih stilskih tablica.
Inline elementi su oni elementi web stranice koji su direktni dio drugog elementa, kao što je tekstualni pasus. Uglavnom se koriste za promjenu izgleda teksta ili da bi izgledao logično.
Tag je jedan od važnih elemenata HTML-a i namijenjen je kreiranju linkova. Ovisno o prisutnosti atributa name ili href tag postavlja vezu ili sidro.
Definira podebljano pismo.
Tag povećava veličinu fonta za jedan u odnosu na normalan tekst. U HTML-u, veličina fonta se mjeri u proizvoljnim jedinicama od 1 do 7, prosječna veličina teksta koja se po defaultu koristi je 3. Dakle, dodavanjem oznake povećava tekst za jednu konvencionalnu jedinicu.
Tag
postavlja liniju gdje se nalazi ova oznaka. Za razliku od oznake paragrafa
Korištenje oznake
ne dodaje razmak ispred reda.
Tag dizajniran da naglasi tekst. Pretraživači takav tekst prikazuju kurzivom.
Postavlja font u kurziv.
Tag je namijenjen za prikazivanje slika u GIF, JPEG ili PNG grafičkom formatu na web stranici. Ako je potrebno, slika se može postaviti kao link na drugu datoteku postavljanjem oznake
u kontejner ... Istovremeno, oko slike se prikazuje obrub, koji se može ukloniti dodavanjem atributa border = "0" u oznaku
.
Tag Smanjuje veličinu fonta za jedan u poređenju sa običnim tekstom. Slično u akciji kao i oznaka , ali djeluje upravo suprotno.
Generička oznaka za definiranje inline elementa unutar dokumenta.
Tag dizajniran da naglasi tekst. Pretraživači takav tekst prikazuju podebljanim slovima.
Prikazuje font kao indeks. U ovom slučaju, tekst se nalazi ispod osnovne linije preostalih znakova linije i smanjene veličine - H 2 O.
Prikazuje font kao superscript. Njegovo djelovanje je slično ali se tekst prikazuje iznad osnovne linije teksta - m 2.
Razlika između blok i inline elemenata je sljedeća.
HTML elementi se dijele na inline i blok elemente prema načinu na koji se prikazuju na web stranici.
Inline elementi
Inline elementi su dizajnirani da izvode neke radnje nad tekstom, na primjer: prijelome reda, ispisivanje dijela teksta u kurziv, logično isticanje nekog teksta i primjenu stilova na njega pomoću CSS-a, itd. Ovisno o namjeni inline elementa, dio teksta se stavlja između početne i završne oznake ili se oznaka primjenjuje bilo gdje u tekstu, na primjer, da se prekine red.
Na primjer:
Može koristiti inline element da biste istaknuli tekst koji privlači pažnju posjetitelja web mjesta korištenjem podebljanog stila.
Inline element ima širinu koja je jednaka širini njegovog sadržaja. Inline elementi ne mogu sadržavati blok elemente unutar sebe.
Primjeri inline elemenata: , ,