Turinys

• Žingsniai
• 1 dalis: Kaip aš atradau HTML
• Patarimas
• Įspėjimas
• Ko tau reikia

HTML („HyperText Markup Language“) yra pagrindinė kalba kuriant tinklalapius. Jis buvo sukurtas kaip lengva ir lanksti kodavimo kalba. Beveik kiekviena interneto svetainė yra sukurta naudojant tam tikrą šio kodo formą („ColdFusion“, XML, XSLT). HTML lengva suvokti, tačiau galite ilgai mokytis apie jį, jei jus domina visapusiškas jo funkcionalumas. Norėdami pridėti spalvų ir įdomių savo svetainės, galite išmokti pagrindinio CSS, kai tik priprantate prie pagrindinio HTML puslapio.

Žingsniai

1 dalis iš 4: Dokumento sudarymas

1. 

   Atidarykite paprastą teksto rengyklę. „NotePad“ yra geras pasirinkimas ir jį galima atsisiųsti nemokamai. Galite rašyti HTML su daugeliu teksto redaktorių, tačiau sudėtingesnė programinė įranga su automatinio formatavimo galimybėmis gali apsunkinti HTML puslapio tvarkymą.
   • Nenaudokite „TextEdit“, nes paprastai failas išsaugomas tokiu formatu, kurio jūsų naršyklė gali neatpažinti kaip HTML.
   • Taip pat galite naudoti internetinį HTML redaktorių. Specialios HTML redagavimo programos nerekomenduojamos pradedantiesiems.

2. 

   
   
   Išsaugokite failą kaip tinklalapį. Viršuje esančiame meniu pasirinkite Failas → Išsaugoti kaip. Pakeiskite failo formatą į „Tinklalapis“, „.html“ arba „.htm“. Išsaugokite failą ten, kur jį lengvai rasite.
   • Tarp šių trijų variantų nėra skirtumo.

3. 

   Atidarykite failą naršyklėje. Dukart spustelėkite failą ir jis bus automatiškai atidarytas kaip tuščias jūsų naršyklės tinklalapis. Arba galite atidaryti naršyklę, pvz., „Firefox“ ar „Internet Explorer“, tada naudoti failą → Atidaryti failą, kad pasirinktumėte dokumentą.
   • Ši svetainė nėra internete. Tai galima žiūrėti tik jūsų kompiuteryje.

4. 

   
   
   Atnaujinkite tinklalapį ir pamatykite atliktus pakeitimus. Į tuščią dokumentą įveskite: Sveiki. Išsaugokite dokumentą. Atnaujinkite tuščią tinklalapį savo naršyklėje, ir puslapio viršuje turėtumėte pamatyti paryškintą žodį „Labas“. Visada, kai norite išbandyti savo naują HTML, naudodami šią mokymo programą, išsaugokite .htm dokumentą ir atnaujinkite naršyklės langą, kad pamatytumėte, kaip kompiliuojamas HTML.
   • Jei pamatysite žodžius „"ir"Pasirodo jūsų naršyklėje, failas netinkamai sukompiliuotas HTML. Išbandykite kitą teksto rengyklę arba kitą naršyklę.

5. 

   
   
   Sužinokite žymes. HTML komandos parašytos „žymomis“, kurios nurodo naršyklei, kaip sukompiliuoti ir rodyti jūsų tinklalapį. Jie visada rašomi vienose kabutėse ir nėra rodomi tinklalapyje, kaip juos naudojote aukščiau pateiktame pavyzdyje:
   • yra „pradinė kortelė“ arba „atidarymo kortelė“. Viskas, kas parašyta po šia žyma, bus apibrėžta kaip „paryškinta“ (paryškinta tinklalapyje).
   • yra „pabaigos žyma“ arba „pabaigos žyma“, kurią galite atskirti pagal simbolį / ženklą. Tai žymi paryškinto teksto pabaigą. Daugumai (ne visoms) žymoms reikia galinės žymos, kad veiktų, todėl būtinai įtraukite ją.

6. 

   Sukurkite savo dokumentą. Ištrinkite viską iš HTML dokumento. Pradėkite nuo šio teksto tiksliai taip, kaip jis buvo parašytas (atėmus taškus). Šis HTML kodas nurodo naršyklei, kokį HTML tipą naudojate, ir kad visas jūsų HTML bus įdėtas į žymas. ir .

7. 

   Pridėkite galvos (galvos) ir kūno žymes. HTML dokumentai yra suskirstyti į dvi dalis. Skiltyje „viršuje“ pateikiama speciali informacija, pvz., Puslapio pavadinimas. Skyriuje „turinys“ yra pagrindinis puslapio turinys. Pridėkite abi šias skiltis prie savo dokumento ir nepamirškite įtraukti pabaigos žymų. Naujai pridėtas tekstas paryškintas:

8. 

   Suteikite savo puslapiui pavadinimą. Daugelio kortelių, esančių galvos skyriuje, nesvarbu mokytis kartu su pradedančiuoju. Vis dėlto pavadinimo žymą lengva naudoti ir ji nustatys, kas rodoma kaip naršyklės lango pavadinimas arba naršyklės skirtuke. Įdėkite antraštės pradžios ir pabaigos žymas ant antraščių ir tarp tų žymų įrašykite visas jums patinkančias antraštes:
   skelbimas

2 dalis iš 4: teksto formatavimas

1. 

   Pridėkite teksto prie kūno. Šiame skyriuje dirbsime tik su kūno žymomis. Kitas tekstas vis tiek bus jūsų dokumente, tačiau mes sutaupysime vietos nekartodami jo šioje pamokoje. Tarp kortelių užrašykite viską, ko norite ir , ir jis bus rodomas kaip pirmasis jūsų puslapio turinys. Pavyzdžiui:
   • Laikiausi „wikiHow“ instrukcijų, norėdamas parašyti HTML puslapį.

2. 

   Pridėti teksto antraštes. Sutvarkykite savo puslapį naudodami antraštės žymas, kurios nurodo naršyklei tarp jų rodyti tekstą didesniu šrifto dydžiu. Šias žymes taip pat naudoja paieškos sistemos ir kiti įrankiai, kad nustatytų, kokia yra jūsų svetainė ir kaip ji sutvarkyta.
   yra didžiausia antraštė ir galite sukurti mažesnes antraštes iki
   . Išbandykite juos savo puslapyje:
   • Sveiki atvykę į mano puslapį.

   • Laikiausi „wikiHow“ instrukcijų, norėdamas parašyti HTML puslapį.

   • Mano tikslas šiandien:

   • Įgyvendinti tikslai:

   • Sužinokite, kaip naudoti antraštes.

   • Neužbaigti tikslai:

   • Sužinokite daugiau apie teksto formatavimo žymas.

3. 

   Sužinokite daugiau apie teksto formatavimo žymas. Jūs jau matėte „stiprią“ žymą, tačiau yra daugybė kitų būdų, kaip formatuoti tekstą. Išbandykite šias žymes arba su keliomis žymomis vienu metu tai pačiai teksto eilutei. Nepamirškite pridėti galinių žymų gale!
   • Svarbus tekstas, paryškintas naršyklėje.
   • Pabrėžtas tekstas, naršyklėje rodomas kursyvu.
   • Tekstas šiek tiek mažesnis nei įprastai. Šis tekstas bus automatiškai pakeistas, jei bus naudojamas antraštėje.
   • Tekstas nebeaktualus, rodomas su kūno brūkšneliu.
   • Tekstas įterpiamas vėliau nei kiti dokumentai, rodomas pabrauktais.

4. 

   Tvarkykite tekstą savo puslapyje. Galbūt pastebėjote, kad nepakanka paspausti klavišą „Enter“, kad tekstas būtų rodomas kitoje eilutėje. Šios žymos gali padėti sukurti pastraipas ir eilučių pertraukas arba sutvarkyti tekstą kitais būdais:

   • Trumpai tariant „pastraipą“, (pastraipos) žyma išlaikys visą tekstą tarp šių žymių pastraipoje ir atskirs nuo virš ir po jo esančio teksto.

   • 
     Ši žyma sugeneruos eilutes. Nepridėkite prie jos pabaigos žymos, nes ji netrukdo jokiam kitam turiniui. Šią žymą naudokite eilėraščiuose ar adreso eilutėse, o ne pastraipose.

   • Jei jums reikia rodyti tekstą labai tiksliai, ši žyma nustato jame esantį tekstą fiksuoto pločio šriftu (kiekvienos raidės yra vienodo pločio) ir leidžia kurti intervalus tuščios ir eilučių pertraukėlės, kaip norite reguliariai redaguoti, o ne naudoti žymas.

   • Ši žyma apibrėžia teksto, kuris cituojamas iš šaltinio, tipą.

     Šaltinį galite apibūdinti vėliau naudodami citatos kortelė.

5. 

   Pridėkite nematomą antraštės tekstą. Komentarų žymos tinklalapyje nerodomos. Jie leidžia jums anotuoti save HTML dokumente, nedarant įtakos turiniui. Nepridėkite pabaigos žymos.
   • Kortelės, kurios eina vienos be pabaigos žymių, vadinamos „tuščiomis žymomis“.

