Hvernig á að skrifa HTML síðu (með myndum) - Ábendingar

Efni.

Skref
Hluti 1: Hvernig ég uppgötvaði HTML
Ráð
Viðvörun
Það sem þú þarft

HTML (HyperText Markup Language) er grunnmál til að byggja vefsíður. Það var búið til sem auðvelt og sveigjanlegt kóðunarmál. Næstum allar vefsíður á Netinu eru þróaðar með einhvers konar þessum kóða (ColdFusion, XML, XSLT). Auðvelt er að átta sig á HTML en þú getur haldið áfram að læra um það lengi ef þú hefur áhuga á alhliða virkni þess. Til að bæta lit og skemmtun á vefsíðuna þína geturðu lært grunn CSS um leið og þú venst grunn HTML síðu.

Skref

Hluti 1 af 4: Að byggja skjal

Opnaðu einfaldan textaritil. NotePad er góður kostur og er hægt að hlaða niður ókeypis. Þú getur skrifað HTML með flestum textaritlum, en flóknari hugbúnaður með sjálfvirkri sniðmöguleika getur gert það erfitt að skipuleggja HTML síðuna þína.
- Ekki nota TextEdit, þar sem það vistar skrána venjulega á því sniði sem vafrinn þinn kannast ekki við sem HTML.
- Þú getur líka notað HTML ritstjóra á netinu. Sérstök HTML klippiforrit eru ekki ráðlögð fyrir byrjendur.
Vistaðu skrá sem vefsíðu. Veldu File → Save As í valmyndinni efst. Breyttu skráarsniðinu í „Vefsíðu“, „.html“ eða „.htm“. Vistaðu skrána þar sem þú getur fundið hana auðveldlega.
- Það er enginn munur á þessum þremur valkostum.
Opnaðu skrána í vafra. Tvísmelltu á skrána og hún opnast sjálfkrafa sem auð vefsíða í vafranum þínum. Einnig er hægt að opna vafra, eins og Firefox eða Internet Explorer, og nota síðan File → Open File til að velja skjalið.
- Þessi vefsíða er ekki á netinu. Það er aðeins hægt að skoða á tölvunni þinni.
Endurnýjaðu vefsíðuna og sjáðu þær breytingar sem gerðar voru. Sláðu inn eftirfarandi í tóma skjalið þitt: Halló. Vista skjalið. Endurnýjaðu auða vefsíðuna í vafranum þínum og þú ættir að sjá orðið „Halló“ feitletrað birtast efst á síðunni. Alltaf þegar þú vilt prófa nýja HTML-ið þinn meðan á þessari kennslu stendur skaltu vista .htm skjalið og endurnýja síðan vafragluggann til að sjá hvernig HTML er samsett.
- Ef þú sérð orðin „"og"'' Birtist í vafranum þínum, skráin hefur ekki verið sett saman rétt í HTML. Prófaðu annan textaritil eða annan vafra.
Lærðu merkin. HTML skipanir eru skrifaðar í „tags“ sem segja vafranum hvernig á að setja saman og birta vefsíðuna þína. Þau eru alltaf skrifuð í einstökum tilvitnunum
, og eru ekki birtar á vefsíðunni eins og þú notaðir í dæminu hér að ofan:
- er „upphafskort“ eða „upphafskort“. Allt sem er skrifað eftir þessu merki verður skilgreint sem „feitletrað“ (feitletrað á vefsíðu).
- er „lokamerki“ eða „lokamerki“ sem þú getur greint með tákninu / tákninu. Það táknar lok feitletraðs texta. Flest (ekki öll) merkin þurfa lokamerki til að virka, svo vertu viss um að hafa það með.
Búðu til skjalið þitt. Eyddu öllu í HTML skjalinu þínu. Byrjaðu aftur með eftirfarandi texta, nákvæmlega eins og hann var skrifaður (að frádregnum punktum). Þessi HTML kóði segir vafranum hvaða tegund af HTML þú ert að nota og að allur þinn HTML verði settur í merkin. og .
Bættu við höfuð (höfuð) og líkamsmerki. HTML skjölum er skipt í tvo hluta. Hlutinn „efst“ er til sérstakra upplýsinga, eins og titill síðunnar. Kaflinn „body“ inniheldur aðal innihald síðunnar. Bættu báðum þessum hlutum við skjalið þitt og mundu að láta lokamerkin fylgja með. Nýbætti textinn er feitletraður:
Gefðu síðunni þinni titil. Flest kortin í haushlutanum eru ekki mikilvæg til að læra með byrjendunum. Titilmerkið er þó auðvelt í notkun og mun ákvarða hvað birtist sem nafn vafragluggans eða á flipanum. Settu upphafs- og lokamerki fyrirsagnarinnar inni í höfuðmerkjunum og skrifaðu hvaða haus sem þú vilt á milli þessara merkja:
- Fyrsta HTML síðan mín.
auglýsing

