Turinys

• Žengti
• 1 dalis iš 2: HTML pagrindų mokymasis
• 2 dalis iš 2: Išplėstinio HTML mokymasis
• Patarimai
• Įspėjimai
• Būtinybės

HTML yra santrumpa Hyper teksto žymėjimo kalba, tai kodas arba kalba kuri naudojama kuriant svetaines. Tai gali atrodyti sudėtinga, jei dar niekada nesi programavęs, tačiau norint tai išbandyti tereikia paprastos teksto apdorojimo programos ir interneto naršyklės. Kai kuriuos HTML galite atpažinti iš forumų, internetinių profilių ar „wikiHow“ straipsnių. HTML yra naudingas šaltinis visiems, naudojantiems internetą, o HTML mokymasis gali užtrukti mažiau laiko, nei galite tikėtis.

Žengti

1 dalis iš 2: HTML pagrindų mokymasis

1. Atidarykite HTML dokumentą. HTML dokumentams kurti galima naudoti daugumą teksto apdorojimo programų, įskaitant „Notepad“ arba „Word“, skirtą „Windows“, ir „Text Editor“, skirtą „Mac“. Atidarykite naują dokumentą ir viršutiniame meniu pasirinkite Failas → Išsaugoti kaip, kad išsaugotumėte dokumentą kaip tinklalapį, arba pakeiskite failo plėtinį iš „.doc“, „.rtf“ ar bet ko kito į „.html“ arba „.htm“. ".
   • Dabar galite pamatyti įspėjimą, nurodantį, kad jūsų dokumentas keičiamas iš Raiškiojo teksto formato (RTF) į „paprasto teksto“ formatą ir kad kai kurios formatavimo parinktys ir vaizdai nėra tinkamai išsaugomi. Galite nepaisyti šio įspėjimo; HTML dokumentuose šios parinktys nenaudojamos.
   • .html ir .htm failai yra vienodi. Tai veikia.
2. Peržiūrėkite savo dokumentą naudodami naršyklę. Išsaugokite tuščią dokumentą, uždarykite jį, tada dukart spustelėkite dokumentą toje vietoje, kur jis buvo išsaugotas, kad jį vėl atidarytumėte. Dabar jūsų naršyklė turėtų atidaryti jūsų dokumentą kaip tuščią tinklalapį. Jei tai neveikia, vilkite failo piktogramą į savo naršyklės adreso juostą. Vėliau, jei redaguosite HTML dokumentą atlikdami šiame straipsnyje nurodytus veiksmus, grįšite į naršyklę ir patikrinsite, kaip atrodo kodo pakeitimai.
   • Pastaba: jūsų tinklalapis dar neprisijungęs. Puslapis nėra prieinamas kitiems ir norint jį išbandyti nereikia veikiančio interneto ryšio. Jūs tiesiog naudojate savo naršyklę „skaityti“ HTML dokumentą, tarsi tai būtų svetainė.
3. Supraskite, kas yra „žymos“. Žymos paskutiniame tinklalapyje nematomos, kaip įprasta teksto. Žymos nurodo jūsų naršyklei, kaip rodyti puslapį ir jo turinį. Pradinėje žymoje yra instrukcijos. Pavyzdžiui, ji gali nurodyti naršyklei tekstą rodyti paryškintu šriftu. Pabaigos žyma reikalinga naršyklei pasakyti, kur galioja instrukcijos: šiame pavyzdyje visas tekstas tarp pradžios ir pabaigos žymos yra paryškintas. Pabaigos žymos taip pat dedamos skliausteliuose, tačiau po pirmųjų skliaustų yra pasvirasis brūkšnys.
   • Rašykite skliausteliuose pradines žymas: tai yra pradžios diena>
   • Parašykite pabaigos žymes skliaustuose, bet po pirmųjų skliaustų padėkite pasvirąjį brūkšnį: /tai yra baigiamoji žyma>)
   • Kaip rašyti funkcines žymas, skaitykite vėliau straipsnyje. Atlikdami šį veiksmą, tiesiog turite prisiminti, kokiu būdu rašyti žymas:> ir />.
   • Kituose HTML kursuose žymos taip pat vadinamos „elementais“, o tekstas tarp atidaromosios ir uždaromos žymos taip pat vadinamas „elemento turiniu“.
