Šta je web stranica? To je dokument napisan u jeziku za označavanje hiperteksta (HTML) koji se može pregledati pomoću pretraživača. Web stranici se pristupa unosom URL-a.

Web stranica može sadržavati tekst, grafiku i hiperveze do drugih stranica i datoteka.

Kako otvoriti web stranicu

Za pregled web stranice potreban je pretraživač (npr. Internet Explorer, Edge, Safari, Firefox ili Chrome). U vašem pretraživaču možete otvoriti web stranicu tako što ćete ukucati adresna traka URL. Na primjer, upisivanjem "https://www.computerhope.com/esd.htm" otvorit će se stranica ESD Computer Hope.

Ako ne znate URL stranice koju želite posjetiti, možete je koristiti pretraživač da pronađete web stranicu ili koristite pretragu web mjesta.

Kada je napravljena prva web stranica?

Prvu web stranicu kreirao je Tim Berners-Lee u CERN-u 6. avgusta 1991. godine. Prije toga možete posjetiti i pogledati prvu stranicu i prvu web stranicu na http://info.cern.ch/.

Koja je razlika između web stranice i web stranice?

Web stranica je mjesto koje sadrži više od jedne web stranice. Na primjer, naš resurs je stranica koja uključuje hiljade različitih web stranica, uključujući i onu koju sada čitate:

U primjeru URL-a iznad, "url.htm" je web stranica, uvijek je posljednji dio URL-a. Za URL-ove koji se ne završavaju na .htm, .html, .php, .cgi, .pl ili neku drugu ekstenziju datoteke, server po defaultu učitava web stranicu index.htm. Na primjer, ne postoji web stranica za URL stranice kontakta. U ovom slučaju, zadana datoteka indeksa se učitava iz /contact direktorija.

Primjeri web stranica

Već smo spomenuli da se pretraživači koriste za pregled web stranica. Web stranica se sastoji od nekoliko elemenata, uključujući CSS, slike i JavaScript. Tijelo web stranice je kreirano sa koristeći HTML. Ovaj kod se može kreirati pomoću HTML editora, napisati ga od strane čovjeka ili generirati pomoću skripti na strani servera. Tipično, web stranica koju su kreirali ljudi završava se ekstenzijom .htm ili .html. Na primjer, ova stranica ima naziv datoteke "webpage.htm". Stranice koje generiše skripta mogu završavati sa .cgi, .php, .pl, itd.

Koje elemente sadrži web stranica?

Ispod je pregled glavnih elemenata kako bi web dizajneri mogli razumjeti koja je logička struktura web stranice:

Naslov stranice, logo ili naziv kompanije se gotovo uvijek nalazi u gornjem lijevom kutu svake web stranice. Također je dobra ideja koristiti slogan ili Kratki opis stranice kako bi novim posjetiteljima dali ideju o web lokaciji. Ovaj element web stranice je obično veza koja vodi do početne stranice;

Traka za pretraživanje omogućava posjetiteljima da brzo pronađu web stranicu. Trebao bi biti prisutan na svakoj stranici;

Traka za navigaciju ili meni se obično nalazi na vrhu ili lijevoj strani svake web stranice. Trebalo bi da sadrži veze ka svakom od glavnih sekcija stranice;

Baner reklame se mogu pojaviti na različitim mjestima na web stranici. Obično se prikazuju na vrhu, lijevo, desno ili dnu web stranice ili su uključeni u glavni sadržaj;

Dugmad društvenih mreža omogućavaju posjetiteljima da dijele vezu do web stranice na stranicama društvenih mreža;

Na kreiranim web stranicama, krušne mrvice pomažu posjetitelju da shvati gdje se nalazi, kao i da pređe na druge dijelove stranice;

Naslov bi trebao biti na vrhu svake web stranice. Kreira se pomoću HTML oznake.

Početni pasus je jedan od najvažnijih elemenata web stranice. Posjetioca bi trebalo zainteresirati da pročita sadržaj web stranice. Jedan od načina da privučete pažnju posetilaca je da umetnete sliku pored uvodnog pasusa;

Svaku web stranicu treba podijeliti na naslove nižeg nivoa koji omogućavaju posjetitelju da lako skenira sadržaj i pronađe ono što mu je najzanimljivije na stranici. Prilikom kreiranja web stranice, to se može učiniti pomoću HTML oznaka...;

