Osnove HTML-a. Osnove HTML-a HTML Par oznake

Oznaka ( pl. oznake, ponekad oznaka) je element HTML jezika koji se koristi za označavanje izvornog teksta web stranice. Oznake su kratice ili kratice engleskih riječi u uglastim zagradama, na primjer, oznaka

…

skraćenica za engleska riječ paragraf, tj. tekst u ovoj oznaci preglednici će prepoznati kao odlomak.

Svaka oznaka u HTML-u ima posebno značenje i odgovorna je za prikaz određenih podataka. Veličina slova u nazivima oznaka nije važna, na primjer, oznaka

…

i oznaka

…

- To je isto. Odnosno, oznake se mogu pisati i malim i velikim slovima. Ranije je bila uobičajena praksa da se sve oznake pišu velikim slovima kako bi se oznake razlikovale od običnog teksta. Sada nema takve potrebe, jer mnogi urednici imaju isticanje sintakse.

Klasifikacija oznaka

U HTML-u postoji više od 90 oznaka Obično jedna oznaka utječe samo na dio dokumenta, na primjer, oznaka naslova prve razine... U takvim slučajevima koriste se uparene oznake: otvor I zatvaranje. Oznaka za otvaranje (na primjer, ) stvara učinak, a oznaka za zatvaranje ( ) zaustavlja učinak. Kao što možete vidjeti iz primjera, završna oznaka uvijek ima ovaj simbol (/) - kosu crtu. Ove oznake se nazivaju dvostruki.

Neke oznake daju jednokratni učinak tamo gdje se pojave. Na primjer, oznaka vodoravne trake ili oznaka za prikaz slike . Takve oznake nemaju završne oznake. Takve se oznake nazivaju neuparene.

Vrste oznaka

Osim toga, oznake su podijeljene u nekoliko tipova koji se razlikuju po svojim funkcijama:

oznake naslova dokumenta;
blok elementi;
inline elementi;
univerzalni elementi;
popisi;
stolovi;
okviri.

Ova podjela nije stroga, pa su neke oznake in različite grupe. Na primjer, oznake za izradu popisa i

Kada se učitaju u preglednik, same oznake se ne prikazuju, ali utječu na način na koji se njihov sadržaj prikazuje. Ako je oznaka pogrešno napisana, u potpunosti se zanemaruje.

Sve oznake imaju određenu strukturu koja se mora slijediti prilikom pisanja. Osim toga, gotovo sve oznake imaju različite atribute koji mogu promijeniti način na koji se sadržaj prikazuje.

Pogledajmo ispravnu strukturu oznaka koje sadrže atribute:

Vaš vlastiti webmaster

Kao primjer dao sam dvije potpuno različite oznake. Prvi single - odgovoran za prikaz slika, atribut - src="logo.jpg" . Drugi … upareni je odgovoran za stvaranje poveznica, atribut je href = "site" .

Zaključak 1: Atributi mogu imati uparene i neuparene oznake.

Zaključak 2: Samo početne oznake mogu imati atribute, završne oznake nemaju atribute.

Slika za pojašnjenje:

Slika 1. Struktura HTML oznake

Pogledajmo primjer jednostavne web stranice koju smo gledali u lekciji.

Već ste pročitali da se sav jezik sastoji od oznaka. U ovoj lekciji pobliže ćemo pogledati HTML oznake. U HTML jeziku oznake se dijele na pojedinačne (neuparene) i uparene oznake. Dakle, pojedinačne HTML oznake sastoje se od jedne oznake, odnosno nemaju završnu oznaku. A upareni deskriptori imaju oznaku otvaranja i zatvaranja.

HTML oznake

Pojedinačne oznake nemaju završnu oznaku. Na primjer:
, . Ranije su pisali ovako:
, , sada ovaj stil pisanja pojedinačnih oznaka nije relevantan, stoga nemojte pisati tako. Najčešće korištene pojedinačne oznake:
- prelazak u novi red, - linija razdvajanja, - umetnite sliku.

Ima još mnogo uparenih oznaka. Upareni deskriptor ima početnu i završnu oznaku. Uparena oznaka čini spremnik. Sadržaj spremnika je ono što se nalazi između početnih i završnih oznaka. U primjeru iz ovog članka vidjeli ste oznaku Što su deskriptori u HTML-u? , dakle ovo je uparena oznaka, sadržaj ove oznake je tekst "Što su oznake u HTML-u?" Njegov početak je oznaka, a kraj je .

Glavna pogreška početnika u pisanju uparenih oznaka je zabuna u gniježđenju. Na primjer, ovo je ispravan unos:

Podebljani paragraf

Kako pravilno napisati uparene oznake

HTML5 je proširenje HTML4, tako da zadržava većinu ili sve deskriptore iz HTML4 i dodaje svoje. HTML5 je uveo posebne oznake za podjelu stranice na glavne blokove: zaglavlje, izbornik, podnožje, bočnu traku i sadržaj.

Tražilice Yandex i Google osjetljive su na izgled HTML dokumenti, provjeravajući njihovu valjanost. Oni traže ključne riječi zatvorene u posebnim deskriptorima i tako dalje. Ali ovaj odjeljak nije o tome. Ovo se odnosi na promociju (SEO).

Da, ima dosta oznaka. Ali nema potrebe da ih posebno podučavate. Sve dok vježbate pisanje nečega, lako ćete zapamtiti sve deskriptore, uparene i pojedinačne. S vremenom, naravno.

HTML oznake su osnova HTML jezika. Oznake se koriste za omeđivanje početka i kraja elemenata u označavanju.

Svaki HTML dokument sastoji se od stabla HTML elemenata i teksta. Svaki HTML element identificiran je početnom (otvornom) i završnom (zatvarajućom) oznakom. Početne i završne oznake sadrže naziv oznake.

Svi HTML elementi podijeljeni su u pet vrsta:

prazni elementi - , ,
, , , , , , , , , , , , ;
elementi s neformatiranim tekstom - , ;
elementi koji prikazuju neformatirani tekst - , ;
elementi iz drugog imenskog prostora - MathML i SVG;
obični elementi – svi ostali elementi.

Tablica pokazuje puni popis elemente koje podržavaju HTML4 i HTML5. Eksperimentalne i naslijeđene oznake su isključene. Elementi dodani HTML5 specifikaciji istaknuti su plavozelenom bojom.

Koristi se za dodavanje komentara.

Deklariše vrstu dokumenta i pruža osnovne informacije pregledniku - njegov jezik i verziju.

Stvara hipertekstualne veze.

Identificira tekst kao kraticu ili akronim. Tekst objašnjenja naveden je pomoću atributa naslova.

Određuje kontakt podatke autora/vlasnika dokumenta ili članka. Prikazano kurzivom u pregledniku.

To je hiperveza s tekstom koji odgovara određenom području na slikovnoj karti ili aktivnom području unutar slikovne karte. Uvijek ugniježđen unutar oznake.

Odjeljak sadržaja koji čini neovisni dio dokumenta ili web stranice, kao što je članak u časopisu, post na blogu, komentar.

Predstavlja sadržaj stranice koji je neizravno povezan s glavnim sadržajem stranice/mjesta.

Učitava audio sadržaj na web stranicu.

Postavlja odlomak teksta podebljanim bez dodavanja naglaska ili važnosti označenom tekstu.

Određuje osnovnu adresu (URL) iz koje se izračunavaju sve relativne adrese. To će pomoći u izbjegavanju problema prilikom premještanja stranice na drugo mjesto, jer će sve veze raditi kao i prije.

Izolira odlomak teksta napisan na jeziku na kojem se tekst čita s desna na lijevo od ostatka teksta.

Prikazuje tekst u smjeru navedenom atributom dir, nadjačavajući trenutni smjer teksta.

Ističe tekst kao citat, koji se koristi za opisivanje velikih citata.

Predstavlja tijelo dokumenta (sadržaj koji nije dio metapodataka dokumenta).

Prelamanje teksta u novi redak.

Stvara interaktivni gumb. Unutar oznake možete postaviti sadržaj – tekst ili sliku.

Canvas spremnik za dinamički prikaz slika kao što su jednostavne slike, grafikoni, grafikoni itd. Za crtanje se koristi JavaScript skriptni jezik.