6. 

   Sujunkite juos kartu. Geriausias būdas prisiminti šias žymas yra naudoti jas savo svetainėje. Pateiksime pavyzdį, kaip korteles naudoti iki šiol išmoktuose žingsniuose. Pabandykite numatyti, kaip jie bus rodomi naršyklėje, tada nukopijuokite juos į savo dokumentą ir sužinokite.
   • Sveiki atvykę į mano svetainę.

   • Tikiuosi, kad jums patiks šis puslapis!

     Aš tai padariau tik tau.

   • 1 dalis: Kaip aš atradau HTML

   • Aš jau išmokau HTML vienas duvalandų, todėl dabar esu ekspertas.
   skelbimas

3 dalis iš 4: Nuorodų ir vaizdų pridėjimas

1. 

   Sužinokite apie atributus. Žymose gali būti parašyta papildoma informacija, vadinama atributais. Šiuos atributus forma žymi papildomi žodžiai pačiose žymose ypatybės pavadinimas = "konkreti vertė". Pavyzdžiui, bet kuri HTML žyma gali turėti pavadinimo atributą:

   • Įvadinė pastraipa yra čia.

     Pavadinkite pastraipą „Apie“, kuri bus rodoma užvedus pelės žymeklį ant pastraipos tinklalapyje.

2. 

   Nuorodos į kitas svetaines. Kortelių naudojimas sukurti hipersaitą į bet kurį kitą tinklalapį. Įterpkite tinklalapio URL, kurį norite susieti su „href“ atributu. Štai pavyzdys, kuris susieja su jūsų skaitomu tinklalapiu:
   • Jūsų svetainės lankytojai gali spustelėti šį tekstą ir spustelėti nuorodą.

3. 

   Prie žymos pridėkite ID atributą. Kitas atributas, kurį gali naudoti bet kuri HTML žyma, yra elementas „id“. Bet kurioje kortelėje parašykite id = "vidu" arba naudokite bet kokį pavadinimą, kuriame nėra tarpų. Tai nesukelia jokio matomo efekto, bet mes jį panaudosime kitame etape.
   • Pavyzdžiui, prie savo dokumento pridėkite:

     Ši pastraipa naudojama kaip pavyzdys apibūdinant, kaip veikia atributas „id“.

4. 

   Susieti su elementu su tam tikru ID. Dabar galime naudoti hipersaito žymą, , norėdami susieti su kita vieta tame pačiame puslapyje. Vietoj URL naudosime simbolį #, po kurio nurodoma ID vertė, su kuria norime susieti. Pavyzdžiui, Šis tekstas bus susietas su tekstu „vidu“.
   • Visoms HTML reikšmėms skiriamos didžiosios ir mažosios raidės. „#VIDU“ ir „#vidu“ susies tą pačią vietą.
   • Jei jūsų puslapis yra pakankamai trumpas, kad būtų rodomas visas puslapis vienu metu, greičiausiai nieko nepastebėsite, kai spustelėsite nuorodą savo naršyklėje. Pakeiskite lango dydį, kol atsiras slinkties juosta, tada bandykite dar kartą.

5. 

   Pridėti nuotraukų. Kortelė yra tuščia žymė, vadinasi, pabaigos žymos nereikia. Visa informacija, kurios reikia naršyklei atvaizduoti, pridedama naudojant atributus. Štai pavyzdys, kaip rodyti „wikiHow“ logotipą su kiekvieno atributo aprašymu:
   • 
   • Savybės src = "" nurodo naršyklei, kur yra nuotrauka. (Atminkite, kad nuotraukos paskelbimas iš kito asmens svetainės laikomas netinkamu - ir nuotrauka dings, kai puslapis nebebus aktyvus.)
   • Savybės style = "" Tai gali padaryti daug dalykų, bet svarbiausia, kad jis nustatytų vaizdo plotį ir aukštį pikseliais. (Vietoj to taip pat galite naudoti atskirus atributus width = "" ir height = "", tačiau tai gali sukelti keistų dydžių keitimo problemų, jei naudojate CSS.)
   • Savybės alt = "" yra trumpas vaizdo aprašymas, kurį vartotojas pamatys, jei nepavyko įkelti vaizdo. Tai laikoma reikalavimu, nes jis naudojamas aklųjų interneto lankytojų ekrano skaitytuvams.
   skelbimas

4 dalis iš 4: sužinokite daugiau, kaip pridėti ir prisijungti prie savo svetainės

