Kaj je spletna stran? To je dokument, napisan v jeziku HTML (Hypertext Markup Language), ki si ga je mogoče ogledati v brskalniku. Do spletne strani dostopate z vnosom URL-ja.

Spletna stran lahko vsebuje besedilo, grafiko in hiperpovezave do drugih strani in datotek.

Kako odpreti spletno stran

Za ogled spletne strani potrebujete brskalnik (npr. internet Explorer, Edge, Safari, Firefox ali Chrome). V brskalniku lahko s tipkanjem odprete spletno stran naslovna vrstica URL. Če na primer vnesete »https://www.computerhope.com/esd.htm«, se prikaže stran ESD Computer Hope.

Če ne poznate URL-ja spletnega mesta, ki ga želite obiskati, lahko uporabite iskalnik da poiščete spletno stran ali uporabite iskanje po spletnem mestu.

Kdaj je nastala prva spletna stran?

Prvo spletno stran je v CERN-u ustvaril Tim Berners-Lee 6. avgusta 1991. Pred tem lahko obiščete in si ogledate prvo mesto in prvo spletno stran na http://info.cern.ch/.

Kakšna je razlika med mestom in spletno stranjo?

Spletno mesto je mesto, ki vsebuje več kot eno spletno stran. Naš vir je na primer spletno mesto, ki vključuje na tisoče različnih spletnih strani, vključno s to, ki jo berete zdaj:

V zgornjem primeru URL-ja je "url.htm" spletna stran, vedno je zadnji del URL-ja. Za URL-je, ki se ne končajo z .htm, .html, .php, .cgi, .pl ali drugo datotečno pripono, strežnik privzeto naloži spletno stran index.htm. Na primer, ni spletne strani za URL kontaktne strani. V tem primeru se privzeta indeksna datoteka naloži iz imenika /contact.

Primeri spletnih strani

Omenili smo že, da se brskalniki uporabljajo za pregledovanje spletnih strani. Spletna stran je sestavljena iz več elementov, vključno s CSS, slikami in JavaScriptom. Telo spletne strani je ustvarjeno z z uporabo HTML. To kodo lahko ustvarite z urejevalnikom HTML, napišete jo lahko ljudje ali ustvarite s skripti na strani strežnika. Običajno se spletna stran, ki jo ustvari človek, konča s pripono .htm ali .html. Ta stran ima na primer ime datoteke "webpage.htm". Strani, ki jih ustvari skript, se lahko končajo z .cgi, .php, .pl itd.

Katere elemente vsebuje spletna stran?

Spodaj je razčlenitev glavnih elementov, da lahko spletni oblikovalci razumejo, kakšna je logična struktura spletne strani:

Naslov spletnega mesta, logotip ali ime podjetja je skoraj vedno v zgornjem levem kotu vsake spletne strani. Prav tako je dobro uporabiti slogan oz Kratek opis strani, da bi novi obiskovalci dobili predstavo o spletnem mestu. Ta element spletne strani je običajno povezava, ki vodi do domače strani;

Iskalna vrstica omogoča obiskovalcem, da hitro najdejo spletno stran. Prisoten mora biti na vsaki strani;

Navigacijska vrstica ali meni se običajno nahaja na vrhu ali levi strani vsake spletne strani. Vključevati mora povezave do vsakega od glavnih razdelkov spletnega mesta;

Oglasne pasice se lahko pojavijo na različnih mestih na spletni strani. Običajno so prikazani na vrhu, levi, desni ali dnu spletne strani ali vključeni v glavno vsebino;

Socialni gumbi omogočajo obiskovalcem, da delijo povezavo do spletne strani na spletnih mestih za družabna omrežja;

Na ustvarjenih spletnih straneh drobtinice pomagajo obiskovalcu razumeti, kje je, in se premakniti na druge dele spletnega mesta;

Naslov naj bo na vrhu vsake spletne strani. Ustvari se z uporabo oznake HTML.

Začetni odstavek je eden najpomembnejših elementov spletne strani. Obiskovalca mora zanimati branje vsebine spletne strani. Eden od načinov, kako pritegniti pozornost obiskovalcev, je vstavljanje slike poleg uvodnega odstavka;

Vsaka spletna stran mora biti razdeljena na naslove nižje ravni, ki obiskovalcu omogočajo enostavno pregledovanje vsebine in iskanje tistega, kar ga na strani najbolj zanima. Pri izdelavi spletne strani lahko to naredimo s pomočjo oznak HTML...;

Dobro je, da obiskovalcem ponudite povezavo ali gumb, ki preusmeri na obrazec. povratne informacije da vam lahko povedo, ali jim je bilo koristno to spletno stran ali ne;

Uporabnikom so lahko koristne tudi dodatne informacije in orodja, kot je gumb za tiskanje strani;

Noga mora vsebovati Dodatne informacije, kar je pomembno za podjetje ali stran. Kot tudi povezave do drugih spletnih strani;

Prav tako morajo biti na vseh spletnih straneh objavljene avtorske pravice in vsa pravna ali zaupna obvestila. V osnovah oblikovanja spletnih strani se lahko ta element ne samo poveže z ustreznimi pravnimi informacijami. Označuje tudi, da so obiskovalci dosegli konec spletne strani;

Gumb na vrhu strani lahko obiskovalcem pomaga pri hitri navigaciji nazaj na vrh spletne strani za dostop do menijskih povezav.

Kaj lahko uporabniki počnejo na spletni strani?

Večina spletnih strani ima zanimive hiperpovezave, na katere kliknete, da poiščete več informacij. Lahko tudi poslušate glasbo, gledate videe, kupujete, klepetate in še veliko več.

Preden začnemo naše potovanje skozi lekcije o izdelavi spletnih strani HTML in CSS, je pomembno razumeti razlike med obema jezikoma, sintakso vsakega jezika in nekaj osnovne terminologije.

Kaj sta HTML in CSS?

HTML (HyperText Markup Language) definira strukturo vsebine in njen pomen ter definira vsebino, kot so naslovi, odstavki ali slike. CSS (Cascading Style Sheets) ali kaskadne tabele slogov so predstavitveni jezik, ustvarjen za oblikovanje videz vsebino, ki uporablja na primer pisave ali barve.

Ta dva jezika - HTML in CSS - sta neodvisna drug od drugega in bi morala tako tudi ostati. CSS ne sme biti zapisan znotraj dokumenta HTML in obratno. Splošno pravilo je, da bo HTML vedno predstavljal vsebino, CSS pa bo vedno določal slog.

S tem razumevanjem razlike med HTML in CSS se poglobimo v HTML podrobneje.

Osnovni izrazi HTML

Preden začnete delati s HTML-jem, boste verjetno naleteli na nove in pogosto čudne izraze. Sčasoma se boste z vsemi bolje seznanili, zdaj pa bi morali začeti s tremi osnovnimi izrazi HTML - elementi, oznake in atributi.

Elementi

Elementi določajo, kako definirati strukturo in vsebino predmetov na strani. Nekateri pogosto uporabljeni elementi vključujejo več ravni naslovov (definiranih kot elementov od do ) in odstavkov (definiranih kot

); Na seznam lahko vključite elemente ... in mnogi drugi.

Elementi so označeni z oglatimi oklepaji, ki obdajajo ime elementa. Torej bo element izgledal takole:

Oznake

Dodajanje kotnih oklepajev< и >okoli elementa ustvari tako imenovano oznako. Oznake se najpogosteje pojavljajo v parih odpiralnih in zapiralnih oznak.

Začetna oznaka označuje začetek elementa. Sestavljen je iz simbola ; Na primer,.

Zaključna oznaka označuje konec elementa. Sestavljen je iz simbola< с последующей косой чертой и именем элемента и завершается символом >; Na primer,.

Vsebina, ki se pojavi med začetno in zapiralno oznako, je vsebina tega elementa. Povezava bo na primer imela začetno oznako in zaključno oznako. Kar je med tema dvema oznakama, bo vsebina povezave.

Torej bodo oznake povezav videti nekako takole:

...

Lastnosti

Atributi so lastnosti, ki se uporabljajo za zagotavljanje dodatnih informacij o elementu. Najpogostejši atributi vključujejo atribut id, ki identificira element; atribut razreda, ki razvršča element; atribut src, ki določa vir vdelane vsebine; in atribut href, ki določa povezavo do povezanega vira.

Atributi so definirani v začetni oznaki za imenom elementa. Na splošno atributi vključujejo ime in vrednost. Format za te atribute je sestavljen iz imena atributa, ki mu sledi znak enačaja, ki mu sledi vrednost atributa v narekovajih. Na primer element z atributom href bo videti takole:

Shay Howe

Predstavitev osnovnih izrazov HTML

Ta koda bo na spletni strani prikazala besedilo "Shay Howe" in ob kliku na to besedilo bo uporabnika preusmerila na http://shayhowe.com. Element povezave je deklariran z uporabo začetne oznake in zaključno oznako ki pokriva besedilo, kot tudi atribut in vrednost naslova povezave, navedenega prek href="http://shayhowe.com" v začetni oznaki.

riž. 1.01. Sintaksa HTML v orisni obliki vključuje element, atribut in oznako

Zdaj, ko veste, kaj so elementi, oznake in atributi HTML, si poglejmo našo prvo spletno stran. Če se tukaj zdi kaj novega, ne skrbite – razčlenili ga bomo sproti.

Prilagajanje strukture dokumenta HTML

Dokumenti HTML so preprosti besedilni dokumenti, shranjeni s končnico .html namesto .txt. Če želite začeti pisati HTML, najprej potrebujete urejevalnik besedila, ki ga znate uporabljati. Na žalost to ne vključuje Microsoft Word ali Strani, saj gre za zapletene urejevalnike. Dva najbolj priljubljena urejevalnika besedila za pisanje HTML in CSS sta Dreamweaver in Vzvišeno besedilo. Brezplačne alternative vključujejo tudi Notepad++ za Windows in TextWrangler za Mac.

Vsi dokumenti HTML vsebujejo zahtevano strukturo, ki vključuje naslednje deklaracije in elemente: , in .

Izjava o vrsti dokumenta ali se nahaja na samem začetku dokumenta HTML in brskalnikom pove, katera različica HTML se uporablja. Ker bomo uporabljali najnovejšo različico HTML, bo vrsta našega dokumenta preprosto . Za tem pride element, ki označuje začetek dokumenta.