Dodaje natpis u tablicu. Umetnuto odmah nakon oznake .

Koristi se za označavanje izvora citata. Prikazano kurzivom.

Predstavlja dio programskog koda, prikazan u obitelji monospace fontova.

Odabire jedan ili više stupaca tablice za oblikovanje koji ne sadrže istu vrstu informacija.

Stvara strukturnu grupu stupaca koja identificira mnoge logički homogene ćelije.

Element se koristi za povezivanje vrijednosti atributa vrijednosti, koji je u strojno čitljivom formatu i može se obraditi računalom, sa sadržajem oznake.

Element spremnika za element padajućeg popisa. Vrijednosti varijante smještene su u elemente.

Koristi se za opisivanje pojma iz oznake.

Označava tekst kao izbrisan precrtavanjem.

Stvara interaktivni widget koji korisnik može otvoriti ili zatvoriti. Predstavlja spremnik za sadržaj, vidljiv naslov widgeta nalazi se u oznaci.

Identificira riječ kao pojam stavljajući je u kurziv. Tekst koji slijedi trebao bi sadržavati definiciju ovog pojma.

Interaktivni element s kojim korisnik komunicira kako bi dovršio zadatak, kao što je dijaloški okvir, inspektor ili prozor. Bez atributa open nije vidljiv korisniku.

Oznaka spremnika za dijelove HTML dokumenta. Koristi se za grupiranje blok elemenata za oblikovanje sa stilovima.

Oznaka spremnika koja sadrži pojam i njegov opis.

Koristi se za određivanje pojma.

Ističe važne odlomke teksta prikazujući ih kurzivom.

Oznaka spremnika za ugradnju vanjskog interaktivnog sadržaja ili dodatka.

Grupira povezane elemente u obrazac crtanjem okvira oko njih.

Naslov/naslov za element.

Oznaka samostalnog spremnika za sadržaj kao što su ilustracije, dijagrami, fotografije, primjeri kodova, obično s naslovom.

Definira završno područje (podnožje) dokumenta ili odjeljka.

Obrazac za prikupljanje i slanje informacija od korisnika na poslužitelj. Ne radi bez atributa akcije.

Stvorite šest razina naslova za povezane odjeljke.

Element spremnika za metapodatke HTML dokumenta, kao što su , , , , .

Odjeljak za uvodne informacije o stranici ili grupi navigacijskih veza. Može sadržavati jedan ili više naslova, logotip, podatke o autoru.

Vodoravna linija za tematsku podjelu odlomaka.

Korijenski element HTML dokumenta. Kaže pregledniku da je ovo HTML dokument. To je spremnik za sve ostale html elemente.

Kurziv odlomka teksta bez dodatnog naglašavanja.

Stvara umetnuti okvir učitavanjem drugog dokumenta u trenutni HTML dokument.

Ugrađuje slike u HTML dokument pomoću atributa src, čija je vrijednost URL ugrađene slike.

Stvara bogata polja obrasca u koja korisnik može unositi podatke.

Označava tekst podcrtavanjem. Koristi se za označavanje promjena napravljenih na dokumentu.

Odabire tekst koji će korisnik unijeti pomoću tipkovnice u monospace fontu.

Koristi se za pohranu dodatnih informacija o stranici. Ove informacije preglednici koriste za obradu stranice, a tražilice za indeksiranje. U bloku može postojati nekoliko oznaka, jer ovisno o korištenim atributima nose različite informacije.

Indikator mjerenja u zadanom rasponu.

Odjeljak dokumenta koji sadrži navigacijske veze za web mjesto.

Definira odjeljak koji ne podržava skriptiranje.

Spremnik za ugradnju multimedije (npr. audio, video, Java appleti, ActiveX, PDF i Flash). Također možete umetnuti drugu web stranicu u trenutni HTML dokument. Oznaka se koristi za prosljeđivanje parametara dodatka.

Uređena numerirana lista. Numeriranje može biti numeričko ili abecedno.

Spremnik s naslovom za grupu elemenata.

Određuje opciju/opciju za odabir s padajućeg popisa , ili .

Polje za prikaz rezultata izračuna izračunatog pomoću skripte.

Odlomci u tekstu.

