Sisu

• Astuda
• 1. osa 2: HTML-i põhitõdede õppimine
• 2. osa 2: arenenud HTML-i õppimine
• Näpunäited
• Hoiatused
• Vajadused

HTML on lühend Hüperteksti märgistuskeel, see on kood või keel mida kasutatakse veebisaitide loomiseks. See võib tunduda keeruline, kui te pole kunagi varem programmeerinud, kuid selle proovimiseks on vaja vaid lihtsat tekstitöötlusprogrammi ja Interneti-brauserit. Võite HTML-i ära tunda foorumitest, veebiprofiilidest või wikiHow artiklitest. HTML on kasulik ressurss kõigile Interneti-kasutajatele ja HTML-i õppimine võib võtta vähem aega, kui võite arvata.

Astuda

1. osa 2: HTML-i põhitõdede õppimine

1. Avage HTML-dokument. HTML-dokumentide loomiseks saab kasutada enamikku tekstitöötlusprogramme, sealhulgas Notepad või Word for Windows ja Text Editor for Mac. Avage uus dokument ja valige ülemisest menüüst Fail → Salvesta nimega, et oma dokument veebilehtena salvestada, või muutke faililaiendiks ".doc", ".rtf" või muu muuks ".html" või ".htm ".
   • Nüüd võite näha hoiatust, mis kinnitab, et teie dokumenti muudetakse rikka teksti vormingust (RTF) vorminguks "lihttekst" ning mõnda vormindamisvalikut ja pilti ei salvestata õigesti. Võite seda hoiatust eirata; HTML-dokumendid ei kasuta neid suvandeid.
   • .html ja .htm failid on samad. Mõlemad toimivad.
2. Vaadake oma dokumenti brauseris. Salvestage oma tühi dokument, sulgege see ja topeltklõpsake uuesti avamiseks dokumendil kohas, kuhu see salvestati. Teie brauser peaks nüüd dokumendi tühja veebilehena avama. Kui see ei aita, lohistage faili ikoon brauseri aadressiribale. Hiljem, kui muudate oma HTML-dokumenti selles artiklis toodud juhiseid järgides, jätkate brauserisse naasmist, et kontrollida, kuidas koodi muudatused välja näevad.
   • Märkus: teie veebileht pole veel võrgus. Leht pole teistele ligipääsetav ja selle testimiseks pole vaja toimivat Interneti-ühendust. HTML-dokumendi "lugemiseks" kasutate lihtsalt oma brauserit, nagu see oleks veebisait.
3. Mõista, mis on "sildid". Sildid pole viimasel veebilehel nähtavad, nagu tavaline tekst. Sildid ütlevad teie brauserile, kuidas lehte ja lehe sisu kuvada. Lähtesilt sisaldab juhiseid. Näiteks võib see käskida brauseril teksti rasvases kirjas kuvada. Lõpumärgendit on vaja brauserile teatamiseks, kus juhised kehtivad: selles näites on kogu algus- ja lõpumärgendi vaheline tekst rasvane. Lõppmärgised paigutatakse ka sulgudesse, kuid esimesse sulgudesse järgneb kaldkriips.
   • Kirjutage sulgudesse algusmärgendid: see on alguspäev>
   • Kirjutage sulgudesse sulgud, kuid asetage esimese sulgude järele kaldkriips: /see on sulgemissilt>)
   • Funktsionaalsete siltide kirjutamise kohta lugege hiljem artiklist. Selles etapis peate lihtsalt meeles pidama, millisel viisil sildid kirjutada:> ja />.
   • Teistes HTML-kursustes nimetatakse silte ka "elementideks" ning teksti avamise ja sulgemise vahel nimetatakse ka "elementide sisuks".
4. Kirjutage oma esimene html> silt. Iga HTML-dokument algab tähega html>silt ja lõpeb tähega / html>silt. See ütleb brauserile, et kõik nende siltide vahele on kirjutatud HTML-is. Lisage oma dokumendile need sildid:
   • Kirjutage html> oma dokumendi ülaosas.
   • Vajutage mitu korda sisestusklahvi või naaske, et anda endale ruumi, seejärel kirjutage / html>
   • Mäletan sind kõike selles artiklis nende kahe sildi vahel.
5. Tehke oma dokumendi pea> osa. Siltide html> ja / html> vahele kirjutate a pea>stardimärgis ja a / pea>-lõpumärgend. Nende siltide vahel tehke uuesti ruumi. Kõik nende siltide vahele kirjutatu ei ole veebilehel endal nähtav. Proovige järgmisi samme ja vaadake, kas näete, kus teave kuvatakse:
   • Kirjutage siltide head> ja / head> vahele: pealkiri> ja / pealkiri>
   • Siltide pealkiri> ja / title> vahele kirjutate: Kuidas õppida HTML-i (piltidega) - wikiHow.
   • Salvestage dokument ja avage see brauseris (või salvestage dokument ja värskendage lehte brauseris, kui leht oli endiselt avatud). Kas näete lehe ülaservas, aadressiriba kohal, mida just kirjutasite?
6. Looge jaotis keha>. Kõik muu selles algaja dokumendis on jaotises body> ja see kuvatakse veebisaidil. Pärast silt / pea>, kuid ees teie kirjutatud silt / html> keha> ja / keha>. Kõik, mida selles artiklis edasi arutame, asetame kehamärgendite vahele. Teil peaks olema nüüd selline dokument (ilma täppideta):
   • html>
   • pea>
   • pealkiri> õppida HTML-i - wikiHow / title>
   • / pea>
   • keha>
   • / keha>
   • / html>
7. Lisage teksti erinevates stiilides. Nüüd on aeg hakata kirjutama midagi, mis on brauseris tegelikult nähtav! Kõik, mida kirjutate kehamärgendites, on brauseris nähtav pärast muudatuste salvestamist ja lehe värskendamist brauseris. Kirjutage mitte midagi märkidega ja >kuna teie brauser tõlgendab seda lihtteksti asemel HTML-juhistena. Kirjuta näiteks Tere, Maailm! (Inglise keeles "Hello world!", See on üldine standardtekst, mis on konkreetse programmeerimiskeele mis tahes programmeerimiskursuse esimene näide) või midagi muud, ning pange teksti ette ja järele järgmised märgendid ja vaadake, mis juhtub:
   • em> Tere maailm! / em> näeb välja nagu kursiivkirjas: Tere, Maailm!
   • tugev> Tere maailm! / tugev> näeb välja paks tekst: Tere, Maailm!
   • s> Tere maailm! / s> näeb välja nagu läbikriipsutatud tekst: Tere, Maailm!
   • sup> Tere maailm! / sup> näeb välja nagu ülaindeks:
   • sub> Tere maailm! / sub> näeb välja nagu pealdis: _{Tere, Maailm!}
   • Proovige kombinatsioone: kuidas näeb em> tugev> Tere maailm! / tugev> / em> kao välja?
8. Jagage oma tekst lõikudeks. Kui lisate oma dokumendile erinevad tekstiread, näete, et kõik read on üksteise järel paigutatud. Uued read ja tühjad read peate ise programmeerima:
   • p> See on eraldi jaotis. / p>
   • See lause on esimesel real ja see lause järgmisel real.
     See on esimene silt, millega kokku puutusime, mis ei vaja lõppmärgist! Nimetame sellist silti üheks tühi silt.
   • Jaotiste nimede selgeks muutmiseks looge päised:
     h1> päis / h1>: suurim võimalik päis
     h2> päis / h2> (kahetasandiline päis)
     h3> päis / h3> (kolmeastmeline päis)
     h4> päis / h4> (nelja taseme päis)
     h5> päis / h5> (võimalikult väike päis)
9. Siit saate teada, kuidas loendeid koostada. Veebilehel loendite loomiseks on mitu võimalust. Proovige järgmisi meetodeid, et teada saada, mis teile kõige rohkem meeldib. Pange tähele, et üks loendipaar paigutatakse kogu loendi ümber (näiteks järjestamata loendite sildid ul> ja / ul>) ning et loendi iga üksuse, näiteks li> ja / li> ümber on paigutatud erinev siltide paar. .
   • Täppidega loendite loomiseks kasutage järgmist koodi:
     ul> li> Üks kirje / li> li> Teine kirje / li> li> Teine kirje / li> / ul>
   • Või see kood nummerdatud loendite loomiseks:
     ol> li> Punkt 1 / li> li> Punkt 2 / li> li> Punkt 3 / li> / ol>
   • Või see kood nn määratluste loendi loomiseks:
     dl> dt> Kohv / dt> dd> - Kuum jook / dd> dt> Piim / dt> dd> - Külm jook / dd> / dl>
10. Muutke oma leht uute joonte, horisontaalsete joonte ja piltidega atraktiivsemaks. Nüüd on aeg hakata oma lehele lisama muid asju. Proovige järgmisi silte (pilt peab olema veebis postitatud, et saaksite pildi linki kasutada):
    • Sisesta rida: br> või hr
    • Sisesta pildid: img src = "teie_pildi_url_ofotod">
11. Lisage lingid lehe teistesse kohtadesse. Selle koodi abil saate linkida ka teistele lehtedele ja veebisaitidele, kuid kuna teil pole veel veebisaiti, keskendume "ankrutele", mis on konkreetsed kohad lehel, millele saate linkida:
    • Kõigepealt looge ankur sildiga a> selle lehe punktis, kuhu soovite linkida. Pange ankrule selge nimi, mida on lihtne meelde jätta:
      
      a name = "Nõuanded"> See on tekst, mille ümber ankur asetate. / a>
    • Kasutage märgendit href>, et linkida oma ankur või mõni muu veebileht:
      
      a href = "Sellel lehel asuva veebilehe URL või ankru nimi"> Kirjutage lingina kuvatud tekst või pilt siia. / a>
    • Teise lehe ankru linkimiseks lisage URL-i järele # märk, millele järgneb ankru nimi. Näiteks viib http://www.wikihow.com/HTML-leren#Tips teid otse selle lehe jaotisse „Nõuanded”.

2. osa 2: arenenud HTML-i õppimine

1. Lisateave atribuutide kohta. Atribuudid paigutatakse märgendisse ja neid kasutatakse alg- ja lõpumärgendi vahelise "elemendi sisu" täiendavate kohanduste tegemiseks. Nad ei seisa kunagi üksi. Need on kirjutatud järgmiselt: nimi = "väärtus". nimi tähistab atribuudi nime (näiteks "värv") ja väärtus kirjeldab seda konkreetset juhtumit (nt "punane").
   • Kui olete selle artikli eelmises osas tähelepanelikult uurinud, olete atribuute juba kohanud. Silt img> kasutab atribuuti src, ankur kasutab atribuuti nimi ja lingid kasutavad atribuuti href. Võite öelda, et nad kõik on suuruses ___='___’ järgima.
2. Katsetage HTML-tabelitega. Tabeli või graafiku koostamiseks vajate mitut silti.
   • Alustage tabeli siltidega (inglise keeles "table") kogu laua ümber:tabel> / tabel>
   • Asetage märgendid iga rea ​​sisu ümber: tr>
   • Pange veerupäised esimesse ritta: th>
   • Asetage lahtrid järjestikustesse ridadesse: td>
   • See on näide sellest, kuidas see kõik kokku saab:
     
     tabel> tr> th> veerg 1: kuu / th> th> veerg 2: kokkuhoitud raha / th> / tr> tr> td> jaanuar / td> td> 100 € / td> / tr> / tabel>
3. Tutvuge teiste jaotises kasutatud siltidega. Te olete juba õppinud tag head>, mille panete iga dokumendi algusesse. Lisaks pealkirjale> silt võib pealkirja jaotises olla ka teisi silte:
   • Meta-silte kasutatakse loomiseks metaandmed veebilehe kohta. Neid andmeid kasutavad otsingumootorid veebilehtede kategoriseerimiseks. Selleks, et teie leht oleks otsingumootoritele nähtav, võite paigutada ühe või mitu metamärgendit (lõpumärgendid pole vajalikud), iga silt peab sisaldama täpselt ühte nime- ja sisutunnust, näiteks: meta name = "description" content = "siia kirjeldus ">; või meta name = "keywords" content = "kirjuta siia märksõnaloend, mis on alati eraldatud komaga">
   • link> silte kasutatakse teiste failide linkimiseks lehele. Tavaliselt kasutatakse CSS-i stiililehtede seostamiseks HTML-lehtedega, need lehed on koostatud erinevat tüüpi koodidega ja neid kasutatakse lehe üldise stiili määramiseks.
   • script> silte kasutatakse javascripti failide seostamiseks HTML-lehega. Javascript võimaldab lehte muuta, kui kasutaja lehel midagi teeb.
4. Mängige HTML-iga olemasolevatelt lehtedelt. Veebilehtede lähtekoodi vaatamine on suurepärane võimalus HTML-teadmiste laiendamiseks. Paremklõpsake lehel ja valige "Kuva allikas", "Kuva lehe allikas" või muu sarnane. Siit saate teada, mida teeb konkreetne silt, mida te ei tea, või otsige vastust veebis.
   • Te ei saa teiste veebisaite redigeerida, kuid võite HTML-koodi oma dokumenti kopeerida ja sellega ringi vaadata, et näha, mida erinevad kohandused teevad. Märkus. Kuna paljud veebisaidid kasutavad CSS-i stiililehti, ei pruugi te paljusid värve ega muid stiile näha.
5. HTML-i kohta saate lisateavet põhjalikumatest artiklitest. Internetis on palju ressursse, et hallata rohkem HTML-silte, näiteks W3Schools või Codecademy. Saadaval on ka palju HTML-raamatuid, kuid veenduge, et kasutaksite hiljutist väljaannet, kuna HTML-standard aeg-ajalt muutub. Kui olete HTML-i heal tasemel omandanud, võite pöörduda CSS-i poole, et oma veebisaidi kujundust ja stiili paremini kontrollida. Pärast seda on järgmine samm tavaliselt javascript.

Näpunäited

• Võib olla kasulik leida Internetist lihtne veebileht ja hakata siis koodiga jamama. Proovige teksti liigutada, fondi muuta, pilte muuta, mida iganes soovite!
• Võite märkmiku abil koodi üles kirjutada, nii et teil oleks midagi tagasi kukkuda, kui te seda hetkeks ei mäleta. Saate selle lehe ka printida ja alles jätta.
• XML-i ja RSS-i kasutatakse tänapäeval veebisaitidel üha enam. Kood võib inimsilmale tunduda kättesaamatu, eriti lähtekoodis vaadatuna, kuid funktsionaalsus võib olla kasulik.
• HTML-is kasutatud märgendid ei ole tõstutundlikud, kuid vaikimisi kasutatakse väiketähti (nagu me selles artiklis teeme). Märgendite väiketähed on väga soovitatavad, ka XHTML-iga ühilduvuse jaoks.

Hoiatused

• Mõnda silti enam ei kasutata ja see on asendatud teiste siltidega, mis teevad sama, kuid pakuvad sageli rohkem võimalusi.
• Kui soovite veenduda, et teie leht vastab HTML-standardile, minge W3 veebisaidile, et testida koodi kehtiva standardiga. Paljud sildid on vananenud ja need on asendatud siltidega, mis töötavad paremini kaasaegsetes brauserites.

Vajadused

• Tekstitöötlusprogramm, näiteks Notepad (Windows) või Text Editor (Mac).
• paberileht või märkmik (valikuline)
• Spetsiaalselt HTML-i kirjutamiseks loodud programm, näiteks Notepad ++ for Windows või TextWrangler for Mac (valikuline)