Dobra je ideja da posjetiteljima pružite vezu ili dugme koje preusmjerava na obrazac. povratne informacije kako bi vam mogli reći da li im je to bilo korisno ovu web stranicu ili ne;

Dodatne informacije i alati, kao što je dugme za štampanje stranice, takođe mogu biti korisne korisnicima;

Podnožje treba uključivati Dodatne informacije, što je važno za kompaniju ili lokaciju. Kao i linkovi na druge web stranice;

Autorska prava i bilo koje pravno ili povjerljivo obavještenje također moraju biti objavljene na svim web stranicama. U osnovama dizajna web stranica, ovaj element ne samo da može povezati s relevantnim pravnim informacijama. Takođe ukazuje da su posetioci stigli do kraja web stranice;

Dugme Vrh stranice može pomoći posjetiteljima da se brzo vrate na vrh web stranice kako bi pristupili vezama menija.

Šta korisnici mogu raditi na web stranici?

Većina web stranica ima zanimljive hiperveze na koje kliknete da biste pronašli više informacija. Takođe možete slušati muziku, gledati video zapise, kupovati, razgovarati i još mnogo toga.

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) ili kaskadni stilski listovi su jezik prezentacije kreiran za dizajniranje izgled sadržaj 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 od do) i pasusa (definiranih kao

); Možete uključiti elemente u listu ... i mnogi drugi.

Elementi se identificiraju uglastim zagradama koje okružuju naziv 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, nakon čega slijedi vrijednost 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 tag

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, to ne uključuje Microsoft Word ili Pages, pošto 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 tipa dokumenta ili se nalazi 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 jednostavno . Nakon toga dolazi element koji označava početak dokumenta.

Unutar elementa definira gornji dio dokument, uključujući različite metapodatke (popratne informacije o stranici). Sadržaj unutar elementa se ne prikazuje 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:

Zdravo svijete! Zdravo svijete!

Ovo je web stranica.

Demonstracija strukture HTML dokumenta

Ovaj kod prikazuje dokument, počevši od deklaracije tipa dokumenta, , a zatim odmah nakon njega . Unutra se nalaze elementi i . Element sadrži kodiranje stranice kroz oznaku i naslov dokumenta kroz element. Element uključuje naslov kroz element i pasus teksta kroz . Budući da su i naslov i pasus ugniježđeni unutar elementa, vidljivi su na web stranici.

Kada je element 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 su ugniježđena i pomaknuta unutar . Struktura uvlačenja za elemente nastavlja se s novim elementima koji su dodani unutar i .

Samozatvarajući elementi

U prethodnom primjeru, element je bio jedini tag koji nije uključivao 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. je jedan od ovih elemenata. Sadržaj elementa u primjeru je dodijeljen pomoću atributa charset i vrijednosti. Ostali tipični elementi za samozatvaranje uključuju:

• 
  

Sljedeća struktura, napravljena korištenjem deklaracije tipa dokumenta i elemenata , i , prilično je uobičajena. Želimo da ova struktura dokumenta bude zgodna jer ćemo je često koristiti prilikom kreiranja novih HTML dokumenata.

Validacija koda

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.

Na praksi

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. Volim ovo!

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.

Osnovni CSS uslovi

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.

Selektori

Kada dodajete elemente na web stranicu, oni se mogu stilizirati koristeći CSS. 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.

Selektori su obično povezani s vrijednošću atributa, kao što je id ili vrijednost klase, ili imenom elementa, kao što je ili .

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

P(...)

Svojstva

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

P ( boja: ...; veličina fonta: ...; )

Vrijednosti

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

I postavite vrijednost svojstva boje na narandžastu i vrijednost svojstva veličine fonta na 16 piksela.

P ( boja: narandžasta; veličina fonta: 16px; )

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.

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.

Rice. 1.03. Struktura CSS sintakse uključuje selektor, svojstva i vrijednosti

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.

Rad sa selektorima

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 bi trebao biti upoznavanje razne vrste selektori. Počećemo sa najosnovnijim selektorima: selektorima tipa, klase i identifikatora.

Selektori tipova

Selektori tipa ciljaju elemente prema njihovom tipu. Na primjer, ako želimo ciljati sve elemente, trebali bismo koristiti div selektor. Sljedeći kod prikazuje selektor tipa za elemente, kao i odgovarajući HTML.

Div(...)

... ...

Casovi

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.

