HTML je jezik oznaka.
Tag (deskriptor) - poseban kod umetnut u tekst za formatiranje elemenata HTML dokumenta. Ovo je osnovni element kodiranja usvojen u HTML standardu. Oznaka je zatvorena u ugaonim zagradama. Na primjer, oznaka paragrafa je
I oznaka horizontalna linija - .
Postoje dvije vrste oznaka: kontejneri i pojedinačne oznake.
Kontejner. Ovo je par deskriptora koji se sastoji od početne (ili otvarajuće) i završne (ili završne) oznake. Početna oznaka ima oblik , gdje je TAG ime stvarne HTML oznake. Završna oznaka izgleda kao . Kontejneri su dizajnirani da pohranjuju neke informacije, kao što su tekst ili druge HTML oznake. Dakle, između početne i završne oznake, sadržaj kontejnera je zatvoren. Na primjer, element koji je formatiran tekst je zatvoren između oznaka AND.
Prazna ručka. Razlikuje se od kontejnera po tome što ne sadrži nikakve informacije. Ima samo početnu oznaku. Prazna ručka obično obavlja poseban zadatak koji nije povezan s određenim tekstom. Na primjer, oznaka stvara horizontalnu liniju.
Element HTML dokumenta- Ovo su početna i završna oznaka kontejnera zajedno sa sadržajem koji je zatvoren između njih. Element može biti slika, dio teksta, obrazac, tabela, lista, veza, tekstualno polje, gumb, pa čak i naslov dokumenta ili njegovog glavnog dijela (tijelo).
Komentar: HTML jezik ne razlikuje velika i mala slova. Oznake se mogu upisati i velikim i velikim slovima mala slova, tj. komanda je ekvivalentna naredbi ili. Nisu sve oznake podržane od strane svih pretraživača. Ako pretraživač ne podržava oznaku, jednostavno je ignoriše.
Najvažnija od HTML oznaka je istoimena oznaka. Uvijek mora otvoriti dokument, kao što oznaka mora biti u svom posljednjem redu. Ove oznake znače da linije između njih predstavljaju jedno HTML dokument. Ovo je važno jer je sam dokument obična ASCII tekstualna datoteka. Bez ovih oznaka, pretraživač ili drugi pregledač nije u mogućnosti da identifikuje format dokumenta i da ga ispravno protumači.
Naslov dokumenta nije obavezni element, ali dobro napisan naslov može biti od velike pomoći. Svrha zaglavlja dokumenta je da pruži informacije programu koji tumači dokument. Elementi unutra HEAD section(osim naslova dokumenta snimljenog u sekciji NASLOV) nisu vidljivi na ekranu. Elementi sadržani u odeljku HEAD dokumenta su potrebni za:
Dajte dokumentu naslov
Definirajte odnose između više dokumenata
Uputite pretraživač da kreira obrazac za pretragu
Definirajte metod slanja posebnih poruka određeni pretraživač ili drugi program za gledanje
Odjeljak HEAD otvara se oznakom. Obično ova oznaka dolazi odmah nakon . Završna oznaka označava kraj ovog odjeljka. Između pomenutih oznaka nalaze se preostale oznake sekcije zaglavlja dokumenta.
Odjeljak TITLE jedini je potreban element naslova dokumenta i služi da dokumentu da naslov. Obično se prikazuje u naslovnoj traci prozora pretraživača. Sadržaj odjeljka TITLE ne treba brkati s nazivom datoteke dokumenta. To predstavlja tekstualni niz, potpuno neovisno o nazivu datoteke i lokaciji. Ime datoteke je strogo definirano operativni sistem računar na kojem je pohranjen.
Ime dokumenta je upisano između oznaka i i je tekstualni niz. Ne biste ga trebali stavljati pod navodnike ako ne želite ni da se pojavljuju na ekranu. U većini slučajeva, odjeljak TITLE nije više od jednog reda.
U principu, ime može biti bilo koje dužine i sadržavati bilo koje znakove, osim nekih rezerviranih. U praksi je bolje da se ograničite na jedan red, imajući na umu da se ime pojavljuje u naslovnoj traci prozora pretraživača. Također biste trebali zapamtiti šta ostaje od naslova dokumenta kada minimizirate prozor pretraživača. Stoga, pokušajte da najvažnije riječi postavite na početak naslova.
Iako postoji trend ka „aktivnijem“ sadržaju na WWW-u, većina čitatelja je i dalje zainteresirana za to tekstualni dio stranice. Dakle, bez obzira da li je napisano novi tekst ili se stari pretvara, proces rada na tijelu dokumenta traje dosta vremena.
Pre nego što počnete da popunjavate dokument sadržajem, ima smisla kreirati njegov „okvir“. HTML dokument mora sadržavati neke potrebne elemente, bez kojih se neće ispravno interpretirati. Primjer jednostavnog predloška prikazan je na listi.
Ovo je primjer dokumenta
Ovdje unesite osnovni tekst
Šablon se otvara sa oznakom
, koji je, kao što već znamo, neophodan za svaki HTML dokument. Sljedeća oznaka je početak naslova dokumenta. Naslov sadrži element TITLE koji ulazi u naslov dokumenta, u našem slučaju “Ovo je primjer dokumenta”. Naslov se zatvara oznakom. Slijedi oznaka, nakon koje se postavlja tekst (tijelo) dokumenta. Oznaka znači kraj tijela, a oznaka kraj cijelog dokumenta. BODY može sadržavati veliki broj atributi. Svi su oni važni jer određuju ukupan izgled dokumenta. Ovi atributi su prikazani u tabeli.Svrha |
|
| ALINK | definira boju trenutno aktivne veze |
| POZADINA | ukazuje na URL slike koja se koristi kao pozadina |
| BGCOLOR | definira boju pozadine dokumenta |
| BGPROPERTIES | ako je postavljeno na FIXED , pozadinska slika ne skroluje |
| LEFTMARGIN | Postavlja granicu lijeve margine u pikselima |
| VEZA | Određuje boju veze koja još nije pregledana |
| TEKST | Definira boju teksta |
| TOPMARGIN | Postavlja gornju granicu margine u pikselima |
| VLINK | Određuje boju već pregledane veze |
Pogledajmo bliže ove atribute.
Određivanje boja sastavnih dijelova dokumenta je prvi korak u njegovom kreiranju. Ako se to ne učini, koriste se zadane boje. Oni su određeni programskim postavkama preglednika.
Ne postoje pravila za dobro izbalansiranu paletu. Trebate samo zapamtiti da kako bi čitatelji mogli čitati tekst bez neugodnosti, pokušajte održati visok kontrast između teksta i pozadine i izbjegavajte blizinu područja sa sličnim bojama.
HTML boje su određene heksadecimalnim brojevima. Sistem boja se zasniva na tri osnovne boje - crvenoj, plavoj i zelenoj. Za svaku boju je specificirano heksadecimalna vrijednost u rasponu od 00 do FF, što odgovara rasponu 0-255 u decimalnom obliku. Ove vrijednosti se zatim kombinuju u jedan broj, kojem prethodi simbol #. Radi jednostavnosti, HTML 3.2 definiše 16 standardnih boja, koje su zajedno sa svojim heksadecimalnim kodovima date u tabeli ispod.| Boja | Kod |
| Crna | #000000 |
| Magoop (tamno bordo) | #800000 |
| Zeleno | #008000 |
| Maslina | #808000 |
| mornarsko (tamno plava) | #000080 |
| Ljubičasta | #800080 |
| Teal | #008080 |
| siva | #808080 |
| Srebro | #S0S0S0 |
| Crveni | #FF0000 |
| limeta (limeta) | #00FF00 |
| Žuta | #FFFF00 |
| Plava | #0000FF |
| fuksija (fuksija) | #FF00FF |
| Aqua | #00FFFF |
| Bijelo | #FFFFFF |
VLINK atribut se koristi za prikaz linkova koji su već pregledani. Po pravilu su više obojene tamna nijansa iste boje kao i ne
pogledani linkovi. ALINK specificira boju trenutno aktivne veze. Ovo je relativno nov atribut, koji se obično koristi za pregled dokumenata sa više okvira.Sam popularne načine ukrasiti HTML stranicu znači postaviti pozadinske grafike na nju, vidljive ispod glavnog teksta (atribut
POZADINA ). Ova tehnika pomaže da se naglasi integritet dokumenta. naprotiv, podijelite ga na logične dijelove.Većina pozadinskih slika je male veličine, ali njihove kopije, poput tapeta, ispunjavaju cijeli prozor preglednika. Posebno su popularne različite teksturirane (uzorane) slike: cigle, mermer, sve vrste tkanina. U osnovi, služe da jednostavno popune praznine u dokumentu. Promišljenije stranice imaju pozadinu koja odgovara sadržaju.
Atributi
LEFTMARGIN i TOPMARGIN se koriste za postavljanje udaljenosti između lijeve i gornje ivice teksta i odgovarajućih ivica prozora pretraživača. Položaj ostalih rubova teksta nije podesiv. Ovo se radi kako bi se osiguralo da stranicu može pregledati bilo koji pretraživač. Nemoguće je unaprijed znati koja je veličina prozora čitača dokumenta. LEFTMARGIN postavlja udaljenost između lijeve ivice prozora pretraživača, mjereno u pikselima. Najčešće se ovaj atribut koristi kada autor želi imati marginu na lijevoj strani koja je bez teksta i koja ima drugačiji uzorak ili boju od ostatka pozadinske slike. TOPMARGIN se koristi za postavljanje udaljenosti između gornje ivice teksta i gornje ivice prozora pretraživača. Obično se koristi kada je vrh pozadinske slike važan i poželjno je da ostane otvoren. HTML dokumenti mogu uključivati komentare koji neće biti vidljivi čitaocu. Moraju početi sa oznakom. Sve što se nalazi unutar ovih oznaka ostaje nevidljivo prilikom pregleda stranice. ADRESA je jedan od najvažnijih elemenata HTML-a. Služi za identifikaciju autora dokumenta i (opciono) za navođenje adrese autora. Ovdje se obično postavljaju i informacije o autorskim pravima. Ovaj element se nalazi ili na početku ili na samom kraju dokumenta. ADRESA se sastoji od teksta koji se nalazi između oznaka i. Tekst zatvoren između ovih oznaka obično je prikazan kurzivom u prozoru pretraživača.Pokušat ću voditi newsletter po principu “od jednostavnog ka složenom”. Provest ću ga upravo u ovom formatu kako bi osoba koja želi da nauči osnove izrade web stranice mogla odmah nakon objavljivanja biltena primijeniti predstavljeni materijal.
Ali odmah bih želeo da rezervišem da je, posebno, HTML jezik veoma opsežan jezik koji se stalno razvija. I stoga, da bi savladali ovaj jezik u visoki nivo Trebali biste temeljno proučiti osnove (tj. moje biltene). I u isto vrijeme vježbajte.
Dok budemo naučili osnove HTML-a, osvrnućemo se na CSS stilovi. To znači da ćemo učiti i CSS. Ali to je malo kasnije. Također ćemo se obratiti javascriptu za pomoć.
Za današnju uvodnu lekciju, počećemo učenjem o strukturi HTML dokumenta i osnovnim HTML oznakama.
Idi…
Svaki HTML dokument počinje redom:
XHTML
|
IN opšti slučaj ova linija govori pretraživaču koji otvara našu stranicu na koje standarde treba da se oslanja.
Oznaka je vrlo raznolika, a njena izmjena određuje kako će sadržaj biti prikazan na vašoj stranici.
Međutim, ako vješto rasporedite sve elemente i blokove na stranici i primijenite stil, onda će sve raditi jednako dobro u svim pretraživačima sa željenim .
Ali dok ne znamo šta su blokovi, šta su stilovi i kako da primenimo ovu „abrukadabru“, smatram da je neophodno da se vratimo na detaljno razmatranje kada već znamo kako nešto da uradimo i zaista možemo da procenimo njegov rad.
U međuvremenu, idemo niz stranicu.
Usput, zašto sam počeo da gledam HTML dokument s vrha stranice?
Zato što pretraživač učitava stranicu i „čita kod“ od vrha do dna, s lijeva na desno. (Međutim, baš kao što čitamo knjige).
Možda riječ tag nije sasvim jasna?
Uopšteno govoreći, oznaka je instrukcija koja govori pretraživaču šta da radi ovo mjesto dokument treba uraditi.
Koristimo oznake za kreiranje naših stranica. Sve oznake su zatvorene u takozvanim “uglovima” ( ). I završni (sa kosom crtom). Na primjer, sličica. Određuje da će tekst između početne i završne jake oznake biti podebljan.
Nadam se da je jasno šta je oznaka.
Predlažem da ukucate nešto svojim rukama.
Pa počnimo.
Pokrenite notepad ili wordpad u OC WINOWS. Ukucajmo sljedeće redove:
XHTML
Naslov prozora pretraživača
Naslov prozora pretraživača
|
Sačuvajmo fajl pod nekim imenom, na primer start.html. Hajde sada da shvatimo šta su napisali.
Između oznaka je informacija koja nije prikazana na stranici.
Na primjer, tag, inače, ne zahtijeva završnu oznaku; može ukazivati na kodiranje (charset=windows-1251) ili informacije o autoru (name="author" content="Puno ime"), ili riječi za pretraživač, oznaka će primorati pretraživač da automatski ode na web lokaciju mysite.ru nakon 30 sekundi (primjer).
Oznaka definiše tekst u naslovnoj traci prozora pretraživača. (Završna oznaka).
Oznaka također može sadržavati javascript skripte ili vbscript u tagovima.... .
I stilovi zatvoreni u oznakama... .
Vjerovatno ćemo završiti s ovom oznakom.
Ovo je, zapravo, tijelo dokumenta, sve što vidimo na stranici nalazi se ovdje. Oznaka ima skup parametara koje ćemo pogledati, ali se ne preporučuje da ih koristite.
bgcolor - postavlja boju pozadine dokumenta. ( )
background - ukazuje na URL slike - pozadina dokumenta.
text - postavlja boju teksta dokumenta.
link - postavlja boju hiperveza.
vlink= - postavlja boju hiperveza koje ste već posjetili koristeći vrijednost.
alink= - Postavlja boju hiperveza kada se klikne.
bgproperties=fixed - pozadinska slika se neće pomicati. One. tekst će se pomeriti kada se pritisne PageDown, ali pozadina neće.
Ovaj parametar samo podržano Internet Explorer.
Ovi parametri se mogu kombinirati, na primjer, na ovoj stranici se koristi:
XHTML
|
Otkucajmo ovaj red u našem prethodnom primjeru.
XHTML
Samo kodiranje se ne prikazuje direktno na web stranici, ali i dalje igra veliku ulogu. Ako nije eksplicitno postavljeno, može doći do grešaka prilikom otvaranja različitim pretraživačima, a čitanje možda neće biti moguće.
— sa stanovišta volumena, možemo reći da ovaj blok uključuje najviše informacija, jer se u njemu formira tijelo stranice. To je upravo ono što će biti prikazano na ekranu.
Rice. 1. Ovo je tipičan primjer potrebne oznake, koji čine strukturu dokumenta.
- - vrlo važne uparene naslovne oznake koje se prikazuju na web stranici. U pravilu h1 sadrži naslov članka ili druge publikacije, h2 sadrži podnaslove, h3 sadrži podnaslove podnaslova itd. Veliki dokument bi zapravo mogao trebati sve ove oznake.
Naslov se prikazuje kao blok element i ima padding na vrhu i dnu. Preporučuje se da se veliki tekstovi razdvoje na više podnaslova, jer se na taj način poboljšava percepcija čitaoca o materijalu. Zaglavlje također ima važna funkcija u smislu optimizacije stranice prema zahtjevima tražilice. Ključna riječ u zaglavlju i podnaslovima poboljšava relevantnost stranice.
— čini pasus (paragraf) teksta. Takođe veoma važan element. Malo je vjerovatno da bi iko želio čitati kontinuirani tekst koji ni na koji način nije podijeljen na pasuse, zar ne?
Paragraf takođe ima male uvlake. IN vizuelni urednici Sistemi za upravljanje sadržajem mogu automatski postaviti ovu oznaku kad god napravite dva preloma reda.
Možda su najosnovnije oznake koje su odgovorne za strukturu opisane gore. Svaka web stranica ih ima. Ali kako se formira oznaka i šta ona uključuje?
Struktura html tagHajde da to odmah shvatimo na primjeru.
Naslov
Ovdje možete vidjeti da nismo samo pisali. Možete dodati dodatne atribute bilo kojoj oznaci. Napisane su u početnom dijelu elementa.
Prvo se upisuje ime samog atributa, a zatim se postavlja njegova vrijednost. U ovom primjeru, klasa reda = “title” će vezati klasu stila naslova za naš naslov, tako da možemo pristupiti ovom elementu u css-u preko njega.
Između uparenih tagova zapisali smo šta će biti direktno prikazano na ekranu. Nakon ovoga, trebali biste zatvoriti oznaku. Zaboravljanje da to uradite može dovesti do zanimljivih grešaka. Na primjer, sav tekst na stranici može se pretvoriti u naslov. IN pojedinačne oznake ne znaš pisati slobodan tekst, u njima možete postaviti samo određene atribute.
Zdravo, dragi čitaoci bloga! Danas ćemo govoriti o strukturiranju teksta na web stranicama, karakteristikama njegovog prikaza i razmotriti kako razbiti tekst u zasebne logičke fragmente: naslove, pasuse, liste.
Postoji mnogo oznaka za rad sa tekstom u html-u, ali prvo moramo govoriti o nekim karakteristikama prikaza teksta u pretraživaču. Prvo, bilo koji broj razmaka, tabulatora i prijeloma reda u redu se pojavljuje kao jedan razmak. One. Pozicioniranje teksta pomoću razmaka i tabulatora neće raditi.
Na primjer, ovi redovi na web stranici bit će prikazani isto uprkos njihovom različitom pisanju:
Dobrodošli na našu stranicu!
Dobro
dobrodošli na našu web stranicu!
Dobrodošli
na naše
web stranica!
Izuzetak je oznaka unutar koje se svi razmaci i crtice prikazuju onakvi kakvi jesu.
Drugo, tekst zauzima širinu prozora pretraživača. Ako je dugačak red teksta širi od prozora pretraživača, prijelomi redova će se automatski umetnuti na razmake ili crtice. Ako u redu nema razmaka ili crtica, a linija ne odgovara širini prozora, pretraživač će prikazati horizontalna traka skrolujte.
Sada idemo dalje na razmatranje strukturni elementi tekst u html oznaci.
Paragrafi u HTML-uTipično, blokovi teksta su odvojeni paragrafima. Ovo olakšava čitanje velikih komada teksta. HTML jezik za kreiranje pasusa sadrži uparena oznaka
. Sintaksa za kreiranje pasusa je sljedeća:
Ovo je prvi paragraf.
A ovo je drugi paragraf
Paragrafi na HTML stranici su odvojeni malim uvlačenjima od prethodnih i narednih elemenata. Tag
Također blok element. Šta se desilo blok elementi Napisao sam u članku "". Da vas podsjetim da blok elemente karakterizira činjenica da zauzimaju cijelu dostupnu širinu HTML stranice, visina elementa je određena njegovim sadržajem i uvijek počinje u novom redu.
Pogledajmo primjer korištenja pasusa na web stranici. Hajde da otvorimo uređivač teksta, upišite HTML kod i sačuvajte ga sa html ekstenzijom:
Web stranica o automobilima.
Web stranica o automobilima.
Klasifikacija automobila
Passenger car;
Cargo;
SUV;
Buggy;
Pokupiti;
Sport;
Racing.
Prilikom otvaranja ovaj fajl izgledat će otprilike ovako:
Za sada, naša stranica sadrži samo paragrafe.
Za poravnavanje teksta u oznaci pasusa
Podržava align atribut. Može uzeti jednu od četiri vrijednosti:
- lijevo — poravnajte tekst ulijevo;
- centar — poravnajte tekst sa središtem;
- desno — poravnajte tekst udesno;
- justify - poravnanje po širini, tj. poravnajte tekst istovremeno desno i lijevo. Da bi to uradio, pretraživač postavlja razmake između reči.
Po defaultu, atribut align je lijevo. Primjer korištenja atributa align:
Ovaj tekst je u pasusu na html stranica bit će poravnati lijevo!
Ovaj tekst će se pojaviti na sredini stranice u pretraživaču!
Ovaj tekst će biti desno poravnat!
I pretraživač će ovaj veliki dio teksta poravnati po širini, tj. istovremeno na desnoj i lijevoj ivici! Da bi to uradio, veb pretraživač će umetnuti dodatne razmake između reči i pasus će poprimiti uredan izgled koji se lako čita!
A ovako će se prikazati u pretraživaču:
Naslovi se koriste za isticanje dijelova teksta na web stranici. Postoji šest nivoa naslova u html-u. Najviše vrhunski nivo je nivo 1 - oznaka, a najniži nivo 6, oznaka. Oznake -
