Sisu

• Sammud
• Meetod 1: 1: HTML -lehe kirjutamine
• Näpunäiteid
• Hoiatused
• Mida sul vaja on

HTML (hüperteksti märgistuskeel) on esmane programmeerimiskeel veebilehtede arendamisel. Loodud lihtsa ja mugava programmeerimiskeelena. Enamik Interneti lehti on välja töötatud selle keele ühte vormi kasutades (ColdFusion, XML, XSLT). Pärast selle artikli lugemist saate jätkata koolitust, kasutades muid Interneti -ressursse. Proovige otsida Internetist muid selle teemaga seotud artikleid.

Sammud

Meetod 1: 1: HTML -lehe kirjutamine

1. 1 Enne kui hakkate tutvuma ühe siin esitatud sammuga, vaadake jaotist „Mida vajate”.
2. 2 Mida peaksite teadma, enne kui hakkate sellest probleemist aru saama:
3. 3 Põhitõed. Kas olete märgist kunagi kuulnud? Silt on ümbritsetud nurksulgudega, sõna sees. Lõppmärgis kirjutatakse samas vormis, kuid esimese nurgasulgu järel on kaldkriips lisatud. Atribuut on märgendis valikuline sõna, mida kasutatakse märgendile üksikasjade lisamiseks.
4. 4 Dokumendi algus. Mis tahes tekstiredaktoris, mida kasutate, kleepige järgmine:
   html> pea> pealkiri> wikiHow / title> / pea> keha> Tere maailm / keha> / html> suur> / suur>
   Silt tuleb sulgeda sama sildiga, kuid kaldkriipsuga pärast esimest nurgaklambrit. On erandeid, näiteks silte META või DOCTYPE.
5. 5 DOCTYPE
   • Tavaliselt on enamik veebilehti seadistatud DOCTYPE ”. See aitab määrata kodeeringut ja seda, kuidas veebibrauserid seda tajuvad. Enamik lehti töötab ilma selleta, “kuid see on vajalik, kui soovite sobitada (need reguleerivad Interneti kodeeringute tüüpe ja nende kasutamist)... DOCTYPE HTML 4.01 jaoks on esitatud allpool:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // ET" "http://www.w3.org/TR/html4/strict.dtd"> See on üks kõige tavalisematest DOCTYPE, mida kasutatakse lehtedel üle kogu Interneti.Esiteks osutab see lehe tüübile, mis kirjeldab html -i, seejärel tõstab esile kodeeringu tüübi ja lõpuks DOCTYPE -i asukoha, mis selle tulemusel kirjeldab veebilehe brauseri lehte.
   • HTML -i on erinevat tüüpi (aastate jooksul on välja töötatud erinevaid versioone), näiteks kasutades uusi või konkreetseid silte. Mõni silt on aegunud (selle asemel kasutatakse teisi kasulikumaid silte).
   • b> ja i> - see on praegu siltidele peale pandud, sest neid kasutatakse teksti teisendamiseks, kuid mitte spetsifikatsioone, seetõttu tulevad nende asemele teised sildid. Silt tugev> on asendajaks b>ja em>, asendajaks i>.
   • On oluline, et eelmised sildid asendataks siltidega, mis on rohkem kui vormindatud. Kui tekst on tõlgitud, jääb samaks mitte ainult vorming, vaid ka selle tähendus. See on semantiliselt õige.
   • XHTML versioonis b> ja i> ei kasutata, nagu HTML versioonis 3+.
6. 6 HTML "kapseldamise reegel".
   • Vaatame praegu kasutusel olevaid olulisemaid silte. Lehe loomise ajal kasutatakse lihtsat struktuuri. Kui silt avati, siis selle tulemusel see peaks olema suletud... See kehtib kogu struktuuri kohta. Siin on kehtiv näide XHTML -paigutuse struktuurist:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // ET" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • pea>
   • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
   • pealkiri> Tere maailm! / title>
   • / pea>
   • keha>
   • h1> Tere maailm! / h1>
   • / keha>
   • / html>
   • Näidiskood, mis väljastab sõnumi Tere, Maailm... Seda nimetatakse testiks Tere, Maailm.
7. 7 Suund
   • Veebilehe pealkiri on märgendi vaheline sisu pea>... Seda sisu ei saa kasutaja vaadata (ainult lehe pealkirjas näidatud pealkiri). Teave siltide vahel pea>, võib lisada muid silte, näiteks:
     
     
     • META -märgendit kasutatakse teabe jaoks, mis on kasulik otsingumootoritele ja muudele utiliitidele.
     • LINK -silt, mis loob lingi dokumentide vahel, näiteks stiilide (CSS) jaoks.
     • SCRIPT -silt, see hõlmab peaaegu kõiki veebikodeeringuid, millel on võimalus kaugjuurdepääsule (teisest dokumendist).
     • Stiil STYLE, mis on sisuliselt stiil, mida saab lehele rakendada.
     • Märgend TITLE on pealkiri, mis kuvatakse teie veebibrauseris lehe pealkirjana.
   • Vaatame mõningate nende demo selle veebisaidi näite päises (seda on lühendatud):
     • pea>
     • pealkiri> ... / tiitel>
     • meta nimi = "kirjeldus" sisu = "..." />
     • link rel = "styleheet" type = "text / css" href = "..." />
     • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • skripti tüüp = "text / javascript" src = "..."> / script>
     • / pea>
       
       Kui te pole seda märganud, on üksikud sildid esile tõstetud ja tegelik teave eemaldatud. Näide on üsna lühike, näidates peaaegu kõiki silte, mida võib leida pea>välja arvatud HTML -kommentaar (räägime sellest lihtsate siltidena).
