HTML vadovėlis (pradedantiesiems)

HTML vadovėlis pradedantiesiemsAr norėtumėte išmokti HTML?


Tai skamba kaip puiki idėja. Taigi mes sukūrėme šią HTML pamoką pradedantiesiems.

Šiandien pasaulyje yra mažiausiai 1,7 milijardo svetainių. Praktiškai visos šios svetainės vienaip ar kitaip naudoja HTML.

P.S .: Jei nenorite mokytis HTML ir pradėti kurti savo interneto svetainę iš karto, nereikalaujant kodavimo, peržiūrėkite šį vadovą: Kaip nemokamai sukurti svetainę (nesimokant HTML).

Įvadas į HTML


Kas yra HTML?

Kas yra HTMLHTML, „HyperText Markup Language“ akronimas, yra kompiuterių kalba, skirta svetainėms ir žiniatinklio programoms kurti. Sudarytas daugiausia iš kodų, paprastai rašomų į teksto failą ir išsaugotų kaip HTML, serijų, HTML kalba parašytas kodas virsta gražiu, gerai suformatuotu tekstu arba teksto ir laikmenų deriniu, kai žiūrima per naršyklę..

HTML pirmą kartą sukūrė britų fizikas Timas Bernersas-Lee 1990 m. Ir nuo to laiko jis išgyveno tiek daug pokyčių, kad naujausia versija gali pasiekti daug daugiau, nei buvo įsivaizduojama, kai kalba buvo pirmą kartą sugalvota..

Šiame vadove mes pateiksime HTML kalbos pagrindus ir viską, ką reikia žinoti norint pradėti naudoti HTML kaip pradedančiajam..

HTML versijos

Pirma, greitai sunaikintos visos HTML versijos, nes buvo išrastas HTML.

  • HTML 1.0: Tai buvo HTML versija be kaulų ir pati pirmoji kalbos išvada.
  • HTML 2.0: Ši versija buvo pristatyta 1995 m. Ji palaipsniui tobulėjo, suteikdama papildomų galimybių, įskaitant forma pagrįstą failų įkėlimą, lenteles, kliento pusės žemėlapius ir internacionalizaciją..
  • HTML 3.2: Siekdamas užtikrinti internetinių standartų kūrimą, 1994 m. Timas Bernersas-Lee įkūrė internetinį konsorciumą (W3C). Iki 1997 m. Jie paskelbė HTML 3.2.
  • HTML 4.0: Vėliau, 1997 m., W3C išleido HTML 4.0 – versiją, kuri pritaikė daugelį naršyklės elementų tipų ir atributų.
  • Vėliau HTML HTML buvo pakartotinai išleistas su nedideliais pakeitimais 1998 m.
  • HTML 4.01: 1999 m. Gruodžio mėn. Buvo išleistas HTML 4.01.
  • XHTML: Specifikacijos buvo įvestos 2000 m. Ir buvo rekomenduota naudoti kaip bendrą standartą su HTML 4.01. Į jį buvo įtrauktas XML, kad būtų užtikrintas tinkamas kodo rašymas ir programavimo kalbų sąveika.
  • HTML5: „W3C“ paskelbė HTML5 kaip rekomendaciją 2014 m. Spalio mėn., O vėliau 2016 m. Lapkričio mėn. Išleido HTML 5.1.

HTML redaktoriaus pasirinkimas

Pasirinkite HTML redaktoriųJei galvojate kurti tinklalapius HTML formatu, jums reikia HTML redaktoriaus. HTML redaktoriaus naudojimas turi keletą privalumų.

Geras HTML redaktorius užtikrins, kad jūsų kodas būtų švarus ir tvarkingas. Tai taip pat aptinka atidarę naują žymą ir automatiškai ją uždarydami, kad išvengtumėte klaidingo kodo ir dėl to sumažintumėte teksto rašymo kiekį. Daugelis HTML redaktorių šiandien leidžia jums peržiūrėti savo tinklalapį, kad pamatytumėte, kaip jis atrodys interneto naršyklėje, naudodamas jų funkciją WYSIWYG..

Yra daug nemokamų ir mokamų HTML redaktorių, žemiau pateikiamos kelios pagrindinės parinktys, kurias galite pasirinkti:

Pagrindiniai HTML elementai