Znotraj elementa definira zgornji del dokument, vključno z različnimi metapodatki (spremnimi informacijami o strani). Vsebina znotraj elementa ni prikazana na sami spletni strani. Namesto tega lahko vključuje naslov dokumenta (ki se prikaže v naslovni vrstici okna brskalnika), povezave do zunanjih datotek ali druge uporabne metapodatke.

V elementu bo vsebovana vsa vidna vsebina spletne strani. Struktura tipičnega dokumenta HTML izgleda takole:

Pozdravljen, svet! Pozdravljen, svet!

To je spletna stran.

Predstavitev strukture dokumenta HTML

Ta koda prikazuje dokument, ki se začne z izjavo o vrsti dokumenta, , ki ji takoj sledi . V notranjosti so elementi in. Element vsebuje kodiranje strani prek oznake in naslov dokumenta skozi element. Element vključuje naslov skozi element in odstavek besedila skozi . Ker sta tako naslov kot odstavek ugnezdena znotraj elementa, sta vidna na spletni strani.

Ko je element znotraj drugega elementa, znan tudi kot ugnezdeni, je dobro, da ga zamaknete, da bo struktura dokumenta dobro organizirana in berljiva. V prejšnji kodi sta oba elementa ugnezdena in zamaknjena znotraj . Struktura zamikov za elemente se nadaljuje z novimi elementi, dodanimi znotraj in .

Samozapiralni elementi

V prejšnjem primeru je bil element edina oznaka, ki ni vključevala zaključne oznake. Ne skrbite, to je bilo storjeno namerno. Vsi elementi niso sestavljeni iz odpiralnih in zapiralnih oznak. Nekateri elementi preprosto prejmejo vsebino ali vedenje prek atributov znotraj ene same oznake. je eden od teh elementov. Vsebina elementa v primeru je dodeljena z uporabo atributa nabora znakov in vrednosti. Drugi tipični samozapiralni elementi vključujejo:

• 
  

Naslednja struktura, izdelana z uporabo deklaracije tipa dokumenta in elementov , in , je precej pogosta. To strukturo dokumenta želimo ohraniti priročno, ker jo bomo pogosto uporabljali pri ustvarjanju novih dokumentov HTML.

Preverjanje kode

Ne glede na to, kako skrbno pišemo kodo, so napake neizogibne. Na srečo imamo pri pisanju HTML in CSS validatorje, ki preverjajo naše delo. W3C ponuja validatorje HTML in CSS, ki skenirajo kodo za napake. Pregled naše kode ne le pomaga pri pravilnem upodabljanju v vseh brskalnikih, ampak pomaga tudi pri učenju najboljših praks pri pisanju kode.

Na praksi

Kot spletni oblikovalci in front-end razvijalci imamo razkošje, da se udeležujemo številnih odličnih konferenc, posvečenih naši obrti. V naslednjih lekcijah bomo organizirali lastno Styles Conference in ustvarili spletno stran zanjo. Všečkaj to!

Preklopimo malo stran od HTML in si oglejmo CSS. Ne pozabite, HTML določa vsebino in strukturo naših spletnih strani, CSS pa njihov vizualni slog in videz.

Osnovni pogoji CSS

Poleg izrazov HTML obstaja nekaj osnovnih izrazov CSS, s katerimi se boste morali seznaniti. Ti izrazi vključujejo izbirnike, lastnosti in vrednosti. Tako kot pri terminologiji HTML, bolj ko delate s CSS, bolj postanejo ti izrazi druga narava.

Selektorji

Ko dodajate elemente na spletno stran, jih lahko oblikujete z z uporabo CSS. Izbirnik določa, na kateri element ali elemente v HTML naj se usmeri in uporabi sloge (kot so barva, velikost in položaj). Izbirniki lahko vključujejo kombinacijo različnih meritev za izbiro edinstvenih elementov, odvisno od tega, kako specifični želimo biti. Na primer, želimo izbrati vsak odstavek na strani ali izbrati samo en določen odstavek.

Izbirniki so običajno povezani z vrednostjo atributa, kot je ID ali vrednost razreda, ali ime elementa, kot je ali .

V CSS so izbirniki kombinirani z zavitimi oklepaji (), ki obdajajo sloge, ki so uporabljeni za izbrani element. Ta izbirnik cilja na vse elemente

P(...)

Lastnosti

Ko je element izbran, lastnost določa sloge, ki bodo uporabljeni zanj. Imena lastnosti so za izbirnikom, znotraj zavitih oklepajev () in tik pred dvopičjem. Obstaja veliko lastnosti, ki jih lahko uporabimo, kot so ozadje, barva, velikost pisave, višina in širina ter druge pogosto dodane lastnosti. V naslednji kodi definiramo lastnosti barve in velikosti pisave, ki veljajo za vse elemente

P ( barva: ...; velikost pisave: ...; )

Vrednote

Doslej smo le izbrali element prek izbirnika in skozi lastnosti določili, kateri slog želimo uporabiti zanj. Zdaj lahko nastavimo vedenje te lastnosti prek vrednosti. Vrednosti se lahko določijo kot besedilo med dvopičjem in podpičjem. Spodaj izberemo vse elemente

