Koje se oznake koriste za riječ moskva. Osnovne HTML oznake. Što su glazbene oznake u audio datotekama?

16.01.2021 Savjet

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.

Kompletan popis HTML elemenata Tablica 1. HTML elementi Opis oznake
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 . , i stupac .

Na primjer, html kod:

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.

Pogledali smo primjer izrade jednostavne stranice gdje su dati komentari na neke html oznake, jer mi se čini da je bolje prvo pokazati nešto na primjeru, a zatim prijeći na detaljniji opis. Zato je o izradi stranice bilo riječi u drugoj lekciji, a detaljnije u trećoj.

Dakle, ispod su opisi uobičajenih HTML oznaka koje se koriste na gotovo svakoj stranici web mjesta. Vjerujte mi, već ih ima dovoljno da napišu cijelu web stranicu.

Popis html oznaka 1. HTML oznaka (za odlomke) - prikazuje odlomak teksta (omogućuje stil, klasu, id atribute). Najčešći tag, jer se u njega najčešće stavlja tekst (međutim, za to je i stvoren).

Na primjer, html kod:

Tekst paragraf broj jedan

A ovo je još jedan paragraf

Tekst paragraf broj jedan

A ovo je još jedan paragraf

Također možete dodati parametar stila oznaci:

Ove različite vrijednosti mogu se koristiti za uređivanje izgleda fonta. O ovim parametrima možete pročitati u zasebnoj lekciji: stilovi u html-u i svojstvo css fonta.

Također možete navesti atribute CLASS i ID. Na primjer:

2. HTML oznaka i (podebljano)

I - dvije oznake koje vam omogućuju podebljavanje fonta. Nema razlike između ovih oznaka.

Navedimo primjer. HTML kôd:

sličica

Pretvara se u sljedeće na stranici:

sličica

