Hvernig á að læra HTML

Myndband: Identify and connect 6-WIRE motor (QUICK AND EASY)

Efni.

Skref
Hluti 1 af 2: Að læra grunnatriði HTML
Hluti 2 af 2: Ítarlegri HTML
Ábendingar
Viðvaranir
Hvað vantar þig

HTML er stutt fyrir ensku Hyper Text Markup Language (hypertext markup language). Þetta er kóðinn, eða tungumálið, þar sem grunnmerking á vefsvæðum er búin til. Nám getur virst ógnvekjandi ef þú hefur aldrei forritað, en í raun og veru er allt sem þú þarft til að byrja að vera grunn textaritill og netvafri. Þú gætir jafnvel þekkt nokkur dæmi um HTML merkingu sem þú hefur rekist á á vettvangi á internetinu, sérsniðnum sérsniðnum síðum eða greinum wikiHow. HTML er gagnlegt tæki fyrir alla netnotendur og það mun taka minni tíma að læra grunnatriðin en þú heldur.

Skref

Hluti 1 af 2: Að læra grunnatriði HTML

1 Opnaðu HTML skjal. Hægt er að nota flesta textaritstjóra (Notepad eða Notepad ++ fyrir Windows, TextEdit fyrir Mac, gedit fyrir GNU / Linux) til að búa til HTML skrár. Búðu til nýtt skjal og vistaðu það með því að nota File → Save As í vefsíðuformi, eða breyttu skráarviðbótinni í .html eða .htm í staðinn fyrir .doc, .rtf eða aðra viðbót.
- Þú gætir fengið viðvörun um að skráin verði vistuð sem „venjulegur texti“ í stað RTF sniðs eða að snið og myndir verði ekki vistaðar. Þetta er fínt; fyrir HTML er ekki þörf á þessum valkostum.
2 Opnaðu myndina í vafranum. Vista eyða skrána, finndu hana á tölvunni þinni og tvísmelltu á hana til að opna hana. Auð síða ætti að opna í vafranum. Ef það gerist ekki skaltu draga skrána á veffangastiku vafrans þíns. Þegar þú breytir HTML skránni geturðu endurnýjað þessa síðu til að sjá breytingarnar.
- Vinsamlegast athugaðu að með þessum hætti ertu ekki að búa til vefsíðu á Netinu. Annað fólk mun ekki hafa aðgang að þessari síðu og þú þarft ekki internettengingu til að prófa síðuna þína. Vafrinn túlkar einfaldlega HTML kóðann, „les“ hann eins og hann væri vefsíða.
3 Skilja hvað merkingarmerki eru. Ólíkt venjulegum texta birtast merki ekki á síðunni. Í staðinn segja þeir vafranum hvernig á að birta síðuna og innihald hennar. Merkið „opnun“ inniheldur leiðbeiningar. Til dæmis getur það sagt vafranum að textinn ætti að birtast sem djörf... Það þarf líka „enda“ merki til að sýna vafranum hvar kennslan endar. Í þessu dæmi verður textinn milli upphafs- og lokamerkja sýndur með feitletrun. Merki eru skrifuð inni í ójöfnum skiltum, en lokamerkið byrjar með skástrik fram á við.
- Opnunarmerkið er skrifað á milli misréttismerkjanna: opnunarmerki>
- Í lokamerkinu er skástrik sett fram fyrir merkimiðann (nafn): /lokamerki>
- Lestu áfram til að finna út hvernig mismunandi merki eru notuð. Fyrir þetta skref þarftu bara að muna upptökusniðið. Merki eru skrifuð á milli misréttismerkjanna:> og />
- Í sumum námskeiðum eru HTML merki kölluð þættir og textinn á milli opnunar- og lokamerkjanna er kallaður frumefni.
4 Sláðu inn html> merki í ritlinum. Sérhver HTML skrá verður að byrja með merki html> og enda með merki / html>... Þessi merki segja vafranum að allt efni milli merkjanna sé í HTML. Bættu þessum merkjum við skjalið þitt:
- Oft byrja HTML skrár með línunni ! DOCTYPE html>sem þýðir að vafrar verða að viðurkenna alla skrána sem HTML. Þessi lína er ekki nauðsynleg, en hún getur hjálpað þér að leysa vandamál með eindrægni.
- Hringja html> efst í skjalinu.
- Ýttu á Enter eða Return mörgum sinnum til að búa til margar auðar línur og sláðu síðan inn / html>
- mundu það allt kóðann sem þú munt búa til í þessari grein verður að vera skrifaður á milli þessara tveggja merkja.
5 Búðu til haus> kafla í skránni. Á milli html> og / html> merkjanna skaltu búa til opnunarmerki höfuð> og lokamerkið / höfuð>... Bættu við nokkrum auðum línum á milli þeirra. Efni sem er skrifað á milli haus> og / höfuð> merkjanna er ekki sýnt á síðunni sjálfri. Fylgdu þessum skrefum og þú munt sjá til hvers þetta merki er ætlað:
- Milli höfuð> og / höfuð> merkjanna, skrifaðu titill> og / titill>
- Skrifaðu á milli titilsins> og / titils> merkja Hvernig á að læra HTML - wikiHow.
- Vistaðu breytingarnar þínar og opnaðu skrána í vafra (eða endurnýjaðu síðuna ef skráin er þegar opin). Sjáðu textann sem birtist í síðuheiti fyrir ofan veffangastikuna?
6 Búa til meginmál> kafla. Öll önnur merki og texti í þessu dæmi eru skrifuð í meginhlutanum, en innihaldið er birt á síðunni. Eftir lokamerki / haus>, en áður tag / html> bæta við merkjum líkami> og / líkami>... Fyrir restina af þessari grein skaltu vinna með líkamshlutann. Skráin þín ætti að líta svona út:
html>
höfuð>
title> Hvernig á að læra HTML - wikiHow / title>
/ höfuð>
líkami>
/ líkami>
/ html>
7 Bættu við texta með mismunandi stílum. Það er kominn tími til að bæta raunverulegu innihaldi við síðuna! Allt sem þú skrifar milli meginmerkjanna verður birt á síðunni eftir að hafa verið hress í vafranum. Ekki nota tákn eða >þar sem vafrinn mun reyna að túlka innihaldið sem merki í stað texta. Skrifaðu Halló! (eða hvað sem þér líkar), reyndu þá að bæta þessum merkjum við textann og sjáðu hvað gerist:
- em> Halló allir! / em> gerir textann „skáletraðan“: Halló!
- sterkur> Halló allir! / sterkir> gerir textann „feitletrað“: Halló!
- s> Halló allir! / s> gegnumsnúinn texti: ~~Halló!~~
- sup> Halló allir! / sup> sýnir letrið sem yfirskrift:
- undir> Halló allir! / undir> sýnir leturgerðina sem áskrift: _Halló!
- Prófaðu mismunandi merki saman. Hvernig það mun líta út em> strong> Halló allir! / strong> / em>?
8 Skiptu textanum í málsgreinar. Ef þú reynir að skrifa margar línur af texta í HTML skrá muntu taka eftir því að línuskil eru ekki birt í vafranum. Til að skipta texta í málsgreinar þarftu að bæta við merkjum:
- p> Þetta er sérstök málsgrein. / p>
- Þessari setningu fylgir línubrot br> fyrir upphaf þessarar línu.
  Þetta er fyrsta merkið sem þarf ekki endamerki. Þessi merki eru kölluð „tóm“ merki.
- Búðu til fyrirsagnir til að sýna kaflaheiti:
  h1> fyrirsögnartexti / h1>: stærsti titillinn
  h2> fyrirsögnartexti / h2> (fyrirsögn á öðru stigi)
  h3> fyrirsögnartexti / h3> (fyrirsögn þriðja stigs)
  h4> fyrirsögnartexti / h4> (fjórða stigs fyrirsögn)
  h5> fyrirsögnartexti / h5> (minnsti titill)
9 Lærðu að búa til lista. Það eru nokkrar leiðir til að búa til lista á vefsíðu. Prófaðu valkostina hér að neðan og taktu ákvörðun um hver þér líkar best. Athugið að eitt par af merkjum er nauðsynlegt fyrir listann í heild (til dæmis ul> og / ul> fyrir punktalista) og hvert listatriði er auðkennt með mismunandi merkimiðum, til dæmis li> og / li>.
- Punktalisti:
  ul> li> Fyrsta lína / li> li> Önnur lína / li> li> Og svo framvegis / li> / ul>
- Númeraður listi:
  ol> li> Einn / li> li> Tveir / li> li> Þrír / li> / ol>
- Skilgreiningalisti:
  dl> dt> Kaffi / dt> dd> - heitur drykkur / dd> dt> Lemonade / dt> dd> - kaldur drykkur / dd> / dl>