In nastavite vrednost lastnosti barve na oranžno in vrednost lastnosti velikosti pisave na 16 slikovnih pik.

P (barva: oranžna; velikost pisave: 16px; )

Da bi to preizkusili, se v CSS naš nabor pravil začne z izbirnikom, ki mu takoj sledijo zaviti oklepaji. Ti zaviti oklepaji vsebujejo deklaracije, sestavljene iz parov lastnosti in vrednosti. Vsaka deklaracija se začne z lastnostjo, ki ji sledi dvopičje, vrednost lastnosti in na koncu podpičje.

Običajna praksa je prestavljanje parov lastnosti in vrednosti znotraj zavitih oklepajev. Kot pri HTML, zamik pomaga ohranjati našo kodo organizirano in jasno.

riž. 1.03. Sintaksna struktura CSS vključuje izbirnik, lastnosti in vrednosti

Poznavanje nekaj osnovnih izrazov in splošne sintakse CSS je odličen začetek, vendar moramo obravnavati še nekaj točk, preden se potopimo v globino. Še posebej si moramo podrobneje ogledati, kako izbirniki delujejo v CSS.

Delo s selektorji

Izbirniki, kot smo že omenili, nakazujejo, kateri elementi HTML bodo oblikovani. Pomembno je, da popolnoma razumete, kako uporabljati selektorje in kako delujejo. Prvi korak bi moral biti spoznavanje različne vrste selektorji. Začeli bomo z najosnovnejšimi izbirniki: izbirniki tipa, razreda in identifikatorja.

Izbirniki vrst

Izbirniki vrst ciljajo na elemente glede na njihovo vrsto. Na primer, če želimo ciljati na vse elemente, moramo uporabiti izbirnik div. Naslednja koda prikazuje izbirnik vrste za elemente in ustrezen HTML.

Div (...)

... ...

Razredi

Razredi vam omogočajo, da izberete element na podlagi vrednosti atributa razreda. Izbirniki razreda so nekoliko bolj specifični kot izbirniki vrst, ker izberejo določeno skupino elementov in ne vseh elementov istega tipa.

Razredi vam omogočajo, da uporabite iste sloge za različne elemente hkrati z uporabo iste vrednosti atributa razreda za več elementov.

V CSS so razredi predstavljeni z začetno piko, ki ji sledi vrednost atributa razreda. Spodnji izbirnik razreda izbere vse elemente, ki vsebujejo vrednost atributa awesome class, vključno z elementi in

Čudovito(...)

...

Identifikatorji

Identifikatorji so še bolj natančni kot razredi, ker ciljajo le na en edinstven element naenkrat. Tako kot izbirniki razreda uporabljajo vrednost atributa razreda, identifikatorji uporabljajo vrednost atributa id kot izbirnik.

Ne glede na vrsto elementa, ki je prikazan, je vrednost atributa id mogoče uporabiti samo enkrat na strani. Če so ID-ji prisotni, morajo biti rezervirani za pomembne elemente.

V CSS so identifikatorji predstavljeni z zgoščenim simbolom spredaj, ki mu sledi vrednost atributa id. Tu bo id izbral samo element, ki vsebuje atribut id z vrednostjo shayhowe.

#shayhowe ( ... )

...

Dodatni izbirniki

Selektorji so izjemno močne stvari in zgoraj opisani so med najpogostejšimi selektorji, ki jih srečamo. Ti selektorji so šele začetek. Na voljo je veliko naprednih izbirnikov, ki so na voljo. Ko se boste z njimi počutili udobno, se ne bojte preveriti nekaterih naprednejših.

V redu, začnimo sestavljati vse skupaj. Elemente dodamo na stran znotraj našega HTML-ja, nato lahko te elemente izberemo in jih oblikujemo s pomočjo CSS. Zdaj pa povežimo pike med HTML in CSS, da bosta oba jezika delovala skupaj.

Povezovanje CSS

Da bi naš CSS govoril z našim HTML-jem, moramo pokazati na datoteko CSS iz HTML-ja. Dobra praksa je vključitev vseh naših slogov v eno zunanjo datoteko, na katero kaže element našega dokumenta HTML. Uporaba enega zunanjega CSS-ja nam omogoča, da uporabimo iste sloge na celotnem spletnem mestu in ga hitro spremenimo.

Druge možnosti za dodajanje CSS

Druge možnosti za vključitev CSS vključujejo uporabo notranjih in vstavljenih slogov. V resnici se lahko srečate s temi možnostmi, vendar so na splošno nezadovoljne, ker je zaradi njih posodabljanje spletnih mest okorno in okorno.

Če želimo ustvariti naš zunanji slogovni list, ponovno želimo uporabiti naš izbrani urejevalnik besedila, da ustvarimo novega besedilna datoteka s pripono .css. Našo datoteko CSS je treba shraniti v isto mapo ali podmapo kot našo datoteko HTML.

Znotraj elementa se uporablja element, ki določa razmerje med datotekama HTML in CSS. Ker se povezujemo s CSS, uporabljamo atribut rel z vrednostjo slogovne datoteke, da označimo njuno razmerje. Poleg tega se atribut href uporablja za označevanje lokacije ali poti datoteke CSS.

V naslednjem primeru dokumenta HTML element kaže na zunanjo datoteko slogov.

