Spletna stran html je. Izdelava spletnih strani. Učenje jezika HTML. Elementi spletne strani: glava

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

Kaj je HTML in CSS?

HTML (HyperText Markup Language) definira strukturo vsebine in njen pomen tako, da definira tako vsebino, kot so na primer naslovi, odstavki ali slike. CSS (Cascading Style Sheets) ali Cascading Style Sheets je predstavitveni jezik, zasnovan za oblikovanje videza vsebine z uporabo, na primer, pisav ali barv.

Ta dva jezika, HTML in CSS, sta neodvisna drug od drugega in takšna morata 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 njen slog.

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

Osnovni izrazi HTML

Preden začnete delati s HTML, boste verjetno naleteli na nove in pogosto čudne izraze. Sčasoma jih boste vse podrobneje spoznali, za 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 z

prej

) in odstavkov (opredeljenih kot

); elementov je mogoče dodati na seznam ,

, , in in mnogi drugi.

Elementi so označeni z oglatimi oklepaji<>, ki obdaja 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

.

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

.

Vsebina med začetno in končno 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 bi oznake povezav izgledale nekako takole:

...

Lastnosti

Atributi so lastnosti, ki se uporabljajo za zagotavljanje Dodatne informacije 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 bi izgledal 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 začetno oznako in zaključno oznako obdajajoče besedilo, kot tudi atribut in vrednost naslova povezave, deklarirane s href="http://shayhowe.com" v začetni oznaki.

riž. 1.01. Sintaksa HTML sheme vključuje element, atribut in oznako

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

Prilagajanje strukture dokumenta HTML

Dokumenti HTML so dokumenti z navadnim besedilom, shranjeni s končnico .html namesto .txt. Če želite začeti pisati HTML, morate najprej urejevalnik besedil kar vam je priročno za uporabo. 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 Sublime Text. Brezplačne alternative Glejte tudi Notepad++ za Windows in TextWrangler za Mac.

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

Izjava o vrsti dokumenta oznahaja se na samem začetku dokumenta HTML in brskalnikom pove, katera različica HTML je v uporabi. Ker bomo uporabljali Najnovejša različica HTML, bo naša vrsta dokumenta preprosto. Za tem pride element ki označuje začetek dokumenta.

V notranjosti element določa vrh dokumenta, vključno z različnimi metapodatki (spremljevalne informacije o strani). Vsebina znotraj elementa se ne pojavi 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 katere koli druge uporabne metapodatke.

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

Pozdravljen, svet!

Pozdravljen, svet!

To je spletna stran.



Prikaz strukture dokumenta HTML

Ta koda prikazuje dokument, začenši z deklaracijo vrste dokumenta,, ki mu takoj sledi element . V notranjosti go elementi in . Element vsebuje kodiranje strani prek oznake in naslov dokumenta prek elementa . Element <body>vključuje glavo prek elementa <h1>in odstavek besedila skozi<р>. Ker sta tako naslov kot odstavek ugnezdena znotraj elementa <body>, so vidni na spletni strani.</p><p>Ko je element znotraj drugega elementa, znan tudi kot ugnezdeni element, je dobro, da mu dodate oblazinjenje, da bo struktura dokumenta dobro organizirana in berljiva. V prejšnji kodi oba elementa <head>in <body>ugnezdeni in premaknjeni znotraj elementa <html>. Struktura oblazinjenja za elemente se nadaljuje z novimi dodanimi elementi v notranjosti <head>in <body> .</p><h3>Samozapiralni elementi</h3><p>V prejšnjem primeru je element <meta>je bila edina oznaka, ki ni vključevala zaključne oznake. Ne skrbite, to je bilo storjeno namenoma. Vsi elementi niso sestavljeni iz odpiralnih in zapiralnih oznak. Nekateri elementi preprosto prejmejo vsebino ali vedenje prek atributov znotraj iste oznake. <meta>je eden od teh elementov. Vsebina elementa <meta>v primeru je dodeljen z uporabo atributa in vrednosti nabora znakov. Drugi tipični samozapiralni elementi vključujejo:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Ulita struktura, izdelana z deklaracijo vrste dokumenta<!DOCTYPE html>in elementi <html> , <head>in <body>, je dokaj pogosta. To strukturo dokumenta želimo ohraniti priročno, saj jo bomo pogosto uporabljali pri ustvarjanju novih dokumentov HTML.</p><h3>Validacija kode</h3><p>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. Preverjanje naše kode nam ne samo pomaga pri pravilnem upodabljanju v vseh brskalnikih, temveč nam pomaga tudi pri učenju najboljših praks pri pisanju kode.</p><h2>Na praksi</h2><p>Kot spletni oblikovalci in front-end razvijalci imamo razkošje, da se udeležujemo številnih odličnih konferenc, posvečenih naši obrti. Med naslednjimi učnimi urami bomo organizirali lastno Styles Conference in zanjo ustvarili spletno stran. Všečkaj to!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Preklopimo malo, odmaknimo se 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.</p><h2>Osnovni pogoji CSS</h2><p>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 vam ti izrazi postajajo druga narava.</p><h3>Selektorji</h3><p>Ko dodajate elemente na spletno stran, jih lahko oblikujete s CSS. Izbirnik določa, na kateri element ali elemente v HTML ciljati, in zanje 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.</p><p>Izbirniki so običajno povezani z vrednostjo atributa, kot je ID ali vrednost razreda, ali ime elementa, kot je <h1>oz<р> .</p><p>V CSS so izbirniki povezani z zavitimi oklepaji (), ki obdajajo sloge, uporabljene za izbrani element. Ta izbirnik cilja na vse elemente <span><p>P(...)</p><h3>Lastnosti</h3><p>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 <span><p>P ( barva: ...; velikost pisave: ...; )</p><h3>Vrednote</h3><p>Doslej smo le izbrali element skozi izbirnik in skozi lastnosti določili, kakšen slog mu želimo uporabiti. 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 <p >In nastavite vrednost lastnosti barve na oranžno in vrednost lastnosti velikosti pisave na 16 slikovnih pik.</p><p>P (barva: oranžna; velikost pisave: 16px; )</p><p>Če želite preizkusiti, se v CSS naš niz pravil začne z izbirnikom, ki mu takoj sledijo zaviti oklepaji. Znotraj teh zavitih oklepajev so 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.</p><p>Običajna praksa je premik para lastnosti in vrednosti znotraj zavitih oklepajev. Kot pri HTML, zamik pomaga ohranjati našo kodo organizirano in jasno.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>riž. 1.03. Sintaksna struktura CSS vključuje izbirnik, lastnosti in vrednosti</p><p>Poznavanje nekaj osnovnih izrazov in splošne sintakse CSS je odličen začetek, vendar se moramo naučiti še nekaj točk, preden skočimo v globino. Še posebej si moramo podrobneje ogledati, kako izbirniki delujejo v CSS.</p><h2>Delo s selektorji</h2><p>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 <a href="https://5visa.ru/sl/obrazovanie/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">različne vrste</a> selektorji. Začeli bomo z najosnovnejšimi izbirniki: izbirniki tipov, razredi in identifikatorji.</p><h3>Izbirniki vrst</h3><p>Izbirniki vrst ciljajo na elemente glede na njihovo vrsto. Na primer, če želimo ciljati na vse elemente <div>moramo uporabiti izbirnik div. Naslednja koda prikazuje izbirnik vrste za elemente <div>, kot tudi ustrezen HTML.</p><p>Div (...)</p><p> <div>...</div> <div>...</div> </p><h3>Razredi</h3><p>Razredi vam omogočajo, da izberete element na podlagi vrednosti atributa razreda. Izbirniki razreda so nekoliko bolj specifični kot izbirniki vrst, saj izberejo določeno skupino elementov in ne vseh elementov istega tipa.</p><p>Razredi vam omogočajo uporabo istega sloga za več elementov hkrati z uporabo iste vrednosti atributa razreda za več elementov.</p><p>V CSS so razredi označeni z začetno piko, ki ji sledi vrednost atributa razreda. Spodnji izbirnik razreda izbere vse elemente, ki vsebujejo vrednost atributa super razreda, vključno z elementi <div>in <span><p>Čudovito (...)</p><p> <div class="awesome">...</div> </p><h3>Identifikatorji</h3><p>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 kot izbirnik uporabljajo vrednost atributa id.</p><p>Ne glede na vrsto elementa, ki se upodablja, je vrednost atributa id mogoče uporabiti samo enkrat na stran. Če so ID-ji prisotni, morajo biti rezervirani za pomembne elemente.</p><p>V CSS so identifikatorji označeni s simbolom zgoščene spredaj, ki mu sledi vrednost atributa id. Tukaj bo id izbral samo element, ki vsebuje atribut id z vrednostjo shayhowe.</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Dodatni izbirniki</h3><p>Selektorji so izjemno močni in zgoraj opisani so med najpogostejšimi selektorji, ki jih srečamo. Ti selektorji so šele začetek. Obstaja veliko naprednih izbirnikov in so na voljo. Ko se boste z njimi počutili udobno, se ne bojte pogledati tudi nekaterih naprednejših.</p><p>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 CSS. Zdaj pa povežimo pike med HTML in CSS, da bosta oba jezika delovala skupaj.</p><h2>CSS povezava</h2><p>Da bi naš CSS govoril z našim HTML-jem, moramo pokazati na datoteko CSS iz HTML-ja. Dobra praksa je, da vse naše sloge vključite v eno zunanjo datoteko, na katero kaže znotraj elementa. <head>naš dokument HTML. Uporaba enega zunanjega CSS-ja nam omogoča, da uporabimo iste sloge na celotnem spletnem mestu in ga hitro spremenimo.</p><h3>Druge možnosti za dodajanje CSS</h3><p>Druge možnosti za vključitev CSS vključujejo uporabo vstavljenih in vstavljenih slogov. Te možnosti lahko vidite v resničnem življenju, vendar se nanje na splošno ne odzivajo, saj so zaradi njih posodobitve spletnih mest okorne in okorne.</p><p>Če želimo ustvariti našo zunanjo slogovno datoteko, ponovno želimo uporabiti izbrani urejevalnik besedila za ustvarjanje novega. <a href="https://5visa.ru/sl/ustanovka-i-nastrojjka/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">besedilna datoteka</a> s pripono .css. Naša datoteka CSS mora biti shranjena v isti mapi ali podmapi kot naša datoteka HTML.</p><p>Znotraj elementa <head>uporabljeni element <link>, 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 do datoteke CSS.</p><p>V naslednjem primeru dokumenta HTML je element <head>kaže na zunanjo slogovno datoteko.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Za pravilno upodabljanje CSS se mora vrednost poti atributa href neposredno ujemati s mestom, kjer je shranjena datoteka CSS. V prejšnjem primeru je datoteka main.css shranjena na istem mestu kot datoteka HTML, znana tudi kot korenska mapa.</p><p>Č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. Tukaj se poševnica (ali poševnica) uporablja za označevanje premika v podmapo.</p><p>Vklopljeno <a href="https://5visa.ru/sl/proshivka/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">ta trenutek</a> 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 enostavno preglasimo, kar bomo storili naslednjič s ponastavitvijo CSS.</p><h2>Uporaba ponastavitve CSS</h2><p>Vsak brskalnik ima svoje privzete sloge za <a href="https://5visa.ru/sl/problemy/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">različne elemente</a>. kako <a href="https://5visa.ru/sl/navigatory/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">Google Chrome</a> prikazuje naslove, odstavke, sezname itd., se lahko razlikuje od načina prikaza <a href="https://5visa.ru/sl/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">internet Explorer</a>. Ponastavitev CSS se pogosto uporablja za zagotavljanje združljivosti med brskalniki.</p><p>Ponastavi CSS vzame vse osnovne elemente HTML z danim slogom in zagotavlja dosleden slog v vseh brskalnikih. Te ponastavitve običajno vključujejo odstranjevanje velikosti, oblazinjenja, robov ali dodatnih slogov za znižanje teh vrednosti. Ker kaskadno CSS deluje od zgoraj navzdol (več o tem kmalu) - mora biti naša ponastavitev na samem vrhu našega sloga. To zagotavlja, da se ti slogi najprej preberejo in to je to. <a href="https://5visa.ru/sl/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">različne brskalnike</a> bo deloval iz skupne referenčne točke.</p><p>Na voljo je kup različnih ponastavitev CSS, ki jih lahko uporabite, vse imajo svoje <a href="https://5visa.ru/sl/sovety/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">prednosti</a>. Eden najbolj priljubljenih Erica Meyerja, njegova ponastavitev CSS je prilagojena tako, da vključuje nove elemente HTML5.</p><p>Če ste malo pustolovski, je na voljo tudi Normalize.css Nicholasa Gallagherja. Normalize.css se ne osredotoča na uporabo strojne ponastavitve za vse glavne elemente, temveč na nastavitev skupnih slogov za te elemente. To zahteva globlje razumevanje CSS, pa tudi vedeti, kaj želite od slogov.</p><h3>Združljivost med brskalniki in testiranje</h3><p>Kot smo že omenili, različni brskalniki različno upodabljajo elemente. Pomembno se je zavedati vrednosti združljivosti med brskalniki in testiranja. Ni nujno, da so spletna mesta videti povsem enako v vseh brskalnikih, vendar morajo 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.</p><p>Pri pisanju CSS je treba upoštevati nekaj stvari. Dobra novica je, da je izvedljivo in da je za obvladovanje potrebno malo potrpljenja.</p><h2>Na praksi</h2><p>Vrnimo se tja, kjer smo nazadnje končali na našem konferenčnem mestu, in poglejmo, kako lahko dodamo nekaj CSS.</p><ol><li>Znotraj naše mape styles-conference ustvarimo novo mapo z imenom sredstva. Tukaj bomo shranili vsa sredstva 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 s sredstvi.</li><li>Z urejevalnikom besedila ustvarite novo datoteko z imenom main.css in jo shranite v mapo s slogi, ki smo jo pravkar ustvarili.</li><p>Če pogledamo datoteko index.html v brskalniku, lahko vidimo, da elementi <h1>in <p>Ž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.</p><p>/* 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:c ollapse; razmik med robovi: 0; )</p><li>Naša datoteka main.css začenja dobivati ​​obliko, zato jo vključimo v datoteko index.html. Odprite index.html v urejevalniku besedila in dodajte element <link>V <head>, takoj za elementom <title> .</li><li>Ker skozi element usmerjamo sloge <link>dodajte atribut rel z vrednostjo stylesheet.</li><p>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.</p><p> <head> <meta charset="utf-8"> <title>Styles Conference

Čas je, da preizkusimo svoje delo in vidimo, kako se naš HTML in CSS ujameta. 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 stran Styles Conference v njenem trenutnem stanju in jo tudi prenesete vir mesto v tem trenutku.

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.

Spomnimo se, da smo upoštevali 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 nekoliko spoznajmo semantiko.

Viri in povezave

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

Večino vsebine na internetu predstavljajo spletne strani. To je zgodovinsko prva vrsta dokumentov, namenjena umestitvi v virtualni omrežni prostor, vendar še vedno ohranja svojo relevantnost in praktično nima konkurenčnih formatov. Kakšna je struktura spletnih strani? Katera orodja za spletni razvoj se uporabljajo za njihovo ustvarjanje?

Kaj je spletna stran?

»Naštejte osnovne elemente spletne strani,« nam pove izpraševalec pri uri računalništva. Kaj mu lahko odgovorimo? Najprej se pogovorimo o tem, kaj spletna stran sploh je.

Po definiciji, ki je splošno sprejeta med informatiki, je to dokument, ki je namenjen odpiranju v specializiranem programu - brskalniku in vsebuje podatke za prikaz različnih uporabnih vsebin na računalniškem zaslonu z uporabo ustrezne vrste programske opreme - besedila, povezave, grafike, videi, glasba itd. itd. Spletna stran je besedilni dokument. Pomembni podatki za brskalnik so črke, številke in Posebni simboli, ki se uporabljajo kot elementi označevalnega jezika - HTML. S pomočjo njega ustvarjalec spletne strani »razloži« brskalniku, kako naj na zaslonu prikaže to ali ono vsebino.

Mesto in vloga spletnih strani v strukturi spletnih mest

Ali lahko rečemo, da je spletna stran glavni sestavni del spletne strani? To je deloma res. Vendar, kot smo omenili zgoraj, je spletna stran le besedilni dokument. Stran praviloma vsebuje tudi slike, videe in druge multimedijske elemente. Spletna stran jih ne more vsebovati, lahko pa v svoji strukturi vsebuje povezave do njih. Tako lahko spletno stran imenujemo glavni sestavni del spletnega mesta v smislu vodilne vloge pri prikazovanju virtualne vsebine uporabnikom.

V redkih primerih bo zadevni dokument seveda edina komponenta spletnega mesta - če iz nekega razloga ne omogoča prikaza grafike, videa in drugih multimedijskih elementov. Zlasti prva spletna mesta - ko so se prvič pojavili označevalni jeziki spletnih strani - niso vključevala ustrezne vsebine. Pred očmi uporabnika je bilo samo besedilo in povezave.

Načelo uporabe hiperteksta

Spletna stran je torej dokument, sestavljen v jezik HTML, ki se uporablja za označevanje hiperbesedila. Toda kaj je ta pojav? Kaj je hipertekst? Ne da bi se preveč poglabljali v teorijo, ugotavljamo, da gre za besedilo, ki tako ali drugače omogoča, da hiter dostop drugemu prek povezav. V običajni knjigi je to nemogoče - obstaja "golo besedilo". Za dostop do želene strani se mora bralec večkrat obrniti, potem ko je predhodno prebral vsebino ali opombe. V načinu "hiperteksta" glavni del dela opravi računalnik - zaradi informacij, ki se odražajo v elementih HTML strani.

Če nam učitelj računalništva reče »Naštej glavne elemente spletne strani«, potem lahko pravilno začnemo govoriti o komponentah ustreznega dokumenta, ki so ustvarjeni z uporabo označevalnega jezika HTML. Zato si za začetek poglejmo nekaj teoretičnih točk v zvezi s HTML.

Struktura jezika HTML: oznake

Kako brskalnik prebere potrebne podatke o spletni strani iz dokumenta HTML? Zelo preprosto.

Bistveni elementi danem jeziku so oznake. V večini primerov so seznanjeni - obstaja uvodni in zaključni. Prve so označene samo z oglatimi oklepaji. Drugi so podobni, vendar je pred drugim oklepajem poševnica - simbol /. Brskalnik jih lahko prepozna in zato brez težav prikaže vsebino spletnih strani v skladu z algoritmi, ki jih ustvari razvijalec dokumenta.

Začetni tag je običajno napisan z velikimi črkami, zaključni tag pa z malimi črkami. To je standard, ki se je uveljavil med IT strokovnjaki. Brskalnik bo zagotovo prepoznal ukaz HTML v poljubnih črkah, a spletnim razvijalcem vseeno svetujemo, da se držijo označene sheme pisanja oznak. To bo na primer olajšalo dokončanje spletne strani drugim strokovnjakom.

Lastnosti

Drugi pomembni elementi jezika HTML so atributi. Z njihovo pomočjo lahko ustvarjalec spletne strani nastavi lastnosti vsebine - na primer višino pisave, barvo, položaj glede na stran. Enako velja za slike, videe in druge multimedijske komponente. Atributi so zapisani znotraj začetne oznake.

Vsebina

Med začetno in zapiralno oznako je naslednja ključna komponenta spletne strani, vsebina. Pravzaprav je to tista vsebina, ki bi se morala uporabniku prikazati na zaslonu. Lahko je besedilo, povezava, slika, video ali drug multimedijski element.

Elementi spletne strani

"Torej končno navedite osnovne elemente spletne strani!" - ponovi učiteljica. »Z veseljem,« mu odgovorimo. Kaj je vključeno v strukturo obravnavane vrste dokumentov? Dogovorimo se, da bomo ta vidik obravnavali v kontekstu elementov HTML spletne strani. To pomeni, da nas bo njihov prikaz v brskalniku - kaj uporabnik vidi na zaslonu - zanimal v manjši meri. Dejstvo je, da so ustrezni algoritmi HTML, na podlagi katerih program prikazuje vsebino na enak način, lahko različni. In to je posebnost jezika HTML: na spletni strani se lahko prikaže želena slika različne poti. Hkrati so lahko enakovredne glede stroškov dela ustvarjalca spletne strani ali pa zahtevajo različno količino truda in časa za njihovo izvedbo.

Elementi spletne strani: glava

Standardni elementi spletne strani so, čeprav se sliši presenetljivo, prisotni v zelo majhnem številu. Pravzaprav sta samo dva - naslov in telo dokumenta. Vendar ima lahko vsak od njih precej zapleteno strukturo.

Kakšne so posebnosti glave? Nahaja se na samem vrhu spletne strani. HTML, ki generira naslov, običajno predvideva, da je "šifrirano" samo besedilo, po potrebi pa se lahko v ustrezni element vnesejo tudi majhni grafični vstavki. In to je pravzaprav vse, kar lahko rečemo o naslovu. Zdi se, da je njegova vloga v strukturi ustreznega dokumenta nepomembna. Ampak ni. Naslovi spletnih strani so zelo pomembni pri indeksiranju spletnih mest v iskalnikih - Yandex, Google. Ta element mora v celoti ustrezati vsebini spletne strani in tudi tematskim posebnostim strani.

Kako je naslov spletne strani zajet s HTML? Zelo preprosto. Najprej se napiše začetna oznaka, ki vedno izgleda kot GLAVA z oglatimi oklepaji, nato vsebina naslova, za tem pa zaključna oznaka. Zapisani so seveda na samem vrhu spletnega dokumenta.

Naslov spletnega dokumenta lahko vključuje številne dodatne elemente. Včasih oblika spletne strani zahteva, da je besedilo prikazano v določenem kodiranju. Kako zagotoviti, da spletni dokument izpolnjuje ta kriterij? Zelo preprosto. Struktura glave dokumenta mora vsebovati algoritme HTML, ki brskalniku naročijo uporabo določenega jezikovnega kodiranja - na primer cirilice. Ustrezni ukazi so postavljeni znotraj META oznake, ki je tako kot drugi lahko odpiralna in zapiralna.

Glavni del spletne strani

Glavno telo spletnega dokumenta se odpre z oznako BODY in zapre z ustreznim elementom, ki vključuje poševnico. Hkrati je lahko med začetnimi in končnimi oznakami ogromno dodatnih ukazov označevalnega jezika hiperteksta. To je posledica dejstva, da glavni del spletne strani vsebuje njeno uporabno vsebino - besedila, povezave, grafike, videe, različne obrazce za izpolnjevanje.

Vsaka od ustreznih vrst vsebine ima svoje oznake. Struktura glavnega dela spletnega dokumenta lahko vsebuje ukaze HTML, ki jih je mogoče uporabiti tudi za oblikovanje besedila, na primer za dajanje pisavi določene barve, velikosti in drugih lastnosti.

Oglejmo si posebnosti nekaterih pogosto uporabljenih oznak HTML. Pravzaprav tvorijo tudi glavne elemente spletne strani.

Osnovne oznake HTML

Torej, da bi podrobno preučili, kaj so elementi spletne strani, podrobneje preučimo bistvo osnovnih oznak HTML. Nekatere smo že našteli zgoraj - zlasti tiste, s katerimi brskalnik bere glave spletnih strani in določa, kje se nahaja glavnina dokumenta.

Precej pogosta je oznaka P. Tako kot drugi podobni elementi označevalnega jezika hiperbesedila je lahko odpirajoča in zapirajoča. Ta oznaka vam omogoča oblikovanje posameznega odstavka dokumenta. Zanj lahko na primer nastavite določeno vrsto pisave ali barvo. Vendar se to naredi s pomočjo dodatne oznake - FONT. Hkrati bo postavljen znotraj tistega, ki označuje meje odstavka - to vam bo omogočilo, da ukaza HTML, ki odraža želeno vrsto pisave, ne boste posredovali drugim elementom spletne strani.

Tabele so izdelane z uporabo oznake TABLE. Z ustreznimi atributi lahko določite potrebno število stolpcev in vrstic, nastavite njihovo širino, posebnosti obrob, velikost in barvo pisave besedila v tabeli.

Odgovoren za obdelavo slik v brskalniku. Vanj lahko postavite tudi različne atribute, ki uravnavajo velikost slike, njen položaj na strani.

Povezave do drugih spletnih dokumentov ali datotek so označene z oznako A. V njej se praviloma nahajajo atributi, ki označujejo, da je struktura spletne strani hiperpovezava. To označuje dokument, datoteko ali mesto, do katerega vodi.

Pogosta oznaka je FRAMESET. Z njim lahko prostor spletne strani razdelite na več območij – okvirjev. V vsakem od njih je mogoče ločiti spletne dokumente. To pomeni, da okvirji omogočajo pravilno namestitev dveh ali več strani na isti zaslon hkrati.

Zgodba o ključnih elementih spletnih strani in kasnejša zgodba o načinih oblikovanja le-teh z uporabo jezika HTML - nekako takšen bo algoritem našega odgovora na vprašanje, ki nam ga je zastavil izpraševalec. Če nas je kontaktiral z besedami "navedite glavne elemente spletne strani", potem bomo z ustrezno metodologijo imeli vse možnosti, da razkrijemo temo. To pomeni, da lahko pod izrazom "elementi" razumemo ključne sestavine strukture spletnega dokumenta ali vrste vsebine - besedilo, slike, tabele, okvirje, povezave, ki jih spletni skrbnik oblikuje z orodjem, kot je jezik HTML.

Posebnosti orodij za spletni razvoj

Poleg tega, kar je bilo povedano, lahko pojasnimo, da obstaja ogromno oznak in atributov, ki jih zagotavljajo standardi HTML. Poleg HTML lahko spletni razvijalci uporabljajo dodatna orodja za oblikovanje hiperbesedilnih dokumentov. Na primer, z JavaScript lahko ustvarite dinamične spletne strani - torej tiste, na katerih se vsebina nenehno posodablja (tako zaradi dejanj samega uporabnika kot v skladu z algoritmi, ki so vnaprej napisani v skriptih).

Koristno bi bilo dodati, da lahko spletni razvijalec pri svojem delu uporablja polnopravne programske jezike, kot so na primer Perl, PHP, Java, Python, s pomočjo katerih postanejo možnosti dela s hiperbesedilnimi dokumenti še širše. Potreba po tem je morda posledica dejstva, da so področja uporabe spletnih tehnologij danes zelo različna. Naloge, s katerimi se soočajo sodobni razvijalci, so lahko precej zapletene. Včasih je na primer potrebno prevesti spletne strani, napisane v ruščini, v angleščino. V tem primeru bo nabor orodij razvijalca najbolj raznolik.

Cilj dela: seznanitev študentov z osnovnimi koncepti jezika HTML, strukturo dokumenta HTML, obveznimi oznakami, komentarji, načini oblikovanja besedila, fizičnimi in logičnimi slogi ter pridobitev veščin izdelave preprostih statičnih spletnih dokumentov.

Pri vajah 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 odnosov med besedilnimi elementi na računalniškem zaslonu tako, da lahko preprosto prehajate iz enega elementa v drugega. V praksi so v hipertekstu nekatere besede poudarjene s podčrtanjem ali barvanjem z drugo barvo (hiperpovezave). Označevanje besede kaže na prisotnost povezave te besede z nekim dokumentom, v katerem je tema, povezana z označeno besedo, podrobneje obravnavana. Posamezen dokument HTML se imenuje:

dokument HTML;

Spletni dokument

Spletna stran.

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

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

Okvir (okvir) je izraz z dvema pomenoma. Prva vrednost je območje dokumenta s svojimi drsnimi trakovi. Druga je slika 0DNN0H v grafični datoteki animacije (okvir).

Programček (programček) - program, ki se prenese na odjemalski računalnik kot ločena datoteka in se zažene ob ogledu spletne strani.

Skript (Skripta) ali skript je program, vključen v spletno stran za izboljšanje njenih zmogljivosti. Brskalnik Internet Explorer v določenih situacijah prikaže sporočilo: "Dovoli skripte na strani?". V tem primeru so mišljene skripte.

CGI (Običajni Prehod Vmesnik) - splošno ime programov, 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 ogledovanje spletnih strani.

Element- konstrukcija jezika HTML. Lahko si ga predstavljate kot vsebnik, ki vsebuje 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 zmožnost ugnezdenja elementov. Na primer:

<Начало элемента>Vsebina elementa, podatki, ki jih element oblikuje

Oznaka(v angleščini tag - oznaka, deskriptor, oznaka) - začetna ali končna oznaka elementa. Oznake določajo obseg 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, ki ni med temi oklepaji (< >) je viden v celoti, 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 nastavijo barvo in velikost pisave, poravnavo odstavek besedila in tako naprej. Če element vsebuje sliko, lahko atributi nastavijo velikost slike, prisotnost in velikost okvirja okoli slike itd.

<Р align="center">To besedilo bo poravnano na sredino zaslona

V tem primeru spet obstaja oznaka, ki določa začetek in konec odstavka. Vendar pa začetna oznaka vsebuje atribut align, ki nastavi poravnavo besedila na sredino zaslona.

Opomba:

Vse koristne informacije morajo biti med začetnimi in končnimi oznakami, ki označujejo njihovo obliko;

Vsi atributi se nahajajo v začetni oznaki;

Zaradi priročnosti lahko začetno oznako napišete z veliko (P) in končno oznako z malo (malo) črko (/p), čeprav to ni potrebno;

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

Vsak nov element začnite pisati v novo vrstico. Ugnezdeni elementi so zamaknjeni (zavihek). Tudi to ni obvezno, vendar vam bo zelo olajšalo delo.

Spletna stran je posebej oblikovan dokument, ki lahko vključuje besedilo, grafiko, hiperpovezave, zvok, animacijo in video.

Več spletnih strani, ki imajo skupno temo, obliko in povezave ter se običajno nahajajo na istem spletnem strežniku, tvorijo spletno stran.

Spletno mesto ait (iz angl. Spletna stran: splet- "splet, omrežje" in mesto- "mesto", dobesedno "kraj, segment, del v omrežju") - niz elektronske dokumente(datoteke) posameznika ali organizacije v računalniško omrežje, združenih pod enim naslovom (ime domene ali naslov IP).

Vse strani skupaj sestavljajosvetovni splet, kjer komunikacija (splet) združuje segmente informacij svetovne skupnosti v enotno celoto - podatkovno bazo in komunikacije na planetarni ravni. Za neposreden dostop strank do strani na strežnikih je bil posebej razvit protokol HTTP .

Spletno mesto je strukturirano kot revija, ki vsebuje informacije o temi ali vprašanju. Tako kot je revija sestavljena iz natisnjenih strani, je spletno mesto sestavljeno iz računalniško ustvarjenih spletnih strani.

Program, ki prikaže spletno stran, se imenuje spletni brskalnik.

Izdelava spletnih mest se izvaja z uporabo označevalnega jezika hiperbesedilnih dokumentov HTML. Tehnologija HTML je, da se kontrolni znaki (oznake) vstavijo v dokument z navadnim besedilom in kot rezultat dobimo spletno stran. Brskalnik, ko naloži spletno stran, jo prikaže na zaslonu v obliki, ki jo določajo oznake.

HTML omogoča:

Oblikovanje besedila

vključite slike, večpredstavnost v dokument;

Ta jezik ustvarja hiperbesedilne povezave do drugih spletnih strani.

HTML se uporablja za ustvarjanje informacijske vsebine datoteke ter za definiranje strukture in formata spletnih strani. Ker so datoteke HTML datoteke z navadnim besedilom, je takšno datoteko mogoče poslati v skoraj vsak računalnik.

Za ustvarjanje spletnih strani se uporabljajo preprosti urejevalniki besedila, ki v ustvarjenem dokumentu ne vključujejo kontrolnih znakov za oblikovanje besedila. Kot tak urejevalnik v sistemu Windows lahko uporabite standardna aplikacija"Beležnica".

Običajno ima datoteka spletne strani pripono .html ali .htm.

Poleg tega obstaja veliko tehnologij, v katerih so glavni koraki za ustvarjanje spletnih mest že avtomatizirani, ostanejo le spremembe v skladu z njihovo vsebino.

Ogled strani HTML je tako preprost kot vnos njenega URL-ja v naslovno vrstico spletnega brskalnika in nato sledenje hiperpovezavam. Toda ravno to je glavni problem - kako ugotoviti naslov strani? Najpogosteje se zgodi, da veste, kaj morate najti, vendar ne veste točno, kje iskati. Za rešitev tega problema obstajajo posebni iskalniki. Z vidika uporabnika, iskalni sistem je navadna stran domača stran ki vsebuje povezave do drugih spletnih mest, razdeljenih po naslovih (»Šport«, »Posel«, »Računalniki« itd.). Poleg tega iskalnik uporabniku omogoča vnos več ključnih besed in vrne povezave do strani, ki vsebujejo te ključne besede.

Spletna stran

Spletna stran (angl. Spletna stran, iz web - splet in stran - "kraj") - niz dokumentov zasebne osebe ali organizacije, združenih pod enim naslovom v računalniškem omrežju. Privzeto se domneva, da se spletno mesto nahaja v internetu. Vse internetne strani skupaj sestavljajo svetovni splet. Protokol HTTP je bil zasnovan posebej za neposreden dostop strank do spletnih mest na strežnikih. Spletna mesta so sicer znana kot internetna predstavitev osebe ali organizacije. Ko rečejo "svoja stran na internetu", to pomeni celotno spletno stran ali osebno stran kot del strani nekoga drugega. Poleg spletnih strani na internetu so na voljo tudi WAP strani za mobilne telefone.

Sprva so bile spletne strani zbirke statičnih dokumentov. Trenutno jih večino odlikujeta dinamičnost in interaktivnost. Za takšne primere strokovnjaki uporabljajo izraz spletna aplikacija – pripravljena programski paket za reševanje težav spletnega mesta. Spletna aplikacija je del spletnega mesta, vendar je spletna aplikacija brez podatkov le tehnično spletno mesto.

V večini primerov na internetu eno spletno mesto ustreza enemu imenu domene. Natančneje glede na imena domen mesta so identificirana v globalno omrežje. Možne so tudi druge možnosti: ena stran na več domenah ali več strani pod eno domeno. Običajno več domen uporablja velika spletna mesta (spletne portale) za logično ločevanje različnih vrst ponujenih storitev (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Pogosti so tudi primeri dodeljevanja ločenih domen za različne države ali jeziki. Na primer, google.ru in google.fr sta logično Googlovo mesto v različnih jezikih, tehnično pa sta različni mesti. Združevanje več spletnih mest pod eno domeno je značilno za brezplačno gostovanje. Za identifikacijo spletnih mest v naslovu je po navedbi gostitelja tilda in ime spletnega mesta: example.com/~my-site-name/.




Vrh