Luo HTML5-dokumentti. Tämä on tekstiotsikko. LLC Sarvet ja sorkat

Viimeisin päivitys: 08.04.2016

Elementit ovat rakennuspalikoita, jotka muodostavat html5-asiakirjan. Asiakirjan luomiseksi meidän on luotava yksinkertainen tekstitiedosto, ja määritä tiedostotunniste *.html

Luodaan tekstitiedosto, kutsutaan sitä hakemistoksi ja muutetaan sen tunniste .html:ksi.

Avaa sitten tämä tiedosto missä tahansa tekstieditorissa, esimerkiksi Notepad++. Lisää tiedostoon seuraava teksti:

HTML5-dokumentin luomiseksi tarvitsemme ensin kaksi elementtiä: DOCTYPE ja html. doctype-elementti tai dokumentti tyyppi Ilmoitus kertoo selaimelle, minkä tyyppisestä asiakirjasta on kyse.osoittaa sen Tämä asiakirja on html-dokumentti ja siinä käytetään html5:tä, ei html4:ää tai jotain muuta sivukuvauskielen versiota.

Ja html-elementti, sen avaus- ja sulkemistunnisteiden välissä, sisältää asiakirjan koko sisällön.

Sisällä html-elementti voimme sijoittaa kaksi muuta elementtiä: pää ja vartalo . Head-elementti sisältää verkkosivun metatiedot - verkkosivun otsikon, koodaustyypin jne. sekä linkkejä ulkoisia resursseja- tyylit, skriptit, jos niitä käytetään. body-elementti määrittelee itse asiassa html-sivun sisällön.

Muutetaan nyt index.html-tiedoston sisältöä seuraavasti:

HTML5-dokumentti

HTML5-asiakirjan sisältö

Pääelementti määrittelee kaksi elementtiä:

otsikkoelementti edustaa sivun otsikkoa

Meta-elementti määrittää sivun metatiedot. Jotta merkit näkyvät oikein, on suositeltavaa määrittää koodaus. SISÄÄN tässä tapauksessa charset="utf-8"-attribuutilla määritämme utf-8-koodauksen.

Runkoelementin sisällä on vain yksi elementti - div - joka muodostaa lohkon. Tämän lohkon sisältö on yksinkertainen merkkijono.

Koska valitsimme koodaukseksi utf-8, selain näyttää verkkosivun tällä koodauksella. On kuitenkin välttämätöntä, että itse asiakirjan teksti vastaa valittua utf-8-koodausta. Pääsääntöisesti erilaisissa tekstieditorit Koodauksen asettamiseen on sopivat asetukset. Esimerkiksi Notepad++:ssa sinun on siirryttävä Koodaukset-valikkoon ja valittava kohde avautuvasta luettelosta. Muunna UTF-8:ksi ilman tuoteluetteloa:

Tämän jälkeen näet tilarivillä UTF-8 ilman tuoteluetteloa , joka osoittaa, että vaadittu koodaus on asennettu.

Tallenna ja avaa tiedosto index.html selaimessa:

Näin ollen loimme ensimmäisen HTML5-dokumentin. Koska ilmoitimme elementissä otsikon otsikko"HTML5-dokumentti", tämä on selainvälilehden nimi.

Koska koodaus on utf-8, verkkoselain näyttää kyrilliset merkit oikein.

Ja näemme kaiken tekstin, joka on määritetty body-elementin sisällä selaimen pääkentässä.

Kun luot verkkosivustoa, sinun tulee ensin kuvitella, miten verkkosivu muodostuu. Tämä on eräänlainen "perusta" verkkosivujen rakentamisessa. Siksi ennen monimutkaisempiin verkkosivustojen luomistekniikoihin perehtymistä on suositeltavaa, että sinulla on vähintään perustiedot HTML:stä. SISÄÄN tämä oppitunti me tapaamme HTML, selvitetään se HTML-dokumentin rakenne ja edelleen käytännön esimerkkejä Yhdistetään hankittua tietoa.

Mikä on HTML?

HTML tulee sanoista HyperText Markup Language. Tämä kieli vastaa tarkalleen kuinka hyperteksti näytetään sivuston sivuilla. Selvitetään nyt, mitä hyperteksti on? Ei ole mikään salaisuus, että yksi web-sivu voi sisältää paljon erityyppistä tietoa, olipa se sitten tekstiä, joitain taulukoita, kaavioita, videoita, ääntä jne. Joten kaikkea tätä tietoa voidaan kutsua yhdellä sanalla - hyperteksti.

Huomaa, että HTML on sivunkuvauskieli, ei ohjelmointikieli. SISÄÄN annettua kieltä ei ole olemassa loogisia toimintoja ja siitä on mahdotonta tehdä matemaattisia laskelmia. HTML-sivut on pidennys .html tai .htm ja niitä käsittelevät selaimet - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, ooppera jne.

