Što je web stranica? To je dokument napisan u Hypertext Markup Language (HTML) koji se može pregledavati pomoću preglednika. Web stranici se pristupa upisom URL-a.

Web stranica može sadržavati tekst, grafiku i hiperveze na druge stranice i datoteke.

Kako otvoriti web stranicu

Za pregled web stranice potreban je preglednik (npr. Internet Explorer, Edge, Safari, Firefox ili Chrome). U svom pregledniku možete otvoriti web stranicu upisivanjem adresna traka URL. Na primjer, upisivanje "https://www.computerhope.com/esd.htm" otvorit će stranicu ESD Computer Hope.

Ako ne znate URL stranice koju želite posjetiti, možete koristiti pretraživač pronaći web stranicu ili upotrijebiti pretraživanje web stranice.

Kada je nastala prva web stranica?

Prvu web stranicu izradio je Tim Berners-Lee u CERN-u 6. kolovoza 1991. godine. Prije toga možete posjetiti i pogledati prvo mjesto 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 tisuće različitih web stranica, uključujući i ovu koju sada čitate:

U gornjem primjeru URL-a, "url.htm" je web stranica, uvijek je posljednji dio URL-a. Za URL-ove koji ne završavaju s .htm, .html, .php, .cgi, .pl ili drugim datotečnim nastavkom, poslužitelj prema zadanim postavkama učitava web stranicu index.htm. Na primjer, ne postoji web stranica za URL stranice kontakta. U ovom slučaju, zadana indeksna datoteka učitava se iz direktorija /contact.

Primjeri web stranica

Već smo spomenuli da se preglednici koriste za pregled web stranica. Web stranica sastoji se od nekoliko elemenata, uključujući CSS, slike i JavaScript. Tijelo web stranice kreirano je pomoću koristeći HTML. Ovaj kod može biti kreiran pomoću HTML uređivača, napisan od strane čovjeka ili generiran pomoću skripti na strani poslužitelja. Tipično, web stranica koju su izradili ljudi završava ekstenzijom .htm ili .html. Na primjer, ova stranica ima naziv datoteke "webstranica.htm". Stranice koje generira skripta mogu završavati na .cgi, .php, .pl itd.

Koje elemente sadrži web stranica?

U nastavku je pregled glavnih elemenata kako bi web dizajneri mogli razumjeti što je logična struktura web stranice:

Naslov stranice, logotip ili naziv tvrtke gotovo se uvijek nalaze u gornjem lijevom kutu svake web stranice. Također je dobra ideja koristiti slogan ili Kratki opis stranice kako biste novim posjetiteljima dali predodžbu o web mjestu. Ovaj element web stranice obično je poveznica koja vodi do početne stranice;

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

Navigacijska traka ili izbornik obično se nalazi na vrhu ili lijevoj strani svake web stranice. Treba sadržavati poveznice na svaki od glavnih odjeljaka stranice;

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

Društveni gumbi omogućuju posjetiteljima dijeljenje poveznice do web stranice na društvenim mrežama;

Na kreiranim web stranicama, putevi pomažu posjetitelju da shvati gdje se nalazi, kao i da se pomakne na druge dijelove stranice;

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

Početni odlomak jedan je od najvažnijih elemenata web stranice. Posjetitelja treba zainteresirati za čitanje sadržaja web stranice. Jedan od načina da privučete pažnju posjetitelja je da umetnete sliku pored početnog odlomka;

Svaka web stranica trebala bi biti raščlanjena na naslove niže razine koji posjetitelju omogućuju jednostavno skeniranje sadržaja i pronalaženje onoga što mu je najzanimljivije na stranici. Prilikom izrade web stranice to se može učiniti pomoću HTML oznaka...;

Dobro je posjetiteljima dati vezu ili gumb koji preusmjerava na obrazac. Povratne informacije kako bi vam mogli reći je li im to bilo korisno ovu web stranicu ili ne;

Dodatne informacije i alati, kao što je gumb za ispis stranice, također mogu biti korisni korisnicima;

Podnožje treba sadržavati Dodatne informacije, što je važno za tvrtku ili stranicu. Kao i poveznice na druge web stranice;

Autorska prava i sve pravne ili povjerljive obavijesti također moraju biti objavljene na svim web stranicama. U osnovama dizajna web stranica, ovaj element ne samo da može povezivati ​​s relevantnim pravnim informacijama. Također označava da su posjetitelji došli do kraja web stranice;

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

Što korisnici mogu raditi na web stranici?

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

