Säännöt HTML-dokumenttien rakentamiseen. HTML-sivun perusrakenne

HTML-peruskäsitteet

Ohjausrakenteet HTML-kieli (Hyper teksti Markup Language) kutsutaan tunnisteiksi (kuvaajiksi) ja ne lisätään suoraan asiakirjan tekstiin. Kaikki tunnisteet on suljettu kulmasuluissa. Välittömästi aloitussulun jälkeen sijoitetaan avainsana, joka määrittelee tunnisteen, esim.

HTML-tunnisteet voidaan muodostaa pariksi tai poistaa ne. Parittamattomat tunnisteet vaikuttavat koko asiakirjaan tai niillä on kertaluonteinen vaikutus siihen, missä ne lisätään. Parillisia tunnisteita käytettäessä dokumenttiin lisätään avaus- ja sulkemistunnisteet, jotka vaikuttavat niiden välissä olevaan asiakirjan osaan. Lopputunniste eroaa aloittavasta tagista siten, että siinä on "/"-merkki ennen avainsanaa (). Parilliset tagit suljetaan siten, että sisäkkäisiä sääntöjä noudatetaan:

Teksti

Aloitustunnisteeseen voidaan lisätä attribuutti, joka edustaa ylimääräistä avainsanoja, erotetaan tunnisteen määrittävästä avainsanasta ja muista attribuuteista välilyönnillä ja sijoitetaan tunnisteen päättävän ">"-merkin eteen. Joidenkin määritteiden käyttötapa edellyttää arvon määrittämistä attribuutille. Attribuutin arvo erotetaan attribuutin avainsanasta "="-merkillä ja on lainausmerkeissä.

Kun näytetään HTML-dokumentti Tunnisteita itsessään ei renderöidä, mutta ne vaikuttavat tapaan, jolla HTML-dokumentti renderöidään.

On kaksi tapaa luoda HTML-dokumentteja.

Ensimmäinen tapa on merkitä olemassa oleva tai asiakirjaa luodaan käsin. Tämä työ tehdään tekstieditorilla tai HTML-editorilla.

Toinen tapa on luoda asiakirja suoraan näytölle ja merkitä se automaattisesti. Tämä menetelmä ei vaadi HTML:n tuntemusta. Merkintä tehdään erityisellä WYSIWYG-periaatteella toimivalla editorilla, esimerkiksi FrontPage Expressillä.

Toinen menetelmä käyttää muotoilutyökaluja kuvaustyökalujen sijaan, mikä voi johtaa ei-toivottuihin seurauksiin.

HTML-dokumentin kopiointi suoritetaan selainohjelmilla, kuten Internet Explorerilla.

yksinkertaisin oikea asiakirja HTML-koodi, joka sisältää kaikki rakenteen määrittävät tagit, näyttää tältä:


Asiakirjan otsikko

Asiakirjan teksti

Tässä käytetyt avainsanat:

  • HTML - HTML-dokumentin alku ja loppu;
  • HEAD - otsikkoosion alku ja loppu;
  • TITLE - asiakirjan yleisen otsikon alku ja loppu;
  • BODY - asiakirjan rungon alku ja loppu.

Useimmat HTML-elementit kuvaavat osia dokumentin sisällöstä ja sijoitetaan tunnisteiden ja ( rakenteellinen elementti BODY).


Main toiminnallisia elementtejä HTML-dokumentti koostuu otsikoista ja kappaleista. HTML tukee kuutta tasoa otsikoita, jotka määritetään tunnisteilla alkaen - . Web-asiakirjassa ne näytetään eri fonttikokoisina.

Tavalliset kappaleet määritetään käyttämällä tunnistepari

HTML:llä ei ole keinoja määrittää kappaleen sisennys. Kappaleet erotetaan toisistaan tyhjä rivi. Sulkeva tagi

pidetään valinnaisena. Ymmärretään, että se tulee ennen tagia, joka määrittää seuraavan kappaleen. Jos tekstissä on rivinpäätemerkki, sitä käsitellään yksinkertaisena välilyöntinä, kun se hahmonnetaan selaimessa. Pariton tagi käytetään siirtymiseen toiselle riville
. Tunnisteen määrittämää vaakaviivaa voidaan käyttää kappaleen erottimena, esimerkiksi:

Tämä tunniste määrittää 10 pikseliä korkean vaakaviivaimen, joka kattaa puolet ikkunan leveydestä ja on sijoitettu oikealle.

Kun hyperlinkki on rakennettu Web-sivulle, asiakirjaa voidaan kutsua hypertekstiksi. Hyperlinkki voi tarkoittaa:

  • johonkin paikkaan dokumentissasi ( sisäiset hyperlinkit),
  • toiseen asiakirjaan palvelimellasi,
  • mielivaltaiseen objektiin missä tahansa Internet-osoitteessa.

Hyperlinkit voidaan muotoilla absoluuttisiksi tai suhteellisiksi. Hyperlinkin luomiseksi tarvitset sen asiakirjan osoitteen, johon linkki luodaan. Tätä osoitetta kutsutaan URL - Uniform Resource Locator.

Absoluuttinen URL on täydellinen Internet-osoite, joka sisältää kaikki tiedot, joita asiakas tarvitsee löytääkseen palvelimen ja kommunikoidakseen sen kanssa onnistuneesti.
Suhteellista URL-osoitetta käytetään osoitteeseen asiakirjassa tai asiakirjakokoelmassa samalla palvelimella.

Täydellinen Internet-osoite voidaan saada vain, kun perusosoite lisätään suhteelliseen osoitteeseen. Web-selain lisää tarvittaessa useimmissa tapauksissa itse tarvittavan perusosoitteen vastaanottamista varten täydellinen osoite Internetissä.

Suhteelliset URL-osoitteet käytetään yleensä HTML-dokumentin sisällä, esimerkiksi järjestämään siirtymistä sisällysluettelosta tiettyyn lukuun. Perusosoite voidaan määrittää käyttämällä HTML-dokumentin päässä olevaa kuvaajaa.

Absoluuttisia URL-osoitteita tulee käyttää aina, kun linkität asiakirjoihin toiselta Internet-palvelimelta.

Hypertekstilinkki määritellään pariliitoksella , joka sisältää vaaditun HREF=-attribuutin. Attribuutin arvo on sen asiakirjan URL-osoite, johon linkki osoittaa. Se voi osoittaa mielivaltaiseen asiakirjaan, joka sijaitsee missä tahansa julkisesti saatavilla olevassa verkkosolmussa, esimerkiksi:

Osoite on annettu tässä absoluuttisessa muodossa. Yleensä tämä lomake määrittää linkin ulkoiseen asiakirjaan. Suhteellista osoitetta käytettäessä linkkiä käsitellään sisäisenä, esimerkiksi:

Sisäisen linkin etuna on, että se pysyy toiminnassa, kun Web-sivuston osoite vaihtuu.
Hyperlinkin kuvaaja
joskus kutsutaan ankkuriksi (kuvaajan nimi itsessään on lyhenne englannin sanasta ankkuri).

.

Tämän määritteen arvo on mielivaltainen latinalaisten kirjainten ja numeroiden sarja, jota pidetään ankkurin nimenä. Jos haluat linkittää ankkuriin, sijoita sen nimi URL-osoitteen loppuun #-merkin jälkeen:

Kahvojen välissä ja se voi sisältää vain tekstiä, grafiikkaa ja otsikoita. Teksti välissä Ja kuvaukset, selaimet näyttävät yleensä värillisenä (sinistä käytetään oletusarvoisesti näihin tarkoituksiin), jotkut ohjelmat korostavat sitä. Kuvaajan attribuuttien avulla hyperlinkin tekstin väriä voidaan muuttaa.

Kun lisäät hyperlinkkejä Web-sivulle, ota huomioon seuraavat ohjeet.

  • Luo ilmeikäs hyperlinkkiteksti. Hyperlinkin tekstin tulee ymmärtää selvästi, mihin linkki johtaa. Hyperlinkin teksti ei ollut liian pitkä: ilmaise linkin tarkoitus lyhyesti ja ytimekkäästi.
  • Älä ylikuormita asiakirjaasi hyperlinkeillä. Lisää vain todella tarpeellisia linkkejä Web-sivun tekstiin. Muuten, kun käyttäjä yrittää tutustua kaikkiin osoitettaviin objekteihin, hän menettää hyvin nopeasti päättelysi langan.
  • Älä koskaan aseta kahta -kuvaajaa vierekkäin asiakirjan runkoon laittamatta niiden väliin jonkinlaista erotinta. Kun tällainen asiakirja näytetään, näiden hyperlinkkien tekstit yksinkertaisesti sulautuvat yhteen.
  • Kun olet luonut Web-sivusi, yritä katsoa sitä käyttäjän silmin. Ovatko kaikki hyperlinkit samalla tyylillä?

Linkkien järjestämisen ja tekstin muotoilun tärkeimmät kuvaukset on esitetty taulukossa.

HTML-koodi on verkkosivun merkintä, joka on tehty HTML-kielellä ja mukaan lukien erikoismerkkejä(tunnisteet), joita selain käyttää rakennelman pohjalta tekstikoodi. Tämä kieli vastaa siitä, kuinka tarkalleen hyperteksti näkyy sivuston sivuilla.

HTML (Hyper Tekstin merkintä Language) on hypertekstinkuvauskieli. Hyperteksti on kehityksensä velkaa Internetille, vaikka sitä ei luotukaan sitä varten. HTML mahdollistaa siirtymisen yhdestä tekstistä toiseen, ja hienoa on, että nämä osat voidaan tallentaa täysin erilaisille tietokoneille.

Html on sivunkuvauskieli, ei ohjelmointikieli. IN annettua kieltä niitä ei ole loogisia toimintoja ja siitä on mahdotonta tehdä matemaattisia laskelmia. HTML-sivujen tunniste on .html tai .htm, ja ne luovat selaimet - IE, Mozilla, Firefox, Google Chrome, Yandex Chrome, ooppera jne.

HTML-dokumentin rakenne:

1. Ensimmäinen asia, joka tulee dokumenttiin, on HTML-version ilmaisu (ensimmäinen rivi). varten oikea toiminta olisi ilmoitettava tämä rivi kun suunnittelet verkkosivua.

3. sitten tulee sivuston yläosan alue (otsikko). Tunnistetta käytetään tähän. Otsikossa ilmoitamme sivumme nimen sijoittamalla sivun otsikon tagien väliin ja / Seuraava on merkitty HTML-koodaus asiakirja (viides rivi). Tämä tehdään kyrillisten aakkosten heijastamiseksi oikein. Suljetaan otsikkoalue tagilla

4. Sisällönkuvauskenttä "description" - yhteenveto sivu, tarkoitettu hakukoneet. Tämä tunniste on tärkeä hakukoneoptimointi 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 tagilla ja sulkeutuu vastaavasti tagilla. Web-sivun runko sisältää yleensä pääsisällön - tekstiä, videota, ääntä ja muuta tietoa.

Mitä CSS-tiedostot ovat ja miksi niitä tarvitaan? Miten CSS-tiedosto luodaan?

Cascading Style Sheets (tämä on lyhenne CSS) tai CSS-tyylisivut - kieli ulkoinen suunnittelu kielellä kirjoitetut verkkosivut HTML-merkintä.

Miksi CSS:ää tarvitaan?

Helpottaaksemme verkkovastaavien elämää ja parantaaksemme sivuston suunnittelua, CSS-taulukot vastaa verkkosivujen suunnittelusta. CSS:n tulo mahdollisti verkkodokumenttien sisällön ja suunnittelun erottamisen. Tämä nopeutti verkkosivustojen luomisprosessia läsnäolon vuoksi yhtenäisiä tyylejä ilmoittautuminen suuri määrä sivuja.



Lisäksi peräkkäisten tyylisivujen avulla voidaan nopeasti muuttaa verkkoresurssin ulkoasua tai tehdä siihen muutoksia. Joten voit nyt nopeasti hallita valtavan määrän web-sivujen suunnittelua yhdellä CSS-tiedostolla.

Tyylisivujen tärkeä etu on web-sivun suunnittelu erilaisia ​​laitteita. Kannattaa muistaa, että eri laitteille on olemassa erilaisia ​​tyylisivuja. Toisin sanoen useita malleja luodaan kerralla (tulostusta, tietokoneen näytöllä katselua, mobiililaitteet). Riippuen siitä, millä laitteilla sivusto on tarkoitus näyttää, CSS kirjoitetaan jokaiselle laitteelle kerran sivustoa luotaessa.

ilman CSS-tyyli olisi määritettävä jokaiselle yksittäiselle verkkosivulle. Nyt jokainen sivuston sivu linkittää CSS-tiedostoon. Jos haluat muuttaa mitä tahansa sivustomme ulkoasua, sinun on tehtävä muutoksia CSS-tiedoston koodiin.

CSS:llä on siis valtavia mahdollisuuksia mitä tulee verkkoresurssien suunnitteluun. Ja jos aiot hallita verkkosivustojen rakentamista, et voi pärjätä ilman CSS-tietoa. CSS-syntaksi taulukoita on helppo hallita. Joten voit vapaasti aloittaa sen opiskelun oppiaksesi tekemään paitsi merkityksellisiä myös kauniita verkkosivustoja.

Kuinka CSS-tiedosto luodaan:

Tiedosto CSS-tyylejä- tämä on normaalia tekstitiedosto, täsmälleen sama kuin voimme luoda missä tahansa tekstieditorissa "Notepad", "MS Word" jne.

Ainoa asia, joka erottaa tyylitiedoston muista tekstiasiakirjoista, on sen tunniste, joka näyttää muodossa *.css.

Voit siis luoda CSS-tyylitiedoston yksinkertaisesti muuttamalla tekstitiedoston tunnistetta:

Tapa 1: Muuta vain tekstitiedoston tunniste.

avaa mikä tahansa tekstieditori, esimerkiksi "Muistilehtiö". Valitse päävalikosta tiedosto – tallenna nimellä ja tallenna tekstitiedosto resoluutiolla .txt. Nyt sinun on vaihdettava tämän tiedoston tunniste *.txt:stä ​​*.css:ksi. Nyt CSS-tiedoston luomiseksi sinun on vain nimettävä tiedosto uudelleen muuttamalla sen tunniste css:ksi. Tämän jälkeen saamme CSS-tyylitiedoston.



Tapa 2: Luo tyylitiedosto Dreamweaver-koodieditorilla. siinä erikoistoiminnot luodaksesi CSS-tyylitiedostoja. Ohjelman avaamisen jälkeen näkyviin tulee päävalikko, jossa voit luoda CSS-tiedoston. Kun tiedosto on luotu, se voidaan tallentaa päävalikon "Tiedosto-Tallenna nimellä..." kautta. Samanlainen prosessi CSS-tiedostojen luomiseen on saatavilla muissa koodieditoreissa.

Hyvää päivää kaikille! Tänään opimme luomaan ensimmäisen kehyksemme HTML-sivut. Tai pikemminkin, katsotaanpa html-sivun perusrakennetta ja selvitetään, mistä se koostuu. Mutta ensinnäkin, puhutaanpa hieman tunnisteista.

Mikä on tagi HTML:ssä?

Merkitse tämä peruselementti HTML-kieli. Eli HTML koostuu nimenomaan tageista, ja HTML:n oppimiseksi riittää, että opiskellaan yleisimmin käytetyt perustunnisteet. Verrattuna peräisin olevaan esimerkkiin oikeaa elämää, silloin HTML-koodi on kuin tiili talolle. Tiili on tärkein elementti, jota käytetään talon rakentamiseen. Se on sama HTML:ssä, tunniste on peruselementti html:n luominen sivuja. Tagin avulla kerromme selaimelle, kuinka html-sivun sisältö näytetään oikein.

Tunnisteita on kahden tyyppisiä: parilliset tagit ja yksittäiset tunnisteet:

  • Parilliset tagit ovat tunnisteita, jotka koostuvat avaus- ja sulkemistunnisteesta. Lyhyesti sanottuna nämä ovat tunnisteita, joissa on sulkeva tagi. Esimerkkejä: ja ;
  • Ja ; Ja ; Ja ; ;
    .

Yksittäiset tagit ovat tunnisteita, joilla ei ole päättävää tunnistetta. Esimerkkejä yksittäisistä tunnisteista: html-sivulla on perusrakenne. Perusrakenne

näyttää samalta sivuston kaikilla sivuilla. Ainoa asia, joka voi vaihdella sivujen perusrakenteessa sivustosta toiseen, on DOCTYPE-elementti. Lue tämä artikkeli saadaksesi selville, mitä DOCTYPE on ja mitä tyyppejä on olemassa. Jos emme määritä tätä elementtiä, selain näyttää sivun väärin.