Kai nuspręsite, kokią HTML redaktorių norite naudoti, kitas žingsnis yra suprasti HTML pagrindinius elementus. Koduojant HTML, labai svarbu suprasti šiuos pagrindinius elementus. Jie apima žymas, atributus ir elementus. Pažvelkime į juos žemiau:

Įvadas į žymas

Įsigilinę į HTML, pirmiausia turite suprasti, kas yra žymos. Iš esmės etiketės atskiria įprastą tekstą nuo HTML kodo.

Taigi, kai kalbama apie HTML, žymos daro skirtumą tarp to, ar jūsų dokumentas rodomas kaip paprastas tekstas, ar „transformuoto teksto“, kuris iš esmės yra teksto kodas, kuris parodo daugybę dalykų (hipersaitus, vaizdus, ​​laikmenas ar kt.) formatavimo metodai), atsižvelgiant į tai, ką nurodoma rodyti pagal žymas.

Pažvelkime į žodį „Jis yra berniukas“ kaip pavyzdį:

  • Įprastu teksto formatu gaunamas: Jis yra berniukas.
  • Paryškinto teksto formatu gausite: Jis yra berniukas

Norėdami pasiekti tai, ką turime paryškintu formatu, turite naudoti žyma.

kad tekstas būtų paryškintas html

Neapdorotą HTML mes turime Jis yra berniukas kurį naršyklė paverčia taip: Jis yra berniukas.

„Jis yra berniukas“ taip pat galėtų išeiti kursyvu.

Tai pasiekiama naudojant žyma.

tekstas tampa kursyvu html

Mes turime: Jis yra berniukas kuris tada išeina kaip Jis yra berniukas.

Hipersaitas yra pasiekiamas naudojant žyma.

teksto hipersaitas į HTML

Neapdorotą HTML kalbą turime: Jis yra berniukas, kuris parodo, kaip yra berniukas.

Yra keletas dalykų, kuriuos turėtumėte suprasti apie žymas:

  • Žymos praktiškai yra HTML elementas – HTML negali padaryti be žymų! Jei neužstrigote, kurią žymą naudoti, būtinai peržiūrėkite mūsų periodinę HTML lentelę.
  • Beveik kiekviena atidaryta žyma turi būti uždaryta. Atminkite, kad yra išimčių. Žymos, kurios nereikia uždaryti, pavyzdys yra tuščia žyma, tokia kaip eilutės pertrauka:
    .
  • Žymų yra mažiau nei („“<”) and greater than (“>”) Kampinis laikiklis. Uždarytose etiketėse yra brūkšnio brūkšnys, kuris tampa prieš uždaromos žymos pavadinimą. Atviros žymos pavyzdys: . Uždarytos etiketės pavyzdys .
  • Kiekvienas HTML failas prasideda pradine žyma ir baigiasi uždarymo žyma. Pirmoje HTML failo eilutėje turėtų būti nurodytas dokumento tipas, kad naršyklė žinotų, kokį HTML skonį naudojate. Štai kodėl matote, kad HTML puslapiai prasideda raide „Prieš pradedant HTML kodą.

Prieš pridedant turinį, dauguma HTML failų iš esmės atrodo taip:

HTML--

Skyrius, kuris eina po žymoje paprastai yra informacijos apie dokumentą, tokią kaip jo pavadinimas, metažymos ir kur rasti jo CSS failą – turinio, kuris nėra tiesiogiai matomas naršyklės puslapyje. Skyrius tarp „ ir“(Kurį atstovavome„ PAGRINDINIS TURINYS “) yra pagrindinis HTML failo, kurį žiūrovas matys naršyklėje, turinys. Tai apima viską nuo pirmosios pastraipos iki hipersaitų iki formato ir daugialypės terpės bei visa kita.

Įvadas į elementus

įvadas į elementus

HTML kalba „elementas“ susideda iš pradžios ir uždarymo žymų, taip pat iš turinio tarp žymų.

Viduje konors “Jis yra berniukas(Paryškintas) pavyzdys, mes turime tai HTML formatu: Jis yra berniukas. Tekstą „Jis yra berniukas“ supa atvira ir uždara etiketė. Viskas, įskaitant pradžios žymą, turinį ir uždarymo žymą, yra elementas.

Kai atidaroma žyma, įvedamas turinys ir uždaroma žyma, turime elementą.

