Iš autoriaus: Sveiki visi. Visi norime geriau suprasti svetainių kūrimą, kad galėtume dalyvauti įdomiuose projektuose ir įgyvendinti savo idėjas. Bet ką daryti, jei esate visiškai pradedantysis? Mūsų HTML vadovėlis manekenams su praktinėmis pamokomis padės jums pagaliau padaryti tokį svarbų proveržį kuriant svetaines nuo nulinio lygio iki bent jau pagrindinio supratimo.

Mokant kurti svetainę, kaip ir beveik bet kuriame kitame versle, praktika yra svarbi. Galite dar kartą perskaityti barščių receptą 1000 kartų, bet tai neprivers jų virti. Galima išmokti pagrindinių automobilio vairavimo principų, bet kol nesėdi prie vairo, visa tai priklauso nuo lemputės. Neabejotinai yra tam tikros naudos iš teorijos žinojimo, bet ne tiek, kiek iš tikrųjų įgūdžių.

Taigi, jei mes kalbame apie html mokymąsi, tada yra ir teorija, bet yra praktika. Teorija šiuo atveju yra tik kažkoks straipsnių ciklas, pamokos kalbos tema, pagrindinės žymos ir jų pritaikymas ir t.t.

Praktika jums prasideda tada, kai patys sukuriate html failą, ten įrašote pradžios kodą ir pradedate savo rankomis mokytis, kaip visa tai veikia. Parašė žymę, pažiūrėjo kaip veikia. Įdėta nuotrauka – patikrinta. Pridėta keletas atributų ir kt. Būtent praktika leidžia greitai suprasti ir įsiminti pagrindines žymas. Tada jūs tiesiog parašykite juos į mašiną ir jums nereikia pusvalandį prisiminti, kaip sudaryti sąrašą.

Na, o retoms žymoms visada turėtumėte naudoti žodyną. Niekas, nei vienas super maketuotojas ir interneto kūrėjas, manau, neatmintinai nežino visų žymų. Tai tiesiog nebūtina. Jei žymą naudojate kartą per 10 metų, kam laikyti ją galvoje? Manau, kad tai suprantama.

Tačiau tokią praktiką pavadinčiau tiesiog savotišku smėlio dėžės žaidimu. Jūs tiesiog rašote skirtingas žymas, stengiatės viską nagrinėti kuo detaliau, bet už ką? Turi būti kažkoks tikslas. Paprastai html ir css yra tiriami, kad vėliau būtų galima sukurti savo tinklalapius ir pilnavertes svetaines.

Taigi, geriausia praktika yra paimti paruoštą svetainės maketą ir jį išdėstyti. Išdėstymas yra tinklalapių kūrimo procesas iš daugiasluoksnio piešinio naudojant html ir css kalbas. Jie taip pat gali naudoti sistemas, javascript ir programų bibliotekas maketuodami, tačiau tai yra kito pokalbio tema. Visa tai yra papildymas. Html yra pagrindinė technologija, kurią reikia labai gerai suprasti.

Bet aš jus įtiksiu – tai elementaru, tai paprasčiausia. Labai lengva išmokti, kaip veikia tam tikros žymos ir kaip jas pritaikyti. HTML nėra sudėtingų algoritmų, funkcijų, metodų, klasių, kaip yra programavimo kalbose. Tai yra žymėjimo kalba, užtenka ją šiek tiek pastudijuoti, ir viskas bus labai aišku.

Kaip išmokti kalbą ir kur įgyti praktikos?

Vėlgi, aš kalbu apie lengvą mokymąsi tik tuo atveju, jei einate teisingu keliu. Tai yra, žiūrėkite protingus vaizdo įrašus, kuriuose žingsnis po žingsnio paaiškinami būtini dalykai, nuo paprastų iki sudėtingų. Jei žiūrite pamokas, kurios nėra sukurtos pagal šį formatą, greičiausiai jūs tiesiog nesuprasite daugumos medžiagos.

Laimei, mūsų svetainėje visos pamokos yra susistemintos ir išdėstytos nuo paprastų iki sudėtingų. Todėl, jei mokysitės html pagal mūsų pamokas, tada nebus jokių problemų įsisavinant medžiagą.

Galiu užtikrinti, kad css mokytis smagiau! Ir kai kuriais atžvilgiais dar lengviau. Pirma, css taip pat turi nemažai savybių ir taisyklių, kurias turite atsiminti. Antra, ši kalba turi labai paprastą sintaksę, todėl net pradedantysis neturės problemų joje rašydamas kodą. Trečia, kadangi css yra atsakingas už puslapio išvaizdą, iš pradžių džiaugsitės, kad puslapį paraudonavote ir padarėte to paveikslėlio rėmelį.

