HTML je jezik za označavanje web stranica. Mnogi to smatraju programiranjem, ali nije. HTML ne sadrži niti jednu varijablu, izračune, nizove i druge elemente koji se nalaze u bilo kojem programskom jeziku.

Pomoću HTML-a programer može stvoriti samo izgled stranice. Važno je razumjeti da nijedna stranica ne postoji bez označavanja. HTML je osnova za izradu web stranica. Sve ostale funkcionalnosti dodaju različiti programski jezici.

Izrada html dokumenta

Možete stvoriti jednostavnu web stranicu u bilo kojem uređivaču. Čak će i Notepad poslužiti. Za programera početnika preporučuje se korištenje drugih urednika koji imaju značajke automatske zamjene i druge savjete. Zahvaljujući tome možete izraditi gotove tablice, veze, slike i druge elemente. A u Notepadu se svako slovo mora napisati ručno.

Notepad se u pravilu koristi samo kada nema drugih alata pri ruci. Prvo se kreira tekstualni dokument, a zatim se sprema u html formatu. Sve stranice stranice moraju imati html ekstenziju.

html jezik je hijerarhijski. Odnosno, postoji posebna struktura html dokumenta. Što je? Razmotrite dolje radi jasnoće.

Struktura html dokumenta. Primjer

Struktura je uvijek ista. Ako želite nešto promijeniti, preglednik to 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 oznaka se specificira jednom. Ako koristite posebne uređivače, cijela će se struktura automatski izraditi. Morat ćete podesiti zadane vrijednosti.

Struktura html dokumenta - glavne oznake:

Ove tri oznake čine okvir cijele stranice. Obratite pažnju na crtež. Sve te oznake imaju završnu oznaku sa znakom “/”. Ako pišete rukom, naviknite se stavljati obje oznake odjednom - početnu i zatvornu.

Gore je rečeno da stranice web mjesta imaju ekstenziju .html. To jest, ako izradite tekstualni dokument, ali u isto vrijeme napišete ispravan kod, preglednik će vam i dalje prikazivati ​​samo tekst. Neće biti pretvorbe koda.

odjeljak glave

Na slici pod točkom 3. označen je dio glave. Ovaj odjeljak sadrži servisne informacije. Na primjer, možete odrediti kodiranje (točka 4) i naslov stranice (točka 5).

Naslov uvijek treba biti. Bez njega niti jedna tražilica neće moći odrediti naziv sadržaja (teksta) na web stranici. A to je loše za promociju web stranice. Štoviše, preglednik neće prikazati naslov stranice na vrhu. Ovo predstavlja neugodnost za korisnika.

Struktura html dokumenta je takva da je naznačen samo u dijelu head. Ako je oznaka

Preglednici prikazuju sadržaj elementa

To je sve! Početak je napravljen - dobili ste izvrstan obradak. Ovako će izgledati gotova struktura dokumenta s frazom "Hello, world!" prikazanom u prozoru preglednika:

Pozdrav svijete!

Pozdrav dragi čitatelji bloga! Danas ćemo govoriti o strukturiranju teksta na web stranicama, o značajkama njegovog prikaza i razmotriti kako razbiti tekst u zasebne logičke fragmente: naslovi, paragrafi, popisi.

Za rad s tekstom u html-u postoji mnogo oznaka, ali prvo moramo razgovarati o nekim značajkama prikaza teksta u pregledniku. Prvo, bilo koji broj uzastopnih razmaka, kartica i prijeloma redaka prikazuje se kao jedan razmak. Oni. pozicioniranje teksta pomoću razmaka i kartica neće raditi.

Na primjer, ovi redovi na web stranici bit će prikazani isto unatoč različitom pravopisu:

Dobrodošli na našu web stranicu!

Dobro
dobrodošli na naše stranice!

Dobrodošli
našima
web stranica!

Izuzetak je označiti

, unutar kojeg su svi razmaci i crtice prikazani kakvi jesu.

Drugo, tekst zauzima širinu prozora preglednika.  Ako je dugačak redak teksta širi od prozora preglednika, prijelomi redaka automatski će se umetnuti na razmake ili crtice.  Ako u retku nema razmaka ili crtica, a redak ne odgovara širini prozora, tada će se u pregledniku pojaviti vodoravna traka za pomicanje.
Sada prijeđimo na razmatranje strukturnih elemenata teksta u html označavanju.
Odlomci u HTML-u
Obično su blokovi teksta odvojeni odlomcima (paragrafima).  To olakšava čitanje velikih dijelova teksta.  HTML jezik za stvaranje odlomka sadrži par označiti 

