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.

Korištenje HTML-a programer može stvoriti samoizgled stranice. 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

Izradite jednostavnu stranicu web stranice u bilo kojemurednik. Č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 onimaslučajeve u kojima nema drugih načina 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.

Slika gore pokazuje strukturu bilo kojegHTML-datoteka. 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:

<Html>
<Head>
<Body>

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.

Gore je rečeno da stranice web stranica imajuproš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 je naslov <title> naveden samo u glavnom odjeljku. Ako je oznaka <title> navedena u dijelu tijela ili nakon njega, rukovatelj ne obraća pozornost na to.

Pored toga, određuje se glavainformacije za povezivanje skripti, stilske datoteke, upute za tražilice ili bilo koje druge podatke koje korisnik ne treba vidjeti, ali su važni za preglednika ili programere.

Povezivanje stilova

Struktura html dokumenta omogućuje vam povezivanjestilova 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, a elementi jednostavno koriste 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 smo naveli da je riječ o JavaScript 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 obvezuredoslijed pisanja elemenata. Oznake bi uvijek trebale biti okružene zagradama <>. 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 imena, 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,koje morate učitati. Alt atribut u svim elementima ukazuje na kratak opis. U ovom slučaju, učitava se slika ptice.jpg s opisom fotografije ptice.

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

Razmotrite druge glavne oznake koje su navedene u dijelu tijela.

oznaka	imenovanje
<a> ... </a>	reference
<Img>	slika
<p> ... </ p>	stav
The <br>	Prijenos teksta u novu liniju
<strong> ... </ strong>	Podebljani tekst
<i> ... </ i>	kurzivan
<s> ... </ s>	Precizni tekst
<u> ... </ u>	Podcrtani tekst
<ol> </ ol>, <ul> </ ul>	arena
<tablica> </ table>	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 onda ćete sigurno 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.

</ p>

Ocjenjivanje: