Nusprendžiau daugiau dėmesio skirti pradedantiesiems, norintiems įgyti žinias interneto svetainių kūrimo srityje. Tai daryti mane pastūmėjo mokytoja, nes ji padarė daug klaidų laboratorinių darbų vadovuose. Man būtų malonu pažvelgti į šaltinį, iš kurio buvo paimta mokomoji informacija, ir ten palikti keletą savo nuomonės eilučių. Bet dabar ne apie tai. Pirmoje paskaitoje kalbėsiu apie

Kokia yra HTML dokumento struktūra?

Žyma nurodo, kad html dokumento struktūra prasideda ir baigiasi. Didžioji dalis naršyklei ir paieškos sistemoms skirtos informacijos saugoma tarp žymų. Žymose yra mūsų puslapio pavadinimas. Žyma nurodo, kad papildoma informacija skirta vartotojui, ir, žinoma, rodo, kad informacija vartotojui baigiasi.

Dabar leiskite man šiek tiek paaiškinti. Visos žymos ( žyma – hiperteksto žymėjimo kalbos elementas) yra suskirstyti į du tipus: „vienvietis“ ir „uždarantis“. Be to, žymos yra įtrauktos į šiuos simbolius< и >, jie išskiria žymą nuo įprastos html tekstas. Pažvelkime į keletą paprasčiausių „vienkartinių“ žymų:


— žyma, atsakinga už pertraukimą į naują eilutę toje vietoje, kur ši žyma yra įdiegta. Pažiūrėkime į kodą naudodami šią žymą.

Mano pirmoji svetainė Sveiki visi!
Ir tai yra mano pirmoji svetainė.

Rezultatą galima peržiūrėti.

— žyma, nubrėžianti horizontalią liniją. Ši žyma taikoma bloko elementams, eilutė visada prasideda nauja eilute. Turi 5 atributus:

  • align – nustato linijos išlygiavimą. Gali paimti reikšmę į kairę, centrą, dešinę.
  • spalva – nustato linijos spalvą.
  • noshade – nubrėžia liniją be 3D efektų.
  • dydis – nustato linijos storį.
  • plotis – nustato linijos plotį.

Kodas naudojant žymą:

Mano pirmoji svetainė Sveiki visi Tai mano pirmoji svetainė.

Vaizdinį pavyzdį galite rasti čia.

Kita „viena“ žyma yra . Ši žyma naudojama informacijai, skirtai naršyklėms ir paieškos sistemoms, saugoti. Paieškos sistemos ieško metažymų, kad gautų svetainių aprašymus, raktinius žodžius ir kitus duomenis. Jums leidžiama naudoti neribotą metažymų skaičių, visos jos turi būti tarp ir . Bet kurios metažymos parametrai turi formą „name=value“, kuri yra nustatoma raktinius žodžius turinys , pavadinimas arba http-equiv . Nes meta žymės yra skirtos mašinoms, jos nedaro jokių vizualių pakeitimų, todėl pateiksiu tik šaltinio kodą:

Ši eilutė rodo, kad puslapio kūrėjas mano, kad puslapis naudoja UTF-8 kodavimą. HTML5 viskas tapo paprasčiau, norint nurodyti kodavimą, tereikia šios eilutės:

Yra ir kitų atskirų žymų (, ,
, , , , , , , , , , , , , ), bet su jais supažindinsiu kiek vėliau.

Dabar pakalbėkime apie žymų „uždarymą“. Pats pavadinimas „uždarymo žyma“ rodo, kad žymą būtina uždaryti. Tai daroma siekiant aiškiai apriboti teksto dalį, kurią paveikia žyma.

Norėdami gauti aiškų pavyzdį, pažvelkime į žymą, kuri naudojama tekstui paryškinti. Žymos yra ribos, apibrėžiančios teksto pasirinkimo sritį. Štai kodas, kuriame jie pamiršo uždaryti žymą paskutinėje eilutėje:

Mano pirmoji svetainė Sveiki visi! Ir tai yra mano pirmoji svetainė.
Sveiki visi! Ir tai yra mano pirmoji svetainė.

Kaip matote, nėra nieko sudėtingo, dabar galite sukurti kelis puslapius, susietus vienas su kitu.

Žymos tekstui paryškinti

Yra keletas būdų, kaip paryškinti tekstą puslapyje. Tai galima padaryti naudojant stilius arba naudoti žymas. Mus (kol kas) domina antrasis variantas.

— paryškina šriftą.

— nustato kursyvo šrifto stilių.

— tekstą pabraukia.

— skirtas tekstui pabrėžti. Naršyklėse šis tekstas rodomas kursyvu.

- perbraukia tekstą. Ši žyma pašalinta iš HTML5, rekomenduojama ją naudoti vietoje jos

— rodomas tekstas kaip vienas tarpas tekstas. Pašalinta iš HTML5.

— rodo šriftą kaip viršutinį indeksą. Šriftas rodomas virš pagrindinės teksto linijos ir sumažintas.

— rodo šriftą kaip apatinį indeksą. Tekstas yra žemiau likusių eilutės simbolių pradinės linijos ir yra sumažintas.

— skirtas tekstui pabrėžti. Naršyklėse šis tekstas rodomas paryškintu šriftu.

— sumažina šrifto dydį vienu, palyginti su įprastu tekstu. IN HTML dydisšriftas matuojamas įprastais vienetais nuo 1 iki 7, pagal numatytuosius nustatymus naudojamas vidutinis teksto dydis yra 3. Žyma sumažina tekstą vienu įprastu vienetu. Leidžiamos įdėtos žymos, o šrifto dydis bus mažesnis 1 kiekviename įdėto lygyje, bet negali būti mažesnis nei 1.

— padidina šrifto dydį vienu, palyginti su įprastu tekstu. HTML šrifto dydis matuojamas vienetais nuo 1 iki 7, vidutinis numatytasis teksto dydis yra 3. Taigi, pridėjus žymą tekstas padidėja vienu vienetu. Įdėtos žymos leidžiamos, o šrifto dydis bus didesnis su kiekvienu lygiu.

– naudojamas citatoms tekste paryškinti. Konteinerio turinys automatiškai rodomas naršyklėje kabutėse.

– skirtas ilgoms citatoms dokumente paryškinti. Šia žyma pažymėtas tekstas tradiciškai rodomas kaip išlygiuotas blokas su užpildu kairėje ir dešinėje (apie 40 pikselių), taip pat užpildu viršuje ir apačioje.

— apibrėžia iš anksto suformatuoto teksto bloką. Toks tekstas dažniausiai rodomas vienkartiniu šriftu ir su visais tarpais tarp žodžių. Pagal numatytuosius nustatymus bet koks tarpų skaičius kode iš eilės tinklalapyje rodomas kaip vienas. Žyma Leidžia apeiti šią funkciją ir rodyti tekstą, kaip reikalauja kūrėjas.

— apibrėžia teksto pastraipą. Žyma

Tai blokinis elementas, visada prasideda naujoje eilutėje, viena po kitos einančios teksto pastraipos yra atskirtos užpildu. Paminkštinimo kiekį galima valdyti naudojant stilius. Jei uždarymo žymos nėra, laikoma, kad pastraipos pabaiga sutampa su kito bloko elemento pradžia.

.... – HTML siūlo šešias skirtingų lygių antraštes, kurios nurodo santykinę skyriaus po antraštės svarbą. Taigi žyma žymi svarbiausią pirmojo lygio antraštę, o žyma nurodo šeštojo lygio antraštę ir yra mažiausiai svarbi. Pagal numatytuosius nustatymus pirmojo lygio antraštė rodoma didžiausiu paryškintu šriftu, o vėlesnių lygių antraštės yra mažesnio dydžio. Žymos ,... nurodo bloko elementus, jie visada prasideda naujoje eilutėje, o po jų kiti elementai rodomi kitoje eilutėje. Be to, prieš ir po pavadinimo pridedami tarpai. Etiketė turi lygiuoti atributą, kuris apibrėžia pavadinimo išlygiavimą, gali turėti šias reikšmes: kairėje - sulygiuotas pavadinimas, centre - sulygiuotas centre, dešinėje - išlygiuotas dešinėje, lygiavimas - lygiuotas (ir dešinėje, ir kairėje). Ši vertė veikia tik ilgesnėms nei viena eilutė antraštėms.

— yra talpykla, skirta pakeisti šrifto charakteristikas, tokias kaip dydis, spalva ir šriftas. Nors šią žymą vis dar palaiko visos naršyklės, ji laikoma pasenusia, todėl jos naudojimo rekomenduojama atsisakyti ir pasirinkti stilius. Žyma turi 3 atributus: spalva – nustato teksto spalvą, face – nustato šrifto šriftą, dydis – nustato šrifto dydį įprastiniais vienetais.

— pažymi tekstą kaip citatą ar išnašą prie kitos medžiagos. Šis paryškinimas yra naudingas keičiant teksto stilių naudojant CSS, taip pat naudojamas atskirti HTML kodą į struktūrinius elementus. Naršyklės paprastai nustato tekstą konteineryje kursyvu.