.  Sintaksa za stvaranje paragrafa je sljedeća:
Ovo je prvi paragraf.


A ovo je drugi paragraf.

Odlomci na html stranici odvojeni su malim uvlačenjem od prethodnih i sljedećih elemenata.  Označiti 
Također je blok element.  Što su blok elementi, napisao sam u članku "".  Da vas podsjetim na to blok elementi karakteriziraju to što zauzimaju cijelu dostupnu širinu html stranice, visinu elementa određuje njegov sadržaj i uvijek počinje u novom retku.
Razmotrite primjer korištenja odlomaka na web stranici.  Otvorimo uređivač teksta, utipkajte HTML kod i spremite ga s ekstenzijom html:














Web stranica o automobilima.




Klasifikacija automobila


Putnik;


Teret;


terenac;


Lud;


Pokupiti;


Sportski;


Utrke.





Kada otvorite ovu datoteku, vidjet ćete nešto poput ovoga:
Za sada naša stranica sadrži samo paragrafe.
Za poravnavanje teksta u oznaci odlomka 
Podržava atribut uskladiti. Može uzeti jednu od četiri vrijednosti:
lijevo- poravnanje teksta ulijevo;
centar- poravnanje teksta u sredini;
pravo— poravnanje teksta na desnom rubu;
opravdati- poravnanje po širini, tj.  poravnanje teksta istovremeno na desnom i lijevom rubu.  Da bi to učinio, preglednik postavlja razmake između riječi.
Prema zadanim postavkama, atribut poravnanja postavljen je na lijevo.  Primjer korištenja atributa poravnanja:

 Ovaj tekst u odlomku na html stranici bit će poravnat lijevo!


 Ovaj tekst u pregledniku bit će prikazan u središtu stranice!


 Ovaj će tekst biti poravnat udesno!


 I preglednik će ovaj veliki dio teksta poravnati po širini, tj.  i lijevo i desno u isto vrijeme!  Kako bi to učinio, web preglednik će umetnuti dodatne razmake između riječi i odlomak će izgledati uredno i lako čitljiv!

I ovako će se prikazati u pregledniku:

Naslovi u HTML-u
Naslovi se koriste za označavanje dijelova teksta na web stranici.  Postoji šest razina naslova u html-u.  Najviša razina je razina 1 - oznaka 
, a najniža je razina 6, oznaka 
. oznake 
 — 
 su blok elementi stranice.  Sadržaj naslova prve razine prikazuje se najvećim podebljanim fontom, a naslovi zadnje šeste razine najmanjim.

Sintaksa za stvaranje zaglavlja je:














 Naslov prve razine 



 Naslov druge razine 



 Naslov treće razine 



 Naslov četvrte razine 



 Naslov razine 5 



 Naslov razine 6 






Proizlaziti:

Naslovi također igraju važnu ulogu u promociji web mjesta, budući da tražilice dodaju ocjenu tekstu ako se nalazi unutar oznake naslova.
Dodajmo naslove našoj stranici:
Web stranica o automobilima.


Dobrodošli na našu stranicu o automobilima.  Ovdje ćete pronaći mnoge zanimljive i korisne članke o automobilima, njihovim tehničkim karakteristikama i značajkama.


U znanstvenom smislu, automobil je:


Mehanički motorizirano cestovno vozilo bez gusjenica s najmanje 4 kotača.


Klasifikacija automobila


Automobili su sljedećih vrsta:


Putnik;


Teret;


terenac;


Lud;


Pokupiti;


Sportski;


Utrke.

I vidimo da na našoj stranici, osim odlomaka, postoje naslovi istaknuti velikim podebljanim slovima:

oznake 
-
oznaka sviđanja 
Koristite atribut align za poravnavanje teksta.  Kod korištenja ovog atributa sve je isto kao i kod oznake 
Numerirani i označeni popisi u HTML-u
Popis se koristi za formiranje numeriranog ili nenumeriranog popisa bilo kojih fraza ili značenja.  Poziva se popis s numeriranim stavkama numeriran, a s nenumeriranim točkama - označeno.
Na popisima s grafičkim oznakama stavke su označene oznakama koje se nalaze lijevo od stavki popisa.  Web preglednik prikazuje popis uvučen s lijeve strane i samostalno raspoređuje potrebne oznake ili numeriranje.  Popisi i njihove stavke su blok elementi web stranice.
Svaki popis u HTML-u skup je elemenata od kojih je svaki smješten unutar oznake 
.  Tada se svi elementi postavljaju unutar oznake 
, ako trebate popis s grafičkim oznakama ili unutar oznake 
ako želite sređenu listu.












Popis s grafičkim oznakama: 



prva točka.


druga točka.


treća točka.
 

Numerirani popis: 



prva stavka na numeriranom popisu.


druga stavka na numeriranom popisu.


treća stavka na numeriranom popisu.







I izgledaju otprilike ovako:

Popisi s grafičkim oznakama mogu koristiti različite vrste grafičkih oznaka.  Za definiranje vrste markera u oznaci 
dodao atribut tipa ako želimo postaviti vrstu markera za sve elemente liste ili dodati isti atribut oznaci 
ako trebate postaviti vrstu markera za određeni element.  Atribut tipa može uzeti sljedeće vrijednosti:

disk - ispunjeni krug;
krug - krug;
kvadrat – trg.
Zadani atribut vrste je disk.  Primjer upotrebe:


Stavak 1


Točka 2


Točka 3






Stavak 1


Točka 2


Točka 3






Stavak 1


Točka 2


Točka 3



Prikaz u pregledniku:

Numerirani popis također podržava atribut tipa koji se može koristiti za određivanje sljedećih tipova markera:
A - velika latinična slova;
a - mala latinična slova;
I - veliki rimski brojevi;
i - mala slova rimskih brojeva;
1 - arapski brojevi.
Prema zadanim postavkama, na uređenom popisu, atribut tipa postavlja grafičke oznake na arapske brojeve.  Osim atributa tipa, podržava uređeni popis početni atribut, koji određuje broj od kojeg će popis započeti.  U HTML5 specifikaciji za numerirani popis, također je bilo obrnuti atribut, koji obrće numeraciju .
 Oni.  umjesto 1, 2, 3, popis će biti označen brojevima 3, 2, 1. Ali obrnuti atribut još uvijek podržava vrlo mali broj preglednika.
Popisi se mogu postaviti jedan u drugi, stvarajući ugniježđene popise. ugniježđeni popis postavljeni unutar elemenata 
vanjski popis:



prva točka.


druga točka. 



prva stavka u ugniježđenom popisu.


druga stavka u ugniježđenom popisu.


treća stavka u ugniježđenoj listi.






treća točka.



I u pregledniku:

HTML ima treću vrstu popisa, a to je popis pojmova i njihovih definicija.  Ovaj popis specificiran je pomoću oznake para 
.  Unutar njega se nalaze parovi "pojam - definicija".  Pojmovi su zatvoreni u oznaku para 
, a definicije su u oznaci para 
:



Pojam 1


Definicija 1


termin 2


Definicija 2



Prikaz u pregledniku:

Naša web stranica ima odjeljak o klasifikaciji automobila.  Napravimo ovu klasifikaciju pomoću popisa s grafičkim oznakama:


Putnik;


Teret;


terenac;


Lud;


Pokupiti;


Sportski;


Utrke.



I da vidimo rezultat:

horizontalne linije
Za odvajanje ili dodatno isticanje blokova teksta u HTML-u postoji jedan HR oznaka - vodoravna linija.  Ovako to izgleda u html kodu:
Prvi paragraf




Drugi paragraf

A evo kako se prikazuje:

Vodoravna linija HTML-a proteže se vodoravno do pune širine web-stranice i debljine je jednog ili dva piksela, ovisno o pregledniku koji se koristi.
Možete koristiti atribute za postavljanje izgleda vodoravne linije.  Označiti 
podržava sljedeće atribute:

align - određuje poravnanje linije;
boja - postavlja boju linije;
veličina - postavlja debljinu linije u pikselima;
širina - postavlja širinu linije u pikselima.
Umetnimo vodoravnu liniju na našu WEB stranicu.  Neka bude zelena, debljine 1 px i širine 320 px:
Web stranica o automobilima.