2. hluti af 4: Textasnið

Bættu texta við líkama þinn. Í þessum kafla munum við aðeins vinna með líkamsmerki. Hinn textinn verður ennþá í skjalinu þínu en við munum spara pláss með því að endurtaka hann ekki í þessari kennslu. Skrifaðu hvað sem þú vilt á milli kortanna og , og það mun birtast sem fyrsta efnið á síðunni þinni. Til dæmis:
- Ég fylgdi leiðbeiningum wikiHow um að skrifa HTML síðu.
Bættu við fyrirsögnum fyrir textann. Skipuleggðu síðuna þína með fyrirsagnamerkjum, sem leiðbeina vafranum um að birta texta á milli þeirra í stærri leturstærð. Þessi merki eru einnig notuð af leitarvélum og öðrum tækjum til að ákvarða um hvað vefsvæðið þitt snýst og hvernig það er skipulagt.

er stærsta fyrirsögnin og þú getur búið til minni fyrirsagnir allt að

. Prófaðu þá á síðunni þinni:
- Verið velkomin á síðuna mína.
- Ég fylgdi leiðbeiningum wikiHow um að skrifa HTML síðu.
- Markmið mitt í dag:
- Lokið markmið:
- Lærðu hvernig á að nota fyrirsagnir.
- Ókláruð markmið:
- Frekari upplýsingar um textasnið.
Frekari upplýsingar um snið fyrir textasnið. Þú hefur þegar séð „sterka“ merkið en það eru fullt af öðrum leiðum til að sníða textann þinn. Prófaðu þessi merki, eða með mörgum merkjum í einu fyrir sama textastreng. Mundu að bæta við lokamerkjum aftan á!
- Mikilvægur texti, birtur feitletraður í vafranum.
- Lögð áhersla á texta, birt í skáletrun í vafranum.
- Texti aðeins smærri en venjulega. Þessi texti breytist sjálfkrafa ef hann er notaður í fyrirsögn.
- ~~Texti er ekki lengur viðeigandi, sýndur með meginstriki.~~
- Texti er settur inn seinna en önnur skjöl, sýnd með undirstrikum.
Skipuleggðu texta á síðunni þinni. Þú hefur kannski tekið eftir því að ýta á „enter“ takkann er ekki nóg til að textinn birtist á annarri línu. Þessi merki geta hjálpað þér að búa til málsgreinar og línuskil eða raða textanum á annan hátt:
- Stytting á „málsgrein“ (málsgrein) merki mun geyma allan texta á milli þessara merkja í málsgrein og aðgreina hann frá textanum fyrir ofan og neðan.
- Þetta merki mun búa til línuskil. Ekki bæta við lokamerki við það, þar sem það truflar ekkert annað efni. Notaðu þetta merki í ljóðum eða heimilisfangslínum, ekki málsgreinum.
- ```
Ef þú þarft að sýna textann mjög nákvæmlega stillir þetta merki textann inni í fastri breidd leturgerð (hver stafur hefur sömu breidd) og gerir þér kleift að búa til millibili Auðir og línuskil eins og þú vilt fyrir venjulegar breytingar í stað merkja.
```
- Þetta merki skilgreinir tegund texta sem vitnað er í frá uppruna.
  Þú getur lýst heimildinni síðar með vitna í kort.
