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

Preden začnemo naše potovanje skozi lekcije o izdelavi spletnih mest 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) je predstavitveni jezik, ustvarjen za oblikovanje videza vsebine, na primer z uporabo pisav ali barv.

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 z

prej

) in odstavkov (opredeljenih kot

); Na seznam lahko vključite elemente ,

, , 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

.

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 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 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 Sublime Text. Brezplačne alternative 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 ozse nahaja na samem začetku dokumenta HTML in brskalnikom pove, katera različica HTML se uporablja. Ker bomo uporabljali Najnovejša različica HTML, naša vrsta dokumenta bo 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 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, začenši z izjavo o vrsti dokumenta,, potem takoj pride element . V notranjosti elementi prihajajo in . Element vsebuje kodiranje strani prek oznake in naslov dokumenta prek elementa . Element <body>vključuje naslov prek elementa <h1>in odstavek besedila skozi<р>. Ker sta naslov in odstavek ugnezdena znotraj elementa <body>, so vidni na spletni strani.</p><p>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 oba elementa <head>in <body>ugnezdeni in premaknjeni znotraj elementa <html>. Struktura zamikov za elemente se nadaljuje z novimi elementi, dodanimi znotraj <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 namerno. Vsi elementi niso sestavljeni iz odpiralnih in zapiralnih oznak. Nekateri elementi preprosto prejmejo vsebino ali vedenje prek atributov znotraj ene same oznake. <meta>je eden od teh elementov. Vsebina elementa <meta>v primeru je dodeljen z uporabo atributa charset in vrednosti. 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>Zmanjšana struktura, izdelana z deklaracijo vrste dokumenta<!DOCTYPE html>in elementi <html> , <head>in <body>, je precej pogosta. To strukturo dokumenta želimo ohraniti priročno, ker jo bomo pogosto uporabljali pri ustvarjanju novih dokumentov HTML.</p><h3>Preverjanje 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. 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.</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. V naslednjih lekcijah bomo organizirali lastno Styles Conference in ustvarili spletno stran zanjo. 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 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.</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 postanejo ti izrazi druga narava.</p><h3>Selektorji</h3><p>Ko dodate elemente na spletno stran, jih lahko oblikujete s pomočjo 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.</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 kombinirani z zavitimi oklepaji (), ki obdajajo sloge, ki so uporabljeni 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 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 <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>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.</p><p>Običajna praksa je prestavljanje parov 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 moramo obravnavati še nekaj točk, preden se potopimo 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/installation-and-configuration/kak-postavit-otpechatok-palca-na-meizu-5c-obzor-meizu-m5c-dostupnyi.html">različne vrste</a> selektorji. Začeli bomo z najosnovnejšimi izbirniki: izbirniki tipa, razreda in identifikatorja.</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, ker izberejo določeno skupino elementov in ne vseh elementov istega tipa.</p><p>Razredi vam omogočajo, da uporabite iste sloge za različne elemente hkrati z uporabo iste vrednosti atributa razreda za več elementov.</p><p>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 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 uporabljajo vrednost atributa id kot izbirnik.</p><p>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.</p><p>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.</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Dodatni izbirniki</h3><p>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.</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 pomočjo CSS. Zdaj pa povežimo pike med HTML in CSS, da bosta oba jezika delovala skupaj.</p><h2>Povezovanje CSS</h2><p>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 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 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.</p><p>Če želimo ustvariti naš zunanji slogovni list, ponovno želimo uporabiti naš izbrani urejevalnik besedila, da ustvarimo novega <a href="https://5visa.ru/sl/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">besedilna datoteka</a> s pripono .css. Našo datoteko CSS je treba shraniti v isto mapo ali podmapo kot našo datoteko HTML.</p><p>Znotraj elementa <head>uporabljen 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 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 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.</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. To uporablja poševnico (ali poševnico), ki označuje premikanje v podmapo.</p><p>Vklopljeno <a href="https://5visa.ru/sl/firmware/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 preprosto prepišemo, 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/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">različne elemente</a>. kako <a href="https://5visa.ru/sl/installation-and-configuration/ispolzovanie-rasshireniya-chrome-to-mobile-dlya-otpravki-stranicy-na-mobilnoe.html">Google Chrome</a> prikazuje naslove, odstavke, sezname in tako naprej, 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>. Za zagotovitev združljivosti med brskalniki se ponastavitev CSS pogosto uporablja.</p><p>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. <a href="https://5visa.ru/sl/program/sohranenie-parolya-vkontakte-v-raznyh-brauzerah-kak-sohranit-stranicu-v.html">različne brskalnike</a> bodo začeli delovati 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/tips/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 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.</p><h3>Združljivost in testiranje med brskalniki</h3><p>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.</p><p>Pri pisanju CSS morate biti pozorni na več stvari. Dobra novica je, da zmorete vse in potrebujete le malo potrpljenja, da to obvladate.</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 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.</li><li>Z urejevalnikom besedila ustvarimo novo datoteko z imenom main.css in jo shranimo 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: kolaps; razmik med robovi: 0; )</p><li>Naša datoteka main.css začenja dobivati ​​obliko, zato jo povežimo z datoteko index.html. Odprite index.html v urejevalniku besedila in dodajte element <link>V <head>, takoj za elementom <title> .</li><li>Ker skozi element kažemo na sloge <link>dodajte atribut rel s tabelo slogov vrednosti.</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 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 stran Styles Conference v 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.

Č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

Večino vsebine, predstavljene na internetu, predstavljajo spletne strani. To je zgodovinsko prva vrsta dokumenta, namenjena umestitvi v navidezni omrežni prostor, vendar še vedno ostaja relevanten in praktično nima konkurenčnih formatov. Kakšna je struktura spletnih strani? Katera orodja za spletni razvoj uporabljajo za ustvarjanje?

Kaj je spletna stran?

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

Po splošno sprejeti definiciji med informatiki je to dokument, ki je namenjen odpiranju v specializiranem programu - brskalniku in vsebuje podatke za prikaz na računalniškem zaslonu z ustrezno vrsto programske opreme različne uporabne vsebine - besedila. , povezave, grafike, videi, glasba itd. Spletna stran je Besedilni dokument. Ustrezni 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 glede na njeno prevladujočo vlogo pri prikazovanju virtualnih vsebin pred uporabniki.

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, ki je sestavljen na 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 - tam je "preprosto besedilo". Za dostop do želene strani se mora bralec večkrat obrniti, najprej prebrati kazalo ali opombe. V hipertekstnem načinu večino dela opravi računalnik z uporabo 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 povsem pravilno začnemo govoriti o komponentah ustreznega dokumenta, ki so ustvarjene z uporabo označevalnega jezika HTML. Zato si najprej 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 tega jezika- to so oznake. V večini primerov so seznanjeni - obstaja uvodni in zaključni. Prve so označene samo z oglatimi oklepaji. Drugi so podobni, le da je pred drugim oklepajem poševnica - simbol /. Brskalnik jih zna prepoznati in zato brez težav prikaže vsebino spletnih strani v skladu z algoritmi, ki jih je ustvaril 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 seveda prepoznal ukaz HTML v poljubnih črkah, a spletnim razvijalcem vseeno svetujemo, da se držijo označene sheme pisanja oznak. Tako bodo na primer drugi strokovnjaki lažje izboljšali spletno stran.

Lastnosti

Drugi pomembni elementi jezika HTML so atributi. Z njihovo pomočjo lahko ustvarjalec spletne strani nastavi lastnosti vsebine - na primer višino pisave, njeno 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 se nahaja naslednja ključna komponenta spletne strani – vsebina. Pravzaprav je to tista vsebina, ki bi se morala uporabniku prikazati na zaslonu. To je lahko besedilo, povezava, slika, video ali drug multimedijski element.

Elementi spletne strani

"Torej, končno navedite glavne elemente spletne strani!" - ponovi učitelj. "Z veseljem," mu odgovorimo. Kaj je vključeno v strukturo obravnavane vrste dokumenta? 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 značilnost jezika HTML: na spletni strani se lahko prikaže želena slika različne poti. Hkrati so lahko enakovredni glede stroškov dela ustvarjalca spletne strani ali zahtevajo različno količino truda in časa za njihovo izvedbo.

Elementi spletne strani: glava

Standardni elementi spletne strani so, naj se sliši še tako presenetljivo, predstavljeni v zelo majhnih količinah. Pravzaprav sta samo dva - naslov in glavni del dokumenta. Hkrati ima lahko vsak od njih precej zapleteno strukturo.

Kakšne so posebnosti naslova? Nahaja se na samem vrhu spletne strani. Koda HTML, ki tvori glavo, je običajno namenjena »šifriranju« le besedila, po potrebi pa lahko v ustrezen element vnesemo tudi majhne grafične vstavke. In to je pravzaprav vse, kar lahko rečemo o naslovu. Zdi se, da je njegova vloga v strukturi ustreznega dokumenta nepomembna. Ampak to ni res. Naslovi spletnih strani so zelo pomembni z vidika indeksiranja strani v iskalnikih - Yandex, Google. Ta element mora popolnoma ustrezati vsebini spletne strani, kot tudi tematskim posebnostim strani.

Kako je naslov spletne strani zajet s HTML? Zelo preprosto. Najprej se napiše začetna oznaka, ki je vedno videti kot HEAD z oglatimi oklepaji, nato vsebina glave in nato 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 lahko zagotovite, da vaš spletni dokument izpolnjuje ta kriterij? Zelo preprosto. Algoritmi HTML morajo biti umeščeni v strukturo glave dokumenta, tako da 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

Glavni del spletnega dokumenta se odpre z oznako BODY in zapre z ustreznim elementom, vključno s poševnico. Poleg tega je lahko med začetno in zapiralno oznako ogromno število dodatnih ukazov jezika za označevanje hiperbesedila. 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 se uporabljajo tudi za oblikovanje besedila - na primer, da pisavi dajo določeno barvo, velikost in druge lastnosti.