1. 

   Patvirtinkite savo HTML. HTML tikrinimas tikrina, ar nėra klaidų jūsų kode. Jei jūsų svetainė rodoma netinkamai, patvirtinimas gali padėti rasti klaidą, kuri sukelia problemą. Tai taip pat gali išmokti daugiau sužinoti apie HTML nustatant, kad kodas gerai atrodo ekrane, tačiau jis nebėra rekomenduojamas dėl naujų HTML standarto atnaujinimų. Neteisingo HTML naudojimas nepadaro jūsų svetainės nenaudinga, tačiau gali sukelti problemų arba būti nestabilus skirtingose ​​naršyklėse.
   • Išbandykite nemokamą internetinę patvirtinimo paslaugą iš W3C arba internete ieškokite kito HTML 5 patvirtinimo įrankio.

2. 

   Sužinokite daugiau žymių ir atributų. Yra daugybė kitų HTML žymų ir atributų bei daugybė vietų, kur juos išmokti:
   • Išbandykite „w3schools“ ir „HTML Dog“, kad gautumėte daugiau pamokų ir išsamų žymių sąrašą.
   • Suraskite jums patinkantį tinklalapį, kaip jis atrodo, tada naudokite savo naršyklės funkciją „Peržiūrėti puslapio šaltinį“, kad patys gautumėte HTML kodą. Nukopijuokite jį į savo dokumentą ir ištirkite, kaip jis veikia.
   • Skaitykite kitus straipsnius ir sužinokite, kaip kurti lenteles HTML, naudoti metažymas, kad padidintumėte tikimybę ją rasti per paieškos variklius, arba naudokite skirstymą. nurodyti sritį puslapyje) ir ruožas (naudojamas teksto elemento stiliui nurodyti), kad padėtų stilius per CSS.

3. 

   Gaukite savo internetinę svetainę. Pasirinkite savo svetainės talpinimo paslaugą ir tada į savo asmeninį žiniatinklio domeną galite įkelti tiek HTML puslapių, kiek norite. Norėdami tai padaryti, turėsite naudoti FTP įkėlimo programinę įrangą, tačiau daugelis interneto nuomos paslaugų taip pat siūlo šią paslaugą.
   • Susiedami su puslapiais ar vaizdais, esančiais tiesiogiai jūsų svetainėje, turėsite naudoti visą adresą. Pavyzdžiui, jei jūsų domeno vardas yra www.chuyengiahtmlsieudang.com, tada tekstas yra šiose žymose bus nuoroda į „www.chuyengiahtmlsieudang.com/nhatky/thuhai.html“

4. 

   Pridėkite stilių naudodami CSS. Jei jūsų HTML puslapis atrodo šiek tiek monotoniškas, pabandykite išmokti CSS pagrindų, kad galėtumėte pridėti spalvų, skirtingų šriftų ir geriau valdyti elementų vietą. Susieję CSS „stiliaus lapą“ su HTML puslapiu galėsite atlikti kardinalių pakeitimų skriejant, automatiškai koreguojant viso teksto stilių nurodytoje žymoje. Čia galite šiek tiek žaisti su pagrindiniu formatavimo sluoksniu arba pasinerti į išsamesnes HTML Dog CSS pamokos pamokas.

5. 

   Pridėkite „JavaScript“ prie savo svetainės. „JavaScript“ yra programavimo kalba, naudojama norint pridėti daug funkcijų jūsų HTML puslapiuose. „JavaScript“ komandos įterpiamos tarp pradžios ir pabaigos žymų ir gali būti naudojamas interaktyviems mygtukams pridėti, matematikos užduotims apskaičiuoti ir kt. Sužinokite daugiau w3c pavyzdžiuose. skelbimas

Patarimas

• Šiame vadovėlyje naudojama „doctype“ deklaracija (naudojama dokumento tipo deklaracija) yra „laisvas HTML 4.0.1 pereinamasis“ (HTML 4.0.1 nėra griežtas perėjimas), lengvas formatas. naujokams naudoti. Naudoti () alternatyva, kai naršyklė ją kompiliuoja griežtu HTML 5 formatu, kuris yra rekomenduojamas (nors ir rečiau naudojamas) standartinis stilius.

Įspėjimas

• HTML tikslas yra išlaikyti turinį pasauliniu formatu. Jis nekontroliuoja jūsų svetainės pateikimo, pvz., Fono spalvos ir tikslaus elementų išdėstymo. Nors vis dar yra žymių, leidžiančių tai padaryti, patartina naudoti CSS, kad sukurtumėte labiau kontroliuojamą ir nuoseklią svetainę.

Ko tau reikia

• Paprastas teksto redaktorius, pvz., „NotePad“ ar „TextEdit“
• Interneto naršyklė, pavyzdžiui, „Internet Explorer“ arba „Mozilla Firefox“
• (Pasirenkama) HTML redaktorius, pvz., „Adobe Dreamweaver“, „Aptana Studio“ arba „Microsoft Expression Web“