Također možete navesti atribute CLASS i ID (kao u slučaju Napomena

Ove oznake imaju mali utjecaj na rangiranje dokumenata u tražilice, pa je bolje ne koristiti ih besciljno.

3. HTML oznaka (napravi kurziv)

- kurziv font (dopušta stil, klasu, id parametre)

Na primjer, html kod:

kurzivni tekst

Pretvara se u sljedeće na stranici:

4. HTML oznaka (podcrtani tekst)

- podcrtani font (dopušta stil, klasu, id parametre)

Na primjer, html kod:

podcrtani tekst

Pretvara se u sljedeće na stranici:

podcrtani tekst

5. HTML oznaka (stvaranje hiperveze)

Stvara poveznicu na stranici (dopušta stil, klasu i druge parametre).

Na primjer, html kod:

tekst veze

Pretvara se u sljedeće na stranici:

Svi parametri i atributi oznake bit će obrađeno u zasebnoj lekciji: html oznaka.

6. HTML oznaka (naslovi u sadržaju)

,..., - oznake zaglavlja unutar sadržaja (dopušta stil, klasu, id parametar). Štoviše, što je manji broj, veća je težina i veličina (prema zadanim postavkama) teksta u ovim oznakama.

Na primjer, html kod:

Naslov h1

Oznaka se koristi za naslov stranice (kao i naslov)

Ove oznake moraju se koristiti samo za njihovu namjenu, tj. samo kada članak treba naslov. To je zbog činjenice da oznake,..., imaju veliki utjecaj na tražilice. Ako ih koristite ispravno, šanse da dođete na vrh rezultata pretraživanja su vrlo velike.

7. HTML oznaka (poravnanje)

- poravnava sadržaj u sredini.

Na primjer, html kod:

Ovaj tekst će biti u sredini

Pretvara se u sljedeće na stranici:

Ovaj tekst će biti u sredini

Bilješka
  • - za tekst
  • ... - za sve (npr. sliku)
8. HTML oznaka (tekst ispod)

- prikazuje font indeksa.

Na primjer, html kod:

Običan tekst, međuredni tekst

Pretvara se u sljedeće na stranici:

Običan tekst, međuredni tekst

9. HTML oznaka (tekst u superskriptu)

- prikazuje font superskripta.

Na primjer, html kod:

Običan tekst, superskriptni tekst

Pretvara se u sljedeće na stranici:

Običan tekst, superskriptni tekst

10. HTML oznaka,

, - prikazuje font za jedan piksel veći/manji od trenutne veličine (dopušteno parametrom style, class, id).

Na primjer, html kod:

Obični font, ovaj font je jedan piksel veći

Pretvara se u sljedeće na stranici:

Obični font, ovaj font je jedan piksel veći

11. HTML oznaka
    (izrada popisa)

    Ispisuje popis (prihvaća stil, klasu, id parametre). Svaki novi element upisuje se između

  • I
  • .

    Na primjer, html kod:

    Popis:
    • prvi element liste
    • drugi element liste

    Pretvara se u sljedeće na stranici:

    Popis:

    • prvi element liste
    • drugi element liste
    12. HTML oznaka (izrada tablica)

    - stvara tablicu (dopušta stil, parametar klase). Svaki novi redak kreiran je oznakama
1-redak 1 element1. redak 2. element
2-linija 1 element2-linijski 2 element

Pretvara se u sljedeće na stranici:

Sve mogućnosti oznake

13. HTML oznaka
(prijelom retka)


- prijelaz na sljedeći redak, je jedna oznaka.

Na primjer, html kod:

Linija 1
2-linijski
3. red I ovaj tekst će biti u 3. redu, jer nije bilo prijelaza

Pretvara se u sljedeće na stranici:

1-redak
2-linijski
3. red I ovaj tekst će biti u 3. redu, jer nije bilo prijelaza

14. HTML oznaka (vodoravna linija)

- crta liniju, predstavlja jednu oznaku (dopušta stil, parametar klase).

Na primjer, html kod:

Neki tekst iznad crte, a ovaj će tekst biti ispod crte

Pretvara se u sljedeće na stranici:

Neki tekst iznad crte, a ovaj će tekst biti ispod crte

15. HTML oznaka (izlaz slike)

Na primjer, html kod:

http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg ">

Pretvara se u sljedeće na stranici:

Sve mogućnosti oznake bit će riječi u posebnoj lekciji: .

16. HTML oznaka (oblikovanje teksta)

- za oblikovanje teksta, promjenu stila itd. (dopušta stil parametara, klasu, id). Njegova težina u očima tražilica je odsutna, tako da ga možete koristiti koliko god želite.

Na primjer, html kod:

Ovaj tekst je zelene boje i veličine je 15 piksela

Pretvara se u sljedeće na stranici:

Bilješka

Slična oznaka je .

17. HTML oznaka (izrada forme)

- stvaranje obrasca na stranici (dopušta stil, parametar klase).

Na primjer, unos prijave i lozinke, bilo koji gumbi, bilo koji obrazac za registraciju - sve su to obrasci.

18. HTML oznaka (stvaranje blokova)

- koristi se za stvaranje blokova na stranici (dopušta stil, parametar klase). Prije su se tablice uglavnom koristile za označavanje stranica. Nakon što se oznaka pojavila, zadatak je postao lakši. Gotovo sve web stranice sadrže blokove kao prikladnu alternativu tablicama.

Atributi su navedeni u početnoj oznaci elementa i sastoje se od naziva i vrijednosti koji su odvojeni znakom jednakosti (=). Na primjer, u atributu href="http://www.site/" href je ime i http://www.site/ značenje.

HTML oznake mogu sadržavati jedan ili više atributa. Atributi se dodaju oznaci kako bi informirali preglednik kako bi oznaka trebala biti prikazana u HTML dokumentu.

atribut naslova

Razmotrite sljedeći primjer:

Ovaj primjer koristi oznaku koja je namijenjena predstavljanju kratice ili akronima. Dodatni atribut dodan je početnoj oznaci elementa. Ovaj atribut sadrži naslov elementa.

Naziv atributa naslova. U ovom smo primjeru dali vrijednost Hypertext Markup Language.

Atribut naslova može se (po izboru) koristiti na bilo kojem HTML elementu za pružanje dodatnih informacija o sadržaju elementa.

Kada koristite atribut naslova, većina će preglednika prikazati njegovu vrijednost kao "tooltip" kada korisnik prijeđe pokazivačem iznad elementa.

atribut alt

Već znate da se slike umeću na web-stranice pomoću jedne oznake. . Atribut alt dodaje se unutar tera i definira alternativni tekst za fizički element dodan na web stranicu. Taj se tekst naziva zamjenski tekst jer se može pojaviti na ekranu kao alternativa samoj slici.

U sljedećem primjeru vidjet ćete kako preglednik rukuje atributom alt kada se pojavi "nedostajuća" slika. Ako se slika ne može pronaći ili se iz nekog razloga ne učitava, umjesto nje se prikazuje vrijednost atributa alt. Promijenite naziv slikovne datoteke iz orange.jpg u pencil.jpg. Takva datoteka zapravo ne postoji, pa ćete završiti sa slikom koja "nedostaje".

href atribut

Elementu možete dodati više atributa odjednom.

Evo primjera dodavanja dva atributa elementu (koji se koristi za stvaranje hiperveze na drugu web stranicu).

Primjer HTML-a: Isprobajte sami HTML vodiče

Atribut href određuje lokaciju web stranice na koju vodi poveznica.

Također koristimo atribut naslova za pružanje nekih smjernica korisniku u obliku opisa alata.

Atribute možete navesti samo unutar otvarajućih oznaka, a ako ima više atributa, između njih se stavlja razmak. Istodobno, ne možete postaviti dva identična atributa u jednoj oznaci, čak i ako imaju različite vrijednosti, odnosno njihovo dupliciranje je zabranjeno. Atributi, poput oznaka, ne razlikuju velika i mala slova, što znači da se mogu pisati velikim ili malim slovima. Vrijednosti atributa mogu se staviti u dvostruke navodnike (" ") ili jednostruke navodnike (" ").

Ponekad je potrebno koristiti navodnike. U ovom primjeru, atribut naslova neće se ispravno prikazati jer vrijednost atributa sadrži razmake:

Samac ili
dvostruki navodnici?

Najčešće korišteni navodnici u HTML-u su "dvostruki navodnici", ali možete koristiti i "jednostruke navodnike". Ponekad ćete morati koristiti jednostruke navodnike ako u vrijednosti postoji dio koji treba zasebno navesti:

HTML

Možete to učiniti i obrnuto:

HTML

Opći atributi

Dolje je popis nekih atributa koji su standardni za većinu html elemenata:

Opis vrijednosti atributa
uskladitidesno, lijevo, centarHorizontalno poravnanje oznaka
valignvrh, sredina, dnoOkomito poravnanje oznaka unutar HTML elementa.
pozadinaURLLokacija pozadinske slike
iskaznicaJedinstven nazivJedinstveni naziv za korištenje s kaskadnim stilskim listovima.
razredaklasno pravilo ili klasni stilKlasificira element za korištenje s kaskadnim stilskim listovima.
širinaNumerička vrijednostDefinira širinu tablica, slika ili ćelija tablice.
visinaNumerička vrijednostOdređuje visinu tablica, slika ili ćelija tablice.
titulaTekst opisa alataTekst za prikaz u opisu alata.

Potpuni popis svih atributa za svaki HTML element, navedene u našem imeniku: HTML atributi.

Zadaci Prvi završni zadatak

Upoznali ste se s tagovima potrebnim za izradu jednostavne HTML stranice, kao i s atributima i njihovim vrijednostima koji su vrlo važni za ispravan prikaz dokumenta, optimizaciju i promociju u tražilicama.

Vrijeme je da ponovite što ste naučili i izvršite jednostavne zadatke:

Opis alata
  • Odlučite sami"

Napravite opis s tekstom "Dobra stranica" koji se pojavljuje kada mišem prijeđete preko odlomka, kao što je prikazano na sl. 1.

Opis alata

Title="Dobra stranica">сайт - сайт для разработчиков.!}

