Kā iemācīties HTML

Video: Tīmekļa lapu veidošana (1.video) - HTML pamati.

Saturs

Soļi
1. daļa no 2: HTML pamatzināšanas
2. daļa no 2: Uzlabots HTML
Padomi
Brīdinājumi
Ko tev vajag

HTML ir angļu valodas saīsinājums Hiperteksta iezīmēšanas valoda (hiperteksta iezīmēšanas valoda). Šis ir kods vai valoda, kurā tiek izveidots vietņu pamata marķējums. Mācīšanās var šķist biedējoša, ja nekad neesat programmējis, bet patiesībā viss, kas jums nepieciešams, lai sāktu darbu, ir pamata teksta redaktors un interneta pārlūks. Jūs pat varat atpazīt dažus HTML marķēšanas piemērus, ar kuriem esat saskāries interneta forumos, pielāgotajās pielāgotajās lapās vai rakstos wikiHow. HTML ir noderīgs rīks jebkuram interneta lietotājam, un pamata apgūšana prasīs mazāk laika, nekā jūs domājat.

Soļi

1. daļa no 2: HTML pamatzināšanas

1 Atveriet HTML dokumentu. Lielāko daļu teksta redaktoru (Notepad vai Notepad ++ operētājsistēmai Windows, TextEdit Mac, gedit GNU / Linux) var izmantot HTML failu ģenerēšanai. Izveidojiet jaunu dokumentu un saglabājiet to Web lapas formātā, izmantojot Fails → Saglabāt kā, vai mainiet faila paplašinājumu uz .html vai .htm, nevis .doc, .rtf vai citu paplašinājumu.
- Jūs varat saņemt brīdinājumu, ka fails tiks saglabāts kā vienkāršs teksts, nevis RTF formāts, vai arī formatējums un attēli netiks saglabāti. Tas ir labi; HTML gadījumā šīs opcijas nav vajadzīgas.
2 Atveriet ģenerēto failu pārlūkprogrammā. Saglabājiet tukšo failu, atrodiet to savā datorā un veiciet dubultklikšķi uz tā, lai to atvērtu. Pārlūkprogrammā vajadzētu atvērt tukšu lapu. Ja tā nav, velciet failu uz pārlūkprogrammas adreses joslu. Rediģējot HTML failu, varat atsvaidzināt šo lapu, lai redzētu izmaiņas.
- Lūdzu, ņemiet vērā, ka šādā veidā jūs neveidojat vietni internetā. Citas personas nevarēs piekļūt šai lapai, un jums nav nepieciešams interneta savienojums, lai pārbaudītu vietējo lapu. Pārlūkprogramma vienkārši interpretē HTML kodu, "lasot" tā, it kā tā būtu vietne.
3 Izprotiet, kas ir iezīmēšanas tagi. Atšķirībā no parasta teksta, tagi netiek parādīti lapā. Tā vietā viņi norāda pārlūkprogrammai, kā parādīt lapu un tās saturu. Tags "atvēršana" satur norādījumus. Piemēram, tas var pateikt pārlūkprogrammai, ka teksts ir jāparāda kā treknrakstā... Tam ir nepieciešams arī beigu tags, lai pārlūkprogrammā parādītu, kur instrukcija beidzas. Šajā piemērā teksts starp sākuma un beigu tagiem tiks parādīts treknrakstā. Tagi ir rakstīti nevienādās zīmēs, bet beigu tags sākas ar slīpsvītru uz priekšu.
- Sākuma tags ir rakstīts starp nevienlīdzības zīmēm: sākuma atzīme>
- Noslēguma tagā pirms taga apraksta (nosaukums) tiek ievietota slīpsvītra uz priekšu: /beigu tags>
- Lasiet tālāk, lai uzzinātu, kā tiek izmantoti dažādi tagi. Lai to izdarītu, jums vienkārši jāatceras ierakstīšanas formāts. Tagi tiek rakstīti starp nevienlīdzības zīmēm:> un />
- Dažās apmācībās HTML tagus sauc par elementiem, bet tekstu starp sākuma un beigu tagiem - par elementu saturu.
4 Redaktorā ierakstiet tagu html>. Katram HTML failam jāsākas ar tagu html> un beidzas ar tagu / html>... Šie tagi norāda pārlūkprogrammai, ka viss saturs starp tagiem ir HTML. Pievienojiet dokumentam šādas atzīmes:
- Bieži HTML faili sākas ar līniju ! DOCTYPE html>tas nozīmē, ka pārlūkprogrammām viss fails ir jāatpazīst kā HTML. Šī rinda nav nepieciešama, taču tā var palīdzēt novērst saderības problēmas.
- Zvanīt html> dokumenta augšpusē.
- Nospiediet Enter vai Return vairākas reizes, lai izveidotu vairākas tukšas rindas, un pēc tam ierakstiet / html>
- atcerieties, ka viss šajā rakstā izveidotais kods būs jāraksta starp šiem diviem tagiem.
5 Failā izveidojiet sadaļu head>. Starp tagiem html> un / html> izveidojiet sākuma tagu galva> un noslēguma tagu / galva>... Starp tiem pievienojiet dažas tukšas līnijas. Saturs, kas rakstīts starp tagiem head> un / head>, netiek parādīts pašā lapā. Izpildiet šīs darbības, un jūs redzēsit, kam paredzēts šis tags:
- Starp tagiem head> un / head> ierakstiet nosaukums> un / title>
- Starp virsrakstiem> un / title> ierakstiet Kā iemācīties HTML - wikiHow.
- Saglabājiet izmaiņas un atveriet failu pārlūkprogrammā (vai atsvaidziniet lapu, ja fails jau ir atvērts). Vai redzat tekstu, kas redzams lapas nosaukumā virs adreses joslas?
6 Izveidojiet pamattekstu> sadaļu. Visi pārējie tagi un teksts šajā piemērā ir ierakstīti pamatteksta sadaļā, kuras saturs tiek parādīts lapā. Pēc noslēguma birka / galva>, bet pirms tam tag / html> pievienot tagus ķermenis> un / ķermenis>... Pārējā šī raksta daļā strādājiet ar ķermeņa sadaļu. Jūsu failam vajadzētu izskatīties apmēram šādi:
html>
galva>
title> Kā iemācīties HTML - wikiHow / title>
/ galva>
ķermenis>
/ ķermenis>
/ html>
7 Pievienojiet tekstu, izmantojot dažādus stilus. Ir pienācis laiks pievienot lapai īsto saturu! Viss, ko rakstāt starp pamattekstiem, tiks parādīts lapā pēc pārlūkprogrammas atsvaidzināšanas. Nelietojiet simboli vai >jo pārlūkprogramma mēģinās interpretēt saturu kā tagu, nevis tekstu. Rakstīt Sveiki! (vai kas jums patīk), tad mēģiniet tekstam pievienot šos tagus un redzēt, kas notiek:
- em> Sveiki visiem! / em> padara tekstu "slīprakstā": Sveiki!
- stiprs> Sveiki visiem! / stiprs> padara tekstu "treknrakstu": Sveiki!
- s> Sveiki visiem! / s> pārsvītrots teksts: ~~Sveiki!~~
- sup> Sveiki visiem! / sup> parāda fontu kā virsrakstu:
- sub> Sveiki visiem! / sub> parāda fontu kā apakšrakstu: _Sveiki!
- Izmēģiniet dažādus tagus kopā. Kā tas izskatīsies em> strong> Sveiki visiem! / strong> / em>?
8 Sadaliet tekstu rindkopās. Mēģinot HTML failā ierakstīt vairākas teksta rindiņas, pamanīsit, ka rindu pārtraukumi pārlūkprogrammā netiek parādīti. Lai sadalītu tekstu rindkopās, jums jāpievieno tagi:
- p> Šī ir atsevišķa rindkopa. / p>
- Šim teikumam seko rindas pārtraukums br> pirms šīs rindiņas sākuma.
  Šis ir pirmais tags, kuram nav nepieciešams beigu tags. Šos tagus sauc par "tukšiem" tagiem.
- Izveidojiet virsrakstus, lai parādītu sadaļu nosaukumus:
  h1> virsraksta teksts / h1>: lielākais nosaukums
  h2> virsraksta teksts / h2> (otrā līmeņa virsraksts)
  h3> virsraksta teksts / h3> (trešā līmeņa virsraksts)
  h4> virsraksta teksts / h4> (ceturtā līmeņa virsraksts)
  h5> virsraksta teksts / h5> (mazākais nosaukums)
9 Uzziniet, kā izveidot sarakstus. Ir vairāki veidi, kā izveidot sarakstus tīmekļa lapā. Izmēģiniet tālāk norādītās iespējas un izlemiet, kura no tām jums patīk vislabāk. Ņemiet vērā, ka vienam sarakstam ir vajadzīgs viens tagu pāris (piemēram, ul> un / ul> aizzīmju sarakstam), un katrs saraksta vienums ir iezīmēts ar atšķirīgu tagu pāri, piemēram, li> un / li>.
- Aizzīmju saraksts:
  ul> li> Pirmā rinda / li> li> Otrā rinda / li> li> Un tā tālāk / li> / ul>
- Numurēts saraksts:
  ol> li> Viens / li> li> Divi / li> li> Trīs / li> / ol>
- Definīciju saraksts:
  dl> dt> Kafija / dt> dd> - karstais dzēriens / dd> dt> Limonāde / dt> dd> - auksts dzēriens / dd> / dl>
10 Izkārtojiet lapu, izmantojot rindu pārtraukumi, horizontālās līnijas un Attēli. Ir pienācis laiks pievienot lapai kaut ko citu, nevis tekstu. Lai iegūtu papildinformāciju, izmēģiniet tālāk norādītos tagus vai sekojiet saitēm. Izmantojiet tiešsaistes mitināšanas pakalpojumu, lai izveidotu saiti uz attēlu, kuru vēlaties ievietot:
- Horizontālā līnija: hr>
- Ievietot attēlu: img src = "attēla saite">
11 Pievienojiet saites. Varat izmantot šos tagus, lai izveidotu hipersaites uz citām lapām un vietnēm, taču, tā kā jums vēl nav vietnes, tagad uzzināsit, kā izveidot enkura saites, tas ir, saites uz konkrētām lapas vietām:
- Izveidojiet enkuru ar tagu a>, uz kuru vēlaties izveidot saiti lapā. Izdomājiet skaidru un neaizmirstamu nosaukumu:
  
  a name = "Tips"> Teksts, uz kuru jūs saistāt. / a>
- Izmantojiet tagu href>, lai izveidotu relatīvu saiti vai saiti uz ārēju resursu:
  
  a href = "saite uz lapu vai enkura nosaukums lapā"> Teksts vai attēls, kas kalpos kā saite. / a>
- Lai izveidotu saiti uz relatīvu saiti citā lapā, pēc galvenās saites pievienojiet # zīmi un enkura nosaukumu. Piemēram, vietnē https://en.wikihow.com/learn-HTML#Tips ir saites uz šīs lapas padomu sadaļu.

2. daļa no 2: Uzlabots HTML

1 Iepazīstieties ar atribūtiem. Atribūti ir rakstīti tagā, norādot papildu informāciju. Atribūtu formāts ir šāds: name = "vērtība", kur titulu definē atribūtu (piemēram, krāsa krāsu atribūtam), un vērtība norāda tā vērtību (piemēram, sarkans par sarkanu).
- Atribūti faktiski ir izmantoti iepriekšējā sadaļā par HTML pamatiem. Tags img> izmanto atribūtu src, relatīvie saišu enkuri izmanto atribūtu vārdsun saites izmanto atribūtu href... Kā jūs jau pamanījāt, visi atribūti ir rakstīti formātā ___='___’.
2 Eksperimentējiet ar HTML tabulām. Tabulas izveidošana ietver dažādu tagu izmantošanu. Jūs varat eksperimentēt vai izlasīt detalizētākus norādījumus.
- Izveidojiet tabulas tagus:tabula> / tabula>
- Katras tabulas rindas saturu iekļaujiet tagos: tr>
- Kolonnas virsrakstu nosaka tags: th>
- Šūnas nākamajās rindās: td>
- Šo tagu izmantošanas piemērs:
  
  tabula> tr> th> 1. sleja: mēnesis / th> th> 2. sleja: ietaupījumi / th> / tr> tr> td> janvāris / td> td> 5000 rubļu / td> / tr> / table>