Selvitetään nyt, kuinka selain ymmärtää mitä ja miten näyttää verkkosivulla? Se on hyvin yksinkertaista. Merkintäkieli HTML-hyperteksti on sisäänrakennetut komennot, niitä kutsutaan tunnisteiksi. Se on heidän mukaansa selain suunnattu.

HTML-dokumentin rakenne

Minkä tahansa HTML-dokumentti(verkkosivulla) on oltava tietty rakenne. Tämä välttää mahdollisia ongelmia avattaessa sivuja selaimissa. Katsotaanpa esimerkkinä sivua, joka sisältää seuraamalla HTML-koodia koodi:

HTML-dokumentin rakenne ...

Katsotaanpa, mitä tämä rakenne sisältää järjestyksessä:

1. Ensimmäinen asia, joka menee HTML-dokumenttiin, on versioilmoitus (ensimmäinen rivi). Oikean toiminnan varmistamiseksi tämä rivi tulee määrittää verkkosivua asetettaessa.

3. Sitten tulee sivuston yläosan alue (otsikko). Tunnistetta käytetään tähän . Ilmoitamme otsikossa sivumme nimen asettamalla sivun otsikon tagien väliin Ja. Seuraavaksi ilmoitetaan HTML-dokumentin koodaus (viides rivi). Tämä tehdään, jotta kyrilliset aakkoset näkyvät oikein. Suljetaan otsikkoalue tagilla.

4. Sisällönkuvauskenttä "description" - hakukoneille tarkoitettu sivun yhteenveto. Tämä tunniste on tärkeä hakukoneoptimoinnin kannalta, ja se on täytettävä.

5. Sisällönkuvauskenttä "avainsanat" - avainsanat, jotka voivat näkyä sivulla. Tämä tunniste on tarkoitettu myös hakukoneille. Tätä tunnistetta käytetään harvoin nykyään.

6. Sivun runko avautuu tunnisteella ja sulkeutuu vastaavasti tagilla

. Web-sivun runko sisältää yleensä pääsisällön - tekstiä, videota, ääntä ja muuta tietoa.

Olemme siis vastanneet kysymykseen mitä HTML on ja tutkineet HTML-dokumentin rakennetta. Tällä oppitunnilla saadut tiedot ovat peruskäsitteitä, ilman niitä ei tule toimeen. Puhumme monimutkaisemmista asioista muilla tunneilla.

Hei! Et löydä tältä oppitunnilta mitään hyödyllistä, jos olet JO perehtynyt HTML-dokumentin rakenteen muodostukseen. Niille, jotka EI ole tuttuja, näytän HTML-verkkodokumentin oikean (kelvollisen) rakenteen, myös WordPress-sivustolle.

HTML-dokumentin yleinen oikea rakenne

Ensinnäkin ilman suurta johdantoa minkä tahansa HTML-dokumentin yleisen rakenteen tulisi olla seuraava:

/*Ilmoittaa nykyisen DTD-asiakirjatyypin*/ /*Näyttää asiakirjan alun*/ /*Näyttää otsikon alun (otsikon)*/ Testata/*Näyttää otsikon*//*Näyttää otsikon alun*/ /*Näyttää asiakirjan pääosan alun (runkotekstin)*/ /*Asiakirjan sisältö*/

/*Näyttää asiakirjan pääosan lopun*//*Näyttää asiakirjan lopun*/

Jos poistat selitykset, jotka näytin jokaisen tagin jälkeen, HTML-dokumentin yksinkertainen rakenne näyttää tältä

Testata

Nykyinen DTD-asiakirjatyyppi

Nykyinen asiakirjatyyppi ( Asiakirjatyypin määritelmä, DTD) on välttämätön, jotta selain ymmärtää nykyisen verkkosivun tulkinnan, koska HTML-kieltä on olemassa useita versioita.

Lisäksi on olemassa muita merkintäkieliä kuin HTML, kuten XHTML.

Huomautus: XHTML on EXtensible HyperText Markup Language, jonka käännämme laajennetuksi hypertekstin merkintäkieleksi.

XHTML on samanlainen kuin HTML, mutta syntaksi on erilainen. Jotta selain ei sekoitu kielten välillä, sinun on näytettävä se ensimmäisellä koodirivillä, nykyisen asiakirjan tyyppi on DOCTYPE.

Tunnisteen käsite HTML:ssä

Oletko huomannut, että HTML-dokumentin koko rakenne on määritelty tietyillä tunnisteilla - tietyillä kulmasuluissa olevilla sanoilla.

HTML-dokumentissa kulmasuluissa olevaa sanaa kutsutaan tunnisteeksi. Jokaisella tunnisteella on oma merkityksensä, jonka määrittävät merkintäsäännöt.

Tag tarkoittaa html-dokumentin otsikkoa. Head-tunnisteet tallentavat tietoja selaimia ja hakukoneita varten. Myös sisällönkuvauskenttien muodossa;
Tunniste tarkoittaa html-dokumentin pääsisältöä. Nimittäin tekstiä, kuvia, Java Script -skriptejä jne.;
Tunniste [p] on lohkoelementti ja alkaa aina uudelta riviltä. Se tarkoittaa html-dokumentin pääsisältökappaletta.

Tärkeä! Kaikki HTML-merkintätunnisteet on yhdistettävä. Eli alkutunniste<тег>, on suljettava sulkevalla tagilla, jossa on vinoviiva .

Otsikko- ja alaotsikkotunnisteet h1-h6

Asiakirjan tekstin rakenteen ja verkkosivujen hakukoneoptimoinnin parantamiseksi on olemassa muita body content -tageja. Niitä kutsutaan otsikko- ja alaotsikkotunnisteiksi h1 - h6, yhteensä 6.

Ne ovat aivan kuin [p]-kappaletunnisteet, joiden avulla voit korostaa tekstin semanttisia osia ja jakaa tekstin semanttisiin osiin, jolloin jokaiselle osalle annetaan oma otsikko.

Tunnisteet h1—h6 on alisteinen riippuvuus, tämän alaisuuden alempi taso on kappale.

On tärkeää huomata, että tunnisteiden alisteisen riippuvuuden katkaiseminen h1—h6—s ei häiritse asiakirjan näyttöä ja kelvollisuutta, vaan vain huonontaa sen optimointia hakukoneille.

Esimerkki kehitetystä HTML-dokumenttirakenteesta

Annan teille akateemisen esimerkin kehittyneemmästä HTML-dokumenttirakenteesta:

Testata

Pääotsikko

Ensimmäinen alaotsikko

Pääotsikko

Toinen alaotsikko

Ensimmäinen pieni alaotsikko

HTML 5 -rakenne

HTML 5:ssä dokumentin rakenteen tulisi olla seuraava:

Tämä on julistus, joka osoittaa että tämä asiakirja on HTML5;

tämä on HTML-sivun juurielementti;

Elementti, joka sisältää sisällönkuvauskenttiä dokumentista;

Tämä elementti määrittää asiakirjan otsikon;</p><p><body>Tämä elementti sisältää sivun näkyvän sisällön;</p><p><h1>Elementti määrittää suuren otsikon</p><p><p>Elementti määrittää kappaleen.</p><p>H2 - h6 -tunnisteet toimivat html5:ssä</p><p><i>Kaikki tagit ovat kaksinkertaisia. Aloitustunnistetta kutsutaan aloitustunnisteeksi ja lopputunnistetta kutsutaan sulkevaksi tunnisteeksi.</i></p><h2>HTML-merkintä WordPress-sivustolla</h2><p>Huolimatta siitä, että WordPress-skripti on kirjoitettu PHP:llä, kaikissa sivuston tiedostoissa tai pikemminkin kaikissa sivuston työpohjan tiedostoissa on html-merkintä. Katsotaanpa esimerkkiä mallin header.php-tiedostossa <b>Kaksikymmentä seitsemäntoista</b>:</p><p> <?php ?><!DOCTYPE html> <html <?php language_attributes(); ?>class="no-js no-svg"> <head> <meta charset="<?php bloginfo("charset"); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <?php _e("Skip to content", "twentyseventeen"); ?> <header id="masthead" class="site-header" role="banner"> <?php get_template_part("template-parts/header/header", "image"); ?> <?php if (has_nav_menu("top")) : ?> <div class="navigation-top"> <div class="wrap"> <?php get_template_part("template-parts/navigation/navigation", "top"); ?> </div> </div> <?php endif; ?> </header> <?php if ((is_single() || (is_page() && ! twentyseventeen_is_frontpage())) && has_post_thumbnail(get_queried_object_id())) : echo "<div class="single-featured-image-header">"; echo get_the_post_thumbnail(get_queried_object_id(), "twentyseventeen-featured-image"); echo "</div>"; endif; ?> <div class="site-content-contain"> <div id="content" class="site-content"> </p><p>Voit nähdä, että jos kaikki WordPress-toiminnot sijoitetaan klassiseen HTML-merkintään. On olemassa asiakirjatyyppi:<!DOCTYPE html></p><p>Parilliset tunnisteet,</p><p>Avausmerkki.</p><p>Lopputunniste löytyy footer.php-tiedostosta.</p><h2>Kuinka tarkastella WordPress-sivuston sivun HTML-koodia</h2><p>Se, mitä kirjoitat sivuston muokkausohjelmaan ja luot artikkeleita tai sivuja, on vain osa sivuston HTML-sivua. Tämä ei ole edes koko sivun runko.</p><p>Jotta voit tarkastella WordPress-sivuston sivun HTML-koodia, jota tarvitaan hyvin usein, tarvitset:</p><p>Avaa sivu selaimessa;</p><p>Vaihda englanninkieliseen näppäimistöfonttiin;</p><p>Paina seuraavia painikkeita:</p><ul><li>Chrome: Ctrl+U</li><li>Opera: Ctrl+U</li><li>Mozilla: Ctrl+U</li> </ul><p>Ehkä et vielä tiedä miksi tätä tarvitaan. Usko minua, tarvitset tätä useammin kuin kerran analysoidaksesi sivustosi ja mahdollisesti kilpailijoiden sivustoja.</p><h2>Johtopäätös</h2><p>Lopuksi halusin tehdä johtopäätöksen, mutta ainoa asia, joka tulee mieleen, on, että artikkeli osoittautui täysin aloittelijoille. Ensi silmäyksellä artikkelikoodiesimerkin ja oikeiden sivustojen esimerkkien välillä on suuri ero. Kaikilla tiedostoilla on kuitenkin sama HTML-dokumenttirakenne, ja on erittäin tärkeää, että tätä rakennetta ei rikota työskennellessäsi sivuston kanssa.</p> <p>Tänään puhumme HTML5:n semantiikasta. Olen jo kirjoittanut lyhyen arvostelupostauksen aiheesta. Suosittelen, että tutustut siihen ennen tämän artikkelin lukemista. Nyt tarkastellaan tätä asiaa yksityiskohtaisemmin, kuinka HTML5-dokumentin semanttinen rakenne luodaan oikein ja asiantuntevasti.</p><p>Tässä artikkelissa luomme vähitellen HTML-sivun ja koristelemme sen semanttisilla HTML5-tageilla.</p><p><img src='https://i0.wp.com/rightblog.ru/wp-content/uploads/2015/09/HTML5-semantin-infografic_rightblog.ru_.png' width="100%" loading=lazy loading=lazy></p><p>Kuva - HTML5-sivun semanttinen rakenne.</p><h3>DOCTYPE ja sisällönkuvauskentät sivun otsikossa</h3><p>Aloitetaan tavallisella HTML5-dokumenttimallilla ja lisätään päähän sisällönkuvauskentät:</p><p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sivun otsikko