Bættu við ósýnilegan texta texta. Athugasemdamerki eru ekki birt á vefsíðunni. Þeir leyfa þér að skrifa athugasemdir við HTML skjalið án þess að hafa áhrif á innihaldið. Ekki bæta við lokamerki.
- Spilin sem fara ein án þess að binda enda á kallast „tóm merki“.
Sameina þau saman. Besta leiðin til að muna þessi merki er að nota þau á vefsíðunni þinni. Hér er dæmi um að nota spilin í skrefunum sem þú hefur lært hingað til. Reyndu að spá fyrir um hvernig þeir birtast í vafranum, afritaðu þá yfir á skjalið þitt og komdu þér að því.
- Fyrsta HTML síðan mín.
- Verið velkomin á heimasíðuna mína.
- Vona að þú hafir gaman af þessari síðu!
  Ég bjó það til bara fyrir þig.
- Hluti 1: Hvernig ég uppgötvaði HTML
- Ég hef lært HTML þegar í ~~einn~~ tvöklukkustundir, svo nú er ég sérfræðingur.
auglýsing

Hluti 3 af 4: Bæta við krækjum og myndum

Lærðu um eiginleika. Merki geta verið með viðbótarupplýsingar skrifaðar inni í þeim, kallaðar eiginleikar. Þessir eiginleikar eru táknaðir með viðbótarorðum innan merkjanna sjálfra, í forminu eignarheiti = "sérstakt gildi". Til dæmis getur hvaða HTML tag sem er haft titilinn eigind:
- Inngangsgreinin er hér.
  Titill málsgreinina „Inngangur“ sem birtist þegar þú sveima yfir málsgreininni á vefsíðunni.
Tenglar á aðrar vefsíður. Notkun korta til að búa til tengil á hverja aðra vefsíðu. Settu inn slóð vefsíðunnar sem þú vilt tengja við með því að nota href eiginleikann. Hér er dæmi sem tengir á vefsíðuna sem þú ert að lesa:
- Gestir þínir á vefsíðu þinni geta smellt á þennan texta til að fylgja hlekknum.
Bættu auðkenni eiginleika við merkið. Annar eiginleiki sem hvaða HTML merki sem er getur notað er „id“ þátturinn. Í hvaða kort sem er, skrifaðu id = "vidu" eða notaðu hvaða heiti sem inniheldur engin bil. Það hefur ekki nein sýnileg áhrif en við munum nota þau í næsta skrefi.
- Til dæmis skaltu bæta eftirfarandi við skjalið þitt:
  Þessi málsgrein er notuð sem dæmi til að lýsa því hvernig eiginleiki id virkar.
Tengill við frumefni með ákveðnu auðkenni. Nú getum við notað tengilmerkið, , til að tengja á annan stað á sömu síðu. Í staðinn fyrir vefslóð notum við # táknið og síðan auðkennisgildið sem við viljum tengja við. Til dæmis, Þessi texti mun tengjast textanum með auðkenninu „vidu“.
- Öll HTML gildi eru há og há. „#VIDU“ og „#vidu“ munu bæði tengjast á sama stað.
- Ef síðan þín er nægilega stutt til að birta alla síðuna í einu muntu líklega ekki taka eftir neinu þegar þú smellir á hlekkinn í vafranum þínum. Breyttu stærð á glugga þar til skrunröndin birtist og reyndu síðan aftur.
Bættu við myndum. Spil er autt merki, sem þýðir að ekki er þörf á lokamerki. Allar upplýsingar sem vafrinn þarf til að sýna myndina er bætt við með eiginleikum. Hér er dæmi um að sýna wikiHow lógóið, með lýsingu fyrir hvern eiginleika á eftir:
- Fasteignir src = "" segir vafranum hvar myndin er. (Athugið að birting ljósmyndar frá vefsíðu einhvers annars er talin óviðeigandi - og myndin hverfur þegar síðan er ekki lengur virk.)
- Fasteignir stíll = "" Það getur gert margt en síðast en ekki síst er það notað til að stilla breidd og hæð myndar í pixlum. (Þú getur líka notað aðskildu eiginleikana width = "" og height = "" í staðinn, en þetta getur leitt til skrýtinna stærðarvandamála ef þú notar CSS.)
- Fasteignir alt = "" er stutt lýsing á myndinni sem notandinn sér ef ekki tókst að hlaða myndina. Þetta er talið krafa, þar sem það er notað fyrir skjálesara fyrir vefsíðugesti sem eru blindir.
auglýsing

Hluti 4 af 4: Frekari upplýsingar um að bæta við og fá vefsíðu þína á netinu

