HTML: Osnove za početnike

HTML je hipertekstni označni jezik koji je Internet učinio onako kako ga poznajemo i volimo. Zahvaljujući ovom prekrasnom alatu stranice izgledaju lijepo i moderno, a također pruža praktičnost njihove uporabe. HTML jezik jednostavno sastavlja elemente web stranice u user-friendly opciju. Njegov je posao usporediv s onim što rade urednici teksta kao što su MS Word ili OpenOffice. Okrenu masnu slova bez lica u dokument u kojem postoje stavci, podebljani tekst, kurziv, tablice i čak slike. Približno ista stvar čini HTML jezik, s jedinom razlikom u tome što se njezini dokumenti prikazuju u pregledniku, a mogućnosti ovog alata su puno šire nego u uređivaču teksta. Za označavanje upotrebljavaju se oznake - posebne naredbe koje opisuju strukturu web stranice. Ograđene su u kutnim zagradama - tako da ih preglednik može razlikovati od ukupne težine teksta. Zatim ćemo pogledati osnove HTML-a za početnike.

Vizualni urednici

Početnici koji su upravo krenuli na put učenja HTML često započinju svoj rad s programima koji vam omogućuju stvaranje web stranica bez ikakvog znanja. U njima možete jednostavno urediti stavke na zaslonu jer će se prikazivati ​​u pregledniku. Čini se da je ovdje - izvor vječne milosti, što dopušta da se riješi većine web programera. No, sve nije tako jednostavno, jer vizualni urednici imaju puno nedostataka koji ih nemoguće koristiti u ozbiljnim projektima.

Svi ovi programi stvaraju puno nepotrebnih oznaka koje čine konačnu verziju stranice nespretnim i suboptimalnim. Naravno, u ovo doba Interneta velike brzine je od manje važnosti nego u prošlosti, ali postoje brojni razlozi zašto je koncizan i dobro napisana web stranice je više praktičan nego njegove kolege stvorili u vizualnom editoru. Web stranice su u takvom programu će biti teško liječiti tražilicama kao važno za njih svakih kilobajta koda i nespretne i nelogičnog kod sa hrpom semantičkih pogrešaka teško ih morate probati. Osim toga, urednici često iza vremena, postaju beznačajni i trošenju sredstava na njihov razvoj je nepraktično jer nije profesionalni neće koristiti ove proizvode. Stoga, svatko tko želi raditi na polju izrade web mjesta, mora znati osnove HTML-a.

oznake

Kao što je gore spomenuto, oznake opisuju strukturu web stranice pregledniku. Većina njih ima oznaku za otvaranje i zatvaranje, ali ne i sve. Na primjer, , gdje umjesto bodova postoji sadržaj. Prva prikazuje gdje počinje oznaka, a drugi ga zatvara. Unutar mogu biti i drugi elementi izgleda stranica, mogu se međusobno povezati kao lutka. Važno je pravovremeno zatvarati oznake tako da stranica bude ispravno prikazana.

Postoje i pojedinačne oznake koje ne moraju biti zatvorene. Sadrže sadržaj unutar, kao i atributa. atribut može se registrirati za većinu HTML oznaka i određuje svojstva elementa. Označeno je u početnoj oznaci i izgleda ovako: attribute = "...", gdje umjesto bodova postoji vrijednost atributa. Poznavanje oznaka prvi je i najvažniji korak za svladavanje HTML-a. Osnove ove umjetnosti također znače razumijevanje strukture web stranice.

Struktura dokumenta

Svaki HTML dokument ima odgovarajuće proširenje, na primjer, Index.html. Na taj način preglednik može razumjeti s čime se bavi i ispravno prikazati stranicu. Sve datoteke koje se koriste za izradu stranice, poželjno je pohraniti u jedan katalog, koji će u budućnosti uvelike olakšati vaš život. Osnove HTML hipertekstualnog označnog jezika pretpostavljaju jasno razumijevanje strukture dokumenta. Počinje s oznakom , obavještavajući preglednik verzije HTML-a koji se koristi u ovom dokumentu. Trenutačno je peta verzija jezika relevantna pa nema ničega za izmišljanje, možete sigurno umetnuti gore navedenu oznaku pri vrhu bilo koje stranice.