Oglejmo si posebnosti nekaterih pogosto uporabljenih oznak HTML. Pravzaprav tvorijo 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 navedli zgoraj - predvsem tiste, s pomočjo katerih brskalnik prebere glave spletnih strani in ugotovi, kje se nahaja glavni del 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 z dodatno oznako - FONT. V tem primeru bo postavljen znotraj tistega, ki označuje meje odstavka - to bo preprečilo, da bi bil ukaz HTML, ki odraža vrsto želene pisave, razdeljen 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, posebne obrobe, velikost in barvo pisave besedila v tabeli.

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

Povezave do drugih spletnih dokumentov ali datotek so označene z oznako A. V njej so praviloma atributi, ki označujejo, da je v strukturi spletne strani hiperpovezava. V tem primeru je naveden dokument, datoteka ali mesto, do katerega vodi.

Pogosta oznaka je FRAMESET. Z njegovo pomočjo lahko razdelite prostor spletne strani na več področij - okvirjev. V vsakem od njih lahko uporabite ločene spletne dokumente. To pomeni, da okvirji omogočajo pravilno namestitev dveh ali več strani na enem zaslonu hkrati.

Zgodba o ključnih elementih spletnih strani in nato zgodba o načinih oblikovanja le-teh v jeziku HTML - približno takšen bo algoritem za naš odgovor na vprašanje, ki nam ga je zastavil izpraševalec. Če je prišel do nas z besedami "naštejte 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 komponente strukture spletnega dokumenta ali vrste vsebine - besedilo, slike, tabele, okvirje, povezave, ki jih spletni skrbnik ustvari z orodjem, kot je jezik HTML. .

Posebnosti orodij za spletni razvoj

Poleg povedanega lahko razložimo, 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 z uporabo JavaScripta 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. Izzivi, s katerimi se soočajo sodobni razvijalci, so lahko precej zapleteni. Na primer, včasih je treba prevesti spletne strani, napisane v ruščini, v angleščino. V tem primeru bodo orodja razvijalca zelo raznolika.

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, pridobitev veščin 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, ki se prenese v 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 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 nastavijo barvo in velikost pisave, poravnavo odstavek besedila in tako naprej. Če element vsebuje sliko, lahko atributi določijo velikost slike, prisotnost in velikost okvirja okoli slike itd.

<Р align="center">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:

Vse koristne informacije se morajo pojaviti med začetnimi in končnimi oznakami, ki označujejo njihovo 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 v novo vrstico. Zamik ugnezdenih elementov (zavihek). To spet ni potrebno, 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.

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

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

Spletno mesto je strukturirano kot revija, ki vsebuje informacije o določeni temi ali vprašanju. Tako kot je revija sestavljena iz tiskanih strani, je spletno mesto sestavljeno iz računalniških spletnih strani.

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

Spletna mesta so ustvarjena z uporabo hiperbesedilnega označevalnega jezika HTML. Tehnologija HTML je sestavljena iz vstavljanja kontrolnih znakov (oznak) v običajni besedilni dokument 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 vam omogoča:

· oblikovati besedilo;

· v dokument vključite slike in večpredstavnost;

· Z uporabo tega jezika se ustvarijo hiperbesedilne povezave do drugih spletnih strani.

HTML se uporablja za ustvarjanje vsebine informacij o datoteki 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 kateri koli računalnik.

Za ustvarjanje spletnih strani se uporabljajo preprosti urejevalniki besedil, 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, pri katerih so osnovni koraki izdelave spletnih strani že avtomatizirani, preostane vam le še spremembe v skladu z vašo tematiko.

Za ogled strani HTML preprosto vnesite njen URL v naslovno vrstico spletnega brskalnika in nato sledite hiperpovezavam. Toda ravno to je glavni problem - kako najti naslov strani? Najpogosteje se zgodi, da veste, kaj morate najti, vendar ne veste, kje točno iskati. Za rešitev tega problema obstajajo posebni iskalniki. Z vidika uporabnika, iskalni sistem- to je redno spletno mesto domača stran ki vsebuje povezave do drugih spletnih mest, razdeljenih v kategorije (“Šport”, “Podjetje”, “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 (angleško Website, iz web - splet in site - "mesto") je zbirka 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 posebej razvit za odjemalce za neposreden dostop do spletnih mest na strežnikih. Spletne strani drugače imenujemo internetna predstavitev osebe ali organizacije. Ko rečejo »vaša lastna stran na internetu«, to pomeni celotno spletno mesto ali osebno stran kot del spletnega mesta 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 – že pripravljena programski paket za reševanje težav s spletno stranjo. Spletna aplikacija je del spletnega mesta, spletna aplikacija brez podatkov pa je samo tehnično spletno mesto.

V večini primerov na internetu eno spletno mesto ustreza enemu imenu domene. Natančno 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 velika spletna mesta (spletni portali) uporabljajo več domen za logično ločevanje različnih vrst ponujenih storitev (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Obstajajo tudi primeri, ko so dodeljene ločene domene različne države ali jeziki. Na primer, google.ru in google.fr sta logično Googlovi mesti 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 naslov vsebuje tildo in ime spletnega mesta za gostiteljem: example.com/~my-site-name/.




Vrh