— reiškia, kad simbolių seka yra santrumpa. Naudojant pavadinimo atributą, santrumpa iššifruojama, o tai leidžia tiems žmonėms, kurie nėra susipažinę su ja, suprasti santrumpą. Be to, paieškos sistemos indeksuoja viso teksto santrumpos versiją, kuri gali būti naudojama siekiant pagerinti dokumento reitingą.

Pagal numatytuosius nustatymus konteineryje esantis tekstas yra pabrauktas punktyrine linija.

Žemiau yra kodas, kuriame naudojau visas šias žymas:

Mano pirmoji svetainė

HTML ir CSS yra dvi pagrindinės interneto puslapių kūrimo technologijos. HTML suteikia puslapio struktūrą, o CSS – (vaizdinį ir garsinį) išdėstymą įvairiems įrenginiams. Kartu su grafika ir scenarijais HTML ir CSS yra tinklalapių ir žiniatinklio programų kūrimo pagrindas. Sužinokite daugiau apie:

Kas yra HTML?

HTML yra kalba, skirta apibūdinti tinklalapių struktūrą. HTML suteikia autoriams priemones:

Skelbkite internetinius dokumentus su antraštėmis, tekstu, lentelėmis, sąrašais, nuotraukomis ir kt.
Vieno mygtuko paspaudimu gaukite internetinę informaciją per hiperteksto nuorodas.
Formos, skirtos atlikti sandorius nuotolinėmis paslaugomis, naudoti ieškant informacijos, rezervuojant, užsakant produktus ir kt.
Įtraukite skaičiuokles, vaizdo įrašus, garso klipus ir kitas programas tiesiai į savo dokumentus.
Naudodami HTML, autoriai aprašo puslapių struktūrą naudodami žymėjimą. Kalbos elementai žymi turinio dalis, pvz., „pastraipa“, „sąrašas“, „lentelė“ ir pan. Kas yra XHTML?

XHTML yra a HTML variantas kuri naudoja XML sintaksę, Extensible Markup Language. XHTML turi visus tuos pačius elementus (pastraipoms ir pan.) kaip ir HTML variante, tačiau sintaksė šiek tiek skiriasi. Kadangi XHTML yra XML programa, tu gali su juo naudokite kitus XML įrankius (pvz., XSLT, XML turinio transformavimo kalbą).

Kas yra CSS?

CSS yra kalba, skirta apibūdinti tinklalapių pateikimą, įskaitant spalvas, išdėstymą ir šriftus. Tai leidžia pritaikyti pristatymą prie įvairių tipų įrenginių, tokių kaip dideli ekranai, maži ekranai ar spausdintuvai. CSS nepriklauso nuo HTML ir gali būti naudojamas su bet kokia XML pagrindu sukurta žymėjimo kalba. HTML atskyrimas nuo CSS leidžia lengviau prižiūrėti svetaines, bendrinti stilių lapus puslapiuose ir pritaikyti puslapius skirtingoms aplinkoms. Tai vadinama struktūros (arba: turinio) atskyrimu nuo pateikimo.

Kas yra WebFonts? „WebFonts“ yra technologija, leidžianti žmonėms pagal poreikį naudoti šriftus internete, neįdiegiant operacinė sistema. W3C turi atsisiunčiamų šriftų per HTML, CSS2 ir SVG patirtį. Iki šiol atsisiunčiami šriftai nebuvo paplitę internete, nes nebuvo suderinamo šrifto formato. „WebFonts“ planuoja tai išspręsti sukuriant pramonės palaikomą atviro šrifto formatą žiniatinkliui (vadinamą „WOFF“).

Paskaita baigėsi, tikiuosi įgytos žinios jums pravers! Kitoje paskaitoje papasakosiu, ką saugo žyma, išmoksime atlikti visokias manipuliacijas su vaizdais, susipažinsime su lentelėmis.

Rašant šį straipsnį kai kurių žymų aprašymas buvo paimtas iš čia

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 jums pagrindinį supratimą apie HTML ir jo funkcijas.

Taigi, kas yra HTML?

HTML nėra programavimo kalba; tai yra a ž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 pavadinimas 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 ankstesnis atributas, 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 a konteineris skirtas visa informacija, kurią norite įtraukti į HTML puslapį 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 naudojant 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 sugalvoti geresnį alternatyvųjį tekstą savo vaizdui dabar.

    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, pavyzdžiui, pirkinių sąrašas