Dimenzije slike
  • Odlučite sami"

Promijenite veličinu slike na 200 piksela širine i 150 piksela visine.

Dimenzije slike

Dimenzije slike

Pozdrav, dragi čitatelji bloga! U prošlom smo članku otkrili što je vrsta dokumenta i kako preglednici određuju jezik koji se koristi pomoću . Oznaka je uzeta u obzir, ali sam koncept (termin) nije. U ovom članku ću vam reći što je oznaka, zašto je potrebna i koje vrste oznaka postoje. Kao što sam rekao u prošlom članku ovog odjeljka, napravit ćemo stranicu datoteke s kojom ćemo eksperimentirati, na temelju znanja koje smo stekli. Ali ovo je na kraju članka, ali za sada pogledajmo HTML oznaku.

Što je HTML oznaka, vrste HTML oznaka, primjeri pisanja HTML oznake - u prijevodu s engleskog tag - za označavanje znakova u uglastim zagradama i koji su elementi hipertekstualnog označnog jezika (HTML). Simboli mogu biti od neke koristi Engleski jezik(cijeli Internet je izgrađen na tome). Oznaka izgleda

Ovo je oznaka za podebljavanje teksta. Oznake imaju tri vrste:

  • Oznaka za otvaranje je oznaka koja dolazi na početku. U gore navedenom primjeru, oznaka je početna oznaka i stoji ispred teksta koji treba istaknuti.
  • Završna oznaka je oznaka koja dolazi na kraju. Posebnost služi kao kosa crta “/” prije znakova u uglastim zagradama. Pogledajmo ponovno gore razmotreni primjer. Oznaka je završna oznaka i dolazi nakon teksta koji treba biti označen podebljanim slovima
  • Pojedinačne oznake su oznake koje nemaju završnu oznaku. Primjer bi bio
    Evo primjera oznake za otvaranje i zatvaranje:

Cijeli dizajn, uključujući tekst, izgledat će ovako:

Ovaj će tekst biti istaknut podebljanim slovima

A ovako će ovaj tekst izgledati kada ga preglednik obradi i dostavi nam: Ovaj tekst će biti označen podebljanim slovima. Postoji i takva stvar kao što su oznake spremnika, ali to je samo općeniti naziv za oznake otvaranja i zatvaranja. Kao što sam gore napisao, osim oznaka kontejnera, postoje i pojedinačne oznake. Razlika je u tome što se takve oznake ne moraju zatvarati. Najjasniji i najčešći primjer je oznaka novog retka.

U osnovi, pojedinačne oznake koriste se za umetanje elementa, poput slike ili tablice.

Što su atributi, pravila pisanja i zašto su potrebni Osim oznaka, postoje i tzv. Točnije, ne osim, nego u oznakama. Pomoću atributa koje možete postaviti Dodatne mogućnosti za bilo koju oznaku. Svaka oznaka ima svoje atribute, au ovoj ćemo temi eksperimentirati s oznakom, koja zapravo ne čini ništa smisleno bez atributa.

Font je oznaka spremnika koja se koristi za oblikovanje teksta. Pomoću ove oznake možete podebljati tekst, promijeniti veličinu i udaljenost između redaka - općenito, sve što možete učiniti s tekstom. Pogledajmo primjer s veličinom teksta. Prvo, stavimo tekst u oznaku Font.

Tekst

Sada malo o pravilima pisanja atributa. Atributi se uvijek pišu u početnoj oznaci i iza znakova same oznake. Možete napisati više atributa u jednu oznaku bilo kojim redoslijedom. Atribute možete pronaći na web stranici W3C validatora (o kojoj ću pisati u nastavku). Evo primjera oznake fonta s atributom veličine:

Tekst

Ovaj atribut u oznaci fonta mijenja veličinu teksta unutar oznaka.
Ako otvorite izvor stranici, vidjet ćete kako izgleda mjesto gdje se nalazi velika riječ "Tekst".

Tekst

