Kreiranje web stranice pomoću html-a. Kreiranje web stranice pomoću HTML-a
Hypertext Markup Language (HTML) je jezik dizajniran posebno za kreiranje Web dokumenata. Definiše sintaksu i postavljanje posebnih instrukcija (tagova) koje se ne štampaju na ekranu, ali govore pretraživaču kako da prikaže sadržaj dokumenta. Također se koristi za kreiranje veza do drugih dokumenata, lokalnih ili umreženih, kao što su oni koji se nalaze na Internetu.
HTML standard i drugi standardi za Web razvijeni su pod vodstvom W3C (World Wide Web Consortium). Standardi, specifikacije i nacrti novih prijedloga mogu se naći na http://www.3w.org/. HTML 4.0 specifikacija je trenutno na snazi i dobija sve veću podršku od glavnih pretraživača.
U praksi, na HTML standard u velikoj meri utiče prisustvo oznaka koje predlažu i podržavaju najpoznatiji pretraživači, kao što su Microsoft Internet Explorer i Netscape Navigator. Ove oznake mogu ili ne moraju trenutno biti dio trenutne HTML specifikacije.
Informacije o HTML oznakama Compendium ( brzi vodič by HTML) kreirao Ron Woodall. Zbirka sadrži listu oznaka i njihovih atributa po abecednom redu, kao i ažurirane informacije o podršci pretraživača za svaku od njih.
HTML dokumenti su obični ASCII tekstualni fajlovi. To znači da možete koristiti bilo koji uređivač teksta da ih kreirate, čak i uz minimalne mogućnosti. Postoje alati za uređivanje dizajnirani posebno za pisanje HTML-a. Oni štede vrijeme tako što pružaju prečice za izvršavanje zadataka koji se ponavljaju, kao što su inicijalizacija dokumenata, tabela ili jednostavno primjena stilova na tekst. HTML uređivači se razlikuju od WYSIWYG autorskih alata (o kojima se govori u nastavku) po tome što zahtijevaju poznavanje pravila za ručno sastavljanje HTML-a, a uređivači samo pojednostavljuju i ubrzavaju ovaj proces.
Korisnici Windowsa svakako bi trebali pogledati HomeSite, moćan i jeftin HTML uređivač Allaire Corporation. Uključuje isticanje HTML sintakse, FTP, provjeru sintakse i pravopisa, te pretraživanje i zamjenu više datoteka. Osim toga, sadrži posebne komande i šablone za kreiranje složenijih elemenata (okviri, JavaScript i DHTML skripte).
Kada radite na Macintosh računarima, obratite pažnju na BBEdit, komercijalni HTML editor kompanije Bare Bones Software, Inc. On zaista ima određenu težinu među Macintosh Web programerima. Uključuje praktične i brze HTML alate, pretraživanje i zamjenu više datoteka, ugrađenu FTP funkciju, podršku za 13 programskih jezika, izradu tablica, kontrolu HTML sintakse i mnoge druge funkcije.
Posljednje godine karakterizira nagli rast tržišta originalnih instrumenata. WYSIWYG (Ono što vidite je ono što dobijate) HTML uređivači imaju grafičko sučelje koje pisanje HTML-a čini sličnijim programima za uređivanje teksta ili raspored stranica. Prvobitna svrha ovih programa bila je da oslobode korisnike od HTML oznaka, slično kao što programi za označavanje stranica štite programera od skupa komandi PostScript. Danas je njihov značaj povećan jer povećavaju efikasnost i nivo automatizacije izrade dokumenata, dok istovremeno omogućavaju pristup izvornom HTML tekstu.
Najpopularniji WYSIWYG uređivači trenutno su: Macromedia DreamWeaver, Golive CyberStudio (samo za Macintosh računare), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe PageMill.
HTML dokument sadrži tekst (sadržaj stranice) i inline oznake—uputstva o strukturi, izgledu i funkciji sadržaja. HTML dokument je podijeljen na dva glavna dijela: glavu i tijelo. Zaglavlje sadrži informacije o dokumentu, kao što su njegov naslov i metodološke informacije koje opisuju sadržaj. Tijelo sadrži sadržaj samog dokumenta (ono što se prikazuje u prozoru pretraživača).
Svaka oznaka se sastoji od imena, koje može biti praćeno listom opcionih atributa, a svi sadržani u uglastim zagradama< >. Sadržaj zagrada se nikada ne prikazuje u prozoru pretraživača. Naziv oznake je obično skraćenica njene funkcije, što olakšava pamćenje. Atributi su svojstva koja proširuju ili preciziraju funkciju oznake. Tipično, ime i atributi unutar oznake ne razlikuju velika i mala slova. Tag
će raditi isto kao . Međutim, vrijednosti određenih atributa mogu biti osjetljive na velika i mala slova. Ovo se posebno odnosi na nazive datoteka i URL-ove.Većina oznaka su kontejneri. To znači da imaju početnu (otvaranje ili početak) i krajnju (završnu) oznaku. Tekst između oznaka će izvršiti upute sadržane u njima.
Završna oznaka ima isto ime kao i početna oznaka, ali joj prethodi kosa crta (/). Može se smatrati "prekidačem" za oznaku. Krajnja oznaka nikada ne sadrži atribute.
U nekim slučajevima, krajnja oznaka je opciona i pretraživač određuje kraj oznake iz konteksta. Najčešći način da se izostavi završna oznaka je<р>(stav). Pretraživači su podržavali ovu oznaku bez odgovarajućeg završetka, tako da su mnogi web autori navikli da koriste kratka forma. Ne dozvoljavaju sve oznake ovo i ne opraštaju im svi pretraživači njihov nedostatak. Dakle, kada ste u nedoumici, uključite završnu oznaku u svoj tekst. Ovo je posebno važno kada koristite kaskadne tablice stilova u dokumentu.
Neke oznake nemaju završne oznake jer se koriste za postavljanje pojedinačnih (samostalnih) elemenata na stranicu. Jedna od njih je oznaka slike , jednostavno postavlja grafiku u tok stranice. Druge samostalne oznake su prijelomi reda (
), vodoravna linija (
) i oznake koje sadrže informacije o dokumentu i ne utiču na sadržaj prikazan na ekranu, kao npr I
Atributi se dodaju oznaci kako bi se proširile ili modificirale njene radnje. Možete dodati više atributa jednoj oznaci. Ako atributi oznake slijede ime oznake, oni su odvojeni jednim ili više razmaka. Red nije važan. Većina atributa ima vrijednosti koje slijede znak jednakosti (=) iza naziva atributa. Vrijednosti su ograničene na 1024 karaktera. Vrijednosti mogu biti osjetljive na velika i mala slova. Ponekad vrijednosti moraju biti u navodnicima (dvostruke ili jednostruke). Pravila za pisanje vrijednosti su sljedeća:
- - ako je vrijednost jedna riječ ili broj i sastoji se samo od slova (a-z), brojeva (0-9) i posebnih znakova (tačka<.>
- - ako vrijednost sadrži više riječi odvojenih zarezima ili razmacima, ili sadrži posebne znakove osim tačke ili crtice, onda se mora staviti u navodnike. Na primjer, URL-ovi zahtijevaju navodnike jer sadrže znakove "://". Navodnici su također potrebni kada se specificiraju vrijednosti boja koristeći format "#rrggbb".
Ako niste sigurni da koristite navodnike, uvijek ih koristite za sve vrijednosti.
IN HTML oznake Druge HTML oznake se mogu postaviti da bi se izvršilo više oznaka na jednom elementu. Ovo se zove ugniježđenje, a da bi se to uradilo ispravno, početna i završna oznaka ugniježđene oznake moraju biti između početne i završne oznake vanjske oznake.
Česta greška je preklapanje oznaka. Dok će neki pretraživači prikazati sadržaj označen na ovaj način, mnogi vam ne dozvoljavaju da prekršite pravilo, pa je važno pravilno postaviti oznake. Sljedeći primjer pokazuje neispravno ugniježđenje oznake (imajte na umu da je oznaka<В>zatvara se prije zatvaranja ):
Vrijeme je divan danas - ove informacije, ignorisan od strane pretraživača.
Informacije koje pretraživači zanemaruju. Ispod su informacije sadržane u HTML dokumentu, uključujući određene oznake, koje će biti zanemarene kada ih pregledači pregledaju. Uključuje:
- - prelomi linija. Znakovi na kraju reda u HTML dokumentu se zanemaruju. Tekst i elementi će se prelamati sve dok se oznaka ne naiđe u toku teksta dokumenta
- - znakovi tabulatora i više razmaka. Kada pretraživač naiđe na tabulator i nekoliko uzastopnih razmaka u HTML dokumentu, ispisuje samo jedan razmak. Dakle, ako dokument sadrži: "daleko, daleko", pretraživač će ispisati "daleko, daleko". Dodatni razmaci se mogu dodati u tekstualni tok pomoću znaka razmaka koji se ne prekida (Snbsp;). Osim toga, izlaze svi razmaci ako je tekst formatiran (nalazi se u oznakama
- - višestruko
- - neprepoznate oznake. Ako pretraživač ne razumije oznaku ili je pogrešno postavljena, onda je pretraživač jednostavno ignoriše. Ovisno o oznaci i pretraživaču, ovo može dati različite rezultate. Ili pretraživač neće ništa ispisati, ili može prikazati sadržaj oznake kao običan tekst;
- - tekst u komentarima. Pretraživači ne prikazuju tekst između posebnih elemenata
Uvod
1. Osnovne informacije
1.1 O html jeziku
1.2 Kreiranje weba site
1.3 Osnove
1.4 Struktura dokumenta
1.5 Oznake tijela dokumenta
1.6 Lista osnovnih html oznaka
2. Dodatne informacije
2.1 Lista oznaka
2.3 Grafika unutar dokumenta
2.4 Dodavanje stilova dokumentu
2.5 Posebne html oznake
2.6 HTML forme
2.7 HTML okviri
2.8 HTML tabele
2.9 Optimizacija grafike za web
2.10 Osnove CSS-a
3. Opis izrade sajta
3.1 Priprema
3.2 Kreiranje početne stranice
3.3 Kreiranje druge stranice
3.4 Kreiranje stranice sa opisom grada
3.5 Stranica sa fotografijama
3.6 Stranica programa
3.7 Stranica zahvalnosti
Zaključak
Spisak korišćene literature
Uvod
Ovaj rad je posvećen HTML jeziku. Koristeći ovaj jezik, kreiraju se datoteke sa ekstenzijom *.htm i *.html, koje su web stranice. Internet stranice se sastoje od njih.
TO diplomski rad Stranica je priložena kao primjer onoga što se može kreirati pomoću HTML-a.
Cijeli rad je podijeljen u 3 dijela. Prvi dio je u potpunosti posvećen opisu glavnih HTML oznaka. Dat će vam sve potrebne informacije o tome kako kreirati jednostavne web stranice. Drugi odjeljak pruža informacije o tome kako poboljšati izgled vašeg dokumenta i ugraditi dodatne funkcije. I treći dio sadrži opis kako je nastala web stranica priložena ovoj tezi. Detaljno opisuje mesec i po dana mukotrpnog rada na izradi sajta, govori o raznim greškama pri izradi i njihovom ispravljanju, o poteškoćama koje su se pojavile i metodama za njihovo otklanjanje.
Nakon čitanja ovog rada, svako, čak i onaj koji nije u potpunosti upućen u programiranje, moći će razumjeti osnove HTML programiranja. A oni koji znaju možda će pronaći nešto novo za sebe.
1.1 O jeziku HTML
Hyper Text Markup Language (HTML) je standardni jezik dizajniran za kreiranje hipertekstualnih dokumenata u WEB okruženju. HTML dokumenti se mogu pregledati u različitim tipovima WEB pretraživača. Kada se dokument kreira pomoću HTML-a, WEB pretraživač može protumačiti HTML kako bi istaknuo različite elemente dokumenta i prvo ih obradio. Korištenje HTML-a omogućava dokumentima da se formatiraju tako da mogu biti predstavljeni pomoću fontova, linija i drugih grafičkih elemenata na bilo kojem sistemu koji ih pregleda.
Većina dokumenata ima standardne elemente kao što su naslov, paragrafi ili liste. Koristeći HTML oznake, možete označiti ove elemente, pružajući WEB pretraživačima minimalne informacije za prikaz ovih elemenata, uz očuvanje cjelokupnog opšta struktura i informacijske potpunosti dokumenata. Sve što je potrebno za čitanje HTML dokumenta je WEB pretraživač koji tumači HTML oznake i prikazuje dokument na ekranu u obliku koji mu daje autor.
U većini slučajeva, autor dokumenta striktno određuje izgled dokumenta. U slučaju HTML-a, čitač, na osnovu mogućnosti WEB pretraživača, može u određenoj mjeri kontrolisati izgled dokument (ali ne i njegov sadržaj). HTML vam omogućava da označite gdje bi se naslov ili pasus trebao pojaviti u dokumentu pomoću HTML oznake, a zatim dopušta WEB pretraživaču da tumači te oznake. Na primjer, jedan WEB pretraživač može prepoznati početak oznake pasusa i predstaviti dokument u njemu u pravom obliku, dok drugi nema tu mogućnost i predstavlja dokument u jednom redu. Korisnici nekih WEB pretraživača takođe imaju mogućnost prilagođavanja veličine i vrste fonta, boje i drugih parametara koji utiču na prikaz dokumenta.
HTML oznake se mogu grubo podijeliti u dvije kategorije:
1. Oznake koje određuju kako će tijelo dokumenta kao cjeline biti prikazano od strane WEB pretraživača.
2. Oznake koje opisuju opća svojstva dokumenta, kao što su naslov ili autor dokumenta.
Zapamtite da je glavna prednost HTML-a to što se vaš dokument može pregledati na WEB pretraživačima razne vrste i na raznim platformama.
1.2 Stvaranje Website
HTML dokumenti se mogu kreirati pomoću bilo kojeg uređivača teksta ili specijalizovanih HTML uređivača i pretvarača. Izbor uređivača koji će se koristiti za kreiranje HTML dokumenata zavisi isključivo od pogodnosti i ličnih preferencija svakog autora.
Na primjer, HTML uređivači, kao što je Netscape Navigator Gold iz Netscapea, omogućavaju vam da kreirate dokumente grafički koristeći WYSIWYG (ono što vidite, to i dobijete) tehnologiju. S druge strane, većina tradicionalnih alata za kreiranje dokumenata ima pretvarače koji vam omogućavaju da konvertujete dokumente u HTML format.
Sve HTML oznake počinju sa "<" (левой угловой скобки) и заканчиваются символом ">" (pravokutna zagrada). Obično postoje početna i završna oznaka. Na primjer, ovdje su oznake naslova, koje definiraju tekst unutar početne i završne oznake koje opisuju naslov dokumenta:
Završna oznaka izgleda isto kao početna, a razlikuje se od nje po kosoj crti ispred teksta unutar ugaonih zagrada. IN u ovom primjeru tag
Neke oznake kao npr
(oznaka koja definira pasus) ne zahtijevaju završnu oznaku, ali njena upotreba daje izvornom tekstu dokumenta poboljšanu čitljivost i strukturu.
HTML ne razlikuje velika i mala slova, pa bi gornji primjer mogao izgledati ovako:
Pažnja! Dodatni razmaci, tabulatori i povratni znakovi dodani izvornom tekstu HTML dokumenta radi bolje čitljivosti će se zanemariti od strane WEB pretraživača prilikom tumačenja dokumenta. HTML dokument može uključiti gore navedene elemente samo ako su smješteni unutar oznaka
I. Više detalja o oznakama
Biće napisano u nastavku.Kada WEB pretraživač primi dokument, on određuje kako bi se dokument trebao tumačiti. Prva oznaka koja se pojavljuje u dokumentu mora biti oznaka . Ova oznaka govori WEB pretraživaču da je vaš dokument napisan pomoću HTML-a. Minimalni HTML dokument bi izgledao ovako:
Telo dokumenta...
Zaglavlje dokumenta
. Oznaku glave dokumenta treba koristiti odmah nakon oznake i nigde drugde u telu dokumenta. Ova oznaka predstavlja opšti opis dokument. Izbjegavajte postavljanje teksta unutar oznake . Start tag postavljen neposredno ispred oznakei druge oznake koje opisuju dokument i završnu oznaku</HEAD> postavljen odmah nakon završetka opisa dokumenta. na primjer:</p> <p><TITLE>Spisak zaposlenih Pažnja! Tehnički, početne i završne oznake kao što su ,
I opciono. Ali toplo se preporučuje da ih koristite, jer upotreba ovih oznaka omogućava WEB pretraživaču da pouzdano odvoji dio zaglavlja dokumenta i sam semantički dio.Naslov dokumenta
. Većina WEB pretraživača prikazuje sadržaj oznake <TITLE>u naslovu prozora koji sadrži dokument i u datoteci sa obeleživačima, ako je podržan od strane WEB pretraživača. Naslov ograničen oznakama <TITLE>I , nalazi se unutra -oznake, kao što je prikazano u gornjem primjeru. Naslov dokumenta se ne pojavljuje kada je sam dokument prikazan u prozoru.Razvoj web stranica korištenjem jezika za označavanje hiperteksta HTML
Web stranice i web stranice
Web stranice. Web stranice se kreiraju pomoću jezika za označavanje hiperteksta (HTML). Kontrolni znakovi se ubacuju u običan tekstualni dokument - HTML oznake, koje određuju izgled web stranice kada se gleda u pretraživaču.
Glavne prednosti web stranica su:
- mali obim informacija;
- Mogućnost pregleda u različitim operativnim sistemima.Za kreiranje web stranica koriste se jednostavni uređivači teksta koji ne uključuju dokument koji se kreira kontrolni znakovi za formatiranje teksta samog uređivača. Kao takav uređivač u Windows-u, možete koristiti standardnu aplikaciju Notepad.
Kreiranje web stranica pomoću HTML oznaka zahtijeva puno truda, vremena i znanja sintakse jezika. Upotreba specijalnih softverskih alata (Web editora) čini posao kreiranja web stranica jednostavnim i efikasnim. Proces kreiranja i uređivanja stranica u Web editorima je vrlo jasan, jer se radi u WYSIWYG modu (od engleskog “What You See Is What You Get” - “What you see is what you get”).
Web stranice. Publikacije na World Wide Webu imaju oblik web stranica koje obično sadrže materijal o određenoj temi ili problemu. Vladine strukture i organizacije (vlada, Duma, škola, itd.) obično kreiraju zvanične web stranice svojih organizacija, na kojima objavljuju informacije o svojim aktivnostima. Komercijalne firme oglašavaju robu ili usluge na svojim web stranicama i nude da ih kupe u online prodavnici. Svaki korisnik Interneta može kreirati vlastitu tematsku web stranicu na kojoj može objavljivati informacije o svom razvoju, hobijima itd.
Baš kao što se časopis sastoji od štampanih stranica, web stranica se sastoji od kompjuterskih web stranica. Stranica mora sadržavati sistem hiperlinkova koji omogućava korisniku da se kreće kroz web stranice.
Prije nego što postavite svoju web stranicu na server na Internetu, ona mora biti temeljno testirana, jer će potencijalni posjetioci vaše stranice biti desetine miliona korisnika interneta.
Da biste objavili web stranicu, morate pronaći odgovarajuću lokaciju na jednom od Internet servera. Mnogi provajderi pružaju svojim klijentima mogućnost da besplatno hostuju web stranice na svojim serverima (besplatan hosting).
Sigurnosna pitanja
1. Koja je prednost web stranica u odnosu na obične tekstualne dokumente?
2. Kako se web stranice kombinuju u web stranice?
Struktura web stranice
HTML kod stranice se nalazi unutar kontejnera . Bez ovih oznaka, pretraživač nije u mogućnosti da odredi format dokumenta i da ga ispravno protumači. Web stranica je podijeljena na dva logična dijela: zaglavlje i sadržaj koji se prikazuje u pretraživaču.
Zaglavlje web stranice nalazi se u kontejneru
i sadrži naslov dokumenta i pozadinske informacije o stranici (na primjer, tip kodiranja), koje koristi pretraživač za ispravan prikaz.Oznake su zatvorene u ugaonim zagradama i mogu biti pojedinačne ili uparene. Uparene oznake sadrže oznaku za otvaranje i zatvaranje (takav par oznaka se zove kontejner).
Završna oznaka sadrži kosu crtu (/) ispred oznake. Oznake se mogu pisati i velikim i malim slovima.
Naslov stranice se stavlja u kontejner
a kada se pogleda prikazuje se u gornjem redu prozora pretraživača. Sadržaj stranice prikazan u pretraživaču stavlja se u kontejner
(Sl. 6.26):
<ТITLE>Računar
Računar i softver
 |
| Rice. 6.26. Šablon web stranice "Računar" |
Kreirana web stranica mora biti sačuvana kao datoteka pod imenom index.htm. Također možete koristiti html kao ekstenziju datoteke web stranice. Preporučljivo je da napravite posebnu fasciklu za hostovanje sajta i da sačuvate sve datoteke sajta koji se razvijaju u ovoj fascikli.
Potrebno je razlikovati naziv datoteke index.htm, pod kojim je web stranica pohranjena sistem datoteka, i naziv web stranice (na primjer, "Računar"), koji se prikazuje u gornjem redu prozora pretraživača. Naziv web stranice mora odgovarati njenom sadržaju, jer ga prvenstveno analiziraju pretraživači.
Sigurnosna pitanja
1. Koje oznake (kontejneri) moraju biti prisutne u HTML dokumentu? Koja je logička struktura web stranice?
6.10. Praktični zadatak. Kreirajte predložak za web stranicu "Računar" i pogledajte ga u pretraživaču.
Formatiranje teksta na web stranici
Za sada naša stranica ne izgleda baš privlačno: mali crni font na bijeloj pozadini. Koristeći oznake možete postaviti različite parametre oblikovanja teksta.
Naslovi. Veličina fonta naslova se postavlja u parovima oznaka od<Н1>(najveći) do<Н6>(najmanji).
Font. Neke oznake imaju atribute, koji su imena svojstava koja mogu poprimiti određene vrijednosti. Koristeći oznaku FONT i njene atribute, možete postaviti opcije oblikovanja fonta. Atribut FACE vam omogućava da postavite font fonta (na primjer, FACE="Arial"), atribut SIZE - veličinu fonta (na primjer, SIZE=4).
Atribut COLOR vam omogućava da postavite boju fonta (na primjer, C0L0R="blue"). Vrijednost atributa COLOR može se odrediti ili imenom boje (na primjer, "crvena", "zelena", "plava" itd.) ili njenom heksadecimalnom vrijednošću.
Heksadecimalni prikaz boje koristi RGB format "#RRGGBB", gdje prve dvije heksadecimalne cifre određuju intenzitet crvene (crvene), sljedeće dvije - intenzitet zelene (zelene) i posljednje dvije - intenzitet plave ( plava). Minimalni intenzitet boje određen je heksadecimalnim brojem 00, a maksimalni FF. Na primjer, plava boja je postavljena na "#0000FF".
Poravnanje teksta. Atribut ALIGN vam omogućava da postavite metodu poravnanja teksta. Lijevo poravnanje se postavlja na sljedeći način: ALlGN="lijevo", desno poravnanje: ALIGN="desno", centralno poravnanje: ALIGN="centar".
Dakle, plava boja zaglavlja poravnatog po sredini može se postaviti na sljedeći način:
<Н1 ALIGN="center">Računar i softver
Horizontalna linija. Preporučljivo je odvojiti naslove od ostatka sadržaja stranice horizontalnim linijama koristeći jednu oznaku
.
Paragrafi. Podjela teksta na pasuse se vrši pomoću kontejnera<Р>. Kada se gledaju u pretraživaču, paragrafi su odvojeni jedan od drugog razmakom. Za svaki pasus možete postaviti određenu vrstu poravnanja i opcije oblikovanja fonta.
Početna stranica stranice. Početna stranica web stranice obično sadrži tekst koji ukratko opisuje njen sadržaj. Postavimo tekst na početnu stranicu web stranice "Računar", podijeljen na pasuse s različitim poravnanjima:
<Р ALIGN="left">Na ovoj stranici možete dobiti razne informacije o vašem računaru, njegovom softver i cijene kompjuterskih komponenti.
<Р ALIGN= "right">Terminološki rečnik će vas upoznati sa računarskim pojmovima, a moći ćete da popunite i upitnik.
Stoga će početna stranica kompjuterske stranice sadržavati centrirani veliki naslov plava, odvojeno horizontalna linija iz dva različito poravnata pasusa (slika 6.27):
<Н1 ALIGN="center">
Računar i softver
<Р ALIGN="left">Na ovoj stranici...
<Р ALIGN ="right">Terminološki rječnik
...
 |
| Rice. 6.27. Računalna web stranica s formatiranim tekstom |
Sigurnosna pitanja
1. Koje oznake (kontejneri) se koriste za unos naslova? Formatiranje fonta? Unos pasusa?
Zadaci za samostalno rješavanje
6.11. Praktični zadatak. Kreirajte kompjutersku web stranicu sa formatiranim tekstom i pogledajte je u pretraživaču.
Umetanje slika u web stranice
Slike možete postaviti na web stranice pohranjene u grafičkim datotekama u tri formata - GIF, JPEG i PNG.
Umetanje slika. Oznaka se koristi za umetanje slike sa SRC atributom, koji označava gdje je datoteka pohranjena lokalni računar ili na internetu. Ako se grafička datoteka nalazi na lokalnom računalu u istoj mapi kao i datoteka web stranice, dovoljno je navesti samo ime datoteke kao vrijednost SRC atributa. na primjer:
Ako se datoteka nalazi u drugom folderu na ovom lokalnom računaru, tada vrijednost atributa mora biti puno ime datoteke, uključujući putanju do nje u hijerarhijskom sistemu datoteka. na primjer:
Ako se datoteka nalazi na udaljenom serveru na Internetu, tada se mora navesti Internet adresa ove datoteke. na primjer:
Položaj slike u odnosu na tekst. Atribut ALIGN vam omogućava da pozicionirate sliku u odnosu na tekst na različite načine, koji mogu imati pet različitih vrijednosti: TOP (gore), MIDDLE (sredina), BOTTOM (dolje), LEFT (lijevo) i DESNO (desno).
Logično je postaviti sliku računara na početnu stranicu kompjuterske stranice. Da bi slika bila postavljena na desnu ivicu teksta, oznaka za umetanje slike treba da ima sledeći oblik (slika 6.28):
 |
| Rice. 6.28. Umetanje slike u kompjutersku web stranicu |
Umetnite alternativni tekst. Korisnici ponekad, kako bi uštedjeli vrijeme, onemoguće učitavanje grafičkih slika u pretraživač i samo čitaju tekstove. Kako bi se osiguralo da se značenje stranice ne izgubi, umjesto slike treba prikazati alternativni tekst.
Alternativni tekst se prikazuje pomoću atributa ALT, čija je vrijednost tekst koji objašnjava šta bi korisnik trebao vidjeti na slici:
Sigurnosna pitanja
1. Koja oznaka i njeni atributi se koriste za umetanje slika u web stranice?
Zadaci za samostalno rješavanje
6.12. Praktični zadatak. Umetnite sliku u web stranicu računara i pogledajte je u pretraživaču.
Hiperveze na web stranicama
Ako se web stranica učitana u pretraživač nalazi na lokalnom računaru u istoj fascikli, tada umjesto adrese jednostavno navedite naziv datoteke, na primjer:
Ako se web stranica učitana u pretraživač nalazi na Internetu, tada je Internet adresa naznačena kao adresa, na primjer:
<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Indeks linkova
Vidimo pokazivač veze kada gledamo web stranicu u pretraživaču. Indikator veze može biti tekst, obično plavi i podvučen, ili slika sa ivicom. Kada na njega pokažete mišem, njegov kursor se pretvara u ikonu "ruke". Klikom na pokazivač vodite na web stranicu navedenu u hipervezi.
- da pogledate sliku u pretraživaču:
<А HREF="picture.jpg">Slika - da pokrenete plejer ugrađen u pretraživač i reprodukujete zvučni fajl:
<А HREF="sound.wav">Zvuk - da sačuvate datoteku na vašem lokalnom računaru pomoću ugrađenog menadžera za preuzimanje datoteka u pretraživaču:
<А HREF="Apxив.ziр">Preuzmite datoteku
Panel za navigaciju sajta. Kreirajmo folder "Računar" i dodajmo prazne stranice "Programi", "Rječnik", "Pribor" i "Upitnik" na stranicu. Sačuvajmo ih u fajlovima pod nazivom software.htm, glossary.htm, hardware.htm i anketa.htm u folderu sajta. Ove "prazne" stranice bi trebale imati naslove, ali možda još nemaju sadržaj:
<ТITLЕ>Naslov stranice
Na početnoj stranici sajta postavićemo hiperveze do svake stranice sajta. Najpogodnije je odabrati nazive stranica na koje se vrši prijelaz kao indekse hiperveza.
Indikatore hiperveze postavite na dno stranice u novom pasusu u jednom redu, odvojeno razmacima ( ). Ovaj raspored hiperveza se često naziva navigaciona traka.
Ubacimo HTML kod u početnu stranicu web-mjesta koja kreira navigacijsku traku:
<Р ALIGN="center">
[<А HREF="software . htm">Programi]
[Rječnik]
[Dodatna oprema]
[upitnik]
Hiperlink na email adresu. Korisno je kreirati link na početnoj stranici stranice na adresu e-pošte preko koje posjetitelji mogu kontaktirati administraciju stranice. Da biste to učinili, trebate dodijeliti adresu e-pošte atributu HREF veze i umetnuti je u kontejner
, koji specificira stil pasusa koji se koristi za označavanje adrese:<А HREF="mailto:[email protected]">E-mail:
[email protected]
Sada, kada kliknete na vezu adrese e-pošte, otvorit će se Outlook Express (ili vaš zadani program za e-poštu) gdje se nalazi u redu Kome adresa navedena u linku će biti naznačena.
Dakle, kreirana početna stranica za kompjutersku web lokaciju sadrži naslov, sliku računara, dva pasusa teksta, navigacijsku traku i link do adrese e-pošte (slika 6.29).
 |
| Rice. 6.29. Spremna početna stranica za web stranicu "Računar". |
Sigurnosna pitanja
1. Koja oznaka i njeni atributi se koriste za kreiranje hiperveza?
Zadaci za samostalno rješavanje
6.13. Praktični zadatak. Kreirajte "kompjutersku" web stranicu koja sadrži panel hiperveza na druge stranice na web lokaciji i pogledajte je u pretraživaču.
Liste na web stranicama
Često je prilikom postavljanja teksta na web stranice zgodno koristiti liste u različitim opcijama:
- numerisane liste, gde su stavke liste identifikovane brojevima;
- liste za nabrajanje, kada se elementi liste identifikuju pomoću posebnih znakova (nabrajanja);
- liste definicija, što vam omogućava da sastavite liste definicija u obliku takozvanog rječnika.
Također je moguće kreirati ugniježđene liste, a ugniježđena lista može se razlikovati po tipu od glavne.
Numerisane liste. Numerisana lista se nalazi unutar kontejnera
- možete podesiti vrstu numeracije: arapski brojevi (podrazumevano), "I" (rimski brojevi), "a" (mala slova) i ostalo:
- i definicije koje slijede pojedinačne oznake
- .
Web stranicu “Rječnik” predstavit ćemo u obliku rječnika kompjuterskih pojmova (slika 6.31):
- Centralni uređaj računara koji obrađuje informacije u binarnom kodu.
RAM
- Uređaj koji pohranjuje programe i podatke.
- Uređaj koji pohranjuje programe i podatke.
CPU
Sigurnosna pitanja
1. Koje oznake se koriste za kreiranje numerisanih lista? Liste sa nabrajanjem?
Zadaci za samostalno rješavanje
6.14. Praktični zadatak. Kreirajte Web stranicu Programs sa numeriranom listom i ugniježđenom listom s nabrajanjem.
6.15. Praktični zadatak. Napravite web stranicu rječnika sa listom pojmova.
Prije nego što započnemo naše putovanje kroz lekcije o HTML i CSS izgradnji web stranica, važno je razumjeti razlike između dva jezika, sintaksu svakog jezika i neku osnovnu terminologiju.
Šta su HTML i CSS?
HTML (HyperText Markup Language) definiše strukturu sadržaja i njegovo značenje, definišući sadržaj kao što su naslovi, paragrafi ili slike. CSS (Cascading Style Sheets) je jezik prezentacije kreiran za stiliziranje izgleda sadržaja, koristeći, na primjer, fontove ili boje.
Ova dva jezika - HTML i CSS - su nezavisni jedan od drugog i tako bi trebali i ostati. CSS ne treba pisati unutar HTML dokumenta i obrnuto. Kao opšte pravilo, HTML će uvek predstavljati sadržaj, a CSS će uvek definisati stil.
Sa ovim razumijevanjem razlike između HTML-a i CSS-a, zaronimo u HTML detaljnije.
Osnovni HTML uslovi
Prije nego počnete raditi sa HTML-om, vjerovatno ćete naići na neke nove i često čudne pojmove. S vremenom ćete se upoznati sa svima njima, ali za sada biste trebali početi s tri osnovna HTML termina – elementi, oznake i atributi.
Elementi
Elementi određuju kako definirati strukturu i sadržaj objekata na stranici. Neki od najčešće korištenih elemenata uključuju više nivoa naslova (definiranih kao elementi sa
to
) i paragrafi (definisani kao
); Možete uključiti elemente u listu ,
, , I i mnogi drugi.Elementi se identifikuju pomoću ugaonih zagrada<>, koji okružuje ime elementa. Dakle, element će izgledati ovako:
Oznake
Dodavanje ugaonih zagrada< и >kreira ono što je poznato kao oznaka oko elementa. Oznake se najčešće javljaju u parovima otvarajućih i završnih oznaka.
Početna oznaka označava početak elementa. Sastoji se od simbola<, затем идёт имя элемента и завершается символом >; na primjer,
..Završna oznaka označava kraj elementa. Sastoji se od simbola< с последующей косой чертой и именем элемента и завершается символом >; na primjer,
Sadržaj koji se pojavljuje između oznake otvaranja i zatvaranja je sadržaj tog elementa. Veza će, na primjer, imati oznaku za otvaranje i završnu oznaku. Ono što se nalazi između ove dvije oznake bit će sadržaj veze.
Dakle, oznake linkova će izgledati otprilike ovako:
Atributi
Atributi su svojstva koja se koriste za pružanje dodatnih informacija o elementu. Najčešći atributi uključuju id atribut, koji identificira element; atribut klase, koji klasifikuje element; src atribut, koji specificira izvor ugrađenog sadržaja; i href atribut, koji specificira vezu do pridruženog resursa.
Atributi se definiraju u početnoj oznaci nakon naziva elementa. Općenito, atributi uključuju ime i vrijednost. Format za ove atribute sastoji se od imena atributa praćenog znakom jednakosti, a zatim vrijednosti atributa u navodnicima. Na primjer, element sa href atributom će izgledati ovako:
Shay Howe
Demonstracija osnovnih HTML pojmova
Ovaj kod će prikazati tekst "Shay Howe" na web stranici i kada se klikne na ovaj tekst odvest će korisnika na http://shayhowe.com. Element veze se deklarira pomoću otvarajuće oznake i završnu oznaku koji pokrivaju tekst, kao i atribut i vrijednost adrese veze deklarirane preko href="http://shayhowe.com" u početnoj oznaci.
Rice. 1.01. HTML sintaksa u formi okvira uključuje element, atribut i oznaku
Sada kada znate šta su HTML elementi, oznake i atributi, pogledajmo našu prvu web stranicu. Ako nešto izgleda novo ovdje, ne brinite - razbićemo to kako budemo krenuli.
Prilagođavanje strukture HTML dokumenta
HTML dokumenti su jednostavni tekstualni dokumenti sačuvani sa ekstenzijom .html, a ne .txt. Da biste započeli pisanje HTML-a, prvo vam je potreban uređivač teksta koji vam je ugodno. Nažalost, ovo ne uključuje Microsoft Word ili Pages, jer su to složeni uređivači. Dva najpopularnija uređivača teksta za pisanje HTML-a i CSS-a su Dreamweaver i Sublime Text. Besplatne alternative uključuju i Notepad++ za Windows i TextWrangler za Mac.
Svi HTML dokumenti sadrže potrebnu strukturu, koja uključuje sljedeće deklaracije i elemente: , ,
I .Deklaracija o vrsti dokumenta ilinalazi se na samom početku HTML dokumenta i govori pretraživačima koja verzija HTML-a se koristi. Pošto ćemo koristiti najnoviju verziju HTML-a, naš tip dokumenta će biti jednostavan. Nakon ovoga dolazi element označava početak dokumenta.
Unutra element
definira vrh dokumenta, uključujući različite metapodatke (prateće informacije o stranici). Sadržaj unutar elementa se ne pojavljuje na samoj web stranici. Umjesto toga, može uključivati naslov dokumenta (koji se pojavljuje u naslovnoj traci prozora pretraživača), veze do bilo kojih vanjskih datoteka ili bilo koje druge korisne metapodatke.Sav vidljivi sadržaj web stranice bit će sadržan u elementu
. Struktura tipičnog HTML dokumenta izgleda ovako:Hello World! Hello World!
Ovo je web stranica.
Demonstracija strukture HTML dokumenta
Ovaj kod prikazuje dokument, počevši od deklaracije tipa dokumenta,, tada odmah dolazi element . Unutra elementi dolaze
I . Element sadrži kodiranje stranice preko oznake i naslov dokumenta kroz element. Element <body>uključuje naslov kroz element <h1>i pasus teksta do kraja<р>. Zato što su i naslov i pasus ugniježđeni unutar elementa <body>, vidljivi su na web stranici.</p><p>Kada se element nalazi unutar drugog elementa, poznatog i kao ugniježđeni, dobra je ideja uvući ga kako bi struktura dokumenta bila dobro organizirana i čitljiva. U prethodnom kodu oba elementa <head>I <body>ugniježđen i pomaknut unutar elementa <html>. Struktura uvlačenja za elemente nastavlja se sa novim elementima koji su dodani unutra <head>I <body> .</p><h3>Samozatvarajući elementi</h3><p>U prethodnom primjeru, element <meta>je bila jedina oznaka koja nije uključivala završnu oznaku. Ne brinite, ovo je urađeno namjerno. Ne sastoje se svi elementi od oznaka za otvaranje i zatvaranje. Neki elementi jednostavno primaju sadržaj ili ponašanje putem atributa unutar jedne oznake. <meta>je jedan od ovih elemenata. Element Content <meta>u primjeru je dodijeljen korištenjem atributa charset i vrijednosti. Ostali tipični elementi za samozatvaranje uključuju:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Smanjena struktura napravljena pomoću deklaracije tipa dokumenta<!DOCTYPE html>i elementi <html> , <head>I <body>, prilično je uobičajeno. Želimo da ova struktura dokumenta bude zgodna jer ćemo je često koristiti prilikom kreiranja novih HTML dokumenata.</p><h3>Validacija koda</h3><p>Bez obzira koliko pažljivo pišemo naš kod, greške su neizbježne. Srećom, kada pišemo HTML i CSS, imamo validatore za provjeru našeg rada. W3C nudi HTML i CSS validatore koji skeniraju kod za greške. Pregledanje našeg koda ne samo da pomaže da se pravilno prikazuje u svim pretraživačima, već i pomaže u podučavanju najboljih praksi prilikom pisanja koda.</p><h2>U praksi</h2><p>Kao web dizajneri i front-end programeri, imamo luksuz da prisustvujemo brojnim sjajnim konferencijama posvećenim našem zanatu. Organizovaćemo sopstvenu Konferenciju o stilovima i napraviti web stranicu za nju tokom narednih lekcija. Ovako!</p><br><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Hajdemo malo dalje od HTML-a i bacimo pogled na CSS. Zapamtite, HTML definira sadržaj i strukturu naših web stranica, dok CSS definira njihov vizualni stil i izgled.</p><h2>Osnovni CSS uslovi</h2><p>Pored HTML termina, postoje neki osnovni CSS termini sa kojima ćete morati da se upoznate. Ovi pojmovi uključuju selektore, svojstva i vrijednosti. Baš kao i sa HTML terminologijom, što više radite sa CSS-om, ovi termini postaju druga priroda.</p><h3>Selektori</h3><p>Kada dodate elemente na web stranicu, oni se mogu stilizirati pomoću CSS-a. Selektor određuje koji element ili elemente u HTML-u treba ciljati i primijeniti stilove (kao što su boja, veličina i pozicija). Selektori mogu uključiti kombinaciju različitih metrika za odabir jedinstvenih elemenata, ovisno o tome koliko želimo biti specifični. Na primjer, želimo odabrati svaki pasus na stranici ili odabrati samo jedan određeni pasus.</p><p>Selektori su obično pridruženi vrijednosti atributa, kao što je id ili vrijednost klase, ili naziv elementa, kao što je <h1>ili<р> .</p><p>U CSS-u selektori se kombinuju sa vitičastim zagradama (), koje obuhvataju stilove koji se primenjuju na izabrani element. Ovaj selektor cilja na sve elemente <span><p>P(...)</p><h3>Svojstva</h3><p>Jednom kada je element odabran, svojstvo određuje stilove koji će biti primijenjeni na njega. Imena svojstava dolaze nakon selektora, unutar vitičastih zagrada () i neposredno prije dvotočka. Postoje mnoga svojstva koja možemo koristiti, kao što su pozadina, boja, veličina fonta, visina i širina i druga svojstva koja se obično dodaju. U sljedećem kodu definiramo svojstva boje i veličine fonta koja se primjenjuju na sve elemente <span><p>P ( boja: ...; veličina fonta: ...; )</p><h3>Vrijednosti</h3><p>Do sada smo samo odabrali element kroz selektor i odredili koji stil želimo primijeniti na njega kroz svojstva. Sada možemo postaviti ponašanje ovog svojstva preko vrijednosti. Vrijednosti se mogu navesti kao tekst između dvotočke i točke i zareza. U nastavku biramo sve elemente <p >I postavite vrijednost svojstva boje na narandžastu i vrijednost svojstva veličine fonta na 16 piksela.</p><p>P ( boja: narandžasta; veličina fonta: 16px; )</p><p>Da bismo ovo testirali, u CSS-u naš skup pravila počinje selektorom, nakon čega odmah slijede vitičaste zagrade. Ove vitičaste zagrade sadrže deklaracije koje se sastoje od parova svojstava i vrijednosti. Svaka deklaracija počinje svojstvom, nakon čega slijedi dvotočka, vrijednost svojstva i na kraju točka-zarez.</p><p>Uobičajena praksa je pomicanje parova svojstava i vrijednosti unutar vitičastih zagrada. Kao i kod HTML-a, uvlačenje pomaže da naš kod bude organiziran i jasan.</p><p><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Rice. 1.03. Struktura CSS sintakse uključuje selektor, svojstva i vrijednosti</p><p>Poznavanje nekoliko osnovnih pojmova i opšte CSS sintakse je odličan početak, ali imamo još nekoliko tačaka da pokrijemo pre nego što zaronimo u dubinu. Posebno moramo detaljnije pogledati kako selektori rade u CSS-u.</p><h2>Rad sa selektorima</h2><p>Selektori, kao što je ranije spomenuto, označavaju koji će HTML elementi biti stilizirani. Važno je u potpunosti razumjeti kako koristiti selektore i kako oni rade. Prvi korak je upoznavanje sa različitim tipovima selektora. Počećemo sa najosnovnijim selektorima: selektorima tipa, klase i identifikatora.</p><h3>Selektori tipova</h3><p>Selektori tipa ciljaju elemente prema njihovom tipu. Na primjer, ako želimo ciljati sve elemente <div>moramo koristiti div selektor. Sljedeći kod prikazuje selektor tipa za elemente <div>, kao i odgovarajući HTML.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Časovi</h3><p>Klase vam omogućavaju da odaberete element na osnovu vrijednosti atributa klase. Selektori klasa su malo specifičniji od selektora tipa jer biraju određenu grupu elemenata, a ne sve elemente istog tipa.</p><p>Klase vam omogućavaju da primenite iste stilove na različite elemente odjednom koristeći istu vrednost atributa klase za više elemenata.</p><p>U CSS-u, klase su predstavljene vodećim tačkom praćenom vrijednošću atributa klase. Selektor klase ispod bira sve elemente koji sadrže vrijednost atributa klase awesome, uključujući elemente <div>I <span><p>Sjajno(...)</p><p> <div class="awesome">...</div> </p><h3>Identifikatori</h3><p>Identifikatori su čak precizniji od klasa jer ciljaju samo na jedan jedinstveni element u isto vrijeme. Baš kao što selektori klase koriste vrijednost atributa klase, identifikatori koriste vrijednost id atributa kao selektor.</p><p>Bez obzira na tip elementa koji se prikazuje, vrijednost atributa id može se koristiti samo jednom na stranici. Ako su ID-ovi prisutni, onda ih treba rezervirati za važne elemente.</p><p>U CSS-u, identifikatori su predstavljeni heš simbolom ispred, nakon čega slijedi vrijednost atributa id. Ovdje će id odabrati samo element koji sadrži atribut id sa vrijednošću shayhowe.</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Dodatni selektori</h3><p>Selektori su izuzetno moćne stvari i gore opisani su među najčešćim selektorima na koje nailazimo. Ovi selektori su samo početak. Dostupni su mnogi napredni selektori i oni su lako dostupni. Kada vam bude udobno s njima, nemojte se bojati provjeriti neke od naprednijih.</p><p>Ok, hajde da pocnemo sastavljati sve zajedno. Dodamo elemente na stranicu unutar našeg HTML-a, zatim možemo odabrati te elemente i stilizirati ih koristeći CSS. Sada povežimo tačke između HTML-a i CSS-a kako bi dva jezika radila zajedno.</p><h2>Povezivanje CSS-a</h2><p>Da bi naš CSS razgovarao sa našim HTML-om, moramo pokazati na CSS datoteku iz HTML-a. Dobra praksa je uključiti sve naše stilove u jednu eksternu datoteku, na koju se ukazuje unutar elementa <head>naš HTML dokument. Korišćenje jednog eksternog CSS-a nam omogućava da primenimo iste stilove na celoj veb lokaciji i da brzo izvršimo promene na njoj.</p><h3>Ostale opcije za dodavanje CSS-a</h3><p>Ostale opcije za ugradnju CSS-a uključuju korištenje internih i inline stilova. Možda ćete naići na ove opcije u stvarnosti, ali na njih se uglavnom ne gledaju jer one čine ažuriranje stranica nezgrapnim i nezgrapnim.</p><p>Da bismo kreirali naš eksterni stilski list, ponovo želimo da koristimo naš uređivač teksta po izboru za kreiranje nove tekstualne datoteke sa ekstenzijom .css. Naš CSS fajl treba da bude sačuvan u istoj fascikli ili podfolderu kao i naš HTML fajl.</p><p>Unutar elementa <head>primijenjen element <link>, koji definira odnos između HTML i CSS datoteka. Pošto se povezujemo sa CSS-om, koristimo atribut rel sa vrednošću tabele stilova da označimo njihov odnos. Dodatno, href atribut se koristi za označavanje lokacije ili putanje CSS datoteke.</p><p>U sljedećem primjeru HTML dokumenta, element <head>ukazuje na eksterni stilski fajl.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Da bi se CSS ispravno prikazao, vrijednost putanje atributa href mora se direktno podudarati gdje je pohranjena CSS datoteka. U prethodnom primjeru, datoteka main.css je pohranjena na istoj lokaciji kao i HTML datoteka, također poznata kao root folder.</p><p>Ako se CSS datoteka nalazi u podmapi, tada vrijednost atributa href mora odgovarati toj putanji. Na primjer, ako je naš main.css fajl sačuvan u podfolderu pod nazivom stylesheets, tada bi vrijednost atributa href bila stylesheets/main.css. Ovo koristi kosu crtu (ili kosu crtu) za označavanje prelaska u podmapu.</p><p>Trenutno naše stranice polako ali sigurno počinju da oživljavaju. Još uvijek nismo previše ušli u CSS, ali možda ste primijetili da neki elementi imaju stilove koje nismo deklarirali u našem CSS-u. Pregledač je taj koji nameće svoje preferirane stilove ovim elementima. Srećom, ove stilove možemo vrlo lako prepisati, što ćemo sljedeće učiniti koristeći CSS resetovanje.</p><h2>Koristeći CSS reset</h2><p>Svaki pretraživač ima svoje podrazumevane stilove za različite elemente. Način na koji Google Chrome prikazuje naslove, pasuse, liste i tako dalje može se razlikovati od načina na koji to radi Internet Explorer. Kako bi se osigurala kompatibilnost među pretraživačima, CSS reset je postao široko korišten.</p><p>Resetovanje CSS-a uzima sve osnovne HTML elemente sa datim stilom i obezbeđuje konzistentan stil u svim pretraživačima. Ova poništavanja obično uključuju uklanjanje dimenzija, dopuna, margina ili dodatnih stilova koji smanjuju ove vrijednosti. Pošto CSS kaskadno radi od vrha do dna (o tome ćete uskoro saznati) - naše resetovanje bi trebalo da bude na samom vrhu našeg stila. Ovo osigurava da se ovi stilovi prvo čitaju i da svi različiti pretraživači rade sa zajedničke referentne tačke.</p><p>Postoji gomila različitih CSS resetova dostupnih za korištenje, od kojih svi imaju svoje prednosti. Jedan od najpopularnijih od Erica Meyera, njegov CSS reset je prilagođen da uključuje nove HTML5 elemente.</p><p>Ako se osjećate pomalo avanturistički, tu je i Normalize.css koji je kreirao Nicholas Gallagher. Normalize.css se ne fokusira na korištenje hard resetiranja za sve osnovne elemente, već umjesto toga na postavljanje zajedničkih stilova za te elemente. Ovo zahteva dublje razumevanje CSS-a, kao i znanje o tome šta želite da postignete od stilova.</p><h3>Kompatibilnost i testiranje među pretraživačima</h3><p>Kao što je ranije spomenuto, različiti pretraživači različito prikazuju elemente. Važno je prepoznati važnost kompatibilnosti i testiranja među pretraživačima. Sajtovi ne bi trebalo da izgledaju potpuno isto u svim pretraživačima, ali bi trebalo da budu blizu. Koje pretraživače želite podržati i u kojoj mjeri, to je odluka koju ćete morati donijeti na osnovu onoga što je najbolje za vašu web lokaciju.</p><p>Postoji nekoliko stvari na koje treba obratiti pažnju kada pišete CSS. Dobra vijest je da možete sve i da je potrebno samo malo strpljenja da biste to savladali.</p><h2>U praksi</h2><p>Vratimo se tamo gdje smo zadnji put stali na našoj stranici konferencije i vidimo kako možemo dodati malo CSS-a.</p><ol><li>Unutar našeg foldera styles-conference, napravimo novi folder pod nazivom sredstva. Ovo je mjesto gdje ćemo pohraniti sve resurse za našu web stranicu, kao što su stilovi, slike, video zapisi, itd. Za naše stilove, idemo naprijed i dodajmo još jednu fasciklu sa stilovima unutar fascikle imovine.</li><li>Koristeći uređivač teksta, napravimo novu datoteku pod nazivom main.css i spremimo je u folder sa stilovima koji smo upravo kreirali.</li><p>Gledajući datoteku index.html u pretraživaču možemo vidjeti da elementi <h1>I <p>Već sadrže zadani stil. Konkretno, imaju jedinstvenu veličinu fonta i prostor oko sebe. Koristeći resetovanje Erica Meyera, možemo ublažiti ove stilove, omogućavajući svakom od njih da počne od iste baze. Da biste to učinili, pogledajte njegovu web stranicu, kopirajte kod i zalijepite ga na vrh naše main.css datoteke.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licenca: nijedna (javna domena) */ html, tijelo, div, span, applet, objekat, iframe, h1, h2, h3, h4, h5, h6, p, blok citat, pre, a, abbr, akronim, adresa, veliki, citirati, kod, del, dfn, em, img, ins, kbd, q, s, samp, mali, štrajk, jak, sub, sup, tt, var, b, u, i, centar, dl, dt, dd, ol, ul, li, fieldset, forma, oznaka, legenda, tabela, natpis, tbody, tfoot, thead, tr, th, td, članak, na stranu, platno, detalji, embed, figura, figcaption, podnožje, zaglavlje, hgroup, meni, navigacija, izlaz, rubin, odjeljak, sažetak, vrijeme, oznaka, audio, video ( margina: 0; padding: 0; granica: 0; veličina fonta: 100%; font: naslijediti; vertikalno poravnanje: osnovna linija ) /* Resetovanje uloge prikaza HTML5 za starije pretraživače */ članak, na stranu, detalji, figcaption, slika, podnožje, zaglavlje, hgroup, meni, navigacija, sekcija (prikaz: blok; ) telo (visina reda: 1; ) ol, ul ( stil liste: nijedan; ) blok citat, q ( navodniki: nijedan; ) blok citat: prije, blockquote: poslije, q: prije, q: poslije ( sadržaj: ""; sadržaj: nijedan; ) tablica ( granica- kolaps: kolaps;</p><li>razmak između granica: 0; ) <link>Naš main.css fajl počinje da dobija oblik, pa hajde da ga povežemo sa datotekom index.html. Otvorite index.html u uređivaču teksta i dodajte element <head>V <title> .</li><li>, odmah nakon elementa <link>Pošto ukazujemo na stilove kroz element</li><p>dodajte atribut rel s vrijednošću stylesheet-a.</p><p> <head> <meta charset="utf-8"> <title>Također ćemo uključiti vezu na naš main.css fajl koristeći href atribut. Zapamtite, naš main.css fajl je sačuvan u fascikli sa stilovima, koja se nalazi unutar fascikle imovine. Dakle, vrijednost atributa href, koji je putanja do naše main.css datoteke, treba biti assets/stylesheets/main.css. Styles Conference
Vrijeme je da provjerimo naš rad i vidimo kako naši HTML i CSS funkcionišu zajedno. Otvaranje datoteke index.html (ili osvježavanje stranice ako je već otvorena) u pretraživaču bi trebalo pokazati nešto drugačiji rezultat nego prije.
Rice. 1.04. Naša Styles Conference stranica sa CSS resetiranjem
Demo i izvorni kod
Ispod možete pogledati web stranicu Styles Conference u njenom trenutnom stanju, kao i preuzeti trenutni izvorni kod stranice.
Nastavi
Dakle, sve je u redu! Napravili smo neke velike korake u ovom tutorijalu.
Razmislite, sada znate osnove HTML-a i CSS-a. Kako nastavljamo dalje i provodite više vremena u pisanju HTML-a i CSS-a, biće vam mnogo ugodnije raditi sa ova dva jezika.
- Da rezimiramo, pokrili smo sljedeće:
- Razlika između HTML-a i CSS-a.
- Postavljanje strukture vaše prve web stranice.
- Uvod u CSS selektore, svojstva i vrijednosti.
- Rad sa CSS selektorima.
- Pokazivač na CSS iz HTML-a.
- Važnost CSS resetovanja.
Sada pogledajmo bliže HTML i upoznajmo se malo sa semantikom.
Resursi i linkovi
- Uobičajeni HTML termini preko Scripting Master-a
- CSS uslovi i definicije putem Impressive Webs
- CSS alati: Resetujte CSS preko Erica Meyera
Za implementaciju funkcionalnosti različitih tipova, web programeri "pišu" stranice koristeći odgovarajuće web jezici za označavanje, kako bi se maksimizirale interaktivne mogućnosti web resursa. Nećemo ulaziti duboko u džunglu web terminologije, već ćemo vam samo pomoći da shvatite glavne točke pisanja koda web stranice koje se mogu pojaviti tokom rasprave o projektu i tokom njegove dalje implementacije.
HTML
HTML je jedan od najstarijih web programskih jezika, koji se pojavio u zoru razvoja interneta, a etablirao se kao jedna od najjednostavnijih i najpouzdanijih metoda web programiranja. HTML je skraćenica od Hyper Text Markup Language. Web stranice kreirane korištenjem HTML tehnologije su uglavnom skup statičnih stranica koje ne zahtijevaju bazu podataka.
HTML tehnologija može biti prikladna za kreiranje malih, laganih web stranica s nekoliko stranica, čija funkcionalnost ne zahtijeva interaktivnost i dinamiku.
Kao i svaka tehnologija, HTML standard ne miruje, a danas u okruženje web dizajna ulazi novi standard pod nazivom HTML5. Ova tehnologija je vrlo mlada, ali pruža velike mogućnosti u smislu kreiranja web stranica i omogućava implementaciju novih, ranije nemogućih funkcionalnosti. Iako HTML5 tehnologija još nije u potpunosti ušla u područje web razvoja, a ne podržavaju je svi internet pretraživači, programeri web studija uzimaju u obzir uticaj HTML5 na dalji razvoj internet tehnologija u budućnosti, te kreiraju sajtove koristeći najviše napredne web tehnologije -programiranje.
PHP
PHP je programski jezik na strani servera i komunicira sajt sa serverom i njegovom bazom podataka. PHP jezik sam po sebi nije odgovoran za kreiranje web stranice, a ako pogledate kod stranice takvog resursa, vidjet ćemo isti HTML, samo prošaran PHP kodom.
Na PHP stranicama, dio koda napisanog u HTML-u odgovoran je za izgled i prikaz informacija, a PHP je zauzvrat odgovoran za dinamiku i interaktivnost funkcionalnosti. Zbog svoje jednostavnosti, fleksibilnosti i brzine rada, PHP jezik je jedan od najpopularnijih standarda u web razvoju.
U izradi pretežnog dela sajtova koje je kreirao sajt studio korišćena je PHP tehnologija, jer Povezivanje sajta sa bazom podataka pomoću PHP koda je bitan uslov za kreiranje dinamičkih, multifunkcionalnih Internet resursa.
FLASH
Zapravo, sama tehnologija flush nije web programski jezik, ali se koristi za vizualizaciju elemenata napisanih u XML-u.
Izrada web stranice pomoću flash tehnologije je složen i dugotrajan proces, ali rezultat je vrijedan truda i novca utrošenog na njega. Flash elementi vam omogućavaju da svoju web stranicu učinite svijetlom i interaktivnom. Živahne, dinamične stranice ostavit će trajni utisak vašeg resursa na posjetitelje, a pozitivna slika vaše stranice ostat će dugo u svijesti očaranih korisnika. Imidž kompanije će imati koristi samo od korištenja flash tehnologije na svom resursu, jer elementi napravljeni na flashu nisu jeftini i smatraju se luksuzom.
Ali u svemu, kako kažu, morate znati kada stati, a stvaranje flash stranica nije izuzetak. Flash blokovi su mnogo teži od standardnih web elemenata i stoga im je potrebno duže za učitavanje. A korisnici mreže, po pravilu, ne vole čekati. Stoga povjerite izradu vaše flash web stranice profesionalcima koji će je optimizirati za maksimalnu produktivnost.
WAP
WAP (Protokol bežične aplikacije) je tehnologija koja vam omogućava da pristupite Internet resursima direktno sa mobilnog uređaja.
Glavna razlika između WAP stranice i običnog internetskog resursa je u tome što je WAP stranica „skrojena“ za gledanje na malim ekranima telefona i komunikatora, te stoga razvoj WAP stranice podliježe brojnim zahtjevima i standardima koji imaju za cilj smanjenje težine WAP portala stranice i optimizacija sadržaja stranice posebno za gledanje u WAP pretraživaču telefona.
Sajtovi napisani za WAP imaju svoj jezik za označavanje, prilagođen posebno za razmenu informacija sa WAP pretraživačem. A ako su obične stranice namijenjene za gledanje s računara uglavnom napisane na jezicima html, php, Perl, ili xml, tada se WML standard koristi za kreiranje WAP stranica ( Bežični jezik za označavanje). Između ostalog, pri razvoju WAP resursa koristimo vlastiti format slike - WBMP, koji WAP stranicu čini što lakšom.
Zbog stalnog rasta tržišta mobilnih uređaja, razvijaju se i standardi prijenosa podataka između World Wide Weba i mobilnih uređaja, tako da stručnjaci web-studio stranice ne prestaju pratiti inovacije u ovoj industriji kreiranja web stranica i razvoja. WAP web stranica uvijek koriste najnaprednije metode i napredne tehnologije.
A.S.P.
A.S.P. (Aktivne serverske stranice) je otvoreno okruženje za razvoj web aplikacija koje vam omogućava da kombinujete HTML, skripte i komponente ActiveX servera za kreiranje dinamičnih i moćnih web rešenja za poslovanje. ASP stranice su stranice koje sadrže skripte koje se izvršavaju na strani servera.
Perl
Perl (Praktično izdvajanje i jezik izvještaja) je univerzalni, interpretirani web programski jezik koji se koristi za pisanje cgi skripti i cgi programa koji se izvršavaju na strani servera i koji omogućava automatizaciju rada stranice. Perl je jedno od najpogodnijih i najrasprostranjenijih okruženja za kreiranje dinamičkih web stranica, iako je nedavno zamijenjen novijim internet tehnologijama. Perl format je odličan način za interakciju sa web serverima putem CGI ( zajednički interfejs za interakciju). Trenutno jezik Perl gubi tlo pod nogama u odnosu na njegov funkcionalni analog - PHP.
C+
C, C++- široko korišteni web programski jezici koji se koriste za pisanje CGI skripti. Trenutno podržava većina servera. Skripte napisane u C+ moraju se kompajlirati na strani servera.
SSI
SSI (Server Side Include) - tehnologija koja vam omogućava da sastavite web stranicu od nekoliko skripti ili datoteka u jednu, funkcionalnu cjelinu. SSI vam omogućava da uključite informacije sa strane servera u web stranicu koja nije dostupna putem HTML-a. U suštini, SSI je neka vrsta analoga uključenja u PHP-u. Omogućava vam da implementirate elemente zajedničke za svaku ili grupu stranica u kod web mjesta, omogućavajući vam da uređujete svaku stranicu kroz samo jednu datoteku. Podržane SSI direktive .shtml, .htm I .html i upisani su u .htaccess fajl.
Kategorije - Centralni uređaj računara koji obrađuje informacije u binarnom kodu.
< LI >Sistemski programi
< LI >Aplikacioni programi
< LI >Sistemi za programiranje
Liste sa nabrajanjem. Lista sa nabrajanjem nalazi se unutar kontejnera, a svaki element liste je identifikovan oznakom< LI >. Korištenje atributa TYPE oznake
- Možete postaviti tip markera liste: "disk", "kvadrat" ili "krug":
< LI >uređivači teksta;
< LI >grafički uređivači;
< LI >proračunske tablice;
< LI >sistemi za upravljanje bazama podataka.
Na web stranici "Programi" postavićemo numerisanu listu koja sadrži listu glavnih tipova računarskog softvera.
U drugi element glavne numerisane liste umetnite ugnežđenu listu sa oznakama (slika 6.30).
Lista definicija. Lista definicija nalazi se unutar kontejnera
- /
- . Unutar njega, tekst je formatiran u obliku pojmova koji su istaknuti pojedinačnim oznakama
