Od autora: Zdravo svima. Svi želimo bolje razumjeti izradu web stranica kako bismo se uključili u zanimljive projekte i oživjeli naše ideje. Ali šta ako ste potpuni početnik? Naš html tutorijal za lutke sa praktičnim lekcijama pomoći će vam da konačno napravite tako važan iskorak u izgradnji web stranica od nulte razine do barem osnovnog razumijevanja.

U učenju izrade web stranica, kao iu gotovo svakom drugom poslu, praksa je važna. Recept za boršč možete pročitati 1000 puta, ali to vas neće natjerati da ga skuvate. Možete naučiti osnovne principe vožnje automobila, ali dok ne sjednete za volan, sve je to do sijalice. Nesumnjivo ima neke koristi od poznavanja teorije, ali ne toliko koliko od stvarnih vještina.

Dakle, ako govorimo o učenju html-a, onda postoji i teorija, ali postoji praksa. Teorija je u ovom slučaju samo neka vrsta serije članaka, lekcija na temu jezika, osnovnih oznaka i njihove primjene itd.

Vježba za vas počinje kada sami kreirate html datoteku, tamo napišete početni kod i počnete vlastitim rukama proučavati kako sve to funkcionira. Napisao oznaku, pogledao kako radi. Umetnuta slika - provjereno. Dodati neki atributi itd. To je praksa koja omogućava brzo razumijevanje i pamćenje glavnih oznaka. Onda ih samo napišete na mašini i ne morate da se sećate pola sata kako da napravite listu.

Pa, za rijetke oznake, uvijek biste trebali koristiti rječnik. Mislim da niko, niti jedan super layout dizajner i web developer, ne zna sve oznake napamet. To jednostavno nije potrebno. Ako koristite oznaku jednom svakih 10 godina, zašto je onda držati u glavi? Mislim da je to razumljivo.

Ali ja bih takvu praksu nazvao samo nekom vrstom igre sandbox-a. Vi samo pišete različite oznake, pokušavajući da se bavite svime što je detaljnije moguće, ali sve za šta? Mora postojati neka svrha. Obično se proučavaju html i css kako bi se potom kreirale vlastite web stranice i punopravne web stranice.

Dakle, najbolja praksa je da uzmete gotov izgled web stranice i postavite ga. Layout je upravo proces kreiranja web stranica iz višeslojnog crteža pomoću html i css jezika. Oni također mogu koristiti okvire, javascript i biblioteke aplikacija tokom izgleda, ali ovo je tema za drugi razgovor. Sve ovo je dodatak. Html je osnovna tehnologija koju treba dobro razumjeti.

Ali ja ću vas zadovoljiti - to je osnovno, najjednostavnije je. Naučiti kako određene oznake rade i kako ih primijeniti je vrlo lako. U html-u ne postoje složeni algoritmi, funkcije, metode, klase, kao što je to slučaj u programskim jezicima. Ovo je jezik za označavanje, dovoljno ga je malo proučiti i sve će biti vrlo jasno.

Kako naučiti jezik i gdje se uvježbati?

Opet, govorim o lakom učenju samo ako idete pravim putem. Odnosno, gledajte razumne video tutorijale, gdje su potrebne stvari objašnjene korak po korak, od jednostavnih do složenih. Ako gledate lekcije koje nisu napravljene prema ovom formatu, onda najvjerovatnije jednostavno nećete razumjeti većinu materijala.

Srećom, na našoj stranici sve lekcije su strukturirane i raspoređene od jednostavnih do složenih. Stoga, ako učite html prema našim lekcijama, onda neće biti problema sa savladavanjem gradiva.

Uvjeravam vas da je css zabavnije učiti! A u nekim aspektima čak i lakše. Prvo, css također ima dosta svojstava i pravila kojih morate zapamtiti. Drugo, ovaj jezik ima vrlo jednostavnu sintaksu, tako da čak i početnik neće imati problema s pisanjem koda u njemu. Treće, pošto je css zaslužan za izgled stranice, u početku ćete se oduševiti što ste učinili da stranica postane crvena, a napravili ste okvir za tu sliku.

Općenito, učenje css-a je jednostavno i zanimljivo, pa preporučujem da ne odgađate i počnete odmah nakon što završite s osnovama html-a.

Vaša poslednja vežba

Konačno, imate ispit. Ali ne brinite, biće lako. Štoviše, nećete to morati sami, već samo prema uputama koje se nalaze u lekcijama. Ovaj ispit je kurs. U njemu ćete konačno postići glavni posredni cilj - napraviti svoju prvu stranicu i shvatiti kako koristiti html i css u stvarnoj izgradnji web stranica. Neka to bude jednostavna stranica, ali stečeno znanje će vam biti dovoljno za dalji rast i stvaranje složenijih izgleda.