Definira parametre za dodatke ugrađene pomoću elementa.

Element spremnika koji sadrži jedan element i nula ili više elemenata. Sam po sebi ne prikazuje ništa. Omogućuje pregledniku odabir najprikladnije slike.

Ispisuje tekst bez oblikovanja, čuvajući razmake i prijelome teksta. Može se koristiti za prikaz računalnog koda, poruka e-pošte itd.

Pokazatelj dovršetka zadatka bilo koje vrste.

Definira kratki citat.

Spremnik za istočnoazijske simbole i njihovo dekodiranje.

Definira svoj ugniježđeni tekst kao osnovnu komponentu napomene.

Dodaje kratak opis iznad ili ispod znakova sadržanih u elementu, prikazanih manjim fontom.

Označava ugrađeni tekst kao dodatnu napomenu.

Prikazuje alternativni tekst ako preglednik ne podržava element.

Prikazuje tekst koji nije trenutačno precrtan.

Koristi se za prikaz teksta koji predstavlja rezultat izvršavanja programskog koda ili skripte, kao i sistemskih poruka. Prikazuje se monospace fontom.

Koristi se za definiranje skripte na strani klijenta (obično JavaScript). Sadrži ili tekst skripte ili upućuje na vanjsku datoteku skripte pomoću atributa src.

Definira logično područje (odjeljak) stranice, obično sa zaglavljem.

Kontrolni element koji vam omogućuje odabir vrijednosti iz predloženog skupa. Vrijednosti varijante smještene su u .

Prikazuje tekst manjim fontom.

Određuje lokaciju i vrstu alternativnih medijskih izvora za , , .

Spremnik za inline elemente. Može se koristiti za oblikovanje odlomaka teksta, kao što je isticanje pojedinačnih riječi bojom.

Stavlja naglasak u tekst, naglašavajući ga podebljanim slovima.

Uključuje stilske listove koji se mogu ugraditi.

Određuje pisanje indeksa simbola, na primjer, indeks elementa u kemijskim formulama.

Stvara vidljiv naslov za oznaku. Prikazan s ispunjenim trokutom, klikom na njega možete vidjeti detalje naslova.

Određuje pravopis nadskripta znakova.

Oznaka za izradu tablice.
	Definira tijelo tablice.
		Stvara ćeliju tablice.
	Koristi se za deklariranje fragmenata HTML koda koji se mogu klonirati i umetnuti u dokument pomoću skripte. Sadržaj oznake nije njezin potomak.
	Stvara velika polja za unos teksta.
	Definira podnožje tablice.
	Stvara naslov ćelije tablice.
	Definira naslov tablice.
	Definira datum/vrijeme.
	Naslov HTML dokumenta koji se pojavljuje na vrhu naslovne trake preglednika. Može se također pojaviti u rezultatima pretraživanja, pa to treba uzeti u obzir prilikom davanja naslova.

Stvara red tablice.
	Dodaje podnaslove za elemente i .
	Ističe odlomak teksta podvlačenjem, bez dodatnog naglašavanja.
	Stvara popis s grafičkim oznakama.
	Ističe varijable iz programa tako da ih prikazuje u kurzivu.
	Dodaje video datoteke na stranicu. Podržava 3 video formata: MP4, WebM, Ogg.
	Označava pregledniku gdje bi dugi red mogao prekinuti.

Varalica s oznakama

Radi lakšeg korištenja, grupirao sam oznake u tematske odjeljke, dodajući vrijednosti svojstava prikaza za svaku oznaku. Za prelazak na stol kliknite na sliku.

HTML je obična tekstualna datoteka s nastavkom .htm (html). Za izradu jednostavne stranice na početku, dok tek trenirate, potrebna vam je samo bilježnica. Otvorite notepad i napišite tekst.

Svaki HTML element je oznaka okružena zagradama. Svaka datoteka, html stranica počinje oznakom i završava oznakom.

Ova oznaka jednostavno pokazuje pregledniku (ovo je program u kojem pregledavate internetske stranice) da je ovaj dokument HTML označni dokument.

Oznaka označava početak html dokumenta, a završna oznaka kraj html dokumenta.