Tältä HTML-sivujen peruskehys näyttää:

Kotisivu Jos nyt avataan tämä sivu

selaimessa se on tyhjä. Lisätään nyt muutama koodirivi body-tagin sisään ja avataan tämä sivu uudelleen selaimessa.

Ensimmäinen html-sivuni


Tältä sivu näyttää selaimessa sen koodin vaihtamisen jälkeen:

Analysoidaan tämä esimerkki

Sivun alussa, ennen html-tunnistetta, ilmoitamme aina DOCTYPE, eli asiakirjan tyypin.< html>Jokainen html-sivu alkaa tunnisteella< head>ja päättyy tagiin ja koostuu otsikosta< body> .

ja ruumiit

  • Palveluelementit, jotka eivät näy sivulla selaimessa, on kirjoitettu otsikon sisään. Periaatteessa nämä ovat:
  • Sisällönkuvauskentät. Tärkeimmät ovat koodaussisällönkuvauskenttä, jonka kautta ilmoitamme sivun koodauksen (), hakukoneiden sisällönkuvauskentät, tämä on sisällönkuvauskenttä, jossa on sivun kuvaus (kuvaus) ja sivun avainsanat (avainsanat).< title>Sivun otsikko, joka ilmoitetaan tagin sisällä
  • . Tämä otsikko näkyy selaimen välilehdessä.< style type=” text/ css”>Lohko sisäisillä tyyleillä.
  • Sisäiset tyylit.< link />Yksi tunniste
  • , jonka kautta yhdistämme ulkoiset tiedostot.< script src =" library.js " type =" text/javascript " >Ja myös lohko johon he kirjoittavat erilaisia ​​skriptejä

JavaScript.< body>Tagin sisällä

sivun sisältö on kirjoitettu. Sisältö voi sisältää tekstiä, kuvia, taulukoita, luetteloita, linkkejä ja muita elementtejä, jotka näkyvät sivulla selaimessa.< BODY>, < bOdY>,< Body>Tunnisteiden nimet voidaan kirjoittaa joka tapauksessa, eli jos kirjoitamme< body>tai< body> .

Luulen, että siinä kaikki. Tästä pienestä mutta erittäin tärkeästä artikkelista opit, miltä html-sivun perusrakenne näyttää.

HTML on verkkosivuston merkintäkieli. Monet ihmiset pitävät sitä ohjelmointina, mutta se ei ole sitä. HTML ei sisällä mitään muuttujia, laskelmia, taulukoita ja muita elementtejä, joita löytyy millään ohjelmointikielellä.

Käyttämällä HTML:ää kehittäjä voi vain luoda ulkonäkö sivusto. On tärkeää ymmärtää, ettei verkkosivustoa ole ilman merkintöjä. HTML on verkkosivujen luomisen perusta. Kaikki muut toiminnot on lisätty eri ohjelmointikielillä.

HTML-asiakirjan luominen

Voit luoda yksinkertaisen verkkosivun millä tahansa editorilla. Jopa Notepad käy. Aloittelevalle kehittäjälle on suositeltavaa käyttää muita editoreja, joissa on automaattinen korvaustoiminto ja muita vinkkejä. Tämän ansiosta voit luoda valmiita pöytiä, linkkejä, kuvia ja muita elementtejä. Mutta Notepadissa sinun on kirjoitettava jokainen kirjain manuaalisesti.

Pääsääntöisesti Notepadia käytetään vain tapauksissa, joissa ei ole muita työkaluja käsillä. Ensin se luodaan tekstiasiakirja ja tallennetaan sitten html-muodossa. Kaikilla sivuston sivuilla on oltava html-tunniste.

HTML-kieli on hierarkkinen. Eli HTML-dokumentilla on erityinen rakenne. Mikä se on? Katsotaanpa sitä alla selvyyden vuoksi.

HTML-dokumentin rakenne. Esimerkki

Rakenne on aina sama. Jos haluat muuttaa jotain, selain ei pysty käsittelemään sitä. Seurauksena on, että et saa sitä, mitä tarkoitit.