Apskritai css mokymasis yra paprastas ir įdomus, todėl rekomenduoju nedelsti ir pradėti iškart po to, kai baigiate html pagrindus.

Jūsų paskutinė praktika

Pagaliau turite egzaminą. Bet nesijaudinkite, tai bus lengva. Be to, jums nereikės to daryti patiems, o tik pagal pamokose esančias instrukcijas. Šis egzaminas yra kursas. Jame pagaliau pasieksite pagrindinį tarpinį tikslą - sukurkite savo pirmąją svetainę ir suprasite, kaip naudoti html ir css kuriant tikrą svetainę. Tebūnie tai paprasta svetainė, tačiau įgytų žinių pakaks, kad galėtumėte tobulėti ir kurti sudėtingesnius maketus.

HTML yra hiperteksto žymėjimo kalba, dėl kurios žiniatinklis tapo toks, kokį žinome ir mėgstame. Būtent šio nuostabaus įrankio dėka svetainės atrodo gražiai ir moderniai, taip pat užtikrinamas jų naudojimo patogumas. HTML paprasčiausiai sutvarko tinklalapio elementus patogiu būdu. Jo darbas yra panašus į tai, ką daro MS Word ar OpenOffice. Jie paverčia nežymią raidžių masę dokumentu, kuriame yra pastraipos, paryškintas tekstas, kursyvas, lentelės ir net vaizdai. Maždaug ta pačia kalba veikia ir HTML, tik tas skirtumas, kad jo dokumentai rodomi naršyklėje, o šio įrankio galimybės yra daug platesnės nei teksto rengyklės. Žymėjimui naudojamos žymės – specialios komandos, apibūdinančios tinklalapio struktūrą. Jie yra uždėti kampiniuose skliausteliuose -<тег>kad naršyklė galėtų juos atskirti nuo didžiosios teksto dalies. Toliau apžvelgsime HTML pagrindus pradedantiesiems.

Vizualiniai redaktoriai

Pradedantieji, kurie tik įžengė į HTML mokymosi kelią, dažnai pradeda savo darbą su programomis, 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ų, čia tai – amžinos malonės šaltinis, leidžiantis atsikratyti daugumos interneto kūrėjų. Tačiau ne viskas taip paprasta, nes vaizdiniai redaktoriai turi daug trūkumų, dėl kurių neįmanoma jų naudoti rimtuose projektuose.

Visos šios programos sukuria daug nereikalingų žymų, dėl kurių galutinė puslapio versija yra sudėtinga ir neoptimali. Žinoma, šiame spartaus 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 vaizdo redaktoriuje. Tokia programa sukurtas tinklalapis bus prastai apdorojamas paieškos robotų, nes jiems svarbus kiekvienas kodo kilobaitas, o sudėtingas ir nelogiškas kodas su krūva vargu ar patiks. Be to, redaktoriai dažnai atsilieka nuo laiko, tampa nereikšmingi, todėl neverta leisti išteklių jų kūrimui, nes ne vienas profesionalas naudoja šiuos produktus. Todėl kiekvienas, norintis dirbti svetainių kūrimo srityje, turėtų išmanyti HTML pagrindus.

žymės

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 turinys yra vietoj taškų. Pirmasis rodo, kur prasideda žyma, o antrasis ją uždaro. Viduje gali būti ir kitų puslapių žymėjimo elementų, jie gali būti vienas kito viduje 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: atributas = "...", kur vietoj taškų yra atributo reikšmė. Žymos yra pirmas ir svarbiausias žingsnis įvaldant HTML. Šio meno pagrindai taip pat apima žiniatinklio puslapio struktūros supratimą.

Dokumento struktūra

Kiekvienas HTML dokumentas turi atitinkamą plėtinį, pvz., Index.html. Taigi naršyklė gali suprasti, su kuo ji susiduria, ir teisingai parodyti puslapį. Patartina visus svetainės sukūrimui naudotus failus laikyti viename kataloge, o tai labai palengvins jūsų gyvenimą ateityje. HTML hiperteksto žymėjimo kalbos pagrindai reikalauja aiškiai suprasti dokumento struktūrą. Jis prasideda nuo žymos, kuri naršyklei nurodo šiame dokumente naudojamą HTML versiją. Šiuo metu aktuali penktoji kalbos versija, tad nieko sugalvoti nereikia, aukščiau pateiktą žymą drąsiai galite įterpti bet kurio puslapio pradžioje.

Tada ateina pagrindinės suporuotos struktūros, sudarančios svetainės „skeletą“. Pirmoji žyma, kurioje įdėtos visos kitos − .... Nieko už jo 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

Etiketės viduje ... yra techninės informacijos, kuri nebus rodoma puslapyje, tačiau vis dėlto yra svarbi HTML dokumento dalis. Šioje vietoje klojami svetainės pamatai, čia parenkamas kodavimas ir įvedamas puslapio pavadinimas. Jis įtrauktas į reikiamą žymą . 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ų rodomas teisingai. Tai galima padaryti su žyma . Meta žymos pateikia informaciją apie puslapio struktūrą ir dažniausiai yra antraštės viduje.

Nuoroda

Žinant HTML pagrindus, taip pat reikia naudoti pakopinius stilius arba css. Jie nustato elementų, kurie bus rodomi puslapyje, savybes. Šiuolaikinis požiūris į šią užduotį apima tokių savybių kaip elemento spalvos, aukščio ir vietos pašalinimas išoriniame faile, kad būtų patogiau. Žyma naudojama prijungti css failą . Kai baigsite, jis atrodo 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ė. IN naudojama daugybė HTML žymų. Pagrindai – teksto formatavimas, darbas su nuorodomis ir paprasčiausi tinklalapio struktūrizavimo įrankiai. Norint pradėti dirbti su HTML, pakanka žinoti pagrindines žymas ir mokėti jas naudoti. Žemiau pateikiami populiariausi:

• - naudojamas norint pasirinkti eilutę, kuriai bus taikomas specialus stilius, aprašytas css;
• - sukuria nuorodą tinklalapyje; šuolio adresas nustatomas atributu href;
• - viena populiariausių mūsų laikų žymų; kiekvienas, nusprendęs išmokti HTMLl kalbos pagrindus, turėtų į tai atkreipti ypatingą dėmesį, nes tai yra blokinis elementas, kurio pagrindu sukuriama liūto dalis šiuolaikinių svetainių (blokų parametrai

  yra nustatyti css, o kiti blokai gali būti dedami į šią žymą);

• Parenka pastraipą iš teksto; pastraipos turinys yra tarp pradžios ir pabaigos žymų;

