Mikä on html:n ja css:n perusta. HTML: Perusteet aloittelijoille

HTML ei määritelmän mukaan voi olla ohjelmointikieli, kuten monet ohjelmointiin kokemattomat ihmiset virheellisesti uskovat. HTML-kieli on periaatteessa luonnostaan ​​virheellinen muotoilu. Sitä pitäisi kutsua hypertekstin merkintäkieleksi, koska sitä HTML tarkoittaa - HyperText Merkintäkieli. Yksinkertaisesti sanottuna HTML on sarja tunnisteita. Tunniste puolestaan ​​on ohjaussana, tärkein. Tunnisteet tarjoavat mahdollisuuden antaa vakioulkoisille teksteille muotoiltu ulkoasu, eli korostaa ne kursiivilla, lihavoitu, korostaa tai tehdä jotain muuta. Tee kuitenkin erilaisia ​​toimia tekstien yli voit vain erikoistuneissa selainohjelmat, jonka ansiosta todella matkustat ympäriinsä globaali verkosto Maailmanlaajuinen Web. Nämä ohjelmat näyttävät yhden tekstin, joka on jo muutettu, ja HTML-tunnisteet, joita käytetään muokkaamiseen, ne piiloutuvat. Ymmärtääksesi kaiken tämän paremmin ja ymmärtääksesi nopeasti, mistä puhumme, napsauta tällä sivulla hiiren kakkospainikkeella ja valitse kohta " Lähdekoodi"tai jotain vastaavaa. Sama sivu ilmestyy eteesi todellisessa muodossaan.

HTML-koodin luomiseen voit käyttää tavallisia tekstieditoreja, ja voit myös käyttää visuaalisia muokkausohjelmia, joita kutsutaan usein visuaaliseksi. Suurin ero tämäntyyppisten editorien välillä on se, että visuaaliset on erityisesti luotu HTML-koodin, JavaScript-, CSS- ja PHP-koodien sekä joidenkin muiden kirjoittamiseen, nimittäin web-ohjelmointiin. Lisäksi tällaiset editorit antavat sinulle mahdollisuuden nähdä välittömästi mitä olet tehnyt ohjelmassa ja tunnistaa (näytä) painetussa koodissa tehdyt virheet. Suosittelemme, että kirjoitat koodin suoraan omin käsin, ja visuaaliset editorit yksinkertaistavat työtäsi. Voit käyttää Macromedia Dreamweaver 8 -selainta. Vaikka tämä ohjelma ei ole uusimpien joukossa, sen toimivuus riittää sinulle ja jopa yli. On parasta tehdä tämä seuraavasti: kirjoita koodi Dreamweaver-ohjelmaan, tallenna ja napsauta "Näytä selaimessa" -painiketta, jossa voit itse muuttaa selainsarjaa. Palaa seuraavaksi Dreamweaveriin ja jatka muokkausprosessia. Tässä paikassa näet murtuman Macromedia Dreamweaver 8:lle. Kerroimme siis sinulle työkaluista. Siirrytään seuraavaksi suoraan HTML-tunnisteisiin.

Ensin tutustutaan sivun rakenteeseen HTML-koodissa tai pikemminkin niihin elementteihin, joiden on aina oltava tiukasti siinä.

Muuttumattomat sivutunnisteet HTML-koodissa:

, , , , ,

Huomaa, että monet, jotta ohjelma tuottaa HTML-koodin sisään tekstimuoto, laita avauskulmasulkeen jälkeen tyhjä, eli välilyönti. Sinun ei pitäisi tehdä tätä, kun kirjoitat koodia!

Huomasit luultavasti heti, että kaikki tunnisteet on yhdistetty toisiinsa nähden. Yksi tagi avautuu ja toinen sulkee sen. HTML-koodissa lähes kaikki tunnisteet on yhdistetty. Niiden välinen ero on se, että sulkevan tagin edessä on kauttaviiva /. Näitä tunnisteita kutsutaan myös konttitunnisteiksi, koska tietojen väliin on mahdollista asentaa muita tunnisteita, ikään kuin ne olisi määritelty säilössä. Saatat jo nähdä itse, kuinka muut sijoittuvat tunnisteiden joukossa. Tunnisteiden nimet saa tulostaa sekä isolla että isoilla kirjaimilla, tässä ei tule olemaan eroja. Tällaisilla merkinnöillä, kuten ohjelmalla, ei ole mitään merkitystä, ja se tulkitsee ne samalla tavalla.

Mitä ovat muuttumattomat tunnisteet sivulle HTML-koodissa? Tarkastellaan tätä asiaa yksityiskohtaisemmin.

