Sumišęs dėl HTML kodas? Tu ne vienintelis.
Prisipažinsiu. Kai pradėjau rašyti internete, aš žinojau apie tai HTML kodas. Ir aš tai dar kartą prisipažinsiu. Aš vis dar nežinau daug.
Tačiau aš pastebėjau, kad šiek tiek HTML žinių gali padaryti daug lengviau, kai rašai žiniatinkliui.
Žinoma, aš nežinau, kaip sukurti svetainę, bet žinau, kaip pritaikyti mažus komponentus, ir kai susiduriu su redagavimo sistema, kuriai reikalingas HTML kodas – kurį greičiausiai taip pat aplenksite – aš žinau. pakanka teisingai suformatuoti mano tekstą.
Norite pašalinti tą painiavą ir šiek tiek sužinoti apie HTML kodavimą? Pradėkime.
Contents
Kas yra HTML kodas?
Esate matę jį aplinkui, bet tikriausiai nežinote, ką reiškia visas tas HTML įbrėžimas.
Tai reiškia Hiperteksto žymėjimo kalba. HTML yra standartizuota sistema, naudojama dokumentams formatuoti. Naudojami kodai, vadinami žymėjimo žymėmis, gali formatuoti šriftą, teksto dydį, spalvą, hipersaitus, pastraipas ir dar daugiau.
Interneto naršyklės skaito HTML ir naudoja žymas, kad nustatytų, kaip rodyti turinį. Žymos pavyzdys yra tas, kuris sukuria paryškintą tekstą, kuris atrodo taip:
Tai paryškintas tekstas.
Puslapyje jis atrodo taip:
Tai paryškintas tekstas.
Per daugelį metų buvo daug HTML versijų, tačiau nuo 2014 m. Spalio mėn. HTML5 yra standartinė žiniatinklio žymėjimo kalba.
Kodėl tinklaraštininkams verta žinoti
Nors jums gali pavykti tai padaryti nežinant jokio HTML kaip tinklaraštininko ir šiek tiek apgaudinėjant (pvz., Naudojant programą, kuri konvertuoja jūsų formatavimą į HTML kalbą), žinant kelias pagrindines žymas gali būti tikrai naudinga laikantis tinklaraščio..
Čia yra keletas situacijų, kuriose man asmeniškai buvo naudinga:
- Kai dienoraščiai svečiuose, kai kurios svetainės nori, kad jūsų autoriaus biografija būtų parašyta HTML formatu. Turėdami šiek tiek žinių, galėsite prireikus pridėti nuorodas ir kursyvą.
- Kai kažkas atrodo ne taip, galite pažvelgti į puslapio HTML ir sužinoti, kas sukelia problemą.
- Internetiniuose tinkluose galite naudoti HTML žymas, kad suformatuotumėte tinklaraščio komentarus ir forumo komentarus.
- Jei pakankamai išmoksite apie HTML, galite pradėti šiek tiek mokytis apie CSS ir atlikti nedidelius patobulinimus savo tinklalapyje, nesamdydami dizainerio.
Bendrieji kodai, kuriuos naudoja tinklaraštininkai
Prieš peršokdami per giliai, žinokite, kad HTML žymės yra raktiniai žodžiai, įterpti kampo skliaustuose. Šios etiketės pateikiamos poromis, o tekstas tarp pradžios žymos ir pabaigos žymos bus tai, kas bus paveiktas. Pabaigos žyma rašoma taip pat, kaip ir pradžios žyma, tačiau prieš žymos pavadinimą ji naudojama pasviruoju brūkšniu.
Garsas klaidinantis? Paprasčiau, jei pateiksiu keletą pavyzdžių. Pažvelkime į įprastas HTML žymas, kurias turėtumėte žinoti kaip tinklaraštininkas.
Skeleto žymės
Pirmiausia ateina skeleto žymės. Tai yra tie, kurių nebūtinai naudosite, tačiau tai padeda juos pažinti. Šios etiketės sudaro dokumento pagrindą, taigi terminas „skeleto žymės“. Jie bus skaitomi tinklalapyje, tačiau nebus paversti vaizdiniais elementais.
Net ir taip, gera žinoti. Pavyzdžiui, ar kada nors dirbote su programa, kuri prašo įklijuoti kodą į savo svetainės skiltį „galva“? Tai galėsite sužinoti turėdami šiek tiek HTML žinių. Taigi čia yra keletas skeleto žymių, kurias turėtumėte žinoti:
- : Šiame skyriuje aprašomas HTML dokumentas.
- : Šiame skyriuje pateikiama informacija apie dokumentą.
- : Tai nurodo dokumento pavadinimą.
- : Tai apibūdina vaizdinius puslapio elementus. Būtinoje tinklalapio dalyje tinklaraštininkai prireikus atliks HTML koregavimus. Likusios minėtos žymės randamos dokumento tekste.
-
:
Ši žyma apibūdina pastraipą.
Atminkite, kad jūsų puslapio tekstas yra įdėtas į pradžios ir pabaigos žymas. Štai pavyzdys:
Tai pastraipos tekstas.
Antraštės žymės
Antraštės žymės naudojamos dokumento hierarchijai parodyti. Tikriausiai jau naudojate antraštes savo tinklaraščio formatavime, tačiau skirtumas tarp 1–6 antraščių reiškia ne tik teksto dydį ir šrifto svorį. Jie taip pat perteikia interneto naršyklių ir paieškos sistemų robotų hierarchijos jausmą.
1 antraštė turėtų būti naudojama pagrindinei dokumento antraštei, pavyzdžiui, jūsų tinklaraščio įrašo pavadinimui. 2 antraštė turėtų būti antraeilė informacija, tokia kaip pagrindinės subkategorijos. Subpozicijoms naudokite 3 antraštę ir taip toliau naudodami 6 antraštę. Šios etiketės atrodo taip:
Štai kaip jis verčiamas:
Tai yra 5 antraštė
Tai yra 5 antraštė
Įterptos teksto žymės
Įterptosios teksto žymės yra tos, kurias naudosite formuodami tekstą tokiose bloko lygio žymas kaip, pvz
ir
. Čia pateikiami pavyzdžiai, ką paprastai naudojate.- : Tai apibrėžia pabrėžtą tekstą, kurį dauguma naršyklių kursyvu.
- : Tai apibrėžia labai pabrėžtą tekstą, kurį dauguma naršyklių paryškina.
- : Tai suformuoja citatą.
- : Tai rodo ištrintą tekstą, kuris dažnai išverčiamas taip, kaip perbraukta.
Žymų sąrašas
Kaip jūs pastebėjote, šiame tinklaraščio įraše panaudojau kelis ženklų sąrašus. Bet kaip aš tai padariau? Čia yra žymos, kurias turite žinoti:
- :
Tai apibrėžia sąrašo elementą.-
- :
-
- :
Štai pavyzdys, kaip atrodytų užsakyto sąrašo HTML kodas:
- 1 sąrašo punktas
- 2 sąrašo punktas
- 3 sąrašo punktas
Štai kaip jis rodomas puslapyje:
- 1 sąrašo punktas
- 2 sąrašo punktas
- 3 sąrašo punktas
Vaizdo ir nuorodų žymės
Prieš išeidami trumpai apžvelgsime, kaip įterpti vaizdus ir nuorodas. Galbūt paprasčiau peržiūrėti kodą ir užpildyti informaciją, kai naudojate žymas:
Nuoroda
Neišimkite kabutės aplink jūsų URL. Tiesiog įdėkite savo URL tarp kabučių. Inkaro tekstas yra tekstas, rodomas puslapyje.
Pažvelkime į pavyzdį. Jei norėčiau susieti su ankstesniu „Hostingas karalystės“ straipsniu, kodas atrodys taip:
Ar turėtumėte užregistruoti domeną naudodamiesi savo žiniatinklio priegloba?
Puslapis rodomas taip:
Ar turėtumėte užregistruoti domeną naudodamiesi savo žiniatinklio priegloba?
Vaizdas
Vaizdo kodas atrodo taip:
Atminkite, kad tai nėra konteinerio žyma, todėl ji neturi pabaigos žymos, tačiau jums reikia atributo src. Prie šios žymos galite pridėti priedų, tokių kaip alternatyvus tekstas arba dydžio apibrėžimas. Tai atrodytų taip:
Dar kartą įsitikinkite, kad nepašalinate kabutės.
Pastaba: Galite pamatyti skirtingus kodus, kurie gali būti naudojami tam pačiam dalykui. Pavyzdžiui, aš mačiau , , ir žymas, naudojamas paryškinti tekstą, nors įvairiose naršyklėse jos gali būti rodomos skirtingai.
HTML nebūtinai turi būti toks painus, kaip atrodo. Norėdami praktikuoti HTML ir geriau jaustis, naudokitės tokiomis interaktyviomis svetainėmis kaip „Code Academy“, ir praneškite mums, kaip viskas vyksta komentarų skiltyje.