HTML je jezik za označavanje hiperteksta koji je web učinio onakvim kakvim ga poznajemo i volimo. Zahvaljujući ovom prekrasnom alatu stranice izgledaju lijepo i moderno, a osigurana je i pogodnost njihovog korištenja. HTML jednostavno raspoređuje elemente web stranice na način koji je prilagođen korisniku. Njegov rad je uporediv sa onim što rade MS Word ili OpenOffice. Oni pretvaraju bezličnu masu slova u dokument koji ima pasuse, podebljan tekst, kurziv, tabele, pa čak i slike. Približno isti jezik radi i HTML, sa jedinom razlikom što se njegovi dokumenti prikazuju u pretraživaču, a mogućnosti ovog alata su mnogo šire od onih kod uređivača teksta. Za označavanje se koriste oznake - posebne naredbe koje opisuju strukturu web stranice. One su zatvorene u ugaonim zagradama -<тег>tako da ih pretraživač može razlikovati od većine teksta. Zatim ćemo pokriti osnove HTML-a za početnike.

Vizuelni urednici

Početnici koji su tek stupili na put učenja HTML-a često započinju rad sa programima koji vam omogućavaju da kreirate sajtove bez ikakvog znanja. U njima možete jednostavno rasporediti elemente na ekranu onako kako će biti prikazani u pretraživaču. Čini se da je ovdje - izvor vječne milosti, koji vam omogućava da se riješite većine web programera. Ali nije sve tako jednostavno, budući da vizualni uređivači imaju puno nedostataka zbog kojih je nemoguće koristiti ih u ozbiljnim projektima.

Svi ovi programi stvaraju mnogo nepotrebnih oznaka koje konačnu verziju stranice čine glomaznom i neoptimalnom. Naravno, u ovo doba brzog interneta, ovo je manje važno nego prije, ali postoji niz razloga zašto se sažeta i dobro napisana stranica ispostavi da je praktičnija od svog pandana kreiranog u vizualnom uređivaču. Web stranicu napravljenu u takvom programu roboti za pretraživanje će loše obraditi, jer im je svaki kilobajt koda važan, a glomazan i nelogičan kod sa gomilom teško da će im se svidjeti. Osim toga, urednici su često u zaostatku, postaju nebitni i ne isplati se trošiti sredstva na njihov razvoj, jer niti jedan profesionalac ne koristi ove proizvode. Stoga bi svako ko želi da se bavi kreiranjem web stranica trebao poznavati osnove HTML-a.

oznake

Kao što je gore spomenuto, oznake opisuju strukturu web stranice pretraživaču. Većina njih ima oznaku otvaranja i zatvaranja, ali ne svi. Na primjer, , gdje je sadržaj umjesto tačaka. Prvi pokazuje gdje oznaka počinje, a drugi je zatvara. Unutra mogu biti drugi elementi za označavanje stranica, mogu se ugniježditi jedan unutar drugog poput lutke za gniježđenje. Važno je blagovremeno zatvoriti tagove kako bi stranica bila ispravno prikazana.

Postoje i pojedinačne oznake koje ne treba zatvarati. U njima je sadržaj unutra, baš kao što se može napisati za većinu HTML oznaka i postavlja svojstva elementa. Naznačen je u početnoj oznaci i izgleda otprilike ovako: atribut = "...", gdje se umjesto tačaka nalazi vrijednost atributa. Poznavanje oznaka je prvi i najvažniji korak u savladavanju HTML-a. Osnove ove umjetnosti također uključuju razumijevanje strukture web stranice.

Struktura dokumenta

Svaki HTML dokument ima odgovarajuću ekstenziju, kao što je Index.html. Tako pretraživač može razumjeti s čime se bavi i ispravno prikazati stranicu. Preporučljivo je da sve datoteke korištene za kreiranje stranice pohranite u jedan direktorij, što će vam uvelike olakšati život u budućnosti. Osnove HTML jezika za označavanje hiperteksta zahtevaju jasno razumevanje strukture dokumenta. Počinje sa oznakom, koji pretraživaču govori verziju HTML-a koja se koristi u ovom dokumentu. Trenutno je relevantna peta verzija jezika, tako da nema potrebe ništa izmišljati, možete sigurno umetnuti gornju oznaku na početak bilo koje stranice.

Zatim dolaze glavne uparene strukture koje čine "kostur" stranice. Prva oznaka u kojoj su svi ostali ugniježđeni − .... Sve što je izvan njega pretraživač ne prepoznaje kao web stranicu, pa otvara dokument i zatvara ga. Ova oznaka je potrebna za bilo koji dokument. Također sadrži još nekoliko potrebnih oznaka, o kojima će biti riječi u nastavku.

glava

Unutar oznake ... sadrži tehničke informacije koje neće biti prikazane na stranici, ali je ipak važan dio HTML dokumenta. Na ovom mjestu su postavljeni temelji stranice, ovdje se bira kodiranje i unosi naziv stranice. Sadrži se unutar obavezne oznake . Naziv se prikazuje na vrhu pretraživača, gde možete postaviti i malu ikonicu koja karakteriše sadržaj stranice. Preporučljivo je odmah odrediti kodiranje dokumenta za njegov ispravan prikaz. Ovo se može uraditi pomoću oznake . Meta oznake pružaju informacije o strukturi stranice i obično se nalaze unutar glave.

Veza