Aloitus- ja sulkemistunnisteet välitetään visualisointia varten suunnitelluille ohjelmille. hypertekstisivut ja muiden selaimien tiedot, että ne toimivat erityisesti hypertekstimateriaalien kanssa. Jokainen html-koodin dokumentti alkaa aina kirjaimella ja päättyy . Tämä tarkoittaa, että näiden kahden tagin välissä on kokonainen html-koodi.

Tagit sisältävät hypertekstimateriaalin otsikon. Se sisältää tietoja sivusta html-koodina. Periaatteessa näitä tageja ei vaadita, vaikka niitä ei olisikaan, selaimet tulkitsevat html-materiaalisi täydellisesti. Jos kuitenkin päätät olla kirjoittamatta otsikkoa dokumenttiin, kirjoita silti . Tämä siirto on tarpeen yhteensopivuuden vuoksi eri selainmuunnelmissa. Ehdottomasti jokaista näissä tunnisteissa olevaa merkkiä ei millään tavalla pure selain. Tämä ei sisällä vain tietoja tunnisteista, jotka sisältävät html-materiaalin nimen (nimi sisältyy ylempi alue selainpaneeli). Tämä voi kuitenkin vaikuttaa HTML-dokumentin yleisilmeeseen, siihen, miten se esiintyy verkossa ja miten se luokitellaan hakukoneiden hierarkian mukaan. Lisätietoja hypertekstimateriaalin otsikkoon sijoitetuista tunnisteista käsitellään myöhemmin.

Materiaalin koko pointti on html-koodi sijoitettu ja tunnisteet. Tämä paikka sisältää ehdottomasti kaiken, mistä HTML-dokumenttimme koostuu ja mitä harkitsemme sitä laajentaessamme (graafiset kuvat, tekstitiedot, painikkeet ja muut elementit). Tämä on sivun tärkein "runko" tai perusta.

Muut html-materiaalin luomisessa käytetyt tunnisteet sijaitsevat kaikkien vaadittavien muuttumattomien tunnisteiden sisällä. Lähes kaikki html-tunnisteet sisältävät erilaisia ​​parametreja ja attribuutteja, joiden avulla voit luoda tiedot uudelleen täsmälleen siinä muodossa, jossa se esitettiin ja kehitettiin. Voit tulostaa esimerkiksi:

missä on itse tunniste, bgcolor on tunnisteen attribuutti, "#FF0000" on merkitys tästä ominaisuudesta. Tunnisteella on useita attribuutteja.

Ja siten koko sivun sävy muuttuu punaiseksi.

Kiinnitä tässä huomiota siihen, että tagiattribuutit (kaikki) ja niiden merkitys sijoitetaan alkutunnisteeseen (sillä ei ole kauttaviivaa), eikä koskaan lopputunnisteeseen.

Näin opit html-sivun muuttumattomista tunnisteista. Mutta ennen kuin siirrymme tutkimaan muita, pysähdytään pieni poikkeama.

Käyttäen hankittua tietoa, vähennettynä kaikenlaisista perusasioita käsittelevistä käsikirjoista HTML-kieli aloittelijoille käytännön toiminnassa olemme tunnistaneet suurimman ja erittäin vakavan virheen, jonka monet tämän kirjallisuuden kirjoittajat ovat tehneet. Suunniteltu yksinomaan aloittelijoille, kaikki nämä opetusvälineet ja opetusohjelmat opettavat HTML:n perusteita peräkkäin, alkaen hypertekstiotsikkotunnisteista ( ) ja jatkaen dokumentin runkotunnisteilla ( ). Pohjimmiltaan tämä kaikki on tietysti erittäin oikein. Kuitenkin, kuten meidän käytännön kokemusta, aloittelijoille tämä reitti HTML:n perusteiden oppimiseen ei ole käytännöllinen. Tutkiessaan lukemattomia itselleen täysin epäselviä otsikkotunnisteita aloittelija ei voi nähdä harjoituksensa tuloksia, koska selain ei tulkitse näitä tunnisteita, eikä hän voi käyttää monia niistä luodessaan millään tavalla (varmasti koulutuksen alussa). Tällä tavalla jokainen aloittelija tuhlaa vain aikaa ja energiaa, ja mikä tärkeintä, halua tehdä mitä tahansa tulevaisuudessa ja oppiako HTML:ää ollenkaan. Lisäksi ajatus siitä, että vain kokeneet webmasterit voivat tehdä resurssien kehittämistyön suurella rahalla, juurtuu lujasti aloittelijoiden kokemattomiin päihin. Siksi suosittelemme jättämään kaiken hetkeksi käsittämättömäksi ja jatkamaan eteenpäin. Sitten, kun olet käsitellyt kaiken ymmärrettävän, voit omaksua loput.