10 Skipulag síðunnar með línubrot, láréttar línur, og Myndir. Það er kominn tími til að bæta einhverju öðru en texta við síðuna. Prófaðu eftirfarandi merki eða fylgdu krækjunum fyrir frekari upplýsingar. Notaðu hýsingarþjónustu á netinu til að búa til krækju á myndina sem þú vilt birta:
- Lárétt lína: hr>
- Setja inn mynd: img src = "myndatengill">
11 Bæta við krækjum. Þú getur notað þessi merki til að búa til tengla á aðrar síður og síður, en þar sem þú ert ekki með vefsíðu enn þá muntu nú læra hvernig á að búa til akkeritengla, það er tengla á tiltekna staði á síðu:
- Búðu til akkeri með a> merkinu þar sem þú vilt tengja á síðunni. Komdu með skýrt og eftirminnilegt nafn:
  
  a name = "Tips"> Textinn sem þú ert að tengja við. / a>
- Notaðu href> merkið til að búa til afstæðan krækju eða tengil við ytri auðlind:
  
  a href = "tengill á síðuna eða akkerisheiti innan síðunnar"> Texti eða mynd sem mun þjóna sem tengill. / a>
- Til að tengja við ættingja krækju á annarri síðu skaltu bæta við # merki á eftir aðaltengli og heiti akkerisins. Til dæmis https://en.wikihow.com/learn-HTML# Ábendingar um tengla á ábendingahluta þessarar síðu.

Hluti 2 af 2: Ítarlegri HTML

1 Kynntu þér eiginleikana. Eiginleikar eru skrifaðir inni í merkinu, sem gefur til kynna viðbótarupplýsingar. Snið eigindanna er sem hér segir: nafn = "gildi", hvar titill skilgreinir eiginleika (til dæmis, litur fyrir litareiginleika) og gildið gefur til kynna gildi þess (til dæmis, rauður fyrir rautt).
- Eiginleikar hafa í raun verið notaðir í fyrri hlutanum um grunnatriði HTML. Img> merkið notar eiginleikann src, hlutfallslegir hlekkir akkeri nota eiginleikann nafnog krækjurnar nota eiginleikann href... Eins og þú hefur þegar tekið eftir eru allir eiginleikar skrifaðir með sniðinu ___='___’.
2 Gerðu tilraunir með HTML töflur. Við gerð töflu felst notkun ýmissa merkja. Þú getur gert tilraunir eða lesið nákvæmari leiðbeiningar.
- Búa til töflumerki:borð> / borð>
- Innifalið innihald hverrar línu í töflunni í merkjum: tr>
- Fyrirsögn dálksins er skilgreind með merkinu: þ>
- Frumur í síðari línum: td>
- Dæmi um að nota þessi merki:
  
  tafla> tr> þ> dálkur 1: mánuður / þ> þ> dálkur 2: sparnaður / þ> / tr> tr> td> janúar / td> td> 5000 rúblur / td> / tr> / borð>
