Ovaj članak nema namjeru da bude iscrpan vodič za HTML označni jezik. Opisuje osnove HTML-a - osnovne principe, koncepte i definicije ove tehnologije, svladavši koju, lako možete nastaviti s proučavanjem HTML kodiranja.

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

HTML je jezik za označavanje dokumente... Točan izgovor - HT Em El.

Vjerojatno ste radili u uređivaču za Word dokumente ili slično uredske aplikacije? Vjerojatno znate da ova vrsta uređivača ima bogate mogućnosti za uređivanje teksta, pozicioniranja elemenata, umetanja slika itd.

Zašto, pitate, napisati HTML članak o programima za obradu teksta? Evo zašto. Ako razumijete što je uredski urednik? To je aplikacija za uređivanje i prikaz dokumenata.

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

HTML je jezik za označavanje dokumenta za preglednik... Word je ovdje preglednik, a dokument je HTML stranica.To je sama osnova HTML tehnologije, čije je razumijevanje neophodno kako se označni jezik web dokumenata ne bi zamijenio s programskim jezicima. Naziv govori sam za sebe - uz pomoć HTML-a mi označiti gdje će se element, slika ili tekst prikazati na stranici i kojim redoslijedom će se pratiti jedan za drugim.

Da, upisivanje i oblikovanje teksta u uredskim aplikacijama nema nikakve veze s programiranjem. Ali pažljiv čitatelj primijetit će važan detalj- u procesoru teksta upisujemo, uređujemo i formatiramo tekst i slike pomoću vizualnih gumba i izbornika, ali zašto je HTML kod pisan rukom? Zašto naučiti toliko tehničkih detalja o pisanju oznaka za dokument?

Zapravo, postoji mnogo uređivača s kojima možete kreirati i uređivati ​​HTML stranice po analogiji s Wordom. Odnosno, izvorni HTML kod nam je skriven i ne ulazimo u njega.

Neka vrsta Worda za HTML. Takvi vizualni uređivači nazivaju se:

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

Ja ih zovem "vuzivugi". Iako ovo fonetski nije točno, jasno pokazuje besmislenost ovog izuma. Početnici vrlo često koriste takve urednike za izradu svojih prvih stranica. Naravno, to 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č automatski pretvara naše radnje u HTML kod.

Ali, kako kažu, ništa se jednostavno ne događa. Točnije, ovaj pristup ima vrlo ozbiljne nedostatke. Ono što sprječava sve redom da koriste vizualne uređivače HTML izgled stranice? Činjenica je da ovako oblikovane stranice u pravilu imaju puno suvišnog koda, puno grešaka sa semantičke točke gledišta. Sada, naravno, nema problema s brzom internetskom 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 daje puno prednosti, i to:

• Kompetentan HTML kod ima pozitivan učinak na optimizaciju tražilice, brzinu indeksiranja web stranice od strane robota za pretraživanje. Generirani kilobajti koda ovdje su neprihvatljivi, pa čak i štetni;
• Generirani HTML kod WYSIWYG urednik ima puno semantičkih grešaka. Odnosno, oznake koje generira takav uređivač koriste se u druge svrhe, gdje trebate koristiti, na primjer, liste
  , urednik će nam generirati još jednu, nepotrebnu oznaku. Ovisi, naravno, o uredniku, ali ovdje mislimo složena rješenja za izradu web stranica, a ne samo za uređivanje teksta u tekstualnom području pomoću WYSIWYG alata.
  • Generira se puno nepotrebnih oznaka i struktura dokumenta je napuhana. Recimo da element u takvom programu pomičete prvo udesno, zatim ulijevo, pa u centar - svaka radnja ostavlja trag u izvornom HTML kodu. Editor je program i ne može znati što točno želite dobiti kao rezultat, generira tone koda uzimajući u obzir sve moguće opcije ponašanje dokumenta u pregledniku.
  • U pravilu uređivači za vizualizaciju HTML koda brzo zastare. A zbog nezainteresiranosti stručnjaka uglavnom gube podršku i prestaju se razvijati. A HTML se razvija. Sve se razvija, osim vuzivugi. Sukladno tome, ne mogu generirati ispravne i moderni kod, što bi uključivalo nove značajke i rješenja.
  • Podržavati i razvijati takve projekte je nebeska kazna. Korištenje uzoraka i ponovna upotreba koda ne dolazi u obzir.

  Dakle, HTML ćemo pisati samo olovkama. Adekvatni alati za vizualno HTML uređivanje još nisu smislili, a malo je vjerojatno da će se pojaviti. HTML označni jezik je jednostavan za naučiti i razumjeti, a alati za automatizaciju pisanje HTML-a Koda ima puno, ali više o tome u drugim lekcijama.

  Nakon što su se malo poigravali s WYSIWYG editorom, mladi HTML gurui napuštaju ovo beznadno zanimanje i kreću dalje.

  Struktura HTML dokumenta

  Preporučam da preuzmete i instalirate Sublime Text editor za nastavu. Toplo ne preporučam korištenje ugrađenog Windows "Notepad" za HTML izgled, ako ne želite slomiti svoju psihu u ranim fazama učenja HTML-a.

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

  Izradimo početni predložak na računalu - datoteku 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 iz primjera.

  - vrsta dokumenta (doctype)

  Ova konstrukcija je uvijek naznačena na početku dokumenta tako da preglednik ispravno "razumije" koja se verzija HTML-a koristi za izradu dokumenta.

  Zbog činjenice da se HTML neprestano razvija, ima nekoliko verzija, kao i svaki softverski proizvod. Trenutna verzija HTML-a je peta i navedena u primjeru doctype je relevantno.

  U principu, nema smisla ulaziti u proučavanje vrsta dokumenata, jer je s izdavanjem HTML5 ova konstrukcija postala standard. Samo ga umetnite na početak dokumenta svaki put kada počnete kodirati izgled svoje web stranice.

  - početak dokumenta

  Prva oznaka koju vidimo nakon doctype je .

  HTML oznaka- strukturna jedinica označavanja HTML dokumenta. HTML kod se sastoji od kockica koje se nazivaju oznake. Svaka oznaka ima svoju funkciju, a učenje HTML označnog jezika u konačnici je učenje oznaka i njihovih svojstava u dokumentu.

  Želio bih napomenuti da učenje HTML-a nije tako teško kao što se može činiti na prvi pogled. Učenje oznaka koje se koriste u označavanju dokumenta nije tako veliko opterećenje za mozak.

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

  , itd.

  Označiti je obavezan, jer sadrži cijelu strukturu dokumenta i omot je za ostale elemente.

  Označiti

  Dalje, vidimo označiti , 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 strukture:

  <тег>sadržaj ili druge oznake

  Označiti namijenjen je pohrani meta informacija HTML dokumenta, odnosno informacija koje se ne prikazuju u samom dokumentu, ali su važne i uvelike određuju kako će dokument izgledati i ponašati se.
  Ova oznaka je obavezna u dokumentu.

  Označiti

  Naslov

  Ovaj tekst će biti podebljan, a ovaj je također kurziv

  < ! 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 glave 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, također sadrži i element \ Sadržaj stranice

  < / html >

  Kao što vidite, nema ništa komplicirano. Ovdje su najosnovnije oznake koje bi trebale biti prisutne u svakom html dokumentu. Nemojte zaboraviti zatvoriti svaki od njih, inače preglednik neće moći vidjeti punu sliku koda. To se uvijek mora znati i zapamtiti. Zatim počinjete umetati tekst, slike, video zapise i tako dalje. Ali to će već biti u drugim člancima.

  Notepad ++ uređivač

  

  Koristite Notepad ++ za rad s kodom. Besplatno je, nije ga teško pronaći na internetu. Vrlo je prikladan za percepciju bilo kojeg koda, početna i završna oznaka također su prikladno prikazane. Podržavamo sintaksu više od 40 programskih jezika. Upravo ono što vam je potrebno da naučite osnove html-a.

  Notepad je u svakom pogledu bolji od običnog prijenosnog računala. Za maksimalnu udobnost, jednostavnost i učenje ovaj urednik u početku ga morate instalirati na svoje računalo. Najosnovnija prednost i praktičnost, Notepad uređivač++ pokazuje savjete prilikom pisanja koda, što čini vaš rad bržim i boljim s vremena na vrijeme.

  element DOCTYPE

  Svaki dokument također mora imati takav element doctype. Čemu služi i što bi u njemu trebalo biti. Ljudi obično ne vole te redove, kopiraju se u dokumente i rade mirno. Ovi elementi govore pregledniku koja se verzija html-a koristi u dokumentu, koji opis stranice, koje se kodiranje koristi, koje su ključne riječi uključene, tko 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. Ova praznina se može koristiti kao gotov predložak. Nadalje, bit će jasan opis svake linije, s tim ne bi trebalo biti problema.

  Ukratko jednostavnim jezikom o osnovama html-a: Ovaj redak govori pregledniku da je ovaj dokument XHTML verzija 1.0, koristi se engleski i sav ovaj nered se nalazi na ovoj adresi. Zatim, u meta oznaci, označavamo kodiranje koje se koristi. Najčešće se koristi Windows 1251.

  Opis - dotiče se teme SEO, jedne 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. Ključne riječi tag, tema SEO je također dotaknuta, ova oznaka je obavezna. Sadrži ključne riječi po kojima će vas korisnici Interneta pronaći putem tražilica.

  Oznaka title sadrži naslov samog dokumenta, njegov naslov, koji vidimo u pregledniku. Vjerojatno najvažnija oznaka u cijelom dokumentu koja ima najveći utjecaj na promociju stranice. Članak o dodavanju i oblikovanju sadrži detaljniji opis ove oznake.

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

  1. Gotovo sve oznake se otvaraju i zatvaraju;
  2. Dokument počinje oznakom ;
  3. Prisutnost oznake ;
  4. Prisutnost oznake ;
  5. Čisto html struktura dokument.

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

  Pogledajte video o osnovama html-a s webformyself-a.

  Jezik za označavanje hiperteksta, osnovni elementi i struktura. Pokušat ću sve ovo i još mnogo više opisati 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 ekst 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 odlomaka, popisa točaka s grafičkim oznakama ili pomoću slika i tablica podataka. Kao što naslov sugerira, ovaj će vam članak dati osnovno razumijevanje HTML-a i njegovih funkcija.

  Dakle, što je HTML?

  HTML nije programski jezik; to je jezik za označavanje 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 bi izgledao na određeni način ili djelovao na određeni način. Prilog za paragraf. Imajte na umu da završnoj oznaci "s name" prethodi znak kose crte>", te da u praznim elementima završna oznaka nije niti potrebna niti dopuštena. Ako atributi nisu spomenuti, zadane vrijednosti se koriste u svakom slučaju. "> Oznake mogu napraviti hipervezu riječi ili slike na negdje drugdje, mogu ispisivati ​​riječi u kurzivu, mogu povećati ili smanjiti font i tako dalje. Na primjer, uzmite sljedeći redak sadržaja:

  Moja mačka je jako mrzovoljna

  Ako želimo da red stoji samostalno, mogli bismo odrediti da se radi o odlomku tako da ga zatvorimo u oznake paragrafa:

  Moja mačka je jako mrzovoljna

  Anatomija HTML elementa

  Istražimo ovaj element odlomka malo dalje.

  Glavni dijelovi našeg elementa su sljedeći:

  1. Oznaka za otvaranje: Sastoji se od naziva elementa (u ovom slučaju p), omotanog u otvaranju i zatvaranju kutne zagrade... Ovo navodi gdje element počinje ili počinje djelovati - u ovom slučaju gdje počinje odlomak.
  2. Završna oznaka: Ovo je isto kao i početna oznaka, osim što uključuje a kosa crta ispred naziva elementa. Ovo navodi gdje element završava - u ovom slučaju gdje završava paragraf. Neuspješno dodavanje završne oznake jedna je od standardnih početničkih pogreš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 koji ne želite da se pojavi u stvarnom sadržaju. Ovdje je klasa atribut Ime, a editor-note je atribut vrijednost... Atribut klase omogućuje vam da elementu date identifikator koji se kasnije može koristiti za ciljanje elementa s informacijama o stilu i drugim stvarima.

  Atribut uvijek treba imati sljedeće:

  1. Razmak između njega i naziva elementa (ili prethodnog atributa, ako element već ima jedan ili više atributa).
  2. Naziv atributa, nakon kojeg slijedi znak 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 dosljednijim i razumljivijim.

  Elementi ugniježđenja

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

  Moja mačka je vrlo prgav.

  Međutim, morate biti sigurni da su vaši elementi ispravno 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. Preglednici obično prikazuju sadržaj podebljanim slovima. "> element; stoga moramo zatvoriti) označava da njegov sadržaj ima veliku važnost, ozbiljnost ili hitnost. Preglednici obično prikazuju sadržaj podebljanim slovima. "> prvi element, a zatim element predstavlja odlomak. ">

  element. Sljedeće je netočno:

  Moja mačka je vrlo 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 preglednik 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 nazivaju se praznih elemenata... 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 oznaku i bez unutarnjeg sadržaja. To je zato što element slike ne omota sadržaj kako bi utjecao na njega. Njegova je svrha ugraditi sliku u HTML stranicu na mjesto na kojem se pojavljuje.

  Anatomija HTML dokumenta

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

  

  Ovdje imamo sljedeće:

  • - Vrsta dokumenta. U magli vremena, kada je HTML bio mlad (oko 1991./92.), tipovi dokumenata trebali su djelovati kao veze na skup pravila kojih se HTML stranica morala pridržavati da bi se smatrala dobrim HTML-om, što bi moglo značiti automatsku provjeru grešaka i druge korisne stvari. Međutim, danas nitko o njima ne brine, a oni su samo povijesni artefakt koji treba uključiti da bi sve funkcioniralo kako treba. Za sada, to je sve što trebate znati.
  • - element predstavlja korijen (element najviše razine) HTML dokumenta, pa se također 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 strojno čitljive informacije (metapodatke) o dokumentu, kao što su njegov naslov, skripte i stilske tablice. "> element. Ovaj element djeluje kao spremnik za sve stvari ti želiš uključiti na HTML stranicu koja nije li "t sadržaj ti si prikazuje gledateljima vaše stranice. To 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 to ne postavite, a može pomoći u izbjegavanju nekih problema kasnije.
  • - the) definira dokument "s koji se prikazuje u traci preglednika ili kartici stranice.> - oznaka koja šalje naslov stranice u sadržaj;
  • , ,, - oznake za oblikovanje teksta i stvaranje podebljanog teksta, kurziv tekst, odbijanje odlomka, formiranje numeracije.

  Uz oznake, čiji rezultat posjetitelj stranice vidi u obliku podebljanog ili kurzivnog pisanja, tu su i servisne oznake koje se nazivaju meta tagovi i pružaju potrebne informacije tražilice, pregledniku, ali nije vidljivo normalnom korisniku.

  Da biste stvorili html stranicu, morate slijediti dolje opisane korake u nizu. Možete koristiti običnu bilježnicu.

  1) Napravite dokument. U njega umetnite sljedeći kod:

  Sadržaj ovog elementa bit će prikazan u pregledniku

  Bilješka: nužno u " »Navedite kodiranje dokumenta kao što je gore prikazano.

  2) Sljedeće: datoteka - spremite kao. U polju "vrsta datoteke" umjesto "txt" odaberite "Sve datoteke" (sve datoteke), u polju kodne stranice (kodiranje stranice) - odaberite 65001 (UTF-8), u polju "naziv datoteke" nakon naziv dokumenta, stavite točku i html ekstenziju (.html), a zatim kliknite Spremi. Sada imamo drugi dokument u istoj mapi, ali ovaj put u html-u. Ovo je naša web stranica koja se sada može otvoriti u bilo kojem pregledniku.

  Primjeri HTML koda

  • Tekst u odlomcima

  Stavak 1

  Stavak 2

  Stavak 3

  • Centralno poravnati naslovi i odlomci

  Ovaj naslov je centriran.

  Naslov druge razine je centriran.

  Tekst odlomka je centriran.

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

  Odlomak s ključnim riječima navedenim u "ključnim riječima"

  CSS - nadopunjujući html mehanizme

  Tamo gdje je html funkcionalnost nedostatna, Cascading Style Sheets - CSS dolazi u pomoć. Oni su naprednije i moćnije opcije za promjenu izgleda web stranice. CSS funkcionira u sprezi s html mogućnostima. Ova dva skupa parametara međusobno djeluju i ne zamjenjuju se ni na koji način.

  CSS opcije se mogu postaviti u sam web dokument korištenjem:

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

  Također se CSS savjeti mogu priložiti web dokumentu sa:

  • označiti postavljen između i;
  • @import direktiva smještena između oznaka.

  U procesu pisanja stilskog lista morate strogo slijediti posebnu sintaksu koja pretpostavlja podređenost elemenata i njihovu hijerarhiju, u kojoj su pozicije raspoređene između pokazivača, svojstva, vrijednosti, opisa i niza. U ovom slučaju, vitičaste zagrade koriste se za označavanje svojstava, a nekoliko svojstava može se dodijeliti svakoj oznaci odjednom.

  Načini uključivanja CSS stilskih tablica

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

  • umetnute tablice, u kojima je tablica stilova ugrađena u zaglavlje stranice pomoću oznake;