Hei kaikki!!! Olen erittäin iloinen, että päätit valloittaa HTML-perusasioiden ja tämän korkeudet oikea valinta. Loppujen lopuksi, ennen kuin luot ensimmäisen verkkosivustosi, sinun on tiedettävä HTML:n perusteet. Lisäksi joudut käsittelemään useammin kuin kerran HTML-koodaus verkkosivuilla. Suosittelen tsekkaamaan HTML oppitunteja aloittelijoille blogissani, ja takaan, että tämän kurssin suorittamisen jälkeen pystyt helposti luomaan web-sivun tai jopa verkkosivuston itse.

Aloitetaan! Otetaan ensin selvää
HTML – (englanniksi. H ypert ext M arkup L kieli) on hypertekstikuvauskieli. Sen kehitti ensimmäisen kerran brittiläinen tiedemies Tim Berners-Lee vuosina 1991-1992. HTML oli tarkoitettu vain tekstin, kuvien ja taulukoiden merkitsemiseen verkkosivuille. Nyt ohjelmointikieliä, kuten JavaScript ja VBScript, voidaan lisätä myös HTML-dokumenttiin.

HTML ei ole ohjelmointikieli, se on tarkoitettu vain tekstidokumenttien merkitsemiseen.

varten HTML:n oppiminen sinulla on vain oltava selain ja tavallinen muistilehtiö tai .
Avaamaan Normaali muistilehtiö, tee tietokoneellasi seuraavat toimet: "Käynnistä" => "Ohjelmat" => "Lisävarusteet" => "Muistilehtiö" .

Jos olet kuullut ohjelmista, jotka helpottavat työtäsi HTML:n kirjoittaminen koodi ( Microsoft FrontPage, Adobe Dreamweaver), en suosittele niiden käyttöä tässä vaiheessa koulutusta. Kirjoita kätesi tavalliseen muistivihkoon tai sisään tekstieditori Notepad++, ja kun suoritat tämän kurssin, voit käyttää kiihdytysohjelmia. Tilaa blogini päivitykset ja lue käyttöohjeet Microsoftin ohjelmat FrontPage, Adobe Dreamweaver.

Paremman ymmärtämisen vuoksi olen valmistellut esimerkin. Katso tarkkaan kuvaa:

Selitys.

1). Mikä tahansa HTML-dokumentti alkaa tällä rivillä:

Tällä rivillä kerromme selaimelle, että HTML-dokumenttimme on kansainvälisen spesifikaatioversion 4.01 mukainen. Tämän rivin ansiosta sivusi näyttää samalta.
Tätä riviä ei tarvitse muistaa, HTML-dokumentti toimii ilman sitä. Tämä on vain siksi, että olet tietoinen siitä, mitä se on.

2).

ja on asiakirjan alku ja loppu.

3).
ja - asiakirjan otsikko. Muita palvelutunnisteita lisätään usein tähän; Opit muista palvelutunnisteista tässä koulutusvaiheessa, tämä tieto riittää.

4).

ja - asiakirjan otsikko.
Tämä otsikko näytetään selaimessa:

haussa olen hakemistossa tai Googlessa.

5).
ja - asiakirjan runko.< >Tässä on asiakirjan sisältö, esimerkiksi tekstiä, kuvia, taulukoita, musiikkia, elokuvia jne. Saat lisätietoja musiikin, tekstin ja kuvien lisäämisestä dokumentin runkoon seuraavilla oppitunnilla. , , , ,
,

Huomautus:
Tulet usein lukemaan ja kuulemaan sanan "tagi".

Tunniste on kaikki, mikä on suluissa

. Esimerkiksi:
jne. - kaikki nämä ovat tunnisteita.

Tunnisteet eivät näy sivua katseltaessa selaimessa, mutta kaikki mikä ei ole suluissa näkyy selaimessa katseltaessa.

Tunnisteita on monia ja niillä on eri tarkoitus.
.

On tunnisteita, jotka on suljettava. Esimerkiksi,

avaa tunniste

...

ja muista sulkea tagi

Ja siellä on yksittäisiä tunnisteita, esimerkiksi tämä

...

Tunniste on eräänlainen säilö, joka voi sisältää tekstiä, kuvia ja muita tunnisteita...
○ Kiinnitä huomiota avaus- ja sulkemistunnisteiden oikeaan järjestykseen:

Tagi, jonka avasimme ensimmäisenä, suljetaan viimeisenä, toinen on toiseksi viimeinen jne.
○ Tässä on esimerkki virheellisestä avaus- ja sulkemistunnisteiden sarjasta. Tämän tilauksen yhteydessä verkkosivulla voi olla virheitä:

Virhe oli ja.

Älä lannistu, jos ymmärrät vain vähän tai tuskin mitään kaikesta yllä kirjoitetusta. Toisella oppitunnilla on enemmän harjoittelua, ja voit kirjoittaa kaiken manuaalisesti itse ja nähdä kuinka HTML toimii.

Jatka seuraavaan oppituntiin

Hei! Tässä artikkelissa tarkastellaan kielen perusteita HTML-merkintä, tutustutaan HTML-dokumentin rakenteeseen ja päätunnisteisiin. Voit luoda HTML-dokumentin tavallinen muistilehtiö, tallentaa tiedoston tunnisteella .html, mutta on parempi työskennellä erityisessä muistiossa Notepad++-koodin kirjoittamista varten, voit ladata sen viralliselta verkkosivustolta, se on täysin ilmainen.

Kun olet ladannut ja asentanut, avaa ohjelma ja aseta koodaukseksi "UTF-8 (ilman bum)", kuten kuvakaappauksessa.

Katsotaanpa nyt asiakirjan rakennetta. Tältä näyttää niin sanottu HTML-runko.

Koko asiakirjan otsikko

Kiinnitä huomiota asiakirjarakenteen elementtien hierarkiaan. Juurielementin katsotaan olevan , ja kaikki seuraavat elementit menevät sen sisään, ja asiakirjan lopussa osoittaa sen sulkemisen. Selain ei käsittele mitään elementtejä, jotka on kirjoitettu ennen tunnistetta tai sen jälkeen.

Elementti on elementtien ja ylätaso, ja ne ovat vastaavasti alielementtejä, koska ne ovat …-tunnisteen sisällä. Tämä hierarkia ulottuu kaikkiin dokumentin sisäkkäisiin elementteihin.

Tunniste ... sisältää teknisiä tietoja verkkosivusta: koodaus, otsikko, kuvaus, avainsanoja, yhdistää tyylisivuja, fontteja jne. Tämän osan sisältöä ei näytetä selainikkunassa, mutta nämä tiedot kertovat selaimelle tarkalleen, kuinka sivu tulee näyttää.

Pakollinen tunniste, joka sisältyy ... sisältää ... . Tämä on koko asiakirjan otsikko ja näkyy avaa välilehti selaimessa ja hakukonetuloksissa ns. katkelmassa, ja sen koko ei saa ylittää 60 merkkiä. Tunniste on erittäin tärkeä verkkosivuston hakukoneoptimoinnin edistämisessä.

Koko asiakirjan otsikko

Tunniste laskee valinnainen elementti-osiosta, mutta sitä käytetään melkein aina. Tämä tagi on yksittäinen eikä vaadi sulkemista, kuten .... Sen avulla näytetään yllä mainitut sivun metatiedot, kaikenlaiset merkintäelementit, indeksoinnin estäminen jne.

Sivun kuvaus määritellään attribuutilla name ja sen arvo-kuvauksella. Kuvaus on tärkeä myös verkkosivuston edistämisessä hakukoneissa.

Avainsanojen merkityksestä keskustellaan paljon. Monet verkkovastaavat uskovat, että hakukoneet eivät ole kiinnittäneet huomiota avainsanoihin pitkään aikaan eivätkä rekisteröi niitä ollenkaan, kun taas toiset väittävät päinvastaista.

Charset-attribuutti määrittää käytettävän asiakirjan koodauksen. tällä hetkellä maksaa UTF-8.

Tunnistetta yhtenä tunnisteena käytetään määrittämään nykyisen asiakirjan ja muiden tiedostojen välinen suhde tai yksinkertaisemmin sanottuna se yhdistää sisällön kolmannen osapuolen tiedosto sivuillemme, tällaisia ​​yhteyksiä voi olla useita. Se voi myös osoittaa asiakirjan kanonisuuden.

Elementti on selainikkunassa näkyvä asiakirjan pääosa, eli se, mikä ...-tunnisteessa on, näytetään käyttäjälle HTML-dokumenttia avattaessa. Tässä osiossa kuvataan erilaisia ​​tunnisteita ja niiden ominaisuudet erilaisia ​​merkityksiä, jota ei yksinkertaisesti voida käsitellä yhdessä artikkelissa, joten suosittelen sivustoa htmlbook.ru. Tältä sivustolta löydät kaikki HTML- ja CSS-tunnisteet sekä käyttöesimerkit ja kunkin yksityiskohtaisen kuvauksen. Suosittelen myös katsomaan ilmaisia ​​verkkosivustojen rakentamiseen liittyviä minikursseja. Nämä kurssit koostuvat videotunneista ja antavat sinulle mahdollisuuden tutustua koodin kirjoittamiseen.

HTML-perusteet aloittelijoille, mitä jokaisen aloittelevan verkkovastaavan tai bloggaajan tulisi tietää nyt. Jos haluat oppia luomaan perussivustoja, ymmärtämään itse koodia, tietää mitä takana on ja mitä pitäisi mennä, se on yksinkertaisesti mahdotonta tehdä ilman HTML-kielen perusteiden tuntemusta. Blogissani on kokonainen ketju artikkeleita, jotka omistan tälle aiheelle A:sta Z:hen, kuvailen jokaisen asiakirjassa olevan tunnisteen, mitä se tarkoittaa ja kuinka sitä käytetään oikein.

Jos et tiedä alkeellisia asioita, polkusi on suljettu. Uskon, että jokaisen, joka päättää kehittää ja luoda verkkosivustoja, tulee tietää ja ymmärtää perusasiat, mistä sivusto itse koostuu, miten se toimii ja mitä itse koodissa tapahtuu.

Tietenkin on olemassa useita ohjelmointikieliä, ne ovat kaikki omalla tavallaan monimutkaisia, mutta on joitain, jotka sinun on ehdottomasti tiedettävä. Jos haluat suunnitella kauniisti postitse lähetettävän kirjeen, sinulla on oma VKontakte-ryhmäsi, ryhmä muualla sosiaaliset verkostot, sama youtube kanava, sinun täytyy käsitellä koodia missä tahansa sivuston moottorissa, peruskäsitteitä sinun täytyy vain tietää.

Annoin vain muutaman esimerkin, itse asiassa nyt tätä tietoa käytetään yhä useammin Internetissä. Olen enemmän harjoittaja kuin teoreetikko, joten tämän osion artikkeleissani näytän sinulle esimerkkejä siitä, miten ja mitä tein, askel askeleelta. Lähetän sekä esimerkkisivuja että kokonaisia ​​sivustoja.

HTML-dokumentti on yksinkertaisin tekstiasiakirja, merkintäkieli, jota kohtaat joka päivä Internetissä. Tunnisteet kuvaavat asiakirjan rakennetta. Tunnisteet on muotoiltu kulmikkaaksi< >suluissa, joiden sisään tunnisteen nimi kirjoitetaan. Selain tarkastelee dokumentin rakennetta, rakentaa sen ja näyttää sen ohjeidensa mukaan näytölläsi, jos tietysti teit kaiken oikein.

Tämä koko prosessi alkaa ennen kuin näet valmiin kuvan. Selaimet käsittelevät asiakirjaa peräkkäin alusta loppuun. Sisältää kaiken, mitä sivulla pitäisi olla. Taulukot, kuvat, skriptit ja niin edelleen, paitsi tämä sisältää CSS-tyylejä.

Mikä on html - jos katsot mitä Wikipedia kirjoittaa - (HyperText Markup Language) asiakirjojen hypertekstikuvauskieli. Useimmat Internetin sivut sisältävät sivumerkinnät tällä kielellä. Tämä kieli Selainten tulkitsemana tuloksena oleva muotoiltu teksti näytetään tietokoneen näytöllä tai mobiililaitteella.

Tämä kieli on luonnostaan ​​erittäin helppo ja helposti opittavissa. Kuka tahansa voi oppia ja ymmärtää sen perusasiat. Jotta voit käyttää tällaista kieltä, sinun on tiedettävä ja käytettävä kuvauksia, joita kutsutaan myös tunnisteiksi. Dokumentti luodaan tunnisteiden avulla.

Mistä dokumentin rakenteen tulisi koostua, mitä tunnisteita tulisi olla. Katsotaanpa kaikkea yhdellä pienellä esimerkillä. Kirjoitin tekstiä MS Officessa ja näytin sen tässä kuvakaappauksessa.

Näytä tämä teksti selaimessa samalla tavalla kuin asiakirjassa kirjoitettiin, tätä varten sinun on lisättävä siihen sivumerkintä, joka sisältää joitain tageja. Katso ensin niitä, sitten kuvailen jokaista, kuka on vastuussa mistäkin.

Tervetuloa blogiini, otat nyt oppitunnin HTML Basicsista. Jos pidit tästä artikkelista, voit tilata sen tämä blogi saadaksesi uusia artikkeleita sähköpostiisi.

Mistä tunnisteista mikä tahansa html-dokumentti koostuu, mitä se sisältää ja mihin se kaikki pitäisi kirjoittaa?

Mikä tahansa koodi koostuu merkeistä, jotka on sijoitettu kulmakiinnikkeet. Kaikkia näitä kutsutaan elementeiksi. Kaikki elementit koostuvat yleensä kahdesta tagista, avautuvasta ja sulkevasta. Suosittelen, että katsot aluksi huolellisesti tunnisteita, jos et sulje sitä, sinun on tarkistettava suuri osa koodista virheen löytämiseksi.

Oli tapauksia, jolloin kesti enemmän kuin yksi päivä, henkilö ottaa yhteyttä ja pyytää apua, hän ei löydä sivustoltaan virhettä, joten katso aina erittäin tarkasti mitä ja minne kirjoitat. Mennään nyt tässä esimerkissä Katsotaanpa jokaista koodin elementtiä, mitä siihen on kirjoitettu, mitä se tarkoittaa ja mitä lopulta tapahtuu.

Useimmat tunnisteet on paritettu, mikä sisältää aloitus- ja sulkemistunnisteen. Tällaisten tunnisteiden lisäksi on myös yksittäisiä tunnisteita. Tunnisteet voivat mennä yhdessä muiden kanssa, jolloin ne voivat pesiytyä toistensa sisällä. Näytä esimerkiksi teksti lihavoituna ja kursiivilla kerralla.

Teksti

Muistutan vielä kerran, että sinun on noudatettava asiakirjassa olevia sääntöjä. Näin selain ymmärtää, mitä sivulla on, sen järjestystä, sisältöä ja niin edelleen.

Tunniste on komponentti, joka käskee verkkoselainta suorittamaan tietyn tehtävän. Esimerkiksi kappaleen, taulukon, lomakkeen tai kuvan läsnäolo.

Attribuutti - muokkaa tunnistetta. Voit esimerkiksi tasata kappaleen keskelle tai oikealle, määrittää myös kuvan sijainnin sivulla ja niin edelleen.

Sulje AINA tunnisteet, jos avaat sen, muista sulkea se. Muuten tapahtuu virhe ja asiakirjasi ei näy oikein sivulla. On myös poikkeuksia, joita ei pidä unohtaa.

On selvästi välttämätöntä ymmärtää, että asiakirjalla on otsikko ja sen runko. Otsikko on kaikki, mitä tagissa on. Asiakirjan runko (), asiakirjan runko sisältää koko sivun sisällön. Jos on tarve jättää koodiosa itsellesi ja siten liittää nämä tagit kommentteihin, tunnistetta käytetään tähän. Kaikki tällaisen tunnisteen sisällä oleva toimii kommenttina, eivätkä selaimet havaitse sitä.

Aloitetaan aivan ensimmäisestä. Dokumentin alussa avasin tagin ja lopussa suljin sen. Tämä koodi Ehdottomasti jokaisessa asiakirjassa se kertoo selaimelle, että kaikki näiden tunnisteiden väliin sijoitettu on HTML-koodia. Se on itse asiakirjan juuri ja kaikki, mitä tämän tunnisteen takana on, ei enää sisälly asiakirjaan, eivätkä selaimet havaitse sitä. Aivan asiakirjan alussa tunniste avataan ja aivan lopussa se on suljettava.

Tämän tagin koko osio sisältää kaikki tekniset tiedot asiakirja. Kuten edellinenkin, myös pää on avattava ja suljettava lopussa. Nämä tiedot sisältävät sivun otsikon, kuvauksen, hakukoneen avainsanat ja koodauksen. Tietoja koodauksesta hieman alla.

Sisältö

Tämä tunniste sisältyy päähän ja se on kirjoitettava head-tunnisteen sisään. Tämä otsikkotunniste on pakollinen, ja sen on oltava jokaisessa HTML-asiakirjassa. Tämän lisäksi se näkyy selainikkunan otsikona. Tällaisen otsikon pituus ei saa ylittää 60 merkkiä. Tällaisen otsikon tekstin tulee sisältää enimmäismäärä täydelliset tiedot, joka kuvaa sivun sisältöä.

Jos kirjoitit otsikkoon "Hello World", tämä on tieto, jonka pitäisi näkyä sivulla eikä muita. Ihmisiä ja hakukoneita ei pidä huijata, he eivät pidä siitä, ja siten pahennat asioita itsellesi. Tämän tunnisteen sisältämien tietojen tulee liittyä sivusi sisältöön.

Pakollisen otsikkotunnisteen jälkeen on valinnainen, mutta myös melko paljon tärkeä tunniste meta. Tämä tunniste on yksittäinen. Käyttämällä tästä tunnisteesta sivun kuvaus (kuvaus) ja sen avainsanat (avainsanat) määritetään.

Lisäksi sisällönkuvauskenttä voi sisältää tietoja sivun kirjoittajasta ja muista metatietojen ominaisuuksista. Voit estää koko sivun indeksoinnin hakukoneet. Laittaa automaattinen päivitys sivu 20 sekunnin kuluttua tai 5 sekunnin kuluttua, jota seuraa siirtyminen toiselle sivulle.

Tällaisia ​​metaelementtejä voi olla useita, koska ne voivat kantaa ehdottomasti erilaisia ​​tietoja. Muut käyttäjät, kun he avaavat sivun selaimessa, eivät näe kaikkia kuvauksiasi.

Tyylitunnistetta voidaan käyttää myös sivun tyylien asettamiseen. Jos käytät paljon erilaisia ​​tyylejä css, tässä tapauksessa on suositeltavaa asettaa ne erilliseen tiedostoon. Jos haluat määrittää useita niistä, kaikki tämä voidaan määrittää suoraan html-dokumenttiin.

.base (leveys: 100px; taustaväri: #000; korkeus: 150px; väri: #fff; )

Tai lisää tyylejä nimenomaan yhteen tunnisteeseen. Tätä tunnistetta on käytettävä säilön sisällä, joka määrittää sivun tyylit. Voit käyttää useita tällaisia ​​tunnisteita, tämä ei ole virhe.

Hieman samanlainen kuin edellinen tunniste, linkkitunniste antaa sinun asettaa tyylejä asiakirjalle, joka on toisessa tiedostossa. Toisin sanoen voit muodostaa yhteyden olemassa oleva asiakirja täysi pöytä css-tyylejä, joka koostuu monista ominaisuuksista. Näin pienennät asiakirjan kokoa, joka lopulta latautuu ja avautuu nopeammin tietokoneella tai mobiililaite alhaisella internetnopeudella.

Voit yhdistää useamman kuin yhden tiedoston, rajoituksia ei ole. Tällaista tunnistetta ei tarvitse sulkea. Jos kaikki on tehty oikein, tietyt tyylit alkaen erillinen tiedosto. Tämä tunniste voidaan lisätä perus-html-koodiin ja unohtaa sen olemassaolo. Tuloksena on tällainen kuva:

Skriptitunnisteen avulla voit muodostaa yhteyden dokumenttiin erilaisia ​​skenaarioita(käsikirjoitukset). Päättävän tunnisteen läsnäolo vaaditaan. Itse skripti voi sijaita asiakirjan alussa, sisällä tai lopussa.

Kertoo selaimelle, että kaiken näiden tunnisteiden väliin sijoitetun pitäisi näkyä selainikkunassasi. Tässä ovat tärkeimmät tunnisteet, jotka voivat olla läsnä ehdottomasti jokaisessa asiakirjassa. body-tunniste toimii sivun päätekstina, joka sisältää koko sen sisällön. Tämä tagi kannattaa avata ja muistaa sulkea se dokumentin lopussa.

Mennään pidemmälle, näemme tagin, joka avautuu ja sulkeutuu samalla tavalla. Tämä tagi ilmaisee tekstin pääotsikon useimmissa tapauksissa, H1-otsikon alla on sivun otsikko. Itse asiassa dataotsikoita on vain kuusi. . Niitä käytetään myös SEO:ssa, mutta tämä on hieman eri aihe. Korostan tästä ehdottomasti yhden artikkelin ja annan yksityiskohtainen kuvaus

tilaa heille blogipäivitykset, jotta et jää paitsi mistään. Tällaisten otsikoiden läsnäolo artikkelissa auttaa tärkeä rooli

Jos kirjoitat leipätekstiä uudesta kappaleesta, kirjoitat tunnisteen

Alussa ja sulje lopussa

HTML-dokumentti

Tämä teksti on lihavoitu, ja tämä on myös kursiivilla

Jokainen asiakirja sisältää head- ja title-elementin. Ensimmäinen, joka tulee heti ensimmäisen tagin jälkeen. Tämä tagi sisältää kaikki tiedot sivusta, se sisältää myös elementin. Otsikko – tieto sivun otsikosta, toisin sanoen sivun otsikko, sen nimi. Se on otsikossa, johon viittaat oikea nimi sivu, jonka kautta käyttäjä etsii sinua hakukone, Erittäin tärkeä kohta. Molempien elementtien on oltava avoimia ja myös suljettuja. Jokainen elementti on suljettu "/"-merkillä. Tuloksena on tällainen kuva.

Otsikko ja sivun sisältö

Kuten näette, ei ole mitään monimutkaista. Tässä ovat yksinkertaisimmat tunnisteet, joiden pitäisi olla jokaisessa html-asiakirjassa. Älä unohda sulkea jokaista niistä, muuten selain ei pysty havaitsemaan koodin koko kuvaa. Tämä pitää tietää ja muistaa aina. Sitten alat lisätä tekstiä, kuvia, videoita ja niin edelleen. Mutta tämä tulee jo olemaan muissa artikkeleissa.

Käytä koodia Notepad++-ohjelmalla. Se on ilmainen, eikä sitä ole vaikea löytää Internetistä. Erittäin kätevä minkä tahansa koodin ymmärtämiseen, se näyttää myös kätevästi avaus- ja sulkemistunnisteet. Tuemme yli 40 ohjelmointikielen syntaksia. Juuri mitä tarvitset html:n perusteiden oppimiseen.

Muistio on kaikin puolin parempi kuin tavallinen muistilehtiö. varten maksimaalinen mukavuus, yksinkertaisuus ja opiskelu tämä editori Sinun on ensin asennettava se tietokoneellesi. Tärkein etu ja mukavuus Muistioeditori++ näyttää vihjeitä koodia kirjoitettaessa, mikä tekee työstäsi paljon nopeampaa ja parempaa.

Jokaisen asiakirjan tulee sisältää myös seuraava doctype-elementti. Miksi sitä tarvitaan ja mitä siinä pitäisi olla. Yleensä ihmiset eivät ole kovin innostuneita näistä linjoista, he kopioivat ne asiakirjoihin ja työskentelevät rauhallisesti. Nämä elementit kertovat selaimelle, mitä html-versiota dokumentissa käytetään, mikä sivun kuvaus on, mitä koodausta käytetään, mitä avainsanoja on mukana, kuka on kirjoittaja ja mikä sivun nimi on.

Ne sijoitetaan yleensä aivan alkuun. Vaihtoehtoja on useita ja ne kaikki eroavat toisistaan, kirjoitan yhden esimerkin, jota käytetään useimmiten. Tätä aihiota voidaan käyttää valmis malli. Seuraava tulee olemaan selkeä kuvaus joka rivillä, tässä ei pitäisi olla ongelmia.

Lyhyesti aiheesta selkeää kieltä html:n perusteista: Tämä rivi kertoo selaimelle, että tämä asiakirja on XHTML-versio 1.0, käytetty Englannin kieli ja kaikki tämä sotku sijaitsee vieressä tähän osoitteeseen. Seuraavaksi ilmoitamme sisällönkuvauskentässä käytetyn koodauksen. Yleisimmin käytetty on Windows 1251.

Kuvaus - SEO:n aihetta käsitellään, yksi kolmesta päätunnisteesta, joiden on oltava ehdottomasti jokaisessa asiakirjassa, tämä tagi osoittaa sivun kuvauksen. Mitä tälle sivulle on kirjoitettu, lyhyt kuvaus, enintään kaksi lausetta. avainsanatunniste, hakukoneoptimoinnin aihetta käsitellään myös, tämä tunniste vaaditaan. Se sisältää avainsanoja, joiden avulla Internetin käyttäjät löytävät sinut hakukoneiden kautta.

IN otsikkotunniste menee itse asiakirjan nimi, sen otsikko, jonka näemme selaimessa. Todennäköisesti koko asiakirjan tärkein tunniste, jolla on suurin vaikutus sivun mainostamiseen. Artikkelissa lisäämisestä ja suunnittelusta on kuvaus tästä tunnisteesta tarkemmin.

Mitä sinun tulee muistaa tämä oppitunti Tietoja html:n perusteista:

Kaikki pääsivut tulee aina nimetä hakemisto. Näin se hyväksytään ja kaikki ovat tottuneet siihen, oli tiedostopääte mikä tahansa, se voi olla html tai php. Sitä kutsutaan aina niin.

Katso Webformyselfin video HTML:n perusteista.

Hypertekstin merkintäkieli, peruselementit ja rakenne. Yritän kuvailla tätä kaikkea ja paljon muuta blogissani. Ensinnäkin se kirjoitetaan aloittelijoille hyödyllistä tietoa, tarjotaan koodiesimerkki ja mahdollisuus ladata itse esimerkki valmiin sivun kanssa.