Povijest nastanka i razvoja HTML-a. Osnove HTML jezika Što je HTML jezik?

💖 Sviđa li vam se? Podijelite vezu sa svojim prijateljima

U ovom članku ćemo se pozabaviti pitanjem što je html i pogledati povijest njegovog razvoja. Razgovarajmo o tome kako izraditi web stranicu i je li to uopće teško. Dakle, počnimo

1. HTML kod - što je to jednostavnim riječima

HTML (hyper text markup language) je poseban označni jezik koji se koristi za izradu web stranica na Internetu.

Preglednici savršeno razumiju html i mogu ga interpretirati na razumljiv način. Općenito, svaka stranica web mjesta je html kod koji preglednik prevodi u oblik prilagođen korisniku. Usput, kod bilo koje stranice dostupan je svima. Da biste ga vidjeli, desnom tipkom miša kliknite i odaberite prikaz izvornog koda ili pritisnite CTRL+U na tipkovnici:

HTML jezik za označavanje stekao je veliku popularnost. U ovom trenutku, ovo je jedini jezik na kojem se kreiraju oznake web stranica. Želim naglasiti činjenicu da je markup. Takozvani “engine” je kreiran u drugom programskom jeziku (najčešće php), koji omogućuje izradu interaktivnih stranica (html to ne dopušta).

Bilješka

Pažljivi čitatelj primijetit će da nemaju sve stranice na internetu ekstenziju .html na kraju. Na primjer, postoje stranice /katalog/popis (bez ikakvog proširenja). Ovo je netočno, ali preglednik će moći shvatiti da je ovo web dokument i ispravno ga prikazati.

2. Primjer i struktura html koda

Ispod je primjer sa strukturom tipične html stranice. Imajte na umu da je html kod podijeljen u dva područja: zaglavlje i tijelo stranice.

Naslov stranice ... Oznake naslova (povezujući stilovi, skripte) ... ... Zaglavlje stranice ... Lijevi stupac ... ... Glavni dio stranice ... ... Desni stupac ... Dno stranica .. .

Ovaj kod se može uređivati ​​u bilo kojem uređivaču teksta. Najčešće se za razvoj html web stranice koristi notepad++ (napredni uređivač koji ističe oznake i prikazuje pogreške). Ali bolje je koristiti naprednije uređivače za rad s HTML oznakama.

Markup se sastoji od html oznaka (ponekad se piše "tag").

3. Što je HTML oznaka

HTML oznaka jedan je od elemenata HTML izgleda koji je potreban za strukturu. Oznake imaju znak otvaranja< и закрывающий > .

Na primjer, . Gotovo svaka oznaka je uparena i zahtijeva završnu oznaku. Ako webmaster zaboravi staviti završnu oznaku ili to učini neispravno, tada izgled neće biti važeći (pogledajte provjeru valjanosti stranice). Ako je ova oznaka ona koja drži "okvir" stranice, tada stranica može "lebdjeti" (bočni stupac će se pomaknuti prema dolje, itd.).

Zabranjeno je zatvaranje oznaka izvan redoslijeda kojim su otvorene. Na primjer

Pročitajte članak za više pojedinosti o izradi HTML stranice.

vjerojatno ću krenuti od početka...

HTML jezik nije sam po sebi programski jezik. On je označni jezik za hipertekstualne dokumente. Drugim riječima, odgovoran je za raspored u dokumentu vaših tekstova, crteža, tablica... namijenjenih životu na internetu. Nemoguće ga je natjerati da izračuna koliko je dvaput dva dva, u tome nema logičnih funkcija, ali lijepo je i, što je najvažnije, lako objaviti informaciju da je dvaput dva četiri - to je lako. Taj se jezik čita pomoću vama poznatih programa, zvanih preglednici (preglednici), koji "znaju" standardne naredbe html jezika i "žvačući" ih, prikazuju dokumente na monitoru računala u obliku u kojem web master - sastavljač dokumenata – želi ih predstaviti.

Sada o naredbama - nazivaju se deskriptori, ali češće - oznake.

Vratimo se na našu prvu stranicu... pa smo napisali:



Moja prva stranica


Pozdrav svijete!!!