Za pravilno upodabljanje CSS se mora vrednost poti atributa href neposredno ujemati s tem, kje je shranjena datoteka CSS. V prejšnjem primeru je datoteka main.css shranjena na istem mestu kot datoteka HTML, znana tudi kot korenska mapa.

Če se datoteka CSS nahaja v podmapi, mora vrednost atributa href ustrezati tej poti. Na primer, če je bila naša datoteka main.css shranjena v podmapo z imenom stylesheets, bi bila vrednost atributa href stylesheets/main.css. To uporablja poševnico (ali poševnico), ki označuje premikanje v podmapo.

Vklopljeno ta trenutek naše strani počasi, a vztrajno začenjajo oživljati. Nismo se še preveč poglobili v CSS, vendar ste morda opazili, da imajo nekateri elementi sloge, ki jih nismo navedli v našem CSS. Brskalnik je tisti, ki tem elementom vsili svoje prednostne sloge. Na srečo lahko te sloge precej preprosto prepišemo, kar bomo storili naslednjič s ponastavitvijo CSS.

Uporaba ponastavitve CSS

Vsak brskalnik ima svoje privzete sloge za različne elemente. kako Google Chrome prikazuje naslove, odstavke, sezname itd., se lahko razlikuje od tega, kako to počne Internet Explorer. Za zagotovitev združljivosti med brskalniki se ponastavitev CSS pogosto uporablja.

Ponastavitev CSS vzame vse osnovne elemente HTML z danim slogom in zagotavlja dosleden slog v vseh brskalnikih. Te ponastavitve običajno vključujejo odstranitev dimenzij, oblazinjenja, robov ali dodatnih slogov, ki znižujejo te vrednosti. Ker kaskadno CSS deluje od vrha do dna (o tem boste izvedeli kmalu) - mora biti naša ponastavitev na samem vrhu našega sloga. To zagotavlja, da se ti slogi najprej preberejo in to je to. različne brskalnike bodo začeli delovati iz skupne referenčne točke.

Na voljo je kup različnih ponastavitev CSS, ki jih lahko uporabite, vse imajo svoje prednosti. Eden najbolj priljubljenih Erica Meyerja, njegova ponastavitev CSS je prilagojena tako, da vključuje nove elemente HTML5.

Če se počutite malo pustolovski, je na voljo tudi Normalize.css, ki ga je ustvaril Nicholas Gallagher. Normalize.css se ne osredotoča na uporabo strojne ponastavitve za vse ključne elemente, temveč na nastavitev skupnih slogov za te elemente. To zahteva globlje razumevanje CSS, pa tudi znanje o tem, kaj bi radi dosegli s slogi.

Združljivost in testiranje med brskalniki

Kot smo že omenili, različni brskalniki različno upodabljajo elemente. Pomembno se je zavedati pomena združljivosti med brskalniki in testiranja. Spletna mesta ne bi smela izgledati popolnoma enako v vseh brskalnikih, vendar bi morala biti blizu. Katere brskalnike želite podpirati in v kakšnem obsegu, se boste morali odločiti glede na to, kaj je najboljše za vaše spletno mesto.

Pri pisanju CSS morate biti pozorni na več stvari. Dobra novica je, da zmorete vse in potrebujete le malo potrpljenja, da to obvladate.

Na praksi

Vrnimo se tja, kjer smo nazadnje končali na našem konferenčnem mestu, in poglejmo, kako lahko dodamo nekaj CSS.

Znotraj naše mape styles-conference ustvarimo novo mapo z imenom sredstva. Tukaj bomo shranili vse vire za naše spletno mesto, kot so slogi, slike, videoposnetki itd. Za naše sloge pojdimo naprej in dodamo še eno mapo s slogi v mapo sredstev.

Z urejevalnikom besedila ustvarimo novo datoteko z imenom main.css in jo shranimo v mapo s slogi, ki smo jo pravkar ustvarili.

Z ogledom datoteke index.html v brskalniku lahko vidimo, da elementi in

Že vsebuje privzeti slog. Zlasti imajo edinstveno velikost pisave in prostor okoli sebe. S ponastavitvijo Erica Meyerja lahko te sloge zmehčamo in omogočimo, da vsak od njih začne na isti osnovi. Če želite to narediti, si oglejte njegovo spletno mesto, kopirajte kodo in jo prilepite na vrh naše datoteke main.css.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licenca: brez (javna domena) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronim, naslov, 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, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100 %; font: inherit; vertical-align: baseline ; ) /* Ponastavitev vloge prikaza HTML5 za starejše brskalnike */ članek, na stran, podrobnosti, figcaption, slika, noga, glava, hgroup, meni, nav, razdelek ( display: block; ) body (line-height: 1; ) ol, ul ( slog seznama: brez; ) blockquote, q ( narekovaji: noben; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- kolaps: kolaps; razmik med robovi: 0; )

Naša datoteka main.css začenja dobivati ​​obliko, zato jo povežimo z datoteko index.html. Odprite index.html v urejevalnik besedil in dodajte element v , takoj za elementom.

Ker na sloge kažemo prek elementa, dodajte atribut rel s tabelo slogov vrednosti.

