Android. Operacinė sistema. Multimedija. Socialinė žiniasklaida. Įrankiai. Kodekai. Grafikos menai
Ar tu čia: » »

html ir css pagrindai pradedantiesiems. HTML pagrindai pradedantiesiems

HTML pagrinduose yra pagrindinės taisyklės HTML kalba, HTML puslapio struktūros aprašymas, santykiai HTML dokumento struktūroje tarp HTML elementų.

HTML dokumentas yra įprastas Tekstinis dokumentas, galima sukurti įprastoje teksto rengyklėje (Notepad) arba specializuotoje su kodo paryškinimu (Notepad++, Visual Studio Code ir kt.). HTML dokumentas turi .html plėtinį.

HTML dokumentą sudaro HTML elementų ir teksto medis. Kiekvienas elementas pirminiame dokumente identifikuojamas pradžios (pradžios) ir pabaigos (uždarymo) žyma (su retomis išimtimis).

Pradžios žyma rodo, kur elementas prasideda, pabaigos žyma rodo, kur jis baigiasi. Baigiamoji žyma sudaroma pridedant pasvirąjį brūkšnį / prieš žymos pavadinimą: .... Tarp pradžios ir pabaigos žymų yra žymos turinys – turinys.

Vienos žymos negali saugoti turinio tiesiogiai, jis parašytas kaip atributo reikšmė, pavyzdžiui, žyma sukurs mygtuką su tekstu Mygtukas.

Žymos gali būti įdėtos viena į kitą, pavyzdžiui,

Tekstas

. Investuodami turėtumėte vadovautis jų uždarymo tvarka („matryoshka“ principas), pavyzdžiui, toks įrašas bus neteisingas:

Tekstas

.

HTML elementai gali turėti atributus (visuotinius, taikomus visiems HTML elementams ir savo). Atributai rašomi pradinėje elemento žymoje ir turi pavadinimą bei reikšmę, nurodytą formatu atributas name="value" . Atributai leidžia keisti elemento, kuriam jie nustatyti, savybes ir elgesį.

Kiekvienam elementui gali būti priskirtos kelios klasės vertės ir tik viena ID reikšmė. Kelių klasių reikšmės rašomos atskirtos tarpu, . Klasės ir ID reikšmės turi būti sudarytos tik iš raidžių, skaičių, brūkšnelių ir apatinių brūkšnių ir prasidėti tik raidėmis arba skaičiais.

Naršyklė peržiūri (interpretuoja) HTML dokumentą, kurdama jo struktūrą (DOM) ir rodydama pagal instrukcijas, pateiktas šiame faile (stilių lapai, scenarijai). Jei žymėjimas teisingas, naršyklės lange bus rodomas HTML puslapis su HTML elementais – antraštėmis, lentelėmis, vaizdais ir kt.

Aiškinimo procesas (analizavimas) prasideda prieš tai, kai tinklalapis visiškai įkeliamas į naršyklę. Naršyklės apdoroja HTML dokumentus nuosekliai nuo pat pradžių, apdorodamos CSS ir susiejant stiliaus lapus su puslapio elementais.

HTML dokumentas susideda iš dviejų skyrių - antraštės - tarp žymų ... ir turinio dalies - tarp žymų ....

Tinklalapio struktūra 1. HTML dokumento struktūra

HTML laikosi taisyklių, esančių dokumento tipo deklaracijos faile (Dokumento tipo apibrėžimas arba DTD). DTD yra XML dokumentas, apibrėžiantis, kurios žymos, atributai ir jų reikšmės galioja konkretus tipas HTML. Kiekviena HTML versija turi savo DTD.

DOCTYPE yra atsakingas už tai, kad naršyklė tinkamai parodytų tinklalapį. DOCTYPE nurodo ne tik HTML versiją (pvz., html), bet ir atitinkamą DTD failą internete.

...

Žymos viduje esantys elementai sudaro dokumentų medį, vadinamąjį dokumento objekto modelį, DOM (dokumento objekto modelį). Šiuo atveju elementas yra šakninis elementas.


Ryžiai. 1. Paprasčiausia tinklalapio struktūra

Norint suprasti tinklalapio elementų sąveiką, būtina atsižvelgti į vadinamuosius „šeimos santykius“ tarp elementų. Kelių įdėtųjų elementų ryšiai klasifikuojami kaip tėvas, vaikas ir sesuo.

Protėvis yra elementas, kuriame yra kitų elementų. 1 paveiksle visų elementų protėvis yra . Tuo pačiu metu elementas yra visų jame esančių žymų protėvis: ,

, ir kt.

Palikuonis yra elementas, esantis viename ar keliuose elementų tipuose. Pavyzdžiui, yra , ir elemento palikuonis

Yra abiejų ir palikuonis.

Pirminis elementas yra elementas, kuris yra susijęs su kitais elementais žemesniame lygyje ir yra virš jų medyje. 1 paveiksle ir . Žyma

Ar tėvai tik .

Antrasis elementas yra elementas, kuris yra tiesiogiai pavaldus kitam aukštesnio lygio elementui. 1 paveiksle yra tik elementai , ,

Ir yra vaikai iš.

Seserinis elementas yra elementas, turintis bendrą pirminį elementą su nagrinėjamuoju, vadinamuosius to paties lygio elementus. 1 paveiksle ir yra to paties lygio elementai, taip pat elementai , ir

Jos viena kitai yra seserys.

1.1. 1.2 elementas. Elementas

Skyriuje ... yra technine informacija apie puslapį: pavadinimas, aprašymas, raktinius žodžius paieškos sistemoms, kodavimui ir kt. Ten įvesta informacija nerodoma naršyklės lange, tačiau joje yra informacijos, nurodančios naršyklei, kaip apdoroti puslapį.

1.2.1. Elementas

Reikalinga skyriaus žyma yra . Šios žymos viduje esantis tekstas rodomas žiniatinklio naršyklės pavadinimo juostoje. Pavadinimas turi būti ne ilgesnis nei 60 simbolių, kad jis visiškai tilptų į pavadinimą. Pavadinimo tekste turi būti kuo daugiau Pilnas aprašymas tinklalapio turinį.

1.2.2. Elementas

Pasirenkama skilties žyma yra viena žyma. Su jo pagalba galite nustatyti puslapio turinio aprašymą ir raktinius žodžius paieškos sistemoms, HTML dokumento autorių ir kitas metaduomenų savybes. Elemente gali būti keli elementai, nes jie turi skirtingą informaciją, priklausomai nuo naudojamų atributų.

Puslapio turinio aprašymas ir raktiniai žodžiai gali būti vienu metu nurodyti keliomis kalbomis, pavyzdžiui, rusų ir anglų kalbomis:

Naudodami žymą galite blokuoti arba leisti paieškos sistemoms indeksuoti tinklalapį:

Norėdami automatiškai iš naujo įkelti puslapį po nurodyto laiko, turite naudoti atnaujinimo reikšmę:

Puslapis bus įkeltas iš naujo po 30 sekundžių. Norėdami nukreipti lankytoją į kitą puslapį, url parametre turite nurodyti URL:

skliausteliuose, kurių viduje įrašytas žymos pavadinimas. Naršyklė žiūri į dokumento struktūrą, sukuria jį ir pagal instrukcijas rodo jį monitoriuje, jei, žinoma, viską padarėte teisingai.

Visas šis procesas prasideda dar net nepamačius baigtos nuotraukos. Naršyklės apdoroja dokumentą nuosekliai nuo pradžios iki pabaigos. Įskaitant viską, kas turėtų būti puslapyje. Lentelės, paveikslėliai, scenarijai ir pan., išskyrus CSS stilius.

Pagrindai pradedantiesiems

Kas yra html – jei pažiūrėtumėte, ką rašo Vikipedija – (HyperText Markup Language) dokumentų hiperteksto žymėjimo kalba. Daugumoje interneto puslapių yra puslapių žymėjimas šia kalba. Ši kalba interpretuojamas naršyklių, gautas suformatuotas tekstas rodomas jūsų kompiuterio monitoriuje arba mobiliajame įrenginyje.