Lisäsin tagin joka vastaa avainsanoista. Ja tagi joka vastaa sivun kuvauksesta. Nämä tunnisteet vaaditaan SEO-optimointiin. Tunniste on myös täytettävä oikein . Sivun otsikon on oltava yksilöllinen koko sivustolle, ja sen otsikossa on oltava sen sivun koko olemus, jolle se on määritetty.</p><p>Mennään pidemmälle. HTML5 esitteli uusia tunnisteita, joita käytetään semanttisten merkintöjen luomiseen dokumenttiin. Nämä ovat header-, nav-, main-, article-, aside-, alatunnisteet jne. tagit. Näytön suhteen ne toimivat samalla tavalla kuin tavalliset. <div>tagit, eli nämä ovat lohkoelementtejä. Mutta jos <div>ei ole semanttista kuormaa, niin header-, nav-, main- ja muut tulisi käyttää vain tarkoituksenmukaisesti.</p><h3>Sivun otsikko</h3><p>Sivun otsikko muotoillaan otsikkotunnisteessa. Huomaa, että sivun otsikko on kirjoitettu h1-tunnisteella.</p><p>  <header> <h1>Sivuston otsikko</h1> </header> </p><p>Jos otsikon vieressä on myös iskulause, sijoitamme sen p-, div- tai span-kirjaimeen.</p><p>  <header> <h1>Sivuston otsikko</h1> <p>sivuston iskulause</p> </header> </p><p><b>Huomautus H1-tunnisteesta</b></p><p>On huomattava, että HTML5:ssä H1-tunnistetta käytetään osoittamaan sen säilön otsikkoa, jossa se sijaitsee (tämä voi olla otsikko, osio, artikkeli jne.)</p><p>Ennen HTML5-tunnisteiden tuloa semantiikka oli hieman erilainen ja erilainen. Joten HTML4:ssä voi olla vain yksi H1-otsikko sivulla! Tämä oli pääsääntöisesti artikkelin otsikko tai sivun otsikko (esimerkiksi jos kyseessä on luokkasivu, jolla on useita artikkeleita.) H2:ta käytettiin alaotsikoina tai pääartikkelin osioissa. H3 alaosioille ja niin edelleen.</p><h3>Sivulla navigointi</h3><p>Sivuston päänavigoinnin suunnittelun tulisi sisältyä navigointitunnisteeseen. Muista myös, että navigoinnin suunnittelu listaelementeillä on hyvä käytäntö.</p><p>  <nav> <ul> <li>Koti</li> <li>Portfolio</li> <li>Galleria</li> <li>Yhteystiedot</li> </ul> </nav> </p><h3>Sisältö sivulla</h3><p>Sivun pääsisältö on muotoiltu päätunnisteeseen. Tämä voi olla yksi artikkeli tai useita artikkelien esikatseluja, jos puhumme blogisivusta, jossa on useita merkintöjä. Et voi sijoittaa sivupalkkia, sivun otsikkoa, alatunnistetta tai päänavigointia päätunnisteeseen!</p><p>  <main>...pääsivun sisältö...</main> </p><h3>Artikkelin suunnittelu</h3><p>Artikkelitunnistetta käytetään artikkeleiden käärimiseen. Yleensä tämä tunniste sisältää sisältölohkon, joka voidaan poistaa sivun kontekstista ja käyttää erikseen muualla. Tämä voi olla artikkeli (artikkelin koko teksti tai esikatselu), viesti foorumilla jne.</p><p>Alla olevassa esimerkissä näytin artikkelin ulkoasun kontekstissa, päätunnisteen sisällä. Artikkelissa on otsikkolohko, jossa on artikkelin otsikko. Artikkelin julkaisupäivämäärä määritellään erityisellä aikatunnisteella, joka näytetään tavallisena rivielementtinä. Aikatunnisteella on erityinen attribuutti, jossa julkaisuaika on määritettävä konemuodossa. Tämä voi olla vain datetime="2015-09-30" tai tuntien minuuttien ja sekuntien datetime="2015-09-30T15:25:55" . Pubdate-parametri osoittaa, että artikkeli on julkaistu samaan aikaan kuin se kirjoitettiin. Jos tämä on uutinen, voi olla, että uutisten aika on yksi ja julkaisuaika eri, tätä varten sinun on määritettävä aikatunniste kahdesti ja laitettava pubdate vain tagiin, jossa julkaisuaika on ilmoitettu.</p><p> <main> ...  <article>  <header>  <h1>Artikkelin otsikko</h1>  <time datetime="2015-09-30T15:25:55" pubdate>30. syyskuuta</time> </header>  <h2>Artikkelin alaotsikko</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Yllä olevasta esimerkistä näet, että otsikko- ja alatunnisteita käytettiin artikkelin sisällä korostamaan artikkelin otsikkoa ja alatunnistetta.</p><h3>Sivupalkki tai sarake widgeteillä</h3><p>Jokaiselle yksittäiselle sivupalkin elementille käytämme sivupalkin. Sen sisällä otsikko on muotoiltu h1-tunnisteella. Joten sivupalkin sarake voi näyttää tältä:</p><p>  <div class="sidebar">  <aside> <h1>Widgetin otsikko</h1> ... </aside>  <aside> <h1>Viimeiset muistiinpanot</h1> ... </aside>  <aside> <h1>Suosittuja kommentteja</h1> ... </aside> </div> </p><h3>Osion tunniste</h3><p>Osatunnistetta käytetään edustamaan aihekohtaisesti liittyvän sisällön ryhmää tai osiota. Sen käyttö on samanlaista kuin artikkelin pääasiallinen ero on, että elementin sisällöllä ei saa olla merkitystä <section>itse sivun kontekstin ulkopuolella. On suositeltavaa käyttää tunnisteita ( <h1> – <h6>) osoittaaksesi osion aiheen.</p><p>Jos haluat antaa esimerkin nyt lukemastasi artikkelista, voit kääriä jokaisen kappaleen tunnisteeseen <section>. Osatunnistetta voidaan esimerkiksi käyttää korostamaan aloitussivun sisältölohkoja. Tämä kuulostaa samanlaiselta kuin div-elementin määritelmä, jota käytetään usein sisällön säilytysastiana. Erona on, että div:llä ei ole semanttista merkitystä, eikä se kerro mitään sen sisällä olevasta sisällöstä. Osatunnistetta sitä vastoin käytetään osoittamaan selvästi, että sen sisältämä sisältö liittyy merkitykseltään. Voit korvata osan div-tageistasi osiotunnisteilla, mutta kysy itseltäsi aina kysymys: "Liittääkö tämä sisältö vai ei?"</p><p>Esimerkki osiotunnisteen käytöstä kaupunkiluettelossa:</p><p> <h1>Tapahtuma erillään</h1> <section> <header> <h2>kaupungit</h2> </header> <p>Liity seuraamme näissä kaupungeissa vuonna 2010.</p> <section> <header> <h3>Seattle</h3> </header> <p>Seuraa keltaista tiili tietä.</p> <section> <header> <h3>Boston</h3> </header> <p>Se on Beantown ystävilleen.</p> <section> <header> <h3>Minneapolis</h3> </header> <p>Se on niin <em>kiva</em>.</p> <small>Majoitusta ei tarjota.</small> </p><h3>Sivuston alatunniste - Alatunniste</h3><p>Sivuston alatunniste on suunniteltu tagilla <footer></p><p>  <footer> <p class="copyright">© 2015 sivusto Tekijänoikeus</p> </footer> </p><h3>Johtopäätös</h3><p>Voit tarkistaa sivun rakenteen HTML5 outliner -työkalulla. Se näyttää sivun rakenteen lohkojen ja otsikoiden mukaan.</p><p>HTML5:n semantiikka ei rajoitu edellä artikkelissa annettuihin tunnisteisiin. Mutta käyttämällä yllä olevia esimerkkejä, voit päivittää merkintäsi ja tehdä sivustostasi hakukoneystävällisemmän, mikä parantaa sivustosi sijoitusta hakutuloksissa.</p><p>Voit jatkaa tätä aihetta tutkimalla muita uusia HTML5-tageja. Sekä mikroformaatit tietojen suunnitteluun ja jäsentelyyn, kuten schema.org</p><p><b>Tärkeä huomautus HTML5-tunnisteiden käytöstä.</b> Spesifikaatio ei määrittele tiukkoja sääntöjä semanttisten tunnisteiden käytölle, se antaa vain suosituksia niiden käytöstä. Jos et ymmärrä tai et tiedä missä ja mitä HTML5-tunnistetta käyttää, on parempi käyttää div-tunnusta, jotta dokumentin rakenne ei vahingoitu tai riko sitä.</p><p><b>Artikkelit ja materiaalit</b></p> <p>Nyt olemme valmiita likaamaan kätemme musteella. Tunne olosi taittosuunnittelijaksi 1900-luvun puolivälin painotalossa. Painokoneiden rytminen melu, tuoreen painatuksen tuoksu, messinkikirjainten napsautukset paikoilleen. Suuret rullaa koskematonta sanomalehtipaperia odottamassa osan levikkitiedoista. Ja sinä, istuessasi ladontakoneen ääressä, asetat tietopalkin oikeaan paikkaan...</p> <p>Hyvä, että tietokoneet keksivät tämän. Voit luoda itsellesi sopivan ilmapiirin aloittaaksesi luomisen rauhallisessa ympäristössä. Itse asiassa näin teemme nyt.</p> <p>Tehtävien suorittamiseen tarvitset (päivitys on syytä):</p> <p>Jos olet kiinnostunut, voit tarkistaa kuinka paljon verkkoselaimesi tukee standardia <b>HTML5</b>. Seuraa linkkiä http://html5test.com, siellä näet pisteitä, joiden summa muodostuu standardin tuettujen pisteiden määrästä. Tätä kirjoittaessani koneellani (Ubuntu10.10) Opera11.10 sai 258 pistettä ja FireFox4 vain 240. Mietin, mitä sinulla on?</p> <p><i>Tässä opetusohjelmassa me:</i></p> <ul><li>Luomme kanssasi sivun HTML5-standardin mukaisesti</li> <li>käytetään uusia semanttisia elementtejä,</li> <li>piirretään vähän,</li> <li>Katsotaan kuinka video näkyy sivullamme,</li> <li>Tarkastellaan uusien lomakeelementtien toimintaa.</li> </ul><p>Toimiaksemme riittää, että luomme sellaisen <b>HTML-tiedosto</b> <i>index.html</i> ja yksi <b>CSS-tiedosto</b> <i>styles.css</i>. Komentosarjat näkyvät sivulla, kun suoritat tehtäviä, joten ole valmis siihen, että selaimesi varoittaa sinua tästä. Sinun on sallittava skriptien suorittaminen sivulla.</p> <h2>Sivukehyksen valmistelu</h2> <p>Selaimen täytyy tuntea sivu silmämääräisesti! Jos et kerro hänelle, kuka hän on ja mistä hän on kotoisin, hän ottaa yhteensopivuustilan käyttöön ja sinun on arvattava "kuinka sanasi reagoi" asiakkaan selaimessa. Tämän estämiseksi sinun on kirjoitettava sivun alkuun oikea asiakirjatyyppi, joka vastaa sivukoodia.</p> <p>Ilmeisesti kuultuaan taittosuunnittelijoiden pyynnöt, kaverit <b>W3C</b> sääli ja teki lyhyen tagin HTML5-standardille<!DOCTYPE HTML>. Kaikkien uusinta standardia tukevien verkkosivujen on aloitettava sillä. Muistatko kuinka se oli ennen... <i>julkinen</i> … <i>siirtymäkauden</i> tai <i>tiukka</i>... myös asiakirjatyypin kuvaustiedoston osoite, joka on niin pitkä.</p> <p>Aloitetaan. Luo työpöydällesi kansio, joka sisältää suloiset HTML- ja CSS-tiedostomme. Luo yksinkertainen tekstitiedosto index.html utf-8-koodauksella. Tämä merkkikoodaus on pitkään ollut standardi kaikissa ei-englanninkielisissä teksteissä.</p> <p>Ensimmäiselle riville kirjoitamme asiakirjan tyypin. <br>Toiseksi avaamme koko html-dokumentin päätunnisteen ja määritämme lang-parametrin kirjoittamalla sinne sivun peruskielen - venäjän. <br>Siirrytään otsikkoon. <br>Ensimmäinen asia, jonka osoitamme, on asiakirjan merkkikoodaus. <br>Sitten selainikkunan otsikko. <br>Sitten epäröimättä yhdistämme tyylitiedoston. <br>Lisätään lopuksi tyhjä asiakirjan runkosäiliö.</p> <p>Kaikki, mitä tässä kuvailimme, on listauksessa nro 1:</p> <p><b>Listaus 1. HTML5-dokumentin perusrakenne</b></p><p> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Sijoittajat näkevät tulevaisuuden

Huomaa, että useimmat tunnisteet eivät ole nyt yhtä pitkiä kuin ennen. Tegu muuta ei tarvita kuin lang. Jos haluat sisällönkuvauskentän, kirjoita merkkisetti. Lisäksi tagille linkki ei tarvitse tarkentaa tyyppi.

Kehys on valmis, mutta meidän on liian aikaista näyttää sivua selaimessa. Siirrytään sivun semanttisiin elementteihin.

Sisällön merkitseminen

Laitetaan semanttiset lohkot kehykseen

Ollaan nyt tarkempia siitä, mitä sivulla tulee olemaan. Jatkamme seuraavasta: meidän on hyödynnettävä mahdollisimman paljon HTML5:n uusia semanttisia elementtejä.

Sivullamme näytetään koko teksti uutisista yrityksestä, jolle sivusto on omistettu. Siirtyminen siihen tapahtuu joko pääsivulta, jossa viimeisimmät uutiset julkaistaan, tai uutisarkistosta.

Laitetaan lohkot säiliöön

. Noudatamme näiden elementtien seuraavaa järjestystä:

– otsikko
– – h-ryhmä
– nav
– artikkeli
– – otsikko
- - "sisältö"
– – jakso
– – – otsikko
- - - "sisältö"
- alatunniste