Vključili bomo tudi povezavo do naše datoteke main.css z uporabo atributa href. Ne pozabite, da je naša datoteka main.css shranjena v mapi slogov, ki se nahaja znotraj mape sredstev. Torej bi morala biti vrednost atributa href, ki je pot do naše datoteke main.css, assets/stylesheets/main.css.

Styles Conference

Čas je, da preverimo naše delo in vidimo, kako naš HTML in CSS delujeta skupaj. Odpiranje datoteke index.html (ali osvežitev strani, če je že odprta) v brskalniku bi moralo pokazati nekoliko drugačen rezultat kot prej.

riž. 1.04. Naše spletno mesto Styles Conference s ponastavitvijo CSS

Demo in izvorna koda

Spodaj si lahko ogledate spletno mesto Styles Conference v njegovem trenutnem stanju in prenesete trenutno izvorno kodo spletnega mesta.

Povzetek

Torej, vse je v redu! V tej vadnici smo naredili nekaj velikih korakov.

Samo pomislite, zdaj poznate osnove HTML in CSS. Ko bomo nadaljevali in boste porabili več časa za pisanje HTML in CSS, vam bo postalo veliko bolj udobno delati s tema dvema jezikoma.

Če povzamemo, obravnavali smo naslednje:

• Razlika med HTML in CSS.
• Uvod v elemente, oznake in atribute HTML.
• Nastavitev strukture vaše prve spletne strani.
• Uvod v izbirnike, lastnosti in vrednosti CSS.
• Delo z izbirniki CSS.
• Kazalec na CSS iz HTML.
• Pomen ponastavitve CSS.

Zdaj pa si podrobneje oglejmo HTML in se nekoliko seznanimo s semantiko.

Viri in povezave

• Pogosti izrazi HTML prek Scripting Master
• Pogoji in definicije CSS prek impresivnih spletov
• Orodja CSS: ponastavite CSS prek Erica Meyerja

Namen dela: seznaniti študente z osnovnimi koncepti jezika HTML, strukturo dokumenta HTML, obveznimi oznakami, komentarji, načini oblikovanja besedila, fizičnimi in logičnimi slogi ter pridobiti veščine izdelave preprostih statičnih spletnih dokumentov.

Pri laboratorijskih urah bomo za pripravo HTML datotek uporabljali urejevalnik besedil Notepad, kot orodje za spremljanje opravljenega pa brskalnik Internet Explorer.

Teoretične informacije

Osnovni pojmi

Hipertekst- informacijska struktura, ki vam omogoča vzpostavitev pomenskih povezav med elementi besedila na računalniškem zaslonu tako, da lahko preprosto prehajate iz enega elementa v drugega. V praksi so v hipertekstu nekatere besede poudarjene tako, da jih podčrtamo ali pobarvamo z drugo barvo (hiperpovezave). Označevanje besede nakazuje povezavo med to besedo in nekim dokumentom, v katerem je podrobneje obravnavana tema, povezana z označeno besedo. Ločen dokument, napisan v formatu HTML, se imenuje:

dokument HTML;

spletni dokument;

Spletna stran.

Takšne strani so običajno v formatu NTM ali HTML.

Skupina spletnih strani, ki pripadajo enemu avtorju ali enemu organu IEDV in so med seboj povezane s skupnimi hiperpovezavami, tvori strukturo, imenovano spletno vozlišče ali spletno mesto. Vsaka stran HTML ima svoj edinstven URL - adstrec na internetu.

Okvir (Okvir) - izraz, ki ima dva pomena. Prva vrednost je področje dokumenta z lastnimi drsnimi trakovi. Druga je slika 0DNN0H v animirani grafični datoteki (okvir).

Programček (Programček) - program, prenesen na odjemalski računalnik v obliki ločena datoteka in se zažene med ogledom spletne strani.

Skript (Skripta) ali skript je program, vključen v spletno stran za razširitev njenih zmogljivosti. V določenih situacijah brskalnik Internet Explorer prikaže sporočilo: »Dovoli izvajanje skripta na strani?« V tem primeru mislimo na skripte.

CGI (Običajni Prehod Vmesnik) - splošno ime za programe, ki pri delu na strežniku omogočajo razširitev zmogljivosti spletnih strani. Brez takih programov je nemogoče ustvariti interaktivne spletne strani.

Brskalnik (Brskalnik) - program za pregledovanje spletnih strani.

Element- Oblikovanje jezika HTML. Lahko si ga predstavljate kot vsebnik, ki hrani podatke in vam omogoča, da jih formatirate na določen način. Vsaka spletna stran je niz elementov. Ena od glavnih idej hiperteksta je možnost gnezdenja elementov. Na primer:

Vsebina elementa, podatki, ki jih element oblikuje

Oznaka(v angleščini tag - oznaka, deskriptor, oznaka) - začetni ali končni označevalec elementa. Oznake določajo meje delovanja elementov in ločujejo elemente drug od drugega. V besedilu spletne strani so oznake v oglatih oklepajih< >, končni oznaki pa vedno sledi poševnica. Besedilo ni med temi oklepaji (< >), je v celoti viden, ko ga gledate v brskalniku. Na primer:

Vsebina elementa, podatki, ki

oblikuje element

To besedilo bo v ločenem odstavku