Poznavanje osnova HTML-a također uključuje korištenje kaskadnih stilova, ili css. Oni postavljaju svojstva elemenata koji će biti prikazani na stranici. Moderan pristup ovom zadatku uključuje uklanjanje takvih karakteristika kao što su boja, visina i lokacija elementa u vanjskoj datoteci radi veće udobnosti. Oznaka se koristi za povezivanje css datoteke . Kada se završi, izgleda ovako: , gdje href označava lokaciju datoteke, a tip označava njen tip.

Tijelo

U ovom dijelu HTML dokumenta kreira se vidljivi dio stranice. Sve što se radi unutar "tijela" će prikazati pretraživač. IN koristi se veliki broj HTML oznaka. Osnove su formatiranje teksta, rad sa linkovima i najjednostavniji alati za strukturiranje web stranice. Za početak rada u HTML-u dovoljno je poznavati osnovne tagove i znati ih koristiti. Ispod su najpopularniji:

• - koristi se za odabir podniza koji će biti podvrgnut posebnom stilu opisanom u css-u;
• - kreira link na web stranici; adresa za skok je postavljena atributom href;
• - jedna od najpopularnijih oznaka našeg vremena; svi koji se odluče naučiti osnove HTMLl jezika treba da obrate posebnu pažnju na to, jer se radi o blok elementu na osnovu kojeg se pravi lavovski dio modernih web stranica (parametri za blokove

  postavljeni su u css, a drugi blokovi se mogu postaviti unutar ove oznake);

• Odabire pasus iz teksta; sadržaj pasusa je između početne i završne oznake;