8. 8 Lihtsad sildid igal pool
   • Liigume edasi ja näeme teisi silte. Olge oma märgistamisega ettevaatlik ja pidage meeles rusikareeglit „Kapseldus”.
     
     
     • tugev> rõhutab olulist teksti.
     • väike> Vähendab teksti. Fondi suurust mõõdetakse standardühikutes 1 kuni 7, 3 on vaikimisi teksti suurus. ...
     • pre> Määrab rikasteksti ploki. Nagu see on õige, trükitakse selline tekst sama suurusega ja kõigi tühikutega sõnade vahele.
     • em> Näitab teksti fraasina.
     • del> Tõmbab teksti välja.
     • ins> Määrab dokumenti sisestatud teksti.
     • h1> Üks paljudest pealkirja siltidest. Seda tüüpi sildid algavad tähega „h”, nende arv on erinev. Sulgege kindlasti sama numbriga silt.
     • p> Määrab lõigu.
     • ! --- ... ---> Erinevalt teistest siltidest peab kommentaar olema sildi enda sees. See teave on nähtav ainult koodi vaatamisel.
     • blockquote> Näitab hinnapakkumist, seda saab kasutada koos märgendiga cite>.
     • Ülaltoodud näited ei ole olemasolevate siltide täielik loend. Teiste kohta teabe saamiseks külastage.
9. 9 Selge struktuuri loomine
   • Lehed on mõeldud andmete hoidmiseks lihtsates siltide komplektides, et saaksime teavet lõikudesse sõeluda. Arvuti tuvastab andmed; ta ei tea konteksti ega kontseptuaalset seost. Peame looma arvutisõbralikud HTML-lehed. See saavutatakse div -märgendi abil. See aitab luua tohutul hulgal lehti. Seda saab stiilida CSS -iga ja see on lihtsam kui paigutuse jaoks suurte kooditabelite loomine.
     • div> See silt on eriline, kuna seda saab stiilida ja kasutada eraldi teabeplokke, millest saavad aru nii kasutajad kui ka arvutid.
   • Vaatame lihtsat HTML -i paigutust, mis kasutab div -märgendit.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // ET" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • pea>
     • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     • pealkiri> Tere maailm! / title>
     • / pea>
     • keha>
     • h1> Tere maailm! / h1>
     • div id = "contentOne">
     • p> See on mingi tekst jaotises div # contentOne. / p>
     • div>
     • p> Lõik div # contentOne / p> alajaotises
     • / div>
     • / div>
     • / keha>
     • / html>
   • Div> siltide kasutamine aitab stiilide leidmisel ja muutmisel CSS -i ja Javascriptiga töötades. HTML kasutab CSS -stiilide ja Javascriptiga töötamiseks erinevat kodeeringut, et luua parem ja tundlikum kasutajakogemus.

Näpunäiteid

• Pärast selle artikli lugemist ärge lõpetage ja mõelge, et olete õppinud kõike, mida vaja teada. Alati on midagi õppida, eriti selles tehnoloogias.
• Õppige, mõistke ja kirjutage kood.
• Pange tähele, et mõned sildid kasutavad ainult>. Para ja br on mõned näited. Muud sildid, mis on avatud>, tuleb veelgi sulgeda. Näiteks "div> / div>".
• Inimesed ootavad uusi avastusi, nii et leiutage uuesti, kujundage või kodeerige.
• Kui olete palju õppinud, proovige õppida serveri programmeerimist.
• Õppige töötama nii CSS -i kui ka Javascriptiga.

Hoiatused

• Pidage meeles, et HTML on sisu muutmine. See tähendab, et HTML -i kasutatakse ainult sisu salvestamiseks tunnustatud vormingus. Muud muudatused tuleb teha muude tehnoloogiate, näiteks CSS abil. See tähendab ka „Semantiliselt korrektse” tegemistisegi kui teised seda ei tunnista. Teised programmeerimiskeeled aitavad luua veebilehti (CSS, Javascript ja XML). HTML on sisukonstruktor.

Mida sul vaja on

• Tekstiredaktor, mis toetab ANSI kodeeringut
• Veebibrauser, näiteks Internet Explorer või Mozilla Firefox
• (Valikuline) wysiwyg või wykiwyg HTML -redaktor, näiteks Adobe Dreamweaver, Aptana Studio või Microsoft Expression Web