Vsaka spletna stran je niz elementov. Eno od osnovnih načel HTML je zmožnost ugnezdenja enega elementa v drugega.

Atribut- parameter ali lastnost elementa. Atributi se nahajajo znotraj začetne oznake in so med seboj ločeni s presledki. Če cement vsebuje besedilo, lahko atributi določijo barvo in velikost pisave, poravnavo odstavkov besedila itd. Če element vsebuje sliko, lahko atributi določijo velikost slike, prisotnost in velikost okvirja okoli slike itd.

To besedilo bo poravnano na sredino zaslona

Ta primer ponovno uporablja oznako, ki določa začetek in konec odstavka. Vendar pa začetna oznaka vsebuje atribut poravnave, ki nastavi poravnavo besedila na sredino zaslona.

Opomba:

Kaj koristne informacije mora biti med začetno in končno oznako, ki označujeta njegovo obliko;

Vsi atributi se nahajajo v začetni oznaki;

Za lažjo uporabo lahko začetno oznako napišete z veliko (P) in končno oznako z malo (/p), čeprav to ni potrebno;

Vsi elementi ne zahtevajo končne (zapiralne) oznake;

Vsak nov element začnite pisati z nova vrstica. Zamik ugnezdenih elementov (zavihek). To spet ni potrebno, vendar vam bo zelo olajšalo delo.

Ko prenesete kateri koli dokument iz WWW, je njegovo besedilo v oknu brskalnika prikazano v popolnoma oblikovani obliki, ki jo je enostavno videti. To pomeni, da spletne strani niso običajno besedilo, ampak vsebujejo tudi nekaj pomožnih informacij za nadzor predstavitve dokumenta v oknu brskalnika. Ker pri razvoju dokumenta ni jasno, na kakšnem računalniku si ga bo uporabnik ogledal, spletnih strani ni mogoče pripraviti in shraniti v formatu, razvitem za določeno računalniško platformo, na primer v formatu Microsoft Word za Windows XP. Da bi uporabnik, ki dela na kateri koli vrsti računalnika, videl ustrezno oblikovan dokument, se uporablja jezik HTML, razvit posebej za ta namen.

Kaj pravzaprav je HTML?

Če delate z brskalnikom, izberite menijski ukaz Pogled - Ogled kode HTML (Pogled - Izvor). Na zaslonu se prikaže okno z začetno kodo te strani v HTML.

Bodisi pritisnite CTRL+U

Videz SPLETNIH strani na internetu se pogosto spreminja. A za nas ta trenutek to ni pomembno.

HTML - HyperText Markup Language

HTML – HyperText Markup Language je dokaj pogost niz ukazov, ki opisujejo strukturo dokumenta. Ta označevalni jezik vam omogoča, da označite posamezne logične dele v dokumentu - naslove, odstavke, tabele, sezname itd., vendar ne določa posebnih atributov oblikovanja. Določeno vrsto oblikovanja določi brskalnik sam pri branju dokumenta in brskalnik posebej poskrbi boljši prikaz SPLETNI dokument na vašem zaslonu.

Kot smo že omenili, lahko spletne strani ustvarite s posebnimi urejevalniki, ki samodejno ustvarijo kodo HTML, delo s katero ne zahteva znanja označevalnega jezika. Toda ti programi imajo pogosto omejene zmogljivosti, vsebujejo napake in pogosto ustvarijo slabo kodo HTML, ki ne deluje na vseh platformah. Če torej želite resno obvladati WEB oblikovanje in razumeti principe izdelave WEB dokumentov, brez poznavanja osnov jezika HTML ne gre, še posebej, ker ustvarjanje WEB strani v njem ni prav nič težko. Mogoče je celo lažje kot obvladati program za izdelavo strani HTML.

jezik HTML

Jezik HTML obstaja v več različicah ali specifikacijah. Tako kot različice programskega izdelka so tudi specifikacije oštevilčene: 2.0, 3.0, 3.2, 4.0. Vsaka naslednja specifikacija predstavlja razširitev in dodatek k prejšnji. Uporabili bomo konstrukcije slednjega Specifikacije HTML 4.0, ki so podprti najnovejše različice najpogostejši brskalniki.

Dokument v oknu kode HTML je besedilni dokument v posebnem formatu. Vse datoteke v tem formatu imajo razširitev HTML(.html) ali HTM (.htm). Dokument HTML meša navadno besedilo z označevalnimi elementi, zaprtimi v oglatih oklepajih< и >, Na primer, , , , . Ti označevalni elementi se imenujejo oznake. Oznake so lahko enojne, začetne in zapiralne ter sestavljene iz naslednjih delov v določenem vrstnem redu:

• levi kotni oklepaj.

Tako je začetna oznaka, ki se pojavi na začetku dokumenta HTML in označuje njegov začetek, sestavljena iz imena HTML in dveh kotnih oklepajev< >, oznaka, ki se nahaja na koncu WEB dokumenta, pa poleg označenih delov vsebuje še poševnico / znak, ki pomeni zaključno oznako in označuje konec dokumenta. Oznaka pomeni začetek kode skriptnega programa, integriranega v dokument. Ta oznaka poleg imena skripta vsebuje jezikovni atribut z vrednostjo "vbscript", kar pomeni, da je skript napisan v jeziku vbscript.