4. Parašykite savo pirmąją žymą html>. Kiekvienas HTML dokumentas prasideda a html>žymą ir baigiasi a / html>žyma. Tai nurodo naršyklei, kad viskas tarp šių žymių parašyta HTML. Pridėkite šias žymas prie savo dokumento:
   • Rašykite html> dokumento viršuje.
   • Kelis kartus paspauskite Enter arba grįžkite, kad suteiktumėte sau vietos, tada parašykite / html>
   • Prisimink tave viskas šiame straipsnyje tarp šių dviejų žymių.
5. Padarykite galvos> dalį savo dokumento. Tarp žymių html> ir / html> rašote a galva>pradžios žyma ir a / galva>-galinė žyma. Vėl palikite šiek tiek vietos tarp šių žymių. Viskas, kas parašyta tarp šių žymių, nebus matoma pačiame tinklalapyje. Išbandykite šiuos veiksmus ir patikrinkite, ar matote, kur rodoma informacija:
   • Parašykite tarp žymių „head>“ ir „/ head“: pavadinimas> ir / pavadinimas>
   • Tarp žymių pavadinimas> ir / pavadinimas> rašote: Kaip išmokti HTML (su paveikslėliais) - wikiHow.
   • Išsaugokite dokumentą ir atidarykite jį naršyklėje (arba išsaugokite dokumentą ir atnaujinkite naršyklės puslapį, jei puslapis vis dar buvo atidarytas). Ar matote tai, ką ką tik parašėte, puslapio viršuje, virš adreso juostos?
6. Sukurkite turinį> skyrių. Visa kita šiame pradedančiojo dokumente yra skiltyje „body>“ ir ji rodoma tinklalapyje. Po žymė / galva>, bet Priešais tag / html>, kurį rašote kūnas> ir / body>. Viskas, ką aptariame toliau šiame straipsnyje, dedame tarp kūno žymių. Dabar turėtumėte turėti dokumentą, kuris atrodytų taip (be ženklų):
   • html>
   • galva>
   • pavadinimas> išmokti HTML - wikiHow / title>
   • / galva>
   • kūnas>
   • / body>
   • / html>
7. Pridėkite įvairių stilių teksto. Dabar atėjo laikas pradėti rašyti tai, kas iš tikrųjų bus matoma naršyklėje! Viskas, ką parašysite turinio žymose, bus matoma naršyklėje, kai išsaugosite pakeitimus ir atnaujinsite naršyklės puslapį. Rašykite ne kažkas su ženklais ir >nes jūsų naršyklė tai interpretuos kaip HTML instrukciją, o ne paprastą tekstą. Parašykite, pavyzdžiui Labas pasauli! (Anglų k. „Hello world!“, Tai yra visuotinis standartinis tekstas, kaip pirmas pavyzdys bet kuriame programavimo kurse tam tikra programavimo kalba) ar kažkas kitas, ir prieš tekstą bei po jo įdėkite šias žymas ir pažiūrėkite, kas nutiks:
   • em> Sveikas pasauli! / em> atrodo kursyvu tekstas: Labas pasauli!
   • stiprus> Sveikas pasaulis! / stiprus> atrodo kaip paryškintas tekstas: Labas pasauli!
   • s> Sveikas pasauli! / s> atrodo kaip perbrauktas tekstas: Labas pasauli!
   • sup> Sveikas pasaulis! / sup> atrodo kaip viršutinis indeksas:
   • sub> Sveikas pasauli! / sub> atrodo kaip antraštė: _{Labas pasauli!}
   • Išbandykite derinius: kaip mato em> stiprus> Sveikas pasaulis! / stiprus> / em> išeik?
8. Padalinkite savo tekstą į pastraipas. Jei į savo dokumentą įdėsite skirtingas teksto eilutes, pamatysite, kad visos eilutės dedamos viena po kitos. Jūs turite patys užprogramuoti naujas eilutes ir tuščias eilutes:
   • p> Tai yra atskiras skyrius. / p>
   • Šis sakinys yra pirmoje eilutėje, o šis sakinys - kitoje.
     Tai yra pirmoji mūsų sutikta žymė, kuriai nereikia pabaigos žymos! Tokią žymą mes vadiname viena tuščia žyma.
   • Sukurkite antraštes, kad skyrių pavadinimai būtų aiškūs:
     h1> antraštė / h1>: kuo didesnė antraštė
     h2> antraštė / h2> (2 lygio antraštė)
     h3> antraštė / h3> (3 lygio antraštė)
     h4> antraštė / h4> (4 lygio antraštė)
     h5> antraštė / h5> (kuo mažesnė antraštė)