Već ste vidjeli kako se pišu atributi. U drugim oznakama se pišu na potpuno isti način: prvo napišemo sam atribut (u ovom slučaju veličinu), zatim stavimo “=” i stavimo parametar atributa u dvostruke navodnike. Sve parametre atributa možete pronaći na istoj web stranici konzorcija World Wide Weba.

Što je W3C validator, pravila pisanja i popis oznaka Kao što sam napisao, postoji jako puno oznaka. Ali gdje ih sve možete pronaći? U tu svrhu postoji W3C validator W3C - World Wide Web Consortium, ili na ruskom - World Wide Web Consortium. Nije sasvim jasno, zar ne? Ovo je mjesto gdje se razvijaju web standardi - (jezici za označavanje hiperteksta njihova su zamisao). Na čelu cijelog konzorcija je iz prethodnog članka poznati Tim Berners-Lee, tvorac HTML-a. Web stranica ove organizacije je w3.org. Upozoravam vas, stranica je u potpunosti na engleskom, stoga imajte rječnik ili prevoditelj u svom pregledniku. Inače, Google ocjena za ovu stranicu je 9 i 37.000 (to je sve puno, ako netko ne zna).

Vratimo se na temu članka. Zanimaju nas jezični standardi HNTML 4.01. Slijedite vezu HTML 4.01 Specification, nakon čega vidimo karticu elemenata na vrhu, kliknite na nju. Ovdje se otvara stranica sa svim oznakama. Konzorcij je ove oznake razvio i prihvatio kao standard. Sve je, opet, na engleskom. Odmah nakon riječi "Indeks elemenata" vidimo legendu (značenje slova u stupcima):

I odmah nakon legende nalazi se tablica samih oznaka:

  • U prvom stupcu - Naziv - naziv same oznake - što bi trebalo biti u uglastim zagradama (< и >).
  • Drugi stupac - Početna oznaka - prisutnost početne oznake. U ovaj stupac možete vidjeti slovo "O", što znači "Optional", au prijevodu s engleskog - Optional. Ovo slovo je prisutno samo nasuprot oznaka , , i i znači da možete staviti oznaku otvaranja ili ne morate - preglednik će sve učiniti sam.
  • Treći stupac - Završna oznaka - prisutnost završne oznake. Nasuprot ove oznake možete vidjeti i slovo "O" i slovo "F". Značenje prvog se nije promijenilo. Drugo slovo - "F" - doslovno "zabranjeno" na engleskom - znači da je zabranjeno staviti oznaku za zatvaranje, ona jednostavno ne postoji. Na primjer, nema oznake, jer se u njemu nema što skrivati.
  • Četvrti - Empty - znači da je oznaka jednostruka (prazna). Sve oznake koje imaju slovo "E" ispred sebe u ovom stupcu također imaju slovo "F" u prethodnom stupcu. Uostalom, pojedinačne oznake nemaju završne oznake. Primjer je ista oznaka .
  • Peta kolona je Depr. ili Deprecated - od engleskog "ne preporučuje se". Ako ovaj stupac sadrži slovo "D" (što znači potpuno isto), to znači da se ova oznaka ne preporučuje za korištenje u HTML-u. Gledajući malo unaprijed, danas za dizajn teksta i izgled Cijelo web mjesto i HTML dokument koriste kaskadne stilske listove (CSS). Ukratko i jednostavno, kreira se jedna datoteka u koju su upisani svi tekstualni parametri koji se mogu pozvati određenim atributima oznake. Tako, ovu funkciju koristi se samo na web stranicama, jer CSS nije primjenjiv kod slanja vijesti e-poštom ili RSS-om. I ovdje te iste oznake dolaze u pomoć. Većina ovih oznaka, usput, odnosi se na dizajn teksta (i primjer su)
  • Šesti stupac - DTD - može sadržavati slovo "L" ili "F". Prvi - "L" - Loose DTD - znači da se oznaka nasuprot koje se ovo slovo pojavljuje može koristiti samo u prijelaznoj vrsti dokumenta (- Transitional, o čemu sam pisao u prethodnom članku). Drugi - "F" - Frameset DTD - znači da se oznaka može koristiti samo u dokumentu tipa FRAMESET ( - Frameset). Ako slovo nedostaje, tada se oznaka može koristiti u svim vrstama dokumenata.
  • I zadnji, sedmi stupac - Opis - Kratki opis oznaka, opet na engleskom

