Mikä on sivun HTML-koodi? HTML-ohjelmakoodi

Hei kaikki!

Jos aloimme opiskella, meidän on tiedettävä HTML:n ja CSS:n perusteet, mikä auttaa tekemään sivustoistamme parempia ja houkuttelevampia hakukoneet. Koko tämän viikon kerron sinulle verkkosivustokoodin kanssa työskentelystä ja tämä odottaa sinua:

• . Opimme muokkaamaan verkkosivuston koodia näiden editorien avulla;
• . Autamme hakurobottia ymmärtämään sivun rakenteen;
• . Selvitämme kuinka oikein sivustokoodi on käännetty ja löydämme virheet;

Kuten näet, meillä on tällä viikolla paljon työtä, joten tilaa Context-UP-blogipäivitykset ja saat kaikki oppitunnit sähköpostiisi, jos et ole vielä tilannut.

HTML (Hyper Text Markup Language) on Internetin asiakirjojen merkintäkieli. Toisin sanoen mikä tahansa verkkosivustosi sivu on asiakirja, ja selain on väline tällaisten asiakirjojen katseluun.

HTML:n tarkoitus on näyttää selaimelle, missä tämä tai toinen dokumenttielementti sijaitsee. Avulla tästä kielestä, elementit on merkitty sivulle ja ne ovat käytössä tietty paikka, jotka sitten näytetään sivuston vierailijan näytössä.

Sivunkuvauskieli koostuu erityisistä tunnisteista, jotka auttavat selainta määrittämään:

• Asiakirjan rakenne;
• Tietyn elementin sijainti;
• Elementin tarkoitus;
• Mukana kolmannen osapuolen tiedostot;
• Ja paljon, paljon muuta.

Tämä ymmärretään ja hakurobotteja, siksi sinun on kiinnitettävä erityistä huomiota siihen, kuinka oikein asiakirja on koottu SEO:n näkökulmasta ja mikä sen rakenne on.

Kaikilla HTML-dokumenteilla on alkuperäinen rakenne, jota on noudatettava tarkasti. Se näyttää tältä:

http://site.ru/image.png on kuvan osoite.

Siirry osoitteeseen Site.ru

Jos http://site.ru/ on sivusto, johon linkki johtaa, Go to Site.ru on linkin nimi, niin kutsuttu ankkuri.

Linkkikoodi sisältää attribuutin target=" _blank" - linkki avautuu uuteen ikkunaan ja kuvakoodi sisältää border="0″ - kuvassa ei ole kehystä.

Luettelot

Listat luodaan seuraavilla html-koodeilla:

• Ensimmäinen luettelon kohde


• Toinen kohta luettelossa


• Kolmas kohta luettelossa

Taulukot

Pöydät lisää monimutkainen elementti kuin nämä html-tunnisteet, voit omistaa niille kokonaisen viestin, tässä näytän vain esimerkin yksinkertaisimman taulukon koodista:

Jokaisen koodin tagin perään lisätään rivinvaihto html-koodin muokkaamisen helpottamiseksi. Sama taulukkokoodi voidaan lisätä seuraavasti:

Tämä on sivuston sivun päärakenne. Perusasiat tuntemalla voit siirtyä monimutkaisempiin.

Perus html-koodeja päivitetty: 10. huhtikuuta 2017, kirjoittaja: admin

Seuraavaksi muutama sana tunnisteista, joita käytimme tämän sivun tekemiseen.

1. - näiden tunnisteiden on oltava jokaisella verkkosivulla. He kertovat selaimille ja hakukoneet että tämä on html-sivu.

Kaikilla html-sivuilla on seuraava rakenne:

2. - näiden tunnisteiden välissä on koko sivun näkyvä sisältö.

4. - näiden tunnisteiden väliin kirjoitetaan sivun otsikko, joka näkyy selaimen yläosassa. Muuten, kun etsit jotain hakukoneissa, ensimmäinen asia, joka näytetään, on sivun nimi. Tagista käytetään usein lyhennettä "title". Suosittelen lukemaan artikkelin: tunnisteen luominen

Siirrytään nyt tunnisteisiin, jotka ovat html-sivun rungossa (sisällä ja ).

5. - nämä tunnisteet keskittävät kaiken niiden sisällä. SISÄÄN tässä tapauksessa keskustasta tulee näytön keskikohta. On suositeltavaa, että lopetat näiden tunnisteiden käytön jatkossa.

6. on yksi otsikkotunnisteiden luokasta..., joka yleensä sisältää sivun otsikon. Esimerkiksi tällä sivulla on otsikkotunniste "Esimerkki html:n luominen sivut".

Näillä tunnisteilla on paljon painoarvoa verkkosivustojen sijoituksissa, joten niitä on käytettävä huolellisesti ja viisaasti.

Kun kirjoitat html-koodia, sinun on noudatettava yksinkertainen sääntö: otsikkotunnisteen on tultava ensin, ja sitten ne voivat mennä pidemmälle jne. Pääasia, että ei pitäisi olla ensin, sitten, sitten jne. Pitää olla tiukka hierarkia. Otsikot jne. ehkä paljon.

7.
on yksittäinen tunniste, joka ei vaadi sulkevaa tunnistetta. Se siirtyy seuraavalle riville. Esimerkissäni kirjoitin kaksi yksittäistä tunnistetta peräkkäin hypätäkseni seuraavalle riville kahdesti.

8. on yksi tunniste, joka näyttää kuvan.

• src on pakollinen parametri, joka määrittää kuvan osoitteen (URL_IMAGE sijaan sinun on annettava osoite, johon kuvasi on tallennettu).
  Huomautus:
  • Jos kuva on samassa kansiossa html-sivusi kanssa, riittää, että kirjoitat kuvan nimen, muuten sinun on syötettävä joko absoluuttinen tai suhteellinen URL-osoite;
  • Älä unohda määrittää kuvan laajennusta. Esimerkiksi .jpg, .gif, .jpeg.
• alt tai title - voit kirjoittaa kuvasi kuvasi näihin parametreihin. Kun viet hiiren kuvan päälle, tämä kuvaus tulee näkyviin. Nämä parametrit ovat tärkeitä verkkosivuston edistämisessä, erityisesti kuvahaussa. Jos kuvan lataus epäonnistui, tämä teksti näytetään, mikä on myös plussaa.

9. - nämä tunnisteet luodaan muuttamaan fonttia, taustaa, kokoa jne. Lyhyesti sanottuna kaikki tekstin muotoiluun liittyvä voidaan määrittää yhdessä tunnisteessa. Tällä tunnisteella on useita ominaisuuksia, joita käsittelen erillisellä oppitunnilla.

Huomautus: - samanlainen tunniste.

Siellä on myös CSS-ominaisuus font , jossa voit asettaa kaikki nämä parametrit.

10. - korosta lihavoitu. Kaikki ja väliltä näkyvät korostetaan lihavoituina. Jos esimerkiksi kirjoitat sen sisällön alkuun ja suljet sen aivan lopussa, kaikki sivulla oleva teksti korostetaan lihavoituna. Tämä on melko yleinen tunniste, jonka analogi on .

Hakukoneet kiinnittävät huomiota tähän tunnisteeseen lisätäkseen avainsanojen vaikutusta. Mutta sinun on oltava varovainen, koska joka kerta, kun korostat sen lihavoituna avainsanoja pidetään roskapostina.

Jos avaat minkä tahansa verkkosivun, se sisältää tyypillisiä elementtejä, jotka eivät muutu sivuston tyypin ja painopisteen mukaan. Esimerkki 1 näyttää koodin yksinkertainen asiakirja, joka sisältää pääelementit.

Esimerkki 1: Web-sivun lähdekoodi

Esimerkki Web-sivun otsikosta

Ensimmäinen kappale.

Toinen kappale.

Kopioi sisältö tämä esimerkki ja tallenna se kansioon c:\www\ muodossa example2.html. Tämän jälkeen käynnistä selain ja avaa tiedosto valikosta Tiedosto > Avaa tiedosto (Ctrl+O). Valitse asiakirjan valintaikkunassa tiedosto esimerkki2.html. Kuvassa 1 näkyvä web-sivu avautuu selaimeen. 1.

Riisi. 1. Esimerkin tulos selaimessa

Elementin (jarg: doctype) tarkoitus on ilmoittaa tyyppi nykyinen asiakirja- DTD (asiakirjatyypin määritelmä, asiakirjatyypin kuvaus). Tämä on tarpeen, jotta selain ymmärtää nykyisen verkkosivun tulkinnan, koska HTML:stä on olemassa useita versioita - moderni HTML5 tai vanha HTML4 ja XHTML. Jotta selain ei hämmentyisi ja ymmärtäisi minkä standardin mukaan verkkosivu näytetään, on asetettava koodi ensimmäiselle riville.

Koska työskentelemme jatkossa vain HTML5:n kanssa, tarvitsemme vain yhden lyhyen ja modernin doctypen.

Mainitsimme, että elementtien nimet voidaan kirjoittaa pieniksi ja isoilla kirjaimilla. Tämä sääntö pätee myös tähän ja voidaan kirjoittaa eri tavoin. Perinteisesti tämän elementin nimi kirjoitetaan kuitenkin isoilla kirjaimilla.

Aloitustunniste määrittää HTML-dokumentin alun ja sisältää asiakirjan pään ( ) ja rungon ( ).

Tämän osion sisältöä ei näytetä suoraan sivulla, lukuun ottamatta . Seuraavat elementit voivat sijaita sisällä: , , , , tai .

Elementti on universaali ja lisää koko luokka ominaisuuksia, erityisesti käyttämällä metatunnistetta, kuten tätä elementtiä yleisesti kutsutaan, voit muuttaa sivun koodausta, lisätä avainsanoja, kuvauksen asiakirjasta ja paljon muuta, joka on tarkoitettu selaimelle tai hakukoneille. Erityisesti, jotta selain ymmärtää, että se käsittelee UTF-8-koodausta (Unicode-muunnosmuoto) ja tämä rivi lisätään.

Esimerkki verkkosivusta

Elementti määrittää verkkosivun otsikon. Selaimessa se näkyy nykyisellä välilehdellä (kuva 2).

Riisi. 2. Web-sivujen otsikko selaimessa

Elementti on pakollinen ja sen on ehdottomasti oltava dokumenttikoodissa. Sisään saa kirjoittaa vain tekstiä, eikä siinä saa olla muita elementtejä. Mutta on sallittua lisätä erilaisia tekstin merkkejä, esimerkiksi näin: Adobe™ Photoshop®.

Lopputunniste osoittaa, että asiakirjan "pää" on valmis.

Asiakirjan "runko" on tarkoitettu sisältämään verkkosivun elementit ja sisältö.

Otsikko

HTML tarjoaa kuusi eritasoista tekstiotsikkoa, jotka osoittavat otsikkoa seuraavan osion suhteellisen tärkeyden. Siten elementti edustaa ensimmäisen tason tärkeintä otsikkoa ja elementti ilmaisee kuudennen tason otsikkoa ja on vähiten merkitsevä. Oletusarvoisesti ensimmäisen tason otsikko näytetään eniten iso painatus lihavoitu, seuraavat tason otsikot ovat kooltaan pienempiä. Elementit ... katso lohkon elementtejä, ne alkavat aina uusi rivi ja niiden jälkeen muut elementit näytetään seuraava rivi. Lisäksi selain lisää välilyönnit ennen ja jälkeen otsikon.

Osa tekstistä voidaan piilottaa näkymästä selaimessa tekemällä siitä kommentti. Vaikka käyttäjä ei näe tällaista tekstiä, se lähetetään silti asiakirjassa, joten sen katsomisen jälkeen lähde, voit löytää piilotettuja muistiinpanoja.