Dobrodošli na našu stranicu o automobilima.  Ovdje ćete pronaći mnoge zanimljive i korisne članke o automobilima, njihovim tehničkim karakteristikama i značajkama.


U znanstvenom smislu, automobil je:


Mehanički motorizirano cestovno vozilo bez gusjenica s najmanje 4 kotača.




Klasifikacija automobila


Automobili su sljedećih vrsta:




Putnik;


Teret;


terenac;


Lud;


Pokupiti;


Sportski;


Utrke.



Rezultat će biti nešto poput ovoga:
 tekstualnu datoteku koja ima posebne oznake zvane oznake, koje preglednik naknadno prepoznaje i koristi za prikaz sadržaja datoteke na zaslonu računala.  Pomoću ovih oznaka možete označiti naslove dokumenata, promijeniti boju, veličinu i stil slova, umetnuti grafike i tablice.  Ali glavna prednost hiperteksta u odnosu na obični tekst je mogućnost dodavanja sadržaja dokumenta hiperveze- posebne konstrukcije HTML jezika, koje vam omogućuju prebacivanje na pregled drugog dokumenta klikom miša. 
Postoje dva načina za stvaranje hipertekstualnih dokumenata.  Možete koristiti jedan od WYSIWYG HTML uređivača (primjerice, Netscape Composer, osnove rada s kojima se govori u odjeljku "Obrada teksta na računalu", Microsoft FrontPage, HotDog itd.), koji ne zahtijevaju posebna znanja o unutarnjoj strukturi kreiranog dokumenta.  Ova metoda vam omogućuje stvaranje dokumenata za WWW bez znanja HTML jezika.  HTML uređivači automatiziraju stvaranje hipertekstualnih dokumenata i oslobađaju rutinskog rada.  Međutim, njihove su mogućnosti ograničene, uvelike povećavaju veličinu rezultirajuće datoteke, a rezultat dobiven uz njihovu pomoć ne ispunjava uvijek očekivanja programera.  Ali, naravno, ova metoda je nezamjenjiva za početnike u pripremi hipertekstualnih dokumenata.
Alternativa je stvoriti i označiti dokument s uobičajenim uređivačem običnog teksta (kao što je emacs ili NotePad).  Ovom se metodom HTML naredbe ručno umeću u tekst.  Izradom dokumenata na ovaj način točno znate što radite.
Kao što je već navedeno, HTML dokument sadrži simboličke informacije.  Jedan njegov dio je stvarni tekst, odnosno podaci koji čine sadržaj dokumenta.  ostalo - oznake(oznake za označavanje), također se nazivaju zastavice za označavanje, posebne su HTML konstrukcije koje se koriste za označavanje dokumenta i upravljanje njegovim prikazom.  Oznake HTML jezika određuju oblik u kojem će tekst biti predstavljen, koje će njegove komponente igrati ulogu hipertekstualnih veza, koje grafičke ili multimedijske objekte treba uključiti u dokument.  Grafičke i zvučne informacije uključene u HTML dokument pohranjuju se u zasebne datoteke.  HTML preglednici (preglednici) tumače zastavice za označavanje i na odgovarajući način raspoređuju tekst i grafiku na zaslonu.  Za datoteke koje sadrže HTML dokumente prihvaćaju se ekstenzije .htm ili .htm.  html.
Prilikom pisanja oznaka ne razlikuju se velika i mala slova.  U većini slučajeva, oznake se koriste u paru.  Par se sastoji od početnih (početna oznaka) i završnih (završna oznaka) oznaka.  Sintaksa otvorene oznake:
<имя_тега [атрибуты]>
Zagrade koje se koriste u opisu sintakse znače da se element može izostaviti.  Naziv završne oznake razlikuje se od naziva početne oznake samo po tome što mu prethodi kosa crta:

Atributi oznake pišu se u sljedećem formatu:
ime[="vrijednost"]
Navodnici prilikom navođenja vrijednosti argumenta nisu obavezni i mogu se izostaviti.  Za neke atribute vrijednost možda nije navedena.  Završna oznaka nema atribute.
Radnja bilo koje uparene oznake počinje na mjestu gdje se srela početna oznaka i završava kada se naiđe na odgovarajuću završnu oznaku.  Često se poziva par početnih i završnih oznaka spremnik, te dio teksta obrubljen početnom i završnom oznakom, - element.
Niz znakova koji čine tekst može se sastojati od razmaka, tabulatora, znakova za novi red, znakova povrat prtljage, slova, interpunkcija, brojevi i posebni znakovi (kao što su +, #, $, @), osim sljedeća četiri znaka koji imaju posebna značenja u HTML-u:< (меньше), >(veće od), & (ampersand) i " (dvostruki navodnik). Ako želite uključiti bilo koji od ovih znakova u svoj tekst, morate ga kodirati posebnim nizom znakova.
Neprekidni razmak također se može pripisati posebnim znakovima.  Korištenje ovog znaka jedan je od načina za povećanje razmaka između nekih riječi u tekstu.  Obični razmaci se ne mogu koristiti u te svrhe, budući da grupu uzastopnih razmaka preglednik tumači kao jedan.
Svaki od ovih rezerviranih nizova počinje znakom & (&) i završava točkom i zarezom (;).
Prilikom izrade web stranice, prvo što treba zamisliti je kako je web stranica oblikovana.  Ovo je neka vrsta "temelja" u izgradnji stranica.  Stoga, prije nego što se upustite u proučavanje složenijih tehnologija za izradu web stranica, preporuča se imati barem osnovno znanje o HTML-u.  U ovoj lekciji ćemo se upoznati HTML, analizirajmo Struktura HTML dokumenta a na praktičnim primjerima ćemo učvrstiti stečeno znanje.
Što je HTML?
HTML označava HyperText Markup Language.  Ovaj jezik je odgovoran za to kako će hipertekst biti prikazan na stranicama web mjesta.  Sada shvatimo što je hipertekst?  Nije tajna da jedna web stranica može sadržavati puno različitih vrsta informacija, bilo da se radi o tekstu, nekim tablicama, grafikonima, videima, audio zapisima itd.  Dakle, sve te informacije možemo nazvati jednom riječju – hipertekst.
Imajte na umu da je HTML označni jezik, a ne programski jezik.  U ovom jeziku nema logičkih funkcija i nemoguće je na njemu izvoditi bilo kakve matematičke izračune.  HTML stranice imaju proširenje .html ili .htm i obrađuju preglednici - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera itd.
Sada da vidimo kako preglednik razumije što i kako prikazati na web stranici?  Vrlo je jednostavno.  Jezik za označavanje hiperteksta HTML ima ugrađene naredbe koje se nazivaju oznake.  Na njima se vodi preglednik.
Struktura HTML dokumenta
Svaki HTML dokument (web stranica) mora imati određenu strukturu.  Time ćete izbjeći moguće probleme prilikom otvaranja stranica u preglednicima.  Kao primjer, uzmimo stranicu koja sadrži sljedeći HTML kod:

 







...



Pogledajmo što je uključeno u ovu strukturu:
1. Prvo što ide u HTML dokument je verzija (prvi redak).  Za ispravan rad, ovaj redak treba biti naveden prilikom postavljanja web stranice.

3. Zatim dolazi područje za vrh stranice (zaglavlje).  Tome služi oznaka. .  U zaglavlju označavamo naziv naše stranice tako da naslov stranice stavimo između oznaka .  Zatim se navodi HTML kodiranje dokumenta (peti redak).  Ovo se radi kako bi se ispravno prikazala ćirilica.  Zatvaranje područja zaglavlja oznakom.
4. Meta oznaka "description" - sažetak stranice, dizajniran za tražilice.  Ova oznaka je važna za optimizaciju tražilice i mora se ispuniti.
5. Meta-tag "keywords" - ključne riječi koje se mogu pronaći na stranici.  Ova oznaka također je namijenjena tražilicama.  Ova oznaka se trenutno rijetko koristi.
6. Tijelo stranice se otvara s oznakom i zatvara se, odnosno, oznakom.  Tijelo web stranice obično sadrži glavni sadržaj - tekst, video, audio i druge informacije.
Tako smo odgovorili na pitanje što je HTML i proučili strukturu HTML dokumenta.  Informacije dobivene u ovoj lekciji su osnovni pojmovi, bez njih ne možete.  O složenijim stvarima govorit ćemo u drugim lekcijama.