Elementas gali būti pagrindinės arba sudėtingos formos. Kodėl? Nes viskas, kas yra tarp atviros ir uždarymo žymų, taip pat tų žymų, yra elementas. Tai reiškia, kad elemente gali būti elementų. Dabartiniame mūsų pavyzdyje „jis yra berniukas“ (Jis yra berniukas) yra elementas.

Pastebėsite, kad anksčiau sakėme, kad HTML dokumentuose yra pažymėkite prieš pradedant turinį. Turinį gali sudaryti šimtai skirtingų elementų, tačiau visi šie elementai yra „kūno“ elemento dalis (kadangi korpuso elementas yra atviras, jame yra turinio, o po to jis uždaromas).

Įvadas į požymius

Nors HTML dokumentai iš esmės viskam naudoja žymas, kartais norime perduoti papildomą informaciją elemento viduje. Šiuo atveju mes naudojame atributą. Atributas naudojamas apibrėžti elemento savybes, jis naudojamas elemento atidarymo žymoje. Atributus sudaro vardas ir reikšmė.

Atminkite, kad atributo vertė yra kabutėse, naudojant formatą Tavo tekstas.

atributo pavyzdys

Pavyzdys:

Jis yra berniukas

Šiame pavyzdyje mes nurodome, kad „Jis yra berniukas“ yra išlygintas dokumento centre.

Darbo su HTML pradžia


Pradžia su HTMLDarant prielaidą, kad šiandien norite sukurti savo pagrindinį HTML dokumentą, kaip pradėti? Nuo puslapių pavadinimų kūrimo iki formų kūrimo mes paaiškinsime, kaip pradėti naudotis HTML.

HTML kūrimas Elementas

Kuriant HTML dokumentą, vienas iš pirmųjų dalykų, kurį sukursite, yra elementas. Čia yra metaduomenys (arba duomenys apie HTML dokumentą). Tai apima tokią informaciją kaip ženklų rinkinys, dokumento pavadinimas, dokumento stiliai, scenarijai ir kt.

Kai kurie elementai įtraukti pavadinimą, kuris yra sukurtas su žyma.</p><p><strong>Pavyzdys</strong>:</p><pre><title>Tai yra mūsų puslapio pavadinimas

Šis pavadinimas bus rodomas naršyklės skirtuke. Tai taip pat bus indeksuojama kaip puslapio pavadinimas, kai paieškos sistemos robotai tikrins jūsų svetainę.

Tai taip pat apima elementas, kuris dažnai naudojamas norint nurodyti informaciją, kurią paieškos varikliai gali naudoti norėdami apibūdinti savo sąrašų turinį. Tai apima aprašą, raktinius žodžius, informaciją apie autorių ir kt elementas taip pat nurodo simbolių rinkinį, kurį naudoja HTML dokumentas.

HTML antraščių kūrimas

kuriant antraštes html

Antraštės vaidina pagrindinį vaidmenį siekiant svetainės sėkmės. Pirma, jie leidžia skaitytojams lengvai nuskaityti jūsų puslapių turinį. Antra, ir dar svarbiau, jie perduoda jūsų tinklalapių struktūrą paieškos varikliams ir todėl dažnai daro įtaką jūsų turinio reitingui paieškos sistemų rezultatuose..

Nepaisant to, svarbu vengti antraščių žymų, kad jūsų tekstas būtų didelis ar paryškintas. Yra ir kitų žymų, kurias galima naudoti (kurias pateiksime vėliau šiame skyriuje). Vietoj to, antraštės turėtų būti naudojamos tik struktūrai.

HTML yra šešios antraštės:

į
, su

žyma, nurodanti svarbiausią antraštę ir
žyma, nurodanti mažiausiai svarbią antraštę.

Norėdami sukurti antraštes, tiesiog nuspręskite, kokią antraštę kuriate, atidarykite antraštę su įprasta antraštės žyma ir visada atsiminkite, kad uždarę žymas užbaigsite.

HTML antraščių pavyzdys:

  • Tai yra jūsų pirmoji HTML antraštė

    (didžiausia)

  • Tai yra jūsų antroji HTML antraštė

  • Tai yra jūsų trečioji HTML antraštė

  • Tai yra jūsų ketvirtoji HTML antraštė

  • Tai yra jūsų penktoji HTML antraštė
  • Tai yra jūsų šeštoji HTML antraštė

Kuriame pastraipas

kuriant pastraipas HTML

Kitas žingsnis – pradėti kurti pastraipas. Paragrafus galima sukurti naudojant

