Mësoni HTML

Përmbajtje

Të shkelësh
Pjesa 1 nga 2: Mësoni bazat e HTML
Pjesa 2 nga 2: Mësoni HTML të përparuar
Këshilla
Paralajmërime
Nevojat

HTML është shkurtesa për Gjuha e shënimit të hiper tekstit, është kodi ose gjuhe e cila përdoret për krijimin e faqeve të internetit. Mund të duket e komplikuar nëse nuk keni programuar kurrë më parë, por për ta provuar gjithçka që ju nevojitet është një program i thjeshtë për përpunimin e fjalëve dhe një shfletues interneti. Ju mund të njihni disa HTML nga forume, profile në internet ose artikuj nga wikiHow. HTML është një burim i dobishëm për këdo që përdor internetin, dhe mësimi i HTML mund të marrë më pak kohë sesa mund të prisni.

Të shkelësh

Pjesa 1 nga 2: Mësoni bazat e HTML

Hapni një dokument HTML. Shumica e programeve të përpunimit të tekstit, përfshirë Notepad ose Word për Windows dhe Editor Editor për Mac, mund të përdoren për të krijuar dokumente HTML. Hapni një dokument të ri dhe zgjidhni File → Save As nga menuja e sipërme për të ruajtur dokumentin tuaj si një faqe në internet, ose ndryshoni shtrirjen e skedarit nga ".doc", ".rtf" ose ndonjë gjë tjetër në ".html" ose ".htm ".
- Tani mund të shihni një paralajmërim që thotë se dokumenti juaj po ndryshohet nga Formati i Tekstit të Pasur (RTF) në formatin "teksti i thjeshtë" dhe se disa opsione dhe imazhe të formatimit nuk po ruhen siç duhet. Ju mund ta injoroni këtë paralajmërim; Dokumentet HTML nuk i përdorin këto mundësi.
- Skedarët .html dhe .htm janë të njëjtë. Të dyja funksionon.
Shikoni dokumentin tuaj me një shfletues. Ruani dokumentin tuaj të zbrazët, mbylleni atë dhe pastaj klikoni dy herë në dokumentin në vendin ku është ruajtur për ta hapur përsëri. Dokumenti juaj tani duhet të hapet nga shfletuesi juaj si një faqe e zbrazët në internet. Nëse kjo nuk funksionon, tërhiqni ikonën e skedarit në shiritin e adresave të shfletuesit tuaj. Më vonë, nëse ndryshoni dokumentin tuaj HTML duke ndjekur hapat në këtë artikull, do të vazhdoni të ktheheni te shfletuesi për të kontrolluar se si duken ndryshimet në kod.
- Shënim: faqja juaj në internet nuk është akoma në internet. Faqja nuk është e arritshme për të tjerët dhe nuk ju nevojitet një lidhje interneti që funksionon për ta provuar. Ju thjesht përdorni shfletuesin tuaj për të "lexuar" dokumentin HTML sikur të ishte një faqe në internet.
Kuptoni se çfarë janë "etiketat". Etiketat nuk janë të dukshme në faqen përfundimtare të internetit, siç mund të jetë teksti normal. Etiketat i tregojnë shfletuesit tuaj se si të shfaqë faqen dhe përmbajtjen në faqe. Etiketa fillestare përmban udhëzime. Për shembull, ai mund t'i tregojë shfletuesit që të shfaqë tekstin me shkronja të zeza. Etiketa fundore është e nevojshme për t'i treguar shfletuesit se ku zbatohen udhëzimet: në këtë shembull, i gjithë teksti midis etiketës fillestare dhe përfundimtare është i theksuar. Etiketat fundore vendosen gjithashtu brenda kllapave, por një prerje pas kllapave të para.
- Shkruani etiketat fillestare në kllapa: kjo është dita e fillimit>
- Shkruani etiketa fundore në kllapa, por vendosni një prerje pas kllapës së parë: /kjo është etiketa mbyllëse>)
- Lexoni më vonë në artikull si të shkruani etiketa funksionale. Në këtë hap, thjesht duhet të mbani mend se në cilën mënyrë të shkruani etiketat:> dhe />.
- Në kurse të tjera HTML, etiketat referohen gjithashtu si "elemente" dhe teksti midis etiketave hapëse dhe mbyllëse referohet gjithashtu si "përmbajtje elementesh".
Shkruaj etiketën tënde të parë html. Çdo dokument HTML fillon me një html>etiketoni dhe mbaron me një / html>etiketë Kjo i tregon shfletuesit se gjithçka midis këtyre etiketave është e shkruar në HTML. Shtoni këto etiketa në dokumentin tuaj:
- Shkruaj html> në krye të dokumentit tuaj.
- Goditni ose kthehuni disa herë për t'i dhënë vetes pak hapësirë, pastaj shkruani / html>
- Ju kujtoj gjithçka në këtë artikull midis këtyre dy etiketave.
Bëni kokën> pjesë të dokumentit tuaj. Midis etiketave html> dhe / html> ju shkruani një kokë>etiketa startuese dhe a / kokë>-shkruaj fund. Bëni përsëri hapësirë midis këtyre etiketave. Çdo gjë e shkruar midis këtyre etiketave nuk do të jetë e dukshme në vetë faqen e internetit. Provoni hapat e mëposhtëm dhe shikoni nëse mund të shihni se ku shfaqen informacionet:
- Shkruani midis etiketave kokë> dhe / kokë>: titulli> dhe / titulli>
- Midis etiketave titulli> dhe / titulli> ju shkruani: Si të mësoni HTML (me fotografi) - wikiHow.
- Ruani dokumentin dhe hapeni në një shfletues (ose ruani dokumentin dhe rifreskoni faqen në shfletues nëse faqja ishte akoma e hapur). A e shihni atë që sapo shkruat në krye të faqes, sipër shiritit të adresës?
Krijoni një seksion> trup. Gjithçka tjetër në këtë dokument fillestar vendoset në seksionin body> dhe tregohet në faqen e internetit. Pas etiketën / kokën>, por para etiketën / html> që ju shkruani trupi> dhe / trupi>. Gjithçka që diskutojmë më tej në këtë artikull, ne e vendosim midis etiketave të trupit. Tani duhet të keni një dokument që duket si ky (pa plumbat):
- html>
- kokë>
- titulli> mësoni HTML - wikiHow / title>
- / kokë>
- trupi>
- / trupi>
- / html>
Shtoni tekst në stile të ndryshme. Tani është koha që ju keni filluar të shkruani diçka që në të vërtetë do të jetë e dukshme në shfletuesin! Gjithçka që shkruani brenda etiketave të trupit do të jetë e dukshme në shfletues pasi të ruani ndryshimet dhe të rifreskoni faqen brenda shfletuesit. Shkruaj jo diçka me shenjat dhe >sepse shfletuesi juaj do ta interpretojë atë si udhëzim HTML në vend të tekstit të thjeshtë. Shkruaj për shembull Përshendetje Botë! (Anglisht për "Hello world!", Ky është teksti standard global si shembulli i parë në çdo kurs programimi në një gjuhë të veçantë programimi) ose diçka tjetër, dhe vendosni etiketat e mëposhtme para dhe pas tekstit dhe shikoni se çfarë ndodh:
- em> Përshëndetje botë! / em> duket si tekst i pjerrët: Përshendetje Botë!
- i fortë> Përshëndetje botë! / i fortë> duket si tekst i theksuar: Përshendetje Botë!
- s> Përshëndetje botë! / s> duket si një tekst i përpiluar: ~~Përshendetje Botë!~~
- sup> Përshëndetje botë! / sup> duket si mbishkrim:
- nën> Përshëndetje botë! / nën> duket si mbishkrim: _{Përshendetje Botë!}
- Provoni kombinimet: Si shikon em> i fortë> Përshëndetje botë! / i fortë> / em> Dil jashtë?
Ndani tekstin tuaj në paragrafë. Nëse vendosni rreshta të ndryshëm të tekstit në dokumentin tuaj, do të shihni se të gjitha linjat vendosen njëra pas tjetrës. Ju duhet të programoni linja të reja dhe linja boshe vetë:
- p> Ky është një seksion i veçantë. / p>
- Kjo fjali është në rreshtin e parë dhe kjo fjali në rreshtin tjetër.
  Ky është etiketimi i parë që hasim dhe nuk ka nevojë për një etiketë fundore! Ne e quajmë një etiketë të tillë etiketë boshe.
- Krijoni koka për të bërë të qartë emrat e seksioneve:
  h1> header / h1>: titulli më i madh i mundshëm
  h2> kokë / h2> (titulli me 2 nivele)
  h3> kokë / h3> (kryefjala e 3 niveleve)
  h4> header / h4> (kryefjala e 4 niveleve)
  h5> header / h5> (koka më e vogël e mundshme)
Mësoni si të bëni lista. Ka disa mënyra për të krijuar lista në një faqe në internet. Provoni metodat e mëposhtme për të gjetur se çfarë ju pëlqen më shumë. Vini re se një palë etiketash vendoset rreth të gjithë listës (siç janë ul> dhe / ul> etiketat për listat e parenditura) dhe se një palë etiketash të ndryshme vendosen rreth secilit send brenda listës, të tilla si li> dhe / li .
- Përdorni kodin e mëposhtëm për të krijuar lista me pika:
  ul> li> Një artikull / li> li> Një tjetër artikull / li> li> Një tjetër artikull / li> / ul>
- Ose ky kod për të krijuar lista të numëruara:
  ol> li> Pika 1 / li> li> Pika 2 / li> li> Pika 3 / li> / ol>
- Ose ky kod për të krijuar një të ashtuquajtur listë të përcaktimeve:
  dl> dt> Kafe / dt> dd> - Pije e nxehtë / dd> dt> Qumësht / dt> dd> - Pije e ftohtë / dd> / dl>
Bëni faqen tuaj më tërheqëse me linja të reja, linja horizontale dhe imazhe. Tani është koha të filloni të shtoni gjëra të tjera në faqen tuaj. Provoni etiketat e mëposhtme (imazhi duhet të postohet në internet në mënyrë që të mund të përdorni një lidhje me imazhin):
- Vendos një rresht: br>> ose orë>
- Vendos imazhe: img src = "the_url_of_age_agen tuaj">
Vendosni lidhje për në vendet e tjera në faqe. Ju gjithashtu mund ta përdorni këtë kod për t'u lidhur me faqe dhe faqe të tjera në internet, por meqenëse nuk keni një faqe në internet, ne do të përqendrohemi te "spirancat", të cilat janë vende specifike në faqen në të cilën mund të lidheni:
- Së pari, krijoni një spirancë me etiketën a> në pikën e faqes në të cilën dëshironi të lidheni. Jepni spirancën tuaj një emër të qartë që është i lehtë për tu mbajtur mend:
  
  a name = "Këshilla"> Ky është teksti rreth të cilit vendosni spirancën tuaj. / a>
- Përdorni etiketën href> për t'u lidhur me spirancën tuaj ose me një faqe tjetër në internet:
  
  një href = "url i faqes në internet ose emri i spirancës në këtë faqe"> Shkruani tekstin ose imazhin e treguar si lidhje këtu. / a>
- Për t'u lidhur me një spirancë në një faqe tjetër, shtoni karakterin # pas url, e ndjekur nga emri i spirancës tuaj. Për shembull http://www.wikihow.com/HTML-leren# Këshilla do t'ju çojë drejtpërdrejt në seksionin "Këshilla" në këtë faqe.

Pjesa 2 nga 2: Mësoni HTML të përparuar

Mësoni rreth atributeve. Atributet vendosen brenda etiketës dhe përdoren për të bërë rregullime shtesë të "përmbajtjes së elementit" midis etiketës fillestare dhe përfundimtare. Ata kurrë nuk qëndrojnë vetëm. Ato janë shkruar në mënyrën vijuese: emri = "vlera". emrin paraqet emrin e atributit (për shembull, "ngjyra") dhe vlera përshkruan këtë rast të veçantë (p.sh. "e kuqe").
- Nëse keni parë nga afër në pjesën e mëparshme të këtij artikulli, tashmë keni hasur atribute. Etiketimi img> përdor atributin src, një spirancë përdor atributin emrin dhe lidhjet përdorin atributin href. Mund të thuash që të gjithë kanë përmasa ___='___’ ta ndjek.
Eksperimentoni me tabelat HTML. Për të bërë një tabelë ose grafik, ju duhen disa etiketa:
- Filloni me etiketat e tryezës ("tabela" në anglisht) rreth tërë tryezës:tabela> / tabela>
- Vendosni etiketat rreth përmbajtjes së secilës rresht: tr>>
- Vendosni kokat e kolonave në rreshtin e parë: th>>
- Vendosni qelizat në rreshta të njëpasnjëshëm: td>
- Ky është një shembull se si e gjithë kjo bashkohet:
  
  tabela> tr> th> Kolona 1: Muaj / th> th> Kolona 2: Para të kursyera / th> / tr> tr> td> Janar / td> td> 100 € / td> / tr> / tryezë>
Mësoni etiketat e tjera të përdorura në seksionin e kokës. Ju tashmë keni mësuar kokën e etiketës>, të cilën e vendosni në fillim të secilit dokument. Përveç etiketës titulli>, mund të ketë etiketime të tjera në pjesën e kokës:
- Meta etiketat përdoren për të krijuar metadata rreth një faqe në internet. Këto të dhëna përdoren nga motorët e kërkimit për të kategorizuar faqet e internetit. Për ta bërë faqen tuaj të dukshme për motorët e kërkimit, mund të vendosni një ose më shumë etiketime meta (etiketat fundore nuk janë të nevojshme), secila etiketë duhet të përmbajë saktësisht një atribut të emrit dhe atribut të përmbajtjes, për shembull: meta name = "description" content = "vendosni këtu përshkrim ">; ose meta name = "keywords" content = "shkruaj një listë të fjalëve kyçe këtu, gjithmonë të ndara me presje">
- link> etiketat përdoren për të lidhur skedarët e tjerë në faqe. Zakonisht përdoren për të shoqëruar fletët e stilit CSS me faqet HTML, këto faqe janë ndërtuar me një lloj tjetër kodi dhe përdoren për të përcaktuar stilin e përgjithshëm të një faqeje.
- etiketat script> përdoren për të lidhur skedarët javascript me faqen HTML. Javascript lejon që faqja të ndryshojë nëse përdoruesi bën diçka në faqe.
Luaj me HTML nga faqet ekzistuese. Shikimi i kodit burimor të faqeve në internet është një mënyrë e shkëlqyeshme për të zgjeruar njohuritë tuaja HTML. Klikoni me të djathtën në faqe dhe zgjidhni "Shiko burimin", "Shfaq burimin e faqes" ose të ngjashme. Gjeni se çfarë bën një etiketë të veçantë që nuk e dini ose kërkoni në internet përgjigjen.
- Ju nuk mund të modifikoni faqet e internetit të njerëzve të tjerë, por mund të kopjoni kodin HTML në dokumentin tuaj dhe të luani me të për të parë se çfarë bëjnë rregullimet e ndryshme. Shënim: për shkak se shumë uebfaqe përdorin fletë stili CSS, ju mund të mos jeni në gjendje të shihni shumë ngjyra ose stile të tjera.
Mësoni rreth HTML duke lexuar më shumë artikuj të thelluar. Ka shumë burime në internet për të zotëruar më shumë etiketa HTML të tilla si W3Schools ose Codecademy. Ka edhe shumë libra HTML të disponueshëm, por sigurohuni që po përdorni një botim të fundit pasi standardi HTML ndryshon herë pas here. Pasi të keni zotëruar HTML në një nivel të mirë, mund t'i drejtoheni CSS për më shumë kontroll mbi modelin dhe stilin e faqes tuaj në internet. Pas kësaj, hapi tjetër është zakonisht javascript.

Këshilla

Mund të jetë e dobishme të gjesh një faqe të thjeshtë në internet dhe pastaj të fillosh të ngatërrosh kodin. Mundohuni të lëvizni një tekst, të ndryshoni fontin, të ndryshoni imazhet, çfarëdo që dëshironi!
Mund të përdorni një fletore për të shkruar kodin, në mënyrë që të keni diçka për të rikthyer nëse nuk e mbani mend atë për asnjë moment. Ju gjithashtu mund ta shtypni këtë faqe dhe ta mbani atë për referencë.
XML dhe RSS përdoren gjithnjë e më shumë në faqet e internetit në ditët e sotme. Kodi mund të duket i paarritshëm për syrin e njeriut, veçanërisht kur shikohet në kodin burimor, por funksionaliteti mund të jetë i dobishëm.
Etiketat e përdorura brenda HTML nuk janë të ndjeshme në shkronja të mëdha, por e paracaktuar është të përdorni shkronja të vogla (siç bëjmë në këtë artikull). Shkronjat e vogla për etiketat rekomandohen shumë, gjithashtu për pajtueshmërinë me XHTML.

Paralajmërime

Disa etiketa nuk përdoren më dhe janë zëvendësuar nga etiketat e tjera që bëjnë të njëjtën gjë, por shpesh ofrojnë më shumë mundësi.
Nëse dëshironi të siguroheni që faqja juaj përputhet me standardin HTML, shkoni në faqen e internetit W3 për të testuar kodin tuaj në krahasim me standardin aktual. Shumë etiketa janë vjetëruar dhe janë zëvendësuar nga etiketat që funksionojnë më mirë në shfletuesit modernë.

Nevojat

Një program i përpunimit të fjalëve, të tilla si Notepad (Windows) ose Editor Editor (Mac).
një fletë letre ose fletore (opsional)
Një program i krijuar posaçërisht për të shkruar HTML, të tilla si Notepad ++ për Windows ose TextWrangler për Mac (opsional)