Uslovi
Evo nekih pojmova na koje ćete se susresti u nastavku.
- www- poznata skraćenica od World Wide Weba, sinonim za Internet.
- Web je skraćenica za World Wide Web.
- Web stranica- poseban dokument (tekstualni fajl pripremljen na poseban način) pohranjen na Internetu.
- web preglednik- softver potreban za prikaz web stranice.
- Website- skup web stranica u vlasništvu istog vlasnika.
- Početna stranica- glavna (naslovna) stranica stranice.
- URL- Uniform Resource Locator, koji se koristi za određivanje adrese stranice na WWW-u.
- Web server- kompjuter sa posebnim softverom na koji se moraju postaviti web stranice kako bi se mogle vidjeti na Internetu.
Šta je hipertekst?
Glavna prednost WWW-a je kreiranje hipertekstualnih dokumenata, a ako vas zanima bilo koja stavka u takvom dokumentu, onda je samo “gurnite” kursorom da biste dobili potrebne informacije. Također je moguće napraviti veze u jednom dokumentu na druge koje su napisali drugi autori ili se čak nalaze na drugom serveru. Jedna od glavnih prednosti WWW-a u odnosu na druge načine pretraživanja i prenošenja informacija je „multimedijalni“. U WWW-u možete vidjeti tekst i sliku, zvuk i animaciju na jednoj stranici u isto vrijeme. O istoriji hiperteksta možete vrlo kratko pročitati na web stranici Artemija Lebedeva.
Šta je HTML?
HTML je skraćenica za H yper T lok M arkup L ugao, tj. jezik za označavanje hiperteksta. Ovo je standard po kojem se web dokumenti prikazuju od strane pretraživača. Kao što naziv govori, HTML je metoda označavanja običnog teksta na način da pretraživač prikazuje informacije u ispravnom formatu. Datoteke koje sadrže tekst sa html oznakom moraju imati ekstenziju htm ili html.
Komande HTML jezika nazivaju se tagovi (tag), one označavaju koju operaciju treba izvesti, na primjer, prikazati tekst, nacrtati liniju ili koristiti grafiku. Oznake sadržane u tekstu mogu promijeniti fontove, stilove i stvoriti posebne efekte. Ovo vam omogućava da pružite zanimljiv grafički interfejs kada prikazujete standardni tekstualni fajl. Osim promjene stila teksta, HTML također govori pretraživaču kada neki tekst na stranici treba smatrati hipertekstualnom vezom, gdje treba umetnuti grafiku i posebne elemente, poslati komande e-pošte i druge funkcije pristupačnosti.
HTML nije programski jezik u punom smislu te riječi. Ima specifičan format, koji je svjetski standard. Ovaj standard se zove Definicija vrste dokumenta(definicija tipa dokumenta), ili DTD. Verzija 1.0 je bila prvi HTML DTD koji je uveden na web. Zatim je kreirana verzija 2.0 za WWW, promišljenija. Sada je standard HTML verzija 4.0.
HTML struktura komandi
HTML komande (oznake) su zatvorene u uglastim zagradama:
<название_команды>- naredba start
komandno polje
- kraj komande
Standard jezika HTML zahtijeva prisustvo oznake kraja naredbe, osim ako nije drugačije naznačeno.
Prva komanda u html dokumentu je komanda , odnosno, poslednja komanda će biti -(izgovara se "ne html").
Generalno, struktura html dokumenta izgleda ovako:
one. Postoje dva različita odjeljka:
("glava") i ("telo").KOMENTAR. HTML jezik ne razlikuje velika i mala slova. Jezičke komande se mogu kucati i velikim i malim slovima, tj. tim
je ekvivalentna naredbi ili .Ako pretraživač ne podržava naredbu, jednostavno je ignoriše.
Prvi red html dokumenta je uslužna komanda koja omogućava pretraživaču da identifikuje tip dokumenta (DOCTYPE) kao dokument u HTML 4.0 standardu koji je definisao IETF (Internet Engineering Task Force). Ovaj red takođe označava odgovarajući DTD (Deklaracija tipa dokumenta - opis tipa dokumenta): dokument je JAVAN (tj. ne zavisi od sistemskih postavki) i jezik dokumenta je ruski (RU).
U zaglavlju html dokumenta nalazi se komanda koja prikazuje naziv stranice u naslovu prozora pretraživača (plava traka na samom vrhu prozora):
Stvarni tekst koji bi trebao biti u html dokumentu se postavlja između komandi
i, Na primjer:Dobrodošli u HTML!
Da biste vidjeli kako će ovaj primjer izgledati u pretraživaču, morate sve kopirati u Notepad, sačuvati datoteku pod imenom primer.htm, a zatim u Exploreru kliknite na naziv datoteke - kao rezultat toga, ovaj html dokument će se automatski otvoriti u prozoru Internet Explorera:
Atributi
Naredbe mogu imati pozivane parametre atributi. Atributi modificiraju izvršenje naredbe, postavljaju se odmah iza naziva naredbe, unutar ugaonih zagrada i imaju sljedeći format:
ATTRIBUTE="vrijednost_atributa"
Ako se atribut_value sastoji od jedne riječi, onda navodnici nisu potrebni. Ako atribut_value sadrži razmake ili neabecedne znakove, navodnici su obavezni.
Ako naredba ima više atributa, oni su razdvojeni razmacima:
<название_команды
atribut1="vrijednost_atributa1"
atribut2="vrijednost_atributa2">
Kao primjer atributa, razmotrite naredbu , koji postavlja Windows kodiranje za slova ruske abecede i nalazi se striktno unutra odjeljak
:Ako je komanda preskočite, tada su moguće situacije kada će na ekranu pretraživača umjesto ruskih slova biti „krakozyabry“. A kada koristite ovu naredbu, to se neće dogoditi!
Html editori
Svi html dokumenti su napisani kao običan tekst, tako da se mogu kreirati i uređivati u bilo kojem uređivaču teksta kao što je Notepad. Ali mnogo je zgodnije koristiti specijalizirane html uređivače, na primjer UltraEdit(licencirano) ili Smart Web Builder(besplatno).
U ovim uređivačima, sve komande HTML jezika se prikazuju u jednoj boji, a atributi komandi u drugoj. Dok će samo tekst biti crn. Zbog toga, ako je ime komande (ili atributa) pogrešno napisano, biće prikazano crnom bojom, kao normalan tekst.
Boja u html dokumentu
Tim
ima nekoliko atributa.Atribut bgcolor= vam omogućava da postavite boju pozadine stranice:
Ova stranica ima žutu pozadinu.
Boja se može odrediti na dva načina:
- Određivanje naziva odabrane boje.
- Određivanjem broja boje kao omjera nijansi crvene, zelene i plave (Red-Green-Blue=RGB).
RGB broj boje je određen ili sa tri dvocifrena heksadecimalna (HEX) broja (broju mora prethoditi znak #) ili korištenjem ugrađene rgb() funkcije, čija se tri argumenta mogu razlikovati od 0 do 255, na primjer: rgb(153,102,255). Svaki broj iz intervala () određuje intenzitet odgovarajuće boje.
Na primjer, broj boje "#FF0000"=rgb(255,0,0) odgovara crvenoj boji (Crvena), budući da ima maksimalan intenzitet za crvenu komponentu, a zelena i plava komponenta imaju jednake vrijednosti na nulu. Slično, broj "#00FF00"=rgb(0,255,0) odgovara zelenoj (zelenoj), a broj "#0000FF"=rgb(0,0,255) plavoj boji.
Windows podržava 16 standardnih naziva boja:
| Crna = "#000000" | Zelena = "#008000" | ||
| Srebro = "#C0C0C0" | limet = "#00FF00" | ||
| Siva = "#808080" | Maslina = "#808000" | ||
| Bijela = "#FFFFFF" | Žuta = "#FFFF00" | ||
| Maroon = "#800000" | Mornarica = "#000080" | ||
| Crvena = "#FF0000" | Plava = "#0000FF" | ||
| Ljubičasta = "#800080" | Teal = "#008080" | ||
| Fuksija = "#FF00FF" | Aqua = "#00FFFF" |
Pored ovih 16 naziva boja, postoji i proširena tabela boja. Nazivi boja iz ove tabele se mogu koristiti, ali je još pouzdanije podesiti RGB broj. Činjenica je da iako crveno-zeleno-plavo zadatak teoretski omogućava prikaz "milijun" boja, u stvari sve je određeno video karticom i monitorom koje klijent koristi.
Prilikom kreiranja slike za objavljivanje na Internetu, glavni problem je ispravna reprodukcija boja na različitim tipovima računara, monitora i pretraživača. Kada pretraživač ne može ispravno prikazati određenu boju, on bira drugu boju ili miješa nekoliko susjednih boja. Ponekad se boja može zamijeniti nečim potpuno neprikladnim. Stoga je razvijena takozvana "sigurna" paleta boja. Kada koristite boje iz ove palete, možete biti sigurni da će svaka boja biti prikazana ispravno i bez izobličenja. Bilo koja od 216 "sigurnih" boja palete može se koristiti za grafiku, tekst i pozadinu. Paleta se sastoji od 32 kombinacije od 6 nijansi crvene, zelene i plave.
Naslovi
HTML ima šest nivoa naslova, označenih brojevima od 1 do 6 (naslov prvog nivoa je najveći naslov). U poređenju sa normalnim tekstom, naslovi su automatski podebljani.
Sintaksa zaglavlja:
Najveći naslov, centriran
Naslov srednje veličine, pozicioniran kao?
Najmanje zaglavlje
ovdje je h sama naredba zaglavlja ( header), a broj od 1 do 6 određuje veličinu zaglavlja,
align= - atribut koji specificira lokaciju naslova na ekranu:
align=left - mjesto lijevo (prihvaćeno po defaultu, tj. ne možete specificirati)
align=center - centrira prozor
align=right - postavite na desnu stranu prozora pretraživača.
paragrafi
Paragraph Command
Takođe ima atribut align=, koji pored gornje tri vrijednosti može imati i vrijednost justify:
koji postavlja poravnanje desne ivice teksta na ekranu (kao što je to učinjeno u ovom tekstu).
Za razliku od dokumenata kreiranih u Word editoru, prijelomi linija nisu bitni u html dokumentima. Prijelom reda se može dogoditi na bilo kojem prostoru u izvornom fajlu i gledatelj će ga ignorirati. Na primjer:
Poglavlje 1
Dobrodošli u HTML!
Reći će vam kako i kako ne praviti web stranice.
Nije tako teško.
U izvornom fajlu, dve rečenice prvog pasusa nalaze se u dva različita reda. Pregledač zanemaruje ovaj prijelom reda i samo započinje novi pasus nakon naredbe
Koristeći komandu
možete preći na novi red bez započinjanja novog pasusa (u većini pretraživača paragrafi su označeni dodatnim praznim redovima). Na primjer, linija
fakultet
gde učimo
Nerazbijajući prostor
Pošto pretraživač ignoriše prelome redova u html datoteci, gde se jedan red na ekranu zapravo završava, a drugi počinje, zavisi od veličine fonta na ekranu klijenta. Osim toga, pretraživač zanemaruje bilo koji broj razmaka između riječi - svi razmaci su zamijenjeni jednim. Stoga, ako želite staviti nekoliko razmaka u nizu, tzv karakter primitivan"razmak bez prekida" koji počinje znakom ampersanda (&) i završava tačkom i zarezom: (skraćenica od Non Break Space).
Primitivi znakova su osjetljivi na velika i mala slova: NE MOGU se koristiti umjesto.
Na primjer, linija
Fakultet na kojem studiramo
će izgledati ovako na ekranu:
Budući da pretraživač lomi red na razmaku, moguće je da će, na primjer, inicijali ostati u jednom redu, a prezime se „premjestiti“ u drugi. Da se to ne bi dogodilo, između inicijala i prezimena mora se staviti razmak bez prekida.
U ruskoj tipografiji postoje stroga pravila za postavljanje znaka koji se ne prekida.
Znak razmaka bez prekida(označavamo ga kao ) se postavlja u sljedećim slučajevima.
- Prije crtice:
To je primjer
one. Crtica ne smije započeti red osim ako nije početak rečenice direktnog govora. - Između dva inicijala i inicijala i prezimena:
I. I. Ivanov
one. opcija bez razmaka uopće: I.I. Ivanov - kategorički neprihvatljivo! - Između znaka broja (#) ili znaka pasusa (§) i sljedećih cifara:
br. 7, § 3
a evo opcije bez razmaka: br. 7 - najtipičnija gruba greška! - Između broja i sljedeće mjerne jedinice:
18. vijek, 10 kg, 2000 - Između skraćenice i prezimena:
gospodine Petrov - Nakon geografskih skraćenica:
Novosibirsk, r. Ob
Pomak teksta
Za prikaz teksta sa blagim pomakom udesno (sa lijeve ivice ekrana), kao što je poezija, koristite naredbe:
fakultet
gde učimo
će izgledati ovako na ekranu:
Liste
Danas se oglasi mogu vidjeti na gotovo svakoj web stranici. Postoji nekoliko formata lista koji vam omogućavaju da istaknete određene informacije u standardnom tekstu. U normalnom pasusu, tekst se prelama od reda do reda. Tekst na listama izgleda drugačije. Stavke liste su uvučene od margina, odvojene od ostatka pasusa teksta i, pored toga, označene bulletima ili numerisanim.
Kada se pravilno koriste, liste čine velike količine informacija lakim za čitanje i vrlo vidljivim. Liste se mogu ugniježditi jedna unutar druge, formirajući složenu strukturu. Možete, na primjer, koristiti listu za organiziranje veza.
Postoje tri glavne vrste lista: liste sa nabrajanjem (nenumerisane), numerisane i liste sa definicijama. Slične su po tome što sve stavljaju svaku stavku u novi red, a možete istaknuti tekst koji želite. Glavna razlika između navedenih tipova je način numeracije i struktura.
bulleted list
Najčešće korištena je neuređena ili označena lista. Svaka stavka na takvoj listi počinje minijaturnom ikonicom.
Lista sa nabrajanjem je određena naredbama (Nesređena lista), a stavke liste između komandi se specificiraju pomoću naredbe
Na primjer, lista
Sistemi brojeva
- ne-pozicioni
- pozicioni
će izgledati ovako:
Naredba liste
- ima type= atribut, koji postavlja tip markera za elemente liste:
- nepozicionalan
- staroegipatski
- Roman
- staroslovenski
- pozicioni
- babilonski
- Indijanac
Na ekranu to izgleda ovako:
numerisana lista
Numerisana lista je veoma slična listi sa nabrajanjem. Jedina razlika je u tome što se u numerisanoj listi ispred svake stavke automatski stavljaju redni brojevi ili slova umesto grafičkih markera. Zahvaljujući tome, ne morate ručno birati broj svake stavke liste.
Brojčana lista se specificira pomoću naredbi
- (Order List) i
- , Na primjer:
Sistemi brojeva
- ne-pozicioni
- pozicioni
će izgledati ovako:
Kao što vidite, nema brojeva (1, 2) pored stavki liste u izvornom fajlu.
Prema zadanim postavkama, HTML liste su automatski numerisane arapskim brojevima - 1, 2, 3 itd. Možete odrediti drugačiji način numerisanja, kao što su slova (velika ili mala) ili rimski brojevi. Da promijenite zadani tip numeriranja, dodajte naredbi
- type= atribut.
- nepozicionalan
- staroegipatski
- Roman
- staroslovenski
- staroegipatski
- pozicioni
- babilonski
- Indijanac
na ekranu izgleda ovako:
Lista definicija
Iako se ne koriste tako često kao liste sa nabrajanjem ili numerisane liste, liste definicija takođe mogu biti korisne u nekim slučajevima. Lista definicija za svaku stavku sadrži ne jedan, već dva reda, što može biti korisno kada date dodatne informacije.
Liste definicija izgledaju malo drugačije od drugih vrsta lista. Za postavljanje same liste koriste se naredbe
- (Definicijska lista) i
- (Definicijski termin) specificira jedan element, odnosno definirani termin i naredbu
- (Definicijski opis) - ostatak informacija koji se prikazuje u sljedećem uvučenom redu. Drugi red informacija naziva se definicija.
Primjer liste definicija:
- MMF
- Mašinsko-matematički fakultet.
- FIT
- Fakultet informacionih tehnologija.
Hej! U današnjem članku pokušat ću propisati najosnovnije i najkorisnije informacije za one koji pokušavaju razumjeti HTML jezik za označavanje hiperteksta. Saznat ćemo njegovu svrhu, pregled će opisati glavne oznake i naredbe HTML jezika i principe rada s njim. Iz članka ćete naučiti zašto i kako koristiti HTML u praksi kada radite s blogom ili web-stranicom.
Glavni ciljevi i ciljevi HTML-a
Ne tako davno bio sam na svom blogu. Iz njega možete naučiti kako koristiti CSS za promjenu izgleda stranice stranice, njenog stila. Sada se pozabavimo osnovama HTML izgleda za početnike.
HTML je jezik za označavanje hiperteksta web stranice, koji vam omogućava da postavite njenu strukturu, da odredite njene glavne elemente za pretraživač. Tako, na primjer, zatvarajući tekst stranice u određene html oznake, možete urediti pasuse, liste, tabele. One. uz pomoć html-a, pregledniku to jasno stavljamo do znanja i, shodno tome, on će prikazati strukturu stranice koju smo postavili za korisnika.
HTML je alat za takozvani front-end razvoj web stranica. Šta to znači? Sigurno ste više puta čuli da postoje koncepti u okruženju kreiranja sajtova kao što su front-end i back-end. Dakle, front-end razvoj (front-end) uključuje alate i jezike koji su odgovorni za prikaz stranice direktno korisniku. Prikazuje se pomoću različitih pretraživača (Internet Explorer, Opera, Mozilla, Chrome, itd.). Pročitajte o. Pretraživači dobro razumiju HTML i CSS i transformišu primljene informacije u formu prilagođenu korisniku.
Back-end razvoj je baziran na jezicima na strani servera kao što je PHP. Koristeći PHP kod, server prepoznaje podatke o lokaciji, a zatim ih prenosi u pretraživač nakon što je kôd konvertovan od strane specijalnog tumača. One. pretraživač nekako prima stranicu u obliku HTML markupa i CSS stilova. Možete pogledati izvorni kod stranice, na primjer, u . Nije uvijek moguće odrediti u kojem je programskom jeziku web lokacija napisana iz izvornog koda, ali ćete vidjeti CSS stilske kodove i HTML oznake bez obzira na to.
Gdje početi učiti HTML?
Ako ozbiljno želite da naučite ovaj jezik, onda vam savjetujem da odmah preuzmete neku detaljnu knjigu sa dobrim recenzijama ili video kurseve. Za početak, možete pogledati ovaj video:
Najnovija verzija HTML jezika, koja nadilazi samo označavanje strukture teksta, je HTML5. Osim toga, u poređenju sa HTML4, najnovija verzija ima mnogo novih oznaka, semantika je promijenjena.
Ali u ovom članku ćemo ipak razmotriti uobičajenu četvrtu verziju HTML jezika i njegove glavne oznake. Da bismo to uradili, analizirajmo osnovnu strukturu HTML stranice, kao i hijerarhiju oznaka. Ako ne znate odakle da počnete da učite HTML, onda će vam informacije u nastavku dati osnovno razumevanje principa rada sa jezikom za označavanje hiperteksta.
Za kreiranje html dokumenta koristit ćemo zgodan uređivač.
Prva stvar koju treba deklarirati je tip dokumenta sa vezom do odgovarajućeg odjeljka:
1 2 "https://www.w3.org/TR/html4/loose.dtd"> Sada napravimo jednostavnu index.html stranicu sa sljedećim komentarima:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 "https://www.w3.org/TR/html4/loose.dtd"> <html > <glava > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / > <naslov > Naslov stranice</naslov> <styletype="text/css"> </style> </head> <tijelo > <h1 > Naslov broj 1 na stranici</h1> <div class="block1"> </div> <h2 > Podnaslov 2</h2> <div class="block2"> Blok druge stranice</div> </tijelo> </html> Naslov stranice Naslov broj 1 na stranici
Prvi blok stranice sa paragrafom. Drugi red bloka iz pasusaPodnaslov 2
Blok druge straniceKao rezultat, sljedeća stranica se prikazuje u pretraživaču kada se otvori ovaj index.html fajl:
Analizirajmo njegove komponente detaljnije.Okvir dokumenta čine oznake: html, head, body. A sve ostalo je zatvoreno u html tag:
1 2 3 4 5 6 <html > <glava > </head> <tijelo > </tijelo> </html> Shodno tome, html tag najavljuje otvaranje za čitanje i zatvaranje html dokumenta ( - početna oznaka- završna oznaka).
Glava - ovo je "glava" dokumenta, uključuje informacije koje neće biti prikazane u tijelu dokumenta. Prema tome, tijelo je "tijelo" dokumenta, odnosno njegov vidljivi dio.
U zaglavlju navodimo kodiranje (charset=utf-8) i naslov stranice. Zatim, za gornju opciju, povezujemo stilove pomoću oznake
U našem slučaju, stiliziramo blokove blok1 i blok2. Kreirali smo ove blokove unutar oznaka tijela koristeći oznake
, za koji je postavljena odgovarajuća klasa (class=”blok1”). Stoga smo ime klase povezali sa njenim stilom.Kao što možete vidjeti na snimku ekrana, prvi blok blok1 ima žutu ispunu, dok je blok2 uokviren i njegova boja teksta je plava. Sve ovo postavljamo pomoću css stilova povezanih pomoću oznake stila html.
Obratite pažnju na dizajn:
- babilonski
Sledi pet mogućih načina numerisanja:
- : standardna numerička numeracija - 1, 2, 3, ...
- : velika slova - A, B, C, D, ...
- : mala slova - a, b, c, d, ...
- : rimski brojevi - I, II, III, IV, V, ...
- : mali rimski brojevi - i, ii, iii, iv, v, ...
Ako želite da numerisanje liste počinje od određenog broja, morate dodati naredbi
- također atribut start=, na primjer,
- .
ugniježđena lista
Sistemi brojeva
- ne-pozicioni
- - crni krug (zadana vrijednost)
- - svjetlosni krug
- - kvadrat
Ako je jedna lista ugniježđena u drugu, tip markera se automatski mijenja: