Kuidas õppida HTML -i

Sisu

Sammud
Osa 1 /2: HTML -i põhitõdede õppimine
Osa 2: Täiustatud HTML
Näpunäiteid
Hoiatused
Mida sul vaja on

HTML on inglise keele lühend Hüperteksti märgistuskeel (Hüperteksti märgistuskeel). See on kood või keel, milles luuakse saitide põhimärgistus. Õppimine võib tunduda hirmutav, kui te pole kunagi programmeerinud, kuid tegelikult on alustamiseks vaja ainult lihtsat tekstiredaktorit ja Interneti -brauserit. Võite isegi ära tunda mõningaid näiteid HTML -märgistusest, millega olete kohanud Interneti -foorumeid, kohandatud kohandatud lehti või wikiHow artikleid. HTML on kasulik tööriist igale Interneti -kasutajale ja põhitõdede õppimine võtab vähem aega, kui arvate.

Sammud

Osa 1 /2: HTML -i põhitõdede õppimine

1 Avage HTML -dokument. Enamikku tekstiredaktoreid (Notepad või Notepad ++ Windowsile, TextEdit Macile, gedit GNU / Linuxile) saab kasutada HTML -failide genereerimiseks. Looge uus dokument ja salvestage see valikuga Fail → Salvesta nimega veebilehe vormingus või muutke faililaiendiks .doc, .rtf või muu laiendi asemel .html või .htm.
- Võite saada hoiatuse, et fail salvestatakse RTF -vormingu asemel tavalise tekstina või vormindamist ja pilte ei salvestata. See sobib; HTML -i jaoks pole neid valikuid vaja.
2 Avage loodud fail brauseris. Salvestage tühi fail, leidke see oma arvutist ja topeltklõpsake selle avamiseks. Brauseris peaks avanema tühi leht. Kui ei, lohistage fail brauseri aadressiribale. HTML -faili redigeerides saate muudatuste nägemiseks seda lehte värskendada.
- Pange tähele, et sel viisil ei loo te veebisaiti Internetis. Teised inimesed ei pääse sellele lehele juurde ja te ei vaja kohaliku lehe testimiseks Interneti -ühendust. Brauser tõlgendab lihtsalt HTML -koodi, lugedes seda nii, nagu oleks tegemist veebisaidiga.
3 Saate aru, mis on märgistusmärgendid. Erinevalt tavalisest tekstist ei ilmu sildid lehele. Selle asemel ütlevad nad brauserile, kuidas lehte ja selle sisu kuvada. Silt "avamine" sisaldab juhiseid. Näiteks võib see brauserile öelda, et tekst tuleks kuvada kujul julge... Samuti vajab see märget "lõpp", et näidata brauserile, kus juhis lõpeb. Selles näites kuvatakse algus- ja lõppmärgiste vaheline tekst paksus kirjas. Sildid on kirjutatud ebavõrdsete märkide sisse, kuid lõpusilt algab kaldkriipsuga.
- Algusilt on kirjutatud ebavõrdsuse märkide vahele: ava silt>
- Lõppmärgis asetatakse sildi deskriptori (nimi) ette kaldkriips: /lõpusilt>
- Lugege edasi, et teada saada, kuidas erinevaid silte kasutatakse. Selle sammu jaoks peate lihtsalt meeles pidama salvestusvormingut. Sildid kirjutatakse ebavõrdsuse märkide vahele:> ja />
- Mõnes õpetuses nimetatakse HTML -silte elementideks ning ava- ja lõpumärgendite vahelist teksti elementide sisuks.
4 Tippige redaktorisse html> silt. Iga HTML -fail peab algama märgendiga html> ja lõpetage sildiga / html>... Need sildid ütlevad brauserile, et kogu siltide vaheline sisu on HTML -is. Lisage oma dokumendile järgmised sildid:
- Sageli algavad HTML -failid reaga ! DOCTYPE html>mis tähendab, et brauserid peavad kogu faili HTML -vormingus ära tundma. See rida pole vajalik, kuid see võib aidata teil ühilduvusprobleemide tõrkeotsingut teha.
- Vali html> dokumendi ülaosas.
- Mitme tühja rea loomiseks vajutage mitu korda klahvi Enter või Return, seejärel tippige / html>
- mäleta seda tervik selles artiklis loodud kood tuleb kirjutada nende kahe sildi vahele.
5 Looge failis pea> jaotis. Looge märgendite html> ja / html> vahele algusmärgend pea> ja sulgemissilt / pea>... Lisage nende vahele mõned tühjad read. Siltide head> ja / head> vahele kirjutatud sisu lehel endal ei kuvata. Järgige neid samme ja näete, milleks see silt on mõeldud:
- Kirjutage siltide head> ja / head> vahele pealkiri> ja / pealkiri>
- Pealkirja> ja / pealkiri> siltide vahele kirjutage Kuidas õppida HTML -i - wikiHow.
- Salvestage muudatused ja avage fail brauseris (või värskendage lehte, kui fail on juba avatud). Kas näete aadressiriba kohal lehe pealkirjas olevat teksti?
6 Loo keha> jaotis. Kõik muud selles näites olevad sildid ja tekst on kirjutatud põhiosasse, mille sisu kuvatakse lehel. Pärast sulgemissilt / pea>, kuid enne tag / html> lisage silte keha> ja / keha>... Selle artikli ülejäänud osas tehke tööd kehaosaga. Teie fail peaks välja nägema umbes selline:
html>
pea>
title> Kuidas HTML -i õppida - wikiHow / title>
/ pea>
keha>
/ keha>
/ html>
7 Lisage teksti, kasutades erinevaid stiile. On aeg lisada lehele tõeline sisu! Kõik, mida kirjutate keha siltide vahele, kuvatakse lehel pärast brauseris värskendamist. Ära kasuta sümbolid või >kuna brauser püüab tõlgendada sisu teksti asemel märgendina. Kirjutage Tere! (või mis iganes teile meeldib), siis proovige need sildid teksti lisada ja vaadake, mis juhtub:
- em> Tere kõigile! / em> muudab teksti "kursiiviks": Tere!
- tugev> Tere kõigile! / tugev> muudab teksti "paksuks": Tere!
- s> Tere kõigile! / s> läbikriipsutatud tekst: ~~Tere!~~
- sup> Tere kõigile! / sup> kuvab fondi ülaindeksina:
- sub> Tere kõigile! / sub> kuvab fondi alamindeksina: _Tere!
- Proovige koos erinevaid silte. Kuidas see välja näeb em> strong> Tere kõigile! / strong> / em>?
8 Jagage tekst lõikudeks. Kui proovite HTML -faili kirjutada mitu rida teksti, märkate, et reavahesid brauseris ei kuvata. Teksti lõikudeks jagamiseks peate lisama sildid:
- p> See on eraldi lõik. / p>
- Sellele lausele järgneb reavahe br> enne selle rea algust.
  See on esimene silt, mis ei vaja lõppmärgendit. Neid silte nimetatakse tühjadeks siltideks.
- Looge jaotiste pealkirjade kuvamiseks pealkirjad:
  h1> pealkirja tekst / h1>: suurim pealkiri
  h2> pealkirja tekst / h2> (teise taseme pealkiri)
  h3> pealkirja tekst / h3> (kolmanda taseme pealkiri)
  h4> pealkirja tekst / h4> (neljanda taseme pealkiri)
  h5> pealkirja tekst / h5> (väikseim pealkiri)
9 Õppige loendeid looma. Veebilehel loendite loomiseks on mitu võimalust. Proovige allolevaid valikuid ja otsustage, milline neist teile kõige rohkem meeldib. Pange tähele, et kogu loendi jaoks on vaja ühte paari silte (näiteks täpploendi puhul ul> ja / ul>) ning iga loendiüksus on esile tõstetud erineva märgendipaariga, näiteks li> ja / li>.
- Täpploend:
  ul> li> Esimene rida / li> li> Teine rida / li> li> Ja nii edasi / li> / ul>
- Nummerdatud loend:
  ol> li> Üks / li> li> Kaks / li> li> Kolm / li> / ol>
- Määratluste loend:
  dl> dt> Kohv / dt> dd> - kuum jook / dd> dt> Limonaad / dt> dd> - külm jook / dd> / dl>
10 Paigutage leht, kasutades ridade katkestused, horisontaaljooned ja Pildid. On aeg lisada lehele midagi muud kui tekst. Lisateabe saamiseks proovige järgmisi silte või järgige linke. Kasutage veebimajutusteenust, et luua link pildile, mille soovite postitada.
- Horisontaalne joon: hr>
- Lisa pilt: img src = "pildi link">
11 Lisage linke. Neid silte saate kasutada hüperlinkide loomiseks teistele lehtedele ja saitidele, kuid kuna teil pole veel veebisaiti, saate nüüd teada, kuidas luua ankurlinke, st linke teatud kohtadele lehel.
- Looge sildiga a> ankur, kuhu soovite lehel linkida. Mõtle välja selge ja meeldejääv nimi:
  
  a name = "Tips"> Tekst, millele lingite. / a>
- Kasutage märgendit href>, et luua suhteline link või link välisele ressursile.
  
  a href = "link lehele või ankru nimi lehel"> Tekst või pilt, mis toimib lingina. / a>
- Teisel lehel oleva suhtelise lingi linkimiseks lisage peamise lingi ja ankru nime taha # märk. Näiteks https://en.wikihow.com/learn-HTML#Tips viitab selle lehe näpunäidete jaotisele.

Osa 2: Täiustatud HTML

1 Tutvuge atribuutidega. Atribuudid kirjutatakse sildi sisse, mis näitab lisateavet. Atribuutide vorming on järgmine: nimi = "väärtus", kus tiitel määratleb atribuudi (nt värvi värvi atribuudi puhul) ja väärtus näitab selle väärtust (nt punane punase jaoks).
- Atribuute on tegelikult kasutatud eelmises HTML -i põhitõdes. Silt img> kasutab atribuuti src, suhtelingi ankrud kasutavad atribuuti nimija lingid kasutavad atribuuti href... Nagu olete juba märganud, kirjutatakse kõik atribuudid vormingus ___='___’.
2 Katsetage HTML -tabelitega. Tabeli loomine hõlmab erinevate siltide kasutamist. Võite katsetada või lugeda üksikasjalikumaid juhiseid.
- Tabelimärgendite loomine:tabel> / tabel>
- Lisage tabeli iga rea sisu siltidega: tr>
- Veeru pealkiri on määratletud sildiga: th>
- Lahtrid järgmistes ridades: td>
- Näide nende siltide kasutamisest:
  
  tabel> tr> th> 1. veerg: kuu / th> th> 2. veerg: sääst / th> / tr> tr> td> jaanuar / td> td> 5000 rubla / td> / tr> / tabel>
3 Lugege täiendavaid päisejaotise silte. Olete juba õppinud iga html -faili alguses oleva märgi head>. Peale pealkirja> sildi on selle jaotise jaoks ka teisi silte:
- Sisestage metasildid metaandmedmida otsingumootorid saidi indekseerimiseks kasutavad. Oma saidi otsingumootorites hõlpsamini leidmise hõlbustamiseks kasutage ühte või mitut avatavat metasilti (sulgemissilte pole vaja).Kasutage märgendi kohta ühte atribuuti ja ühte väärtust: meta name = "description" content = "page description">; või metanimi = "märksõnad" content = "komaga eraldatud märksõnad">
- Link> sildid, mis osutavad kolmandate osapoolte failidele, näiteks stiililehed (CSS), mis on loodud erinevat tüüpi kodeeringut kasutades ja võimaldavad teil muuta HTML-i lehte värvi, teksti joondamise ja paljude muude funktsioonide abil.
- Skript> sildid, mida kasutatakse JavaScripti failide lisamiseks lehele. Neid faile on vaja lehe interaktiivseks muutmiseks (vastuseks kasutaja toimingutele).
4 Katsetage teiste saitide HTML -koodi. Teiste veebilehtede lähtekoodi vaatamine on suurepärane viis HTML -i õppimiseks. Võite paremklõpsata lehel ja valida brauseri ülemisest menüüst Vaata allikat või midagi sarnast. Proovige välja mõelda, mida võõras silt teeb, või otsige Internetist selle kohta teavet.
- Kuigi te ei saa teiste saite redigeerida, saate lähtekoodi oma faili kopeerida, et hiljem siltidega katsetada. Pange tähele, et CSS -i märgistus ei pruugi olla saadaval ning värvid ja vorming võivad erineda.
5 Alustage üksikasjalikumate juhendite uurimist. Internetis on palju HTML -siltidele pühendatud saite, näiteks W3Schools või HTMLbook. Müügil on ka paberraamatuid, kuid proovige standardite muutudes ja arenedes leida uusimat väljaannet. Veelgi parem, haldage CSS -i, et saaksite oma saidi paigutuse ja välimuse üle palju rohkem kontrolli. Pärast CSS -i õppimist õpivad veebidisainerid tavaliselt JavaScripti.

Näpunäiteid

Notepad ++ on suurepärane tasuta programm, mis sarnaneb tavalisele Notepadile, kuid saate oma koodi veebis brauseris salvestada ja testida. (See toetab ka peaaegu kõiki keeli - HTML, CSS, Python, JavaScript jne.)
Leidke võrgust mõni lihtne leht, salvestage kood oma arvutisse ja katsetage sellega. Proovige teksti teisaldada, fonti muuta, pilte asendada - mida iganes!
Saate hoida märkmikku, kuhu sildid kirjutate, nii et need oleksid alati käepärast. Saate selle lehe ka printida ja sellele viidata.
Koodi kirjutades tehke seda hoolikalt, et teie ja teised inimesed sellest aru saaksid. Kasutage! - Sisestage kommentaar siia -> HTML -kommentaaride jaoks: need ei kajastu lehel, kuid on nähtavad koodidokumendis.
XML ja RSS koguvad populaarsust. XML- ja RSS -tehnoloogiat sisaldavate lehtede koodi on kogenematul kasutajal raskem lugeda ja mõista, kuid need tööriistad on üsna kasulikud.
HTML-i märgistusmärgendid ei ole tõstutundlikud, kuid soovitame nii standardimise kui ka XHTML-ühilduvuse korral kasutada ainult väiketähti (nagu käesoleva artikli näidetes).

Hoiatused

Mõned sildid on viimastel aastatel kasutusest kõrvaldatud ja need on asendatud uutega, mis annavad sama või mõningaid täiendavaid efekte.
Kui soovite oma lehte testida, minge W3 saidile ja vaadake kaasaegseid HTML -i nõudeid. HTML -i standardid muutuvad aja jooksul ja mõned sildid asendatakse uutega, mis toimivad tänapäevastes brauserites paremini.

Mida sul vaja on

Tekstiredaktor, näiteks Notepad (Windows) või TextEdit (Mac)
Paber / märkmik (mittevajalik)
HTML -redaktor, näiteks Notepad ++ (Windows) või TextWrangler (Mac) (mittevajalik)