Struktura HTML dokumenta: glavne oznake, primjer

HTML je jezik označavanja. Mnogi ga ljudi smatraju programiranjem, ali to nije. U HTML-u nema nikakvih varijabli, izračuni, polja ili drugi elementi prisutni na bilo kojem programskom jeziku.

Pomoću HTML-a programer može stvoriti samo izgled web mjesta. Važno je shvatiti da nema mjesta bez označavanja. HTML je baza za izradu web stranica. Ostatak funkcionalnosti dodaje se različitim programskim jezicima.

Izrada HTML dokumenta

U svakom uređivaču možete stvoriti jednostavnu web stranicu. Čak će i "Notepad" učiniti. Preporuča se razvojnom programeru novaka da koristi druge urednike koji imaju funkcije automatske zamjene i druge upute. Zahvaljujući tome možete izraditi konfekcijske tablice, veze, slike i druge elemente. I u "Notepad" svako slovo mora biti ručno napisano.

U pravilu, "Notepad" se koristi samo u slučajevima gdje nema drugih alata pri ruci. Prvo, tekstualni dokument je stvoren, a zatim spremljen u HTML formatu. Sve stranice na web mjestu moraju imati HTML proširenje.

HTML je hijerarhijski. To jest, postoji posebna struktura za html dokument. Što je to? Razmotrimo ispod za jasnoću.

Struktura HTML dokumenta. primjer

Struktura je uvijek ista. Ako želite promijeniti nešto, preglednik neće moći obraditi. Kao rezultat toga, nećete dobiti ono što ste namjeravali.

Gornja slika prikazuje strukturu bilo koje HTML datoteke. Prva stavka označava vrstu datoteke. Ova je oznaka navedena jednom. Ako koristite posebne urednike, cjelokupna će struktura biti automatski kreirana. Morat ćete prilagoditi zadane vrijednosti.

Struktura HTML dokumenta je glavna oznaka:

Od ove tri oznake kostur je cijelog web mjesta. Obratite pozornost na sliku. Sve te oznake imaju oznaku za zatvaranje s znakom "/". Ako pišete rukom, naviknuli na stavljanje obje oznake odjednom - otvaranje i zatvaranje.

Iznad je rečeno da stranice stranica imaju proširenje .html. To jest, ako izradite tekstualni dokument, ali istovremeno napišete ispravni kôd, preglednik će vam i dalje prikazivati ​​samo tekst. Neće biti konverzije koda.

Odjeljak glave

Na slici ispod stavka 3 naznačena je glava. Ovaj odjeljak označava informacije o usluzi. Na primjer, možete odrediti kodiranje (stavka 4) i naslov stranice (korak 5).

Naslov bi uvijek trebao biti. Bez nje, nijedna tražilica ne može odrediti naziv sadržaja (teksta) na web stranici. A ovo je loše za promociju web stranica. Štoviše, preglednik na vrhu ne navodi naslov stranice. To je neugodnost korisniku.

Struktura HTML dokumenta je takva da naslov

Pored toga, odjeljak glave određuje informacije za povezivanje skripti, datoteka stila, uputa za tražilice ili bilo koje druge podatke koje korisnik ne bi trebao vidjeti, ali su važni za preglednika ili programere.

Povezivanje stilova

Struktura html dokumenta omogućuje vam povezivanje stilova na različite načine. Štoviše, oni se mogu pisati pojedinačno u svakom elementu. No, ova metoda nije preporučljiva jer kôd postaje prevelik i neugodan.

Tražilice preporučuju da se svi stilovi prikazuju u zasebnoj datoteci, au elementima jednostavno upotrebljavaju različite klase.

Datoteka je spojena na sljedeći način.

Atribut href određuje put do datoteke. Ako postoji pogreška na putu, stilovi se neće učitati. Također, atribut tipa je obavezan, što znači da je riječ o css datoteci.

Druga je mogućnost definirati stilove izravno u glavnom odjeljku.