Alussa meillä on lohko - sivun otsikko. jossa ryhmä otsikoita puhuu sivustosta. Sitten valikon semanttinen lohko. Tehdään valikon linkeistä fiktiivisiä. Tämän jälkeen artikkeli alkaa vastaavan semanttisen lohkon osoittamana. Se sisältää otsikkolohkon, johon merkitään artikkelin otsikko ja julkaisupäivämäärä. Seuraavaksi tulee artikkelin sisältö, johon lisätään uutisen kirjoittajan omat johtopäätökset. Tämä lisäosa on suunniteltu osioksi, ja siihen liittyy myös otsikkolohko ja sisältö. Sivun lopussa on lohko alatunniste, jossa julkaisemme lisätietoja sivujemme sisällöstä.

Kaikki tässä kuvailemamme on esitetty listauksessa nro 2. Emme tarjoa sivun koko koodia, vaan vain sen, mitä tagien välissä pitäisi olla …

.

Listaus 2. HTML5:n semanttisten lohkojen sijoittaminen

LLC Sarvet ja sorkat

Uutisen koko teksti

26. huhtikuuta

Sijoittajat näkevät tulevaisuuden

Mikään ei estä ihmisiä käyttämästä hareloopin sarvia. Hänellä ei kuitenkaan ole kavioita.

Mitä yleisö ajattelee

Todellisuudessa on olemassa vain Ubuntu, jolla on niin outo nimi "Harelope".

Nyt sivua voi tarkastella selaimessa. Se näyttää kuitenkin edelleen epämiellyttävältä. Mutta ei ole turhaa, että pidimme jo huolella ja sisällytimme tiedoston tyyleineen.

Maalataan julkisivu