3 Uzziniet papildu galvenes sadaļas tagus. Jūs jau esat iemācījušies head> tag, kas ir katra html faila sākumā. Papildus virsrakstam> tagam šai sadaļai ir arī citi tagi:
- Metatagi, kas satur metadatiko izmanto meklētājprogrammas, lai indeksētu vietni. Lai jūsu vietni būtu vieglāk atrast meklētājprogrammās, izmantojiet vienu vai vairākus sākuma metatagus (aizvēršanas tagi nav nepieciešami).Katram tagam izmantojiet vienu atribūtu un vienu vērtību: meta name = "description" content = "page description">; vai meta nosaukums = "atslēgvārdi" content = "ar komatu atdalīti atslēgvārdi">
- Saite> tagi, kas norāda uz trešo pušu failiem, piemēram, stila lapas (CSS), kas tiek veidoti, izmantojot cita veida kodējumu un ļauj mainīt HTML lapu, izmantojot krāsu, teksta izlīdzināšanu un daudzas citas funkcijas.
- Skripts> tagi, ko izmanto, lai lapai pievienotu JavaScript failus. Šie faili ir nepieciešami, lai interaktīvi modificētu lapu (reaģējot uz lietotāju darbībām).
4 Eksperimentējiet ar citu vietņu HTML kodu. Citu tīmekļa lapu avota koda skatīšana ir lielisks veids, kā apgūt HTML. Varat ar peles labo pogu noklikšķināt uz lapas un pārlūkprogrammas augšējā izvēlnē atlasīt Skatīt avotu vai kaut ko līdzīgu. Mēģiniet saprast, ko dara nepazīstams tags, vai meklējiet informāciju par to internetā.
- Lai gan jūs nevarat rediģēt citu cilvēku vietnes, varat kopēt avota kodu savā failā, lai vēlāk eksperimentētu ar tagiem. Lūdzu, ņemiet vērā, ka CSS marķējums var nebūt pieejams, un krāsas un formatējums var izskatīties citādi.
5 Sāciet izpētīt detalizētākus ceļvežus. Internetā ir daudz vietņu, kas veltītas HTML tagiem, piemēram, W3Schools vai HTMLbook. Pārdošanā ir arī papīra grāmatas, taču, mainoties standartiem un mainoties, mēģiniet atrast jaunāko izdevumu. Vēl labāk, apgūstiet CSS, lai daudz vairāk kontrolētu savas vietnes izkārtojumu un izskatu. Pēc CSS apgūšanas tīmekļa dizaineri parasti apgūst JavaScript.

Padomi

Notepad ++ ir lieliska bezmaksas programma, līdzīga parastajai Notepad, taču jūs varat saglabāt un pārbaudīt savu kodu savā pārlūkprogrammā tiešsaistē. (Tas atbalsta arī gandrīz jebkuru valodu - HTML, CSS, Python, JavaScript utt.)
Atrodiet tīklā vienkāršu lapu, saglabājiet kodu datorā un eksperimentējiet ar to. Mēģiniet pārvietot tekstu, mainīt fontu, aizstāt attēlus - neatkarīgi no tā!
Jūs varat glabāt piezīmju grāmatiņu, kurā rakstāt tagus, lai tie vienmēr būtu pa rokai. Varat arī izdrukāt šo lapu un atsaukties uz to.
Rakstot kodu, dariet to uzmanīgi, lai jūs un citi cilvēki to saprastu. Izmantojiet! - Ievietojiet komentāru šeit -> HTML komentāriem: tie netiks atspoguļoti lapā, bet būs redzami koda dokumentā.
XML un RSS kļūst arvien populārākas. Lapām, kurās ir XML un RSS tehnoloģijas, nepieredzējušam lietotājam ir grūtāk lasīt un saprast kodu, taču šie rīki ir diezgan noderīgi.
Iezīmēšanas tagi HTML formātā nav reģistrjutīgi, taču, lai nodrošinātu standartizāciju un saderību ar XHTML, mēs iesakām izmantot tikai mazos burtus (kā šī raksta piemēros).

Brīdinājumi

Daži tagi pēdējos gados vairs nav izmantoti, un tie ir aizstāti ar jauniem, kas nodrošina tādu pašu vai dažus papildu efektus.
Ja vēlaties pārbaudīt savu lapu, dodieties uz W3 vietni un iepazīstieties ar mūsdienu HTML prasībām. HTML standarti laika gaitā mainās, un daži tagi tiek aizstāti ar jauniem, kas labāk darbojas mūsdienu pārlūkprogrammās.

Ko tev vajag

Teksta redaktors, piemēram, Notepad (Windows) vai TextEdit (Mac)
Papīrs / piezīmju grāmatiņa (nav nepieciešams)
HTML redaktors, piemēram, Notepad ++ (Windows) vai TextWrangler (Mac) (nav nepieciešams)