Posljednje ažurirano: 08.04.2016

Elementi su građevni blokovi html5 dokumenta. Da bismo kreirali dokument, potrebno je da kreiramo jednostavnu tekstualnu datoteku i da navedemo ekstenziju datoteke * .html

Kreirajmo tekstualnu datoteku, nazovimo je indeksom i promijenimo njenu ekstenziju u .html.

Zatim ćemo otvoriti ovu datoteku u bilo kojem uređivaču teksta, na primjer, u Notepad ++. Dodajmo sljedeći tekst u fajl:

Da bismo kreirali HTML5 dokument, prvo su nam potrebna dva elementa: DOCTYPE i html. Element doctype ili deklaracija vrste dokumenta govori web pretraživaču tip dokumenta.označava da je dokument html dokument i da se koristi html5, a ne html4 ili neka druga verzija jezika za označavanje.

A html element između njegovih oznaka za otvaranje i zatvaranje sadrži cijeli sadržaj dokumenta.

Unutar html elementa možemo postaviti još dva elementa: glavu i tijelo. Element head sadrži metapodatke web stranice - naslov web stranice, tip kodiranja itd., kao i veze do vanjskih resursa - stilove, skripte, ako ih ima. Sam element body definira sadržaj html stranice.

Sada promijenimo sadržaj datoteke index.html na sljedeći način:

Element glave definira dva elementa:

element naslova predstavlja naslov stranice

meta element definira meta informacije za stranicu. Za ispravan prikaz znakova, poželjno je navesti kodiranje. U ovom slučaju, koristeći charset = "utf-8" atribut, specificiramo utf-8 kodiranje.

Unutar elementa tijela koristi se samo jedan element, div, koji prikazuje blok. Sadržaj ovog bloka je jednostavan niz.

Pošto smo odabrali utf-8 kao kodiranje, pretraživač će prikazati web stranicu u ovom kodiranju. Međutim, tekst samog dokumenta također mora odgovarati odabranom utf-8 kodiranju. Po pravilu, različiti uređivači teksta imaju odgovarajuća podešavanja za podešavanje kodiranja. Na primjer, u Notepad ++ morate otići u meni Kodiranja i odabrati stavku Pretvorite u UTF-8 bez BOM-a:

Nakon toga, to će biti moguće vidjeti u statusnoj traci UTF-8 bez BOM da naznači da je ispravno kodiranje instalirano.

Sačuvajte i otvorite datoteku index.html u pretraživaču:

Tako smo kreirali prvi HTML5 dokument. Pošto smo naveli naslov "HTML5 dokument" u elementu naslova, to će imati kartica pretraživača.

Pošto je kodiranje utf-8, web pretraživač će ispravno prikazati ćirilične znakove.

I vidjet ćemo sav tekst definiran unutar elementa tijela u glavnom polju pretraživača.

Mislim da ste upoznati sa HTML-om i znate šta su oznake i kakvu ulogu imaju u HTML dokumentu. Ako nešto nije jasno, možete pogledati. U vezi sa meta tagom, zapamtite sledeće: prvo, svi meta tagovi su upisani, drugo, moraju se postaviti iza i treće, nisu upareni elementi i ne moraju se zatvarati.

Sada pogledajmo bliže ove meta oznake. Treba napomenuti da ovaj članak opisuje meta tagove po opadajućoj važnosti. Vjeruje se da prilikom kreiranja web lokacija redoslijed lokacije meta oznaka u HTML kodu stranice nije bitan, ali čak i ako je to tako, onda ih postavite istim redoslijedom kako su opisane u ovom članku. neće ništa izgubiti, a možda se igrate. Pa počnimo.

Opis

Ovo je veoma važan meta tag. Ono što je navedeno u atributu sadržaja bit će prikazano na stranici rezultata pretraživanja mnogih pretraživača. I stoga, ako se krajnjem korisniku ne sviđa opis, onda ga neće zanimati vaša stranica.

Ključne riječi

Važna meta oznaka. Iako njegova važnost u posljednje vrijeme opada, neki pretraživači i dalje izvlače informacije o vašoj web stranici iz ove oznake. Odaberite ključne riječi i fraze nakon sprovođenja odgovarajućeg istraživanja. To mogu biti provjere pretraživanja, posebne usluge pretraživača i uzimanje ključnih riječi sa posebnih lista koje se distribuiraju besplatno i neće ih biti teško pronaći. Prilikom pisanja ključnih riječi, glavna stvar je ne pretjerivati, u suprotnom, ako bude previše ponavljanja ključnih riječi i fraza, tražilice će to smatrati kao neželjenu pretragu i zabranit će vašu stranicu. Kada sastavljate ključne riječi, pokušajte ne prekoračiti ograničenje od 500-800 znakova.