• - numerisana lista, čiji su elementi zatvoreni u par tag
  1. - lista sa nabrajanjem, u kojoj su, kao u numerisanoj listi, elementi označeni oznakom

     • -

       - zaglavlja dokumenta (broj označava nivo zaglavlja, tj

       - glavni naslov, a sljedeće opcije su njegovi podnaslovi, usput, naslovi nivoa

       ,

       gotovo nemoguće pronaći na Internetu), također je važno zapamtiti da može postojati samo jedan naslov po stranici

       ;

     • - sličica;
     • - kurziv;
     • - umetanje slike na web stranicu (ovo je jedan tag, ne treba mu tag za zatvaranje, ali mora sadržavati alt atribut, koji specificira tekst za sliku);

     Ovo nisu sve oznake koje su vam potrebne za kreiranje vlastite web stranice, ali su dovoljne da postave temelje HTML-a za početnike.

     css

     Razvoj HTML jezika doveo je do toga da je svaka oznaka stekla masu atributa, a zahtjevi za izgledom web stranica su značajno porasli. Kod je postao glomazan i nezgodan, bilo ga je teško pročitati, a kamoli prilagoditi ili promijeniti. Osim toga, ako imate deset stranica na vašoj web stranici koje imaju mnogo naslova označenih zelenom bojom, a odjednom želite da ih učinite crvenim, onda morate naporno raditi mijenjajući svaki ručno. Sa pojavom kaskadnih listova stilova, ovaj proces je postao jednostavan i logičan, a HTML kod je postao mnogo čitljiviji.

     

     Primjena CSS-a

     Da biste kreirali web stranice, morate poznavati osnove HTML-a i CSS-a, jer danas nema šta raditi u ovoj oblasti bez poznavanja kaskadnih stilova. Oni postavljaju atribute za bilo koji element koji se primjenjuje na cijeli dokument. Tako možete postaviti boju za sve elemente odjednom

     Or pisanje samo jednog pravila. S obzirom na moderne zahtjeve za izgled web stranica, upotreba kaskadnih stilskih tablica je obavezna.

     Da biste povezali css fajl sa dokumentom, postoji oznaka veze. Princip njegove upotrebe opisan je malo više, ali to nije jedina opcija za kombiniranje svih stilova na jednom mjestu. Postoji još jedna oznaka

     koristeći element . Element ne zahtijeva oznaku za zatvaranje. Ovaj element definira odnos između trenutne stranice i drugih dokumenata. Na stranici može biti nekoliko takvih elemenata. Unos će izgledati ovako:

     Tabela 4. Atributi oznake

     Atribut	Opis, prihvaćena vrijednost
     crossorigin	Određuje da li se CORS (tehnologija pretraživača koja omogućava web stranici da pristupi resursima s druge domene) treba koristiti prilikom preuzimanja slike sa web lokacije. anonimno - u zahtjevu za više domena, pretraživač automatski dodaje Origin zaglavlje koje sadrži naziv domene sa kojeg je zahtjev upućen. Ako server ne odgovori sa CORS zaglavljem Access-Control-Allow-Origin: * (ili imenom domene umjesto zvjezdice), tada će slika biti blokirana za učitavanje. use-credentials - ako server ne pruži vjerodajnice sa Access-Control-Allow-Credentials: true , tada će slika biti blokirana od učitavanja.
     href	Glavni atribut oznake, vrijednost je putanja do datoteke sa stilovima.
     hreflang	Određuje jezik teksta u povezanom dokumentu.
     medija	Određuje tip uređaja na koji će se primijeniti resurs veze.
     nonce	Server nasumično generirana varijabla stringa koja postavlja pravila za korištenje inline stilova za zaštitu sadržaja. Vrijednost atributa je niz teksta.
     rel	Atribut definira odnos između trenutnog dokumenta i referentnog dokumenta. alternativna - veza do istog dokumenta, ali u drugom formatu (na primjer, stranice za ispis, prijevod, ogledalo, RSS ili Atom feed), . arhiva ukazuje da je povezani dokument od istorijskog interesa. Veza može ukazivati ​​na zbirku zapisa, dokumenata i drugih materijala. autorski link na stranicu o autoru dokumenta ili na stranicu sa kontakt podacima autora. bookmark Referenca na najbližeg pretka članka koji je veza, ili na dio članka koji je najbliži povezan s elementom ako nema pretka. eksterno se koristi za označavanje da povezana stranica nije dio ove stranice. prvo specificira vezu do prvog dokumenta u nizu dokumenata. link pomoći na dokument pomoći. ikona određuje putanju do ikone koja će se koristiti za trenutni dokument. last specificira vezu do posljednjeg dokumenta u nizu dokumenata. licenca Veza do informacija o autorskim pravima za dokument. next označava da je ovaj dokument dio serije i da veza upućuje na sljedeći dokument u nizu. nofollow označava da link nije odobren od strane autora stranice ili da je link komercijalan. noreferrer specificira da se zaglavlje zahtjeva klijenta koje sadrži URL izvora zahtjeva ne smije prosljeđivati ​​kada slijedite vezu. pingback specificira adresu pingback servera, što omogućava blogu da automatski obavještava stranice koje se povezuju na njega. prefetch specificira da se referencirana datoteka treba unaprijed keširati. prev označava da je ovaj dokument dio serije i da veza upućuje na prethodni dokument u nizu. pretraga označava da navedeni dokument sadrži interfejs za pretraživanje i povezane resurse. bočna traka označava da će povezani dokument, ako je moguće, biti prikazan u dodatnom kontekstu pretraživača, a neki pretraživači, kada se klikne na hipervezu, otvoriće prozor za dodavanje veze na traku sa obeleživačima. stylesheet je referenca na eksternu datoteku koja će se koristiti kao stilska lista za ovaj dokument. tag označava da oznaka do koje vodi hiperveza pripada ovom dokumentu. up označava da je stranica dio hijerarhijske strukture i da hiperveza vodi do resursa višeg nivoa u strukturi.
     veličine	Određuje veličinu ikona za vizuelni prikaz. Atribut sizes se koristi samo u sprezi sa rel="icon" i može imati sljedeće vrijednosti: širina visina - definira listu veličina razdvojenih razmacima, svaka veličina mora biti u formatu - širina visina (veličine ikona su navedene u pikselima), na primjer: ; bilo koji - ikona se može skalirati na bilo koju veličinu.
     naslov	Određuje naslov veze ili naziv skupa alternativnih stilova. Vrijednost atributa je tekst.
     tip	Određuje MIME tip dokumenta na koji se povezuje. U ovom slučaju, uzima vrijednost "text/css".

     1.2.5. Element

     Govori pretraživaču da sve između ovih oznaka treba biti prikazano u prozoru vašeg pretraživača. Evo glavnih oznaka koje mogu biti prisutne u apsolutno svakom dokumentu. Oznaka body služi kao glavno tijelo stranice, koje uključuje sav njen sadržaj. Poželjno je da otvorite ovu oznaku i ne zaboravite da je zatvorite na kraju dokumenta.

     Naslovi stranica h1 h2 h3

     Idemo dalje, vidimo oznaku

     koji se takođe otvara i zatvara. Ova oznaka označava glavni naslov teksta, u većini slučajeva ispod naslova H1 je naslov stranice. U stvari, postoji samo šest zaglavlja podataka.

     . Koriste se i u SEO-u, ali ovo je malo drugačija tema. Svakako ću izdvojiti jedan članak za ovo i dati ih detaljan opis, pretplatiti se na ažuriranja bloga kako ništa ne biste propustili.

     Prisustvo takvog naslova u članku će igrati važnu ulogu u promociji stranice. Osim toga, njihova upotreba daje vam jasnu strukturu stranice, njen naslov, podnaslove, istaknute stavke, podstavke itd. Uvijek ih koristite i provodite u praksi. Na mnogim CMS-ima, kao što je WordPress, kada pišete tekst, primijetit ćete "Naslov 1", "Naslov 2", "Naslov 3" i tako dalje. Oni su odgovorni za h1, h2 i h3.

     Ako pišete osnovni tekst iz novog pasusa, pišete oznaku

     Na početku i zatvorite na kraju

     . Određivanje pasusa u html-u je ekvivalentno kreiranju novog pasusa u MS Word dokumentu. Nisam dodao ništa novo u dokument. Ali, to nije sve što bi trebalo da bude prisutno u html dokumentu. Pogledajmo još jedan primjer, opis će biti malo kasnije.

     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 preglednik neće moći vidjeti punu sliku koda. Ovo 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. Besplatan 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 praktičnost, jednostavnost i proučavanje, ovaj uređivač se prvo mora instalirati na računar. Najosnovnija prednost i praktičnost, uređivač Notepad++ pokazuje nagovještaje prilikom pisanja 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 jednostavnim 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 ime 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. Jasna struktura html dokumenta.

     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-a.

     jezik za označavanje hiperteksta, osnovni elementi i strukturu. 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.

     Svi koriste internet i svi pretražuju razne stranice, i vjerovatno bi svi htjeli staviti svoju stranicu na internet, ali to nije lako učiniti, ima mnogo razloga za to. Međutim, da biste mogli da ugostite kvalitetnu stranicu, samo trebate znati osnove " WEB programiranje", koji je HTML jezik. U ovom članku ćemo pogledati glavne elemente, oznake, atribute, pa čak i napisati prvu web stranicu.

     Jezik za označavanje hiperteksta- "HTML" ( jezik za označavanje hiperteksta) mnogi su ga odavno prestali smatrati samo programskim jezikom. Budući da sam koncept HTML-a uključuje različite metode dizajniranja hipertekstualnih dokumenata, dizajn, hipertekst editore, pretraživače i još mnogo toga. Korisnik koji je savladao ovaj jezik stiče sposobnost da radi ozbiljne stvari jednostavnim metodama i, što je najvažnije, brzo, što se u savremenom svetu smatra veoma dobrim!

     U HTML-u možete kreirati vlastite multimedijalne proizvode i distribuirati ih na CD-ovima, a svi ovi proizvodi, napravljeni u obliku skupova HTML stranica, ne zahtijevaju razvoj specijaliziranih softverskih alata, jer je sve potrebno za rad s podacima ( Web pretraživači) postali su dio standardnog softvera većine personalnih računara.

     • Element (element) je konstrukcija HTML jezika. Ovo je objekat koji sadrži podatke i omogućava vam da ih formatirate na određeni način. Svaka web stranica je skup elemenata. Jedna od glavnih ideja hiperteksta je mogućnost ugniježđenja elemenata.
     • Tag (tag) su početni ili završni markeri elementa. Oznake definiraju opseg elemenata i odvajaju elemente jedan od drugog. U tekstu web stranice, oznake su zatvorene u uglatim zagradama, a završnu oznaku uvijek prati kosa crta.
     • Atribut(atribut) - Parametar ili svojstvo elementa. Drugim riječima, ovo je varijabla koja ima standardno ime i kojoj se može dodijeliti određeni skup vrijednosti: standardni ili proizvoljni. Očekuje se da će vrijednosti znakova atributa biti zatvorene u ravnim navodnicima, ali neki pretraživači dozvoljavaju da se navodnici ne koriste. To je zato što je tip atributa uvijek poznat unaprijed. Atributi se nalaze unutar početne oznake i odvojeni su jedan od drugog razmacima.
     • Hyperlink- dio teksta koji je pokazivač na drugu datoteku ili objekt. Hiperveze su neophodne kako bi se omogućila navigacija od jednog dokumenta do drugog.
     • okvir (okvir) - ovaj izraz ima dva značenja. Prva je oblast dokumenta sa sopstvenim trakama za pomeranje. Druga vrijednost je jedna slika u kompleksu ( animacija) slikovna datoteka (slično kadru iz filma). Također je moguće da se umjesto pojma „okvir“ u stručnoj literaturi i lokaliziranim softverskim proizvodima nađe pojam „okvir“ ili „okvir“.
     • HTML fajl ili HTML stranica - dokument kreiran u obliku hiperteksta baziran na HTML jeziku. Takve datoteke imaju ekstenzije htm ili html.
     • Applet (applet) je program koji se prenosi na računar klijenta kao zasebna datoteka i pokreće prilikom pregleda web stranice.
     • Skripta ili skripta ( script) je program uključen uz web stranicu radi poboljšanja njenih mogućnosti.
     • Produžetak (proširenje) je element koji nije dio jezične specifikacije, ali se koristi, pružajući mogućnost stvaranja novog zanimljivog efekta oblikovanja.
     • CGI (Common Gateway Interface) je opšti naziv za programe koji, dok rade na serveru, omogućavaju vam da proširite mogućnosti Web stranica. Na primjer, bez takvih programa nemoguće je kreirati interaktivne stranice.
     • HTML kod - hiper Tekstualni dokument u izvornom obliku, kada su svi elementi i atributi vidljivi.
     • Web stranica— dokument (fajl) pripremljen u hipertekstualnom formatu i postavljen na World Wide Web.
     • Website (site) je skup web stranica smještenih na jednom mjestu i međusobno povezanih.
     • Pretraživač (Pretraživač) je web pretraživač.
     () - kopiranje datoteka sa servera na računar klijenta.
     • URL (Uniform Resource Locator) ili Uniform Resource Locator, adresa nekog objekta na Internetu, tj. tipičan WWW URL izgleda ovako: http://www.name.domain/filename.

     Svi elementi jezika mogu se uslovno podijeliti u tri grupe. Prvi uključuje elemente koji kreiraju strukturu hipertekstualnog dokumenta. Upotreba takvih elemenata je neophodna formalnost koja se ne može zanemariti. Druga grupa uključuje elemente koji stvaraju efekte oblikovanja. Njihovu upotrebu diktiraju specifični zahtjevi za dokument, mašta i kompetentnost programera.Treća grupa uključuje elemente koji vam omogućavaju da kontrolišete softver instaliran i pokrenut na klijentskom računaru. Često se takvi elementi kreiraju automatski kada programer koristi uređivač hiperteksta ili sličan program za umetanje nekog objekta u dokument.

     Iako je HTML specifikacija standard, jezik je proširen novim elementima ( ekstenzije). Stoga je neke web stranice lakše pregledati pomoću određenih pretraživača. Ekstenzije kreiraju samo poznate kompanije koje razvijaju softver za WWW, a obični korisnici mogu poboljšati svoje web stranice kroz programiranje. Apleti vam omogućavaju da uklonite ograničenja HTML-a i date slobodu mašti programera.

     HTML verzije

     Prvu verziju HTML jezika je ranih 90-ih razvio Tim BenersLee za jedan od popularnih pretraživača Mosaic u prošlosti. Ali tada, ni pretraživač ni sam HTML još nisu imali dobru upotrebu. 1993. godine pojavio se HTML+, a ova verzija je također prošla uglavnom nezapaženo. Ali širenje HTML jezika bilo je zbog verzije 2.0, koja se pojavila u junu 1994. godine. I od tada je došlo do povećanja popularnosti WWW-a širom svijeta. Standardi uključeni u verziju 2 toliko su se ukorijenili da se i danas koriste.

     HTML verzija 3.0, koja se pojavila godinu dana kasnije, uvela je mogućnost crtanja matematičkih simbola ( integralni znaci, beskonačnost, razlomci, zagrade itd.) koristeći elemente jezika. Ali razvoj ovog projekta je usporen i nije dobio dalju distribuciju.

     1996. godine pojavila se HTML verzija 3.2. Bila je to briljantna odluka, dovoljno je spomenuti da su okviri uvedeni u jezičku specifikaciju i da su sada vrlo popularni kod programera web stranica. Do danas, svi pretraživači podržavaju ovu verziju HTML-a.

     Zvanična HTML 4 specifikacija ( Dinamički HTML) je razvijen 1997. Već tada je bilo očigledno da će se dalji razvoj hiperteksta odvijati kroz web programiranje. Ovo se pokazalo mnogo efikasnijim od uvođenja novih elemenata u jezik.

     Struktura web stranice

     Ispod je kod web stranice, koji je napravljen u HTML-u, a koristeći ovu stranicu kao primjer, analiziraćemo njenu strukturu, ali prvo kopirajte sav kod u običnu tekstualnu bilježnicu i kliknite "Save As" i sačuvajte fajl sa html ekstenzijom, tj. napišite .html nakon naslova

     Struktura web dokumenta Skoči na kraj dokumenta<НR> <Н1>Naslov 1

     <Н2>Naslov 2 <НЗ>Naslov 3 <Н4>Naslov 4 <Н5>Naslov 5 <Н6>Naslov 6 <НR>Ovdje se nalazi prvi link<а name ="list2"> <НR> <р>Trebalo bi se nalaziti ovdje
     glavni tekst web stranice.
     I ja ću, na primjer, umetnuti ovdje
     nekoliko transfera,
     tako da možeš
     vizuelno posmatrati,
     kako to radi kod vas
     veze unutar dokumenta
     ali ako imate veliku rezoluciju,
     Jednostavno nećete primijetiti prijelaz na linkovima
     <НR> <а name="list1"

     Idi<а href ="#list">Početak dokumenta

     Da bi se razumjela struktura web stranice, potrebno je razmotriti sve njene elemente koji su uključeni u gornji kod.

     < html>

     Oznaka dokumenta u HTML-u. Jedan od principa jezika je višeslojno ugniježđenje elemenata. Ovaj element je najudaljeniji element jer cijela web stranica mora biti između početne i završne oznake. Prema ideji, ovaj element se može smatrati formalnošću. Ima atribute version, lang i dir, koji se rijetko koriste u ovom slučaju, i omogućava ugniježđenje HEAD, BODY FRAMESET i drugih elemenata koji definiraju cjelokupnu strukturu web stranice. Naravno, krajnja oznaka svi takvi dokumenti se ukidaju.

     < glava>

     Područje zaglavlja web stranice. Drugim riječima, njegov prvi dio. Kao i prethodni element, HEAD služi samo za formiranje opšte strukture dokumenta. Ovaj element može imati atribute lang i dir.

     < naslov>

     Element za postavljanje naslova web stranice. Red teksta koji se nalazi unutar ovog elementa se ne prikazuje u dokumentu, već u naslovnoj traci prozora pretraživača. Ovaj element uvelike utiče na promociju u pretraživaču. pretraživači posebnu pažnju obraćaju na oznaku TITLE. Moj savjet: nikada nemojte praviti dug tekst u ovoj oznaci ( 65 karaktera je dovoljno).

     <МЕТА>

     Ovaj element sadrži informacije o uslugama koje se ne prikazuju prilikom pregleda web stranice. Unutar njega nema teksta u uobičajenom smislu, tako da nema završne oznake. Svaki META element sadrži dva glavna atributa, od kojih prvi definira tip podataka, a drugi sadržaj.

     < tijelo>

     Ovaj element sadrži hipertekst koji definira stvarnu web stranicu. Ovo je vidljivi dio dokumenta koji stranica automatski razvija i koji se prikazuje u pretraživaču. Shodno tome, završnu oznaku ovog elementa treba tražiti na kraju web stranice. Unutar elementa BODY možete koristiti sve elemente za dizajniranje web stranice. Unutar početne oznake elementa BODY možete postaviti mnoge atribute koji služe za postavljanje cijele stranice. Razmotrimo ih redom.

     Jedan od najkorisnijih atributa ove oznake, koji ima uticaj na dizajn stranice, je

     background="put do pozadinskog fajla"

     Jednostavniji dizajn pozadine svodi se na postavljanje njene boje

     bgcolor="#FFFFFF"

     Boja pozadine je određena sa tri dvocifrena heksadecimalna broja koji definiraju intenzitet crvene, zelene i plave (rbg).

     Pošto možete promijeniti pozadinu stranice, možete promijeniti i boju teksta. Ovo ima sljedeći atribut

     text="#RRGGBB"

     Sljedeći atribut se koristi za postavljanje boje teksta hiperveza.

     link="#RRGGBB"

     Također možete odrediti promjenu boje za posljednju hipervezu koju je korisnik odabrao

     <Н1>

     Element zaglavlja. Postoji šest nivoa naslova koji su označeni na sledeći način.
     <Н1>header
     <Н2>header
     <Н3>header
     <Н4>header
     <Н5>header
     <Н6>header

     Zaglavlje nivoa 1 je najveće, a nivo 6 pruža najmanje zaglavlje. Za naslove možete koristiti atribut koji postavlja poravnanje lijevo, središte ili desno:

     align="left" align="center" align="right"

     Oznaka se koristi za kreiranje novog pasusa.

     I da pređete na novi red bez kreiranja paragrafa - oznake
     tj. postoji transfer. Ove oznake ne moraju biti zatvorene. Naravno, ako ne koristite u oznaci

     Element ALIGN, koji može postaviti poravnanje pasusa:

     lijevo

     Centrirano

     U redu

     Tekst između ovih elemenata je opravdan.

     <НR>

     Horizontalna linija ( horizontalno pravilo) je vrlo čest element. Prvo, zato što je uz njegovu pomoć vrlo lako i zgodno podijeliti stranicu na dijelove. Drugo, jer autor stranice ima vrlo mali izbor takvih elemenata dizajna. Element nema završnu oznaku, ali ima niz atributa za poravnavanje lijevo, središte, desno, poravnato:

     • poravnati = "lijevo"
     • align="centar"
     • align="desno"
     • align="justify"

     HTML dokument može biti veoma glomazan i nije baš zgodan za korisnika koji treba brzo da pređe na željeni deo dokumenta. Da biste to učinili, možete koristiti mehanizam hiperveza. Da biste to učinili, postavite odgovarajuće oznake na prava mjesta u tekstu.

     <а name=»метка»>Slobodan tekst

     U ovom slučaju, datoj liniji dokumenta je dato ime, pa se stoga drugi dio dokumenta, ili čak drugi dokument, može povezati s tom oznakom.

     Za umetanje slika ( Slike) u HTML dokumentu se koristi sljedeća oznaka ( pruža potpuni opis atributa ove oznake):
     

     Liste

     (list) su razvijeni u HTML-u, bez sumnje pod utjecajem uspjeha tekstualnih uređivača. Lista se razlikuje od običnog teksta, prije svega, po tome što korisnik ne mora razmišljati o numeraciji svojih stavki: HTML preuzima ovaj zadatak. Ako se lista dopuni novim stavkama ili skrati, numeracija se nastavlja automatski. U slučaju neuređenih lista, HTML svakoj stavci stavlja prefiks sa krugovima, pravougaonicima, dijamantima i drugim slikama. Na kraju, lista poprima pristojan oblik. Postoje dvije grupe takvih oznaka: jedna definira opći izgled liste ( i omogućavaju vam da specificirate atribute), dok drugi definišu njegovu unutrašnju strukturu. Liste mogu koristiti standardne atribute. Postoji nekoliko vrsta lista.

     Najčešća je neuređena lista ( neuređena lista). Predstavljen je u nastavku:

     • Stavka 1 liste
     • Tačka 2 liste
     • Stavka 3 liste

     Element ul je vrsta selekcije liste. Omogućava vam da odvojite jednu listu od druge. Element li označava svaku od stavki.

     stolovi

     One su jedno od najpotrebnijih sredstava za formatiranje podataka na web stranici. Glavna pogodnost je što pretraživač preuzima crtanje cijele tabele. Veličina okvira se može automatski prilagoditi veličini prozora preglednika i, naravno, veličini redova teksta i slika u ćelijama tabele. Između ostalog, tabele vam omogućavaju da rešite mnoge zadatke dizajna: poravnajte delove stranice jedan u odnosu na drugi, postavite slike i tekst jedan pored drugog, kontrolišete dizajn boja i tako dalje. Prilikom kreiranja tabela primjenjuje se princip ugniježđenja: unutar glavnog elementa tabele (TABLE) kreira se određeni broj elemenata koji definišu redove (TR), a unutar ovih elemenata nalaze se elementi za opisivanje svake ćelije u redu (TD , TH).

     Da bismo razumjeli strukturu postojeće tablice ili razvili novu tablicu, postoji jedno pravilo da redoslijed elemenata opisuje tablicu odozgo prema dolje i s desna na lijevo. Na primjer, ako je TR element naveden nakon elementa TABLE, to ukazuje da počinje opis novog reda tablice. Sve iza ovog elementa biće postavljeno u jednu liniju (s desna na levo). To može biti niz TD elemenata ( ćelije), druga tabela i tako dalje. Nakon što se pojavi novi TR element, počinje opis sljedećeg reda i tako dalje do kraja tabele (oznaka).
     Tabela se može horizontalno poravnati pomoću atributa align:

     • align="left" - lijevo;
     • align="center" - centriran;
     • align="desno" - udesno.

     Širina tabele se može postaviti tačno u pikselima ili kao procenat širine stranice u prozoru pretraživača. Na primjer: širina=400 ili širina=50%

     Dva atributa se koriste za kontrolu izgleda okvira. Činjenica je da pretraživač kreira sliku okvira, simulirajući njegovu trodimenzionalnost ( konveksan) koristeći razliku u osvjetljenju lica

     Scenariji

     Gotovo svi webmasteri žele da njihove stranice na stranici imaju moderan izgled, budu multifunkcionalne, lijepe i dinamične. Standardna sredstva HTML nije moguć, pa se koriste različita sredstva: apleti, objekti, kaskadni stilovi itd. Ali najpopularniji i najrašireniji tip ( prijem) je upotreba skriptiranja.

     Skripta je programski kod koji je uključen u tekst stranice u obrascu izvorni kod i izvršava se od strane pretraživača kada se stranica pregleda. Skripta se može napisati JavaScript, razvijen od strane Netscapea, ili u Visual Basic Script ( VBScript) koju je razvio Microsoft.

     Ova oznaka vam omogućava da odvojite tekst programa skripte od ostalih informacija na stranici. Oznaka SCRIPT mora uključivati ​​atribut jezika, koji definira jezik i može imati sljedeće vrijednosti:

     • javascript - JavaScript kod;
     • vbscript - VBScript kod.

     Atribut type takođe može ukazivati ​​na tip jezika, iako je njegova upotreba opciona. Kako ne biste prekršili sva pravila, unutar elementa možete staviti sljedeću definiciju:

     type="text/javascript"

     Jedna od najboljih karakteristika skriptiranja je mogućnost promjene sadržaja stranice kao rezultat izvršavanja programa. Ali ovo je samo karakteristika, a ne pravilo. Atribut odlaganja (koji ne uzima nikakvu vrijednost) može se koristiti da se pretraživaču "kaže" da takve promjene neće biti napravljene. U nekim slučajevima, ovo vam omogućava da ubrzate učitavanje stranice.

     Od standardnih atributa, možete koristiti atribut skupa znakova.

     Oznaka skripte ( ili više takvih elemenata) može se postaviti ili unutar elementa HEAD ili unutar elementa BODY. Ako je skripta unutar elementa BODY, također je moguće da će neki pretraživač koji ne podržava element SCRIPT percipirati programski kod kao običan tekst i prikazati ga na ekranu. Da se to ne dogodi, kod skripte se unosi kao komentar:

     —
     —
     —

     Svi moderni pretraživači prepoznaju ovaj trik i ignorišu znakove komentara. Ako trebate unijeti komentar u tekst skripte, tada se za to koristi druga oznaka: dvije kose crte // se unose na početku reda.
     Kod skripte se izvršava kada se stranica učita, tj. dok je sadržaj još uvijek vidljiv na ekranu. Ispod je primjer jednostavne skripte ( prikazivanje poruke u prozoru).

     —
     —
     —
     —
     —
     —
     —
     —

     Ovo je jednostavna stranica, ali uključuje skriptu u jednom redu. Metoda upozorenja prikazuje poruku prije učitavanja. I visi dok korisnik ne klikne na dugme OK, preuzimanje će se nastaviti.
     Može postojati slučaj, na primjer, stranica će biti pregledana u pretraživaču koji ne podržava skriptiranje, za to je predviđen element NOSCRIPT. Savremeni gledaoci ignorišu njegov sadržaj. Ovaj element se može koristiti na nekoliko načina. Za početak, unutar njega možete prikazati oglas poput ovog: Vaš pretraživač ne može izvršiti skriptu potrebnu za pregled ove web stranice!» Drugo, unutar elementa možete razviti pojednostavljenu verziju stranice, bez skripti. Treće, možete kreirati vezu do drugog HTML dokumenta. Element NOSCRIPT mora imati završnu oznaku.

     Ovdje smo s vama i ispitali smo osnove takvog WEB programskog jezika kao što je HTML. Čak i nakon čitanja ovog kratkog članka, već imate ideju, pa čak i mogućnost programiranja na ovom jeziku. Sretno!