Klase vam omogućavaju da primenite iste stilove na različite elemente odjednom koristeći istu vrednost atributa klase za više elemenata.

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 i

Sjajno(...)

...

Identifikatori

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.

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.

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.

#shayhowe ( ... )

...

Dodatni selektori

Selektori su izuzetno moćne stvari, a 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.

U redu, 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.

Povezivanje CSS-a

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 našeg HTML dokumenta. Korišćenje jednog eksternog CSS-a nam omogućava da primenimo iste stilove na celom sajtu i da brzo izvršimo promene na njemu.

Ostale opcije za dodavanje CSS-a

Ostale opcije za ugradnju CSS-a uključuju korištenje internih i inline stilova. U stvarnosti se možete susresti s ovim opcijama, ali na njih se uglavnom ne gledaju jer one čine ažuriranje stranica nezgrapnim i nezgrapnim.

Da bismo kreirali naš vanjski stilski list, ponovno želimo koristiti naš odabrani uređivač teksta za kreiranje novog tekstualnu datoteku sa ekstenzijom .css. Naš CSS fajl treba da bude sačuvan u istoj fascikli ili podfolderu kao i naš HTML fajl.

Unutar elementa se koristi element 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.

U sljedećem primjeru HTML dokumenta, element ukazuje na vanjski stilski list.

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.

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.

On ovog trenutka 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.

Koristeći CSS reset

Svaki pretraživač ima svoje podrazumevane stilove za različite elemente. Kako google chrome prikazuje naslove, pasuse, liste i tako dalje, može se razlikovati od načina na koji Internet Explorer to radi. Kako bi se osigurala kompatibilnost među pretraživačima, CSS reset je postao široko korišten.

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 pročitaju i to je to. različitim pretraživačimaće početi raditi sa zajedničke referentne tačke.

Postoji gomila različitih CSS resetova dostupnih za primjenu, svi imaju svoje snage. Jedan od najpopularnijih od Erica Meyera, njegov CSS reset je prilagođen da uključuje nove HTML5 elemente.

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.

Kompatibilnost i testiranje među pretraživačima

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.

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.

Na praksi

Vratimo se tamo gdje smo zadnji put stali na našoj stranici konferencije i vidimo kako možemo dodati malo CSS-a.

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š jedan folder sa stilovima unutar foldera imovine.

Koristeći uređivač teksta, napravimo novu datoteku pod nazivom main.css i spremimo je u folder sa stilovima koji smo upravo kreirali.

Pregledom datoteke index.html u pretraživaču možemo vidjeti da su elementi i

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.

/* 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 ; ) /* HTML5 poništavanje uloge prikaza za starije pretraživače */ članak, na stranu, detalji, figcaption, slika, podnožje, zaglavlje, hgroup, meni, navigacija, odjeljak (prikaz: blok; ) tijelo (visina linije: 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; razmak između granica: 0; )

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č teksta i dodajte element u , odmah nakon elementa.

Pošto ukazujemo na stilove kroz element, dodajte atribut rel s vrijednošću stylesheet-a.

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 resetovanjem

Demo i izvorni kod

Ispod možete pogledati web stranicu Styles Conference u njenom trenutnom stanju, kao i preuzeti trenutni izvorni kod stranice.

Sažetak

Dakle, sve je u redu! Napravili smo neke velike korake u ovom tutorijalu.

Razmislite, sada znate osnove HTML-a i CSS-a. Kako nastavimo i budete provodili 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.
• Uvod u HTML elemente, oznake i atribute.
• 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 termini i definicije putem Impressive Webs
• CSS alati: Resetujte CSS preko Erica Meyera

Svrha rada: upoznati studente sa osnovnim pojmovima HTML jezika, strukturom HTML dokumenta, obaveznim oznakama, komentarima, metodama oblikovanja teksta, fizičkim i logičkim stilovima, te sticanje vještina izrade jednostavnih statičkih web dokumenata.

Na laboratorijskoj nastavi koristićemo uređivač teksta Notepad za pripremu HTML fajlova, a pretraživač Internet Explorer kao alat za praćenje urađenog.

Teorijske informacije

Osnovni koncepti

Hypertext- informaciona struktura koja vam omogućava da uspostavite semantičke veze između tekstualnih elemenata na ekranu računara na način da možete lako prelaziti sa jednog elementa na drugi. U praksi se u hipertekstu neke riječi ističu podvlačenjem ili bojenjem u drugu boju (hiperveze). Isticanje riječi označava vezu između ove riječi i nekog dokumenta u kojem se detaljnije razmatra tema povezana s istaknutom riječi. Zaseban dokument, napisan u HTML formatu, zove se:

HTML dokument;

Web dokument;

Web stranica.

Takve stranice su obično u NTM ili HTML formatu.

Grupa web stranica koje pripadaju jednom autoru ili jednom tijelu IEDV i međusobno povezane zajedničkim hipervezama formiraju strukturu koja se naziva web čvor ili web stranica. Svaka HTML stranica ima svoj jedinstveni URL - adstrec na internetu.

okvir (Okvir) - izraz koji ima dva značenja. Prva vrijednost je područje dokumenta sa vlastitim trakama za pomicanje. Druga je 0DNN0H slika u animiranoj grafičkoj datoteci (okviru).

aplet (Applet) - program prebačen na klijentski računar u formi zaseban fajl i pokreće se prilikom pregleda web stranice.

skripta (Skripta) , ili skripta, je program uključen u web stranicu radi proširenja njenih mogućnosti. U određenim situacijama pretraživač Internet Explorer prikazuje poruku: „Dozvoliti izvršavanje skripte na stranici?“ U ovom slučaju mislimo na skripte.

CGI (Često Gateway Interface) - opšti naziv za programe koji, radeći na serveru, omogućavaju vam da proširite mogućnosti Web stranica. Bez takvih programa nemoguće je kreirati interaktivne web stranice.

Pretraživač (Pretraživač) - program za pregled web stranica.

Element- Dizajn HTML jezika. O njemu možete razmišljati kao o kontejneru koji sadrži podatke i koji vam omogućava da ih formatirate na određeni način. Svaka web stranica je skup elemenata. Jedna od glavnih ideja hiperteksta je mogućnost ugniježđenja elemenata. Na primjer:

Sadržaj elementa, podaci koje element formatira

Tag(na engleskom tag - oznaka, deskriptor, oznaka) - početni ili završni marker elementa. Oznake definiraju granice djelovanja elemenata i odvajaju elemente jedan od drugog. U tekstu web stranice, oznake su zatvorene u uglastim zagradama< >, a završnu oznaku uvijek prati kosa crta. Tekst nije između ovih zagrada (< >), potpuno je vidljiv kada se gleda u pretraživaču. Na primjer:

Sadržaj elementa, podaci koji

formatira element

Ovaj tekst će se nalaziti u posebnom pasusu

Svaka web stranica je skup elemenata. Jedan od osnovnih principa HTML-a je mogućnost ugniježđenja jednog elementa u drugi.

Atribut- parametar ili svojstvo elementa. Atributi se nalaze unutar početne oznake i odvojeni su jedan od drugog razmacima. Ako cement sadrži tekst, tada atributi mogu odrediti boju i veličinu fonta, poravnanje pasusa teksta itd. Ako element sadrži sliku, onda atributi mogu odrediti veličinu slike, prisustvo i veličinu okvira oko slike itd.

Ovaj tekst će biti poravnat sa središtem ekrana

Ovaj primjer opet koristi oznaku koja definira početak i kraj pasusa. Međutim, početna oznaka sadrži atribut align, koji postavlja poravnanje teksta na sredinu ekrana.

Bilješka:

Bilo koji korisne informacije mora biti između početne i završne oznake koje označavaju njegov format;

Svi atributi se nalaze u početnoj oznaci;

Radi lakšeg korišćenja, početnu oznaku možete napisati velikim (velikim) slovom (P), a krajnju oznaku malim (malim) slovom (/p), iako to nije neophodno;

Ne zahtijevaju svi elementi završnu (završnu) oznaku;

Počnite pisati svaki novi element sa nova linija. Uvuci ugniježđene elemente (tab). Ovo opet nije neophodno, ali će vam znatno olakšati posao.

Kada preuzmete bilo koji dokument sa WWW-a, njegov tekst u prozoru vašeg pretraživača se prikazuje u savršeno formatiranom obliku koji je jednostavan za pregled. To znači da WEB stranice nisu običan tekst, već sadrže i neke pomoćne informacije za kontrolu prezentacije dokumenta u prozoru vašeg pretraživača. Budući da prilikom izrade dokumenta nije jasno na kojem tipu računara će ga korisnik pregledati, WEB stranice se ne mogu pripremati i pohranjivati ​​u formatu razvijenom za određenu računarsku platformu, na primjer, u formatu Microsoft Word za Windows XP. Da bi korisnik koji radi na bilo kojoj vrsti računara mogao vidjeti dokument formatiran u skladu s tim, koristi se HTML jezik razvijen posebno za ovu svrhu.