9. Sužinokite, kaip sudaryti sąrašus. Yra keli būdai, kaip sukurti sąrašus tinklalapyje. Išbandykite šiuos metodus, kad sužinotumėte, kas jums labiausiai patinka. Atkreipkite dėmesį, kad viena žymių pora dedama aplink visą sąrašą (pvz., Ul> ir / ul> žymos netvarkytiems sąrašams) ir kad aplink kiekvieną sąrašo elementą dedama skirtinga žymų pora, pvz., Li> ir / li> .
   • Norėdami sukurti sąrašus su ženkleliais, naudokite šį kodą:
     ul> li> Vienas daiktas / li> li> Kitas daiktas / li> li> Kitas daiktas / li> / ul>
   • Arba naudokite šį kodą, kad sukurtumėte sunumeruotus sąrašus:
     1 punktas / li> li> 2 punktas / li> li> 3 punktas / li> / ol>
   • Arba naudokite šį kodą, kad sukurtumėte vadinamąjį apibrėžimų sąrašą:
     dl> dt> kava / dt> dd> - karštas gėrimas / dd> dt> pienas / dt> dd> - šaltas gėrimas / dd> / dl>
10. Padarykite savo puslapį patrauklesnį naujomis linijomis, horizontaliomis linijomis ir vaizdais. Dabar atėjo laikas į savo puslapį įtraukti kitus dalykus. Išbandykite šias žymas (vaizdas turi būti paskelbtas internete, kad galėtumėte naudoti nuorodą į paveikslėlį):
    • Įterpti eilutę: br> arba hr>
    • Įterpti vaizdus: img src = "jusu_vaizdo_url_ofonas">
11. Įterpkite nuorodas į kitas puslapio vietas. Šį kodą taip pat galite naudoti norėdami susieti su kitais puslapiais ir svetainėmis, tačiau kadangi jūs dar neturite svetainės, mes sutelksime dėmesį į „inkarus“, tai yra konkrečios vietos puslapyje, į kurias galite susieti:
    • Pirmiausia sukurkite inkarą su žyma to puslapio puslapyje, į kurį norite susieti. Suteikite inkarui aiškų, lengvai įsimenamą pavadinimą:
      
      a name = "Patarimai"> Tai yra tekstas, aplink kurį dedate savo inkarą. / a>
    • Norėdami susieti su savo inkaru ar kitu tinklalapiu, naudokite žymą href>:
      
      a href = "tinklalapio URL arba inkaro pavadinimas šiame puslapyje"> Parašykite tekstą ar vaizdą, rodomą kaip nuorodą čia. / a>
    • Norėdami susieti su inkaru kitame puslapyje, po URL pridėkite simbolį #, po kurio nurodysite inkaro pavadinimą. Pvz., Http://www.wikihow.com/HTML-leren#Tips pateksite tiesiai į šio puslapio skiltį „Patarimai“.

2 dalis iš 2: Išplėstinio HTML mokymasis

1. Sužinokite apie atributus. Atributai dedami žymoje ir naudojami papildomiems „elemento turinio“ koregavimams tarp pradžios ir pabaigos žymos. Jie niekada nestovi vieni. Jie parašyti taip: name = "value". vardas žymi atributo pavadinimą (pavyzdžiui, „spalva“) ir vertė apibūdina šį konkretų atvejį (pvz., „raudona“).
   • Jei atidžiai peržiūrėjote ankstesnę šio straipsnio dalį, jau susidūrėte su atributais. Žyma img> naudoja atributą src, inkaras naudoja atributą vardas ir nuorodose naudojamas atributas href. Galite pasakyti, kad jie visi yra dydžio ___='___’ Sekti.
2. Eksperimentuokite su HTML lentelėmis. Norėdami sukurti lentelę ar diagramą, jums reikia kelių žymų:
   • Pradėkite nuo lentelės žymų („table“ angliškai) aplink visą lentelę:lentelė> / lentelė>
   • Įdėkite žymas aplink kiekvienos eilutės turinį: tr>
   • Pirmoje eilutėje įdėkite stulpelių antraštes: th>
   • Vieta langelių iš eilės: td>
   • Tai pavyzdys, kaip visa tai susideda:
     
     lentelė> tr> th> 1 stulpelis: mėnuo / th> th> 2 stulpelis: sutaupyti pinigai / th> / tr> tr> td> sausis / td> td> 100 € / td> / tr> / lentelė>