Atributi se nalaze na istoj stranici specifikacije HTML 4.01, ali u kartici "atributi". Postoji mnogo više atributa nego oznaka. I opet ću sve zapisati točku po točku.

  • Prvi stupac je naziv - kao u slučaju oznaka, naziv atributa. Sve je na engleskom, ali s osnovnim znanjem možete pogoditi čemu ovaj ili onaj atribut služi.
  • Drugi stupac - Povezani elementi - je popis svih oznaka koje koriste bilo koji atribut. Sve oznake imaju veze, tako da možete odmah otići na informacije o oznaci.
  • Treći stupac - Vrsta - sadrži sve moguće vrijednosti za određeni atribut. Na primjer, nasuprot atributu veličine koji smo odabrali u oznaci Font nalazi se vrijednost CDATA. Pogledat ćemo to kasnije, ali ukratko, to je poseban skup opcija veličine (u ovom slučaju). Uostalom, možete pisati i piksele i postotke
  • Četvrti stupac - Zadano - označava je li atribut potreban u određenoj oznaci. Na primjer, u oznaci Img potreban je atribut src jer označava izvor iz kojeg treba uzeti sliku.
  • Kolone 6, 7 i 8 znače isto kao u slučaju oznaka.

Sve gore navedeno odnosi se samo na HTML verziju 4.01. O HTML 5 ćemo govoriti u drugom članku, a dotaknut ćemo se i XHTML-a. A sada, kao što sam obećao, napravit ćemo stranicu u HTML-u s kojom ćemo eksperimentirati.

Izrada datoteke u html formatu - HTML dokument

Prije svega, shvatimo što je HTML dokument. A ovo je zapravo datoteka u HTML formatu. I sve Internet stranice jesu HTML dokumenti. Na primjer, kada dođete do web stranice u adresnoj traci na kraju možete vidjeti ".html" ili ".htm" nakon adrese. Ovo je datoteka koju ćemo izraditi s ovom ekstenzijom. Općenito, ako želite eksperimentirati s web-mjestom, a ne sa stranicom, bolje je izraditi lokalni poslužitelj— Denver (o kojem želim sve napisati).

S obzirom na to da nisam ni govorio o oznakama prisutnim na svakoj stranici, jednostavno ćemo stvoriti datoteku s bilo kojim nazivom i ekstenzijom.html. Moguće je (i najbolje) koristiti Notepad++ jer u ovom slučaju uređivač teksta Koristi se označavanje koda, što je vrlo zgodno pri uređivanju koda, a datoteke se mogu spremati u različitim formatima. Postoje i programi u kojima se, kada upišete kod, rezultat odmah pojavi u obrađenom obliku.

Dakle, samo trebamo otvoriti Notepad++ i spremiti datoteku s proizvoljnim tekstom (može biti prazna), ali u .html formatu. Da biste to učinili, kao i obično, kliknite na oznaku datoteke, zatim "spremi kao" i potražite "HyperText Markup Language file (file extensions)" među velikim popisom ekstenzija. To je zapravo sve. Dodat ćemo prve retke ovoj datoteci u sljedećem članku iz odjeljka “Izrada web stranice od nule”

Odlučio sam napraviti tablicu u kojoj možete pogledati glavne oznake html jezik, kao i za što su potrebni. Oznake su podijeljene u kategorije radi lakšeg snalaženja.

Svaka oznaka je napisana u uglastim zagradama, ovako: . Radi vlastite udobnosti, naveo sam samo nazive oznaka u tablici bez uglastih zagrada.

