Saturs

• Soļi
• 1. daļa: Kā es atklāju HTML
• Padoms
• Brīdinājums
• Ko tev vajag

HTML (HyperText Markup Language) ir pamatvaloda tīmekļa lapu veidošanai. Tā tika izveidota kā ērta un elastīga kodēšanas valoda. Gandrīz katra interneta vietne ir izstrādāta, izmantojot kaut kādu šī koda formu (ColdFusion, XML, XSLT). HTML ir viegli uztverams, taču jūs varat turpināt mācīties par to ilgu laiku, ja jūs interesē tā visaptverošā funkcionalitāte. Lai pievienotu savai vietnei krāsu un jautrību, jūs varat apgūt pamata CSS, tiklīdz esat pieradis pie pamata HTML lapas.

Soļi

1. daļa no 4: Dokumenta veidošana

1. 

   Atveriet vienkāršu teksta redaktoru. NotePad ir laba iespēja, un to var lejupielādēt bez maksas. Varat rakstīt HTML, izmantojot lielāko daļu teksta redaktoru, taču sarežģītāka programmatūra ar automātiskās formatēšanas iespējām var apgrūtināt HTML lapas organizēšanu.
   • Neizmantojiet TextEdit, jo tas parasti saglabā failu tādā formātā, kādu jūsu pārlūkprogramma var neatpazīt kā HTML.
   • Varat arī izmantot tiešsaistes HTML redaktoru. Iesācējiem nav ieteicamas īpašas HTML rediģēšanas programmas.

2. 

   
   
   Saglabājiet failu kā tīmekļa lapu. Augšdaļā esošajā izvēlnē izvēlieties Fails → Saglabāt kā. Mainiet faila formātu uz "Web lapa", ".html" vai ".htm". Saglabājiet failu tur, kur to viegli atradīsit.
   • Starp šīm trim iespējām nav atšķirības.

3. 

   Atveriet failu pārlūkprogrammā. Veiciet dubultklikšķi uz faila, un tas automātiski tiks atvērts kā tukša tīmekļa lapa jūsu pārlūkprogrammā. Varat arī atvērt pārlūkprogrammu, piemēram, Firefox vai Internet Explorer, un pēc tam izmantot failu → Atvērt failu, lai atlasītu dokumentu.
   • Šī vietne nav tiešsaistē. To var apskatīt tikai datorā.

4. 

   
   
   Atsvaidziniet tīmekļa lapu un skatiet veiktās izmaiņas. Tukšajā dokumentā ierakstiet: Sveiki. Saglabājiet dokumentu. Atsvaidziniet tukšo tīmekļa lapu savā pārlūkprogrammā, un lapas augšdaļā vajadzētu redzēt treknrakstā redzamo vārdu "Labdien". Ikreiz, kad šīs apmācības laikā vēlaties pārbaudīt savu jauno HTML, saglabājiet .htm dokumentu un pēc tam atsvaidziniet pārlūkprogrammas logu, lai redzētu, kā tiek sastādīts HTML.
   • Ja redzat vārdus ""un"Parādās jūsu pārlūkprogrammā, fails HTML nav pareizi sastādīts. Izmēģiniet citu teksta redaktoru vai citu pārlūkprogrammu.

5. 

   
   
   Uzziniet tagus. HTML komandas ir rakstītas “tagos”, kas pārlūkam norāda, kā sastādīt un parādīt jūsu tīmekļa lapu. Tie vienmēr tiek ierakstīti atsevišķās pēdiņās un netiek parādīti tīmekļa lapā, kā jūs tos izmantojāt iepriekš sniegtajā piemērā:
   • ir "sākuma karte" vai "sākuma karte". Viss, kas rakstīts pēc šī taga, tiks definēts kā “treknrakstā” (treknrakstā tīmekļa lapā).
   • ir "beigu atzīme" vai "beigu atzīme", ko jūs varat atšķirt pēc simbola / zīmes. Tas apzīmē treknraksta beigas. Lielākajai daļai (ne visu) tagu darbībai ir nepieciešams beigu tags, tāpēc noteikti iekļaujiet to.

6. 

   Izveidojiet savu dokumentu. Dzēsiet visu HTML dokumentā. Sāciet no jauna ar šo tekstu, tieši tā, kā tas tika uzrakstīts (atskaitot aizzīmes). Šis HTML kods pārlūkam norāda, kāda veida HTML jūs izmantojat, un ka viss jūsu HTML tiks ievietots tagos. un .

7. 

   Pievienojiet galvas (galvas) un ķermeņa tagus. HTML dokumenti ir sadalīti divās daļās. Sadaļā “Augša” ir paredzēta īpaša informācija, piemēram, lapas nosaukums. Sadaļā "pamatteksts" ir ietverts lapas galvenais saturs. Pievienojiet abas šīs sadaļas savam dokumentam un neaizmirstiet iekļaut beigu tagus. Nesen pievienotais teksts ir treknrakstā:

8. 

   Piešķiriet savai lapai nosaukumu. Lielākajai daļai kartīšu galvas sadaļā nav svarīgi mācīties kopā ar iesācēju. Nosaukuma tagu tomēr ir viegli izmantot, un tas noteiks to, kas tiek parādīts kā pārlūkprogrammas loga nosaukums vai pārlūka cilnē. Ievietojiet nosaukuma sākuma un beigu tagus galvas tagos un starp šiem tagiem ierakstiet visas jums patīkamās galvenes:
   reklāma

2. daļa no 4: Teksta formatēšana

1. 

   Pievienojiet ķermenim tekstu. Šajā sadaļā mēs strādāsim tikai ar ķermeņa tagiem. Otrs teksts joprojām būs jūsu dokumentā, taču mēs ietaupīsim vietu, neatkārtojot to šajā apmācībā. Starp kartēm ierakstiet visu, ko vēlaties un , un tas tiks parādīts kā pirmais jūsu lapas saturs. Piemēram:
   • Lai rakstītu HTML lapu, es izpildīju wikiHow instrukcijas.

2. 

   Pievienojiet teksta virsrakstus. Sakārtojiet savu lapu ar virsrakstu tagiem, kas pārlūkam uzdod parādīt tekstu starp tiem lielākā fonta lielumā. Šos tagus izmanto arī meklētājprogrammas un citi rīki, lai noteiktu, kas ir jūsu vietne un kā tā ir sakārtota.
   ir lielākā virsraksts, un jūs varat izveidot mazākus virsrakstus līdz
   . Izmēģiniet tos savā lapā:
   • Laipni lūdzam manā lapā.

   • Lai rakstītu HTML lapu, es izpildīju wikiHow instrukcijas.

   • Mans mērķis šodien:

   • Izpildītie mērķi:

   • Uzziniet, kā izmantot virsrakstus.

   • Nepabeigtie mērķi:

   • Uzziniet vairāk teksta formatēšanas tagus.

3. 

   Uzziniet vairāk teksta formatēšanas tagus. Jūs jau esat redzējis “spēcīgo” tagu, taču ir daudz citu veidu, kā formatēt tekstu. Izmēģiniet šos tagus vai vienlaikus ar vairākiem tagiem vienai un tai pašai teksta virknei. Atcerieties aizmugurē pievienot beigu tagus!
   • Svarīgs teksts, kas pārlūkprogrammā tiek parādīts treknrakstā.
   • Uzsvērts teksts, kas pārlūkprogrammā tiek parādīts kursīvā.
   • Teksts mazliet mazāks nekā parasti. Šis teksts tiks automātiski mainīts, ja to izmantos virsrakstā.
   • Teksts vairs nav būtisks, tiek parādīts ar ķermeņa domuzīmi.
   • Teksts tiek ievietots vēlāk nekā citi dokumenti, parādīts ar pasvītrojumiem.

4. 

   Kārtojiet tekstu savā lapā. Jūs, iespējams, pamanījāt, ka, nospiežot taustiņu "Enter", nepietiek, lai teksts tiktu parādīts citā rindā. Šie tagi var palīdzēt izveidot rindkopas un rindu pārtraukumus vai sakārtot tekstu citos veidos:

   • Īsāk sakot ar vārdu “rindkopa”, šis tags saglabās visu tekstu starp šiem tagiem rindkopā un atdalīs to no teksta virs un zem tā.

   • 
     Šis tags ģenerēs rindiņu pārtraukumus. Nepievienojiet tam beigu tagu, jo tas netraucē nevienu citu saturu. Izmantojiet šo tagu dzejoļos vai adreses rindiņās, nevis rindkopās.

   • Ja jums teksts jāparāda ļoti precīzi, šī atzīme nosaka tā iekšējā teksta fiksēta platuma fontu (katram burtam ir vienāds platums) un ļauj izveidot intervālus Tukšas vietas un rindiņu pārtraukumi, kā vēlaties regulārai rediģēšanai tagu vietā.

   • Šis tags nosaka teksta veidu, kas tiek citēts no avota.

     Jūs varat aprakstīt avotu vēlāk ar citēšanas karte.

5. 

   Pievienojiet neredzamu parakstu tekstu. Komentāru tagi tīmekļa lapā netiek rādīti. Tie ļauj jums anotēt sevi HTML dokumentā, neietekmējot saturu. Nepievienojiet beigu tagu.
   • Kartes, kuras iet atsevišķi, nebeidzot tagus, sauc par “tukšiem tagiem”.

6. 

   Apvienojiet tos kopā. Labākais veids, kā atcerēties šos tagus, ir izmantot tos savā vietnē. Šeit ir piemērs, izmantojot kartes līdz šim apgūtajās darbībās. Mēģiniet paredzēt, kā tie tiks parādīti pārlūkprogrammā, pēc tam nokopējiet tos savā dokumentā un uzziniet.
   • Laipni lūdzam manā vietnē.

   • Ceru, ka jums patiks šī lapa!

     Es to izgatavoju tieši jums.

   • 1. daļa: Kā es atklāju HTML

   • Esmu iemācījies HTML jau viens divistundas, tāpēc tagad esmu eksperts.
   reklāma

3. daļa no 4: saišu un attēlu pievienošana

1. 

   Uzziniet par atribūtiem. Tagu iekšpusē var būt rakstīta papildu informācija, ko sauc par atribūtiem. Šos atribūtus apzīmē papildu vārdi pašu tagu formā rekvizīta nosaukums = "konkrēta vērtība". Piemēram, jebkuram HTML tagam var būt nosaukuma atribūts:

   • Ievada rindkopa ir šeit.

     Piešķiriet virsraksta sadaļu "Ievads", kas parādīsies, virzot kursoru tīmekļa rindkopā.

2. 

   Saites uz citām vietnēm. Karšu izmantošana lai izveidotu hipersaiti uz jebkuru citu tīmekļa lapu. Ievietojiet tīmekļa lapas URL, lai izveidotu saiti, izmantojot atribūtu href. Lūk, piemērs, kas novirza uz tīmekļa lapu, kuru lasāt:
   • Jūsu vietnes apmeklētāji var noklikšķināt uz šī teksta, lai sekotu saitei.

3. 

   Pievienojiet tagam id atribūtu. Vēl viens atribūts, ko var izmantot jebkurš HTML tags, ir elements “id”. Jebkurā kartē rakstiet id = "vidu" vai izmantojiet jebkuru nosaukumu, kurā nav atstarpju. Tas nerada redzamu efektu, bet mēs to izmantosim nākamajā solī.
   • Piemēram, dokumentam pievienojiet:

     Šis punkts tiek izmantots kā piemērs, lai aprakstītu, kā darbojas atribūts id.

4. 

   Saite uz elementu ar noteiktu ID. Tagad mēs varam izmantot hipersaites tagu, , lai izveidotu saiti uz citu atrašanās vietu tajā pašā lapā. URL vietā mēs izmantosim simbolu #, kam sekos id vērtība, ar kuru vēlamies saistīt. Piemēram, Šis teksts būs saistīts ar tekstu ar ID "vidu".
   • Visas HTML vērtības ir reģistrjutīgas. "#VIDU" un "#vidu" abi saites uz vienu un to pašu vietu.
   • Ja jūsu lapa ir pietiekami īsa, lai uzreiz parādītu visu lapu, jūs, iespējams, nemanīsit, ka kaut kas notiek, noklikšķinot uz saites pārlūkprogrammā. Mainiet loga izmērus, līdz parādās ritināšanas josla, un pēc tam mēģiniet vēlreiz.

5. 

   Pievienojiet fotoattēlus. Karte ir tukšs tags, kas nozīmē, ka beigu tags nav vajadzīgs. Visa informācija, kas pārlūkam nepieciešama attēla parādīšanai, tiek pievienota, izmantojot atribūtus. Šeit ir piemērs, kā parādīt wikiHow logotipu ar katra atribūta aprakstu:
   • 
   • Rekvizīti src = "" stāsta pārlūkprogrammai, kur atrodas fotoattēls. (Ņemiet vērā, ka fotoattēla publicēšana no kāda cita vietnes tiek uzskatīta par nepiemērotu - un fotoattēls pazudīs, kad lapa vairs nebūs aktīva.)
   • Rekvizīti style = "" Tas var darīt daudzas lietas, bet vissvarīgāk to izmanto, lai iestatītu attēla platumu un augstumu pikseļos. (Tā vietā varat izmantot arī atsevišķus atribūtus width = "" un height = "", taču tas var radīt dīvainas izmēru maiņas problēmas, ja izmantojat CSS.)
   • Rekvizīti alt = "" ir īss attēla apraksts, kuru lietotājs redzēs, ja attēlu neizdevās ielādēt. Tā tiek uzskatīta par prasību, jo to izmanto ekrāna lasītājiem tīmekļa vietnes apmeklētājiem, kuri ir neredzīgi.
   reklāma

4. daļa no 4: Uzziniet vairāk par savas vietnes pievienošanu un iegūšanu tiešsaistē