Dakle, ovo je ono što je napisano između - oni se nazivaju tagovi; oni nisu vidljivi čitatelju koji gleda vašu stranicu, ali su jasno vidljivi pregledniku koji, naišavši na oznaku, to razumije kao signal da će biti dokument koji treba pročitati i prikazati na monitoru u traženom obliku..ali tag kaže da je dokument završio i ne traži se više ništa od njega tj. browsera i može mirne savjesti .

Pa što smo napisali? i kako to preglednik čita?

Mišljenja preglednika:

- početak dokumenta.. opet puno posla..
- pogledajte engleski rječnik i prevedite "head"...nema problema s piljevinom u mojoj glavi!! ... evo osnovne službene informacije o dokumentu.. pa što će oni od mene?
- "naslov" znači.. trebate napisati njegovo ime u zaglavlju prozora:
Moja prva stranica - Čajnik opet trenira..
- cijelo ime je gotovo.. možete ići dalje..
- da, i osim imena, ne držimo više gluposti u glavi..
- “Tijelo” dokumenta, sve što je dolje napisano stavlja se na javni uvid
Pozdrav svijete!!! - kako lijepo! Dosta je više!!!

- premjesti tekst u sljedeći red... mogu čak i pretpostaviti što će biti u njemu...
Moje ime je (vaše ime ovdje), ovo je moja prva stranica! - pa da, tako je.. ne mogu smisliti ništa originalnije..
- to je sve? Ne pokazati ništa drugo?
- Pa to je kraj!! Ne budite, ne prevrćite, u slučaju požara prvi izvadite!!

Otprilike ovako funkcionira čitanje naše stranice.. Kao što vidite, preglednik je prilično hirovit tip, pa mora davati jasne i precizne naredbe, inače će psovati.. i naglas.. i zato zapamtimo sljedeće stvari:

1) Potrebno je jednom zauvijek zapamtiti da ako postoji oznaka za otvaranje, mora postojati i oznaka za zatvaranje

Iako postoje iznimke, poput naše oznake
- ne zahtijeva zatvaranje jer samo kaže da se treba napisati u novom redu. Usput, pokušajte dodati još nekoliko istih prije retka "Zovem se..." i vidjet ćete da je kao rezultat toga primjetno pao.. (Pa, naravno, spremite promjene u bilježnicu i kliknite gumb "osvježi" u pregledniku)

2) Svi dokumenti moraju imati sljedeći predložak koda:

- početak dokumenta
- početak glave
- zatvaranje glave
- početak tijela
- zatvaranje tijela
- kraj dokumenta

Ove oznake su obavezne! Moraju se pisati uvijek za svaku novu stranicu i samo ovim redom! Ne pokušavaj sve okrenuti naglavačke...

3) O narudžbi:

Oznaka za otvaranje i zatvaranje je svojevrsni spremnik, kutija u koju se mogu spremati drugi tagovi - manje kutije... pa bi po logici dokument trebao izgledati ovako:




sadržaj


Ako napišete, na primjer, ovako:




sadržaj



Ispast će to smeće koje vam ne stane u glavu, ono “veliko” je već zatvoreno, a iz njega “strši” ono “malo” koje je zaključano u “sredini”, a “ content” je razasut posvuda.. Teško je čak i osobi zamisliti što se tamo govori o pregledniku.. Jasno strukturirajte kod vaše stranice, inače ništa neće raditi..

Pa, naučili smo kako napisati jednostavan tekst, početak je napravljen! u sljedećem poglavlju ću govoriti o tome što možete učiniti s njim..

    Kada pišete web stranicu, stvorite mapu na bilo kojem prikladnom mjestu na vašem tvrdom disku, nazovite je kako god želite, sve dok je jasno... spremite svoje stranice u ovu mapu, dajući im smislena imena... opcije poput aaa. html, 123.html dovest će do zabune i zabune... U ovoj fazi ovaj vam se savjet neće činiti praktičnim, ali će vam u budućnosti uvelike olakšati posao. Zamislite, na primjer, barem 20-30 takvih datoteka čija imena trebate imati na umu kako biste ih unakrsno upućivali. Prvo naruči!

    Prilikom pisanja koda, savjetujem vam da se pridržavate "dobrog stila pisanja", to jest, pišite oznake na "ljestvičast" način jer je jedna oznaka ugniježđena u drugu. S vremenom ćete shvatiti da kod za čitanje napisan ovako:



    Moja prva stranica


    Pozdrav svijete!!!

    Moje ime je Carlson, ovo je moja prva stranica!

    Mnogo lakše od ovoga:



    Moja prva stranica


    Pozdrav svijete!!!

    Moje ime je Carlson, ovo je moja prva stranica!

    I još više od ovoga:

    Moja prva stranicaZdravo svijete!!!
    Moje ime je Carlson, ovo je moja prva stranica!

    Iako je to stvar navike... ipak je bolje naviknuti se pisati "čitko".