Onda su glavne spojene strukture koje čine "kostur" stranice. Prva oznaka, u kojoj su svi ostali ugrađeni - .... Sve što je izvan nje, preglednik ne prepoznaje kao web stranicu, tako da otvara dokument i zatvara ga. Oznaka je obavezna za svaki dokument. Sadrži još nekoliko obaveznih oznaka, što će biti obrađeno u nastavku.

glava

Unutar oznake ... sadrži tehničke podatke koji se neće prikazati na stranici, ali ipak je važan dio HTML dokumenta. Osnove stranice položene su točno na ovom mjestu, ovdje je odabrano kodiranje i upisuje se naziv stranice. Sadržan je unutar potrebne oznake . Prikazuje se naziv na vrhu preglednika, gdje možete postaviti i malu ikonu koja karakterizira sadržaj stranice. Poželjno je odmah odrediti kodiranje dokumenta za ispravni prikaz. To se može učiniti uz pomoć oznake. Meta tagovi pružaju podatke o strukturi stranice i obično se nalaze unutar glave.

link

Znanje o osnovama HTML-a također uključuje upotrebu kaskadnih stilova dizajna ili css. Oni postavljaju svojstva elemenata koji će biti prikazani na stranici. Suvremeni pristup ovom zadatku uključuje stvaranje takvih karakteristika kao boja, visina i položaj elemenata, u vanjsku datoteku radi veće praktičnosti. Da biste spojili css datoteku, upotrijebite oznaku . U gotovom obliku, izgleda ovako: , gdje href označava mjesto datoteke i upišite - na njegovu vrstu.

tijelo

U ovom je dijelu HTML dokumenta izrađen vidljiv dio stranice. Sve što je učinjeno unutar "tijela" prikazat će preglednik. U Ogroman broj HTML oznaka se koristi. Osnove su oblikovanje teksta, raditi s vezama i najjednostavnijim alatima za strukturiranje web stranice. Da biste počeli koristiti HTML, dovoljno je znati osnovne oznake i moći ih koristiti. Ispod su najpopularniji:

• - Koristi se za odabir podnožja na koji će se primjenjivati ​​posebni stil opisani u css;
• - stvara vezu na web stranicu - adresu tranzicije određuje href-
• - jedan od najpopularnijih tagova naš dan svima koji su odlučili naučiti osnove jezika HTMLl obratiti posebnu pozornost na to, jer je blok element, koji je izrađen na temelju najveći dio današnjih web stranica (parametri za blokove
  navedeni su u css, a drugi se blokovi mogu nalaziti unutar ove oznake)

• - odabire stavak iz teksta - sadržaj odlomka između oznaka otvaranja i zatvaranja;

• - Brojčani popis, čiji su elementi sadržani u uparivanju
• ;
- popis s grafičkim oznakama, u kojoj su, kao i u brojevima, elementi označeni oznakom
• ;
• - podebljano tekst-
• - kursiv-
• - umetanje slike na web stranicu (to je jedna oznaka, ne treba zatvaranje oznake, ali je potrebno navesti alt atribut koji određuje tekst slike);

Ovo nisu sve oznake potrebne za stvaranje vlastite web stranice, ali su dovoljne za postavljanje temelja HTML-a za početnike.

CSS

Razvoj HTML jezika dovelo je do činjenice da svaku oznaku obzavolsya težina atribute, a zahtjevi za izgled web stranice znači znatno povećao. Kôd je postao težak i neugodan, teško ga je pročitati, a ne ono što se prilagoditi ili mijenjati. Osim toga, onda su na znoj, mijenja svaku ruku ako vaš site deset stranica, na kojima je puno naslova, označena zelenom bojom, a ti odjednom htjeli da ih crveno. S dolaskom Cascading Style Sheets, ovaj proces je postao jednostavan i logičan, i HTML-kod je postala mnogo više čitati.

Primjena CSS-a

Da biste stvorili web stranice, morate znati osnove HTML-a i CSS-a, jer sada bez znanja o kaskadnim stilskim listovima nema ničega na tom području. Navode atribute za bilo koji element koji se odnosi na cijeli dokument. Tako možete postaviti boju za sve elemente odjednom

ili , nakon što je napisao samo jedno pravilo. S obzirom na suvremene zahtjeve za izgled web stranica, korištenje kaskadnih stilskih listova je obavezno.

