Oznaka je posebna rezervirana riječ zatvorena u ugaone zagrade (na primjer, ). Oznaka je glavna komponenta HTML-a: kod počinje s njom, završava se s njom, a informacije prikazane na web stranici sadržane su unutar oznaka. Preporučuje se da ih pišete malim slovima, odnosno običnim malim slovima: ne, ali.
Koje su vrste oznaka?Većina HTML oznaka je uparena: postoji oznaka za otvaranje (na primjer, ) i oznaka za zatvaranje, koja se razlikuje od početne oznake kosom crtom (/) iza prve ugaone zagrade (na primjer, ). Sve što se nalazi unutar para oznaka naziva se njihovim sadržajem.
Sadržaj Tekst postavljen unutar ovih oznaka postaje podebljan
Postoje i neuparene (pojedinačne) oznake koje se nazivaju tagovi. Njih, za razliku od uparenih oznaka, nije potrebno zatvarati, jer ne rade sa sadržajem, već samostalno obavljaju neku funkciju. Primjer jedne oznake -
. Postavlja da se tekst prelama u sljedeći red.
Ako povučemo paralele s ruskim jezikom, možemo reći da su uparene oznake navodnici ili zagrade koji utiču na svojstva teksta sadržanog u njima (pokušajte da ne zatvorite navodnike na vrijeme), a pojedinačne oznake (znakovi) su interpunkcijski znaci ( uzvik, pitanje ili tačka).
Bilo koja oznaka se sastoji od:
- Otvoreni ugaonik (< ).
- Posebna riječ (ime oznake). Na primjer, hr , iframe , b .
- Ugaona zagrada za zatvaranje (> ).
Budući da su oznake osnova jezika za označavanje, nije iznenađujuće da ih ima dosta. Pogledajmo glavne, najvažnije oznake.
- - jedan tag koji sadrži komentar. Komentar je tekst koji pretraživač ne obrađuje. Možete napisati šta god želite unutar oznake, čak i druge oznake - neće raditi, neće se pojaviti na ekranu. Programeri komentiraju kod ili kako bi ga drugi webmasteri lakše razumjeli ili kako bi ga nakon dugo vremena mogli sami brzo razumjeti.
- , , , , su oznake koje bi trebale biti prisutne u svakom pristojnom HTML dokumentu (za više detalja pogledajte “Kako kreirati web stranicu u Notepad-u”).
- - oznaka sadrži pomoćne informacije za pretraživače i pretraživače. Unutar njega možete napisati ključne riječi, opis stranice, kodiranje dokumenta, ime autora itd.
- sadrži vezu do datoteke skripte ili samog koda.
- - oznaka koja postavlja stil dokumenta i/ili njegovih elemenata koristeći CSS. HTML dokument može sadržavati mnogo oznaka koje definiraju različite stilove za različite dijelove stranice.
- - sušta suprotnost, dopunjujući je. Oznaka specificira “header” (naslov) dijela ili cijele stranice.
- pohranjuje "noge" stranice ili odjeljka. Unutar njega možete postaviti prateće informacije, autorska prava, kontakt informacije itd.
- sadrži glavni sadržaj stranice. Ni zaglavlje, ni blok menija, ni "noge" stranice, već ono zbog čega je stranica kreirana. Na primjer, na stranici koju sada čitate, ovaj članak bi trebao biti smješten unutra.
- dizajniran za kreiranje linkova. Linkovi su korijen hiperteksta, zbog čega je ovaj članak posvećen njima.
- potrebno za dodavanje slika na web stranicu (na usluzi je ovoj akciji).
-
,
, - , , ,, , , i druge oznake za oblikovanje teksta čine veliku grupu HTML oznaka; o njima se govori u članku “Formatiranje teksta u HTML-u”.
- - blok element. Tekst unutra je formatiran pomoću CSS-a (kaskadni stilski listovi, što je predmet drugog dijela tutorijala).
- . Imate paragraf
ili blok Tekst u njemu je dizajniran u istom stilu, ali biste željeli, bez narušavanja strukture, osigurati da nekoliko riječi ima različitu veličinu ili boju fonta. Oznaka je namijenjena za takve situacije.
-
,
-
,
- - lista oznaka. Označeno, numerirano - rad ovih oznaka. Postoje i liste definicija za koje su tagovi odgovorni, i, ali ćete o svih šest detaljno naučiti u članku “Kreiranje lista”.
, , ,
, And koriste se pri kreiranju tabela i detaljno su obrađeni u posebnom članku. - - oznaka koja stranici dodaje interaktivnost, odnosno omogućava korisniku interakciju sa web-stranicom. Naravno, obrascu je potreban rukovalac, ali uz pomoć tagova unutar možete kreirati interfejs. Polje za potvrdu, dugmad, radio dugmad, polja za unos i drugi objekti koji zahtevaju aktivne akcije od vas su elementi obrasca čiji je kod smešten unutar kontejnera.
- - oznaka koja stvara interaktivno dugme. Da bi se nešto dogodilo kada kliknete na njega, dugme mora biti u formi (nalazi se između oznaka).
- kreira elemente obrasca: prekidače, potvrdne okvire, dugmad, sve vrste polja za unos. Ubačen u kontejner. Ali zašto su nam potrebne posebne ako postoji univerzalna? omogućava vam da kreirate dugme sa naprednim parametrima. Na primjer, možete postaviti sliku na dugme. Ovo se ne može učiniti na elementu kreiranom putem .
- i - oznake za kreiranje menija u HTML 5. - ovo je kontejner unutar kojeg se postavljaju elementi čijim dodavanjem se kreiraju stavke menija. Prilično zanimljiv par. Na primjer, uz njegovu pomoć možete kreirati vlastiti kontekstni meni za stranicu ili njen pojedinačni element.
- - još jedna oznaka obrasca koja stvara veliko polje u njemu, u koje možete unijeti ne samo jedan red teksta, već cijele pasuse.
U HTML-u, sve što napišete u HTML dokumentu biće prikazano na ekranu pretraživača kao čvrst tekst, to jest, pretraživač ignoriše prelome redova, a nekoliko razmaka koje upišete u redu se zamenjuju jednim.
Oznake su kontrolne komande koje su izmišljene da bi se formatirao tekst, tj. oznake govore pretraživaču kako da prikaže dio teksta zatvorenog u tagovima. Da biste kreirali oznaku, unesite HTML kod između ugaonih zagrada, koji je namijenjen samo pretraživačima. Posjetioci stranice ne vide oznake.
Kao što je gore navedeno, sve oznake počinju ugaonom zagradom< и заканчиваются угловой скобкой >. Ugaonu zagradu otvaranja slijedi naziv oznake (naredbe).
Na primjer, oznaka je namijenjena da naglasi tekst; pretraživači takav tekst prikazuju kurzivom. Kada pretraživač naiđe na ovu oznaku, on se prebacuje na formatiranje teksta koji slijedi nakon oznake u kurzivnom fontu.
Pogledajmo primjer:
Ovaj tekst je normalan. Ovaj tekst je u kurzivu.
Oznaka se naziva startna ili početna oznaka, što znači da je pretraživač uključio određenu naredbu (u ovom slučaju, pisajući je kurzivom). Većina oznaka ima par u obliku završne oznake koja onemogućuje naredbu.
Završna oznaka izgleda isto kao i početna, ali počinje kosom crtom. Dakle, krajnja oznaka za kurziv je .
Pogledajmo primjer:
Ovaj tekst je normalan. Pažnja! Kurziv. Ovo je opet običan font.
Kao što ste možda primijetili, pretraživač sekvencijalno analizira HTML dokument u potrazi za naredbama (tagovima) i primjenjuje ili onemogućuje različite opcije oblikovanja teksta. Pretraživač u svom prozoru prikazuje formatirani tekst (sve što nije oznaka).
Proces umetanja oznaka u običan, neformatirani tekst naziva se označavanje u HTML dokumentu, a oznake se nazivaju znakovi za označavanje. Prilikom pisanja oznaka ne uzima se u obzir velika i mala slova, oznaka se može pisati i malim i velikim slovima, ali se ipak preporučuje upotreba velikih slova. Ispod su primjeri osnovnih HTML oznaka, s objašnjenjem njihove upotrebe, kao i primjeri kako se mogu koristiti u HTML dokumentu.
NasloviPostoji posebna oznaka za određivanje naslova u HTML-u. Postoji 6 nivoa naslova u HTML-u, od onih za najvažnije najave, do onih za najmanje važne.
Razmotrili smo primjer kreiranja jednostavne stranice na kojoj su dati komentari na neke html tagove, jer mi se čini da je bolje prvo nešto pokazati primjerom pa onda preći na detaljniji opis. Zato je kreiranje 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 stranice. Vjerujte mi, već ih ima dovoljno da napišu cijelu web stranicu.
Lista html oznaka 1. HTML oznaka (za pasuse) - prikazuje tekstualni pasus (dozvoli stil, klasu, id atribute). Najčešći tag, pošto se u njega najčešće stavlja tekst (međutim, za to je i kreiran).Na primjer, html kod:
Tekst pasus broj jedan
A ovo je još jedan paragraf
Tekst pasus broj jedan
A ovo je još jedan paragraf
Također možete dodati parametar stila u oznaku:
Ove različite vrijednosti mogu se koristiti za uređivanje izgleda fonta. O ovim parametrima možete pročitati u zasebnoj lekciji: stilovima u html-u i svojstvu fonta css.
Također možete specificirati atribute CLASS i ID. Na primjer:
2. HTML oznaka i (podebljano)I - dvije oznake koje vam omogućavaju da podebljate font. Nema razlike između ovih oznaka.
Dajemo primjer. HTML kod:
sličicaKonvertuje se u sledeće na stranici:
sličica
Također možete specificirati atribute CLASS i ID (kao u slučaju Note
Ove oznake imaju mali uticaj na rangiranje dokumenata u pretraživačima, pa je bolje da ih ne koristite besciljno.
3. HTML oznaka (napravi kurziv)- kurziv font (dozvoli stil, klasu, id parametre)
Na primjer, html kod:
kurziv tekstKonvertuje se u sledeće na stranici:
4. HTML oznaka (podvučen tekst)- podvučen font (omogućava stil, klasu, id parametre)
Na primjer, html kod:
podvučeni tekstKonvertuje se u sledeće na stranici:
podvučeni tekst
5. HTML oznaka (kreiranje hiperveze)Kreira vezu na stranici (omogućava stil, klasu i druge parametre).
Na primjer, html kod:
tekst linkaKonvertuje se u sledeće na stranici:
Svi parametri i atributi oznake biće obrađeno u posebnoj lekciji: html tag.
6. HTML oznaka (naslovi u sadržaju),..., - oznake zaglavlja unutar sadržaja (dozvoljava stil, klasu, id parametar). Štaviše, što je manji broj, veća je težina i veličina (podrazumevano) teksta koji se nalazi u ovim oznakama.
Na primjer, html kod:
Naslov h1Oznaka se koristi za naslov stranice (kao i naslov)
Ove oznake se moraju koristiti samo za njihovu namjenu, tj. samo kada je članku potreban naslov. To je zbog činjenice da tagovi,..., imaju veliki uticaj na pretraživače. Ako ih pravilno koristite, onda su šanse da dođete do vrha rezultata pretraživanja vrlo velike.
7. HTML oznaka (poravnanje)- poravnava sadržaj u sredini.
Na primjer, html kod:
Ovaj tekst će biti u srediniKonvertuje se u sledeće na stranici:
Ovaj tekst će biti u sredini
Bilješka- - za tekst
- ... - za sve (na primjer, sliku)
- prikazuje subscript font.
Na primjer, html kod:
Običan tekst, međuredni tekstKonvertuje se u sledeće na stranici:
Običan tekst, međuredni tekst
9. HTML oznaka (superscript text)- prikazuje font superscript.
Na primjer, html kod:
Običan tekst, superscript tekstKonvertuje se u sledeće na stranici:
Običan tekst, superscript tekst
10. HTML oznaka,, - prikazuje font za jedan piksel veći/manji od trenutne veličine (dopušta parametar stila, klase, id).
Na primjer, html kod:
Običan font, ovaj font je jedan piksel većiKonvertuje se u sledeće na stranici:
Običan font, ovaj font je jedan piksel veći
11. HTML oznaka- (kreiranje lista)
- I .
- prvi element liste
- drugi element liste
- prvi element liste
- drugi element liste
- postavljaju se elementi liste. Na slici je prikazan primjer koda za prikazivanje lista, predstavljenih u obliku numerisanih i nabrajanih lista.
Za povezivanje dvije ili više web stranica jedna s drugom, koriste se hiperveze za čije kreiranje se koristi oznaka . Štaviše, oznake hiperveza koriste dodatne atribute koji vam omogućavaju ili odlazak na drugu web stranicu ili kretanje unutar date stranice. Preporučljivo je koristiti drugu metodu u velikom dokumentu koji ima nekoliko semantičkih odjeljaka.
Primjer korištenja hiperveza prikazan je na slici.
Kada specificirate URL druge stranice, morate navesti ili punu apsolutnu putanju do stranice “puna staza/folder/stranica” ili relativnu putanju (u odnosu na ovu stranicu) “folder/page”. Parametar “target” vam omogućava da otvorite web stranicu u novom ili postojećem prozoru pretraživača.
Da biste umetnuli sliku na web stranicu, koristite oznaku sa parametrima src (putanja do slike), širina (širina slike), visina (visina slike), ivica (okvir oko slike). Primjer koda za umetanje slike:
Često je prilikom kreiranja web stranica potrebno postaviti boju pozadine ili pozadinsku sliku. Da biste to učinili, koristite atribute oznake “bgcolor” ili “background-image”. Primjer umetanja boje pozadine:
Primjer umetanja pozadinske slike:
Navedeni atributi se mogu koristiti ne samo za oznaku, već i za tablicu, područje i druge oznake, o čemu će biti riječi u sljedećim temama.
U životu svakog copywritera dolazi faza upoznavanja sa html oznakama. Obično se to dešava spontano i izgleda kao zahtjev kupca da se „pripremi tekst za objavljivanje“. To znači da u članku trebate istaknuti naslove, pasuse, značajna mjesta i liste, ali ne uz pomoć Worda, već posebnim kodom html jezika. Oznake za copywritera pomoći će u tome. Lista koja je potrebna za rad je obično mala, ali je dovoljna za formatiranje teksta prema standardnim zahtjevima. Šta je uključeno u html tagove neophodne za copywritera? (Ako ste previše lijeni za čitanje, pomaknite se prema dolje - postoji jednostavna i jasna tematska infografika o html tagovima!)
Kopirajter postavlja tradicionalna pitanja. I svi započinju formulacijom "koja se oznaka koristi za navođenje...":
- naslov;
- stav;
- thumbnail;
- kurziv;
- lista označena s grafičkim oznakama/neobilježena/
Sve to dodaje začin tehničkom zadatku i podstiče sticanje novih znanja. Situacija se pogoršava kada je zadatak koristiti podebljani tekstualni tag za povećanje atraktivnosti ključa u PS-u. Ali sve se to može vrlo jednostavno riješiti, čime ćemo se sada pozabaviti.
Oznake za kreiranje naslovaOznake za kreiranje naslova predstavljene su elementima h1-h6. Dobili su svoje pismo iz engleskog zaglavlja (naslov). Da biste postavili traženu vrstu zaglavlja i naglasili njegov značaj za PS, koristite sljedeći kod:
Naslov h1 Naslov h2 Naslov h3 Naslov h4 Naslov h5 Naslov h6
Na web stranici to će izgledati ovako.
Naslov h1 Naslov h2 Naslov h3 Naslov h4 Naslov h5 Naslov h6Naslov h1 ima najveći značaj - i vidljivost -. Koristi se kao naslov posta i koristi se samo jednom. Za podnaslove u tekstu preporučuju se h2 i h3. Oni pomažu da se naglasi značaj materijala koji se razmatra i podijeli članak na razine informacija.
Zaglavlja h4-h6 praktički se ne koriste, ali su tražena za isticanje logičkih blokova i važnih fragmenata.
Za velike artikle najbolje je koristiti naslove h1-h3, za male - h1 i h2.
Liste: označene i neobilježeneDobar strukturiran tekst uvijek ima jednu ili čak nekoliko lista. Prema izgledu, liste su:
- označeni - imaju numeraciju;
- neoznačeno – elementi su označeni simbolima.
- Stavka liste
- Stavka liste
- Stavka liste
- Stavka liste
- Stavka liste
- Stavka liste
- Stavka liste
- Stavka liste
Izlazi listu (prihvata stil, klasu, id parametre). Svaki novi element je upisan između
Na primjer, html kod:
Lista:Konvertuje se u sledeće na stranici:
Lista:
(kreiranje tabela)
- kreira tabelu (dozvoli stil, parametar klase). Svaki novi red kreiran je tagovima
, i kolona . Na primjer, html kod:
1-red 1 element 1. red 2. element 2-line 1 element 2-line 2 element Konvertuje se u sledeće na stranici:
Sve mogućnosti označavanja
13. HTML oznaka
(prekid reda)
- prijelaz na sljedeći red, je jedna oznaka.Na primjer, html kod:
Linija 1
2-line
3. red I ovaj tekst će biti u 3. redu, pošto nije bilo prelazaKonvertuje se u sledeće na stranici:
1-Line
14. HTML oznaka (horizontalna linija)
2-line
3. red I ovaj tekst će biti u 3. redu, pošto nije bilo prelaza- crta liniju, predstavlja jednu oznaku (dozvoli stil, parametar klase).
Na primjer, html kod:
Neki tekst iznad linije i ovaj tekst će biti ispod linijeKonvertuje se u sledeće na stranici:
Neki tekst iznad linije i ovaj tekst će biti ispod linije
15. HTML oznaka (izlaz slike)Na primjer, html kod:
http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg ">Konvertuje se u sledeće na stranici:
Sve mogućnosti označavanja biće obrađeno u posebnoj lekciji: .
16. HTML oznaka (formatiranje teksta)- za formatiranje teksta, promjenu stila itd. (dozvoljava stil parametra, klasu, id). Njegova težina u očima pretraživača je odsutna, pa ga možete koristiti koliko god želite.
Na primjer, html kod:
Ovaj tekst je zelene boje i njegova veličina je 15 pikselaKonvertuje se u sledeće na stranici:
BilješkaSlična oznaka je .
17. HTML oznaka (kreiranje obrasca)- kreiranje forme na stranici (dozvoli stil, parametar klase).
Na primjer, unos korisničkog imena i lozinke, bilo koje tipke, bilo koji obrazac za registraciju - sve su to obrasci.
18. HTML oznaka (kreiranje blokova)- koristi se za kreiranje blokova na stranici (dozvoli stil, parametar klase). Ranije su se tabele uglavnom koristile za označavanje stranica. Nakon što se oznaka pojavila, zadatak je postao lakši. Gotovo sve web stranice sadrže blokove kao zgodnu alternativu tablicama.
HTML jezik je zasnovan na konceptu oznake. tag- oznaka, etiketa). Oznake su zatvorene u ugaonim zagradama (< >) i formirajte parove - kontejnere (oznaka za otvaranje i oznaka za zatvaranje). Na primjer, kontejner HTML dokumenta je par oznaka i . Web stranica sadrži kontejnere odgovorne za naslov (glavu) dokumenta i koji sadrže dodatne informacije, kao i kontejnere odgovorne za sam sadržaj (tijelo) dokumenta. Oni su prikazani na slici.
Dakle, HTML dokument je sadržan u kontejneru, zaglavlje je sadržano u kontejneru, a sadržaj dokumenta je sadržan u kontejneru. Kontejner, koji se nalazi u zaglavlju (kontejneru), sadrži tekst koji se pojavljuje u gornjem redu prozora pretraživača. Oznake koje sadrže kodiranje, ključne riječi web stranice, kao i kod za povezivanje CSS kaskadnih datoteka stilova, javascript, VBScript, itd. također se mogu dodati u zaglavlje kontejnera.
Primjer jednostavne HTML stranice koja sadrži samo osnovne oznake:
Naslov stranice Sadržaj jednostavne stranice
Rezultat ovog koda je prikazan na slici.
Kao što možete vidjeti iz primjera, tekst “Sadržaj jednostavne stranice” se prikazuje u običnom tekstu. Da biste formatirali ovaj tekst, morate koristiti posebne oznake. Primjer korištenja oznaka za formatiranje prikazan je na slici.
Da biste promijenili font, njegovu boju i veličinu, koristite oznaku s parametrima “lice”, “boja” i “veličina”. Na primjer, da biste postavili font "arial" u crvenu boju i veličinu 14, potrebno je napisati sljedeći kod:
Formatirajte tekst
Da biste istakli pasus u tekstu, koristite oznaku
Svaki pasus teksta se obično stavlja u kontejner. Za kreiranje naslova koriste se oznake , , , , , .
Kontejneri i koriste se za formiranje lista u tijelu dokumenta. Štaviše, oznaka formira numerisanu listu, oznaku
- - lista za nabrajanje iu oznakama
Ali sav Word dizajn nije prikladan za publikacije na web stranici, pa je vrijedno naučiti kako pravilno formatirati liste u HTML oznakama.
Oznaka liste sa nabrajanjem izgleda ovako:Označite neoznačenu listu ovako:
Štaviše, svaki element liste ima svoj vlastiti HTML okvir:
Ispostavilo se da ćete morati kombinirati obje vrste korištenih elemenata da biste istaknuli listu s nabrajanjem u tekstu pomoću html koda. To će izgledati ovako:
Za neoznačenu listu je slično:
Sredili smo liste. Možemo dalje.
Oznake za isticanje teksta: podebljano i kurzivKada shvatite koja oznaka vam omogućava da pravilno formatirate tekst, gotovo odmah nailazite na dvije opcije koda za svaki slučaj. To izaziva zabunu među ne-programerima i pitanje: koja oznaka je tačno potrebna korisniku.
Sve je vrlo jednostavno! Oznake nude opcije fizičkog i logičkog oblikovanja. Prvi su potrebni korisnicima, drugi - pretraživačima. „Pretraživači“, videći html kod prikladan za sebe, uzimaju u obzir odabrano područje i koriste informacije primljene prilikom rangiranja, tako da isticanje teksta pomoću logičkog oblikovanja neće biti greška.
Korištenje html tagova omogućava udovoljavanje pretraživačima i vizualno isticanje teksta za korisnika. Šta je prioritetnije, odlučite sami:
Isticanje fraze podebljanim za PS i korisnike Isticanje fraze podebljanim za korisnike Ispisane fraze kurzivom za PS i korisnike Istaknite frazu za korisnike u kurzivu
Imam veliki i vrlo kontroverzan članak na temu podebljanih oznaka, koji se zove.
Ako iznenada neko od programera pogleda u temu, onda žurim još jednom napomenuti da je recenzija za copywritere: kako staviti oznake, šta su i što je važno uzeti u obzir pri odabiru. I na kraju, još jedan popularan html kod potreban za isticanje pasusa. Ovo
Početna oznaka se postavlja ispred početka pasusa, a završna na kraju. Ako se pasus završava listom, onda
se postavlja iza svih oznaka koje se koriste za listu.Pa, nekoliko jednostavnih tematskih infografika na kraju:
Kada je u komentarima počela rasprava o ovoj temi, Klub uspješnih copywritera dao je zanimljive povratne informacije o infografikama i članku. Evo snimka ekrana mišljenja jednog autoritativnog učesnika u diskusiji.
Pročitano: 3,365
Najbolji članci na ovu temu