Pojavom računalnih mreža, a posebno World Wide Weba, pojavila se potreba za prijenosom informacija za različite platforme. Uostalom, potrebno je da svi elementi dokumenta budu identično prikazani na svim računalima, bez obzira na sustav koji se koristi. Za to se koristi poseban jezik – HTML. Prvo korištenje ovog jezika za opis stranice korišteno je za prikaz znanstvenih informacija u Europskom centru za nuklearna istraživanja (Ženeva), a korišteno je za prikaz informacija za sva računala na lokalnoj mreži. Danas HTML služi kao sastavni dio većine programa, a prvenstveno za prikaz Internet stranica. Zapravo, svaki korisnik globalne mreže koristi HTML kada posjećuje bilo koje web mjesto. Sve informacije koje korisnik može vidjeti u prozoru preglednika opisane su HTML-om, a sami preglednici su specijalizirani programi za rad s HTML jezikom.

Što je HTML?

HTML se ne može u potpunosti nazvati programskim jezikom, iako mnoge funkcije omogućuju stvaranje jednostavnih aplikacija izravno u kodu. Za opisivanje svojstava elemenata koriste se deskriptori (tagovi) uz pomoć kojih se zadaju veličina, položaj i posebna svojstva elemenata, kao i poveznice na druge elemente samog teksta ili drugih dokumenata. Cijeli sklop koda naziva se hipertekst, a skraćenica je HTML HyperText Markup Language, što prevedeno na "veliki i moćni" znači "jezik za označavanje hiperteksta".

Poseban razvoj HTML dobio zajedno s razvojem WWW-a (World Wide Web), budući da je razvijen kao univerzalni jezik za sve uređaje, bez obzira na opremu koju posjeduju. Korištenje jezika omogućuje strukturalni prikaz informacija i pojednostavljuje njihovu percepciju. U usporedbi s tiskovinama, to bi odgovaralo stupcima i stranicama novina. Naslovi, položaj slika, tablice - sve je to potrebno za strukturno predstavljanje, budući da je kontinuirani niz teksta vrlo teško čitati.

Prve verzije HTML-a bile su fragmentirane i nisu imale određeno jedinstvo. Kao rezultat toga, bilo je potrebno razviti određeni jedinstveni standard. To je učinjeno 1995. godine, a standard je formaliziran kao službena verzija HTML 2.0. Nakon 2 godine (1997.) dodane su mu neke značajke. Novi format nazvan je HTML 3.0, a predložio ga je W3C ( World Wide Web Consortium). U teoriji je uključivao sve značajke 2.0, ali u to su vrijeme mogućnosti preglednika bile vrlo ograničene, tako da potpuna kompatibilnost nije postignuta. Do kraja 1997. godine, nakon testiranja verzije 3.2 jezika, usvojen je novi standard 4.0. Uklonio je stare deskriptore i uveo nove, posebice korištenje Cascading Style Sheets (CSS).

Osnovna struktura dokumenta

Većina modernih programa za izradu stranica, kao što su Dreamweaver i Microsoft SharePoint Designer, automatski stvaraju osnovnu strukturu dokumenata, no da biste je sami ispravno pročitali i izradili, morate se upoznati s jednostavnim pravilima.

Označavanje dokumenta provodi se pomoću oznaka, obično u paru (otvaranje i zatvaranje). Oznake su u uglastim zagradama i ne prikazuju se korisniku, ali se strogo pridržavaju izgleda stranice.

HTML dokument počinje i završava oznakama formata dokumenta.

Ovdje je kod stranice

Ispred oznake dokumenta može stajati standard po kojem će se sadržaj prikazivati ​​(DOCTYPE oznaka).

U dokumentu postoji naslov, koji čita preglednik, ali se ne prikazuje u prozoru, i tijelo stranice, koje korisnik zapravo vidi.