Yllä oleva kuva näyttää minkä tahansa html-tiedoston rakenteen. Ensimmäinen kohde ilmaisee tiedostotyypin. Tämä tunniste määritetään kerran. Jos käytät erikoistoimittajat, koko rakenne luodaan automaattisesti. Sinun on säädettävä oletusarvoja.

HTML-dokumentin rakenne - päätunnisteet:

Koko sivuston kehys koostuu näistä kolmesta tunnisteesta. Kiinnitä huomiota kuvaan. Kaikilla näillä tunnisteilla on lopputunniste "/"-merkillä. Jos kirjoitat käsin, totu laittamaan molemmat tunnisteet kerralla - avaaminen ja sulkeminen.

Yllä sanottiin, että verkkosivujen tunniste on .html. Eli jos luot tekstidokumentin, mutta kirjoitat oikean koodin, selain näyttää silti vain tekstiä sinulle. Koodin muuntamista ei tehdä.

pään osa

Kohdan 3 alla oleva kuva näyttää pääosan. Tämä osio sisältää huoltotietoja. Voit esimerkiksi määrittää koodauksen (kohta 4) ja sivun otsikon (kohta 5).

Otsikko pitää aina olla. Ilman sitä mikään hakukone ei pysty määrittämään verkkosivun sisällön (tekstin) nimeä. Ja tämä on huono verkkosivuston edistämiselle. Lisäksi selain ei näytä sivun otsikkoa yläreunassa. Tästä on haittaa käyttäjälle.

Html-dokumentin rakenne on sellainen, että se näkyy vain otsikkoosassa. Jos tunniste on määritetty body-osiossa tai sen jälkeen, käsittelijä ei kiinnitä siihen huomiota.

Lisäksi head-osiossa on tietoja skriptien yhdistämiseen, tyylitiedostot, hakukoneiden ohjeet tai muut tiedot, joita käyttäjän ei pitäisi nähdä, mutta jotka ovat tärkeitä selaimelle tai ohjelmoijille.

Yhdistä tyylejä

HTML-dokumentin rakenteen avulla voit sisällyttää tyylejä eri tavoin. Lisäksi ne voidaan kirjoittaa erikseen jokaiseen elementtiin. Mutta tätä menetelmää ei suositella, koska koodista tulee liian suuri ja hankala.

Tiedosto yhdistetään seuraavasti.

Attribuutti href määrittää tiedoston polun. Jos polussa on virhe, tyylit eivät lataudu. Myös type-attribuutti vaaditaan, mikä osoittaa, mikä se on css-tiedosto.

Toinen vaihtoehto on määrittää tyylit suoraan pääosassa.

Mutta tämä vaihtoehto ei myöskään ole kovin suositeltavaa. Nämä menetelmät ovat hyvin erilaisia ​​siinä mielessä, että css-tiedosto voi olla yksi koko sivustolle, ja kaikki siihen tehdyt muutokset otetaan välittömästi käyttöön kaikilla sivuilla. Ja jos käytät yllä olevassa kuvassa esitettyä menetelmää, sinun on tehtävä muutoksia kaikkeen olemassa oleville sivuille sivusto.

Jos luotu luokka käytetään vain yhdellä sivulla, tämä vaihtoehto sopii sinulle.

Skriptien yhdistäminen

Skriptit yhdistetään seuraavasti.

Tässä vaaditaan kaksi attribuuttia: type ja src. Ensimmäisessä osoitamme, että se on Javascript-tiedosto, ja toinen - missä tiedosto sijaitsee. Jos teet kirjoitusvirheen, mikään ei toimi.

runko-osa

Html-dokumentin rakenne on sellainen, että käyttäjälle näkyvää sisältöä täytyy sijoittaa vain tekstiosaan. Tunnisteen nimi puhuu puolestaan.

Tässä näkyy koko sivun pääkoodi, joka voi sisältää rajattoman määrän elementtejä. Mutta mitä pidempi koodi on, sitä kauemmin sen käsittely kestää.

Katsotaanpa yleisimmät tunnisteet, joita voidaan käyttää kehon alueella. Pääasiallisia ei ole montaa. Opit kaiken muun tietosi ja käytäntösi kasvaessa.

Päätunnisteet

HTML-dokumentin rakenne vaatii pakollisen kirjoituselementtien järjestyksen. Tunnisteet tulee aina ympäröidä suluilla reunoissa. Ilman tätä selain ei ymmärrä, että tämä on tunniste. Aloitussulussa on aina elementin nimi (tag). Jos sallit välin< и именем, то браузер посчитает это текстом.

Katsotaanpa esimerkkiä kuvatunnisteesta. Huomaa, että tämä tagi ei ole päättävä tunniste, toisin kuin linkit, kappale ja monet muut.

Attribuuttien järjestyksellä ei ole väliä. Mutta niiden kirjoittaminen (suunnittelu) on erittäin tärkeä. Aina ensin menee nimi attribuutti, sitten yhtäläisyysmerkki ja sitten attribuutin arvo kirjoitetaan lainausmerkeissä. Arvo voi olla erilainen - digitaalinen tai teksti.

Kaikkien tunnisteiden src-attribuutti osoittaa ladattavan tiedoston polun. alt-attribuutti osoittaa kaikissa elementeissä lyhyt kuvaus. IN tässä tapauksessa valokuvalintu.jpg on ladattu kuvauksella - valokuva linnusta.

Lisäksi voit määrittää mitat, vain leveyden tai korkeuden, otsikon, tasauksen, tyyliluokan tai reunan.

Katsotaanpa muita päätunnisteita, jotka on määritetty body-osiossa.

Tarkoitus

Kuvat

Rivitä teksti uudelle riville

Lihavoitu teksti

Yliviivattu teksti

Alleviivattu teksti

Kuinka voit kuvitella tämän kaiken päässäsi?

Aloittelevat kehittäjät eivät aina voi heti kuvitella tätä kaikkea spekulatiivisesti. Katso muutama esimerkki verkkosivun rakenteesta, niin ymmärrät varmasti.

Yleinen rakenne HTML-dokumentti.

HTML:n perusteet (Hypertext Markup Language)

Kuten mikä tahansa muu ohjelmointikieli, HTML sisältää tietyn standardoidun rakenteen ohjelman - tässä tapauksessa HTML-dokumentin - rakentamiseen. Tämä rakenne kuvaa useiden pakollisten lohkojen sekvenssin, jotka sisältävät suoraan ohjelmakoodin.

HTML-ohjeita kutsutaan "tageiksi" (englanniksi tag - mark). HTML-tunnisteet on suljettu kulmasuluissa, syntaksi niiden kirjoittamiseen on yleinen näkemys näyttää siltä. Tulkki käsittelee kaikkia esineitä, joita ei ole suljettu kulmasuluissa tekstielementtejä, näyttää ne tietokoneen näytöllä "sellaisenaan".

HTML-dokumentin rakenne näyttää tältä:

HTML-dokumentti

Otsikko

HTML:llä on toinen merkittävä ominaisuus, joka erottaa sen muista ohjelmointikielistä: melkein kaikki tämän kielen tagit, lukuun ottamatta joitain erityisesti määriteltyjä tapauksia, on paritettu. Tällainen pari koostuu "avaamisesta" ja "sulkevasta" tunnisteesta, jotka eroavat toisistaan ​​vain viimeinen hahmo"/" Tulkki käsittelee kaiken, mikä sijaitsee avaus- ja sulkemistunnisteiden välissä kyseiselle tunnisteelle määritetyn algoritmin mukaisesti. Yleensä ohjelmisto HTML-merkkijono avaus- ja sulkemistunnisteiden kanssa se näyttää tältä:


käsiteltyä arvoa

Annettu HTML-ominaisuus antaa sinun käyttää periaatetta, että yksi tagi asetetaan sisäkkäin, kun yhden komennon käsitelty arvo voi olla toinen komento. Tässä on yksinkertainen esimerkki kahden tunnisteen sijoittamisesta toistensa sisään:

käsiteltyä arvoa

Kun työskentelet HTML-koodin kanssa, sinun on muistettava yksi yksinkertainen sääntö:

Jos jossain ohjelman tekstissä on alkutunniste, tulee olla myös päättävä tagi. Tämän säännön noudattamatta jättäminen aiheuttaa virheen, kun selaimen tulkki käsittelee tällaista asiakirjaa.

