Turinys

• Žingsniai
• 1 būdas iš 1: HTML puslapio rašymas
• Patarimai
• Įspėjimai
• Ko tau reikia

HTML (hiperteksto žymėjimo kalba) yra pagrindinė programavimo kalba kuriant tinklalapius. Sukurta kaip paprasta ir patogi programavimo kalba. Dauguma interneto puslapių buvo sukurti naudojant vieną iš šios kalbos formų („ColdFusion“, XML, XSLT). Perskaitę šį straipsnį, galite tęsti mokymąsi naudodami kitus interneto išteklius. Pabandykite internete ieškoti kitų straipsnių, susijusių su šia tema.

Žingsniai

1 būdas iš 1: HTML puslapio rašymas

1. 1 Prieš pradėdami susipažinti su vienu iš čia pateiktų veiksmų, peržiūrėkite skyrių „Ko jums reikės“.
2. 2 Ką reikia žinoti prieš pradedant suprasti šią problemą:
3. 3 Pagrindai. Ar kada nors girdėjote apie etiketę? Etiketę supa kampiniai skliausteliai, kurių viduje yra žodis. Pabaigos žyma rašoma ta pačia forma, tačiau po pirmojo kampo skliaustelio pridedamas brūkšnys. Atributas yra neprivalomas žymos žodis, naudojamas žymai pridėti informacijos.
4. 4 Dokumento pradžia. Bet kuriame teksto rengyklėje, kurią naudojate, įklijuokite:
   html> head> title> wikiHow / title> / head> body> Sveiki pasaulis / body> / html> big> / big>
   Žyma turi būti uždaryta ta pačia žyma, tačiau po pirmojo kampinio skliaustelio turi būti brūkšnys. Yra išimčių, tokių kaip žymos META arba DOCTYPE.
5. 5 DOCTYPE
   • Paprastai dauguma tinklalapių yra nustatyti DOCTYPE “. Tai padeda nustatyti kodavimą ir tai, kaip jį suvoks žiniatinklio naršyklės. Dauguma puslapių veiks be jo “, bet tai būtina, jei norite atitikti (jie reglamentuoja kodavimo tipus internete ir kaip jie naudojami)... Toliau pateikiamas HTML 4.01 DOCTYPE :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // LT" "http://www.w3.org/TR/html4/strict.dtd"> Tai yra vienas iš labiausiai paplitusių DOCTYPE naudojamas puslapiuose visame internete.Pirma, jis nurodo puslapio tipą, apibūdinantį „html“, tada pabrėžia kodavimo tipą ir, galiausiai, DOCTYPE vietą, kuri dėl to apibūdina žiniatinklio naršyklės puslapį.
   • Yra įvairių tipų HTML (skirtingos versijos, sukurtos bėgant metams), pavyzdžiui, naudojant naujas žymas arba konkrečias žymas. Kai kurios žymos nebenaudojamos (vietoj jų naudojamos kitos naudingesnės žymos).
   • b> ir i> - tai šiuo metu yra taikoma žymėms, nes jos naudojamos tekstui transformuoti, bet ne specifikacijoms, todėl jas pakeičia kitos žymos. Žymėti stiprus> yra pakaitalas b>, ir em>, pakaitalas i>.
   • Svarbu, kad ankstesnės žymos būtų pakeistos žymėmis, kurios yra daugiau nei formatavimas. Jei tekstas yra išverstas, tada ne tik formatas, bet ir jo reikšmė išlieka ta pati. Tai semantiškai teisinga.
   • XHTML 2.0 versijoje b> ir i> nenaudojamas, kaip ir HTML 3+.
6. 6 HTML „kapsuliavimo taisyklė“.
   • Pažvelkime į svarbesnes šiuo metu naudojamas žymes. Kuriant puslapį naudojama paprasta struktūra. Jei buvo atidaryta žyma, tada jis turėtų būti uždarytas... Tai taikoma visai struktūrai. Štai tinkamas XHTML išdėstymo struktūros pavyzdys:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // LT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • galva>
   • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
   • title> Labas pasaulis! / title>
   • / galva>
   • kūnas>
   • h1> Sveikas pasaulis! / h1>
   • / body>
   • / html>
   • Pavyzdinis kodas, kuris išduoda pranešimą Labas pasauli... Tai vadinama testu Labas pasauli.
7. 7 Antraštė
   • Tinklalapio pavadinimas yra turinys tarp žymos galva>... Vartotojas negali peržiūrėti šio turinio (tik pavadinimas, rodomas puslapio pavadinime). Informacija tarp etikečių galva>, gali pridėti kitų žymų, pvz .:
     
     
     • META žyma naudojama informacijai, kuri yra naudinga paieškos sistemoms ir kitoms komunalinėms paslaugoms.
     • LINK žyma, sukurianti nuorodą tarp dokumentų, pavyzdžiui, stilių (CSS).
     • SCRIPT žyma, tai apima beveik bet kokį žiniatinklio kodavimą su galimybe nuotoliniu būdu pasiekti (iš kito dokumento).
     • STYLE žyma, kuri iš esmės yra stilius, kurį galima pritaikyti puslapyje.
     • Žyma „TITLE“ yra pavadinimas, kuris jūsų interneto naršyklėje rodomas kaip puslapio pavadinimas.
   • Pažiūrėkime kai kurių iš jų demonstraciją pavyzdinėje antraštėje, paimtoje iš šios svetainės (ji buvo sutrumpinta):
     • galva>
     • pavadinimas> ... / pavadinimas>
     • meta pavadinimas = "description" content = "..." />
     • nuoroda rel = "styleheet" type = "text / css" href = "..." />
     • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • stiliaus tipas = "text / css" media = "all"> ... / style>
     • scenarijaus tipas = "text / javascript" src = "..."> / script>
     • / galva>
       
       Jei nepastebėjote, atskiros žymės buvo paryškintos, o tikroji informacija pašalinta. Pavyzdys yra gana trumpas, jame rodoma beveik kiekviena žyma, kurią galima rasti galva>išskyrus HTML komentarus (apie tai kalbėsime paprastomis žymėmis).