Zaglavlje je definirano oznakama i i sadrži podatke namijenjene oblikovanju dokumenta. Zaglavlje također sadrži učitane skripte koje su potrebne za prikaz podataka. U oznakama< title>a napisan je naslov stranice koji se prikazuje u naslovu prozora ili kartice.

Glavni kod stranice predstavljen je pomoću oznaka i . Sve što je napisano između njih bit će prikazano na ekranu, osim elemenata za koje su navedene posebne vrijednosti i samih oznaka za oblikovanje dokumenta.

Struktura HTML dokumenta može se prikazati na sljedeći način.

< title>Naslov stranice (odražen u prozoru!)

Naziv dokumenta. Ne pojavljuje se na ekranu

Tijelo dokumenta. Prikazano na ekranu

Osnove HTML-a za početnike, ono što bi svaki webmaster početnik ili bloger sada trebao znati. Ako želite naučiti kreirati osnovne web stranice, razumjeti sam kod, znati što stoji iza čega i što bi trebalo ići, to je jednostavno nemoguće učiniti bez poznavanja osnova HTML jezika. Na svom blogu imat ću cijeli lanac članaka koje ću posvetiti ovoj temi od A do Ž, opisat ću svaku oznaku koja je prisutna u dokumentu, što znači i kako je ispravno koristiti.

Osnove HTML-a

Ako ne znate najosnovnije stvari, put vam je zatvoren. Smatram da bi svaka osoba koja se odluči baviti razvojem i izradom web stranica trebala znati i razumjeti osnove, od čega se sama stranica sastoji, kako funkcionira i što se događa u samom kodu.

Naravno, postoji dosta programskih jezika, svi su složeni na svoj način, ali postoje neki koje morate znati. Ako želite lijepo dizajnirati pismo za slanje poštom, imate vlastitu VKontakte grupu, grupu na drugim društvenim mrežama, isti YouTube kanal, trebate petljati s kodom na bilo kojem od motora web mjesta, samo trebate poznavati osnovne pojmove.

Dao sam samo nekoliko primjera, zapravo, sada se to znanje sve češće koristi na internetu. Ja sam više praktičar nego teoretičar, pa ću vam u svojim člancima u ovom dijelu pokazati svoje primjere kako sam i što sam napravio, korak po korak. Objavit ću i primjere stranica i cijele web stranice.

Html dokument je najjednostavniji tekstualni dokument, jezik za označavanje s kojim se svakodnevno susrećete na internetu. Oznake opisuju strukturu dokumenta. Oznake su oblikovane kao kutne< >zagrade, unutar kojih je ispisan naziv oznake. Preglednik gleda strukturu dokumenta, gradi ga i prikazuje prema svojim uputama na vašem monitoru, ako ste, naravno, sve napravili ispravno.

Cijeli ovaj proces počinje prije nego što uopće vidite gotovu sliku. Preglednici obrađuju dokument uzastopno, od početka do kraja. Uključujući sve što bi trebalo biti na stranici. Tablice, slike, skripte i tako dalje, osim što ovo uključuje CSS stilove.

Osnove za početnike

Što je html - ako pogledate što Wikipedia piše - (HyperText Markup Language) hipertekstualni označni jezik za dokumente. Većina stranica na internetu sadrži oznake stranica na ovom jeziku. Ovaj jezik tumače preglednici, a rezultirajući formatirani tekst prikazuje se na monitoru vašeg računala ili mobilnog uređaja.

Ovaj jezik je sam po sebi vrlo lak i pristupačan za učenje. Svatko može naučiti i razumjeti njegove osnove. Da biste koristili takav jezik, morate poznavati i koristiti deskriptore, koji se također nazivaju oznakama. Uz pomoć oznaka nastaje dokument.

Od čega bi se trebala sastojati struktura dokumenta, koje bi oznake trebale biti prisutne. Pogledajmo sve na jednom malom primjeru. Napisao sam neki tekst u MS Officeu i pokazao ga na ovoj snimci zaslona.

Da biste ovaj tekst prikazali u pregledniku na isti način kao što je napisan u dokumentu, morate mu dodati oznake stranice, što uključuje neke oznake. Prvo ih pogledajte, a onda ću opisati tko je za što odgovoran.

Dobrodošli na moj blog, sada pohađate lekciju o osnovama HTML-a. Ako vam se svidio ovaj članak, možete se pretplatiti na ovaj blog kako biste primali nove članke u svoju pristiglu poštu.