Da biste povezali css datoteku s dokumentom, postoji oznaka za povezivanje. Malo iznad, opisan je princip korištenja, ali nije jedina mogućnost kombiniranja svih stilova na jednom mjestu. Tu je i oznaka

jаvascript

Često, osoba koja je odlučila razviti web stranice, razumije da za svoje zadatke nema dovoljno alata koji nude HTML. Osnove će vam omogućiti da stvorite lijepu stranicu, ali što ako iznenada trebate učiniti interaktivnim? U tu svrhu postoji jedinstveni programski jezik koji savršeno komunicira s HTML-om. Zove se jаvascript, jer je zamišljen kao mlađi brat popularnog Java jezika. Danas su ti jezici stekli značajne razlike, a jaz između njih samo raste.

jаvascript može poboljšati mogućnosti HTML-a, omogućava vam stvaranje i uređivanje oznaka. Osim toga, pomoću ovog prekrasnog alata možete raditi s Cokieom, preuzeti podatke s poslužitelja bez ponovno učitavanja stranice, učiniti web-lokaciju interaktivnijim od omogućavanja HTML-a. Ovaj jezik također ima ograničenja koja se odnose na sigurnost. Ako se jаvascript ne koristi na strani poslužitelja, to će se izvršiti u uvjetima koji ograničavaju njegove mogućnosti, tako da napadači ne mogu koristiti zlonamjerni kôd na bilo kojem računalu.

urednici

Osnove HTML-a za početnike sugeriraju znanje o najprikladnijim i praktičnim programima za stvaranje web stranica. Kao što je gore napomenuto, vizualni urednici, kao što su Dreamweaver i slično, nisu prikladni za tu svrhu. Znači, napišite oznake u redovitom prijenosnom računalu? Ova je mogućnost također upitna jer standardni prijenosnik nema posebne alate za izgled. Notepad ++ može dobro nositi ovaj zadatak. Veliki plus ovog proizvoda je da ima otvoreni izvor i potpuno je besplatan. Ima prikladnu isticanje sintakse i automatsko zatvaranje oznaka. Notepad ++ također nudi širok izbor jezika sučelja, a njegove sposobnosti lako se proširuju s brojnim dodatcima.

Sublime Text 3 - program sličan Notepad ++, ali se širi na temelju naknade. Ona je osvojila srca većine programera. Sublime Text 3 je idealan za jаvascript, CSS i HTML. Osnove rada s njim morat će se samostalno proučavati, ali to je vrijedno. Ima doista beskrajne mogućnosti za fino podešavanje, što vam omogućuje maksimalno povećanje programa za vaše potrebe.

Osnove HTML i CSS za početnike

Kao što možete vidjeti, proučavanje umjetnosti stvaranja web stranica nije tako teško kao što se čini na prvi pogled. Samo nekoliko mjeseci praktičnog treninga će vas pretvoriti od plašljivog korisnika u početni razvojni programer. Učenje za izradom izgleda mnogo je lakše od učenja programskog jezika ili Linuxa. Zapravo, HTML oznake nisu toliko, važno je razumjeti praktični aspekt njihove primjene.

Nije suvišno u ovom slučaju biti vještina rada u Adobe Photoshopu. Ovaj program vam omogućuje rad s fotografijama, slikama i drugim grafičkim elementima web stranice. Trenutno, to je "Photoshop" najbolje rješava takve probleme, ima malo konkurenata. Za one koji ne vole ovaj Adobe proizvod, tu su Lightroom, GIMP, Illustrator i drugi programi sa sličnim funkcijama.

Ono što daje znanje o HTML-u

Vještine stvaranja web stranica danas su vrlo relevantne, jer se Internet širi skokovima i granicama. Svako poduzeće, bilo tko, čak i najmanji dućan, radionice i sportski klubovi - svi žele imati vlastitu web stranicu. Naravno, za to će trebati programer koji posjeduje CSS i HTML. Osnove su jednostavne za svladavanje, nakon čega je stvar iza prakse. Budući da se tehnologije izgleda neprekidno razvijaju, razvojni programeri prednja strana uvijek će biti traženi. Svatko tko odluči posvetiti se ovoj zanimljivoj industriji nikada neće ostati bez posla.