3. Sužinokite apie kitas žymes, naudojamas antraštės skiltyje. Jūs jau išmokote žymos galvutę>, kurią dedate kiekvieno dokumento pradžioje. Be pavadinimo> žymos, antraštės skiltyje gali būti ir kitų žymų:
   • Kuriant naudojamos metažymės metaduomenys apie tinklalapį. Šiuos duomenis paieškos sistemos naudoja tinklalapių skirstymui į kategorijas. Kad jūsų puslapis būtų matomas paieškos sistemoms, galite įdėti vieną ar daugiau metažymų (pabaigos žymos nebūtinos), kiekvienoje žymoje turi būti tiksliai vienas vardo ir turinio atributas, pavyzdžiui: meta name = "description" content = "įdėkite čia aprašymas ">; arba meta name = "keywords" content = "čia parašykite raktinių žodžių sąrašą, visada atskirtą kableliu">
   • nuoroda> žymos naudojamos norint susieti kitus failus su puslapiu. Paprastai naudojami CSS stiliaus lapams susieti su HTML puslapiais, šie puslapiai yra sukonstruoti naudojant kitokį kodą ir naudojami bendram puslapio stiliui nustatyti.
   • „script>“ žymos naudojamos susieti „javascript“ failus su HTML puslapiu. „Javascript“ leidžia pakeisti puslapį, jei vartotojas ką nors daro puslapyje.
4. Žaisk su HTML iš esamų puslapių. Tinklalapių šaltinio kodo peržiūra yra puikus būdas išplėsti HTML žinias. Dešiniuoju pelės mygtuku spustelėkite puslapį ir pasirinkite „Peržiūrėti šaltinį“, „Rodyti puslapio šaltinį“ ar pan. Sužinokite, ką daro tam tikra nežinoma žyma, arba ieškokite atsakymo internete.
   • Negalite redaguoti kitų žmonių svetainių, tačiau galite nukopijuoti HTML kodą į savo dokumentą ir juo žaisti, kad sužinotumėte, ką daro įvairūs pakeitimai. Pastaba: kadangi daugelyje svetainių naudojami CSS stiliaus lapai, gali būti, kad nematysite daugybės spalvų ar kitų stilių.
5. Sužinokite daugiau apie HTML skaitydami išsamesnius straipsnius. Internete yra daugybė išteklių, leidžiančių įsisavinti daugiau HTML žymių, tokių kaip „W3Schools“ ar „Codecademy“. Taip pat yra daugybė HTML knygų, tačiau įsitikinkite, kad naudojate naujausią leidimą, nes HTML standartas laikas nuo laiko keičiasi. Įvaldę HTML gerą lygį, galite kreiptis į CSS, kad galėtumėte geriau kontroliuoti savo tinklalapio dizainą ir stilių. Po to kitas žingsnis paprastai yra „javascript“.

Patarimai

• Gali būti naudinga internete surasti paprastą internetinį puslapį ir tada pradėti blaškytis su kodu. Pabandykite perkelti tekstą, pakeisti šriftą, pakeisti vaizdus, ​​ko tik norite!
• Galite naudoti užrašų knygelę, norėdami užrašyti kodą, kad turėtumėte ką atsikvėpti, jei nė akimirkos to neprisimenate. Taip pat galite atsispausdinti šį puslapį ir pasilikti jį kaip nuorodą.
• Šiuo metu interneto svetainėse vis dažniau naudojama XML ir RSS. Kodas gali atrodyti nepasiekiamas žmogaus akiai, ypač žiūrint šaltinio kode, tačiau funkcionalumas gali būti naudingas.
• HTML naudojamos žymos neskiria didžiųjų ir mažųjų raidžių, tačiau pagal numatytuosius nustatymus reikia naudoti mažąsias raides (kaip mes darome šiame straipsnyje). Žymos yra labai rekomenduojamos mažosiomis raidėmis, taip pat suderinamumui su XHTML.

Įspėjimai

• Kai kurios žymos nebenaudojamos ir buvo pakeistos kitomis žymomis, kurios daro tą patį, tačiau dažnai siūlo daugiau galimybių.
• Jei norite įsitikinti, kad jūsų puslapis atitinka HTML standartą, eikite į W3 svetainę ir išbandykite kodą pagal dabartinį standartą. Daugelis žymių paseno ir buvo pakeistos žymomis, kurios geriau veikia šiuolaikinėse naršyklėse.

Būtinybės

• Teksto apdorojimo programa, pvz., „Notepad“ („Windows“) arba „Text Editor“ („Mac“).
• popieriaus ar sąsiuvinio lapą (neprivaloma)
• Programa, specialiai sukurta HTML rašymui, pvz., „Notepad ++“, skirta „Windows“, arba „TextWrangler“, skirta „Mac“ (neprivaloma)