Šią kalbą išmokti labai lengva ir prieinama. Kiekvienas gali išmokti ir suprasti jos pagrindus. Norint naudoti tokią kalbą, reikia žinoti ir naudoti deskriptorius, kurie dar vadinami žymomis. Žymių pagalba sukuriamas dokumentas.

Iš ko turėtų sudaryti dokumento struktūra, kokios žymos turi būti. Pažvelkime į viską su vienu mažu pavyzdžiu. Aš parašiau tekstą MS Office ir parodžiau jį šioje ekrano kopijoje.

Kad šis tekstas būtų rodomas naršyklėje taip pat, kaip buvo parašyta dokumente, prie jo reikia pridėti puslapio žymėjimą, kuriame yra tam tikrų žymų. Pirmiausia pažiūrėkite į juos, tada aprašysiu kiekvieną, kas už ką atsakingas.

Sveiki atvykę į mano tinklaraštį, dabar lankotės HTML pagrindų pamokoje. Jei jums patiko šis straipsnis, galite užsiprenumeruoti šį tinklaraštį ir gauti naujų straipsnių į el. pašto dėžutę.

Jevgenijaus Nesmelovo tinklaraštis! svetainė html ir css pagrindai pradedantiesiems

Iš kokių žymų susideda bet kuris html dokumentas, kas jame yra ir kur visa tai turėtų būti užrašoma?

< html >

< body >

< h2 >< / h2 >

< p >Sveiki atvykę į mano tinklaraštį, dabar naudokite HTML pagrindų mokymo programą. Jei jums patiko šis straipsnis, galite užsiprenumeruoti šį tinklaraštį ir gauti naujų straipsnių į el. pašto dėžutę.< / p >

< h2 >Jevgenijos Nesmelovo tinklaraštis! Nesmelovas. ru HTML ir CSS pagrindai pradedantiesiems< / h2 >

< / body >

< / html >

Bet kurį kodą sudaro simboliai, pateikiami kampiniuose skliaustuose. Visa tai vadinama elementais. Visus elementus paprastai sudaro dvi žymos – atidaromos ir uždaromos. Patariu iš pradžių atidžiai pažvelgti į žymas, jei vieną iš jų nepastebėsite ir jos neuždarysite, norėdami rasti klaidą, turėsite peržiūrėti dideles kodo dalis.

Buvo atvejų, kai užtruko ne vieną dieną, žmogus susisiekia ir prašo pagalbos, savo svetainėje neranda klaidos, todėl visada labai atidžiai pasidomėkite, ką ir kur rašote. Dabar naudodamiesi šiuo pavyzdžiu pažiūrėkime į kiekvieną kodo elementą, kas jame parašyta, ką tai reiškia ir kas nutinka pabaigoje.

Dauguma žymų yra suporuotos, įskaitant pradinę ir uždaromąją žymą. Be tokių žymų, yra ir pavienių žymų. Žymos gali būti derinamos su kitais, taip susidėliodamos viena į kitą. Pavyzdžiui, vienu metu rodyti tekstą pusjuodžiu šriftu ir kursyvu.

Tekstas

< strong > < i >Tekstas< / strong > < / i >

HTML dokumento struktūra

Dar kartą priminsiu, kad reikia laikytis dokumente nurodytų taisyklių. Taip naršyklė supranta, kas yra puslapyje, jo seką, turinį ir pan.

Žyma yra komponentas, kuris nurodo žiniatinklio naršyklei atlikti tam tikrą užduotį. Pavyzdžiui, pastraipos, lentelės, formos ar paveikslėlio buvimas.

Atributas – modifikuoja žymą. Pavyzdžiui, pastraipą galite lygiuoti centre arba dešinėje, taip pat nustatyti vaizdo vietą puslapyje ir pan.

VISADA uždarykite žymas, jei atidarysite, būtinai uždarykite. Priešingu atveju įvyks klaida ir jūsų dokumentas nebus tinkamai rodomas puslapyje. Taip pat yra išimčių, kurių nereikėtų pamiršti.

Būtina suprasti, kad yra dokumento pavadinimas ir jo turinys. Pavadinimas yra viskas, kas yra žymoje. Dokumento turinys (), dokumento turinyje yra visas puslapio turinys. Jei reikia palikti kodo skiltį sau, taip įtraukiant šias žymas į komentarus, tam naudojama žyma. Viskas, kas yra tokioje žymoje, naudojama kaip komentaras, o naršyklės to nesuvokia.

Pradėkime nuo paties pirmojo. Dokumento pradžioje atidariau žymą, o pabaigoje uždariau. Šis kodas yra absoliučiai kiekviename dokumente, jis nurodo naršyklei, kad viskas, kas yra tarp šių žymų, yra HTML kodas. Tai yra paties dokumento šaknis. Pačioje dokumento pradžioje žyma atidaroma, o pačioje pabaigoje ji turi būti uždaryta.

Visoje šios žymos dalyje yra visa techninė dokumento informacija. Kaip ir ankstesnė žyma, galvutė taip pat turi būti atidaryta ir uždaryta pabaigoje. Ši informacija apima puslapio pavadinimą, aprašą, paieškos variklio raktinius žodžius ir kodavimą. Apie kodavimą šiek tiek žemiau.

Turinys

< head >Turinys< / head >

Ši žyma yra galvoje ir turi būti įrašyta galvos žymos viduje. Ši pavadinimo žyma yra privaloma ir turi būti kiekviename HTML dokumente. Be to, jis rodomas kaip naršyklės lango pavadinimas. Tokios antraštės ilgis neturi viršyti 60 simbolių. Tokios antraštės tekste turėtų būti daugiausia visa informacija, kuris apibūdina puslapio turinį.

Jei antraštėje parašėte „Sveikas pasaulis“, tai yra informacija, kuri turėtų būti rodoma puslapyje, o ne kita. Jūs neturėtumėte apgaudinėti žmonių ir paieškos sistemų, jiems tai nepatinka, ir tokiu būdu jūs viską dar labiau pabloginate. Šioje žymoje esanti informacija turėtų būti susijusi su jūsų puslapio turiniu.

Po privalomos pavadinimo žymos yra neprivaloma, bet ne mažiau svarbi metažyma. Ši žyma yra viena. Naudodami šią žymą nustatote puslapio aprašymą (aprašą) ir jo raktinius žodžius (raktinius žodžius).

Be to, metažymoje gali būti duomenų apie puslapio autorių ir kitas metaduomenų ypatybes. Galite neleisti viso puslapio indeksuoti paieškos sistemų. Įdėkite automatinis atnaujinimas puslapį po 20 sekundžių arba po 5 sekundžių, po kurio pereinama į kitą puslapį.

< meta name = "robots" content = "index, follow" >

< meta http - equiv = "refresh" content = "20" >

< meta http - equiv = "refresh" content = "5; url=http://сайт/" >

Tokių meta elementų gali būti keli, nes jie gali nešti visiškai skirtingą informaciją. Kiti vartotojai, atidarę puslapį naršyklėje, nemato visų jūsų aprašymų, visa tai lieka paslėpta.

Stiliaus žyma taip pat gali būti naudojama puslapio stiliams nustatyti. Jei naudojate daug skirtingų stilių css, tokiu atveju patartina juos nustatyti atskirame faile. Jei reikia nurodyti kelis iš jų, visa tai galima nurodyti tiesiogiai html dokumente.