• - sunumeruotas sąrašas, kurio elementai yra įtraukti į poros žymą
  1. - suženklintas sąrašas, kuriame, kaip ir sunumeruotame sąraše, elementai nurodomi žyma

     • -

       - dokumentų antraštės (skaičius rodo antraštės lygį, ty

       - pagrindinė antraštė ir vėlesnės parinktys yra jos paantraštės, beje, lygio antraštės

       ,

       beveik neįmanoma rasti internete), taip pat svarbu atsiminti, kad viename puslapyje gali būti tik viena antraštė

       ;

     • - miniatiūra;
     • - kursyvas;
     • - paveikslėlio įterpimas į tinklalapį (tai viena žyma, jai nereikia baigiamosios žymos, tačiau turi būti alt atributas, nurodantis paveikslėlio tekstą);

     Tai ne visos žymos, kurių reikia norint sukurti savo tinklalapį, tačiau jų pakanka, kad būtų galima sukurti HTML pagrindus pradedantiesiems.

     css

     HTML kalbos raida lėmė tai, kad kiekviena žyma įgijo daugybę atributų, o tinklalapių išvaizdos reikalavimai gerokai išaugo. Kodas tapo gremėzdiškas ir nepatogus, buvo sunku jį perskaityti, ką jau kalbėti apie pritaikymą ar keitimą. Be to, jei jūsų svetainėje yra dešimt puslapių, kuriuose yra daug antraščių, pažymėtų žaliai, ir staiga norite jas paversti raudona spalva, turite sunkiai dirbti, keisdami kiekvieną iš jų rankiniu būdu. Atsiradus Cascading Style Sheets, šis procesas tapo paprastas ir logiškas, o HTML kodas tapo daug lengviau skaitomas.

     

     Taikant CSS

     Norėdami kurti tinklalapius, turite žinoti HTML ir CSS pagrindus, nes šiandien šioje srityje nėra ką veikti be žinių apie pakopinius stilių lapus. Jie nustato bet kurio elemento atributus, taikomus visam dokumentui. Taigi galite nustatyti visų elementų spalvą vienu metu

     Arba rašyti tik vieną taisyklę. Atsižvelgiant į šiuolaikinius interneto puslapių išvaizdos reikalavimus, pakopinio stiliaus lapų naudojimas yra privalomas.

     Norint susieti css failą su dokumentu, yra nuorodos žyma. Jo naudojimo principas buvo aprašytas šiek tiek aukščiau, tačiau tai nėra vienintelė galimybė derinti visus stilius vienoje vietoje. Yra dar viena etiketė

     naudojant elementą . Elementui nereikia uždarymo žymos. Šis elementas apibrėžia ryšį tarp dabartinio puslapio ir kitų dokumentų. Tokių elementų puslapyje gali būti keli. Įrašas atrodys taip:

     4 lentelė. Žymės atributai

     Atributas	Aprašymas, priimta vertė
     kryžminė kilmė	Nurodoma, ar CORS (naršyklės technologija, leidžianti tinklalapiui pasiekti išteklius iš kito domeno) turi būti naudojama siunčiant vaizdą iš svetainės. anoniminis – kelių domenų užklausoje naršyklė automatiškai prideda „Origin“ antraštę, kurioje yra domeno, iš kurio buvo pateikta užklausa, pavadinimas. Jei serveris neatsako pateikdamas CORS antraštę Access-Control-Allow-Origin: * (arba domeno pavadinimą vietoj žvaigždutės), vaizdo įkėlimas bus užblokuotas. use-credentials – jei serveris nepateikia kredencialų su Access-Control-Allow-Credentials: true , tada vaizdo įkėlimas bus užblokuotas.
     href	Pagrindinis žymos atributas, reikšmė yra kelias į failą su stiliais.
     hreflang	Nurodoma teksto kalba susietame dokumente.
     žiniasklaida	Nurodo įrenginio, kuriam turi būti pritaikytas nuorodos išteklius, tipą.
     nė vienas	Serverio atsitiktinai sugeneruotas eilutės kintamasis, nustatantis eilutinių stilių naudojimo turiniui apsaugoti taisykles. Atributo reikšmė yra teksto eilutė.
     rel	Atributas apibrėžia ryšį tarp dabartinio ir nurodyto dokumento. alternatyvus – nuoroda į tą patį dokumentą, bet kitokiu formatu (pavyzdžiui, spausdinami puslapiai, vertimas, veidrodis, RSS arba Atom tiekimas), . archyvai rodo, kad susietas dokumentas yra istorinės reikšmės. Nuoroda gali nurodyti įrašų, dokumentų ir kitos medžiagos rinkinį. autoriaus nuoroda į puslapį apie dokumento autorių arba į puslapį su autoriaus kontaktiniais duomenimis. žymė Nuoroda į artimiausią straipsnio pirmtaką, kuris yra nuoroda, arba į straipsnio skyrių, kuris yra labiausiai susijęs su elementu, jei protėvio nėra. išorinis naudojamas norint nurodyti, kad puslapis su nuoroda nėra šios svetainės dalis. pirmiausia nurodo nuorodą į pirmąjį dokumentų sekos dokumentą. pagalbos nuoroda į pagalbos dokumentą. piktograma nurodo kelią iki piktogramos, kuri bus naudojama dabartiniam dokumentui. paskutinis nurodo nuorodą į paskutinį dokumentų sekos dokumentą. licencija Nuoroda į dokumento autorių teisių informaciją. Kitas rodo, kad šis dokumentas yra serijos dalis ir kad nuoroda nukreipia į kitą serijos dokumentą. nofollow nurodo, kad nuorodos nepatvirtino puslapio autorius arba nuoroda yra komercinė. noreferrer nurodo, kad kliento užklausos antraštė, kurioje yra užklausos šaltinio URL, neturėtų būti perduodama sekant nuorodą. pingback nurodo pingback serverio adresą, kuris leidžia tinklaraščiui automatiškai pranešti svetainėms, nukreipiančioms į jį. prefetch nurodo, kad nurodytas failas turi būti iš anksto išsaugotas talpykloje. ankstesnė nurodo, kad šis dokumentas yra serijos dalis ir kad nuoroda nurodo ankstesnį šios serijos dokumentą. paieška rodo, kad nurodytame dokumente yra paieškos sąsaja ir susiję ištekliai. šoninė juosta rodo, kad susietas dokumentas, jei įmanoma, bus rodomas papildomame naršyklės kontekste, o kai kurios naršyklės, paspaudus hipersaitą, atidarys langą, kuriame nuoroda bus įtraukta į žymių juostą. stiliaus lapas yra nuoroda į išorinį failą, kuris bus naudojamas kaip šio dokumento stiliaus lapas. žyma rodo, kad žyma, į kurią nukreipia hipersaitas, priklauso šiam dokumentui. aukštyn rodo, kad puslapis yra hierarchinės struktūros dalis ir kad hipersaitas nukreipia į aukštesnio lygio struktūros išteklius.
     dydžiai	Nurodomas vaizdinio vaizdo piktogramų dydis. Dydžių atributas naudojamas tik kartu su rel="icon" ir gali turėti šias reikšmes: plotis aukštis – apibrėžiamas tarpais atskirtų dydžių sąrašas, kiekvienas dydis turi būti formatu – plotis aukštis (piktogramų dydžiai nurodomi pikseliais), pvz.: ; bet koks - piktogramą galima padidinti iki bet kokio dydžio.
     titulą	Nurodo nuorodos pavadinimą arba alternatyvaus stiliaus lapų rinkinio pavadinimą. Atributo reikšmė yra tekstas.
     tipo	Nurodo dokumento, su kuriuo susieta, MIME tipą. Šiuo atveju ji užima reikšmę "text/css" .

     1.2.5. Elementas

     Nurodo naršyklei, kad viskas tarp šių žymų turi 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į. Pageidautina atidaryti šią žymą ir nepamiršti jos uždaryti dokumento pabaigoje.

     Puslapių pavadinimai h1 h2 h3

     Judame toliau, matome žymą

     kuri taip pat atsidaro ir užsidaro. Ši žyma žymi pagrindinę teksto antraštę, dažniausiai 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į ir pateiksiu išsamų jų aprašymą, užsiprenumeruosiu tinklaraščio atnaujinimus, kad nieko nepraleisčiau.

     Tokio pavadinimo buvimas straipsnyje vaidins svarbų vaidmenį reklamuojant puslapį. Be to, naudojant juos gaunama aiški puslapio struktūra, jo antraštė, paantraštės, paryškinimai, pastraipos ir pan. Visada naudokite juos ir pritaikykite juos praktiškai. Daugelyje TVS, tokių kaip „WordPress“, rašydami tekstą pastebėsite „Antraštė 1“, „Antraštė 2“, „Antraštė 3“ ir pan. Jie 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 pateikta html dokumente. Pažiūrėkime į kitą pavyzdį, aprašymas bus šiek tiek vėliau.

     Šis tekstas bus paryškintas, o šis 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 galvos ir pavadinimo elementai

     

     Kiekvienas dokumentas turi galvos ir pavadinimo elementą. Pirmasis , kuris pasirodo iškart po pirmosios žymos . Šioje žymoje yra visa informacija apie puslapį, joje taip pat yra elementas \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. Tai visada reikia žinoti ir atsiminti. Tada pradedate įterpti tekstą, paveikslėlius, vaizdo įrašus ir pan. Bet tai bus kituose straipsniuose.

     Notepad++ redaktorius

     

     Norėdami dirbti su kodu, naudokite „Notepad++“. Tai nemokama ir lengvai randama internete. Labai patogu bet kokio kodo suvokimui, taip pat patogu rodyti 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ą. Siekiant maksimalaus patogumo, paprastumo ir studijų, šis redaktorius pirmiausia turi būti įdiegtas kompiuteryje. Pagrindinis pranašumas ir patogumas – „Notepad++“ redaktorius rodo užuominas rašant kodą, todėl darbas kartais tampa greitesnis ir geresnis.

     DOCTYPE elementas

     Kiekviename dokumente taip pat turi būti nurodytas šis doctype elementas. Kam to reikia ir kas jame turi būti. Dažniausiai žmonės nelabai mėgsta šias eilutes, jas kopijuoja į 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 jie visi 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 paprasta kalba apie html pagrindus: Ši eilutė nurodo naršyklei, kad šis dokumentas yra XHTML 1.0 versija, naudojama anglų kalba ir visa ši netvarka yra šiuo adresu. Tada metažymoje nurodykite naudojamą kodavimą. „Windows 1251“ yra dažniausiai naudojama.

     Aprašymas – paveikiama 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 turi įtakos ir SEO temai, ši žyma yra būtina. Jame yra raktinių žodžių, pagal kuriuos interneto vartotojai jus ras paieškos sistemos.

     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 atsiminti iš šios pamokos apie html pagrindus:

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

     Visi puslapių šablonai visada turi būti pavadinti žodžiu indeksas. Taip yra priimta ir visi pripratę, kad ir koks bus failo plėtinys, jis gali būti ir html, ir php. Visada taip vadinama.

     Žiūrėkite HTML pagrindų vaizdo įrašą iš Webformyself.

     hiperteksto žymėjimo kalba, pagrindiniai elementai ir struktūra. Visa tai ir dar daugiau pabandysiu aprašyti savo tinklaraštyje. Pirmiausia bus parašyta naudinga informacija pradedantiesiems, pateiktas pavyzdžio kodas ir galimybė kartu su baigtu puslapiu parsisiųsti patį pavyzdį.

     Visi naudojasi internetu ir visi naršo įvairias svetaines, ir tikriausiai kiekvienas norėtų savo svetainę įdėti į internetą, tačiau tai padaryti nėra lengva, tam yra daug priežasčių. Tačiau, kad galėtumėte priglobti kokybišką svetainę, tereikia žinoti pagrindinius „ WEB programavimas", kuris 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 įvairius hiperteksto dokumentų kūrimo metodus, dizainą, hiperteksto redaktorius, naršykles ir daug daugiau. Šią kalbą įvaldęs vartotojas įgyja gebėjimą atlikti rimtus dalykus paprastais metodais ir, svarbiausia, greitai, o tai šiuolaikiniame pasaulyje laikoma labai gerai!

     HTML galite kurti savo daugialypės terpės produktus ir platinti juos kompaktiniuose diskuose, o visiems šiems produktams, pagamintiems HTML puslapių rinkinių pavidalu, nereikia kurti specializuotų programinės įrangos įrankių, 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 iš pagrindinių hiperteksto idėjų yra galimybė sudėti elementus.
     • Žyma (žyma) yra elemento pradžios arba pabaigos žymekliai. Žymos apibrėžia elementų apimtį ir atskiria elementus vienas nuo kito. Tinklalapio tekste žymos pateikiamos kampiniuose skliaustuose, o po pabaigos žymos visada rašomas pasvirasis brūkšnys.
     • Atributas(atributas) – elemento parametras arba savybė. Kitaip tariant, tai yra kintamasis, turintis standartinį pavadinimą ir kuriam gali būti priskirtas tam tikras reikšmių rinkinys: standartinis arba savavališkas. Tikimasi, kad atributų simbolių reikšmės bus įtrauktos į tiesias kabutes, tačiau kai kurios naršyklės leidžia kabučių nenaudoti. 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- teksto dalis, kuri yra kito failo ar objekto žymeklis. Hipersaitai yra būtini, kad būtų galima naršyti iš vieno dokumento į kitą.
     • rėmelis (rėmelis) – šis terminas turi dvi reikšmes. Pirmasis yra dokumento sritis su savo slinkties juostomis. Antroji reikšmė yra vienas vaizdas komplekse ( animacija) vaizdo failą (panašų į kadrą iš filmo). Taip pat gali būti, kad vietoje termino „rėmas“ specializuotoje literatūroje ir lokalizuotuose programinės įrangos produktuose galite rasti terminą „rėmas“ arba „rėmas“.
     • HTML failą arba HTML puslapis – dokumentas, sukurtas hiperteksto forma remiantis HTML kalba. Tokių failų plėtiniai yra htm arba html.
     • Programėlė (programėlė) yra programa, kuri perkeliama į kliento kompiuterį kaip atskiras failas ir paleidžiamas peržiūrint tinklalapį.
     • Scenarijus arba scenarijus ( scenarijus) yra programa, įtraukta į tinklalapį, siekiant pagerinti jo galimybes.
     • Pratęsimas (pratęsimas) yra elementas, kuris nėra kalbos specifikacijos dalis, bet yra naudojamas, suteikiantis galimybę sukurti naują įdomų formatavimo efektą.
     • CGI (Bendroji šliuzo sąsaja) yra bendras programų, kurios, veikiant serveryje, leidžia išplėsti tinklalapių galimybes, pavadinimas. Pavyzdžiui, be tokių programų neįmanoma sukurti interaktyvių puslapių.
     • HTML kodas - hiper Tekstinis dokumentas pradine forma, kai matomi visi elementai ir atributai.
     • tinklo puslapis— dokumentas (failas), parengtas hiperteksto formatu ir paskelbtas pasauliniame tinkle.
     • Interneto svetainė (svetainę) yra vienoje vietoje esančių ir tarpusavyje sujungtų tinklalapių rinkinys.
     • Naršyklė (naršyklė) yra interneto naršyklė.
     () - failų kopijavimas iš serverio į kliento kompiuterį.
     • URL (Uniform Resource Locator) arba Uniform Resource Locator – kokio nors objekto internete adresas, t.y. įprastas WWW URL atrodo taip: http://www.vardas.domenas/failovardas.

     Visus kalbos elementus sąlygiškai 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 fantazija ir kompetencija Trečioji grupė apima elementus, leidžiančius valdyti kliento kompiuteryje įdiegtą ir veikiančią programinę įrangą. Dažnai tokie elementai sukuriami automatiškai, kai kūrėjas naudoja hiperteksto rengyklę ar panašią programą, kad į dokumentą įterptų kokį nors objektą.

     Nors HTML specifikacija yra standartinė, kalba papildyta naujais elementais ( plėtiniai). Todėl kai kuriuos tinklalapius lengviau 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 programuodami. Programėlės leidžia panaikinti HTML apribojimus ir duoti laisvę kūrėjo vaizduotei.

     HTML versijos

     Pirmąją HTML kalbos versiją 90-ųjų pradžioje sukūrė Timas BenersLee vienai iš praeityje populiarių „Mosaic“ naršyklių. Tačiau tada nei naršyklė, nei pats HTML dar nebuvo naudingi. 1993 m. pasirodė HTML+, o ši versija taip pat liko beveik nepastebėta. Tačiau HTML kalbos paplitimą lėmė 2.0 versija, kuri pasirodė 1994 m. birželio mėn. Ir nuo to laiko WWW populiarumas visame pasaulyje išaugo. Į 2 versiją įtraukti standartai taip gerai įsitvirtino, 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 nebuvo platinama.

     1996 m. pasirodė HTML 3.2 versija. Tai buvo puikus sprendimas, užtenka paminėti, kad rėmeliai buvo įtraukti į kalbos specifikaciją ir dabar yra labai populiarūs 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 per interneto programavimą. Tai pasirodė daug efektyviau 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 parašykite .html

     Interneto dokumento struktūra Pereikite į dokumento pabaigą<НR> <Н1>1 antraštė

     <Н2>2 antraštė <НЗ>3 antraštė <Н4>4 antraštė <Н5>5 antraštė <Н6>6 antraštė <НR>Čia yra įsikūrusi pirma nuoroda<а name ="list2"> <НR> <р>Turėtų būti čia
     pagrindinis tinklalapio tekstas.
     Ir aš, pavyzdžiui, čia įterpsiu
     keli pervedimai,
     kad galėtum
     vizualiai stebėti,
     kaip tai veikia jums
     nuorodos dokumente
     bet jei turite didelę skiriamąją gebą,
     Tiesiog nepastebėsite perėjimo nuorodose
     <НR> <а name="list1"

     Eiti į<а href ="#list">Dokumento pradžia

     Norint suprasti tinklalapio struktūrą, būtina atsižvelgti į visus jo elementus, įtrauktus į aukščiau pateiktą kodą.

     < html>

     Dokumento žymėjimas HTML. Vienas iš kalbos principų yra daugiapakopis elementų sudėjimas. Šis elementas yra atokiausias elementas, nes visas tinklalapis turi būti tarp pradžios ir pabaigos žymų. Pagal idėją š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, apibrėžiančius bendrą tinklalapio struktūrą. Natūralu, kad pabaigos žyma visi tokie dokumentai nutraukiami.

     < galva>

     Tinklalapio antraštės sritis. Kitaip tariant, pirmoji jo dalis. Kaip ir ankstesnis elementas, HEAD naudojamas tik bendrai dokumento struktūrai formuoti. Šis elementas gali turėti lang ir dir atributus.

     < titulą>

     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. paieškos sistemos ypatingą dėmesį skiria TITLE žymai. Mano patarimas: niekada nedarykite labai ilgo teksto šioje žymoje ( Pakanka 65 simbolių).

     <МЕТА>

     Šiame elemente yra paslaugos informacija, kuri nerodoma 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į.

     < kūnas>

     Šiame elemente yra hipertekstas, apibrėžiantis tikrąjį tinklalapį. Tai matoma dokumento dalis, kurią automatiškai sukuria puslapis ir kurią rodo naršyklė. Atitinkamai, šio elemento pabaigos žyma turėtų būti ieškoma tinklalapio pabaigoje. Elemente BODY galite naudoti visus elementus tinklalapiui kurti. Elemento BODY pradžios žymoje galite įdėti daug atributų, kurie padeda nustatyti visą puslapį. Apsvarstykime 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 apibrėžia raudonos, žalios ir mėlynos spalvos (rbg) intensyvumą.

     Kadangi galite pakeisti puslapio foną, galite pakeisti ir teksto spalvą. Tai turi tokį atributą

     tekstas="#RRGGBB"

     Šis atributas naudojamas hipersaitų teksto spalvai nustatyti.

     link="#RRGGBB"

     Taip pat galite nurodyti paskutinio vartotojo pasirinkto hipersaito spalvos pasikeitimą

     <Н1>

     Antraštės elementas. Yra šešių lygių antraštės, kurios žymimos taip.
     <Н1>antraštę
     <Н2>antraštę
     <Н3>antraštę
     <Н4>antraštę
     <Н5>antraštę
     <Н6>antraštę

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

     align="left" align="center" align="dešinė"

     Žyma naudojama kuriant naują pastraipą.

     O pereiti į naują eilutę nekuriant pastraipos – žyma
     y., yra pervedimas. Šių žymų nereikia uždaryti. Žinoma, jei nenaudosite žymoje

     Elementas ALIGN, kuris gali nustatyti pastraipos lygiavimą:

     Kairė

     Centruota

     Teisingai

     Tekstas tarp šių elementų yra pagrįstas.

     <НR>

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

     • 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 hipersaitų mechanizmą. Norėdami tai padaryti, įdėkite atitinkamas etiketes tinkamose teksto vietose.

     <а name=»метка»>Laisvas tekstas

     Šiuo atveju nurodytai dokumento eilutei suteikiamas pavadinimas, taigi kita dokumento dalis ar net kitas dokumentas gali būti susietas su ta etikete.

     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 skiriasi nuo paprasto teksto, visų pirma, tuo, kad vartotojui nereikia galvoti apie jo elementų numeraciją: HTML imasi šios užduoties. Jei sąrašas papildomas naujais elementais arba sutrumpinamas, numeracija tęsiama automatiškai. Jei sąrašai nėra sutvarkyti, HTML prie kiekvieno elemento pridedami apskritimai, stačiakampiai, deimantai ir kiti vaizdai. Galiausiai sąrašas įgauna padorią formą. Yra dvi tokių žymų grupės: viena apibrėžia bendrą sąrašo išvaizdą ( ir leidžia nurodyti atributus), o kiti apibrėžia jo vidinę struktūrą. Sąrašai gali naudoti standartinius atributus. Yra keletas sąrašų tipų.

     Dažniausias yra netvarkingas sąrašas ( netvarkingas sąrašas). Jis pateikiamas žemiau:

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

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

     lenteles

     Jie yra viena iš būtiniausių būdų formatuoti duomenis tinklalapyje. Pagrindinis patogumas yra tas, kad naršyklė perima visos lentelės piešinį. Rėmelio dydis gali būti automatiškai koreguojamas pagal naršyklės peržiūros srities dydį ir, žinoma, pagal teksto eilučių ir figūrų dydį lentelės langeliuose. Be kita ko, lentelės leidžia išspręsti daugybę dizaino užduočių: sulygiuoti puslapio dalis viena kitos atžvilgiu, dėti vaizdus ir tekstą greta, valdyti spalvų dizainą ir pan. Kuriant lenteles taikomas įdėjimo principas: pagrindinio lentelės elemento (LENTELĖS) 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 elemento TABLE nurodytas TR elementas, tai reiškia, kad prasideda naujos lentelės eilutės aprašymas. Viskas po š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. Pasirodžius naujam TR elementui, prasidės kitos eilutės aprašymas ir taip toliau iki lentelės pabaigos (žyma).
     Lentelę galima lygiuoti horizontaliai, naudojant lygiavimo atributą:

     • align="left" – į kairę;
     • 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 skirtumą

     Scenarijai

     Beveik visi žiniatinklio valdytojai nori, kad jų puslapiai svetainėje atrodytų šiuolaikiškai, būtų daugiafunkciniai, gražūs ir dinamiški. Standartinės priemonės HTML negalimas, todėl naudojamos įvairios priemonės: 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, įtrauktas į formos puslapio tekstą pirminis kodas ir vykdomas naršyklės, kai peržiūrimas puslapis. Scenarijus gali būti parašytas JavaScript, sukurta Netscape arba Visual Basic Script ( VBScript), kurią sukūrė „Microsoft“.

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

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

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

     type="text/javascript"

     Viena šauniausių scenarijų kūrimo savybių yra galimybė keisti puslapio turinį dėl programos vykdymo. Bet tai tik savybė, o ne taisyklė. Atributas defer (kuris neturi reikšmės) gali būti naudojamas norint „pasakyti“ naršyklei, kad tokie pakeitimai nebus atlikti. Kai kuriais atvejais tai leidžia pagreitinti puslapio įkėlimą.

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

     Scenarijaus žyma ( arba daug tokių elementų) gali būti dedamas HEAD elemento 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 šį triuką ir nepaiso komentarų simbolių. Jei scenarijaus tekste reikia įvesti komentarą, tai tam naudojama kita žyma: eilutės pradžioje įvedami du pasvirieji brūkšniai //.
     Scenarijaus kodas vykdomas įkėlus puslapį, t.y. kol turinys vis dar matomas ekrane. Žemiau pateikiamas paprasto scenarijaus pavyzdys ( rodomas pranešimas lange).

     —
     —
     —
     —
     —
     —
     —
     —

     Tai paprastas puslapis, tačiau jame yra vienos eilutės scenarijus. Įspėjimo metodas rodo pranešimą prieš įkeliant. Ir jis kabės, kol vartotojas nepaspaus mygtuką Gerai, atsisiuntimas bus tęsiamas.
     Gali būti atvejis, pavyzdžiui, puslapis bus peržiūrimas naršyklėje, kuri nepalaiko skriptų, tam yra numatytas NOSCRIPT elementas. Šiuolaikiniai žiūrovai nepaiso jo turinio. Šis elementas gali būti naudojamas keliais būdais. Pradedantiesiems jame galite rodyti tokį skelbimą: 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ą.

     Čia mes su jumis ir išnagrinėjome 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!