3 Lærðu viðbótarmerkin fyrir höfuðhluta. Þú hefur þegar lært höfuðið> merkið sem kemur í upphafi hverrar html skráar. Fyrir utan titilinn> merkið eru önnur merki fyrir þennan hluta:
- Meta tags sem innihalda lýsigögnnotuð af leitarvélum til að skrá síðuna. Til að gera síðuna þína auðveldara að finna í leitarvélum skaltu nota eitt eða fleiri meta> merki (ekki er nauðsynlegt að loka merkjum).Notaðu einn eiginleika og eitt gildi fyrir hvert merki: meta name = "description" content = "page lýsing">; eða meta name = "leitarorð" content = "komma aðskilin leitarorð">
- Tengill> merki sem benda á skrár frá þriðja aðila, svo sem stílblöð (CSS), sem eru búin til með annarri kóðun og gera þér kleift að breyta HTML síðu með lit, textastillingu og mörgum öðrum eiginleikum.
- Forskriftin> merki sem notuð eru til að festa JavaScript skrár við síðuna. Þessar skrár eru nauðsynlegar til að breyta síðunni gagnvirkt (til að bregðast við aðgerðum notenda).
4 Gerðu tilraunir með HTML kóða annarra vefsvæða. Að skoða frumkóða annarra vefsíðna er frábær leið til að læra HTML. Þú getur hægrismellt á síðuna og valið Skoða heimild eða eitthvað álíka í efstu valmynd vafrans. Reyndu að reikna út hvað ókunnugt merki gerir, eða leitaðu á netinu eftir upplýsingum um það.
- Þó að þú getir ekki breytt vefsíðum annarra geturðu afritað kóðann í skrána þína til að gera tilraunir með merki síðar. Vinsamlegast athugaðu að CSS merking er kannski ekki tiltæk og litir og snið geta litið öðruvísi út.
5 Byrjaðu á að kanna nákvæmari leiðbeiningar. Það eru margar síður á netinu tileinkaðar HTML merkjum, svo sem W3Schools eða HTMLbook. Það eru líka pappírsbækur til sölu, en reyndu að finna nýjustu útgáfuna þegar staðlar breytast og þróast. Betra enn, húsbóndi CSS til að hafa miklu meiri stjórn á skipulagi og útliti síðunnar þinnar. Eftir að hafa lært CSS læra vefhönnuðir venjulega JavaScript.

Ábendingar

Notepad ++ er frábært ókeypis forrit, svipað og venjulegt Notepad, en þú getur vistað og prófað kóðann þinn í vafranum þínum á netinu. (Það styður einnig næstum hvaða tungumál sem er - HTML, CSS, Python, JavaScript og svo framvegis.)
Finndu einfalda síðu á netinu, vistaðu kóðann í tölvunni þinni og gerðu tilraunir með hana. Prófaðu að færa texta, breyta letri, skipta um myndir - hvað sem er!
Þú getur geymt minnisbók þar sem þú skrifar merki þannig að þú hafir þau alltaf við höndina. Þú getur líka prentað þessa síðu og vísað í hana.
Þegar þú skrifar kóða, gerðu það vandlega svo að þú og annað fólk skiljið það. Notaðu! - Settu inn athugasemd hér -> fyrir HTML athugasemdir: þær munu ekki endurspeglast á síðunni heldur verða sýnilegar í kóðaskjalinu.
XML og RSS njóta vinsælda. Kóðinn fyrir síður sem innihalda XML og RSS tækni er erfiðara fyrir óreyndan notanda að lesa og skilja, en þessi tæki eru mjög gagnleg.
Merkingarmerki í HTML eru ónæm fyrir stórum stöfum en við mælum með því að nota aðeins lágstafi (eins og í dæmunum í þessari grein) bæði fyrir stöðlun og XHTML eindrægni.

Viðvaranir

Sum merki hafa farið úr notkun undanfarin ár og þeim hefur verið skipt út fyrir ný sem gefa sömu eða önnur áhrif.
Ef þú vilt prófa síðuna þína skaltu fara á W3 síðuna og skoða nútíma HTML kröfur. HTML staðlar breytast með tímanum og sumum merkjum er skipt út fyrir nýja sem virka betur í nútíma vöfrum.