.base (plotis: 100 pikselių; fono spalva: #000; aukštis: 150 pikselių; spalva: #fff; )

< style type = "text/css" >

Bazė(

plotis: 100 pikselių;

fonas - spalva : #000;

aukštis: 150 pikselių;

spalva: #fff;

Arba pridėkite stilių konkrečiai prie vienos žymos, pačioje žymoje turite pridėti stiliaus elementą. Ši žyma turi būti naudojama sudėtiniame rodinyje, kuriame nustatomi puslapio stiliai. Galite naudoti keletą tokių žymų, tai nebus klaida.

Šiek tiek panaši į ankstesnę žymą, nuorodos žyma leidžia nustatyti dokumento stilius, esančius kitame faile. Kitaip tariant, visą lentelę galite prijungti prie esamo dokumento css stiliai, kuris susideda iš daugybės savybių. Taigi sumažinate dokumento dydį, kuris galiausiai bus įkeltas ir greičiau atidarytas kompiuteryje arba mobilusis įrenginys su mažu interneto greičiu.

Galite prijungti daugiau nei vieną failą, nėra jokių apribojimų. Tokios žymos uždaryti nereikia. Jei viskas bus padaryta teisingai, konkretūs stiliai iš atskiro failo bus įkelti į jūsų dokumentą. Šią žymą galima pridėti prie html pagrindų ir nepamiršti apie jos egzistavimą. Rezultatas yra toks paveikslėlis:

< link href = "css/style-lg.css" rel = "stylesheet" >

< link href = "css/style-md.css" rel = "stylesheet" >

< link href = "css/style-sm.css" rel = "stylesheet" >

Naudodami scenarijaus žymą prie dokumento galite prijungti skirtingus scenarijus (scenarijus). Uždarymo žyma būtina. Pats scenarijus gali būti dokumento pradžioje, viduje arba pabaigoje.

Nurodo naršyklei, kad viskas, kas yra tarp šių žymų, turėtų būti rodoma naršyklės lange. Čia yra pagrindinės žymos, kurios gali būti absoliučiai kiekviename dokumente. Turinio žyma naudojama kaip pagrindinė puslapio dalis, apimanti visą jo turinį. Patartina atidaryti šią žymą ir nepamiršti uždaryti dokumento pabaigoje.

Puslapių antraštės h1 h2 h3

Eikime toliau, matome žymą, kuri atsidaro ir užsidaro taip pat. Ši žyma žymi pagrindinį teksto pavadinimą, po antrašte H1 yra puslapio pavadinimas. Tiesą sakant, yra tik šešios duomenų antraštės. . Jie taip pat naudojami SEO, bet tai šiek tiek kita tema. Tikrai išskirsiu vieną straipsnį už tai ir duosiu Išsamus aprašymas jiems užsiprenumeruokite tinklaraščio atnaujinimus, kad nieko nepraleistumėte.

Tokių antraščių buvimas straipsnyje vaidins svarbų vaidmenį reklamuojant puslapį. Be to, jų naudojimas suteikia aiškią puslapio struktūrą, jo pavadinimą, paantraštes, paryškinimus, pastraipas ir pan. Visada naudokite juos ir pritaikykite juos praktiškai. Daugelyje TVS, tokių kaip „WordPress“, rašydami tekstą galite matyti „antraštę 1“, „antraštę 2“, „antraštę 3“ ir pan. Jie yra atsakingi už h1, h2 ir h3.

Jei rašote pagrindinį tekstą iš naujos pastraipos, rašote žymą

Pradžioje ir pabaigoje uždarykite

. Pastraipos žymėjimas html formatu prilygsta naujos pastraipos kūrimui MS Word dokumente. Nieko naujo prie dokumento nepridėjau. Tačiau tai dar ne viskas, kas turėtų būti html dokumente. Pažiūrėkime į kitą pavyzdį, aprašymas bus šiek tiek vėliau.

HTML dokumentas

Šis tekstas bus paryškintas, ir šis taip pat kursyvu

< ! DOCTYPE html >

< html >

< head >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

< title >HTML dokumentas< / title >

< / head >

< body >

< p >

< b >

< / b >

< / p >

< / body >

< / html >

Pagrindiniai elementai Head ir Title

Kiekviename dokumente yra antraštės ir pavadinimo elementai. Pirmasis, kuris atsiranda iškart po pirmosios žymos. Šioje žymoje yra visa informacija apie puslapį, joje taip pat yra elementas. Pavadinimas – informacija apie puslapio pavadinimą, kitaip tariant, puslapio pavadinimas, jo pavadinimas. Būtent pavadinime nurodote teisingą puslapio pavadinimą, pagal kurį vartotojas jūsų ieškos per paieškos variklį – tai labai svarbus momentas. Abu elementai turi būti atviri ir uždaryti. Kiekvienas elementas uždaromas „/“. Rezultatas yra toks vaizdas.

Antraštė ir puslapio turinys

< / html >

Kaip matote, nėra nieko sudėtingo. Čia pateikiamos pagrindinės žymos, kurios turėtų būti kiekviename html dokumente. Nepamirškite uždaryti kiekvieno iš jų, kitaip naršyklė negalės suvokti viso kodo vaizdo. Jūs turite tai žinoti ir atsiminti visada. Tada pradedate įterpti tekstą, paveikslėlius, vaizdo įrašus ir pan. Bet tai jau bus kituose straipsniuose.

Notepad++ redaktorius

Norėdami dirbti su kodu, naudokite programą Notepad++. Jis nemokamas ir nesunku jį rasti internete. Labai patogu suprasti bet kokį kodą, taip pat patogiai rodo atidarymo ir uždarymo žymas. Mes palaikome daugiau nei 40 programavimo kalbų sintaksę. Tai, ko jums reikia norint išmokti html pagrindus.

Užrašų knygelė visais atžvilgiais pranašesnė už įprastą bloknotą. Maksimaliam patogumui, lengvumui ir mokymuisi šis redaktorius Pirmiausia turite jį įdiegti savo kompiuteryje. Svarbiausias privalumas ir patogumas yra tai, kad Notepad++ redaktorius rodo užuominas rašant kodą, todėl jūsų darbas tampa daug greitesnis ir kokybiškesnis.

DOCTYPE elementas

Kiekviename dokumente taip pat turi būti šis doctype elementas. Kam to reikia ir kas jame turi būti. Dažniausiai žmonės nelabai mėgsta šias eilutes, nusirašo jas į dokumentus ir ramiai dirba. Šie elementai nurodo naršyklei, kokia html versija naudojama dokumente, koks puslapio aprašymas, kokia koduotė naudojama, kokie raktiniai žodžiai įtraukti, kas yra autorius ir kaip puslapis vadinasi.

Paprastai jie dedami pačioje pradžioje. Yra keletas variantų ir visi jie skiriasi vienas nuo kito, parašysiu vieną dažniausiai naudojamą pavyzdį. Šis ruošinys gali būti naudojamas kaip paruoštas šablonas. Toliau bus aiškus kiekvienos eilutės aprašymas, dėl to neturėtų kilti problemų.

Trumpai aiškia kalba apie html pagrindus: ši eilutė nurodo naršyklei, kad šis dokumentas yra XHTML 1.0 versija, naudojama Anglų kalba ir visa šita netvarka yra šiuo adresu. Toliau metažymoje nurodome naudojamą kodavimą. Dažniausiai naudojama „Windows 1251“.

Aprašymas – paliesta SEO tema, viena iš trijų pagrindinių žymų, kurios turi būti absoliučiai kiekviename dokumente, ši žyma nurodo puslapio aprašymą. Kas parašyta šiame puslapyje, trumpas aprašymas, ne daugiau kaip du sakiniai. Raktinių žodžių žyma taip pat apima SEO temą, ši žyma yra būtina. Jame yra raktinių žodžių, kuriuos interneto vartotojai naudos norėdami jus rasti per paieškos sistemas.

Pavadinimo žymoje yra paties dokumento pavadinimas, jo pavadinimas, kurį matome naršyklėje. Turbūt pati svarbiausia žyma visame dokumente, turinti didžiausią įtaką puslapio reklamai. Straipsnyje apie pridėjimą ir kūrimą ši žyma aprašoma išsamiau.

Ką reikia prisiminti su šią pamoką apie html pagrindus:

  • Beveik visos žymos atidaromos ir uždaromos;
  • Dokumentas prasideda žyma ;
  • Žymės buvimas;
  • Žymės buvimas;
  • Aiški html dokumento struktūra.

    • Visi pagrindiniai puslapiai visada turi būti pavadinti rodykle. Taip yra priimta ir visi pripratę, kad ir koks būtų failo plėtinys, jis gali būti html arba php. Visada taip vadinama.

    Peržiūrėkite „Webformyself“ vaizdo įrašą apie HTML pagrindus.

    Hiperteksto žymėjimo kalba, pagrindiniai elementai ir struktūra. Visa tai ir dar daugiau pabandysiu aprašyti savo tinklaraštyje. Visų pirma, jis bus parašytas pradedantiesiems naudingos informacijos, pateikiamas kodo pavyzdys ir galimybė atsisiųsti patį pavyzdį kartu su baigtu puslapiu.

    Visi naudojasi internetu ir visi naršo po skirtingas svetaines ir tikriausiai kiekvienas norėtų patalpinti savo svetainę internete, tačiau tai padaryti nėra paprasta, tam yra daug priežasčių. Tačiau tam, kad galėtumėte priglobti kokybišką svetainę, tereikia žinoti pagrindus. WEB programavimas“, kuri yra HTML kalba. Šiame straipsnyje apžvelgsime pagrindinius elementus, žymas, atributus ir net parašysime pirmąjį tinklalapį.

    Hiperteksto žymėjimo kalba – "HTML" ( hiperteksto žymėjimo kalba) daugelis jau seniai nustojo tai laikyti tik programavimo kalba. Kadangi pati HTML sąvoka apima įvairių metodų hiperteksto dokumentų kūrimas, dizainas, hiperteksto redaktoriai, naršyklės ir daug daugiau. Vartotojas, įvaldęs šią kalbą, įgyja galimybę daryti rimtus dalykus paprasti metodai ir, svarbiausia, greitai, kad į modernus pasaulis laikoma labai gerai!

    HTML kalba galite sukurti savo daugialypės terpės produktus ir platinti juos kompaktiniuose diskuose, o visiems šiems produktams, pagamintiems HTML puslapių rinkinių pavidalu, nereikia kurti specializuotos programinės įrangos, nes viskas, ko reikia darbui su duomenimis ( Interneto naršyklės) tapo daugelio asmeninių kompiuterių standartinės programinės įrangos dalimi.

    • Elementas ( elementas) yra HTML kalbos konstrukcija. Tai objektas, kuriame yra duomenų ir leidžiantis juos suformatuoti tam tikru būdu. Bet kuris tinklalapis yra elementų rinkinys. Viena pagrindinių hiperteksto idėjų yra elementų įdėjimo galimybė.
    • Žyma ( žyma) yra elemento pradžios arba pabaigos žymekliai. Žymos apibrėžia elementų veikimo ribas ir atskiria elementus vienas nuo kito. Tinklalapio tekste žymos pateikiamos kampiniuose skliaustuose, o po pabaigos žymos visada rašomas pasvirasis brūkšnys.
    • Atributas – elemento parametras arba savybė. Kitaip tariant, tai yra kintamasis, turintis standartinį pavadinimą ir jam gali būti priskirtas konkretus reikšmių rinkinys: standartinis arba savavališkas. Tikimasi, kad simbolių atributų reikšmės bus įtrauktos į tiesias kabutes, tačiau kai kurios naršyklės leidžia kabutes praleisti. Taip yra todėl, kad atributo tipas visada žinomas iš anksto. Atributai yra pradžios žymos viduje ir yra atskirti vienas nuo kito tarpais.
    • Hipersaitas yra teksto dalis, rodanti kitą failą ar objektą. Hipersaitai būtini norint naršyti iš vieno dokumento į kitą.
    • Rėmas ( rėmelis) – šis terminas turi dvi reikšmes. Pirmasis yra dokumento sritis su savo slinkties juostomis. Antroji reikšmė yra vienas vaizdas komplekse ( animacinis) grafinis failas (panašus į kadrą iš filmo). Taip pat galima vietoje termino „rėmas“ specializuotoje literatūroje ir lokalizuota programinės įrangos produktai Galite susidurti su terminu „rėmas“ arba „rėmas“.
    • HTML failas arba HTML puslapis yra dokumentas, sukurtas hiperteksto forma remiantis HTML kalba. Tokių failų plėtiniai yra htm arba html.
    • Programėlė ( programėlė) yra programa, perkeliama į kliento kompiuterį kaip atskirą failą ir paleidžiama peržiūrint tinklalapį.
    • Scenarijus arba scenarijus ( scenarijus) yra į tinklalapį įtraukta programa, skirta išplėsti jo galimybes.
    • pratęsimas ( pratęsimas) yra elementas, kuris nėra įtrauktas į kalbos specifikaciją, tačiau naudojamas siekiant sukurti naują ir įdomų formatavimo efektą.
    • CGI ( Bendroji šliuzo sąsaja) yra bendras programų, veikiančių serveryje, pavadinimas, leidžiantis išplėsti tinklalapių galimybes. Pavyzdžiui, be tokių programų neįmanoma sukurti interaktyvių puslapių.
    • HTML kodas yra pradinės formos hipertekstinis dokumentas, kuriame matomi visi elementai ir atributai.
    • Tinklalapis yra dokumentas (failas), parengtas hiperteksto formatu ir įdėtas Visame pasaulyjeŽiniatinklis.
    • Interneto svetainė ( svetainę) – vienoje vietoje esančių ir tarpusavyje sujungtų tinklalapių rinkinys.
    • Naršyklė ( naršyklė) yra interneto puslapių peržiūros programa.
      • () - failų kopijavimas iš serverio į kliento kompiuterį.
    • URL ( Uniform Resource Locator) arba vienodas resurso lokatorius, kokio nors objekto internete adresas, t.y. Įprastas WWW URL atrodo taip: http://www.name.domain/filename.

    Visus kalbos elementus galima suskirstyti į tris grupes. Pirmasis apima elementus, kurie sukuria hiperteksto dokumento struktūrą. Tokių elementų naudojimas yra būtinas formalumas, kurio negalima nepaisyti. Antroji grupė apima elementus, kurie sukuria formatavimo efektus. Jų naudojimą diktuoja specifiniai dokumentui keliami reikalavimai, kūrėjo vaizduotė ir kompetencija Trečioji grupė apima elementus, leidžiančius valdyti programinė įrangaįdiegta ir veikia kliento kompiuteryje. Dažnai tokie elementai sukuriami automatiškai, kai kūrėjas naudoja hiperteksto rengyklę ar panašią programą objektui įterpti į dokumentą.

    Nors HTML specifikacija yra standartinė, į kalbą pridedama naujų elementų ( plėtiniai). Todėl kai kuriuos tinklalapius patogiau peržiūrėti naudojant tam tikras naršykles. Plėtinius kuria tik gerai žinomos įmonės, kurios kuria programinė įranga WWW, o paprasti vartotojai gali patobulinti savo tinklalapius naudodami programavimą. Programėlės leidžia pašalinti HTML apribojimus ir suteikti erdvės kūrėjo vaizduotei.

    HTML versijos

    Pirmąją HTML versiją 90-ųjų pradžioje sukūrė Timas BenersLee vienai iš praeityje populiarių „Mosaic“ naršyklių. Tačiau tuo metu nei naršyklė, nei pats HTML dar nerado tinkamo naudojimo. HTML+ pasirodė 1993 m., o ši versija taip pat liko beveik nepastebėta. Tačiau HTML kalba tapo plačiai paplitusi dėl 2.0 versijos, kuri pasirodė 1994 m. birželio mėn. Ir nuo to momento WWW populiarumas augo visame pasaulyje. Į 2 versiją įtraukti standartai tapo tokie nusistovėję, kad naudojami ir šiandien.

    Maždaug po metų pasirodžiusi HTML versija 3.0 pristatė galimybę piešti matematinius simbolius ( integraliniai ženklai, begalybė, trupmenos, skliaustai ir kt.) naudojant kalbos elementus. Tačiau šio projekto plėtra sulėtėjo ir toliau nepasiskirstė.

    1996 m. pasirodė HTML 3.2 versija. Tai buvo puikus sprendimas, užtenka paminėti, kad į kalbos specifikaciją buvo įtraukti rėmeliai, kurie dabar labai išpopuliarėjo tarp svetainių kūrėjų. Iki šiol visos naršyklės palaiko šią HTML versiją.

    Oficiali HTML 4 specifikacija ( Dinaminis HTML) buvo sukurtas 1997 m. Tuo metu jau buvo akivaizdu, kad tolesnė hiperteksto plėtra bus vykdoma naudojant interneto programavimą. Tai pasirodė daug veiksmingiau nei naujų elementų įvedimas į kalbą.

    Tinklalapio struktūra

    Žemiau pateikiamas tinklalapio kodas, sukurtas HTML kalba, o naudodami šį puslapį kaip pavyzdį išanalizuosime jo struktūrą, bet pirmiausia nukopijuokite visą kodą į įprastą teksto bloknotą ir spustelėkite „Išsaugoti kaip“ ir išsaugokite failą su html plėtiniu, t.y. . po pavadinimo rašyti.html

    Interneto dokumento struktūra Eiti į dokumento pabaigą 1 antraštė 2 antraštė 3 antraštė 4 antraštė 5 antraštė 6 antraštė Pirmoji nuoroda yra čia Turėtų būti čia
    pagrindinis tinklalapio tekstas.
    Ir aš, pavyzdžiui, čia įterpsiu
    keli pervedimai,
    kad galėtum
    aiškiai stebėti
    kaip tai veikia jums
    nuorodos dokumente,
    kitu atveju, jei turite didelę skiriamąją gebą,
    Tiesiog nepastebėsite sekamų nuorodų

    HTML dokumento žymėjimas. Vienas iš kalbos principų yra daugiapakopis elementų sudėjimas. Šis elementas yra atokiausias, nes visas tinklalapis turi būti tarp jo pradžios ir pabaigos žymų. Teoriškai šis elementas gali būti laikomas formalumu. Jis turi versijos, lang ir dir atributus, kurie šiuo atveju naudojami retai, ir leidžia įdėti HEAD, BODY FRAMESET ir kitus elementus, lemiančius bendrą tinklalapio struktūrą. Natūralu, kad visi tokie dokumentai baigiasi pabaigos žyma.

    < head >

    Tinklalapio pavadinimo sritis. Kitaip tariant, pirmoji jo dalis. Kaip ir ankstesnis elementas, HEAD naudojamas tik formavimui bendra struktūra dokumentas. Šis elementas gali turėti lang ir dir atributus.

    < title >

    Elementas, skirtas tinklalapio pavadinimui įdėti. Šio elemento viduje esanti teksto eilutė rodoma ne dokumente, o naršyklės lango pavadinimo juostoje. Šis elementas daro didelę įtaką reklamai paieškos sistemoje, nes paieškos sistemos ypatingą dėmesį skiria TITLE žymai. Mano patarimas: niekada nedarykite labai ilgo teksto šioje žymoje ( Pakanka 65 simbolių).

    Šiame elemente yra oficialią informaciją, kuris neatsispindi peržiūrint tinklalapį. Jo viduje nėra teksto įprasta prasme, todėl nėra pabaigos žymos. Kiekviename META elemente yra du pagrindiniai atributai, iš kurių pirmasis apibrėžia duomenų tipą, o antrasis – turinį.

    < body >

    Šis elementas sujungia hipertekstą, kuris apibrėžia patį tinklalapį. Tai matoma dokumento dalis, kurią sukuria automatinis puslapis ir kurią rodo naršyklė. Atitinkamai, šio elemento pabaigos žyma turėtų būti tinklalapio pabaigoje. Elemento BODY viduje galite naudoti visus elementus, skirtus tinklalapio dizainui. Elemento BODY pradžios žymoje galite įdėti daug atributų, kurie padeda nustatyti visą puslapį. Pažvelkime į juos eilės tvarka.

    Vienas iš naudingiausių šios žymos atributų, turinčių įtakos puslapio dizainui, yra

    background="kelias į fono failą"

    Paprastesnis fono dizainas susijęs su jo spalvos nustatymu

    bgcolor = "#FFFFFF"

    Fono spalva nurodoma trimis dviženkliais šešioliktainiais skaičiais, kurie nustato raudonos, žalios ir mėlynos spalvų intensyvumą (rbg).

    Kadangi galite pakeisti puslapio foną, galite pakeisti ir teksto spalvą. Šiuo tikslu yra toks atributas

    tekstas="#RRGGBB"

    Norėdami nustatyti hipersaitų teksto spalvą, naudokite šį atributą

    nuoroda = "#RRGBBB"

    Taip pat galite nurodyti vartotojo paskutinio pasirinkto hipersaito spalvos pasikeitimą

    Antraštės elementas. Yra šešių lygių antraštės, kurios žymimos taip.
    Antraštė
    Antraštė
    Antraštė
    Antraštė
    Antraštė
    Antraštė

    1 lygio antraštė yra didžiausia, o 6 lygio – mažiausia. Antraštėms galite naudoti atributą, nurodantį lygiavimą kairėje, centre arba dešinėje:

    align=”left” align=”center” align=”right”

    Norėdami sukurti naują pastraipą, naudokite žymą

    O pereiti į naują eilutę nekuriant pastraipos – žyma
    y., įvyksta perkėlimas. Šių žymų uždaryti nebūtina. Žinoma, jei nenaudosite žymoje

    Elementas ALIGN, kuris gali nustatyti pastraipų lygiavimą:

    Kairė

    Centruota

    Teisingai

    Tekstas tarp šių elementų sulygiuotas pagal plotį

    Horizontali linija ( horizontali taisyklė) yra labai dažnas elementas. Pirma, todėl, kad taip labai lengva ir patogu padalyti puslapį į dalis. Antra, todėl, kad puslapio autorius turi labai mažą tokių dizaino elementų pasirinkimą. Elementas neturi pabaigos žymos, bet turi keletą atributų, skirtų kairėje, centre, dešinėje, lygiavimo:

    • lygiuoti = "kairėje"
    • lygiuoti = "centras"
    • lygiuoti = "dešinė"
    • lygiuoti = "pateisinti"

    HTML dokumentas gali būti labai sudėtingas ir nelabai patogus vartotojui, kuriam reikia greitai pereiti į norimą dokumento skyrių. Norėdami tai padaryti, galite naudoti hipersaito mechanizmą. Norėdami tai padaryti, įdėkite atitinkamus ženklus tinkamose teksto vietose.

    Laisvas tekstas

    Šiuo atveju nurodytai dokumento eilutei suteikiamas pavadinimas, todėl gali būti sukurtas hipersaitas į kitą dokumento dalį ar net kitame dokumente, vedantis į tą etiketę.

    Norėdami įterpti vaizdus ( Paveikslėliai) HTML dokumente naudojama ši žyma ( pateikia išsamų šios žymos atributų aprašymą):

    Sąrašai

    (sąrašas) buvo sukurti HTML, be jokios abejonės, įtakos turėjo teksto redaktorių sėkmė. Sąrašas nuo įprasto teksto skiriasi visų pirma tuo, kad vartotojui nereikia galvoti apie jo elementų numeravimą: HTML imasi šios užduoties. Jei sąrašas papildomas naujais elementais arba sutrumpinamas, numeravimas tęsiamas automatiškai. Nenumeruotų sąrašų atveju HTML yra prieš kiekvieną elementą su ženklais: apskritimais, stačiakampiais, deimantais ir kitais vaizdais. Galiausiai sąrašas įgauna tinkamą formą. Yra dvi tokių žymų grupės: kai kurios apibrėžia bendrą sąrašo išvaizdą ( ir leidžia nurodyti atributus), o kiti nurodo jo vidinę struktūrą. Sąrašuose galite naudoti standartinius atributus. Yra keletas sąrašų tipų.

    Labiausiai paplitęs yra nenumeruotas sąrašas ( netvarkingas sąrašas). Jis pateikiamas žemiau:

    • 1 sąrašo elementas
    • 2 sąrašo elementas
    • 3 sąrašo punktas

    Elementas ul yra tam tikras sąrašo paryškinimas. Tai leidžia atskirti vieną sąrašą nuo kito. Li elementas reiškia kiekvieną elementą.

    Lentelės

    Jie yra viena iš būtiniausių būdų formatuoti duomenis tinklalapyje. Pagrindinis patogumas yra tai, kad naršyklė pasirūpina visos lentelės nupiešimu. Rėmelio dydis gali būti automatiškai koreguojamas pagal naršyklės peržiūros lango dydį ir, žinoma, prie lentelės langelių teksto ir paveikslėlių eilučių dydžio. Be kita ko, lentelės leidžia išspręsti daugelį projektavimo užduotys: sulygiuokite puslapio dalis viena su kita, dėkite paveikslėlius ir tekstą šalia, valdykite spalvų schemą ir pan. Kuriant lenteles taikomas įdėjimo principas: pagrindinio lentelės elemento (LENTELĖ) viduje sukuriama nemažai elementų, kurie apibrėžia eilutes (TR), o šių elementų viduje yra elementai, apibūdinantys kiekvieną eilutės langelį (TD, TH).

    Norint suprasti esamos lentelės struktūrą arba sukurti naują lentelę, galioja viena taisyklė, kad elementų seka aprašo lentelę iš viršaus į apačią ir iš dešinės į kairę. Pavyzdžiui, jei po TABLE elemento yra TR elementas, tai reiškia, kad apibrėžiama nauja lentelės eilutė. Viskas, kas yra už šio elemento, bus išdėstyta vienoje eilutėje (iš dešinės į kairę). Tai gali būti TD elementų seka ( ląstelės), kitą lentelę ir pan. Kai pasirodys naujas TR elementas, prasidės aprašymas kitą eilutę ir tt iki lentelės pabaigos (žym).
    Lentelę galima lygiuoti horizontaliai, naudojant lygiavimo atributą:

    • align="left" - kairėn;
    • align="center" - centre;
    • align="right" – į dešinę.

    Lentelės plotį galima nustatyti tiksliai pikseliais arba procentais nuo puslapio pločio naršyklės lange. Pavyzdžiui: plotis = 400 arba plotis = 50 %

    Rėmelio išvaizdai valdyti naudojami du atributai. Faktas yra tas, kad naršyklė sukuria rėmelio vaizdą, imituodama jo trimatį ( išgaubtas) naudojant veidų apšvietimo skirtumus

    Scenarijai

    Beveik visi interneto meistrai nori, kad jų puslapiai atrodytų šiuolaikiškai, būtų daugiafunkciniai, gražūs ir dinamiški. Tai neįmanoma naudojant standartinius HTML įrankius, todėl naudojami įvairūs įrankiai: programėlės, objektai, pakopiniai stiliaus lapai ir pan. Tačiau populiariausias ir plačiausiai paplitęs tipas ( priėmimas) yra scenarijų naudojimas.

    Scenarijus yra programos kodas, kuris įtraukiamas kaip šaltinio tekstas puslapyje ir kurį naršyklė vykdo peržiūrint puslapį. Scenarijus gali būti parašytas JavaScript, sukurta Netscape arba Visual Basic Script ( VBScript), sukurta Microsoft.

    Ši žyma leidžia atskirti scenarijaus programos tekstą nuo kitos puslapio informacijos. SCRIPT žymoje turi būti kalbos atributas, kuris nurodo kalbą ir gali turėti šias reikšmes:

    • javascript - kodas JavaScript;
    • vbscript – kodas VBScript kalba.

    Tipo atributas taip pat gali nurodyti kalbos tipą, nors jo naudoti nereikia. Kad nepažeistumėte visų taisyklių, elemento viduje galite įdėti šį apibrėžimą:

    type="text/javascript"

    Viena šauniausių scenarijų savybių yra galimybė keisti puslapio turinį dėl programos vykdymo. Bet tai tik savybė, o ne taisyklė. Naudodami atributą defer (kuris nepriima jokių reikšmių) galite „pasakyti“ naršyklei, kad tokie pakeitimai nebus atlikti. Kai kuriais atvejais tai leidžia greičiau įkelti puslapį.

    Iš standartinių atributų galite naudoti charset atributą.

    SCRIPT žyma ( arba daug tokių elementų) gali būti elemento HEAD arba BODY elemento viduje. Jei scenarijus yra elemento BODY viduje, taip pat gali būti, kad kuri nors naršyklė, kuri nepalaiko SCRIPT elemento, programos kodą suvoks kaip paprastą tekstą ir parodys jį ekrane. Kad taip nenutiktų, scenarijaus kodas įvedamas kaip komentaras:

    —
    —
    —

    Visos šiuolaikinės naršyklės atpažįsta šią techniką ir nepaiso komentarų simbolių. Jei scenarijaus tekste reikia įvesti komentarą, tam naudojamas kitoks žymėjimas: eilutės pradžioje įvedami du pasvirieji brūkšniai //.
    Scenarijaus kodas vykdomas įkėlus puslapį, t.y. kai jo turinys vis dar matomas ekrane. Žemiau pateikiamas paprasčiausio scenarijaus pavyzdys ( rodyti pranešimą lange).

    —
    —
    —
    - Tiesiog scenarijus
    —
    - įspėjimas ("Jūs parašėte savo pirmąjį scenarijų!")
    —
    —
    —
    —

    Tai paprastas puslapis, tačiau jame yra vienos eilutės scenarijus. Naudojant įspėjimo metodą, prieš įkeliant rodomas pranešimas. Ir jis kabės, kol vartotojas nepaspaus mygtuką Gerai, atsisiuntimas nebus tęsiamas.
    Gali būti, kad puslapis bus peržiūrimas naršyklėje, kuri nepalaiko scenarijų. Šiuolaikinės peržiūros programos nepaiso jo turinio. Šis elementas gali būti naudojamas keliais būdais. Pirmiausia galite jame rodyti skelbimą, pavyzdžiui: „ Jūsų naršyklė negali vykdyti scenarijaus, reikalingo šiam tinklalapiui peržiūrėti!„Antra, elemento viduje galite sukurti supaprastintą puslapio versiją be scenarijų. Trečia, galite sukurti nuorodą į kitą HTML dokumentą. NOSCRIPT elementas turi turėti pabaigos žymą.

    Taigi pažvelgėme į tokios WEB programavimo kalbos kaip HTML pagrindus. Net ir perskaitę šį trumpą straipsnį jau turite idėją ir netgi gebate programuoti šia kalba. Sėkmės!

    HTML (Hypert ext M arkup L kalba) yra kodas, naudojamas tinklalapiui ir jo turiniui struktūrizuoti. Pavyzdžiui, turinys gali būti struktūrizuotas pastraipų rinkinyje, punktų sąraše arba naudojant vaizdus ir duomenų lenteles. Kaip rodo pavadinimas, šis straipsnis suteiks pagrindinį supratimą apie HTML ir jo funkcijas.

    Taigi, kas yra HTML?

    HTML nėra programavimo kalba; tai yra žymėjimo kalba kuri apibrėžia jūsų turinio struktūrą. HTML susideda iš daugybės elementų, kuriuos naudojate skirtingoms turinio dalims įterpti arba apvynioti, kad jis atrodytų tam tikru būdu arba veiktų tam tikru būdu. Pridedama ", o tuščiuose elementuose pabaigos žyma nėra nei privaloma, nei leidžiama. Jei atributai neminimi, kiekvienu atveju naudojamos numatytosios reikšmės.">žymos gali sukurti žodžio ar vaizdo hipersaitą į kažkur kitur, gali būti kursyvu. žodžius, gali padidinti arba sumažinti šriftą ir pan. Pavyzdžiui, paimkite šią turinio eilutę:

    Mano katė labai niūri

    Jei norime, kad eilutė išliktų pati, galėtume nurodyti, kad tai yra pastraipa, įtraukdami ją į pastraipos žymas:

    Mano katė labai niūri

    HTML elemento anatomija

    Panagrinėkime šį pastraipos elementą šiek tiek toliau.

    Pagrindinės mūsų elemento dalys yra šios:

  • Pradinė žyma: ją sudaro elemento pavadinimas (šiuo atveju p), įvyniotas į atidarymo ir uždarymo kampinius skliaustus . Tai nurodo, kur elementas prasideda arba pradeda veikti – šiuo atveju prasideda pastraipa.
  • Baigiamoji žyma: tai tokia pati kaip ir pradžios žyma, išskyrus tai, kad joje yra a į priekį pasviruoju brūkšniu prieš elemento pavadinimą. Tai nurodo, kur baigiasi elementas – šiuo atveju pastraipa baigiasi. Nesugebėjimas pridėti uždarymo žymos yra viena iš standartinių pradedančiųjų klaidų ir gali sukelti keistų rezultatų.
  • Turinys: tai elemento turinys, kuris šiuo atveju yra tik tekstas.
  • Elementas: pradžios žyma, baigiamoji žyma ir turinys kartu sudaro elementą.

    • Elementai taip pat gali turėti atributų, kurie atrodo taip:

    Atributuose yra papildomos informacijos apie elementą, kurio nenorite matyti tikrame turinyje. Čia klasė yra atributas vardas ir redaktoriaus pastaba yra atributas vertė. Klasės atributas leidžia elementui suteikti identifikatorių, kurį vėliau bus galima panaudoti elementui nukreipti su stiliaus informacija ir kitais dalykais.

    Atributas visada turi turėti:

  • Tarpas tarp jo ir elemento pavadinimo (arba ankstesnio atributo, jei elementas jau turi vieną ar daugiau atributų).
  • Atributo pavadinimas, po kurio yra lygybės ženklas.
  • Atributo reikšmė, apvyniota pradžios ir uždarymo kabutėmis.

    • Pastaba: paprastos atributo reikšmės, kuriose nėra ASCII tarpo (arba bet kurio iš simbolių " " ` =< >) gali likti be kabučių, tačiau rekomenduojama cituoti visas atributų reikšmes, nes taip kodas tampa nuoseklesnis ir suprantamesnis.

    Įdėjimo elementai

    Elementus galite įdėti ir į kitus elementus – tai vadinama lizdu. Jei norėtume teigti, kad mūsų katė labai niūri, žodį „labai“ galėtume įvilkti į elementą, o tai reiškia, kad šis žodis turi būti labai akcentuojamas:

    Mano katė labai niūri.

    Tačiau turite įsitikinti, kad elementai yra tinkamai įdėti. Aukščiau pateiktame pavyzdyje atidarėme

    pirma elementas, tada elementas; todėl pirmiausia turime uždaryti elementą, tada -

    elementas. Tai neteisinga:

    Mano katė labai niūri.

    Elementai turi atsidaryti ir užsidaryti teisingai, kad būtų aiškiai vienas kito viduje arba išorėje. Jei jie sutampa, kaip parodyta aukščiau, jūsų žiniatinklio naršyklė bandys geriausiai atspėti, ką bandėte pasakyti, o tai gali sukelti netikėtų rezultatų. Taigi nedaryk to!

    Tušti elementai

    Kai kurie elementai neturi turinio ir yra vadinami tuščiais elementais. Paimkite elementas, kurį jau turime savo HTML puslapyje:

    Jame yra du atributai, bet nėra uždarymožyma ir nėra vidinio turinio. Taip yra todėl, kad vaizdo elementas neapvynioja turinio, kad jį paveiktų. Jo tikslas yra įterpti vaizdą į HTML puslapį toje vietoje, kurioje jis rodomas.

    HTML dokumento anatomija

    Tai apibendrina atskirų HTML elementų pagrindus, tačiau jie nėra patogūs. Dabar pažiūrėsime, kaip atskiri elementai sujungiami, kad sudarytų visą HTML puslapį. Peržiūrėkime kodą, kurį įdėjome į index.html pavyzdį (kurį pirmą kartą sutikome straipsnyje Darbas su failais):

    Mano bandomasis puslapis

    Čia mes turime šiuos dalykus:

    • - doktipas. Privaloma preambulė. Laiko migloje, kai HTML buvo jaunas (apie 1991–1992 m.), doctypes turėjo veikti kaip nuorodos į taisyklių rinkinį, kurio turėjo laikytis HTML puslapis, kad būtų laikomas geru HTML, o tai gali reikšti automatinį klaidų tikrinimą ir kt. naudingų dalykų. Tačiau šiais laikais jie neveikia daug, o iš esmės reikalingi tik norint užtikrinti, kad jūsų dokumentas tinkamai veiktų. Tai viskas, ką dabar reikia žinoti.
    • - elementas. Šis elementas apvynioja visą viso puslapio turinį ir kartais vadinamas pagrindiniu elementu.
    • - elementas. Šis elementas veikia kaip visų dalykų, kuriuos norite įtraukti į HTML puslapį, konteineris nėra turinys, kurį rodote savo puslapio žiūrintiesiems. Tai apima tokius dalykus kaip raktiniai žodžiai ir puslapio aprašas, kurį norite rodyti paieškos rezultatuose, CSS, kad būtų sukurtas mūsų turinio stilius, simbolių rinkinių deklaracijos ir kt.
    • – Šis elementas nustato simbolių rinkinį, kurį jūsų dokumentas turi naudoti, į UTF-8, kuris apima daugumą simbolių iš daugumos rašytinių kalbų. Iš esmės dabar jis gali apdoroti bet kokį tekstinį turinį, kurį galite įdėti. Nėra jokios priežasties to nenustatyti ir tai gali padėti išvengti kai kurių problemų vėliau.
    • - elementas. Tai nustato jūsų puslapio pavadinimą, kuris rodomas naršyklės skirtuke, į kurį įkeltas puslapis. Jis taip pat naudojamas puslapiui apibūdinti, kai jį pažymite / įtraukiate į adresyną.
    • - elementas. Jame yra visi turinys, kurį norite rodyti žiniatinklio naudotojams, kai jie lankosi jūsų puslapyje, nesvarbu, ar tai tekstas, vaizdai, vaizdo įrašai, žaidimai, leidžiami garso takeliai ar bet kas kita.
    Vaizdai

    Kaip minėjome anksčiau, jis įterpia vaizdą į mūsų puslapį tokioje padėtyje, kurioje jis atrodo. Tai atliekama per atributą src (source), kuriame yra kelias į mūsų vaizdo failą.

    Taip pat įtraukėme alt (alternatyvų) atributą. Šiame atribute nurodote aprašomąjį tekstą naudotojams, kurie nemato vaizdo, galbūt dėl ​​šių priežasčių:

  • Jie yra silpnaregiai. Naudotojai, turintys didelių regėjimo sutrikimų, dažnai naudoja įrankius, vadinamus ekrano skaitytuvais, norėdami jiems perskaityti alternatyvųjį tekstą.
  • Kažkas nutiko, todėl vaizdas nerodomas. Pavyzdžiui, pabandykite sąmoningai pakeisti kelią savo src atribute, kad jis būtų neteisingas. Jei išsaugosite ir iš naujo įkelsite puslapį, vaizdo vietoje turėtumėte pamatyti kažką panašaus:

    • Alternatyvaus teksto raktiniai žodžiai yra „aprašomasis tekstas“. Jūsų parašytas alternatyvus tekstas turėtų suteikti skaitytojui pakankamai informacijos, kad jis gerai suprastų, ką vaizdas perteikia. Šiame pavyzdyje mūsų dabartinis tekstas „Mano bandomasis vaizdas“ yra visiškai netinkamas. Daug geresnė „Firefox“ logotipo alternatyva būtų „Firefox logotipas: liepsnojanti lapė, supanti Žemę“.

    Pabandykite dabar sugalvoti geresnį paveikslėlio alternatyvųjį tekstą.

    Teksto žymėjimas

    Šioje skiltyje bus apžvelgti kai kurie esminiai HTML elementai, kuriuos naudosite žymėdami tekstą.

    Antraštės

    Antraštės elementai leidžia nurodyti, kad tam tikros jūsų turinio dalys yra antraštės arba paantraštės. Lygiai taip pat, kaip knyga turi pagrindinį pavadinimą, skyrių pavadinimus ir subtitrus, taip gali būti ir HTML dokumente. HTML yra 6 antraštės lygiai, – , nors dažniausiai naudojate tik nuo 3 iki 4:

    Mano pagrindinis pavadinimas Mano aukščiausio lygio antraštė Mano paantraštė Mano paantraštė

    Dabar pabandykite pridėti tinkamą pavadinimą į savo HTML puslapį tiesiai virš jūsų elementas.

    Pastaba: pamatysite, kad 1 antraštės lygis turi numanomą stilių. Nenaudokite antraštės elementų, kad padidintumėte ar paryškintumėte tekstą, nes jie naudojami dėl pasiekiamumo ir kitų priežasčių, pvz., SEO. Stenkitės savo puslapiuose sukurti prasmingą antraščių seką nepraleisdami lygių.

    Pastraipų sąrašai

    Daug žiniatinklio turinio yra sąrašai, o HTML turi specialių elementų, skirtų jiems. Žymėjimo sąrašus visada sudaro bent 2 elementai. Dažniausiai pasitaikantys sąrašų tipai yra sutvarkyti ir nerūšiuoti sąrašai:

  • Netvarkomi sąrašai skirti sąrašams, kuriuose prekių eiliškumas nesvarbi, pvz., pirkinių sąrašas
      elementas.
    • Sutvarkyti sąrašai skirti sąrašams, kuriuose elementų tvarka yra svarbi, pvz., receptas. Jie suvynioti į elementą.

      • Jei užstringate, visada galite palyginti savo darbą su mūsų baigtu pavyzdiniu kodu GitHub.

      Čia mes tik subraižėme HTML paviršių. Norėdami sužinoti daugiau, eikite į mūsų temą.

      HTML yra hiperteksto žymėjimo kalba, kuri padarė internetą tuo, ką mes žinome ir mėgstame. Būtent dėl ​​šio nuostabaus įrankio svetainės atrodo gražiai ir moderniai, taip pat užtikrina patogumą naudoti. HTML tiesiog sutvarko tinklalapio elementus patogiu formatu. Jo darbas yra panašus į tai, ką daro tokie žmonės kaip MS Word ar OpenOffice. Jie paverčia nežymią raidžių masę į dokumentą, kuriame yra pastraipos, paryškintas tekstas, kursyvas, lentelės ir net vaizdai. HTML kalba atlieka maždaug tą patį, vienintelis skirtumas yra tas, kad jos dokumentai rodomi naršyklėje, o šio įrankio galimybės yra daug platesnės nei teksto redaktorius. Žymėms naudojamos žymės – specialios komandos, apibūdinančios tinklalapio struktūrą. Jie pateikiami kampiniuose skliaustuose, kad naršyklė galėtų juos atskirti nuo didžiosios teksto dalies. Toliau apžvelgsime HTML pagrindus pradedantiesiems.

      Vizualiniai redaktoriai

      Pradedantieji, ką tik išėję į HTML mokymosi kelią, dažnai pradeda savo darbą nuo programų, kurios leidžia kurti svetaines be jokių žinių. Juose galite tiesiog išdėstyti elementus ekrane taip, kaip jie bus rodomi naršyklėje. Atrodytų, kad tai yra amžinos malonės šaltinis, leidžiantis atsikratyti daugumos žiniatinklio kūrėjų. Tačiau ne viskas taip paprasta, nes vaizdiniai redaktoriai turi daug trūkumų, dėl kurių jų neįmanoma naudoti rimtuose projektuose.

      Visos šios programos sukuria daug nereikalingų žymų, dėl kurių galutinis puslapis tampa sudėtingas ir neoptimalus. Žinoma, mūsų sparčiojo interneto amžiuje tai mažiau svarbu nei anksčiau, tačiau yra keletas priežasčių, kodėl glausta ir gerai parašyta svetainė yra praktiškesnė nei jos atitikmuo, sukurtas vaizdų rengyklėje. Tokia programa sukurtas tinklalapis bus prastai apdorojamas paieškos robotų, nes jiems svarbus kiekvienas kodo kilobaitas, o masinis ir nelogiškas kodas su krūva vargu ar atitiks jų skonį. Be to, redaktoriai dažnai atsilieka nuo laiko, tampa nereikšmingi, o leisti išteklius jų kūrimui yra nepraktiška, nes joks profesionalas šių produktų nenaudoja. Todėl kiekvienas, norintis dirbti svetainių kūrimo industrijoje, turi išmanyti HTML pagrindus.

      Žymos

      Kaip minėta pirmiau, žymos apibūdina tinklalapio struktūrą naršyklei. Daugelis jų turi atidarymo ir uždarymo žymas, bet ne visi. Pavyzdžiui, ..., kur vietoj taškų yra turinys. Pirmasis rodo, kur prasideda žyma, o antrasis ją uždaro. Viduje gali būti kitų puslapių žymėjimo elementų, jie gali būti įdėti vienas į kitą kaip lizdinė lėlė. Svarbu laiku uždaryti žymas, kad puslapis būtų rodomas teisingai.

      Taip pat yra atskirų žymų, kurių nereikia uždaryti. Juose turinys yra viduje, kaip ir galima parašyti daugeliui HTML žymų, ir nustato elemento savybes. Jis nurodomas pradinėje žymoje ir atrodo maždaug taip: atribumė="...", kur vietoj taškų yra atributo reikšmė. Žymos yra pirmas ir svarbiausias dalykas svarbus žingsnisįsisavinti HTML. Šio meno pagrindai taip pat apima žiniatinklio puslapio struktūros supratimą.

      Dokumento struktūra

      Kiekvienas HTML dokumentas turi atitinkamą plėtinį, pavyzdžiui, Index.html. Tokiu būdu naršyklė gali suprasti, su kuo ji susiduria, ir teisingai parodyti puslapį. Patartina visus failus, naudojamus kuriant svetainę, saugoti viename kataloge, o tai labai palengvins jūsų gyvenimą ateityje. Hiperteksto žymėjimo kalbos HTML pagrindai reikalauja aiškaus dokumento struktūros supratimo. Jis prasideda žyma, kuri naršyklei nurodo šiame dokumente naudojamą HTML versiją. Įjungta Šis momentas Penktoji kalbos versija yra dabartinė, todėl čia nereikia nieko sugalvoti, galite saugiai įterpti aukščiau pateiktą žymą bet kurio puslapio pradžioje.

      Tada yra pagrindinės suporuotos struktūros, kurios sudaro svetainės „skeletą“. Pirmoji žyma, kurioje yra įdėtos visos kitos, yra .... Nieko už jos ribų naršyklė neatpažįsta kaip tinklalapio, todėl atidaro dokumentą ir uždaro jį. Ši žyma reikalinga bet kokiam dokumentui. Jame taip pat yra dar keletas būtinų žymų, kurios bus aptartos toliau.

      Galva

      Žymos ... viduje yra techninė informacija, kuri nebus rodoma puslapyje, bet vis dėlto yra svarbi HTML dokumento dalis. Šioje vietoje klojami svetainės pamatai, čia pasirenkamas kodavimas ir įvedamas puslapio pavadinimas. Jis yra reikiamos žymos viduje.... Pavadinimas rodomas naršyklės viršuje, kur taip pat galite įdėti mažą piktogramą, apibūdinančią puslapio turinį. Patartina nedelsiant nurodyti dokumento kodavimą, kad jis būtų tinkamai rodomas. Tai galima padaryti naudojant žymą. Meta žymos pateikia informaciją apie puslapio struktūrą ir dažniausiai yra antraštės viduje.

      Nuoroda

      Žinant HTML pagrindus, taip pat reikia naudoti pakopinį stilių arba css. Jie nustato elementų, kurie bus rodomi puslapyje, savybes. Šiuolaikinis požiūris į šią užduotį apima tokių savybių kaip elemento spalva, aukštis ir vieta išorinis failas didesniam patogumui. Norėdami įtraukti css failą, naudokite žymą. Galutinėje formoje jis atrodo maždaug taip: kur href nurodo failo vietą, o tipas – tipą.

      kūnas

      Šioje HTML dokumento dalyje sukuriama matoma puslapio dalis. Viską, kas daroma „kūno“ viduje, parodys naršyklė. Naudota puiki suma HTML žymos. Pagrindiniai dalykai yra teksto formatavimas, darbas su nuorodomis ir pagrindiniai tinklalapio struktūrizavimo įrankiai. Norėdami pradėti dirbti su HTML, tereikia žinoti pagrindines žymas ir mokėti jas naudoti. Žemiau pateikiami populiariausi:

    • Antraštė: OS
    Dalintis