Tag Što to znači Pročitajte više
Osnovni, temeljni
!doctype Definira vrstu dokumenta Određuje točno kako obraditi stranicu.
html Cijeli dokument Spremnik je za sve elemente na web stranici
tijelo Tijelo stranice Sav sadržaj stranice koji će biti prikazan na ekranu, njegova struktura
glava Važna informacija o stranici Neće biti prikazan na ekranu, ali je potreban za rad stranice (kodiranje, povezivanje stilske tablice itd.)
titula Naslov stranice Glavno ime bit će prikazano u tražilici i u Gornji red preglednik
veza Povezuje vanjske datoteke Pomoću ove oznake uključene su stilske tablice i druge vanjske datoteke
skripta Uključuje javascript datoteke Traženi atribut je src, koji navodi stazu do datoteke
meta Određuje meta informacije Meta informacije uključuju kodiranje i meta oznake.
Semantičke oznake html5
Zaglavlje Stvara zaglavlje stranice ili odjeljka Na stranici može postojati nekoliko takvih oznaka. Zaglavlje može činiti zaglavlje web stranice u cjelini,
i naslov članka itd.
podnožje Oznaka za stvaranje podnožja ili odjeljka stranice Po značenju sličan prethodnom elementu, ali stvoren za stvaranje donjeg dijela stranice u njemu
članak Kontejner za prikaz sadržaja u njemu (glavni tekstualne informacije) Glavni tekst koji se nalazi na vašoj stranici trebao bi biti uvršten u ovu oznaku.
na stranu Prikazuje sporedne informacije koje nisu povezane s glavnim Spremnik za prikaz raznih widgeta i drugih informacija koje nisu izravno povezane
na glavni tekst.
Oblikovanje
str stavak Oznaka stvara odlomak koji je okomito odvojen od ostalih elemenata
uvlačenje.
h1-h6 Naslovi h1 je najvažniji naslov (članka, web stranice), h6 je najmanji.
hr Vodoravna crta Stvara vodoravna crta cijelom širinom bloka u kojem se nalazi. Njegova visina
obično 1 piksel. Nema smisla, to je samo separator.
br Prisilni prekid retka Može se koristiti kada nije stvoren novi odlomak, ali morate pisati tekst u novom redu.
Jedna oznaka, poput hr.
raspon Univerzalni inline element Span je dizajniran da se koristi za prelamanje željenih dijelova teksta i primjenu na njih
jedinstven dizajn.
div Univerzalni blok element Nema nikakvog semantičkog smisla. U biti obični spremnik sa svojstvima blokova.
Koristi se u razne svrhe.
prije Oznaka za prikaz teksta onako kako je upisan u uređivaču Tekst će biti ispisan sa očuvanim svim razmacima, prijelomima redaka i uvlakama.
lik Spremnik za grupiranje elemenata. Najjednostavniji primjer je grupiranje slika i opisa za njih. Oznaka se pojavila u html5 specifikaciji.
figcaption Naslov za elemente prikupljene na slici. Može se postaviti iznad ili ispod figure, ovisno o tome kako se nalazi u kodu.
Linkovi
a Veza Oznaka ima obavezni href atribut koji navodi url adresu
dokument na koji vodi link.
nav Kontejner za važne linkove Oznaka iz html5, koja je stvorena posebno za postavljanje najvažnijih poveznica u nju
Na stranici. Zapravo, stvoren je da formira glavni izbornik na stranici.
Popisi
ol Numerirani popis Spremnik za stavke popisa koje će biti numerirane
ul Popis s grafičkim oznakama Spremnik za stavke popisa koje će biti označene istim markerom
li Stavka popisa Svaka pojedinačna stavka popisa smještena je u ovu uparenu oznaku. Prema zadanim postavkama ima svojstva bloka.
Slike
img Prikazuje bilo koju sliku Traženi atribut je src (put do slike). Jedna oznaka.
Za tekst
b Podebljani font Uparena oznaka. Sav tekst koji je unutar njega uokviren postaje podebljan. Nema nikakvog logičnog smisla.
snažna Ističe tekst kao važan + čini ga podebljanim Djeluje slično oznaci b, ali također daje riječima dodatnu važnost.
ja Kurziv teksta Daje kurzivni stil
em Tekst u kurzivu + naglašava riječi Dodaje logično isticanje riječi na pozadini drugih
q Mali citat Dizajnirano za isticanje malih citata na stranici
s Prikazuje precrtani tekst Djeluje samo na dizajn, bez dodavanja ikakvog značenja
u Prikazuje tekst podcrtan Kao i s, ovo je čisto dizajnerska oznaka.
prije Ispisivanje teksta uz očuvanje oblikovanja Čuva sve razmake i prijelome reda koji se prave tijekom tipkanja.
pod Za prikaz fonta u indeksu Također smanjuje samu veličinu fonta
sup Za prikaz fonta u superskriptu Slično radi sa sub
Okviri
iframe Izvodi plutajući okvir Traženi parametar je src. Također možete postaviti širinu i visinu.
Obrasci
oblik Posuda za kalup Sadrži sva polja koja je potrebno ispuniti. Ima tražene parametre metode
i radnju tako da slanje funkcionira.
ulazni Prikazuje različita polja obrasca Tip polja ovisi o atributu tipa. To može biti polje za unos teksta, lozinke, odabir datuma itd.
set polja Odvaja jedan dio obrasca od drugog Na primjer, ako su neka polja za opće podatke o registraciji, a druga za
odabir interesa, onda se oni mogu razdvojiti takvim oznakama, jer se radi o različitim grupama polja.
legenda Prikazuje naslov za grupu polja Ovo je naziv za spremnik skupa polja
označiti Natpis polja Omogućuje uspostavljanje veze između polja za unos i ovog elementa. Kada kliknete na oznaku to se događa
pomicanje fokusa na polje s kojim je povezan. A ako je oznaka povezana s potvrdnim okvirom ili radio gumbima, onda kada kliknete na nju
automatski se odabire odgovarajući gumb. Povezivanje se vrši pomoću atributa for.
Izaberi Padajući popis opcija Kada kliknete na njega, možete odabrati jednu od prethodno navedenih opcija. S višestrukim atributom
Možete odabrati više vrijednosti s takvog popisa.
opcija Prikazuje jednu opciju za padajući popis Ova oznaka je jednostruka, traženi tekst se upisuje u atribut vrijednosti.
tekstualno područje Višeredno tekstualno polje Koristi se kada trebate napisati puno teksta. Na primjer, za komentare, recenzije itd.
Stolovi
stol Glavni spremnik za stol Sadrži sav svoj sadržaj - retke i ćelije.
naslov Naslov tablice Može se nalaziti bilo gdje u spremniku tablice; u svakom slučaju bit će prikazan na vrhu ili dnu.
tr Stvara jedan red tablice U nizu može biti neograničen broj ćelija. Nema smisla stavljati ništa osim ćelija u sam red.
td Stvara jednu ćeliju Ovaj tekst je također napisan u ćeliji. U njega možete umetnuti druge HTML elemente. Na primjer, slike
video pa čak i druge tablice
th Stvara ćeliju zaglavlja Tekst u njemu postaje podebljan i poravnat prema sredini
Multimedija
audio Omogućuje umetanje audio datoteke Umetanje se događa pomoću pojedinačne oznake izvor, koji sadrži put do datoteke. Do sada za
Kompatibilnost s više preglednika, web programeri moraju umetnuti više formata datoteka tako da bilo koji web preglednik
mogao ga identificirati.
video Umeće video Postupak je isti kao u slučaju zvuka. Prazan atribut kontrole dodaje elemente
video kontrole, atribut postera - dodaje sličicu.
izvor Određuje put do medijske datoteke (audio ili video) Umetnuti unutar audio ili video oznaka, između njihovih početnih i završnih dijelova.
Staza je navedena pomoću atributa src, kodeci su također navedeni.
Ovo nisu sve oznake

U ovoj tablici možete pronaći sve glavne oznake, ali to nije apsolutno sve. Međutim, to su oni koji će vam biti od koristi, ostali će se koristiti samo u 5-10% slučajeva i možete ih potražiti u nekom detaljnijem priručniku.