Ovaj članak ne tvrdi da je iscrpan vodič za HTML jezik za označavanje. Opisuje osnove HTML-a - osnovne principe, koncepte i definicije ove tehnologije, savladavši koju, možete lako preći na učenje HTML kodiranja.

Da biste proučili lekciju, preuzmite arhivu s potrebnim datotekama.

HTML je markup jezik dokumenata. Tačan izgovor - HTMEL.

Da li ste ikada radili u Word uređivaču dokumenata ili slično kancelarijske aplikacije? Vjerovatno znate da ovaj tip uređivača ima bogate mogućnosti za uređivanje teksta, sređivanje elemenata, umetanje slika itd.

Zašto, pitate se, pisati u članku o HTML-u o programima za obradu teksta? Ali zašto. Ako shvatite šta je uredski urednik? Ovo je aplikacija za uređivanje i prikaz dokumenata.

Ovdje je ključna riječ dokument . Odnosno, kreiramo, uređujemo i pregledavamo dokument u nekom programu, u ovom slučaju, u uredskom uređivaču. Ako otvorite takav dokument u jednostavnom uređivač teksta, na primjer, u Notepadu ćemo vidjeti puno čudnih znakova i znakova. Ova zbrka simbola je neshvatljiva čovječanstvu, ali razumljiva kompjuterima. Zahvaljujući ovom internom jeziku, Word dokument poprima određenu strukturu i izgled u samom uređivaču, a dokument se pred nama pojavljuje u svom svom sjaju sa formatiranim tekstom i slikama na svom mjestu.

HTML je markup jezik za pretraživač. Riječ "ovdje je pretraživač, a dokument je HTML stranica. Ovo je sama osnova HTML tehnologije, čije je razumijevanje neophodno kako se jezik za označavanje web dokumenata ne bi pobrkao sa programskim jezicima. Ime govori samo za sebe - uz pomoć HTML-a mi mark up, gdje će se element, slika ili tekst prikazati na stranici i kojim redoslijedom će se pojaviti jedan pored drugog.

Da, jednostavno kucanje i formatiranje teksta u uredskim aplikacijama nemaju nikakve veze s programiranjem. Ali pažljiv čitalac će primetiti važan detalj- u procesoru teksta kucamo, uređujemo i formatiramo tekst i slike pomoću vizuelnih dugmadi i menija, ali zašto se HTML kod piše ručno? Zašto proučavati toliko tehničkih detalja o pisanju oznaka za dokument?

U stvari, postoji mnogo uređivača pomoću kojih možete kreirati i uređivati ​​HTML stranice po analogiji sa Wordom. Odnosno, izvorni HTML kod je skriven za nas i mi se ne penjemo u njega.

Neka vrsta Worda za HTML. Ovi vizuelni uređivači se zovu:

WYSIWYG urednici - Wšešir Y ou S ee I s Wšešir Y ou G et. Odnosno, ako se prevede na ruski: ono što vidimo to i dobijamo.

Ja ih zovem "vuzici". Iako ovo nije fonetski ispravno, jasno ukazuje na uzaludnost ovog izuma. Početnici vrlo često koriste takve urednike za kreiranje svojih prvih stranica. Naravno, ovo je zgodno - ne morate se upuštati u proučavanje oznaka, stilova dizajna i drugih, na prvi pogled, neugodnih i složenih stvari. Sam uređivač će automatski konvertovati naše radnje u HTML kod.

Ali, kako kažu, ništa se jednostavno ne dešava. Tačnije, ovaj pristup ima veoma ozbiljne nedostatke. Ono što sprečava sve redom da koriste vizuelne uređivače HTML formatiranje stranice? Činjenica je da ovako formirane stranice obično imaju mnogo viška koda, mnogo grešaka sa semantičke tačke gledišta. Sada, naravno, nema problema sa brzom internet vezom i razlika u veličini stranice od 400 kb i 100 kb nije značajna za brzinu, međutim optimiziran i ispravno napisan HTML kod otklanja mnoge probleme i pruža mnogo prednosti, i to:

• Kompetentan HTML kod ima pozitivan učinak na optimizaciju pretraživača, brzinu indeksiranja web stranice od strane robota za pretraživanje. Generisani kilobajti koda ovde nisu prihvatljivi, pa čak i štetni;
• HTML kod generiran WYSIWYG editor ima mnogo semantičkih grešaka. Odnosno, oznake koje generiše takav uređivač koriste se u druge svrhe, gdje je potrebno koristiti npr. liste
  , uređivač će generirati još jednu oznaku koja nam nije potrebna. Zavisi, naravno, od urednika, ali ovdje mislimo kompleksna rješenja za kreiranje web stranica, a ne samo za uređivanje teksta u tekstualnom području pomoću WYSIWYG alata.
  • Generiše se mnogo nepotrebnih oznaka i struktura dokumenta je naduvana. Recimo da pomerate element u takvom programu, prvo udesno, zatim ulevo, pa u centar - svaka radnja ostavlja trag u izvornom HTML kodu. Urednik je program i on ne može znati šta tačno želite da dobijete kao rezultat, on generiše tone koda, uzimajući u obzir sve opcije ponašanje dokumenta u pretraživaču.
  • Po pravilu, uređivači za vizuelni dizajn HTML koda brzo zastarevaju. A zbog nezainteresovanosti profesionalaca uglavnom gube podršku i zaustavljaju se u razvoju. A HTML se razvija. Sve se razvija, osim vuzivugi. Shodno tome, ne mogu generirati ispravne i savremeni kod, u koji bi bili uključeni novi čipovi i rješenja.
  • Podržavati i razvijati takve projekte je nebeska kazna. O korištenju obrazaca i ponovnoj upotrebi koda uopće ne može biti govora.

  Dakle, pisaćemo HTML samo olovkama. Adekvatni alati za vizuelno HTML uređivanje još nisu izmišljeni i malo je vjerovatno da će se pojaviti. HTML jezik za označavanje je jednostavan za učenje i razumijevanje, kao i alati za automatizaciju HTML pisanje postoji mnogo koda, ali više o tome u drugim lekcijama.

  Nakon što su se malo petljali sa WYSIWYG editorom, mladi HTML gurui ostavljaju ovaj uzaludan zadatak i nastavljaju dalje.

  Struktura HTML dokumenta

  Preporučujem da preuzmete i instalirate Sublime Text editor za nastavu. Izričito ne preporučujem korišćenje Notepad-a ugrađenog u Windows za HTML izgled ako ne želite da razbijete svoju psihu u ranim fazama učenja HTML-a.

  Odlučili smo da ručno pišemo kod HTML dokumenta, tj typeset. HTML izgled- proces kreiranja HTML dokumenta. U običnim ljudima i upućenim krugovima - samo raspored. Svaki dokument ima strukturu i određena pravila izgradnja. Od kojih elemenata se sastoji kod, kakva je struktura HTML-a?

  Kreirajmo početni šablon na računaru - fajl index.html, otvorite ga u uređivaču i zalijepite sljedeći kod u njega:

  Tijelo dokumenta Imajte na umu da HTML dokumenti imaju ekstenziju .html.

  Dakle, redom prema primjeru.

  - vrsta dokumenta (doctype)

  Ova konstrukcija je uvijek naznačena na početku dokumenta tako da pretraživač ispravno "razumije" koja se verzija HTML-a koristi prilikom izrade dokumenta.

  Zbog činjenice da se HTML stalno razvija, ima nekoliko verzija, kao i svaki softverski proizvod. Trenutna HTML verzija je peta i data u primjeru doctype je ažuriran.

  U principu, nema smisla upuštati se u proučavanje tipova dokumenata, jer je izdavanjem HTML5 ovaj dizajn postao standard. Samo ga zalijepite na početak dokumenta svaki put kada počnete postavljati izgled stranice.

  - početak dokumenta

  Prva oznaka koju vidimo nakon doctype je .

  HTML oznaka- strukturna jedinica označavanja HTML dokumenta. HTML kod se sastoji od građevnih blokova koji se nazivaju tagovi. Svaka oznaka ima svoju funkciju, a proučavanje HTML jezika za označavanje, u konačnici, je upravo proučavanje oznaka i njihovih svojstava u dokumentu.

  Želio bih napomenuti da učenje HTML-a nije tako težak zadatak kao što se na prvi pogled čini. Učenje oznaka koje se koriste u označavanju dokumenata nije tako veliko opterećenje za mozak.

  Dakle, označavanje dokumenta počinje oznakom i završava sa završnom oznakom. Svaka oznaka koja sadrži druge oznake ili elemente mora biti zatvorena zatvaranje oznake. Na primjer, , ,

  , itd.

  Tag je obavezan jer sadrži cijelu strukturu dokumenta i omotava ostale elemente.

  Tag

  Dalje, vidimo tag , koji sadrži i druge elemente koji nam još nisu jasni. Sadrži druge elemente - to znači da se elementi ili oznake nalaze između otvaranja i zatvaranja oznake konstrukcije:

  <тег>sadržaj ili druge oznake

  Tag je dizajniran da pohrani meta-informacije HTML dokumenta, odnosno informacije koje se ne prikazuju u samom dokumentu, ali su važne i u velikoj mjeri određuju kako će dokument izgledati i ponašati se.
  Ova oznaka je obavezna u dokumentu.

  Tag

  header

  Ovaj tekst će biti podebljan, a ovo je u kurzivu

  < ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >HTML dokument< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

  Osnovni elementi naslova i naslova

  

  Svaki dokument ima element zaglavlja i element naslova. Prvi , koji dolazi odmah nakon prve oznake . Ova oznaka sadrži sve informacije o stranici, sadrži i element \Sadržaj stranice

  < / html >

  Kao što vidite, nema ništa komplikovano. Evo najosnovnijih oznaka koje bi trebale biti prisutne u svakom html dokumentu. Ne zaboravite zatvoriti svaki od njih, inače pretraživač neće moći vidjeti punu sliku koda. To se mora uvijek znati i pamtiti. Zatim počinjete da ubacujete tekst, slike, video zapise i tako dalje. Ali ovo će biti u drugim člancima.

  Notepad++ editor

  

  Koristite Notepad++ za rad sa kodom. Besplatno je i lako ga je pronaći na mreži. Vrlo zgodno za percepciju bilo kojeg koda, također je zgodno prikazati oznake otvaranja i zatvaranja. Podržavamo sintaksu više od 40 programskih jezika. Upravo ono što vam treba da naučite osnove html-a.

  Notepad je superiorniji u svakom pogledu od običnog notepada. Za maksimalnu udobnost, jednostavnost i učenje dati urednik mora prvo biti instaliran na računar. Najosnovnija prednost i pogodnost, uređivač notepad++ pokazuje savjete za pisanje koda, što čini vaš rad bržim i boljim s vremena na vrijeme.

  DOCTYPE element

  Svaki dokument također mora specificirati sljedeći element doctype. Zašto je to potrebno i šta bi trebalo da bude u njemu. Ljudi obično ne vole ove redove, kopiraju ih u dokumente i rade mirno. Ovi elementi govore pretraživaču koja se verzija html-a koristi u dokumentu, koji opis stranice, koje se kodiranje koristi, koje su ključne riječi uključene, ko je autor i kako se stranica zove.

  Obično se postavljaju na samom početku. Postoji nekoliko opcija i sve se razlikuju jedna od druge, napisat ću jedan primjer koji se najčešće koristi. Ovaj blank se može koristiti kao gotov šablon. Zatim će biti jasan opis svake linije, s tim ne bi trebalo biti problema.

  Ukratko razumljivim jezikom o osnovama html-a: Ova linija govori pretraživaču da je ovaj dokument XHTML verzija 1.0, koristi se engleski i sav ovaj nered se nalazi na ovoj adresi. Zatim, u meta oznaci, navedite kodiranje koje se koristi. Windows 1251 se najčešće koristi.

  Opis - tema SEO je pogođena, jedna od tri glavne oznake koje moraju biti prisutne u apsolutno svakom dokumentu, ova oznaka označava opis stranice. Ono što piše na ovoj stranici, kratak opis, ne više od dvije rečenice. Oznaka ključnih riječi također utiče na temu SEO, ova oznaka je obavezna. Sadrži ključne riječi po kojima će vas korisnici Interneta pronaći putem pretraživača.

  Oznaka title sadrži naziv samog dokumenta, njegov naslov, koji vidimo u pretraživaču. Vjerovatno najvažnija oznaka u cijelom dokumentu koja ima najveći utjecaj na promociju stranice. Članak o dodavanju i dizajnu detaljnije opisuje ovu oznaku.

  Ono što trebate zapamtiti iz ove lekcije o osnovama html-a:

  1. Gotovo sve oznake se otvaraju i zatvaraju;
  2. Dokument počinje oznakom ;
  3. Prisustvo oznaka ;
  4. Prisustvo oznaka ;
  5. jasno html struktura dokument.

  Sve glavne stranice treba uvijek biti imenovane riječju index. Tako je to prihvaćeno i svi su na to navikli, bez obzira koja će biti ekstenzija fajla, može biti i html i php. Uvek se tako zove.

  Pogledajte video o osnovama html-a sa Webformyself.

  Jezik za označavanje hiperteksta, osnovni elementi i struktura. Sve ovo i još mnogo toga pokušaću da opišem na svom blogu. Prije svega, bit će napisane korisne informacije za početnike, primjer koda i mogućnost preuzimanja samog primjera uz gotovu stranicu.

  html ( H yper t lok M arkup L anguage) je kod koji se koristi za strukturiranje web stranice i njenog sadržaja. Na primjer, sadržaj bi mogao biti strukturiran unutar skupa paragrafa, liste označenih tačaka ili korištenjem slika i tablica podataka. Kao što naslov sugerira, ovaj članak će vam dati osnovno razumijevanje HTML-a i njegovih funkcija.

  Dakle, šta je HTML?

  HTML nije programski jezik; to je markup language koji definira strukturu vašeg sadržaja. HTML se sastoji od niza elementi, koji koristite za zatvaranje ili omotavanje različitih dijelova sadržaja kako biste izgledali na određeni način ili djelovali na određeni način. Prilog za paragraf. Imajte na umu da nazivu završne oznake prethodi kosa crta>", te da u praznim elementima završna oznaka nije ni potrebna ni dozvoljena. Ako atributi nisu spomenuti, u svakom slučaju se koriste zadane vrijednosti.">oznake mogu napraviti hipervezu riječi ili slike na negdje drugdje, mogu kurzivizirati riječi, mogu povećati ili smanjiti font, itd. Na primjer, uzmite sljedeća linija sadržaja:

  Moja mačka je veoma mrzovoljna

  Ako želimo da linija stoji sama od sebe, mogli bismo odrediti da je to pasus tako što bismo ga zatvorili u oznake paragrafa:

  Moja mačka je veoma mrzovoljna

  Anatomija HTML elementa

  Istražimo ovaj element paragrafa malo dalje.

  Glavni dijelovi našeg elementa su sljedeći:

  1. Uvodna oznaka: Sastoji se od imena elementa (u ovom slučaju p), umotanog u otvaranje i zatvaranje ugaone zagrade. Ovo navodi gdje element počinje ili počinje djelovati - u ovom slučaju gdje počinje paragraf.
  2. Završna oznaka: Ovo je isto kao i početna oznaka, osim što uključuje a kosa crta naprijed prije naziva elementa. Ovo navodi gdje se element završava - u ovom slučaju gdje se završava paragraf. Neuspješno dodavanje završne oznake jedna je od standardnih početničkih grešaka i može dovesti do čudnih rezultata.
  3. sadržaj: Ovo je sadržaj elementa, koji je u ovom slučaju samo tekst.
  4. element: Početna oznaka, završna oznaka i sadržaj zajedno čine element.

  Elementi također mogu imati atribute koji izgledaju ovako:

  Atributi sadrže dodatne informacije o elementu za koji ne želite da se pojavljuje u stvarnom sadržaju. Ovdje je klasa atribut ime, a editor-note je atribut vrijednost. Atribut klase vam omogućava da elementu date identifikator koji se kasnije može koristiti za ciljanje elementa sa informacijama o stilu i drugim stvarima.

  Atribut bi uvijek trebao imati sljedeće:

  1. Razmak između njega i naziva elementa (ili prethodnog atributa, ako element već ima jedan ili više atributa).
  2. Ime atributa, praćeno znakom jednakosti.
  3. Vrijednost atributa, umotana u navodnike za otvaranje i zatvaranje.

  Bilješka: Jednostavne vrijednosti atributa koje ne sadrže ASCII razmak (ili bilo koji od znakova " " ` =< >) može ostati bez navodnika, ali se preporučuje da navedete sve vrijednosti atributa, jer to čini kod konzistentnijim i razumljivijim.

  elementi ugniježđenja

  Možete staviti elemente i unutar drugih elemenata - to se zove gniježđenje. Ako želimo reći da je naša mačka vrlo mrzovoljan, mogli bismo umotati riječ "veoma" u ) označava da njegov sadržaj ima veliku važnost, ozbiljnost ili hitnost. Pretraživači obično prikazuju sadržaj podebljanim slovima."> element, što znači da riječ treba jako naglasiti:

  Moja mačka je vrlo mrzovoljan.

  Međutim, morate biti sigurni da su vaši elementi pravilno ugniježđeni: u gornjem primjeru otvorili smo element koji predstavlja paragraf.">

  prvi element, a zatim ) označava da njegov sadržaj ima veliku važnost, ozbiljnost ili hitnost. Pretraživači obično prikazuju sadržaj podebljanim slovima."> element; stoga moramo zatvoriti ) označava da njegov sadržaj ima veliku važnost, ozbiljnost ili hitnost. Pretraživači obično prikazuju sadržaj podebljanim slovima."> prvo element, a zatim element predstavlja paragraf.">

  element. Sljedeće je netačno:

  Moja mačka je veoma mrzovoljan.

  Elementi se moraju pravilno otvarati i zatvarati tako da su jasno jedan unutar ili izvan drugog. Ako se preklapaju kao što je gore prikazano, tada će vaš web pretraživač pokušati najbolje pogoditi ono što ste htjeli reći, što može dovesti do neočekivanih rezultata. Zato nemojte to raditi!

  prazni elementi

  Neki elementi nemaju sadržaj i pozivaju se prazni elementi. Uzmite element koji ugrađuje sliku u dokument. To je zamijenjeni element."> element koji već imamo na našoj HTML stranici:

  

  Ovo sadrži dva atributa, ali nema zatvaranja oznaka i bez unutrašnjeg sadržaja. To je zato što element slike ne omota sadržaj da bi utjecao na njega. Njegova svrha je da ugradi sliku u HTML stranicu na mjesto na kojem se pojavljuje.

  Anatomija HTML dokumenta

  Ovo završava osnove pojedinačnih HTML elemenata, ali oni sami po sebi nisu zgodni. Sada ćemo pogledati kako se pojedinačni elementi kombinuju da formiraju cijelu HTML stranicu. Vratimo se kodu koji smo stavili u naš primjer index.html (koji smo prvi put sreli u članku Rad s datotekama):

  

  Evo, imamo sljedeće:

  • - Tip dokumenta. U magli vremena, kada je HTML bio mlad (oko 1991/92.), tipovi dokumenata su trebali djelovati kao veze do skupa pravila kojih je HTML stranica morala slijediti da bi se smatrala dobrim HTML-om, što bi moglo značiti automatsku provjeru grešaka i druge korisne stvari. Međutim, danas niko o njima ne brine, a oni su samo istorijski artefakt koji treba uključiti da bi sve funkcionisalo kako treba. Za sada, to je sve što trebate znati.
  • - element predstavlja korijen (element najvišeg nivoa) HTML dokumenta, tako da se naziva i korijenski element. Svi ostali elementi moraju biti potomci ovog elementa."> element. Ovaj element obavija sav sadržaj na cijeloj stranici i ponekad je poznat kao korijenski element.
  • - element sadrži mašinski čitljive informacije (metapodatke) o dokumentu, kao što su njegov naslov, skripte i stilski listovi."> element. Ovaj element djeluje kao kontejner za sve stvari ti želiš uključiti na HTML stranicu koja nije sadržaj ti si koji se prikazuje gledaocima vaše stranice. Ovo uključuje stvari kao što su ključne riječi i opis stranice koji želite da se pojavi u rezultatima pretraživanja, CSS za stiliziranje našeg sadržaja, deklaracije skupa znakova i još mnogo toga.
  • - Ovaj element postavlja skup znakova koji bi vaš dokument trebao koristiti na UTF-8, koji uključuje većinu znakova iz velike većine pisanih jezika. U suštini, sada može podnijeti bilo koji tekstualni sadržaj koji biste mogli staviti na njega. Nema razloga da ovo ne postavite, a može pomoći da se izbjegnu neki problemi kasnije.
  • - ) definiše dokument" koji se prikazuje u traci pretraživača ili kartici stranice.> - tag koji šalje naslov stranice u sadržaj;
  • , , , su oznake za formatiranje teksta i kreiraju podebljani tekst, kurziv tekst, koji odvajaju pasus, koji formiraju numeraciju.

  Uz oznake, čiji rezultat vidi posjetitelj stranice u obliku podebljanog ili kurzivnog slova, postoje i servisne oznake koje se nazivaju meta tagovi i pružaju potrebne informacije tražilice, pregledniku, ali nisu vidljivi normalnom korisniku.

  Da biste kreirali html stranicu, morate uzastopno izvršiti dolje opisane korake. Možete koristiti običnu notepad.

  1) Kreirajte dokument. U njega ubacite sljedeći kod:

  Sadržaj ovog elementa će biti prikazan u pretraživaču

  Bilješka: obavezno u » navedite kodiranje dokumenta kao što je prikazano iznad.

  2) Sljedeće: datoteka - sačuvaj kao. U polju "tip datoteke" umjesto "txt" odaberite "Sve datoteke" (sve datoteke), u polju kodna stranica (kodiranje stranice) - odaberite 65001 (UTF-8), u polju "ime datoteke" iza imena na dokument stavljamo tačku i ekstenziju html (.html), a zatim kliknemo na sačuvaj. Imamo drugi dokument u istom folderu, ali već u html-u. Ovo je naša web stranica, koja se sada može otvoriti u bilo kojem pretraživaču.

  primjeri html koda

  • Tekst podijeljen na pasuse

  Stav 1

  Stav 2

  Stav 3

  • Naslovi i paragrafi centrirani

  Ovaj naslov je poravnat po sredini.

  Naslov drugog nivoa je poravnat po sredini.

  Tekst pasusa je poravnat po sredini.

  • Meta tagovi, naslov stranice (naslov), opis stranice (opis) i ključne riječi (ključne riječi)

  Paragraf s ključnim riječima navedenim u "ključne riječi"

  CSS - komplementarni html mehanizmi

  Tamo gdje je funkcionalnost html-a nedovoljna, u pomoć priskaču kaskadni stilovi - CSS. Oni su napredne moćne opcije za promjenu izgleda web stranice. CSS funkcioniše u sprezi sa mogućnostima html-a. Ova dva skupa parametara međusobno djeluju i ni na koji način ne zamjenjuju jedan drugog.

  CSS opcije se mogu postaviti na sam web dokument koristeći:

  • oznake, koji se nalaze između oznaka i;
  • atribut stila koji se nalazi unutar bilo koje druge oznake.

  Također CSS savjeti mogu biti priloženi web dokumentu sa:

  • tag postavljen između i;
  • @import direktiva postavljena između oznaka.

  U procesu pisanja stilskog lista potrebno je striktno poštovati posebnu sintaksu koja uključuje podređenost elemenata i njihovu hijerarhiju, u kojoj su pozicije raspoređene između pokazivača, svojstva, vrijednosti, opisa i stringa. Vitičaste zagrade se koriste za označavanje svojstava, a više svojstava se može dodijeliti svakoj oznaci odjednom.

  Načini uključivanja CSS stilova

  Postoji nekoliko načina za povezivanje CSS-a sa html-om:

  • inline tabele, u kojima je stilski list ugrađen u zaglavlje stranice pomoću oznake;