V oznakah se lahko uporabljajo samo latinični znaki, v vrednostih atributov pa kateri koli znak. Če so na primer cirilični znaki uporabljeni kot vrednosti atributa, morajo biti v narekovajih, na primer name="Section 1".

Jezik HTML ne razlikuje med velikimi in malimi črkami, zato sta oznaki in enakovredni. Toda leta 2010 je konzorcij w3c, ki je nase prevzel odgovornost, da naredi red na področju specifikacije jezika HTML, v svoji najnovejši različici neusmiljeno svetuje pisanje oznak z majhnimi črkami, z drugimi besedami, pomembne pogoje. Zato bomo v nadaljevanju uporabljali oznake za pisanje z malimi črkami.

Oznake kot osnova html

Večina oznak je seznanjenih: začetni oznaki sledi ustrezna zaključna oznaka, med njima pa je besedilo ali druge oznake, na primer:

Spletna knjigarna Trije koraki

V takih primerih dve oznaki in del dokumenta, ki je med njima, tvorita blok, imenovan element HTML. Nekatere oznake so na primer enojne in nimajo zaključne oznake. Takšne oznake so same po sebi elementi HTML.

Večina oznak ima lahko enega ali več atributov – lastnosti, ki nudijo dodatne informacije o tem, kako naj brskalnik obdela trenutno oznako. Toda atributov morda sploh ni. Atribut oznake je sestavljen iz imena, na primer align, enačaja = in vrednosti, ki je podana z nizom znakov, na primer "center": align="center". Vrednosti atributov so običajno v narekovajih. Če pa te vrednosti uporabljajo samo latinične znake, številke in vezaje, potem lahko narekovaje izpustite, na primer: align=center. Toda izpuščanje narekovajev strogo ni priporočljivo zaradi številnih okoliščin, povezanih s prihajajočo integracijo HTML z JavaScriptom in jeziki. Zato se navadite takoj pisati atribute v narekovajih.

Struktura dokumenta HTML

Vsak dokument HTML ima specifično strukturo, ki je videti takole:

…

Struktura dokumenta HTML vsebuje naslednje bistvene elemente:

• oznake in , ki označujeta začetek in konec dokumenta;
• glava, ločena z in ;
• telo, omejeno z oznakami...

Naslov, razmejen z oznakama in , uporablja oznake ... za določitev naslova dokumenta, ki mora orisovati njegovo vsebino in običajno vsebuje manj kot 5-6 besed. Ta naslov prikažejo brskalniki v naslovni vrstici delovnega okna programa, roboti, ki sestavljajo indekse za iskalnike, pa prepoznajo dokument po njegovem naslovu.

Poleg elementa ... lahko glava vsebuje elemente ..., na primer za označevanje informacij o dokumentu. Začetna oznaka vključuje pare ime=vrednost, ki opisujejo značilnosti dokumenta, na primer vrsto dokumenta, njegovo šifriranje, avtorstvo, seznam ključnih besed, ... Te podatke uporabljajo tudi iskalniki pri indeksiranju dokumentov.

HTML (HyperText Markup Language) je poseben jezik za oblikovanje besedilni dokumenti(imenuje se tudi označevalni jezik dokumentov - WWW pregledovalnik dokumentov). HTML je dokaj preprost niz ukazov, ki opisujejo strukturo dokumenta. HTML vam omogoča, da v besedilu označite posamezne logične dele (naslove, odstavke, sezname itd.), na spletno stran postavite ločeno pripravljeno fotografijo ali sliko in na strani organizirate povezave za komunikacijo z drugimi dokumenti.

HTML ne določa posebnih in natančnih atributov za oblikovanje dokumenta, kot to počne na primer Microsoft Word. Konkretno vrsto dokumenta na koncu določi samo program - brskalnik na vašem računalniku. Potreba po prav takšnem pristopu je povezana z heterogenostjo strojne opreme in programsko opremo računalniki povezani z internetom. HTML tudi ni programski jezik, vendar lahko spletne strani vključujejo vdelane programe - skripte na jeziki Javascript in Visual basic Skripta in programi - programčki v jeziku Java.

Z vidika Uporabnik sistema Windows, Spletna stran je preprosto datoteka *.htm ali *.html, ki se nahaja na internetnem strežniku v lokalno omrežje ali na trdem disku vaše naprave.

Ne pozabite, da HTML ni programski jezik, namenjen je le označevanju dokumentov. Tisti. v bistvu ustvarjanje stran HTML, preprosto urejate besedilo z uporabo oznak na približno enak način kot v običajnem urejevalniku besedil. Vsaka oznaka ima svojo lastnost, vendar so vse zaprte med oglatimi oklepaji "", na primer, , .

Vse oznake v HTML so razdeljene na dve vrsti - seznanjene in neparne. Seznanjene oznake so tiste, katerih začetna oznaka zahteva zaključno oznako. Zaključne oznake v HTML so označene s poševnico in zapisane takole. Neparne oznake ne zahtevajo zaključne oznake. Primer takih oznak je oznaka za prelom v naslednjo vrstico
. Obstajajo tudi obvezne oznake, ki jih je treba uporabiti na vseh straneh, in neobvezne oznake, ki se uporabljajo po želji.