Pogledali smo primjer izrade jednostavne stranice gdje su dati komentari na neke html tagove, jer mi se čini da je bolje prvo pokazati nešto na primjeru pa onda 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 tekstualni odlomak (dopušta 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:
S ovim različitim vrijednostima možete uređivati izgled font. O ovim parametrima možete pročitati u zasebnoj lekciji: stilovi u html-u i svojstvo css fonta.
Možete i pisati atributi 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žilicama, pa ih je bolje ne koristiti 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
Označiti
koristi se za naslov stranice (kao i naslov)
Ove oznake moraju se koristiti samo za njihovu namjenu, tj. samo kad č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)
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 (na primjer, sliku)
8. HTML oznaka (interredni tekst)
- 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 (superskriptni tekst)
- prikazuje font superskripta.
Na primjer, html kod:
običan tekst, nadnaredni tekst
Pretvara se u sljedeće na stranici:
Običan tekst, tekst u superskriptu
10. HTML oznaka ,
, - prikazuje font za jedan piksel veći/manji od trenutne veličine (dopušteno stilom, klasom, id parametrom).
Na primjer, html kod:
Uobičajeni 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)
Prikazuje popis (prihvaća stil, klasu, id parametre). Svaki novi element upisuje se između
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
Na primjer, html kod:
1-redak 1 element 1. red 2. element 2-linijski 1 element 2-linijski 2 element
Pretvara se u sljedeće na stranici:
Sve mogućnosti oznake
| Označiti | Što to znači | Više detalja |
|---|---|---|
| Osnovni, temeljni | ||
| !doctype | Definira vrstu dokumenta | Određuje kako točno 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žne informacije o stranici | Neće biti prikazan na ekranu, ali je potreban za rad stranice (kodiranje, povezivanje listova stilova itd.) |
| titula | Naslov stranice | Glavni naslov bit će prikazan u tražilici iu gornjem retku preglednika |
| veza | Uključuje 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 zaglavlje č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 | Spremnik za prikaz sadržaja (osnovne 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 vodoravnu crtu preko cijele širine bloka u koji 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 poveznica. |
| 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 web mjestu. |
| 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 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 | Dizajniran 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 | Izlaz 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 radnja 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 registracijske podatke, 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 vam 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, tada 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 Na takvom popisu možete odabrati više vrijednosti. |
| 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 | Može biti neograničen broj ćelija u nizu. U samom redu nema potrebe stavljati ništa osim ćelija. |
| 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čnih oznaka izvora, koje uključuju put do datoteke. Do sada za kompatibilnost s više preglednika, web programeri moraju umetnuti više formata datoteka kako bi bilo koji web preglednik mogao ga identificirati. |
| video | Umeće video | Postupak je isti kao u slučaju zvuka. Prazan atribut kontrola 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.
Pozdrav, dragi čitatelji bloga. Zapravo, ovaj pojam ima nekoliko značenja koja se ni na koji poseban način ne uklapaju. Pokušat ću govoriti o svakom od njih u ovoj publikaciji.
Naučit ćeš, što su HTML oznake i kako se razlikuju od meta oznaka, i također naučite kako se oznake koriste kao oznake na web-lokacijama (njihova je raznolikost), i na kraju, pogledajmo općenito glazbene oznake u audio datotekama. Tako ovaj pojam postaje višestruk.
Ali u svim slučajevima riječ "tagovi" znači markup ili web-stranicu pomoću Html koda, ili cijelu web-lokaciju pomoću oznaka, ili vašu glazbenu kolekciju označavanjem albuma i pjesme.
Što su oznake na web stranici (oznake za kreiranje navigacije)
Počnimo jednostavno. Vjerojatno ste svi vidjeli da ispod nekih članaka na web stranicama postoji polje koje se zove oznake ili oznake, gdje su navedene neke riječi. Zašto se to radi? Općenito, kako biste olakšali navigaciju ovim mjestom ().
Koriste se oznake tzv ključne riječi, čiji skup ukratko karakterizira publikaciju (na primjer, sljedeći skup oznaka bio bi prikladan za glavnu stranicu mog bloga: izrada web stranice; promocija; promocija web stranice; zarada).
Uz pomoć ovih riječi moći će se jasno razaznati o čemu je riječ u ovom članku. Ali njihova glavna vrijednost nije to, već činjenica da posjetitelj može kliknuti na bilo koju oznaku i vidjeti popis svih članaka na stranici na kojoj se ona pojavila. U biti, to je moćan alat za klasificiranje informacija.
Kako ne bi tražili potrebne oznake ispod članaka, vlasnici web stranica vrlo često stvaraju tzv Oblak oznaka, koji se može postaviti u lijevi ili desni stupac stranice ili u njeno podnožje (dno). Ova sramota u praksi može izgledati ovako:
Obično navodi najpopularnije oznake, a sve oznake možete vidjeti klikom na odgovarajuću poveznicu. Ponekad se češće korištene oznake (pojavljuju se u više članaka na ovoj stranici) prikazuju većim fontom, a one rjeđe korištene manjim.
Ponekad se stvori zasebna stranica za njihov prikaz, kao što je prikazano na prethodnoj snimci zaslona.
Zašto je ovo metoda označavanja pomoću oznaka ne koristi se na svim web stranicama, ako je prilagođen korisniku? Nema ih ni na mom blogu, za što postoji niz objašnjenja. Iako je njihova upotreba predviđena prema zadanim postavkama, postoji i puno dodataka za rad s oznakama.
Da, oznake rade odlično kada imate nekoliko članaka i dobro se sjećate svih oznaka koje ste već izradili i koristili u drugim člancima. Ali s povećanjem broja materijala, broj oznaka se naglo povećava; one se počinju djelomično duplicirati kada se koriste ključne riječi bliskog značenja.
To rezultira velikim neredom, čija je vrijednost u smislu poboljšanja navigacije, po mom mišljenju, prilično dvojbena. U tu svrhu, na velikom web projektu, bolje je koristiti pretraživanje web mjesta. Iako oznake dobro funkcioniraju na društvenim mrežama, gdje pomoću oznaka možete kombinirati informacije različitih korisnika i pregledavati ih na jednom mjestu. .
Što su HTML oznake?
Prvi put sam ih odlučio proučavati prije petnaest godina, ali tada nisam napredovao dalje od oznake Title. Zatim sam naišao na besplatni video tečaj Evgeniya Popova o HTML-u i stvari su krenule dobro. Naravno, taj tečaj je bio samo početna faza, ali upravo ta jednostavna prezentacija često nedostaje početnicima.
Ove lekcije pokrivaju osnovne oznake, s kojima možete jednostavno stvarati tablice, umetati slike i hiperveze u tekst, dodavati različite obrasce na web mjesto i još mnogo toga. Ukupno 33 besplatna videa o HTML temama.
Ali video tečaj je video tečaj i moram vas zainteresirati da ga preuzmete i pogledate. Iz općih fraza nije jasno što su oznake u HTML jeziku i zašto ih morate proučavati. Oh ovo je super i jednostavna stvar, koji će vam omogućiti da postanete gospodar vlastite web stranice. Zašto vam je potrebna web stranica?
Pa, vjerojatno, prije svega, za samoizražavanje i trud, a drugo - . Samo šuti, inače će svi čuti i pobjeći proučavati što su to tagovi, praviti web stranice i zaraditi sve što samo ti možeš zaraditi, a ja sam u društvu. Stoga ću i dalje govoriti isključivo šapatom.
Internet se može usporediti s televizijom, gdje napravite vlastiti mali program (izradite web stranicu pomoću oznaka) i primate prihod od oglašavanja. Što je vaša emisija (internetski projekt) popularnija, to ćete više zaraditi. Ne postoji gornja granica, iako ne postoji ni donja. Ali ne trebate ulagati novac, samo svoj rad i vrijeme utrošeno na proučavanje oznaka, kako motor radi i, zapravo, punjenje stranice sadržajem.
Dakle, tagovi su najjednostavniji elementi označavanja web stranice kako bi preglednik prilikom učitavanja sa servera točno razumio kako treba prikazati određeni element (tekst, sliku, video). Ranije je za cijelu stvar bio odgovoran samo Html jezik, no onda su mu oni priskočili u pomoć i postalo mu je puno lakše. Popov također ima besplatni videotečaj o njima, koji možete preuzmi odavde .
Dečki, kada savladate HTML oznake, shvatit ćete da je to bilo lako kao guliti kruške. Najvažnije je pokrenuti se i nekako se stimulirati. Ne govorim vam samo o financijskoj strani. Stranica može postati vaš glavni izvor prihoda i od nje se može hraniti cijela obitelj. Trebate sreću, upornost i ne bojati se isprobavati nove stvari.
Oznake su različite, ali nema ih puno (od onih koji su ostali relevantni nakon uvođenja CSS-a). Pogledajte kako je jednostavno. Recimo da želite stvoriti odlomak - jednostavno okružite tekst budućeg odlomka početnom i završnom oznakom P (ovo je latinično slovo i u kodu je bolje da ga pišete malim, ali ovdje sam ga napravio velikim za jasnoća). Ovako će izgledati:
Tekst tekst...... tekst tekst
Razumijete li razliku između početne Html oznake (na početku) i završne oznake (na kraju)? Pa, naravno, samo sam dodao kosu crtu nakon trokutaste zagrade.
Oh, zaboravio sam reći Prema kojim kriterijima preglednik odvaja oznake?(markup) od glavnog sadržaja. Jeste li i sami pogodili?
Tako je, to je trokutaste zagrade, u kojem ih prilažemo. Preglednik je prilikom parsiranja koda web stranice vidio takvu zagradu i shvatio da se radi o oznaci, te obrađuje sve što se u njoj nalazi prema određenom algoritmu (pravi odlomke razmaknute po visini, povećava font naslova itd.) .
Ako u svom tekstu trebate koristiti početnu trokutastu zagradu, svakako to učinite s kako bi vas preglednik ispravno razumio. Ovo se mora zapamtiti.
U kodu mogu izgledati, na primjer, ovako:
Zapravo, oni sadrže opis i ključne riječi web stranicu za koju su registrirani. Pročitajte više o njima u članku iznad.
Meta tagovi se upisuju u kod web stranice na strogo određeno mjesto. Znate li koju? Tako je, u tzv. “glavi” dokumenta, koja se sastoji od otvaranja i zatvaranja HEAD oznake.
Sve što je napisano unutar njih (uključujući META oznake) neće biti prikazano na web stranici. Ovo je strogo zaštićena informacija. Gornji opis i ključne riječi govore tražilice o sadržaju ove web stranice i meta oznaku danu ispod.
Što su glazbene oznake u audio datotekama?
Kad ste puštali glazbu u autu ili na playeru (telefonu), vjerojatno ste više puta primijetili da se umjesto naslova pjesme i imena autora-izvođača prikazuje neko jezivo brbljanje. Moglo bi se pretpostaviti da su nazivi preuzetih glazbenih datoteka napisani u pogrešnom kodiranju ruskog jezika.
Ako preimenujete datoteke koristeći , i dalje ćete vidjeti neugodnu sliku na svom playeru. Što uraditi? I tko je kriv za ovakvo stanje? Čudno, ali razlozi su pogrešni propisane oznake u ovoj glazbenoj datoteci.
Oni su ušiveni izravno u audio datoteku (na njenom početku ili kraju) i mogu sadržavati informacije o skladbi, njezinom autoru, albumu, trajanju pjesme i još nešto što nije tako važno. U najnovijim inkarnacijama glazbenih oznaka u njih se mogu ušiti čak i slike omota CD-a (prava pošast).
Ali problem nastaje, u pravilu, ne u njihovoj dostupnosti, već u dobivanju mogućnost njihovog uređivanja. Dođe trenutak u životu svakog ljubitelja glazbe koji poštuje sebe kada je "spreman trgati i bacati", samo da posloži stvari u svojoj kolekciji i doda ispravne oznake svim pjesmama koje su čitljive na bilo kojem uređaju. Kako to učiniti?
Korištenje posebnog softvera. Sami tagovi su se u audio datotekama prvi put pojavili krajem prošlog stoljeća. Za MP3 datoteke standard za njihovo dodavanje nazvan je ID3, a za glazbene datoteke koje su komprimirane bez gubitka kvalitete (kao što je FLAC i slično) standard za dodavanje oznaka (meta podataka) nazvan je Vorbis komentar.
Za glazbu snimljenu u Windows WMA formatu postoje WM metapodaci, a za Apple MP4 postoje iTunes metapodaci (usput, o tome sam nedavno pisao).
Dakle, možete uređivati oznake pomoću posebnih programa. Najpopularniji od njih je vjerojatno Mp3tag(službena stranica, ali budite oprezni pri preuzimanju - nemojte slučajno kliknuti na oglas koji nudi preuzimanje nečeg sasvim drugog). Mislim da ćete sve ostale programe pronaći sami, tim više što će ovaj biti sasvim dovoljan za ovaj zadatak.
Ovako su se pokazale raznolike oznake koje su u svim tim slučajevima obavljale svoju glavnu ulogu - označavanje (članaka na web stranici, sadržaja na web stranici ili meta podataka u glazbene datoteke). Nadam se da sada imate manje pitanja o ovoj temi.
Sretno ti! Vidimo se uskoro na stranicama bloga
Moglo bi vas zanimati
Oznake za Instagram - zašto su potrebne i gdje vidjeti najpopularnije 
Hashtagovi – što su i kako se hashtagovi koriste na Twitteru, Instagramu i drugim mjestima Kako automatski dodati atribut Alt Img oznakama vašeg WordPress bloga (tamo gdje ih nemaju) 
Radikal - besplatan hosting za fotografije s brzim i jednostavnim učitavanjem fotografija putem Radikal.ru 
Link - što je to i kako ga stvoriti Što je predmemorija - kako očistiti predmemoriju u Operi, Mozilli, Chromeu i drugim preglednicima 
Veliko pitanje - kako zaraditi novac od usluge pitanja i odgovora 
Kako stvoriti vlastiti kanal na YouTube video hostingu?
Čovjek ne može živjeti samo od riječi,
ma koliko ih gutao.
Adlai Stevenson.
Općenito, HTML nije programski jezik. Ovo je HyperText Markup Language. Odnosno, nazovite to " HTML jezik" nije točno.
Jednostavno rečeno, HTML je popis oznaka(kontrolne riječi) koje vam omogućuju predstavljanje običnog teksta u formatiranom obliku. Na primjer, odaberite ga podebljano, ili kurziv itd. Ali tekst se može ovako prikazati samo u posebnim programima (programima kojima surfate internetom).
O njima prikaži samo formatirani tekst i sakrij HTML oznake, koji su korišteni za formatiranje. Kako bi vam bilo jasnije o čemu pričam, desnom tipkom miša kliknite ovu stranicu i odaberite “ Izvor" ili nešto slično. Ova stranica će se otvoriti pred vama u sadašnjem obliku.
Možete izraditi HTML kod u uobičajenom i korištenom obliku posebni programi, tzv. Vizualni uređivači razlikuju se od uređivača teksta po tome što su namijenjeni za upisivanje HTML, CSS, JavaScript, PHP itd. koda, odnosno za web programiranje. Osim toga, omogućuju vam da odmah vidite plodove svog rada u ugrađenom pregledniku i istaknete neke pogreške u unesenom kodu.
Toplo preporučujem ručno upisivanje cijelog koda (kako bi se poboljšala izravnost tih istih ruku), ali vizualni uređivači uvelike olakšavaju ovaj proces. Osobno, koristim. Ovo je daleko od najvišeg Najnovija verzija, ali njegove mogućnosti su mi više nego dovoljne.
Ja radim ovako: upišem kod u Dreamweaveru, zatim spremim i kliknem gumb “View in Browser” (popis preglednika u ovom izborniku uređujete sami), zatim se vratim u Dreamweaver i nastavim s uređivanjem. ovdje . To je to što se tiče alata, a sada prijeđimo na HTML oznake.
Počnimo sa strukturom HTML stranice, odnosno s njenim glavnim oznakama.
Potrebne oznake HTML stranice
Potrebne (osnovne) HTML oznake koje se koriste u svakom HTML dokumentu uključuju sljedeće:
Bilješka. Kako bi preglednik ispisao HTML kod kao tekst (a ne interpretirao ga u kod), nakon svake otvarajuće uglaste zagrade " „Ostavljam prostor. Kada upisujete kod, razmaci NEMOJ OTIĆI.
Kao što vidiš, sve oznake su uparene(postoji oznaka za otvaranje i oznaka za zatvaranje), gotovo sve oznake u HTML-u su ovakve. Razlika između početne i završne oznake je u tome što završnoj oznaci prethodi kosa crta " / " Takve se oznake također nazivaju spremnik, jer se između njih mogu umetnuti drugi tagovi, tj. stavite u kontejner. Vidite i sami da između oznaka postoje i druge oznake.
Nazive oznaka možete upisati velikim ili velikim slovima, nema razlike. Odnosno, zapisi tipa i za preglednik nemaju razlike i tumače se na isti način. Razgovarajmo sada detaljnije o značenju ovih oznaka.
Dakle, glavne oznake pokazuju preglednicima i drugim programima za pregled hipertekstualnih stranica da rade s hipertekstualnim dokumentom. Svaki html dokument mora započeti s i završiti s. Odnosno, između ovih oznaka postoji CIJELA HTML kod stranice.
Između oznaka nalaze se meta oznake (naslov stranice, opis, ključne riječi itd.). Oni pohranjuju informacije o html stranici i tehničke informacije. Općenito, ova oznaka nije obavezna, tj. bez nje će preglednici normalno prikazati HTML dokument. Ali čak i ako ne planirate koristiti područje naslova, barem ga napišite jednostavno. Ovo je neophodno za kompatibilnost između različite verzije programa.
Sve informacije koje se nalaze između oznaka “HEAD” preglednik ni na koji način ne prikazuje (osim informacija između oznaka, gdje se nalazi naziv html dokumenta, prikazan u gornja ploča preglednik). Ali mogu imati veliki utjecaj na izgled html stranice, njen život na internetu i rangiranje. Kasnije ćemo više govoriti o oznakama koje se nalaze u zaglavlju hipertekstualnog dokumenta.
Glavni sadržaj HTML dokumenta nalazi se između oznaka i . Ovdje je sve što vidimo kada otvorimo html stranicu: tekst, grafika, izbornici, gumbi, itd. Ovo je glavni “tijelo” stranice.
Sve druge oznake koje se koriste za stvaranje HTML dokumenta nalaze se između (tj. unutar) ovih potrebnih oznaka. Gotovo sve oznake u HTML-u imaju različite atribute, svojstva i parametre koji vam omogućuju da prikažete informacije točno onako kako je programer zamislio. Na primjer, ako napišete:
Tada će pozadina cijele stranice biti crvena.
Ovdje označiti- ovo je, zapravo, oznaka; bgcolor- njegov atribut; "#FF0000"- vrijednost atributa (oznaka može imati više atributa).
Bilješka. Svi atributi oznake i njihove vrijednosti navedeni su u otvor oznaka (onaj koji bez kosa crta), ali ni u kojem slučaju u završnoj.
I tako smo shvatili glavne oznake html dokumenta. Sada je vrijeme da detaljnije proučimo ostatak. Ovdje želim napraviti malu digresiju.
Kako predlažem učenje HTML-a
Primjenjujući stečeno znanje u praksi, shvatio sam kakvu je grešku napravila većina autora ovih knjiga i tutorijala. Svi ovi udžbenici, prvo, namijenjeni su za početnike, drugo, učenje osnova HTML-a ide na red.
T . Odnosno, prvo se razmatraju oznake naslova html dokumenta (), a zatim oznake "tijelo" ().
Na temelju vlastitog iskustva, usuđujem se reći da je ovaj postupak učenja osnova HTML-a kategorički neprihvatljiv za početnika. Početnik pokušava proučiti sve te brojne i malo razumljive oznake naslova, prvo, bez da vidi rezultate svog učenja (da vas podsjetim, oznake naslova ne prikazuju preglednik). I drugo, ni ne sluteći da većina tih oznaka neće biti potrebna za izradu stranice koju je planirao (barem na početku rada).
Time samo gubi vrijeme i želju da nastavi učiti HTML. Istovremeno, zadržavajući mišljenje da to mogu učiniti samo "gurui" za dobar novac. I ja bih odustao od ove aktivnosti da me nije briga za ono što još ne razumijem i da ne idem dalje.
Stoga predlažem da prvo razmotrite oznake koje se odnose na "tijelo" html dokumenta (), a tek onda prijeđite na ostalo. Štoviše, "tijelo" html stranice sadrži informacije po koje će posjetitelji doći. A stvaranje ili pronalaženje toga puno je teže nego pisanje koda.
Pa, sada, bez oklijevanja ni minute, kliknite gumb "Dalje" i nastavite saznavati kako ovi neobrijani i neispavani tipovi stvaraju web stranice.
