HTML tähistab hüperteksti märgistuskeelt ja on veebilehtede kirjutamiseks kõige laialdasemalt kasutatav keel.

• Hüpertekst viitab veebilehtede (HTML-dokumentide) linkimise viisile. Seega nimetatakse veebilehel olevat linki hüpertekstiks.
• Nagu nimigi ütleb, on HTML märgistuskeel, mis tähendab, et kasutate HTML-i tekstidokumendi lihtsalt "märgistamiseks" siltidega, mis ütlevad veebibrauserile, kuidas seda kuvamiseks struktureerida.

HTML töötati algselt välja dokumentide struktuuri (nt pealkirjad, loendid, lõigud jne) määratlemiseks, et hõlbustada teadlaste vahelist teadusteabe vahetamist.

HTML-i kasutatakse nüüd laialdaselt veebilehtede vormindamiseks, kasutades erinevaid HTML-keeles saadaolevaid silte.

HTML dokument

Järgmine näide näitab HTML-dokumenti selle kõige lihtsamal kujul:

Dokumendi pealkiri Pealkiri

Siin on dokumendi sisu...

Salvestame koodi teie lemmiktekstiredaktoriga HTML-faili document.html. Ja avage fail veebibrauseris (nt Internet Explorer, Google Chrome või Firefox jne). See peaks näitama järgmist tulemust:

Sildid HTML-dokumendi loomiseks

Nagu varem mainitud, on HTML märgistuskeel ja kasutab sisu vormindamiseks erinevaid silte. Need sildid on suletud nurksulgudesse. Enamikul siltidel on vastavad sulgemissildid, välja arvatud mõned sildid. Näiteks sildil on sulgemissilt ja sildil sulgemissilt ja muud.

Ülaltoodud näide kasutab HTML-dokumendi loomiseks järgmisi silte:

Tag	Kirjeldus
	See silt määrab dokumendi tüübi ja HTML-i versiooni.
	See silt hõlmab tervet HTML-dokumenti ja koosneb peamiselt dokumendi peast, mida esindavad ... sildid, ja dokumendi kehast, mida esindavad ... sildid.
	See silt tähistab dokumendi pealkirja, mis võib sisaldada muid html-märgendeid, nagu jne.
	Märgendit kasutatakse märgendi sees dokumendi pealkirja tähistamiseks.
	See silt tähistab dokumendi põhiosa, mis salvestab muid html-silte, nagu , , Ja teised.
	See silt tähistab pealkirja.
	See silt tähistab lõiku.

Nende siltide tundmisest piisab HTML-dokumendi (html-lehe) loomiseks.

HTML-i õppimiseks peate teadma erinevaid silte ja mõistma, kuidas need tekstidokumendi vormindamisel käituvad. HTML-i õppimine on lihtne, kuna kasutajad peavad õppima kasutama teksti või piltide vormindamiseks erinevaid silte, luues seeläbi kauni veebilehe.

HTML-dokumendi struktuur

Tüüpilise HTML-dokumendi struktuur näeb välja järgmine:

Dokumendi deklaratsiooni silt Dokumendi pealkirjaga seotud sildid Dokumendi põhiosaga seotud sildid

Kõiki pea- ja kehasilte õpime järgmistes tundides, nüüd vaatame, mis on dokumendideklaratsiooni silt.

Deklaratsioon

Deklaratsioonimärgendit kasutab veebibrauser, et mõista dokumendis kasutatud HTML-i versiooni. HTML-i praegune versioon on 5 ja see kasutab järgmist deklaratsiooni:

Sõltuvalt kasutatavast HTML-i versioonist saab HTML-dokumendis kasutada palju muud tüüpi deklaratsioone. Näeme selle kohta rohkem üksikasju, kui arutame märgendit koos teiste HTML-märgenditega.

HTML-leht ja selle struktuur, mis on määratletud peamiste siltidega

Vaatame, milline näeb välja kõige tavalisem internetileht seestpoolt.

• HTML-i struktuur on üldiselt iga veebilehe aluseks.
• Tänapäeval on mitut tüüpi HTML-dokumente. Igal dokumenditüübil on oma HTML-struktuur (üksikasjad lehe allosas).
• Õige algne HTML-struktuur on saidi brauseritevahelise ühilduvuse võti.

Menüüs Start või Start system minge jaotisse Programmid (Kõik programmid), avage kaust Accessories, valige Notepad. Muidugi pole see ainus tööriist koodi kirjutamiseks, kuid praeguses etapis on see see, mida vajate.

Näidisdokumendi struktuur:

Vaatame HTML-i silte, mis määravad lehe struktuuri

• - kohustuslik, määratlege HTML-dokument.
• - määratlege jaotis teenuseteabega, sisaldavad juhiseid otsingumootoritele, brauseritele ja skriptidele.
• - määrake veebilehe peamine pealkiri.
• - kohustuslik, määrake dokumendi nähtav osa.
• - määratlege 3. taseme pealkiri.
• - määratlege lõik. Vaadake HTML-i lõikude õppetundi

HTML dokumendi struktuur | Lehe koodi kirjutamine

Toimingute jada on järgmine:

1. Kirjutage Notepadisse lehe HTML-kood:

4. Avage IE (Internet Explorer) või mõni muu vaikebrauser. Selle menüüs püüame leida ja avada arvutisse salvestatud faili index.html. Faili saate leida ja avada ka mis tahes brauseris aknas, mis ilmub pärast kahe klahvi kombinatsiooni tippimist klaviatuuril: Ctrl ja O – hoidke all klahvi Ctrl ja vajutage seejärel ladina tähte O.

Materjali edasiseks uurimiseks vajate järgmist:
Teie arvutis peab lihtsalt olema mitu erinevat brauserit. Laadige alla tasuta Mozilla Firefox, Opera ja jätkake õppetundi.

Avage Firefoxi abil index.html. Selle brauseri varasemates versioonides ei saaks te kirjutatud teksti lugeda, mistõttu kuvatakse kummalised tähemärgid. Selle ebakorrektsuse saab kõrvaldada, lisades HTML-koodi lihtsalt kaks atribuutide komplektiga silti, mis on samuti kohustuslikud.

Õige HTML 4.01 struktuur

See peaks olema HTML-lehe esialgne struktuur:

HTML dokumendi struktuur

Lisage ise lõigud ja pealkiri ning vaadake, mis välja tuleb. Pidage meeles, et pärast iga dokumendi salvestamist värskendage brauseriakna sisu, klõpsates muudatuste jõustumiseks nuppu Mozilla Firefoxis või nuppu Internet Exploreris või klahvi F5.

Kas kõik läks sinu jaoks korda? - Nii et sa olid ettevaatlik ja tegid kõik õigesti.

HTML (inglise keelest HyperText Markup Language – "hüperteksti märgistuskeel") on veebis olevate dokumentide standardne märgistuskeel. Enamik veebilehti luuakse HTML-i (või XHTML-i) abil. HTML-i tõlgendavad brauserid ja kuvatakse dokumendina inimesele loetaval kujul.

HTML on SGML-i (Standard Generalized Markup Language) rakendus (“erijuhtum”) ja vastab rahvusvahelisele standardile ISO 8879. XHTML on XML-i rakendus.

HTML-i märgistust sisaldavaid tekstidokumente (sellistel dokumentidel on tavapäraselt laiend .html või .htm) töötlevad spetsiaalsed rakendused, mis kuvavad dokumendi vormindatud kujul. Sellised rakendused, mida nimetatakse "brauseriteks" või "Interneti-brauseriteks", pakuvad kasutajale tavaliselt mugavat liidest veebilehtede pärimiseks, nende vaatamiseks (ja kuvamiseks muudel välisseadmetel) ning vajadusel kasutaja sisendi serverisse saatmiseks. Tänapäeval on populaarseimad brauserid Google Chrome, Mozilla Firefox, Opera, Internet Explorer ja Safari.

HTML-dokumendi struktuur

Tavaliselt on HTML-dokument fail laiendiga .html või .htm, milles tekst on tähistatud HTML-märgenditega (inglise tag – spetsiaalsed sisseehitatud juhised). HTML määrab siltide süntaksi ja paigutuse, mille järgi brauser veebidokumendi sisu kuvab. Veebibrauser ei kuva siltide teksti.

HTML-dokument sisaldab teksti (lehe sisu) ja tekstisiseseid silte – juhiseid sisu struktuuri, välimuse ja funktsioonide kohta. HTML-dokument on jagatud kaheks põhiosaks: pea ja keha. Päis sisaldab teavet dokumendi kohta, näiteks selle pealkirja ja sisu kirjeldavat metoodilist teavet. Keha sisaldab dokumendi sisu ennast (mis kuvatakse brauseriaknas).

Näidisdokumendi struktuur:

HTML-i struktuuri päis

HTML-i põhielemendid

Silt on hüperteksti märgistuskeele element. Õigem nimi on deskriptor. Kasutatakse ainult kahte märgendit - ava- ehk algus- ja sulgemis- ehk lõpumärki või lisaks on olenevalt keelerakendusest võimalik kasutada ühtainsat ja tühja elemendi silti. Näiteks võib lõigu taandemärgend vormindada lõigu vahemikus , või võib-olla ühel kujul kuni järgmise esimeseni

Näide tühjast elemendist: - katkestab teksti ilma taanet säilitamata, kuid saate sildi kirjutamiseks kasutada spetsiaalset vormi, kasutades vähem märke:

Iga silt koosneb nimest, millele võib järgneda valikuliste atribuutide loend, mis kõik sisalduvad nurksulgudes< >. Sulgude sisu ei kuvata kunagi brauseriaknas. Sildi nimi on tavaliselt selle funktsiooni lühend, mis muudab selle meeldejätmise lihtsamaks. Atribuudid on omadused, mis laiendavad või täpsustavad sildi funktsiooni. Tavaliselt ei ole märgendi nimi ja atribuudid tõstutundlikud. Teatud atribuutide väärtused võivad aga olla tõstutundlikud. See kehtib eriti failinimede ja URL-ide kohta.

Enamik silte on konteinerid. See tähendab, et neil on algus- (avamis- või algus-) ja lõpu- (sulgemis-) silt. Siltide vaheline tekst täidab neis sisalduvaid juhiseid.

Lõpusildil on sama nimi, mis algussildil, kuid selle ees on kaldkriips (/). Seda võib pidada sildi "lülitiks". Lõpumärgend ei sisalda kunagi atribuute.

Mõnel juhul on lõpumärgend valikuline ja brauser määrab sildi lõpu konteksti põhjal. Kõige sagedamini jäetakse lõpumärgend (lõik) välja. Brauserid toetasid seda silti ilma vastava lõputa, nii et paljud veebikirjutajad on harjunud kasutama lühivormi. Seetõttu tasub kahtluse korral teksti lisada lõpumärgend. See on eriti oluline, kui teie dokument kasutab kaskaadlaadilehti.

Mõnel märgendil pole lõpumärgendeid, kuna neid kasutatakse lehel üksikute (eraldi) elementide paigutamiseks. Üks neist on pildisilt . See lihtsalt asetab graafika lehe voolu. Muud eraldiseisvad sildid on reavahetused (
), horisontaaljoon () ja sildid, mis sisaldavad teavet dokumendi kohta ega mõjuta ekraanil kuvatavat sisu, nagu ja .

Märgendile lisatakse atribuudid selle toimingute laiendamiseks või muutmiseks. Ühele sildile saate lisada mitu atribuuti. Kui sildi nimele järgnevad sildi atribuudid, eraldatakse need ühe või mitme tühikuga. Järjekord pole oluline. Enamikul atribuutidel on väärtused, mis järgivad atribuudi nime järel võrdusmärki (=). Väärtused on piiratud 1024 tähemärgiga. Väärtused võivad olla tõstutundlikud. Mõnikord peavad väärtused olema jutumärkides (kahe- või ühekordne). Väärtuste kirjutamise reeglid on järgmised:

· kui väärtus on üksik sõna või arv ja koosneb ainult tähtedest (a-z), numbritest (0-9) ja erimärkidest (punkt või sidekriips), siis võite selle paigutada võrdusmärgi järele ilma jutumärkideta;

· kui väärtus sisaldab mitut sõna, mis on eraldatud koma või tühikutega või sisaldab muid erimärke peale punkti või sidekriipsu, tuleb see panna jutumärkidesse. Näiteks nõuavad URL-id jutumärke, kuna need sisaldavad märke „://”. Jutumärgid on vajalikud ka värviväärtuste määramisel vormingus "#rrggbb".

HTML-märgendid võivad sisaldada muid HTML-märgendeid, et võimaldada mitmel sildisel mõjutada ühte elementi. Seda nimetatakse pesastamiseks. Selle õigeks rakendamiseks peavad alamsildi algus- ja lõpumärgendid olema välimise märgendi algus- ja lõpumärgendi vahel.

Levinud viga on siltide kattumine. Kuigi mõned brauserid kuvavad sel viisil märgitud sisu, ei luba paljud teil reeglit rikkuda, mistõttu on oluline sildid õigesti paigutada. Teave, mida brauserite vaatamisel eiratakse:

· reavahetused. HTML-dokumendi realõpumärke ignoreeritakse. Tekst ja elemendid mähitakse kuni märgistuseni või
. Reavahetused väljastatakse, kui tekst on määratud vormindatud tekstina ();

· Tabeldusmärgid ja mitu tühikut. Kui brauser kohtab HTML-dokumendis tabeldusmärki ja mitut järjestikust tühikut, väljastab see ainult ühe tühiku. Seega, kui dokument sisaldab: "kaugel, kaugel", väljastab brauser "kaugel, kaugel". Tekstivoogu saab lisada täiendavaid tühikuid, kasutades katkematut tühikut (). Lisaks väljastatakse kõik tühikud, kui tekst on vormindatud (siltidena);

· mitu silti. Tekstiga katkestamata siltide jada tõlgendatakse kõigis brauserites üleliigseks. Sisu renderdatakse nii, nagu oleks ainult üks. Enamik brausereid väljastab mitu silti
mitme ülemineku näol uuele reale;

· tundmatud sildid. Kui brauser ei saa märgendist aru või see on valesti seadistatud, ignoreerib brauser seda lihtsalt. Olenevalt märgendist ja brauserist võib see anda erinevaid tulemusi. Kas brauser ei väljasta midagi või kuvab sildi sisu lihttekstina.

Saate teada, milline peaks olema HTML-dokumendi minimaalne struktuur. Analüüsime üksikasjalikult ja näidete abil iga selle vajalikku elementi. Räägime ka sellest, kuidas faile ja veebisaite õigesti luua.

HTML-dokumendi struktuur

Vaatame html-dokumendi struktuuri, et mõista, kuidas kõik töötab. Saate teada, milline raam peab lehel olema, et seda loetaks kehtivaks ( õige).

Mis tahes veebilehe loomiseks peab see sisaldama minimaalset siltide komplekti. Need asuvad allolevas näites.

Kuidas Internetis veebisaiti luua

Brauser ise tõlgendab kõiki neid silte ja kuvab need kasutaja jaoks ühes teabevormis. Olete ise märganud, et saidile minnes neid elemente ekraanil ei kuvata. Näete ainult ilusat ümbrist, mida brauser kuvab.

Visuaalne näide HTML-lehe DOCTYPE märgendist

DOCTYPE silt on alati veebilehe alguses. On vaja märkida kehtiva dokumendi tüüp. Ja peale selle saab brauser aru, millist html-i versiooni kasutatakse.

Viimases versioonis 5 näeb see välja järgmine:

HTML-märgend

See on konteiner, mis sisaldab kogu veebilehe sisu. Dokumendi elementide avamine ja sulgemine on valikuline. Hea stiil nõuab aga nende kasutamist.

Tavaliselt on avav html-märgend teisel kohal pärast dokumendi määratlemist doctype abil. Lähim on alati lehel viimane.

See silt annab brauserile teada, kus meie html-dokument algab ja lõpeb. Seetõttu on kõik muud elemendid ( välja arvatud doctype) peavad olema selle konteineri sees.

peasilt

Head silt on mõeldud muude elementide salvestamiseks, mille eesmärk on aidata brauserit andmetega töötamisel. Samuti on konteineri sees metasildid, mida kasutatakse teabe salvestamiseks. See on mõeldud brauserite ja otsingumootorite jaoks.

Peasisu ei kuvata veebilehel otse peale pealkirja märgendi. Ta vastutab lehe pealkirja eest.

Üldiselt salvestab see element kogu lehe tehnilise teabe. Näiteks html-lehe kodeeringu tüüp. See annab brauserile teada, kuidas dokumenti kõige paremini dekodeerida. Siia saame lisada ka erinevaid skripte.

pealkirja silt

peas on üks nõutav komponent. See on pealkirja silt. Ta vastutab selle eest, kuidas html-lehe pealkiri välja näeb. Siia kirjutatu kuvatakse brauseri vahekaardil.

Võtke seda tõsiselt!

Selles elemendis soovitan kasutada tühikutega kuni 60 tähemärgi pikkust nime. See on vajalik selleks, et see ei oleks otsingutulemustes ära lõigatud. Ja lisage siia kindlasti tähendusrikkad sõnad. See tähendab, et me kirjutame konkreetselt, millest leht räägib.

Professionaalne kodulehe loomine Internetis koos näidetega

Loomulikult peate sisestama märksõnu ja muutma oma nime atraktiivsemaks. Vastasel juhul riskite lihtsalt otsinguliikluse kaotamisega.

metasilt

Teine element on metasilt. See ei ole paaris ega oma erilist väärtust. Kõige olulisemad elemendid on aga selle atribuudid.

Seega saab silt parameetrite ja atribuutide abil salvestada teie lehe kohta olulist teavet.

Lubage mul lisada elemendile charset parameetri ja näidata selles eelistatud dokumendi kodeering.

Professionaalne kodulehe loomine Internetis koos näidetega

Pange tähele, kuidas parameeter on määratud. Sisestame selle sildi sisse ja parema sulgemisklambri ette. Järgmisena paneme võrdusmärgi ja märgime dokumendi kodeeringu jutumärkides.

Märkige see kindlasti oma dokumentides. Vastasel juhul ilmuvad teie veebisaidile teksti asemel inetud hieroglüüfid ( krakozyabry).

keha silt

Allpool on keha silt. See on dokumendi põhiosa. Selle sees on kasutajale nähtav sisu. See võib olla tekst, pildid, lingid, videod jne.

Pange tähele, et keha jääb alati peasildi alla. St esmalt on lehe tehniline info ja alles seejärel põhisisu kasutaja jaoks. Aga mitte vastupidi!

Keha sees peab olema h1 silt. See on materjali pealkiri. See tähendab, kuidas teie artiklit nimetatakse. Soovitan teha nimes mitte rohkem kui 55 tähemärki koos tühikutega.

html süntaks

Tasub veidi mainida html-i süntaksit. Proovige viivitamatult korraldada sildid sellisel mugaval kujul, nagu ülaltoodud näites. Loomulikult saate neid korraldada kaootilises järjekorras.

Professionaalne kodulehe loomine Internetis koos näidetega

Dokumendi sisu asub siin ja on kõigile kasutajatele nähtav.

Brauserit ei huvita.

See kuvab lehe igal juhul õigesti. Kuid lehe html-koodi redigeerimine on teile väga ebamugav. Seetõttu soovitan mitte voolida ja teha seda hoolikalt.

Asetage üksikud sildid alati eraldi ridadele. Ja järgige pesastamise reeglit. Tõmmake kõik pesastatud sildid ülemelemendist ühe vahekaardi võrra.

Dokumendi pealkiri Materjali pealkiri

Põhitekst

See tähendab, et head-märgend peaks olema taandatud html-märgendi suhtes ühe vahekaardi võrra. Keha on peaga samal tasemel, kuna see on ka pesastatud html-konteinerisse.

Üldiselt, et lähtekoodiga kiiresti ja mugavalt töötada, tuleb kindlasti säilitada taane vastavalt elementide pesastamise tasemele.

Ainsad erandid on pea ja keha. Neid kasutatakse ainult üks kord lehel. Seetõttu, et mitte minna liiga paremale, kui on palju pesitsemist, võib need elemendid teha ilma taandeta.

Dokumendi nimi

Põhitekst

Kui pesastamist on palju, aitab see meetod säästa ruumi ega eksi html-struktuuri.

Nagu teate, saab silte üksteise sisse pesastada. Näiteks tekst ja pilt on erinevates siltides. Siiski on neil endiselt ühine vanemelement.

Kui silt avaneb, tuleb see sulgeda. Kui see on tühi ja ilma mattava osata, siis sellisesse sildi sisse ei saa midagi sisestada.

Tähtis on järjekorda rangelt järgida!

Kui märgendisse on pesastatud mõni muu silt, on ühe sildi avaosa esimene. Siis teise avaosa ja nii edasi. Alles siis tuleks need sulgeda. Kuid seda tuleb teha vastupidises järjekorras. See tähendab, et kõigepealt sulgeme teise sildi ja alles lõpus jõuame esimeseni.

Õige näide:

Dokumendi sisu asub siin ja on kõigile kasutajatele nähtav.

Vale näide:

Dokumendi sisu asub siin ja on kõigile kasutajatele nähtav.

Lisaks saab ühte märgendisse pesastada mitu elementi. Kuid põhimõte on siin sama. Kõigepealt avame selle. Siis paneme sinna mõned sildid ja siis sulgeme selle.

Maksimaalse mugavuse huvides saate koodis lisaks kasutada html-kommentaare. Näiteks kirjutage üles, mille eest see koodijupp vastutab. See on arenduse ajal väga kasulik.

Kommentaar ise võib olla kas ühe- või mitmerealine.

Dokumendi nimi

Põhitekst

See on kirjutatud struktuuride vahele.

Kuidas luua html-faili

Võib-olla mõned teist ei tea, kuidas html-faili luua. Selle ülesande jaoks on palju eriprogramme:

• Sulgudes
• Märkmik
• Notepad++
• Ülev tekst
• Atom ja teised

Kui teil on Windows, on Notepad vaikimisi juba saadaval. Kuid neid pole mugav kasutada. Alustuseks soovitan kasutada tasuta HTML-lehe redaktorit Notepad++. Sellel on palju funktsioone mugavaks koodiga töötamiseks.

Kui käivitate redaktori, on teie ees juba uus tühi fail. Kirjutage sinna html-lehe skelett ( raami), mida me eespool käsitlesime. Ta peab alati kohal olema.

Professionaalne kodulehe loomine Internetis näidetega Kuidas luua veebisaiti Internetis

Dokumendi sisu asub siin ja on kõigile kasutajatele nähtav.

Saate teksti endale sobivaks muuta. Üldiselt on see kõige lihtsam html-leht.

HTML kodeering

Lehtede loomisel lisage metasildile alati kodeering. See on hooldussilt, mis sisestatakse peasse.

Üldiselt on see metaelement mitmetahuline. See võib vastutada mitte ainult kodeerimise, vaid ka paljude muude asjade eest. Sellest aga räägime järgmistes artiklites.

Nüüd mängib see meie jaoks kodeerimisosuti rolli. Siin on spetsiaalne sissekanne. See ütleb brauserile, et dokument on loodud utf-8 kodeeringus.

Miks sul üldse kodeeringut vaja on?

Pole saladus, et kõikjal maailmas kirjutatakse ja räägitakse erinevaid keeli. Kui loome lehe ja kirjutame vene keeles, siis Saksamaal luuakse ja kirjutatakse saksa keeles. Teistel riikidel on juba oma keel.

Varem oli html-lehe loomisel vaja määrata kodeering, mille kirjutame vene keeles. Sakslased pidid näitama, et kirjutavad saksa keeles jne.

Kui me lehte külastame, saab brauser juba aru, mis keeles sait on kirjutatud. Samuti saab ta aru, mis keelt teksti jaoks kasutatakse. Sellest lähtuvalt proovib ta seda teksti sisu olenevalt antud kodeeringust kuvada.

Kahjuks see alati ei õnnestunud.

Kui külastaksime Hiina saite, võime nende sümbolite asemel näha musti ruute või küsimärke. See tähendab, et brauser lihtsalt ei saanud aru, mis need märgid on.

HTML-kodeering on valesti seadistatud

Selle probleemi lahendamiseks loodi universaalne utf-8 kodeering.

Kui sellest sai standard, ei olnud enam vajadust konkreetse keele jaoks konkreetset kodeeringut määrata. Piisas universaalse utf-8 määramisest ja teie sait kuvatakse kõigis brauserites normaalselt.

Samas on ka andmebaasiga töötamine lihtsustatud. Seetõttu pidage siin meeles, et kodeeringut määrame alati utf-8-s. Kuid siin peate pöörama tähelepanu veel ühele asjale.

Salvesta html utf-8

Et kõik toimiks ja brauser lehte kuvaks, on soovitav HTML-dokument ise salvestada utf-8-sse. Programm Notepad++ aitab meid selles väga hästi.

Siin on üksus "Kodeeringud". Kui teie kodeering pole praegu õige ( nagu minu oma alumisel pildil), seejärel klõpsake üksust „Teisenda UTF-8-ks ilma BOM-ita”.

Sel juhul teisendatakse teie html-fail utf-8 kodeeringusse. Salvestage oma muudatused.

Paremas alanurgas on kiri “Dos\Windows ANSI as UTF-8”. See tähendab, et dokument loodi utf-8 režiimis ja ekraan on normaalne.

Ja kohe selline nõuanne!

Minge jaotisse "Valikud" -> "Seaded". Siin on vahekaart Uus dokument. Märkige kohe ruut "UTF-8 ilma BOM-sildita". Nii luuakse kõik uued dokumendid kohe selles kodeeringus.

Kuidas salvestada html-lehte

Faili nimi võib olla ükskõik milline. Kuid vaikimisi ja eriti kui see on saidi avaleht, salvestage see nimega index.html.

Kui sisestame saidi aadressi konkreetset lehte määramata, tähendab see, et taotleme lehekülge index.html. See tähendab, et kui võtame serveriga ühendust, laiendab see täpselt registrilehte.

Kui määrame konkreetse lehe, siis lõpuks see kuvatakse. Aga kui aadressi ei täpsustata, tagastatakse registrileht. Nii et vaikimisi paneme lehe nimeks index.html.

Ja nagu te juba märkate, peab faililaiend olema html. See tähendab, et failitüübis valige "Hyper Text Markup Language" ja klõpsake "Salvesta".

Kuidas avada html-faili

Kuidas avada HTML-faili, et näha lehe visuaalset esitust. Selleks kasutame mis tahes brauserit: Google Chrome, Opera, Edge, Mozilla Firefox, Safari ja teised.

Pole asjata, et me salvestame faile html-laiendiga. Lõppude lõpuks reprodutseerivad brauserid ainult seda tüüpi dokumente. Ja HTML-keel ise on lehe paigutuse standard, mida brauserid hiljem reprodutseerivad.

Üldiselt paremklõpsake failil.

Osutage menüüs valikule „Ava koos” ja valige soovitud brauseri valik. Kui neid ei kuvata, klõpsake nuppu "Vali teine ​​​​rakendus". Seal valige loendist soovitud programm html-lehtede lugemiseks.

Kui teil on vaja koodi redigeerida, valige sobiv redaktor. Soovitan kasutada Notepad++.

Kuidas vaadata lehe html-koodi

Samuti tahan teile öelda, kuidas saate vaadata lehe html-koodi otse brauseris. See on praktikas väga kasulik. Näiteks saate teada, millist html-koodi struktuuri konkreetne sait kasutab.

Koodi on väga lihtne vaadata. Vajutage lihtsalt klahvikombinatsiooni Ctrl + U. Saidi lehe lähtekood avaneb uuel vahelehel.

Saidi lähtekood

Samuti võite kirjutada aadressiribale vahetult enne lehe aadressi:

Brauseritel on ka sisseehitatud veebiarendaja tööriist. Juurdepääs sellele menüüs on iga programmi puhul erinev. Kuid F12 vajutamine avab selle tööriista mis tahes brauseris.

Võimaluse korral selgitage vajadusel oma koodi.

Kasutage oma koodi selgitamiseks kommentaare: mida see teeb, mida see teeb ja miks teie valitud lahendust kasutatakse.

(See punkt on valikuline, sest pole mõtet eeldada, et kood on alati hästi dokumenteeritud. Kommenteerimise kasulikkus sõltub projekti keerukusest ning võib HTML-i ja CSS-koodi puhul erineda.)

Ülesanded Märkige oma ülesannete loendis olevad ülesanded TODO abil.

Märkige ülesanded märksõna TODO abil. Ärge kasutage muid sageli kasutatavaid vorminguid, näiteks @@ .

Lisage kontaktid (kasutajanimi või meililist) sulgudesse: TODO(kontakt) .

Kirjeldage ülesannet pärast koolonit, näiteks: TODO: Ülesanne.

Soovitatav: (# TODO(Ivan Ivanov): tegele joondusega #) Test
Soovitatav:

• kurgid
• Tomatid

HTML-vormingureeglid Dokumendi tüüp Kasutage HTML5.

(Sisutüübiga text/html on soovitatav kasutada HTML-i. Ärge kasutage XHTML-i, kuna rakendusel/xhtml+xml on kehv brauseri tugi ja see piirab optimeerimisvõimalusi.)

HTML-i kehtivus Kasutage võimaluse korral kehtivat HTML-i.

Kasutage kehtivat HTML-koodi, välja arvatud juhul, kui kasutamine ei võimalda teil saavutada soovitud jõudluse taseme jaoks vajalikku failisuurust.

W3C HTML-i validaator (inglise keel) koodi kehtivuse kontrollimiseks.

Kehtivus on koodi oluline ja mõõdetav kvaliteet. Kehtiva HTML-i kirjutamine soodustab tehniliste nõuete ja piirangute õppimist ning tagab HTML-i õige kasutamise.

Pole soovitatav: Kontrollige Lihtsalt kontrollige
Soovitatav: tšekk Lihtsalt tšekk.

Semantika Kasutage HTML-i nii, nagu see oli ette nähtud.

Kasutage elemente (mõnikord valesti "sildideks" kutsutud) ettenähtud otstarbel: pealkirjad pealkirjade jaoks, p lõikude jaoks, a linkide jaoks jne.

See muudab koodi lugemise, redigeerimise ja hooldamise lihtsamaks.

Alternatiivne meedia Kaasake alati alternatiivse meedia sisu.

Proovige pakkuda meediale alternatiivset sisu, näiteks pilte, videoid või lõuendi abil määratletud animatsioone. Piltide puhul on see tähenduslik alternatiivtekst (alt) ning video ja heli puhul võimalusel teksti ja pealkirja ärakiri.

Alternatiivne sisu võib puuetega inimesi aidata. Näiteks on halva nägemisega inimesel raske aru saada, mis pildil on, kui @alt pole selleks määratud. Teistel inimestel võib olla raskusi aru saada, mida video- või helisalvestisel öeldakse.

(Kui pildi alt on üleliigne või seda kasutatakse lihtsalt dekoratiivsetel eesmärkidel kohtades, kus CSS-i kasutada ei saa, kasutage tühja altteksti alt="" )

Kohustuste lahusus Eraldi struktuur, disain ja käitumine.

Hoidke struktuur (märgistus), välimus (stiilid) ja käitumine (skriptid) lahus ning proovige hoida nendevaheline suhtlus minimaalne.

Veenduge, et dokumendid ja mallid sisaldaksid ainult HTML-i ja et HTML-i kasutatakse ainult dokumendi struktuuri määratlemiseks. Liigutage kogu disaini eest vastutav kood stiilifailidesse ja käitumise eest vastutav kood skriptidesse.

Püüdke vähendada nende ristumiskohti miinimumini, kaasates oma mallidesse minimaalse arvu stiilifaile ja skripte.

Struktuuri eraldamine esitlusest ja käitumisest aitab muuta koodi haldamise lihtsamaks. Mallide ja HTML-dokumentide muutmine võtab alati kauem aega kui stiilifailide või skriptide muutmine.

Pole soovitatav: HTML imeb HTML imeb

Lugesin selle kohta varem kuskilt, aga nüüd on kõik selge: HTML on täielik prügi!!1 Ma ei suuda uskuda, et disaini muutmiseks tuleb iga kord kõik uuesti läbi teha.
Soovitatav: Minu esimene ainult CSS-i ümberkujundus Minu uus CSS-i kujundus

Lugesin selle kohta varem, kuid lõpuks tegin seda ise: kasutan murede eraldamise põhimõtet ega lükka kujundust HTML-i

Kui lahe!

Mnemoonilised lingid Ärge kasutage märguandelinke.

Ainus erand sellest reeglist on HTML-i teenuse märgid (näiteks< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

Valikulised sildid Ärge kasutage valikulisi silte. (ei ole vajalik)

Faili suuruse vähendamiseks ja koodi loetavuse parandamiseks võite valikulised sildid ära jätta. HTML5 spetsifikatsioonis on valikuliste siltide loend.

(Selle lähenemisviisi laialdaseks kasutuselevõtuks võib kuluda veidi aega, kuna see erineb suuresti sellest, mida veebiarendajatele tavaliselt õpetatakse. Järjepidevuse, koodi ja lihtsuse seisukohalt on parem jätta välja kõik valikulised sildid, mitte mõned neist).

Pole soovitatav: raiskame baite – raiskame raha.
Soovitatav: baidid on raha!

Nii et

Atribuut "type" Ärge määrake tüübi atribuuti, kui lisate dokumendile stiile ja skripte.

Ärge kasutage atribuuti type, kui ühendate stiile (välja arvatud juhul, kui kasutate midagi muud peale CSS-i) ja skripte (välja arvatud juhul, kui kasutate midagi muud peale JavaScripti).

Tüübi atribuudi määramine pole sel juhul vajalik, kuna HTML5 kasutab vaikimisi text/css-i (inglise) ja text/javascripti (inglise keeles). See töötab isegi vanemates brauserites.

Ei ole soovitatav:
Soovitatav:
Ei ole soovitatav:
Soovitatav:

HTML-i vormindamise reeglidVormindamine Looge iga ploki, tabeli või loendi elemendi jaoks uus rida ja taane iga alamelemendi jaoks.

Olenemata elemendile määratud stiilidest (CSS võimaldab muuta elemendi käitumist kuva omaduse abil), mähkige iga ploki või tabeli element uuele reale.

Treppige ka kõik ploki või tabeli elemendis olevad elemendid.

(Kui teil on probleeme loendi elementide tühikutega, võite panna kõik li elemendid ühele reale. Sel juhul on soovitatav, et Lint annaks vea asemel hoiatuse.

Soovitatav:

• Maša
• Glasha
• Tšeburash

Soovitatav: Kasumimaksud

$ 5.00	$ 4.50

CSS-stiilireeglid CSS-i kehtivus Kasutage võimaluse korral kehtivat CSS-koodi.

Kasutage kehtivat CSS-koodi, välja arvatud juhtudel, kui nõutakse brauserist sõltuvat koodi või kui esineb valideerimisvigu.

Kasutage oma koodi kinnitamiseks selliseid tööriistu nagu W3C CSS Validator.

Kehtivus on koodi oluline ja mõõdetav kvaliteet. Kehtiva CSS-i kirjutamine aitab kõrvaldada üleliigse koodi ja tagab stiililehtede õige kasutamise...

Klasside identifikaatorid ja nimed Kasutage metamärke või tähendusrikkaid klassinimesid ja identifikaatoreid.

Koodide kasutamise või elemendi välimuse kirjeldamise asemel proovige väljendada selle loomise tähendust klassi või identifikaatori nimes või andke sellele malli nimi...

Metamärginimed on lihtsalt elementide variantnimed, millel pole erilist eesmärki või mida ei saa eristada nende õdedest-vendadest. Tavaliselt on neid vaja "abilistena".

Funktsionaalsete või mallinimede kasutamine vähendab vajadust dokumendis või mallides tarbetuid muudatusi teha.

Aegunud: /* Tugi kaotanud: mõttetu */ #yee-1901 () /* Katkestatud: välimuse kirjeldus */ .button-green() .clear()
Soovitatav: /* Soovitatav: täpne ja asjakohane */ #galerii () #login () .video () /* Soovitatav: malli nimi */ .aux () .alt ()

Identifikaatorite ja klasside nimed Identifikaatorite ja klasside jaoks kasutage võimalikult pikki, kuid võimalikult lühikesi nimesid.

Proovige võimalikult lühidalt sõnastada, mida see element täpselt tegema peaks.

Selline klasside ja identifikaatorite kasutamine aitab muuta koodi hõlpsamini mõistetavaks ja tõhusamaks.

Tüübivalijad Vältige klassinimede või identifikaatorite kasutamist elemenditüübi (sildi) valijatega.

Ärge kasutage elementide nimesid koos klassinimede või identifikaatoritega, kui see pole tingimata vajalik (näiteks abiklasside puhul).

Atribuutide otseteed Kasutage võimaluse korral atribuutide otseteid.

CSS pakub palju erinevaid stenogramme (nt font ), mida on soovitatav kasutada igal võimalusel, isegi kui määratud on ainult üks väärtustest.

Lühike atribuutide kasutamine on kasulik suurema tõhususe ja koodi paremaks mõistmiseks.

Pole soovitatav: /* Pole soovitatav */ border-top-style: none; fondiperekond: palatino, gruusia, serif; fondi suurus: 100%; joone kõrgus: 1,6; polster-põhi: 2em; polster-vasakul: 1em; polsterdus-parem: 1em; polsterdus: 0;
Soovitatav: /* Soovitatav */ border-top: 0; font: 100%/1,6 palatino, georgia, serif; polsterdus: 0 1em 2em;

0 ja ühikud Ärge määrake nullväärtuste jaoks ühikuid

Ärge määrake nullväärtuste jaoks ühikuid, välja arvatud juhul, kui selleks on põhjust.

0 kogu murdosas Ärge pange "0" tervesse murdosasse.

Ärge pange 0 täisarvu ossa väärtustesse -1 ja 1 vahel.

Tsitaadid linkides Ärge kasutage linkides jutumärke

Ärge kasutage url() juures jutumärke ("" , "").

Kuueteistkümnendsüsteemi värvinimed Kasutage võimaluse korral kolmekohalist kuueteistkümnendsüsteemi.

Värvide kolmekohaline kuueteistkümnendsüsteem on lühem ja võtab vähem ruumi.

Prefiksid Prefiksi valijad koos praeguse rakenduse ainulaadsete eesliidetega. (ei ole vajalik)

Suurte projektide puhul, aga ka koodis, mida kasutatakse muude projektide jaoks või muudel saitidel, kasutage identifikaatorite ja klassinimede jaoks eesliiteid (nimeruumidena). Kasutage lühikesi unikaalseid pealkirju, millele järgneb sidekriips.

Nimeruumide kasutamine aitab vältida nimekonflikte ja muudab teie saidi hooldamise lihtsamaks. Näiteks otsimisel ja asendamisel.

Eraldajad klassides ja identifikaatorites Eraldage sõnad identifikaatorites ja klassinimedes sidekriipsu abil.

Vältige sõnade ja lühendite ühendamiseks valijates midagi muud peale sidekriipsu, et parandada koodi loetavust ja hõlpsamini mõista.

Pole soovitatav: /* Pole soovitatav: sõnu "demo" ja "image" ei eraldata */ .demoimage () /* Pole soovitatav: sidekriipsu asemel kasutatakse alakriipsust */ .error_status ()
Soovitatav: /* Soovitatav */ #video-id().ads-sample()

Häkid Vältige brauseri versiooniteabe või CSS-häkkide kasutamist – proovige esmalt teisi meetodeid.

Võib olla ahvatlev võidelda brauseri erinevustega CSS-filtrite, häkkimiste või muude lahenduste abil. Kõiki neid lähenemisviise tuleks kaaluda ainult viimase abinõuna, kui soovite tõhusat ja hõlpsasti hooldatavat koodibaasi. Lihtsamalt öeldes kahjustab häkkimiste ja brauseri tuvastamise lubamine projekti pikemas perspektiivis, kuna see tähendab, et projekt läheb kõige väiksema vastupanu teed. Mis muudab häkkide kasutamise lihtsamaks ja võimaldab neid üha sagedamini kasutada, mistõttu neid kasutatakse liiga sageli.

CSS-vormingu reeglidReklaamide tellimine Sorteerige reklaame tähestikulises järjekorras.

Määratlege deklaratsioonid tähestikulises järjekorras, et tagada järjepidev kood, millega on lihtne töötada.

Sorteerimisel ignoreerige brauseri eesliiteid. Veelgi enam, kui ühe atribuudi jaoks kasutatakse mitut brauseri eesliidet, tuleb need ka sortida (näiteks -moz peaks olema enne --webkit)

Taanded plokkides. Blokeeri sisu alati taane.

Hierarhia näitamiseks ja koodi arusaadavamaks muutmiseks taane alati ploki sisu, nagu reeglid reeglites või deklaratsioonides.

Pärast deklaratsioone Asetage iga deklaratsiooni järele semikoolon.

Kasutage pärast iga deklaratsiooni semikoolonit koodi järjepidevuse tagamiseks ja uute atribuutide lisamise hõlbustamiseks.

Atribuutide nimede järel Kasutage deklaratsioonides koolonite järel tühikuid.

Deklaratsioonides kasutage alati kooloni järel ühte tühikut (kuid mitte enne), et koodis järjestada.

Selektorite ja deklaratsioonide eraldamine Eraldage valijad ja deklaratsioonid reavahetusega.

Käivitage iga valija või deklaratsioon uuel real.

Eraldusreeglid Eraldi reavahedega reeglid.

Pange reeglite vahele alati reavahetus.

Metareeglid CSSGrupimise reeglid Grupireeglid ja märkige grupid kommentaariga. (ei ole vajalik)

Kui vähegi võimalik, rühmitage reeglid koos. Märkige rühmad kommentaaridega ja eraldage need reavahetustega.

Järeldus Ole järjekindel

Kui redigeerite koodi, leidke mõni minut, et mõista, kuidas see on kirjutatud. Kui matemaatilised operaatorid on eraldatud tühikutega, tehke sama. Kui kommentaarid on ümbritsetud sulgude või sidekriipsudega, tehke sama oma kommentaaridega.

Selle juhendi idee on luua ühine sõnavara, mis võimaldab arendajatel keskenduda sellele, mida nad soovivad väljendada, mitte sellele, kuidas.

Pakume ühtseid disainireegleid, mis võimaldavad kirjutada koodi samas stiilis, kuid oluline on ka projektis juba kasutatav koodistiil.

Kui teie kood erineb olemasolevast koodist väga palju, võib see lugeja rütmist välja lüüa ja lugemise raskendada. Püüdke seda vältida.

Märkus tõlkijalt Tahaksin ka märkida, et Google keskendub eelkõige suurtele ja suure koormusega projektidele, kus iga bait on kallis, seega tasub kaaluda, et kui nad soovitavad alustada iga valijat uuelt realt või kasutada tabeldusmärkide asemel tühikuid. , siis tähendab see eelkõige , et kood tuleb enne saidil kasutamist tingimata minimeerida ja tihendada.

Aitäh kõigile, kes siiani lugesid.

Sildid: lisa sildid