Blog Evgenija Nesmelova! web stranica Osnove html-a i css-a za početnike

Od kojih se tagova sastoji svaki html dokument, što uključuje i gdje to sve treba zapisati?

< html >

< body >

< h2 >< / h2 >

< p >Dobro došli na moj blog, sada uzmite vodič za osnove HTML-a. Ako vam se svidio ovaj članak, možete se pretplatiti na ovaj blog kako biste primali nove članke u svoju pristiglu poštu.< / p >

< h2 >Blog Evgenije Nesmelov! Nesmelov. ru Osnove HTML-a i CSS-a za početnike< / h2 >

< / body >

< / html >

Bilo koji kod sastoji se od znakova koji se nalaze u uglastim zagradama. Sve se to naziva elementima. Svi elementi se obično sastoje od dvije oznake, otvarajuće i zatvarajuće. Savjetujem vam da prvo pažljivo pogledate oznake; ako propustite jednu od njih i ne zatvorite je, morat ćete revidirati velike dijelove koda kako biste pronašli pogrešku.

Bilo je slučajeva kada je trebalo više od jednog dana, osoba kontaktira i traži pomoć, ne može pronaći grešku na svojoj stranici, stoga uvijek pažljivo pogledajte što i gdje pišete. Iskoristimo sada ovaj primjer da pogledamo svaki element koda, što je u njemu napisano, što znači i što se na kraju događa.

Većina oznaka je uparena, što uključuje početnu oznaku i završnu oznaku. Osim takvih oznaka, postoje i pojedinačne oznake. Oznake mogu ići zajedno s drugima, tako da se ugniježđuju jedna u drugu. Na primjer, prikažite tekst podebljano i kurzivom odjednom.

Tekst

< strong > < i >Tekst< / strong > < / i >

Struktura HTML dokumenta

Podsjećam vas još jednom, morate se pridržavati pravila koja su prisutna u dokumentu. Ovo je način na koji preglednik razumije što se nalazi na stranici, njen redoslijed, sadržaj i tako dalje.

Oznaka je komponenta koja govori web pregledniku da izvrši određeni zadatak. Na primjer, prisutnost odlomka, tablice, obrasca ili slike.

Atribut - mijenja oznaku. Na primjer, možete poravnati odlomak na sredini ili udesno, također postaviti lokaciju slike na stranici i tako dalje.

UVIJEK zatvorite oznake, ako otvorite, svakako zatvorite. U suprotnom će se pojaviti pogreška i vaš dokument se neće ispravno prikazati na stranici. Postoje i iznimke, koje ne treba zaboraviti.

Jasno je da je potrebno razumjeti da postoji naslov dokumenta i njegovo tijelo. Naslov je sve što je sadržano u oznaci. Tijelo dokumenta (), tijelo dokumenta sadrži sav sadržaj stranice. Ako postoji potreba da ostavite dio koda za sebe, prilažući te oznake u komentare, oznaka se koristi za to. Sve što se nalazi unutar takve oznake služi kao komentar i preglednici ga ne percipiraju.

Počnimo s prvim. Na početku dokumenta sam otvorio oznaku, a na kraju sam ga zatvorio. Ovaj kod je prisutan u apsolutno svakom dokumentu; govori pregledniku da je sve što se nalazi između ovih oznaka HTML kod. To je korijen samog dokumenta; sve što je naknadno prisutno iza ove oznake više nije uključeno u dokument i preglednici ga ne percipiraju. Na samom početku dokumenta, oznaka se otvara, a na samom kraju se mora zatvoriti.

Cijeli odjeljak ove oznake sadrži sve tehničke podatke dokumenta. Kao i prethodna oznaka, glava se također mora otvoriti i zatvoriti na kraju. Ove informacije uključuju naslov stranice, opis, ključne riječi tražilice i kodiranje. O kodiranju malo niže.

Sadržaj

< head >Sadržaj< / head >

Ova oznaka je uključena u glavu i mora biti zapisana unutar oznake glave. Ova oznaka naslova je obavezna i mora biti prisutna u svakom HTML dokumentu. Osim toga, pojavljuje se kao naslov prozora preglednika. Duljina takvog zaglavlja ne smije premašiti 60 znakova. Tekst takvog zaglavlja trebao bi sadržavati najpotpunije informacije koje karakteriziraju sadržaj stranice.