8. 8 Paprastos žymos visur
   • Eikime toliau ir pamatysime kitas etiketes. Būkite atsargūs su savo žymėjimu ir prisiminkite nykščio taisyklę „Kapsuliavimas“.
     
     
     • stiprus> pabrėžia svarbų tekstą.
     • mažas> sumažina tekstą. Šrifto dydis matuojamas standartiniais vienetais nuo 1 iki 7, 3 yra numatytasis teksto dydis. ...
     • pre> Apibrėžia raiškiojo teksto bloką. Kaip teisinga, toks tekstas įvedamas tokio paties dydžio šriftu ir su visais tarpais tarp žodžių.
     • em> Rodo tekstą kaip frazę.
     • del> Išbraukia tekstą.
     • ins> Nustato į dokumentą įterptą tekstą.
     • h1> Viena iš daugelio antraščių žymų. Šio tipo žymos prasideda „h“, o jų skaičius skiriasi. Būtinai uždarykite žymą tuo pačiu numeriu.
     • p> Apibrėžia pastraipą.
     • ! --- ... ---> Skirtingai nuo kitų žymų, komentaras turi būti pačios žymos viduje. Ši informacija matoma tik peržiūrėjus kodą.
     • blockquote> Rodo citatą, gali būti naudojama su žyma cite>.
     • Keli aukščiau pateikti pavyzdžiai nėra visas esamų žymų sąrašas. Norėdami sužinoti apie kitus, apsilankykite.
9. 9 Sukurti aiškią struktūrą
   • Puslapiai yra skirti duomenims laikyti paprastuose žymų rinkiniuose, kad galėtume išanalizuoti informaciją į pastraipas. Kompiuteris atpažįsta duomenis, nežino apie kontekstą ar sąvoką. Turime sukurti kompiuteriui pritaikytus HTML puslapius. Tai pasiekiama naudojant div žymą. Tai padeda sukurti daugybę puslapių. Jis gali būti sukurtas naudojant CSS ir yra paprastesnis nei sukurti didelių kodų lentelių išdėstymui.
     • div> Ši žyma yra ypatinga, nes ją galima stilizuoti ir naudoti atskirus informacijos blokus, kuriuos gali suprasti ir vartotojas, ir kompiuteris.
   • Pažvelkime į paprastą HTML išdėstymą, kuriame naudojama div žyma.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // LT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • galva>
     • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     • title> Labas pasaulis! / title>
     • / galva>
     • kūnas>
     • h1> Sveikas pasaulis! / h1>
     • div id = "contentOne">
     • p> Tai yra tekstas div # contentOne. / p>
     • div>
     • p> pastraipa div # contentOne / p> poskyryje
     • / div>
     • / div>
     • / body>
     • / html>
   • „Div> tags“ naudojimas padeda rasti ir keisti stilius dirbant su CSS ir „Javascript“. HTML naudos skirtingą kodavimą, kad galėtų dirbti su CSS stiliais ir „Javascript“, kad sukurtų geresnę ir jautresnę vartotojo patirtį.

Patarimai

• Perskaitę šį straipsnį nesustokite ir pagalvokite, kad sužinojote viską, ką reikia žinoti. Visada yra ko išmokti, ypač naudojant šią technologiją.
• Išmokite, supraskite ir parašykite kodą.
• Atminkite, kad kai kurios žymos naudoja tik>. Para ir br yra keletas pavyzdžių. Kitas žymas, atidarytas su>, reikia toliau uždaryti. Pavyzdžiui, „div> / div>“.
• Žmonės tikisi naujų atradimų, todėl išradinėti, kurti ar koduoti.
• Išmokę daug, pabandykite išmokti serverio programavimo.
• Išmokite dirbti su CSS ir „Javascript“.

Įspėjimai

• Atminkite, kad HTML yra turinio redagavimas. Tai reiškia, kad HTML naudojamas tik žinomo formato turiniui saugoti. Kiti pakeitimai turi būti atlikti naudojant kitas technologijas, pvz., CSS. Tai taip pat reiškia daryti „Semantiškai teisingainet jei kiti to nepripažįsta. Kitos programavimo kalbos padeda kurti tinklalapius (CSS, „Javascript“ ir XML). HTML yra turinio konstruktorius.

Ko tau reikia

• Teksto redaktorius, palaikantis ANSI kodavimą
• Žiniatinklio naršyklė, pvz., „Internet Explorer“ arba „Mozilla Firefox“
• (Pasirenkama) „wysiwyg“ arba „wykiwyg“ HTML redaktorius, pvz., „Adobe Dreamweaver“, „Aptana Studio“ arba „Microsoft Expression Web“