Web-sivun sisäisen koodin tärkein, globaali rakenne on "HTML-dokumentti", jonka määrittelyä varten on olemassa erityinen joukkue, joka on suunniteltu "selitämään" selaimelle, että se käsittelee HTML-asiakirjaa, ei tekstiä tai esim. graafinen tiedosto. Tätä komentoa kutsutaan "tagiksi" huipputasoa"ja se on kirjoitettu seuraavasti:

Sisältö

Ylätason tagi on pari, ja sen sisältö on juuri koko asiakirjan muodostava HTML-koodi. Aloitustunniste kirjoitetaan HTML-dokumentin ensimmäiselle riville ja lopputunniste kirjoitetaan aivan viimeiselle riville.

Seuraava elementti on "Dokumentin otsikko". Web-sivun otsikko sisältää kattavaa tietoa itse asiakirjasta ja joskus myös erityisiä kääntäjäohjeita, jotka kehottavat selaimeen sisäänrakennettua tulkkia HTML-säännöt, jonka mukaan sivun muodostava koodi tulee käsitellä. Otsikon sisältö ei näy selaimessa, eikä se vaikuta asiakirjan ulkoasuun. Nämä ovat palvelutietoja, joita tarvitaan, jotta selain toimii oikein. Otsikkotunnisteen yleinen syntaksi näyttää tältä:

Sisältö

HEAD-osio seuraa tunnistetta suoraan HTML-dokumentissa ja on toinen pakollinen komento, joka on sisällytettävä Web-sivun koodiin.

« Ulkoinen otsikko" on tunnisteen sisäkkäinen komento. Ulompi otsikkomuistomerkki on kirjoitettu seuraavasti:

Ulkoinen otsikko


Ulompi otsikko näkyy selaimen ylämarginaalissa sivun otsikkona, kun se avataan. Tunnistearvo lisätään oletuksena vastaavaan valintaikkunaan, kun käyttäjä lisää asiakirjan "suosikit"-kansioon.

Verkkosivun koodin viimeinen rakennekomponentti on "Dokumenttiteksti". Tagien kuvaama dokumentin runko sisältää kaiken pääsivun merkintäkoodin, joka määrittää HTML-dokumentin näyttämisen näyttöruudulla. Pääteksti, piirrokset, navigointielementit ja kaikki, mitä haluat näyttää sivustosi vierailijoille, on sijoitettu tämän tagin sisään.

Siten, tarvittavat elementit HTML-dokumentin koodi näyttää tältä:

Sivun otsikko

Tunnisteet ja attribuutit.

Kuten edellä mainittiin, tagi on HTML-komento, joka kertoo selaimen tulkille, kuinka sen tulee käsitellä kutakin tiettyä direktiiviä vastaava arvo.

Tunnisteella voi olla attribuutti tai ei sitä. Esimerkiksi ylätason tagilla ei ole attribuutteja, ja se on uuden taulukon luontirivillä

lauseke "BORDER="1" WIDTH="100"" on tunnisteen attribuutti
.

Yleensä tallennussyntaksi on HTML-tunniste yhdessä sen ominaisuuksien kanssa näyttää tältä:

IN tässä esimerkissä ensimmäinen tag-attribuutti

on "BORDER"-parametri, toinen attribuutti on "WIDTH"-parametri, ja niiden arvot ovat "1" ja "100". Attribuuttien arvot on suljettu suoriin lainausmerkkeihin, jotka on kirjoitettu symbolilla "". Jos tunnisteen attribuutin sisällä on toinen arvo lainausmerkeissä, eli jotkut lainausmerkit ovat sisäkkäisiä muiden sisällä, on suositeltavaa käytä yksittäisiä lainausmerkkejä, jotka on kirjoitettu symbolilla "sisäisinä" lainausmerkkeinä """ . Yleensä tällainen ilmaus näyttää tältä:


HTML-kielen määrittelyssä voit jättää lainausmerkit pois seuraavat tyypit attribuutit:

Vain pienillä tai isoilla kirjaimilla kirjoitetut attribuutit Latinalainen aakkoset eikä sisällä muita symboleja, kuten numeroita.

Attribuutit, jotka koostuvat vain numeroista 0-9.

Attribuutit, jotka ilmaisevat ajanjaksoja.

Esimerkiksi attribuuttien kirjoittaminen BORDER="1" tai ALIGN="CENTER" voidaan esittää muodossa BORDER=1 ja ALIGN=CENTER.