Šta je zapravo HTML?

Ako radite sa pretraživačem, izaberite komandu menija View - View HTML code (View - Source). Na ekranu će se pojaviti prozor sa početnim kodom ove stranice u HTML-u.

Ili pritisnite CTRL+U

Izgled WEB stranica na Internetu se često mijenja. Ali za nas u ovom trenutku to nije značajno.

HTML - HyperText Markup Language

HTML - HyperText Markup Language je prilično uobičajen skup naredbi koje opisuju strukturu dokumenta. Ovaj jezik označavanja vam omogućava da istaknete pojedinačne logičke dijelove u dokumentu - naslove, pasuse, tabele, liste, itd., ali ne specificira specifične atribute oblikovanja. Specifičnu vrstu formatiranja određuje sam pretraživač prilikom čitanja dokumenta, a pretraživač posebno pruža bolji prikaz WEB dokument na vašem ekranu.

Kao što je ranije spomenuto, možete kreirati WEB stranice koristeći posebne programe za uređivanje koji automatski generiraju HTML kod, za rad s kojim nije potrebno poznavanje jezika za označavanje. Ali ovi programi su često ograničeni u svojim mogućnostima, sadrže greške i često proizvode loš HTML kod koji ne radi na svim platformama. Stoga, ako želite ozbiljno savladati WEB dizajn i razumjeti principe kreiranja WEB dokumenata, ne možete bez poznavanja osnova HTML jezika, pogotovo jer kreiranje WEB stranica na njemu nije nimalo teško. Možda je čak i lakše nego savladati program za kreiranje HTML stranica.

HTML jezik

HTML jezik postoji u nekoliko varijanti ili specifikacija. Kao i verzije softverskih proizvoda, specifikacije su numerisane: 2.0, 3.0, 3.2, 4.0. Svaka kasnija specifikacija predstavlja proširenje i dodatak prethodnoj. Koristićemo konstrukcije potonjeg HTML specifikacije 4.0 koji su podržani najnovije verzije najčešći pretraživači.

Dokument u prozoru HTML koda je tekstualni dokument u posebnom formatu. Svi fajlovi u ovom formatu imaju HTML ekstenzija(.html) ili HTM (.htm). HTML dokument kombinuje običan tekst sa elementima za označavanje u ugaonim zagradama< и >, Na primjer, , , , . Ovi elementi označavanja nazivaju se tagovi. Oznake mogu biti pojedinačne, otvarajuće i zatvarajuće i sastoje se od sljedećih dijelova određenim redoslijedom:

• lijeva kutna zagrada.

Dakle, početna oznaka, koja se pojavljuje na početku HTML dokumenta i označava njegov početak, sastoji se od HTML imena i dvije ugaone zagrade< >, a oznaka koja se nalazi na kraju WEB dokumenta, pored označenih dijelova, sadrži i kosu crtu / znak, što znači završnu oznaku i označava kraj dokumenta. Tag označava početak koda skriptnog programa integrisanog u dokument. Ova oznaka sadrži, pored naziva skripte, atribut jezika sa vrijednošću "vbscript", što znači da je skripta napisana na vbscript jeziku.

Samo latinični znakovi se mogu koristiti u oznakama, a bilo koji znakovi se mogu koristiti u vrijednostima atributa. Ako se, na primjer, ćirilični znakovi koriste kao vrijednosti atributa, oni moraju biti stavljeni u navodnike, na primjer, name="Section 1".

HTML jezik ne pravi razliku između velikih i malih slova, tako da su oznake i ekvivalentne. Ali 2010. godine, w3c konzorcij, koji je preuzeo na sebe odgovornost da dovede stvari u red u području specifikacije HTML jezika, u svojoj najnovijoj verziji neumorno savjetuje pisanje oznaka malim znakovima, odnosno značajnim uvjetima. Stoga ćemo dalje koristiti oznake za pisanje malim slovima.

Oznake kao html baza

Većina oznaka je uparena: početnu oznaku prati odgovarajuća završna oznaka, a između njih sadrži tekst ili druge oznake, na primjer:

Online knjižara Tri koraka

U takvim slučajevima, dvije oznake i dio dokumenta zatvoren između njih čine blok tzv HTML element. Neke oznake su, na primjer, pojedinačne i nemaju završnu oznaku. Takve oznake su same po sebi HTML elementi.

Većina oznaka može imati jedan ili više atributa - karakteristika koje pružaju dodatne informacije o tome kako pretraživač treba da obradi trenutnu oznaku. Ali možda uopće nema nikakvih atributa. Atribut oznake sastoji se od imena, na primjer, align, znaka jednakosti = i vrijednosti, koja je specificirana nizom znakova, na primjer, "center": align="center". Vrijednosti atributa se obično stavljaju u navodnike. Ali ako ove vrijednosti koriste samo latinične znakove, brojeve i crtice, onda se navodnici mogu izostaviti, na primjer: align=center. Ali izostavljanje navodnika se striktno ne preporučuje zbog brojnih okolnosti povezanih sa predstojećom integracijom HTML-a sa JavaScript-om i jezicima. Stoga, razvijte naviku da odmah pišete atribute pod navodnicima.

Struktura HTML dokumenta

Svaki HTML dokument ima specifičnu strukturu, koja izgleda ovako:

…

Struktura HTML dokumenta sadrži sljedeće bitne elemente:

• oznake i , koji označavaju početak i kraj dokumenta;
• zaglavlje razgraničeno sa i ;
• tijelo ograničeno oznakama...

Naslov, razgraničen oznakama i, koristi ... oznake za definiranje naslova dokumenta, koji bi trebao skicirati njegov sadržaj i obično sadrži manje od 5-6 riječi. Ovaj naslov pretraživači prikazuju u naslovnoj traci radnog prozora programa, a botovi koji kompajliraju indekse za pretraživače identifikuju dokument koristeći njegov naslov.

Pored elementa ..., zaglavlje može sadržavati elemente ..., na primjer, za označavanje informacija o dokumentu. Početni tag uključuje parove ime=vrijednost koji opisuju karakteristike dokumenta, na primjer, tip dokumenta, njegovu enkripciju, autorstvo, listu ključnih riječi itd. Ove podatke također koriste pretraživači prilikom indeksiranja dokumenata.

HTML (HyperText Markup Language) je poseban jezik za oblikovanje tekstualni dokumenti(naziva se i jezik za označavanje dokumenata - WWW preglednik dokumenata). HTML je prilično jednostavan skup naredbi koje opisuju strukturu dokumenta. HTML vam omogućava da istaknete pojedinačne logičke delove u tekstu (naslove, pasuse, liste, itd.), postavite zasebno pripremljenu fotografiju ili sliku na web stranicu i organizujete veze na stranici za komunikaciju sa drugim dokumentima.

HTML ne specificira specifične i precizne atribute oblikovanja dokumenta kao što to čini Microsoft Word, na primjer. Konkretnu vrstu dokumenta u konačnici određuje samo program - Pretraživač na vašem računaru. Potreba za upravo takvim pristupom povezana je sa heterogenošću hardvera i softver računara povezanih na Internet. HTML također nije programski jezik, ali web stranice mogu uključivati ​​ugrađene programe - skripte on Javascript jezici I Visual basic Skripta i programi- applets na jeziku Java.

Sa tačke gledišta Windows korisnik, Web stranica je jednostavno *.htm ili *.html datoteka koja se nalazi na Internet serveru, u lokalna mreža ili na tvrdom disku vašeg uređaja.

Zapamtite da HTML nije programski jezik, već je namijenjen samo za označavanje dokumenata. One. suštinski stvarajući HTML stranica, jednostavno uređujete tekst koristeći oznake na isti način kao u običnom uređivaču teksta. Svaka oznaka ima svoje vlastito svojstvo, ali sve su zatvorene između ugaonih zagrada "", na primjer, , .

Sve oznake u HTML-u podijeljene su u dvije vrste - uparene i neuparene. Uparene oznake su one čija početna oznaka zahtijeva završnu oznaku. Završne oznake u HTML-u su označene kosom crtom i napisane su ovako. Neuparene oznake ne zahtijevaju završnu oznaku. Primjer takvih oznaka je oznaka prijelaza na sljedeći red
. Postoje i obavezne oznake, koje se moraju koristiti na svim stranicama, i opcione oznake koje se koriste po želji.