žyma.

Pavyzdys:

Tai yra jūsų pirmoji pastraipa.

Tai yra jūsų antroji pastraipa, ir jūs sukursite dar daugiau pastraipų.

Atminkite, kad rašymas HTML formatu labai skiriasi nuo rašymo grynu tekstu. Todėl jei skaidysite tekstą HTML viduje, nepradėję naujos pastraipos, tikrai nebus svarbu, kada tekstas rodomas naršyklėje. Vietoj to norite naudoti linijos pertrauką, kurią žymi
žyma.

Pavyzdys:

Tai nauja pastraipa. Ir aš noriu naudoti daugybę naujų eilučių. Taigi aš ją suskaidysiu.

Tai nebus taip:

Tai nauja pastraipa.
Ir aš noriu naudoti daugybę naujų eilučių.
Taigi aš ją suskaidysiu.

Vietoj to išeis taip:

Tai nauja pastraipa. Ir aš noriu naudoti daugybę naujų eilučių. Taigi aš ją suskaidysiu.

Taigi, kaip suskaidyti tekstus į naujas eilutes, kad jie atrodytų taip:

Tai nauja pastraipa.
Ir aš noriu naudoti daugybę naujų eilučių.
Taigi aš ją suskaidysiu.

Naudojant linijų pertraukas.

Pavyzdys:

Tai nauja pastraipa.
Ir aš noriu naudoti daugybę naujų eilučių.
Taigi aš ją suskaidysiu.

Vis dėlto svarbu pastebėti, kad linijos pertrauka (
) žyma yra tuščia žyma, todėl jums jos nereikia uždaryti.

Teksto formatavimas HTML formatu

formatuoti tekstą HTML formatu

Kitas žingsnis – suformatuokite tekstą HTML formatu. Čia galite nurodyti, ar norite, kad jūsų tekstas būtų paryškintas, kursyvu pažymėtas, pabrauktas, pasirašytas, pasirašytas aukščiau ir tt Tai yra pagrindinis vadovas, todėl ši skiltis nebus tinkama formatuoti. Mes įtrauksime tik keletą pagrindinių formatavimo žymų. Kitų formatavimo formų naudojimo procesas yra paprastas – tereikia surasti norimą žymą ir pirmyn:

Naudojant drąsiai: Jis yra berniukas išeina kaip Jis yra berniukas

Naudojant kursyvą: Jis yra berniukas išeina kaip Jis yra berniukas

Pabrėžtas tekstas: Jis yra berniukas išeina kaip Jis yra berniukas. Verta paminėti, kad žyma buvo nebenaudojama HTML 4.01 ir buvo iš naujo apibrėžta taip, kad HTML5 vaizduotų stilistiškai skirtingą tekstą. Todėl tekstui, kuris turėtų būti pabrauktas, nurodyti naudoti CSS. Kadangi šis straipsnis yra pagrindinis vadovas, mes jį laikome paprastu.

Naudojant prenumeratą: Jis yra berniukas išeina kaip Jis yra berniukas

Viršraščio naudojimas: Jis yra berniukas išeina kaip Jis yra berniukas

Dėl kitų žymų, kurias galima naudoti formatavimui, galbūt norėsite pažvelgti į žodynėlį šio šaltinio pabaigoje, kur mes įtraukėme daug susijusių HTML žymų..

Užsakyti ir nesutvarkyti sąrašai

Anksčiau ar vėliau turėsite sudaryti sąrašus. Sąrašai gali būti užsakomi (t. Y. Sunumeruoti) arba nesutvarkyti (t. Y. Be numerių).

Čia yra užsakyto sąrašo pavyzdys:

  1. 1 punktas
  2. 2 punktas
  3. 3 punktas

Štai kaip tai sukurti:

  1. 1 punktas
  2. 2 punktas
  3. 3 punktas

Čia yra netvarkingo sąrašo pavyzdys:

  • 1 punktas
  • 2 punktas
  • 3 punktas

Štai kaip tai sukurti:

  • 1 punktas
  • 2 punktas
  • 3 punktas

Jei jau nėra akivaizdu. Pateikiame suskirstymą:

  • žyma naudojama nurodyti kiekvieną sąrašo elementą. Sudarydami sąrašą, galite naudoti
      žyma, nurodanti užsakytą sąrašą („o“ = užsakyta ir „l“ = sąrašas) arba