Näide html-lehe loomisest märkmikus. Korrektne HTML-dokumendi struktuur ja lehe kood

Tere kõigile!

Kui hakkame õppima, peame teadma HTML-i ja CSS-i põhitõdesid, mis aitavad muuta meie saidid otsingumootoritele paremaks ja atraktiivsemaks. Kogu selle nädala räägin teile veebisaidi koodiga töötamisest ja see ootab teid:

. Õpime, kuidas muuta veebisaidi koodi nende toimetajate abil;
. Aitame otsingurobotil mõista lehe struktuuri;
. Saame teada, kui õigesti saidi kood on koostatud, ja leiame vead;

Nagu näete, on meil sel nädalal palju tööd, nii et tellige Context-UP ajaveebi värskendused ja kui te pole veel tellinud, saate kõik õppetunnid oma meili teel.

HTML-i põhitõed

HTML (Hyper Text Markup Language) on Internetis leiduvate dokumentide märgistuskeel. See tähendab, et teie veebisaidi mis tahes leht on dokument ja brauser on vahend selliste dokumentide vaatamiseks.

HTML-i eesmärk on näidata brauserile, kus see või teine dokumendielement asub. Seda keelt kasutades märgitakse lehel elemendid ja need hõivavad teatud koha, mis seejärel kuvatakse saidi külastaja monitoril.

Märgistuskeel koosneb spetsiaalsetest siltidest, mis aitavad brauseril kindlaks teha:

Dokumendi struktuur;
Konkreetse elemendi asukoht;
Elemendi eesmärk;
Kaasatud kolmandate osapoolte failid;
Ja palju, palju muud.

Sellest saavad aru ka otsingurobotid, mistõttu tuleb erilist tähelepanu pöörata sellele, kui hästi on dokument SEO seisukohalt koostatud ja millise ülesehitusega see on.

HTML struktuur

Igal HTML-dokumendil on esialgne struktuur, mida tuleb rangelt järgida. Ta näeb välja selline:

Lehe pealkiri Lehe sisu ". Atribuudid, kui need on sildil, kirjutatakse ainult sildi algusesse. Märgise sisuks loetakse seda, mis jääb sildi alguse ja lõpu vahele.

HTML võimaldab kirjeldada plokk- ja tekstisiseseid elemente. Esimesed hõivavad brauseriaknas teatud ala, neid saab paigutada absoluutselt, st soovitud kohta HTML-lehe kuvamisalal, ja neil on kindel suurus.

Reasisesed elemendid kuvatakse üldjuhul ühes lõimes, st nii nagu need lehefailis määrati, kuvatakse need ka ekraanil. Üldise voo kuvamist saab lehe laadimisel mõjutada. Plokielementide paigutust, nähtavust ja muid omadusi saab JavaScripti koodi kaudu igal ajal mõjutada.

Lisaks lihtsatele elementidele pakub HTML tabelite ja vormide kirjeldust. Nende elementide järele on igapäevastes veebisaitide loomisel suur nõudlus.

Tabeli kirjeldus: sildid TABLE, TR, TD

Märgendi TABLE abil saate luua tabeli, määrata igas reas teatud arvu TR-ridu ja teatud arvu TD-lahtreid. Erinevalt tavalisest tabelikorraldusest piirdub tabelikorraldus HTML-i märgistuse iseärasuste tõttu selle deklaratsiooniga, seega kui arendaja soovib omada ristkülikukujulist tabelit, mille veergude arv kõigil ridadel on sama, peab ta seda tegema. jälgige seda ise.

HTML-i põhipositsioon on teha kõike, mis on ette nähtud, kuid mitte midagi, millest aru ei saada. Mõnel juhul pole veergude arv tabeli igal real nii oluline, kuid kui peate lahtreid vertikaalselt või horisontaalselt liitma, peate kõike väga hoolikalt loendama.

HTML-lehe näide, mis kirjeldab lihtsat tabelit, on artiklis selgelt näidatud.

Siin on näidatud tabel kolmest reast kolme veeru kaupa ja esimeses reas kasutati TD sildi asemel TH silti - veeru pealkirja. Need kaks silti ei erine eriti, kuid esimest on täiesti võimalik kasutada tabeli esimese rea eristamiseks ja CSS-is saab TH-le lisada oma stiili, mis eristab seda teistest TD-dest.

Vormi kirjeldus: sildid FORM, INPUT

Vormid on HTML-märgendite kõige populaarsem osa. Vormide abil saate teavet edastada. Tegelikult on leht ise teabe väljund, kuid vorm on selle sisend.

HTML-i lehe näide, mis kirjeldab lihtsat vormi:

Vormide kasutamiseks on palju rohkem võimalusi, kuid need on peamised võimalused. Saate määrata sisestusvälju, määrata neile kujunduse ja töötlejad kasutaja sisestatud andmete analüüsimiseks. Saate määrata peidetud väljad ja edastada lehelt taustteavet. Teabe edastamiseks saate määrata nupud, mille klõpsamine käivitab teabe edastamise.

HTML-i kasutamine

Hüperteksti keele tundmine on töö igal Interneti-programmeerimise erialal, kuid kui teil on vaja programme kirjutada PHP-s või JavaScriptis, peate suurepäraselt tundma HTML + CSS-i.

PHP keel oli näidatud eelmises näites. PHP töötab serveris, nii et selle vormiga leht lendas täidetud väljadega serverist brauserisse. Eelkõige sai kõik parameetrid tekstiväljadena INPUT-sildis (onblur event handler) mainitud funktsioon TestOnBlur.

JavaScript töötab brauseris ja selleks, et nupp saadaks andmeid tagasi serverisse, töötaks õigesti, st konstruktsioon: onclick=jQuery("#to").val("cart"), peab teil olema aimu mitte ainult sellest, mis on jQuery, vaid ka sellest, mis on #to, val, cart. Täpsemalt peate teadma põhilisi HTML-märgendeid ja neile CSS-stiilide rakendamise üldreegleid.

Sellest piisab, et kiiresti parandada oma kvalifikatsiooni mis tahes spetsialiseerumisel Interneti-programmeerimise valdkonnas.

Ja see tõlgitakse kui "hüperteksti märgistuskeel". Hüpertekst on spetsiaalne meetod Interneti-lehtedel navigeerimiseks, mida rakendatakse hüperteksti linkide kujul. Nendel linkidel klõpsates saate hõlpsalt saidi struktuuris navigeerida. Üleminekud sel juhul ei toimu lineaarselt, s.t. teil on alati võimalus minna saidi mis tahes lehele, mille link on praegu nähtav.

Märgistus viitab teatud reeglitele ja omadustele, mis on määratud lehe elementidele. Neid rakendatakse niinimetatud siltide kujul. Näiteks selleks, et näidata, et teatud tekst lehel peaks olema keskel, saate selle märgistada keskmise sildiga. Konkreetse lehe HTML-koodi näete selle kontekstimenüü kaudu. Näiteks sellele koodile Firefoxi brauseris juurde pääsemiseks peate lehel paremklõpsama ja valima "Lehe lähtekood".

Kuidas HTML-kood töötab? Kogu see kood on salvestatud faili laiendiga .html või .htm. Kui avate sellise faili brauseris, tõlgendab see koodi ja valmis leht kuvatakse programmi aknas. HTML-i märgistuskeelt teades saab peaaegu igaüks luua oma lehe. Mis on sildid HTML-koodis eraldiseisvad struktuurid. See on lihttekst, mis on ümbritsetud nurksulgudega "". Näete silte peaaegu iga lehe HTML-koodis. Silte endid lehtedel ei kuvata, need kuvavad kindlat elementi, mis on kodeeritud siltide abil. Näiteks kui lehel on pilt, siis selle HTML-kood sisaldab img-märgendit HTML-i piirangud Vaatamata sellele, et HTML-kood võimaldab ehitada üsna kvaliteetse hüpertekstilehe, on sellel omad piirangud. Ainult sellist koodi sisaldavad lehed on staatilised, st. neil puudub dünaamika, eriefektid ja muud omadused. Kuid neid saab tutvustada ka teiste keelte, näiteks Java Scripti abil. Valdav enamik kaasaegseid veebisaite on loodud lisakeelte abil, mis muudavad need elavamaks ja interaktiivsemaks.

Monoruumi fontides tehtud pealdised luuakse siltide , ja abil. Nende siltide kasutamise tulemused on tavaliselt identsed: ühekohaline font fikseeritud tähesuuruse ja vahedega.

Tag

Silt on sisemine konteineri element, mida kasutatakse programmikoodi väikeste fragmentide sisestamiseks, näiteks programmeerimisõpetust esindavasse veebidokumenti. Brauserid kuvavad sellist koodi üheruumilise fontina (näiteks Courier New). Kui kasutate ero koos elemendiga

Märgendit kasutatakse teksti sisestamiseks ilma vormindamiseta, st säilitades kõik tühikud, tabeldusmärgid ja reavahetused. Selles elemendis saate rakendada enamikku tekstivormingu elemente.

Tähelepanu: HTML-is eiratakse reavahetusi, järjestikuseid tühikuid ja tabeldusmärke. Mitut tühikut reas käsitletakse ühe tühikuna.

Näide: kasutades elemente ja

Proovi ise"

Elemendi sees dubleerib brauser iga tühiku või reavahetuse, millega see kokku puutub, säilitades teie algse vormingu.

If (document.getElementsByClassName) ( x = document.getElementsByClassName("lehekülgede arv") if (x.length>y) ( x.style.visibility = "peidetud"; )

Elemendis "eel" dubleerib brauser kõik tühikud või reavahetused, säilitades teie algse vormingu.

if (document.getElementsByClassName) ( x = document.getElementsByClassName("lehekülgede arv") if (x.length>y) ( x.style.visibility = "peidetud"; )

Sildid ja

Märgis märgib koodilõigu kasutaja sisestatud klaviatuuri abil. Mõned brauserid märgivad sellise teksti täiendava taustaga.
Märgendit kasutatakse arvutiväljundi loomiseks, näiteks teksti, mis kuvatakse konsooliaknas pärast juhtskripti sisestamist. See harva kasutatav element lihtsalt kuvab selle sisu ühekohalises kirjatüübis nagu , , .

Näide: elemendid ja

Proovi ise"

Sisestage tekst, mille kasutaja peab klaviatuurilt sisestama
konteineri element "kbd".

Sisesta tekst: see on klaviatuurilt sisestatud tekst

See on tekst, mis asetatakse konteinerisse "samp".

Tag

Märgendit kasutatakse programmikoodi muutujate täiendavaks esiletõstmiseks. See identifitseerib muutuja matemaatilises avaldises või programmi parameetris ja on tavaliselt näidatud kaldkirjas.

Näide: elemendid

Proovi ise"

Keha kineetiline energia:

Wк = mv2/2

Ülesanded Lõplik ülesanne

Selles õppetükis õppisite silte, mis kuvavad oma sisu ühekohalise kirjatüübiga, tõstavad koodis esile muutujad ja kasutavad eelvormindavat silti. Kõik need on matemaatiliste avaldiste ja programmikoodiga töötamisel olulised.

On aeg õpitu üle vaadata ja täita kolm lihtsat ülesannet:

Muutuv