Abstract

Postoje mnoga oprečna mišljenja o važnosti ove meta oznake i prikladnosti njene upotrebe. Alternativno, možete kopirati sadržaj oznake opisa tako što ćete ga malo izmijeniti.

Roboti

Veoma važan meta tag koji informiše robota pretraživača o tome kako da postupa sa ovom web stranicom i sa svim stranicama na koje postoje linkovi sa nje. Sljedeće direktive se koriste kao vrijednost u atributu sadržaja:

• index - indeksiraj datu web stranicu,
• follow - indeksiraj sve web stranice na koje postoje linkovi na ovoj stranici,
• sve - dvije glavne direktive u isto vrijeme,
• noindex - ne indeksirajte web stranicu,
• nofollow - nemojte pratiti linkove sa ove web stranice.

U ovom slučaju, možete navesti dvije direktive u isto vrijeme, odvajajući ih zarezom (na primjer, noindex, nofollow).

Predmet

Ova meta oznaka je namijenjena da specificira vrstu podataka predstavljenih na ovoj web stranici. U teoriji, na osnovu ovog opisa, robot pretraživača bi trebao postaviti vašu web stranicu u jednu ili drugu kategoriju. Nažalost, svaki pretraživač ima svoj razvijen sistem za klasifikaciju web stranica.

Tip stranice

Svrha ove meta oznake je potpuno ista kao i svrha prethodne meta oznake, tako da ima smisla uvesti iste termine ovdje.

Naslov i tema stranice


Obje ove meta oznake su slične, zbog čega su opisane u istom odjeljku. Ovo je prilično jasno iz sintakse ovih meta oznaka. Preporučujemo da kopirate tekst iz i stavite ga u atribut sadržaja.

Revisit

Ako se informacije na vašem sajtu često ažuriraju, onda vam je ova meta oznaka veoma važna. Obavještava robote tražilice nakon koliko dana trebaju ponovo indeksirati datu web stranicu. Postoji alternativni meta tag - revisit-after, koji je potpuno identičan ovom meta tag-u, ali se rjeđe koristi.

Možda su ovo sve glavne meta oznake koje vam omogućavaju da opišete web stranicu. Iako postoje mnogi drugi atributi i vrijednosti za meta oznaku, njihova svrha je izvan okvira ovog članka.

Laboratorijski rad br.1

“Kreiranje najjednostavnijeg HTML dokumenta. Formatiranje teksta"

svrha rada

Naučite strukturu html dokumenta, osnovne oznake za formatiranje teksta i koristite ih prilikom kreiranja web stranice.

Osnove kreiranja web stranica pomoću alata

Hypertext Markup Language HTML

Kreiranje jednostavnog dokumenta

Razvoj web stranica je baziran na HTML-u (HyperText Markup Language).

Glavna strukturna jedinica HTML jezika je oznaka (od engleskog Tag - deskriptor, marker). Oznaka je uvijek zatvorena između zagrada< >i izgleda ovako:

<ТЕГ атрибут 1=ЗНАЧЕНИЕ... атрибут N=ЗНАЧЕНИЕ>

Oznake mogu biti pojedinačne i kontejnerske. Kontejner je par: otvor<ТЕГ>i zatvaranje.

Oznaka otvaranja se koristi da ukaže programu pretraživača na početak objekta ili da postavi svojstva objekata smeštenih u kontejner. Završna oznaka se koristi za označavanje programa pretraživača o kraju objekta ili za završetak primjene svojstava navedenih u početnoj oznaci.

Atributi oznake postavljaju vrijednosti svojstava datog objekta ili objekata smještenih u kontejner.

HTML dokument počinje početnom oznakom i završava sa završnom oznakom... Između ovog para oznaka kontejnera nalaze se druga dva glavna dela HTML dokumenta: zaglavlje, umotano u kontejner ... i tijelo dokumenta u kontejneru ...(sadržaj stranice). U odjeljku opisa naslova možete odrediti naslov dokumenta, za to koristite oznaku (ime stranice).

Dakle, struktura jednostavnog HTML dokumenta izgleda ovako:

(vrh stranice)

(opis stranice, naslov)

(ime stranice)

(zatvorena oznaka opisa zaglavlja)

(sadržaj stranice)

tekst

(oznaka opisa zatvorene stranice)

(kraj stranice)

Formatiranje teksta

- oznaka koja definira granice tijela dokumenta.

Atributi:

BGCOLOR - definira boju pozadine dokumenta. Podrazumevano je "Belo" (#FFFFFF).

TEKST - postavlja boju teksta za cijelu stranicu. Boja je navedena u RGB formatu ili konstante crvena, zelena, plava itd. Podrazumevano je "crno" (# 000000).

Tabela 1 navodi nazive boja definisanih u HTML 4 standardu i njihove odgovarajuće RGB kodove. Imajte na umu da mnogi moderni pretraživači prevazilaze standarde i podržavaju mnogo više naziva boja.

Tabela 1

Atributi:

ALIGN - poravnanje. Moguće vrijednosti: DESNO-desno-poravnajte tekst; CENTAR - centriran; LIJEVO - poravnato lijevo; JUSTIFY - Opravdano.

<Н1> …<Н6> - naslovi različitih nivoa (od prvog do šestog).

Naslov drugog nivoa, centriran.

<НR>- horizontalna linija

Atributi:

ALIGN - poravnanje.

WIDTH - dužina linije kao procenat prozora pretraživača ili piksela

VELIČINA - širina linije kao procenat prozora pretraživača ili piksela

BOJA - boja linije.

---

Dodatne opcije formatiranja:

Bold text;

- kurziv tekst;

- efekat podvlačenja;

- efekat precrtavanja.

- koristi se za označavanje stila fonta u dokumentu.

Atributi:

VELIČINA - veličina fonta.

COLOR - boja fonta.

LICE - font.

<Р> Crvena linija je upisana u veličinama ARIAL 4

Kreirajte liste

Postoje četiri glavne vrste lista u HTML dokumentu:

• numerisan
• označeno
• ugniježđene liste
• lista definicija

Dio teksta koji predstavlja listu je zatvoren u tagovima:

Naručena lista;

Neuređena lista;

< LI>…. ugniježđene liste;

….

lista definicija.

Lista definicija se koristi za kreiranje lista tipa "termin" - "opis". Svaki termin počinje oznakom

i opis je označen

.

Svaki element liste je zatvoren u tagovima

….

(iz engleske stavke liste). Kada se prikaže, stavke liste su uvučene i počinju u novom redu.

Tag

može imati parametre:

TYPE = definira tip numeracije, START = postavlja početnu vrijednost prvog elementa liste (bez obzira na tip, označava se cifrom).

TIP = A - markeri u obliku velikih latiničnih slova;

TIP = a - markeri u obliku malih latiničnih slova;

TIP = I - markeri u obliku velikih rimskih brojeva;

TIP = i - markeri u obliku malih rimskih brojeva;

TIP = 1 - Oznake arapskih brojeva (podrazumevano).

Tag

može imati parametar:

Vrsta oznake

definira izgled markera kao zadani (disk), okrugli (krug) ili kvadrat (kvadrat).

Tag

• može imati parametre:

  ili

  TIP Tip markera (vidi.

  ) ili brojač (vidi OL)

  VRIJEDNOST = n Vrijednost za stavku u numerisanoj listi (njen broj). Svi dalji brojevi stavki liste će se računati od ovog broja.

  Kreirajte HTML dokument u uređivaču teksta Notepad

  Da biste kreirali HTML dokument u uređivaču teksta Notepad, morate izvršiti sljedeće korake:

  1. Pokrenite uređivač teksta Notepad (Start> Programi> Pribor> Notepad).

  2. Kreirajte tipičnu strukturu HTML dokumenta i unesite tekst.

  Rice. 1. Kreiranje HTML - dokumenta u uređivaču teksta Notepad

  4. Zatvorite svesku. Pronađite datoteku first.html i otvorite je u internet pretraživaču.

  

  Rice. 2. Ilustracija dokumenta u internet pretraživaču.

  Ako otvorite bilo koju web stranicu, ona će sadržavati tipične elemente koji se ne mijenjaju ovisno o vrsti i fokusu stranice. Primjer 4.1 prikazuje kod za jednostavan dokument koji sadrži osnovne oznake.

  Primjer 4.1. Izvorni kod web stranice

  Naslov

  Prvi paragraf.

  Drugi paragraf.

  Kopirajte sadržaj ovog primjera i sačuvajte ga u folderu c: \ www \ kao example41.html. Nakon toga pokrenite pretraživač i otvorite datoteku kroz stavku menija Datoteka> Otvori datoteku (Ctrl + O)... U dijaloškom okviru Select Document navedite datoteku example41.html. Web stranica prikazana na slici 4 će se otvoriti u vašem pretraživaču. 4.1.

  Rice. 4.1. Primjer rezultata izvršenja

  Elementsluži za označavanje tipa tekućeg dokumenta - DTD (definicija tipa dokumenta, opis tipa dokumenta). Ovo je neophodno da bi pretraživač razumeo kako da interpretira trenutnu web stranicu, jer HTML postoji u nekoliko verzija, a postoji i XHTML (EXtensible HyperText Markup Language) koji je sličan HTML-u, ali se od njega razlikuje po sintaksi. Kako se pretraživač ne bi "zbunio" i shvatio po kom standardu da prikaže web stranicu i potrebno je postaviti u prvom redu koda .

  Postoji nekoliko tipova, razlikuju se ovisno o verziji HTML-a na koju ciljaju. Table 4.1. navodi glavne vrste dokumenata sa njihovim opisima.

  Tab. 4.1. Važeći DTD

  DOCTYPE	Opis
  HTML 4.01
  	Stroga HTML sintaksa.
  	Prijelazna HTML sintaksa.
  	U HTML dokumentu se koriste okviri.
  HTML 5
  	U ovoj verziji HTML-a postoji samo jedan tip dokumenta.
  XHTML 1.0
  	Jaka XHTML sintaksa.
  	Prijelazna XHTML sintaksa.
  	Dokument je napisan u XHTML-u i sadrži okvire.
  XHTML 1.1
  	Programeri XHTML 1.1 predviđaju da će postepeno zamijeniti HTML. Kao što vidite, ova definicija nema podjelu na tipove, jer je sintaksa ista i poštuje jasna pravila.

  Razlika između strogih i prolaznih opisa dokumenata je različit pristup pisanju koda dokumenta. Strogi HTML zahtijeva striktno pridržavanje HTML specifikacije i neumoljiv je. Prijelazni HTML je „opušteniji“ u pogledu nekih nedostataka u kodu, pa je ovaj tip poželjniji u određenim slučajevima.

  Na primjer, u strogom HTML-u i XHTML-u, oznaka

  Tag

  Moj prvi naslov

  Moj prvi pasus

  Rezultat ovog koda u prozoru pretraživača:

  
  

  Da biste uredili kod HTML dokumenta, kliknite desnim tasterom miša na njega → pomerite kursor otvoriti sa... → odaberite uređivač koji vam je potreban, ako na listi nema uređivača koji vam je potreban, kliknite Odaberite program... i izaberite željeni editor. Neki urednici (na primjer, uzmi notepad ++) može se odabrati direktno u kontekstualnom meniju desnim klikom na dokument i odabirom odozgo Uredite pomoću Notepad ++(uređivati ​​pomoću notepada ++).

  Šta je HTML?

  Html je jezik za opisivanje strukture web stranica. Stranice kreirane njime mogu se pregledavati samo uz pomoć posebnih programa (pretraživača) instaliranih na računarima korisnika.

  • Skraćenica HTML je skraćenica za H yper T lok M arkup L anguage (jezik za označavanje hiperteksta).
  • Zapamtite, to nije programski jezik, to je jezik za označavanje.
  • HTML koristi oznake markup za opisivanje strukture web stranice.

  Šta su oznake?

  HTML oznake su ključne riječi ili znakovi zatvoreni u uglatim zagradama, na primjer ,

  ,

  itd. Postoje dvije vrste oznaka: upareno i single(oni se takođe nazivaju praznima). Uparene oznake sastoje se od početne i završne oznake, na primjer:. "/" iza ugaone zagrade označava da se oznaka zatvara. Pojedinačne oznake sastoje se samo od početne oznake, na primjer:
  ... Oznake ne razlikuju velika i mala slova, tako da se mogu pisati i velikim i malim slovima:

  Znači isto kao

  Standard HTML5 oznake se mogu pisati u svakom slučaju.

  Koristeći oznake, pretraživač prepoznaje struktura i značenje vašeg teksta, na primjer, govore pretraživaču koji dio teksta je naslov, gdje počinje novi pasus, šta da podvuče i gdje da pozicionira sliku (sliku). Nakon što primi ove informacije, pretraživač koristi svoja ugrađena zadana pravila o tome kako prikazati svaki od ovih elemenata. Bez upotrebe oznaka, pretraživač će prikazati samo čvrst tok teksta, bez uvlaka, naslova, pasusa itd. Da bi bilo jasnije, pogledajmo pobliže primjere u nastavku.

  Ovako izgleda stranica koristeći oznake za označavanje:

  Piće u našem kafiću

  Multifruit - 100 rub.

  Voćni napitak koji sadrži sokove od narandže i ananasa.

  Mliječni koktel - 150r.

  Kremasti sladoled pomiješan sa voćnom pulpom.

  
  

  Isto, ali bez upotrebe oznaka:

  Piće u našem kafiću Multifruit - 100 rubalja. Voćni napitak koji sadrži sokove od narandže i ananasa. Mliječni koktel - 150r. Kremasti sladoled pomiješan sa voćnom pulpom.