Ako ste napisali "Hello World" u zaglavlju, ovo je informacija koja bi trebala biti prikazana na stranici i nijedna druga. Ne treba varati ljude i tražilice, njima se to ne sviđa, a time sebi otežavate. Informacije sadržane u ovoj oznaci trebale bi biti relevantne za sadržaj vaše stranice.

Nakon obvezne oznake naslova, postoji neobavezna, ali jednako važna meta oznaka. Ova oznaka je jednostruka. Pomoću ove oznake postavljate opis stranice (description) i njezine ključne riječi (keywords).

Osim toga, meta oznaka može sadržavati podatke o autoru stranice i druga svojstva metapodataka. Možete spriječiti da tražilice indeksiraju cijelu stranicu. Postavite stranicu da se automatski osvježi nakon 20 sekundi ili nakon 5 sekundi, nakon čega slijedi prijelaz na drugu stranicu.

< meta name = "robots" content = "index, follow" >

< meta http - equiv = "refresh" content = "20" >

< meta http - equiv = "refresh" content = "5; url=http://сайт/" >

Takvih meta elemenata može biti više jer mogu nositi potpuno različite informacije. Drugi korisnici, kada otvore stranicu u pregledniku, ne vide sve vaše opise; sve to ostaje skriveno od pogleda.

Oznaka stila također se može koristiti za postavljanje stilova na stranici. Ako koristite mnogo različitih CSS stilova, preporučljivo je postaviti ih u zasebnu datoteku. Ako trebate navesti nekoliko njih, sve to možete navesti izravno u html dokumentu.