Sivumme näyttää edelleen tylsältä ja houkuttelevalta. Tehdään hänelle meikki. Toteutetaan se tyylitiedostoomme styles.css Ensimmäinen asia, jonka teemme, on päättää koko asiakirjan fontista. Jos joku ei tiedä, niin oletetaan, että tutkittiin, mikä fontti on paremmin havaittavissa monitorin näytöltä, ja kävi ilmi, että se oli se, jolla ei ole serifejä. Näitä fontteja kutsutaan sans-serif- sans serif. Näitä ovat esimerkiksi: Arial, Helvetica, Verdana. Jatketaan, määritämme järjestyksessä säännöt sivumme kaikkien elementtien suunnittelulle. Jotta emme menisi liian edellä, hyödynnetään nyt muutama ominaisuus - varjoja ja pyöristettyjä reunoja lohkojen päällä.

Suurin osa siitä, mitä koodaamme tähän, oli saatavilla varhaisissa CSS-standardeissa. Listaamme uudet ominaisuudet.

laatikko-varjo
Tämä parametri määritetään lohkosivuelementille ja luo varjon sen ympärille. Ensimmäiset neljä numeroa ovat varjon lineaarisia parametreja, ne on ilmoitettu joko pikseleinä px tai muita lineaarisia yksiköitä ( em, pt) tai ilman niitä, jos koko on nolla. Ensimmäinen numero tarkoittaa varjon vaakasuuntaista heittämistä oikealle, jos haluat heittää sen vasemmalle, aseta negatiivinen luku. Seuraava on pystysuora alaspäin. Seuraava on varjon epäterävyyden määrä ja sitten varjon leviäminen. Lineaaristen mittojen jälkeen näkyy varjon väri ja jos haluat sisävarjon, niin avainsana upotettu. Jos yksi varjo ei riitä sinulle, toteuta varjofantasiasi pilkuilla erotettuna.

teksti-varjo
Tämä parametri on asetuksissaan samanlainen kuin edellinen, ainoa ero on varjonsironta ja sisäinen varjo. Ja kukaan ei estä sinua haaveilemasta pilkuilla eroteltujen varjojen määrästä.

border-radius (-moz-border-radius, -webkit-border-radius)
Lohkojen pyöristyssäde. Lohkolla voi olla neljä kulmaa, joten tässä parametrissa voi olla sama määrä elementtejä. Listattu myötäpäivään alkaen vasemmasta yläkulmasta. Suluissa olevien parametrien nimiä käytetään Mozilla-perheen selaimissa ja Webkit-moottorissa (Chrome, Safari). Kopioi siis säännössä määritetyt asetukset raja-säde myös näissä parissa parametrissa.

Suunnittelu, jonka keksimme ja koodaamme, näyttää listan nro 3 mukaiselta. Tämä koodi sinun täytyy laittaa tiedostoon styles.css.

Listaus 3. CSS uusille HTML5:n semanttisille elementeille

* ( font-family: Lucida Sans, Arial, Helvetica, sans-serif; ) body (leveys: 480px; marginaali: 0px auto; ) header.mainH ( -webkit-border-radius: 6px; -moz-border-radius: 6px-säde: 6px-box-shadow: 0 3px 5px 0 #AA4400 header h1; : 36 pikseliä marginaali: 0px #666; korkeus: 24px: 12px ) nav ul li (näyttö: 20px 10px; korkeus: 24px; reunus: kiinteä #ccc; ) ( väri: #EFD3D3; tekstin koristelu: ei mitään; fontin koko: 13 kuvapistettä; fontin paino: lihavoitu; ) nav ul li a:hover ( väri: #fff; ) artikkeli > otsikon aika ( font-koko: 14px; näyttö : lohkon leveys: 26px; taustaväri: #993333; väri: #fff; fontin paino: lihavoitu; -moz-border-radius: 6px; -webkit-border-radius: 6px; reunan säde: 6px; kellua: vasen; marginaali-ala: 10px; ) artikkeli > otsikon aikaväli ( font-size: 10px; font-weight: normal; text-transform: bigcase; ) article > header h1 ( font-size: 20px; float: left; margin-left: 14px; text-shadow : 2px 2px 1px #FFFFFF, 2px 2px 5px #888 molempia -säde: 6px 0 0 0; raja-säde: 6px 0 0 0;

Jos avaat hakemistosivusi nyt, se ei näytä niin tylsältä, katso kuva 1. Edelliseen näkymään verrattuna se on yksinkertaisesti SUPER

Kuva 1. Näkymä tyylitellystä sivusta

Jos sivu näyttää erilaiselta, se tarkoittaa, että avasit sen väärällä selaimella. "Väärällä" tarkoitan muuta selainta kuin Mozilla4+, Chrome11.0+, Opera11.10+, ne näyttävät sivun samalla tavalla - testattu.

Huomautus: Jos joku ei ymmärrä esimerkiksi listauksen sääntömerkintöjä, et ymmärrä, miksi sinun on käytettävä valitsimessa >? Kirjoita sitten kysymyksesi kommentteihin.