1. 

   Apstipriniet savu HTML. HTML validācija pārbauda, ​​vai jūsu kodā nav kļūdu. Ja jūsu vietne netiek parādīta pareizi, pārbaude var palīdzēt atrast kļūdu, kas izraisa problēmu. Tas var arī iemācīt jums vairāk par HTML, nosakot, ka kods izskatās labi displejā, taču tas vairs nav ieteicams jaunu standartu HTML atjauninājumu dēļ. Nederīga HTML izmantošana nepadara jūsu vietni bezjēdzīgu, taču var izraisīt problēmas vai nestabilu parādīšanos dažādās pārlūkprogrammās.
   • Izmēģiniet bezmaksas tiešsaistes validācijas pakalpojumu no W3C vai meklējiet citu HTML 5 validācijas rīku tiešsaistē.

2. 

   Uzziniet vairāk tagus un atribūtus. Ir daudz citu HTML tagu un atribūtu, kā arī daudzas vietas, kur tos apgūt:
   • Izmēģiniet w3schools un HTML Dog, lai iegūtu vairāk apmācību un pilnīgu tagu sarakstu.
   • Atrodiet sev tīkamu tīmekļa lapu tā izskatu, pēc tam izmantojiet pārlūkprogrammas funkciju “Skatīt lapas avotu”, lai pats iegūtu HTML kodu. Kopējiet to savā dokumentā un izpētiet, kā tas darbojas.
   • Izlasiet citus rakstus un uzziniet, kā izveidot tabulas HTML, izmantot metatagus, lai palielinātu izredzes to atrast, izmantojot meklētājprogrammas, vai izmantojiet sadalījumu. iestatiet laukumu lapā) un laidumu (izmanto, lai norādītu teksta elementa stilu), lai palīdzētu stilam, izmantojot CSS.

3. 

   Iegūstiet savu vietni tiešsaistē. Izvēlieties pakalpojumu savas vietnes mitināšanai, un pēc tam savā personiskajā tīmekļa domēnā varat augšupielādēt tik daudz HTML lapu, cik vēlaties. Lai to izdarītu, jums būs jāizmanto FTP augšupielādes programmatūra, taču arī daudzi tīmekļa nomas pakalpojumi piedāvā šo pakalpojumu.
   • Saites uz lapām vai attēliem, kas atrodas tieši jūsu vietnē, jums būs jāizmanto pilna adrese. Piemēram, ja jūsu domēna nosaukums ir www.chuyengiahtmlsieudang.com, tad teksts ir šajos tagos būs saite uz vietni www.chuyengiahtmlsieudang.com/nhatky/thuhai.html

4. 

   Pievienojiet stilus, izmantojot CSS. Ja jūsu HTML lapa izskatās mazliet vienmuļa, mēģiniet apgūt CSS pamatus, lai pievienotu krāsas, dažādus fontus un labāk kontrolētu elementu izvietojumu. CSS "stila lapas" saistīšana ar HTML lapu ļaus jums veikt krasas izmaiņas lidojumā, automātiski pielāgojot visa teksta stilu dotajā tagā. Šeit jūs varat nedaudz spēlēt ar pamata formatēšanas slāni vai ienirt detalizētākās pamācībās HTML Dog CSS apmācībā.

5. 

   Pievienojiet JavaScript savai vietnei. JavaScript ir programmēšanas valoda, ko izmanto, lai HTML lapām pievienotu daudz funkcionalitātes. Starp sākuma un beigu tagiem tiek ievietotas JavaScript komandas , un to var izmantot, lai pievienotu interaktīvas pogas, aprēķinātu matemātikas problēmas un daudz ko citu. Uzziniet vairāk w3c piemēros. reklāma

Padoms

• Šajā apmācībā izmantotā doctype deklarācija (izmantotā dokumenta tipa deklarācija) ir “brīvs HTML 4.0.1 pārejas posms” (HTML 4.0.1 nav cieša pāreja), vienkāršs formāts. iesācējiem izmantot. Izmantot () alternatīva tam, lai pārlūkprogramma to apkopotu stingrā HTML 5 formātā, kas ir ieteicamais (lai arī retāk izmantots) standarta stils.

Brīdinājums

• HTML mērķis ir saglabāt saturu globālā formātā. Tas nekontrolē jūsu vietnes prezentāciju, piemēram, fona krāsu un precīzu elementu izvietojumu. Lai gan joprojām ir tagi, kas to ļauj izdarīt, ieteicams izmantot CSS, lai izveidotu kontrolējamāku un konsekventāku vietni.

Ko tev vajag

• Vienkāršs teksta redaktors, piemēram, NotePad vai TextEdit
• Tīmekļa pārlūks, piemēram, Internet Explorer vai Mozilla Firefox
• (Neobligāti) HTML redaktors, piemēram, Adobe Dreamweaver, Aptana Studio vai Microsoft Expression Web