Staðfestu HTML. HTML staðfesting kannar hvort villur séu í kóðanum þínum. Ef vefsvæðið þitt birtist ekki rétt getur löggilding hjálpað þér að finna villuna sem veldur vandamálinu. Það getur líka kennt þér meira um HTML með því að ákvarða að kóðinn líti vel út á skjánum, en það er ekki lengur mælt með því vegna nýrra uppfærslna í HTML staðlinum. Notkun ógildrar HTML gerir vefsvæðið þitt ekki ónýtt, en getur valdið vandamálum eða birtingu óstöðugt í mismunandi vöfrum.
- Prófaðu ókeypis löggildingarþjónustu á netinu frá W3C eða leitaðu að öðru HTML 5 löggildingartæki á netinu.
Frekari upplýsingar um merki og eiginleika. Það eru mörg önnur HTML merki og eiginleikar og margir staðir til að læra þau:
- Prófaðu w3schools og HTML Dog fyrir fleiri námskeið og fullkomna lista yfir merki.
- Finndu vefsíðu sem þér líkar við hvernig hún lítur út og notaðu síðan „View Page Source“ aðgerðina til að fá HTML kóðann sjálfur. Afritaðu það í skjalið þitt og kynntu þér hvernig það virkar.
- Lestu aðrar greinar og kynntu þér hvernig á að búa til töflur í HTML, notaðu metamerki til að auka líkurnar á að þú finnir það í gegnum leitarvélar eða notaðu deild. stilltu svæði á síðunni) og svið (notað til að tilgreina stíl textaþáttarins) til að hjálpa stíl í gegnum CSS.
Fáðu vefsíðu þína á netinu. Veldu þjónustu til að hýsa vefsíðu þína og þá geturðu hlaðið inn eins mörgum HTML síðum og þú vilt á þitt persónulega veflén. Til að gera þetta þarftu að nota FTP hlaða upp hugbúnað, en margir vefleiguþjónustur bjóða þessa þjónustu líka.
- Þegar þú tengir við síður eða myndir sem eru beint á síðunni þinni þarftu að nota fullt heimilisfang. Til dæmis, ef lénið þitt er www.chuyengiahtmlsieudang.com, þá textinn er í þessum merkjum mun krækja í „www.chuyengiahtmlsieudang.com/nhatky/thuhai.html“
Bættu við stílum með CSS. Ef HTML síðan þín lítur svolítið einhæf út, reyndu að læra grunnatriði CSS til að bæta við litum, mismunandi leturgerðum og betri stjórn á því hvar þættir eru settir. Að tengja CSS „stílblað“ við HTML síðu gerir þér kleift að gera róttækar breytingar á flugu og aðlaga sjálfkrafa stíl alls texta innan tiltekins merkis. Þú getur spilað svolítið með grunnformatlagið hér, eða grafið aðeins meira með CSS kennslu HTML hundsins.
Bættu JavaScript við vefsíðuna þína. JavaScript er forritunarmál sem notað er til að bæta við virkni á HTML síðurnar þínar. JavaScript skipanirnar eru settar inn milli upphafs- og lokamerkjanna , og er hægt að nota til að bæta við gagnvirkum hnöppum, reikna stærðfræðidæmi og fleira. Finndu meira í w3c dæmunum. auglýsing

Ráð

Skjalagerðaryfirlýsingin (Document Type Declaration used) sem notuð er í þessari kennslu er „laus HTML 4.0.1 tímabundin“ (HTML 4.0.1 ekki þétt umskipti), auðvelt snið. fyrir nýliða að nota. Notaðu () valkostur við að láta vafrann setja hann saman á ströngu HTML 5 sniði, sem er ráðlagður (þó sjaldan notaður) staðall stíll.

Viðvörun

Tilgangur HTML er að halda efni á alþjóðlegu sniði. Það hefur enga stjórn á framsetningu vefsíðu þinnar, svo sem bakgrunnslit og nákvæma staðsetningu þáttanna. Þó að það séu enn merki sem gera þér kleift að gera þetta, þá er það góð hugmynd að nota CSS til að búa til meira stjórnandi og stöðugri vefsíðu.

Það sem þú þarft

Einfaldur textaritill, eins og NotePad eða TextEdit
Vafri, svo sem Internet Explorer eða Mozilla Firefox
(Valfrjálst) HTML ritstjóri eins og Adobe Dreamweaver, Aptana Studio eða Microsoft Expression Web