Unutar ovih oznaka postoji nekoliko drugih važnih oznaka. Odmah iza oznake nalaze se oznake koje označavaju naslov i tijelo stranice.

Moja prva HTML stranica

Oznaka znači naslov naslova prozora kada se ova stranica prikazuje.
Sada možete stvoriti novi tekstualni dokument u Notepadu, kopirati gore prikazani tekst i spremiti ga kao Page1.html te pokrenuti u pregledniku, vidjet ćete naziv stranice u naslovnoj traci prozora preglednika i prazna stranica, jer Ne prikazujemo ništa u tijelu stranice u oznakama.

Dakle, gornji tekst će za nas biti osnovni kostur svake web stranice.

Uparene i neuparene oznake!

, , Ovo su samo uparene oznake - one oznake koje dolaze kao par: oznaka i njezino zatvaranje, završna oznaka sa simbolom /. Za uparene oznake, vrijednost sadržana između početka oznake i njenog kraja je radnja oznake. Radnja će se nastaviti sve dok se ne pronađe oznaka sa simbolom /.

Neuparene oznake – nemaju završnu oznaku. U nastavku ćemo dati primjere takvih oznaka.

— Naslov html stranice koji uključuje ključne riječi za tražilice, razne skripte itd.

— Tijelo samog html dokumenta.

Neuparena oznaka.

Napomena: U većini slučajeva, kada se sada izrađuju web stranice, koriste se gotove rutine, dodaci itd. – za bržu izradu stranica, ali za primjenu i korištenje takvih rutina i predložaka i dalje je potrebno minimalno poznavanje podataka o sesiji.

HTML element je osnovna strukturna jedinica web stranice, napisana u HTML-u.

Uparene i pojedinačne HTML oznake

Sintaksa HTML elemenata koji se sastoje od uparenih oznaka je:

Element počinje uvodnom oznakom.
Element završava završnom oznakom.
Sadržaj elementa je sve između uvodne i završne oznake. Sadržaj može biti tekst i/ili drugi HTML elementi.

Napomena: ne zaboravite staviti "/" u završnu oznaku, on govori pregledniku da je vaš element završio i da je ono što dolazi nakon njega drugi element. Ako ne stavite znak "/" u završnu oznaku, preglednik će ga zamijeniti za novi element ugniježđen unutar prethodnog, za koji preglednik misli da još uvijek nije zatvoren.

Sintaksa za HTML elemente koji se sastoje od pojedinačnih oznaka je:

Element se sastoji samo od otvarajuće oznake.

Elementi koji se sastoje od pojedinačnih oznaka nazivaju se praznima. U HTML-u postoji ukupno 16 pojedinačnih oznaka:

Ugniježđeni elementi

HTML elementi koji se sastoje od uparenih oznaka mogu sadržavati bilo koje druge elemente ili sami mogu biti ugniježđeni unutar drugih elemenata, a dubina ugniježđivanja elemenata nije ograničena.

Sljedeći primjer sastoji se od tri elementa, od kojih su dva ugniježđena:

Moj prvi paragraf

Kada je jedan element ugniježđen unutar drugog, morate osigurati da ugniježđeni element počinje i završava unutar istog elementa. Tako je, na primjer, sljedeći kod netočan:

Ovo je vrlo

Zanimljiv

Ovdje element izlazi izvan granica elementa

Primjer s ispravnim ugniježđenjem:

Jako je zanimljivo

Ovdje je element ispravno ugniježđen - potpuno je unutar elementa

Znakovi razmaka

Preglednik zanemaruje razmake u HTML kodu, tako da ih možete koristiti u svoju korist kako bi vaš kod bio čitljiviji. Znakovi razmaka uključuju tabulatore, prijelome redaka i redoviti prostori, mogu se koristiti u bilo kojoj količini. Primjer koda koji koristi razmak:

Naslov Moj prvi naslov

Moj prvi paragraf

Primjer koda mogao bi se napisati bez korištenja razmaka, ali bi takav kod bio manje čitljiv:

Naslov Moj prvi naslov

Moj prvi paragraf

Kako kod HTML dokumenta s vremenom postaje sve veći i složeniji, vidjet ćete da korištenje razmaka zapravo poboljšava čitljivost koda.