Prije nego što započnemo naše putovanje kroz lekcije o izradi web stranica HTML i CSS, važno je razumjeti razlike između ta dva jezika, sintaksu svakog jezika i neku osnovnu terminologiju.

Što su HTML i CSS?

HTML (HyperText Markup Language) definira strukturu sadržaja i njegovo značenje, definira sadržaj kao što su naslovi, odlomci ili slike. CSS (Cascading Style Sheets) ili cascading style sheets je prezentacijski jezik stvoren za dizajniranje izgled sadržaj koristeći, na primjer, fontove ili boje.

Ova dva jezika - HTML i CSS - neovisni su jedan o drugome i takvi bi trebali ostati. CSS ne bi trebao biti napisan unutar HTML dokumenta i obrnuto. Kao opće pravilo, HTML će uvijek predstavljati sadržaj, a CSS će uvijek definirati stil.

S ovim razumijevanjem razlike između HTML-a i CSS-a, zaronimo u HTML detaljnije.

Osnovni pojmovi HTML-a

Prije nego počnete raditi s HTML-om, vjerojatno ćete naići na neke nove i često čudne pojmove. S vremenom ćete se bolje upoznati sa svima njima, ali za sada biste trebali početi s tri osnovna pojma HTML-a - 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 razina naslova (definiranih kao elementi od do ) i odlomaka (definiranih kao

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

Elementi su identificirani uglastim zagradama oko naziva elementa. Dakle, element će izgledati ovako:

Oznake

Dodavanje uglastih zagrada< и >stvara ono što je poznato kao oznaka oko elementa. Oznake se najčešće pojavljuju u parovima otvarajućih i zatvarajućih oznaka.

Početni tag 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 početnih i završnih oznaka je sadržaj tog elementa. Veza će, na primjer, imati početnu oznaku i završnu oznaku. Ono što se nalazi između ove dvije oznake bit će sadržaj veze.

Dakle, oznake veza izgledat će otprilike ovako:

...

Atributi

Atributi su svojstva koja se koriste za pružanje dodatnih informacija o elementu. Najčešći atributi uključuju atribut id, koji identificira element; atribut klase, koji klasificira element; atribut src, koji specificira izvor ugrađenog sadržaja; i href atribut, koji specificira vezu na pridruženi resurs.

Atributi su definirani u početnoj oznaci iza naziva elementa. Općenito, atributi uključuju ime i vrijednost. Format za ove atribute sastoji se od naziva atributa iza kojeg slijedi znak jednakosti, iza kojeg slijedi vrijednost atributa u navodnicima. Na primjer, element s href atributom izgledat će ovako:

Shay Howe

Demonstracija osnovnih pojmova HTML-a

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 uvodne oznake i završnu oznaku koji pokriva tekst, kao i atribut i vrijednost adrese veze deklarirane putem href="http://shayhowe.com" u početnoj oznaci.

Riža. 1.01. HTML sintaksa u obliku nacrta uključuje element, atribut i oznaku

Sada kada znate što su HTML elementi, oznake i atributi, pogledajmo našu prvu web stranicu. Ako ovdje nešto izgleda novo, ne brinite - razložit ćemo to u hodu.

Prilagodba strukture HTML dokumenta

HTML dokumenti su jednostavni tekstualni dokumenti spremljeni s ekstenzijom .html umjesto .txt. Da biste počeli pisati HTML, prvo vam je potreban uređivač teksta koji vam je ugodno koristiti. Nažalost, to ne uključuje Microsoft Word ili Pages, budući da su to složeni uređivači. Dva najpopularnija uređivača teksta za pisanje HTML-a i CSS-a su Dreamweaver i Uzvišeni tekst. Besplatne alternative također uključuju 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 nalazi se na samom početku HTML dokumenta i govori preglednicima koja se verzija HTML-a koristi. Budući da ćemo koristiti najnoviju verziju HTML-a, vrsta našeg dokumenta bit će jednostavno . Nakon toga dolazi element koji označava početak dokumenta.

Unutar elementa definira gornji dio dokument, uključujući razne metapodatke (popratne informacije o stranici). Sadržaj unutar elementa nije prikazan na samoj web stranici. Umjesto toga, može sadržavati naslov dokumenta (koji se pojavljuje u naslovnoj traci prozora preglednika), veze na sve vanjske datoteke 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:

Pozdrav svijete! Pozdrav svijete!

Ovo je web stranica.

Demonstracija strukture HTML dokumenta

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

Kada je element unutar drugog elementa, poznat i kao ugniježđeni, dobra je ideja uvući ga kako bi struktura dokumenta bila dobro organizirana i čitljiva. U prethodnom kodu, oba su elementa i ugniježđena i pomaknuta unutar . Struktura uvlačenja za elemente nastavlja se novim elementima dodanim unutar i .

Samozatvarajući elementi

U prethodnom primjeru, element je bio jedina oznaka koja nije uključivala završnu oznaku. Ne brinite, ovo je učinjeno namjerno. Ne sastoje se svi elementi od otvarajućih i zatvarajućih oznaka. Neki elementi jednostavno primaju sadržaj ili ponašanje putem atributa unutar jedne oznake. jedan je od tih elemenata. Sadržaj elementa u primjeru dodijeljen je pomoću atributa charset i vrijednosti. Ostali tipični samozatvarajući elementi uključuju:

• 
  

Sljedeća struktura, napravljena korištenjem deklaracije tipa dokumenta i elemenata , i , prilično je uobičajena. Želimo zadržati ovu strukturu dokumenta praktičnom jer ćemo je često koristiti pri stvaranju novih HTML dokumenata.

Provjera valjanosti koda

Bez obzira koliko pažljivo pišemo naš kod, pogreške su neizbježne. Srećom, kada pišemo HTML i CSS, imamo validatore koji provjeravaju naš rad. W3C nudi HTML i CSS validatore koji skeniraju kod tražeći pogreške. Pregled našeg koda ne samo da pomaže u ispravnom prikazivanju u svim preglednicima, već pomaže u podučavanju najboljih praksi pri pisanju koda.

Na praksi

Kao web dizajneri i front-end programeri, imamo luksuz prisustvovati velikom broju sjajnih konferencija posvećenih našem zanatu. Tijekom sljedećih lekcija organizirat ćemo vlastitu Styles konferenciju i izraditi web stranicu za nju. Kao ovo!

Odmaknimo se malo od HTML-a i pogledajmo CSS. Zapamtite, HTML definira sadržaj i strukturu naših web stranica, dok CSS definira njihov vizualni stil i izgled.

Osnovni CSS pojmovi

Uz HTML pojmove, postoje neki osnovni CSS pojmovi s kojima ćete se morati upoznati. Ovi pojmovi uključuju selektore, svojstva i vrijednosti. Baš kao i s HTML terminologijom, što više radite s CSS-om, ti pojmovi postaju druga priroda.

Selektori

Prilikom dodavanja elemenata na web stranicu, njima se može stilizirati koristeći CSS. Birač određuje koji će element ili elemente u HTML-u ciljati i primijeniti stilove (kao što su boja, veličina i položaj). Selektori mogu uključivati ​​kombinaciju različitih metrika za odabir jedinstvenih elemenata, ovisno o tome koliko specifični želimo biti. Na primjer, želimo odabrati svaki odlomak na stranici ili odabrati samo jedan određeni odlomak.

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

U CSS-u se selektori kombiniraju s vitičastim zagradama (), koje obuhvaćaju stilove koji se primjenjuju na odabrani element. Ovaj birač cilja sve elemente

P(...)

Svojstva

Nakon što je element odabran, svojstvo određuje stilove koji će se na njega primijeniti. Nazivi svojstava dolaze nakon selektora, unutar vitičastih zagrada () i neposredno prije dvotočke. Postoje mnoga svojstva koja možemo koristiti, kao što su pozadina, boja, veličina fonta, visina i širina i druga često dodana svojstva. U sljedećem kodu definiramo svojstva boje i veličine fonta koja se primjenjuju na sve elemente

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

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 putem vrijednosti. Vrijednosti se mogu navesti kao tekst između dvotočke i točke-zareza. U nastavku odabiremo sve elemente

I postavite vrijednost svojstva boje na narančasto, a vrijednost svojstva veličine fonta na 16 piksela.

P (boja: narančasta; veličina slova: 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 prebacivanje parova svojstava i vrijednosti unutar vitičastih zagrada. Kao i kod HTML-a, uvlačenje pomaže da naš kod bude organiziran i jasan.

Riža. 1.03. Struktura CSS sintakse uključuje selektor, svojstva i vrijednosti

Poznavanje nekoliko osnovnih pojmova i opće sintakse CSS-a izvrstan je početak, ali moramo obraditi još nekoliko točaka prije nego što zaronimo u dubinu. Konkretno, moramo pobliže pogledati kako selektori rade u CSS-u.

Rad sa selektorima

Selektori, kao što je ranije spomenuto, pokazuju 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 različite vrste selektori. Počet ćemo s najosnovnijim selektorima: selektorima tipa, klase i identifikatora.

Selektori vrsta

Birači tipa ciljaju elemente prema njihovoj vrsti. Na primjer, ako želimo ciljati sve elemente, trebali bismo koristiti selektor div. Sljedeći kod prikazuje birač tipa za elemente, kao i odgovarajući HTML.

Div(...)

... ...

Nastava

Klase vam omogućuju odabir elementa na temelju vrijednosti atributa klase. Selektori klasa malo su specifičniji od selektora tipa jer biraju određenu grupu elemenata, a ne sve elemente istog tipa.

Klase vam omogućuju primjenu istih stilova na različite elemente odjednom korištenjem iste vrijednosti atributa klase za više elemenata.

U CSS-u, klase su predstavljene početnom točkom iza koje slijedi vrijednost atributa klase. Donji selektor klase odabire sve elemente koji sadrže vrijednost atributa klase awesome, uključujući elemente i

Super(...)

...

Identifikatori

Identifikatori su još precizniji od klasa jer ciljaju samo na jedan jedinstveni element u isto vrijeme. Kao što selektori klase koriste vrijednost atributa klase, identifikatori koriste vrijednost atributa id kao selektor.

Bez obzira na prikazanu vrstu elementa, vrijednost id atributa može se koristiti samo jednom na stranici. Ako su ID-ovi prisutni, trebali bi biti rezervirani za važne elemente.

U CSS-u, identifikatori su predstavljeni hash simbolom ispred, iza kojeg slijedi vrijednost atributa id. Ovdje će id odabrati samo element koji sadrži atribut id s vrijednošću shayhowe.

#shayhowe ( ... )

...

Dodatni selektori

Selektori su iznimno moćne stvari i gore opisani su jedni od najčešćih selektora na koje nailazimo. Ovi selektori su tek početak. Dostupni su mnogi napredni selektori i lako su dostupni. Nakon što se s njima osjećate ugodno, nemojte se bojati provjeriti neke od naprednijih.

U redu, počnimo sve sastavljati. Dodajemo elemente na stranicu unutar našeg HTML-a, zatim možemo odabrati te elemente i stilizirati ih pomoću CSS-a. Povežimo sada točkice između HTML-a i CSS-a kako bi ta dva jezika radila zajedno.

Povezivanje CSS-a

Da bi naš CSS razgovarao s našim HTML-om, moramo pokazati na CSS datoteku iz HTML-a. Dobra praksa je uključiti sve naše stilove u jednu vanjsku datoteku, na koju ukazuje unutar elementa našeg HTML dokumenta. Korištenje jednog vanjskog CSS-a omogućuje nam primjenu istih stilova na cijelom web-mjestu i brze promjene na njemu.

Druge opcije za dodavanje CSS-a

Ostale opcije za uključivanje CSS-a uključuju korištenje internih i ugrađenih stilova. Možda ćete se susresti s ovim opcijama u stvarnosti, ali općenito se na njih ne gleda jer ažuriranje stranica čini nezgrapnim i glomaznim.

Da bismo stvorili našu vanjsku tablicu stilova, ponovno želimo koristiti naš odabrani uređivač teksta za izradu novog tekstualna datoteka s ekstenzijom .css. Našu CSS datoteku treba spremiti u istu mapu ili podmapu kao i našu HTML datoteku.

Unutar elementa koristi se element koji definira odnos između HTML i CSS datoteka. Budući da se povezujemo s CSS-om, koristimo atribut rel s vrijednošću stilske tablice da označimo njihov odnos. Osim toga, atribut href koristi se za označavanje lokacije ili putanje CSS datoteke.

U sljedećem primjeru HTML dokumenta, element ukazuje na vanjsku tablicu stilova.

Da bi se CSS ispravno prikazao, vrijednost staze atributa href mora izravno odgovarati mjestu na kojem je pohranjena CSS datoteka. U prethodnom primjeru, datoteka main.css pohranjena je na istom mjestu kao i HTML datoteka, također poznata kao korijenska mapa.

Ako se CSS datoteka nalazi u podmapi, tada vrijednost atributa href mora odgovarati tom putu. Na primjer, ako je naša datoteka main.css spremljena u podmapu pod nazivom stylesheets, tada bi vrijednost atributa href bila stylesheets/main.css. Ovo koristi kosu crtu (ili kosu crtu) za označavanje prelaska na podmapu.

Na ovaj trenutak naše stranice počinju oživljavati, polako ali sigurno. Još nismo previše zaronili u CSS, ali možda ste primijetili da neki elementi imaju stilove koje nismo deklarirali u našem CSS-u. Preglednik je taj koji ovim elementima nameće svoje preferirane stilove. Srećom, te stilove možemo vrlo lako prepisati, što ćemo sljedeće učiniti pomoću resetiranja CSS-a.

Korištenje resetiranja CSS-a

Svaki preglednik ima vlastite zadane stilove za različite elemente. Kako Google Chrome prikazuje naslove, odlomke, popise i tako dalje, može se razlikovati od načina na koji Internet Explorer to radi. Kako bi se osigurala kompatibilnost s više preglednika, resetiranje CSS-a postalo je široko korišteno.

Ponovno postavljanje CSS-a uzima sve osnovne HTML elemente s danim stilom i pruža dosljedan stil u svim preglednicima. Ta poništavanja obično uključuju uklanjanje dimenzija, ispuna, margina ili dodatnih stilova koji smanjuju te vrijednosti. Budući da CSS kaskadno funkcionira odozgo prema dolje (uskoro ćete to saznati) - naš bi reset trebao biti na samom vrhu našeg stila. Ovo osigurava da se ti stilovi prvi čitaju i to je to. različitim preglednicimaće početi raditi sa zajedničke referentne točke.

Postoji hrpa različitih CSS resetiranja dostupnih za primjenu, svi imaju svoje snage. Jedan od najpopularnijih Erica Meyera, njegov reset CSS-a prilagođen je za uključivanje novih HTML5 elemenata.

Ako se osjećate pomalo avanturistički, tu je i Normalize.css koji je stvorio Nicholas Gallagher. Normalize.css ne fokusira se na korištenje tvrdog resetiranja za sve osnovne elemente, već umjesto toga na postavljanje zajedničkih stilova za te elemente. Ovo zahtijeva dublje razumijevanje CSS-a, kao i znanje o tome što želite postići od stilova.

Kompatibilnost s različitim preglednicima i testiranje

Kao što je ranije spomenuto, različiti preglednici različito prikazuju elemente. Važno je prepoznati važnost kompatibilnosti s više preglednika i testiranja. Stranice ne bi trebale izgledati potpuno isto u svim preglednicima, ali bi trebale biti bliske. Koje preglednike želite podržati i u kojoj mjeri je odluka koju ćete morati donijeti na temelju onoga što je najbolje za vašu web-lokaciju.

Postoji nekoliko stvari na koje treba obratiti pozornost kada pišete CSS. Dobra vijest je da možete sve i da je potrebno samo malo strpljenja da to svladate.

Na praksi

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

Unutar naše mape styles-conference, stvorimo novu mapu pod nazivom assets. Ovo je mjesto gdje ćemo pohraniti sve resurse za naše web mjesto, kao što su stilovi, slike, videozapisi itd. Za naše stilove, idemo naprijed i dodamo još jednu mapu s listovima stilova unutar mape sredstava.

Koristeći uređivač teksta, stvorimo novu datoteku pod nazivom main.css i spremimo je u mapu stilova koju smo upravo stvorili.

Pregledom datoteke index.html u pregledniku možemo vidjeti da elementi i

Već sadrži zadani stil. Konkretno, imaju jedinstvenu veličinu fonta i prostor oko sebe. Pomoću resetiranja Erica Meyera možemo omekšati ove stilove, dopuštajuć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: ništa (javna domena) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronim, adresa, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, obrazac, label, legenda, table, caption, tbody, tfoot, thead, tr, th, td, article, side, canvas, details, embed, figure, figcaption, footer, header, hgroup, izbornik, navigacija, izlaz, rubin, odjeljak, sažetak, vrijeme, oznaka, audio, video ( margina: 0; padding: 0; granica: 0; veličina fonta: 100%; font: naslijediti; okomito poravnanje: osnovna linija ; ) /* HTML5 poništavanje uloge prikaza za starije preglednike */ članak, na stranu, detalji, figcaption, slika, podnožje, zaglavlje, hgroup, izbornik, nav, odjeljak ( prikaz: blok; ) tijelo ( visina retka: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- kolaps: kolaps; granični razmak: 0; )

Naša datoteka main.css počinje poprimati oblik, pa je povežimo s datotekom index.html. Otvorite index.html u uređivač teksta i dodajte element u , odmah nakon elementa.

Budući da ukazujemo na stilove kroz element, dodajte atribut rel s tablicom stilova vrijednosti.

Također ćemo uključiti poveznicu na našu datoteku main.css pomoću atributa href. Zapamtite, naša datoteka main.css spremljena je u mapu stylesheets, koja se nalazi unutar mape imovine. Dakle, vrijednost atributa href, koji je put do naše datoteke main.css, trebala bi biti assets/stylesheets/main.css.

Stilska konferencija

Vrijeme je da provjerimo naš rad i vidimo kako naši HTML i CSS rade zajedno. Otvaranje datoteke index.html (ili osvježavanje stranice ako je već otvorena) u pregledniku trebalo bi pokazati nešto drugačiji rezultat nego prije.

Riža. 1.04. Naša stranica Styles Conference s resetiranjem CSS-a

Demo i izvorni kod

U nastavku možete vidjeti web stranicu Styles Conference u trenutnom stanju, kao i preuzeti trenutni izvorni kod stranice.

Sažetak

Dakle, sve je u redu! Poduzeli smo neke velike korake u ovom vodiču.

Zamislite samo, sada znate osnove HTML-a i CSS-a. Kako nastavljamo, a vi provodite više vremena pišući HTML i CSS, bit će vam mnogo ugodnije raditi s 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 resetiranja CSS-a.

Pogledajmo sada pobliže HTML i upoznajmo se malo sa semantikom.

Resursi i veze

• Uobičajeni HTML izrazi putem Scripting Master-a
• Uvjeti i definicije CSS-a putem impresivnih mreža
• CSS alati: poništite CSS putem Erica Meyera

Svrha rada: upoznavanje studenata s osnovnim pojmovima HTML jezika, strukturom HTML dokumenta, obveznim oznakama, komentarima, načinima oblikovanja teksta, fizičkim i logičkim stilovima te stjecanje vještina izrade jednostavnih statičnih Web dokumenata.

U laboratorijskoj nastavi koristit ćemo uređivač teksta Notepad za pripremu HTML datoteka, a preglednik Internet Explorer kao alat za praćenje učinjenog.

Teorijske informacije

Osnovni koncepti

Hipertekst- informacijska struktura koja vam omogućuje uspostavljanje semantičkih veza između tekstualnih elemenata na zaslonu računala na takav način da možete lako prijeći s jednog elementa na drugi. U praksi se u hipertekstu neke riječi ističu podcrtavanjem ili bojanjem drugom bojom (hiperveze). Označavanje riječi označava vezu između te riječi i nekog dokumenta u kojem se detaljnije obrađuje tema povezana s označenom riječi. Zaseban dokument, napisan u HTML formatu, zove se:

HTML dokument;

Web dokument;

Web stranica.

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

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

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

Applet (Applet) - program prenesen na klijentsko računalo u obliku zasebna datoteka i pokreće se prilikom pregledavanja web stranice.

Skripta (Skripta) , ili skripta, je program uključen u web stranicu za proširenje njezinih mogućnosti. U određenim situacijama preglednik Internet Explorer prikazuje poruku: "Dopustiti izvršavanje skripte na stranici?" U ovom slučaju mislimo na skripte.

CGI (Uobičajen Gateway Sučelje) - opći naziv za programe koji vam, radeći na poslužitelju, omogućuju proširenje mogućnosti web stranica. Bez takvih programa nemoguće je izraditi interaktivne web stranice.

preglednik (preglednik) - program za pregledavanje web stranica.

Element- Dizajn HTML jezika. Možete ga zamisliti kao spremnik koji sadrži podatke i omogućuje vam da ih formatirate na određeni način. Svaka web stranica je skup elemenata. Jedna od glavnih ideja hiperteksta je mogućnost ugniježđivanja elemenata. Na primjer:

Sadržaj elementa, podaci koje element oblikuje

Označiti(na engleskom tag - oznaka, deskriptor, oznaka) - početna ili završna oznaka elementa. Oznake definiraju granice djelovanja elemenata i odvajaju elemente jedne od drugih. U tekstu web-stranice oznake se stavljaju u uglaste zagrade< >, a kraj oznake uvijek slijedi kosa crta. Tekst nije između ovih zagrada (< >), potpuno je vidljiv kada se pregledava u pregledniku. Na primjer:

Sadržaj elementa, podatak koji

oblikuje element

Ovaj tekst će se nalaziti u posebnom paragrafu

Svaka web stranica je skup elemenata. Jedno od osnovnih načela HTML-a je mogućnost ugniježđivanja jednog elementa u drugi.

Atribut- parametar ili svojstvo elementa. Atributi se nalaze unutar početne oznake i međusobno su odvojeni razmacima. Ako cement sadrži tekst, tada atributi mogu odrediti boju i veličinu fonta, poravnanje odlomka teksta itd. Ako element sadrži sliku, tada atributi mogu odrediti veličinu slike, prisutnost i veličinu okvira oko slike itd.

Ovaj će tekst biti poravnat prema sredini zaslona

Ovaj primjer ponovno koristi oznaku koja definira početak i kraj odlomka. Međutim, početna oznaka sadrži atribut poravnanja, koji postavlja poravnanje teksta na središte zaslona.

Bilješka:

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

Svi atributi nalaze se u početnoj oznaci;

Radi lakšeg korištenja, početnu oznaku možete napisati velikim (velikim) slovom (P), a završnu oznaku malim (malim) slovom (/p), iako to nije potrebno;

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

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

Kada preuzmete bilo koji dokument s WWW-a, njegov tekst u prozoru vašeg preglednika prikazuje se u savršeno formatiranom obliku koji je jednostavan za pregled. To znači da WEB stranice nisu obični tekst, već sadrže i neke pomoćne informacije za kontrolu prezentacije dokumenta u prozoru vašeg preglednika. Budući da prilikom izrade dokumenta nije jasno na kojem će ga tipu računala korisnik pregledavati, WEB stranice se ne mogu pripremiti i pohraniti u formatu razvijenom za određenu računalnu platformu, primjerice u Microsoft Word formatu za Windows XP. Kako bi korisnik koji radi na bilo kojoj vrsti računala vidio dokument formatiran u skladu s tim, koristi se HTML jezik razvijen posebno za tu svrhu.

Što je zapravo HTML?

Ako radite s preglednikom, odaberite naredbu izbornika Pogled - Pregled HTML koda (Prikaz - Izvor). Na zaslonu će se pojaviti prozor s početnim kodom ove stranice u HTML-u.

Ili pritisnite CTRL+U

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

HTML - HyperText Markup Language

HTML - HyperText Markup Language prilično je uobičajen skup naredbi koje opisuju strukturu dokumenta. Ovaj označni jezik omogućuje vam da označite pojedinačne logičke dijelove u dokumentu - naslove, odlomke, tablice, popise itd., ali ne specificira specifične atribute oblikovanja. Konkretnu vrstu oblikovanja određuje sam preglednik prilikom čitanja dokumenta, a preglednik to posebno omogućuje bolji prikaz WEB dokument na vašem ekranu.

Kao što je prethodno spomenuto, WEB stranice možete izraditi pomoću posebnih programa za uređivanje koji automatski generiraju HTML kod, a rad s kojim ne zahtijeva poznavanje jezika za označavanje. Ali ti su programi često ograničeni u svojim mogućnostima, sadrže pogreške i često proizvode loš HTML kod koji ne radi na svim platformama. Stoga, ako želite ozbiljno savladati WEB dizajn i razumjeti principe izrade WEB dokumenata, ne možete bez poznavanja osnova HTML jezika, tim više što kreiranje WEB stranica na njemu nije nimalo teško. Možda je čak lakše nego svladati program za izradu HTML stranica.

HTML jezik

HTML jezik postoji u nekoliko varijanti ili specifikacija. Kao i verzije softverskih proizvoda, specifikacije su označene brojevima: 2.0, 3.0, 3.2, 4.0. Svaka sljedeća specifikacija predstavlja proširenje i dodatak prethodnoj. Koristit ćemo se potonjim konstrukcijama HTML specifikacije 4.0 koji su podržani najnovije verzije najčešći preglednici.

Dokument u prozoru HTML koda je tekstualni dokument u posebnom formatu. Sve datoteke u ovom formatu imaju HTML proširenje(.html) ili HTM (.htm). HTML dokument miješa običan tekst s elementima oznake u uglastim zagradama< и >, Na primjer, , , , . Ovi elementi označavanja nazivaju se oznakama. Oznake mogu biti pojedinačne, otvaraju i zatvaraju 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 naziva i dvije uglaste zagrade< >, a oznaka koja se nalazi na kraju WEB dokumenta, osim označenih dijelova, sadrži i kosu crtu / znak, koja označava završnu oznaku i označava kraj dokumenta. Oznaka označava početak koda programa skripte integriranog u dokument. Ova oznaka sadrži, osim naziva skripte, atribut jezika s vrijednošću "vbscript", što znači da je skripta napisana na jeziku vbscript.

U oznakama se mogu koristiti samo latinični znakovi, au vrijednostima atributa mogu se koristiti bilo koji znakovi. Ako se npr. ćirilični znakovi koriste kao vrijednosti atributa, oni moraju biti u navodnicima, npr. name="Odjeljak 1".

HTML jezik ne razlikuje velika i mala slova, tako da su oznake i ekvivalentne. No, 2010. godine konzorcij w3c, koji je na sebe preuzeo odgovornost da dovede stvari u red na području specifikacije HTML jezika, u svojoj posljednjoj verziji nemilosrdno savjetuje pisanje oznaka malim slovima, odnosno značajnim uvjetima. Stoga ćemo dalje koristiti oznake za pisanje malim slovima.

Oznake kao html baza

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

Internetska knjižara Tri koraka

U takvim slučajevima dvije oznake i dio dokumenta između njih čine blok tzv HTML element. Neke su oznake, na primjer, jednostruke 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 preglednik treba obraditi trenutnu oznaku. Ali možda uopće nema atributa. Atribut oznake sastoji se od naziva, na primjer, poravnati, znaka jednakosti = i vrijednosti, koja je određena nizom znakova, na primjer, "centar": align="center". Vrijednosti atributa obično se nalaze u navodnicima. Ali ako te vrijednosti koriste samo latinične znakove, brojeve i crtice, navodnici se mogu izostaviti, na primjer: align=center. Ali izostavljanje navodnika strogo se ne preporučuje zbog niza okolnosti povezanih s nadolazećom integracijom HTML-a s JavaScriptom i jezicima. Stoga razvijte naviku da atribute odmah pišete 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 , koje označavaju početak i kraj dokumenta;
• zaglavlje razgraničeno sa i ;
• tijelo omeđeno oznakama...

Naslov, odijeljen oznakama i , koristi oznake ... za definiranje naslova dokumenta, koji bi trebao ocrtavati njegov sadržaj i obično sadrži manje od 5-6 riječi. Ovaj naslov preglednici prikazuju u naslovnoj traci radnog prozora programa, a botovi koji sastavljaju indekse za tražilice identificiraju dokument pomoću naslova.

Osim 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, vrstu dokumenta, njegovu enkripciju, autorstvo, popis ključnih riječi i sl. Ove podatke također koriste tražilice prilikom indeksiranja dokumenata.

HTML (HyperText Markup Language) poseban je jezik za oblikovanje tekstualni dokumenti(još se naziva i jezik za označavanje dokumenata - WWW preglednik dokumenata). HTML je prilično jednostavan skup naredbi koje opisuju strukturu dokumenta. HTML vam omogućuje da označite pojedine logičke dijelove u tekstu (naslove, odlomke, popise itd.), postavite zasebno pripremljenu fotografiju ili sliku na web stranicu i organizirate veze na stranici za komunikaciju s drugim dokumentima.

HTML ne specificira specifične i precizne atribute oblikovanja dokumenta kao što to radi, na primjer, Microsoft Word. Konkretnu vrstu dokumenta u konačnici određuje samo program - preglednik na vašem računalu. Potreba za upravo takvim pristupom povezana je s heterogenošću hardvera i softver računala spojena na internet. HTML također nije programski jezik, ali web stranice mogu sadržavati ugrađene programe - skripte na Javascript jezici I Visual Basic Skripta i programi- apleti u jeziku Java.

S gledišta Windows korisnik, Web stranica je jednostavno *.htm ili *.html datoteka koja se nalazi na internetskom poslužitelju, u lokalna mreža ili na tvrdom disku vašeg stroja.

Zapamtite da HTML nije programski jezik, namijenjen je samo za označavanje dokumenata. Oni. u biti stvarajući HTML stranica, jednostavno uređujete tekst koristeći oznake na gotovo isti način kao u običnom uređivaču teksta. Svaka oznaka ima vlastito svojstvo, ali su sve zatvorene između uglastih 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 označavaju se kosom crtom i pišu ovako. Neuparene oznake ne zahtijevaju završnu oznaku. Primjer takvih oznaka je oznaka prijelaza na sljedeći redak
. Također postoje obvezni tagovi, koji se moraju koristiti na svim stranicama, i opcijski tagovi, koji se koriste po želji.