.base (širina: 100px; boja pozadine: #000; visina: 150px; boja: #fff; )

< style type = "text/css" >

Baza(

širina: 100px;

boja pozadine : #000;

visina: 150px;

boja : #fff;

Ili dodajte stilove posebno jednoj oznaci; morate dodati element stila unutar same oznake. Ova oznaka mora se koristiti unutar spremnika koji postavlja stilove za stranicu. Možete koristiti nekoliko takvih oznaka, to neće biti pogreška.

Pomalo slična prethodnoj oznaci, oznaka veze omogućuje vam postavljanje stilova za dokument koji se nalazi u drugoj datoteci. Drugim riječima, postojećem dokumentu možete priložiti kompletan CSS stilski list koji se sastoji od mnogo svojstava. Time smanjujete veličinu dokumenta koji će se u konačnici brže učitavati i otvarati na računalu ili mobilnom uređaju s malom brzinom interneta.

Možete povezati više od jedne datoteke, nema ograničenja. Nema potrebe za zatvaranjem takve oznake. Ako je sve učinjeno ispravno, specifični stilovi iz zasebne datoteke bit će učitani u vaš dokument. Ovu oznaku možete dodati u osnovni html i ne zaboravite na njeno postojanje. Rezultat je ovakva slika:

< link href = "css/style-lg.css" rel = "stylesheet" >

< link href = "css/style-md.css" rel = "stylesheet" >

< link href = "css/style-sm.css" rel = "stylesheet" >

Pomoću oznake skripte možete povezati različite scenarije (skripte) s dokumentom. Prisutnost završne oznake je obavezna. Sama skripta može se nalaziti na početku dokumenta, unutar ili na kraju.

Kaže pregledniku da se sve što se nalazi između ovih oznaka treba pojaviti u prozoru preglednika. Ovdje su glavne oznake koje mogu biti prisutne u apsolutno svakom dokumentu. Oznaka tijela služi kao glavni dio stranice, koji uključuje sav njen sadržaj. Preporučljivo je otvoriti ovu oznaku i ne zaboravite je zatvoriti na kraju dokumenta.

Naslovi stranica h1 h2 h3

Idemo dalje, vidimo oznaku koja se otvara i zatvara na isti način. Ova oznaka označava glavni naslov teksta; u većini slučajeva ispod naslova H1 je naslov stranice. Zapravo, postoji samo šest naslova podataka. . Također se koriste u SEO-u, ali ovo je malo drugačija tema. Svakako ću istaknuti jedan članak za ovo i dati detaljan opis za njih, pretplatite se na ažuriranja bloga kako ne biste ništa propustili.

Prisutnost takvih naslova u članku igrat će važnu ulogu u promicanju stranice. Osim toga, njihova upotreba daje vam jasnu strukturu stranice, njezin naslov, podnaslove, istaknute stavke, pododlomke i tako dalje. Uvijek ih koristite i primijenite u praksi. Na mnogim CMS-ovima, kao što je WordPress, kada pišete tekst, možete vidjeti "naslov 1", "naslov 2", "naslov 3" i tako dalje. Oni su odgovorni za h1, h2 i h3.

Ako pišete tijelo teksta iz novog odlomka, pišete oznaku

Na početku i zatvoriti na kraju

. Označavanje odlomka u html-u jednako je stvaranju novog odlomka u MS Word dokumentu. Nisam dodao ništa novo u dokument. Ali to nije sve što bi trebalo biti prisutno u html dokumentu. Pogledajmo još jedan primjer, opis će doći malo kasnije.

HTML dokument

Ovaj tekst će biti podebljan, a i ovaj 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 Glava i Naslov

Svaki dokument sadrži glavu i naslovni element. Prvi, koji dolazi odmah nakon prve oznake. Ova oznaka sadrži sve informacije o stranici, također sadrži i element. Naslov – informacija o naslovu stranice, odnosno naslov stranice, njezin naziv. Upravo u naslovu naznačite točan naziv stranice po kojoj će vas korisnik tražiti putem tražilice, što je vrlo važna točka. Oba elementa moraju biti otvorena i zatvorena. Svaki element je zatvoren sa “/”. Rezultat je ovakva slika.

Naslov&Sadržaj stranice

< / html >

Kao što vidite, nema ništa komplicirano. 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 potpunu sliku koda. To morate uvijek znati i zapamtiti. Zatim počinjete umetati tekst, slike, videozapise i tako dalje. Ali to će već biti u drugim člancima.

Notepad++ editor

Za rad s kodom koristite program Notepad++. Besplatan je, a nije ga teško pronaći na internetu. Vrlo prikladno za razumijevanje bilo kojeg koda; također prikladno prikazuje početne i završne oznake. Podržavamo sintaksu više od 40 programskih jezika. Baš ono što vam je potrebno da naučite osnove html-a.

Bilježnica je u svakom pogledu superiornija od obične bilježnice. Za maksimalnu pogodnost, jednostavnost i učenje, ovaj uređivač prvo mora biti instaliran na vašem računalu. Najvažnija prednost i pogodnost je što Notepad++ editor pokazuje savjete prilikom pisanja koda, što vaš rad čini puno bržim i kvalitetnijim.

element DOCTYPE

Svaki dokument također mora sadržavati sljedeći element doctype. Zašto je to potrebno i što bi trebalo biti u njemu. Ljudi obično nisu oduševljeni tim redovima, kopiraju ih u svoje dokumente i rade tiho. Ovi elementi govore pregledniku koja se verzija html-a koristi u dokumentu, koji je 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. Zatim će biti jasan opis svake linije, s tim ne bi trebalo biti problema.

Ukratko jasnim jezikom o osnovama html-a: Ovaj red govori pregledniku da je ovaj dokument XHTML verzija 1.0, koristi se engleski i cijela se ova zbrka nalazi na ovoj adresi. Zatim, u meta oznaci označavamo kodiranje koje se koristi. Najčešće korišten je Windows 1251.

Description - dotaknuta je tema SEO, 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 pokriva temu SEO, ova oznaka je obavezna. Sadrži ključne riječi pomoću kojih će vas korisnici interneta pronaći putem tražilica.

Naslovna oznaka sadrži naziv samog dokumenta, njegov naslov, koji vidimo u pregledniku. Vjerojatno najvažniji tag u cijelom dokumentu koji ima najveći utjecaj na promociju stranice. Članak o dodavanju i oblikovanju detaljnije opisuje ovu oznaku.

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

  • Gotovo sve oznake se otvaraju i zatvaraju;
  • Dokument počinje oznakom ;
  • Prisutnost oznake;
  • Prisutnost oznake;
  • Jasna struktura html dokumenta.
  • Sve glavne stranice uvijek trebaju imati naziv indeks. Tako je prihvaćeno i svi su navikli, bez obzira koja je ekstenzija datoteke, može biti html ili php. Uvijek se tako zove.

    Pogledajte videozapis o osnovama HTML-a iz Webformyselfa.

    Jezik za označavanje hiperteksta, osnovni elementi i struktura. Sve to i još mnogo toga pokušat ću 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 (Hyper Text Markup Language) je poseban jezik za označavanje dokumenata. Važno je napomenuti da je riječ o elektroničkim, a ne tiskanim dokumentima.

    Ispisani dokument ima strogo određene veličine stranice i margine. Točno određuje parametre fonta. Elektronički dokumenti i web stranice nisu namijenjeni za ispis na pisaču, već za gledanje na ekranu. Ne zna se unaprijed na kojem računalu će se dokument pregledavati. Veličina prozora preglednika je nepoznata i nije poznato koji su fontovi dostupni.

    HTML jezik je posebno kreiran za dizajn dokumenata ekrana koji će se reproducirati na nepoznat način. HTML izvorno nije bio namijenjen za oblikovanje dokumenta, već za njegovo funkcionalno označavanje. Na primjer, "naslov" je karakteristika sadržaja, a ne dizajna. Program za pregled dokumenta na ekranu (browser, preglednik, explorer) sam odabire način prikaza dijela dokumenta koji je opisan kao zaglavlje.

    Stvaranje dokumenta u HTML-u slično je programiranju. Autor dokumenta uzima čisti tekst i u njega ubacuje posebne kodove (nazivaju se oznake). Kada se pregleda dokument, oznake djeluju kao naredbe. Na primjer, ako postoji oznaka na početku odlomka, tada će cijeli odlomak biti poravnat u sredini prozora, bez obzira na to u kojem će se prozoru dokument pregledavati i kojim će fontom biti prikazan tekst.

    HTML oznake vam omogućuju poravnavanje redaka dokumenta, kontrolu pozadine i boje fonta, umetanje ilustracija i omotavanje teksta oko njih, uključivanje multimedijskih objekata u vaš dokument i još mnogo toga. Rezultat su smisleni i impresivno dizajnirani web dokumenti.

    Među mnogim HTML oznakama postoji posebna skupina oznaka namijenjenih stvaranju hipertekstualnih veza. Hipertekstualna poveznica je odabrani dio teksta ili ilustracije koji je povezan s adresom drugog dokumenta. Hipertekstualne veze obično su istaknute podcrtavanjem ili drugom bojom. Ako prijeđete mišem preko hipertekstualne veze, ona će promijeniti oblik. Ako kliknete lijevom tipkom miša na hipertekstualnu vezu, ona će vas odvesti na drugu web stranicu, koja se možda nalazi na drugom poslužitelju, možda čak i na drugom kontinentu.

    Dokumenti izrađeni u HTML formatu spremaju se u datoteke s ekstenzijom html ili htm.

    HTML oznake

    Kontrolne konstrukcije u HTML-u nazivaju se oznakama. Oznake su skupovi znakova koji se koriste za označavanje teksta. Sve oznake su napisane u uglastim zagradama koje tvore simboli manje od (). Iza uvodne zagrade je ključna riječ koja definira oznaku.

    Veličina slova u nazivima oznaka nije bitna. Međutim, uobičajena je praksa da se oznake pišu velikim slovima kako bi se razlikovale od glavnog teksta.

    Oznake mogu biti uparene ili neuparene. Za utjecaj na dio dokumenta (na primjer, odlomak) koriste se uparene oznake: otvaranje i zatvaranje. Početni tag stvara učinak, a zatvarajući ga zaustavlja. Završne oznake počinju kosom crtom (/).

    Neuparene oznake utječu na cijeli dokument ili imaju jednokratni učinak tamo gdje se pojave. U ovom slučaju se ne koristi oznaka za zatvaranje.

    Ako greškom oznaka sadrži ključnu riječ koja nije u jeziku, oznaka se potpuno zanemaruje.

    Kada pregledavate dokument u pregledniku, same oznake se ne prikazuju, ali utječu na način prikaza dokumenta.

    Na učinak koji stvara oznaka može se utjecati atributima. Atributi su funkcijske riječi odvojene od ključne riječi oznake i jedne od drugih razmacima. Ako trebate navesti vrijednost atributa, ona se piše iza znaka jednakosti i nalazi se u navodnicima. U uparenim oznakama, atributi se dodaju samo početnoj oznaci. Završne oznake nikad ne sadrže .

    HTML jezik vam omogućuje unos u dokument

    reci prijateljima