Ali ta se opcija također ne preporučuje. Te su metode vrlo različite jer se css datoteka može koristiti za cijelu stranicu, a sve promjene u njemu odmah će se primijeniti na sve stranice. A ako koristite metodu prikazanu na gornjoj slici, morat ćete izmijeniti sve postojeće stranice na web mjestu.

Ako klasa koju stvarate koristit će se samo na jednoj stranici, ta vam opcija odgovara.

Povezivanje skripti

Skripte su povezane kako slijedi.

Ovdje su potrebna dva atributa: tip i src. U prvom, označite da je riječ o jаvascript datoteci, a drugo mjesto gdje se datoteka nalazi. Ako napravite pogrešku, ništa neće raditi.

Tijelo sekcije

Struktura HTML dokumenta je takva da je potrebno staviti sadržaj koji će biti vidljiv korisniku samo u dijelu tijela. Naziv oznake govori sam za sebe.

To određuje sve glavne kôd stranice, što može sadržavati neograničen broj elemenata. No što je dulji kod, to će se više obraditi.

Razmislite o osnovnim oznakama koje možete koristiti u području tijela. Nema toliko temeljnih. Sve ostalo ćete saznati kako vaše znanje i praksa raste.

Osnovne oznake

Struktura html dokumenta zahtijeva obvezno redoslijed pisanja elemenata. Oznake bi uvijek trebale biti okružene zagradama oko rubova <>. Bez toga preglednik ne razumije da je riječ o oznaci. Nakon zagrade u zaglavlju, uvijek slijedi naziv elementa (oznaka). Ako dopustite razmak između < i ime, preglednik će ovo uzeti u obzir kao tekst.

Razmislite o primjeru oznake slike. Imajte na umu da ova oznaka ne zatvara, za razliku od veza, odlomaka i mnogih drugih.

Redoslijed atributa nije bitan. No njihovo je pisanje vrlo važno. Uvijek dolazi naziv atributa, a zatim jednak znak, a zatim vrijednost atributa napisan je u navodnicima. Vrijednost može biti drugačija - digitalna ili tekstualna.

Atribut src u svim oznakama označava put datoteke koju želite učitati. Alt atribut u svim elementima ukazuje na kratak opis. U ovom slučaju, učitava se slika ptice.jpg s opisom fotografije ptica.

Osim toga, u tag img, možete odrediti dimenzije, samo širinu ili visinu, naslov, poravnanje, klasu stila ili okvir.

Razmotrite druge glavne oznake koje su navedene u dijelu tijela.

stolovi

Kako to sve mogu zamisliti u glavi

Početni programeri ne mogu uvijek odmah zamisliti da je sve ovo spekulativno. Pogledajte nekoliko primjera strukture web stranica, a zatim ćete postati jasni.

Postoji takva mogućnost:

I ovo:

Upotreba stilova

Kao što je spomenuto u početku, možete povezati stilove s obje datoteke i odrediti u glavnom odjeljku. U svakom slučaju, opis klasa je sasvim isti.

Na primjer, možete odrediti stil zaglavlja. Zatim morate napisati h1 (budući da će stil biti za zaglavlje druge razine), otvoriti zagrade i napisati koja će se svojstva nalaziti u ovom elementu. Ako znate osnovni engleski, onda ne bi trebalo biti nikakvih problema. Sve se svojstva zovu ljudski jezik.

Ako želite odrediti ovaj stil za nekoliko elemenata odjednom, zapisati ih odvojenima zarezima.

Rezultat je crvena zaglavlja.

Gore navedene metode prikladne su za izradu standardnih elemenata. Ali možete stvoriti i vlastite klase. Njihovo ime bi trebalo početi s točkom, a zatim se upisuje bilo koji proizvoljan naziv.

Morate ih koristiti ovako.

Napomena: ako ste naveli postavke stila za standardni element, ne morate upisati riječ klasa. Stil će biti primijenjen prema zadanim postavkama. U atributu klase možete odrediti samo one stilove koje započinjete s razdobljem.