Kuidas kirjutada HTML veebilehti

Järgige seda lehte looma .

HTML või HyperText Markup Language, on põhimõtteliselt komplekt sildid, et suhelda juhiseid brauserid, kuidas informatsiooni kuvada ekraanile.Kui sa mõistad, mida iga silt on ja mida ta teeb, kirjutades veebileht on peaaegu sama lihtne kui kirjalikult toidupoed nimekirja.

, mida te vajate

  • Windows sülearvuti või samaväärne lihttekstiredaktorisse

HTML 101

  1. Avatud uus Notepad fail ja salvestage see töölauale "index.html".Leidke fail oma töölauale;topeltklõps avada see oma veebilehitsejat.Sest nüüd, see peaks ilmuma tühi leht.Mis te teete ja säästa muudatusi Notepad faili, värskendage seda veebilehte testida HTML ja vaadake oma välimust brauseris.

  2. Loo esitatakse järgmised sildid:
    & lt; HTML & gt;
    & lt; / HTML & gt;
    Need sildid ütlen oma brauseri et kõik sisalduvad need sildid on kirjutatud või (kui tegemist on CSS või javascript), on kooskõlas HTML.

  3. Loo oma veebilehel päise kaudu.On line all & lt; HTML & gt;tag, sisestage järgmine komplekt sildid: & l

    t; head & gt;& lt; / Head & gt;

  4. Andke oma lehele pealkiri.Vahel header tags lisatakse järgmine: & lt; TITLE & gt; HTML Test Page & lt; / TITLE & gt ;.Salvestage oma töö ja värskenda lehekülge oma veebibrauseris.Leht peaks ikka tühjad, kuid pealkiri peaks ilmuma nüüd veebilehitseja tiitliribal.

    Teie kodulehel pealkiri peaks ilmuma ülaosas brauseri akent .
  5. Loo Metasildid uuele reale pealkirja all:
    & lt; META NAME = "description" content = "See leht on mõeldud kasutades plain HTML" & gt;
    & lt; META NAME = "märksõnad" content = "HTML, web design, web page design" & gt;

  6. Loo keha oma veebilehel.See on osa, mis ilmub brausereid.
    uuele reale all & lt; / Head & gt;tag, sisestage järgmine sildid: & lt; body & gt; & lt; / body & gt;

  7. Loo sisu.& Lt; body & gt;ja & lt; / body & gt;sildid, kirjuta informatsioon, mis ilmuvad veebilehel.Selles näites tüüpi (või kopeeri ja kleebi) järgmised:
    HTML on lihtne
    See veebileht on valmistatud kasutades lihtne, põhi-hüperteksti märgistuskeel.HTML kasutatakse näitama teksti erinevates stiilides ja värvides.Teksti saab Rasvase kirja, rõhutas, kursiivis või läbikriipsutatud.HTML võib kasutada ka luua seoseid ja lisage pildid leht.

    Vormindamata teksti näitab üles oma brauseri default font seaded .
  8. Loo lehekülje tausta, teksti ja linki värviatribuute sees & lt; body & gt;tag järgmiselt:
    & lt; body bgcolor = "tan" text = "merevägi" link = "blue" vlink = "kesköö" Alink = "aqua" & gt;
    See annab oma lehele punakaspruuni taustal tumesinise teksti.Hüperlingitud tekst ilmub hele sinine alguses, muutub aqua kui külastajad klõpsavad seda ja lõpuks saanud öösinine neile, kes on juba külastanud, et link.

  9. Leia pealkirja "HTML on lihtne."Lisa järgmised sildid keskele ja rõhutada pealkiri:
    & lt; keskus & gt; & lt; H1 & gt; HTML on lihtne & lt; / H1 & gt; & lt; / center & gt;

  10. Kasutage lõikes, või & lt; P & gt;tag, murda ülejäänud teksti kaks lõiku.Pange see silt ees ära joon, "See veebileht on valmistatud kasutades lihtne, põhi-hüperteksti märgistuskeel."Pange see taas ees rida, "HTML saab kasutada ka luua sidemeid ja lisada pilte lehekülge."

  11. Kandke sobivaid formaate sõnad "rasvases kirjas", "rõhutas", "kaldkirjas" ja "läbikriipsutatud."HTML, lause näeb välja selline:
    Tekst võib olla & lt; B & gt; rasvases trükis & lt; / B & gt ;, & lt; U & gt; rõhutas & lt; / U & gt ;, & lt; I & gt; kaldkirjas & lt; / I & gt;või & lt; STRIKE & gt; läbikriipsutatud & lt; / STRIKE & gt ;.

  12. Leidke fraasi "luua sidemeid," on viimane rida teksti.Lülita see sisse hüperlingi Google kodulehekülg lisades Link sildid enne ja pärast fraas, järgmiselt:
    & lt; a href = "luua" & gt; http: //www.google.com "& gt; luua sidemeid & lt; /A & gt;

  13. Lisa Creative Commons litsentsiga foto uuele reale ja tsentreerimiseks järgmiselt:
    & lt; P & gt; & lt; keskus & gt; & lt; IMG src="</center">http://farm1.static.flickr.com/42/122959202_92ef086559.jpg"></center>
    Link foto tagasi algallika, määrata selle ekraani suurus, tappa inetu link piiri ja annab õige krediiti pildi pealkiri, mis ilmuvad, kui külastajad hiir üle pildi.
    Toas & lt; IMG & gt; sildi, lisage suurusja piiri atribuudid:
    & lt; img src = "http://farm1.static.flickr.com/42/122959202_92ef086559.jpg" & gt; width = "240" height = "160" border = "0" & ​​gt;
    LisaLink silte mõlemal pool Image tag:
    & lt; a href = "& amp; lt; IMG" & gt; http: //www.flickr.com/photos/janelinton/122959202/ "& gt; & amp; lt; IMGsrc = "http://farm1.static.flickr.com/42/122959202_92ef086559.jpg" & gt;width = "240" height = "160" border = "0" alt = "Image by I_Shutter Flickr" & gt; & lt; / a & gt;
    Toas Link sildi, lisada pealkiri:
    & lt; a href = "http://www.flickr.com/photos/janelinton/122959202/" title = "Image by I_Shutter Flickr" & gt;
    Õnnitleme.Sa oled kirjutatud oma esimese veebilehe HTML.

Tips & amp;Hoiatused

  • Päis on lõik, mis annab juhiseid veebis, kuidas kuvada ja kataloogi lehel.See sisaldab pealkirja üldiselt kuvatakse veebilehitseja tiitliribal samuti meta tags, mis kirjeldavad lehe sisu ja anda võtmesõnu, mis oleks lihtne otsingumootorid nimekirja oma lehele.Enam arenenud lehti, on see ka siis, kui CSS ja JavaScript läheb.Kohandada mõni päise sisu, lihtsalt asendada tsiteeritud teksti koos oma pealkiri ja meta sisu.Teil on võimalik ühendada ükskõik lehel veebis.Vahetage Google URL URL, täiuslikum "http: //" eesliide, et leht, mida soovid linkida asemel.Pange tähele, et IMG tag seisab üksi.Ei ole & lt; / IMG & gt;lõpusilt.Kuigi me kasutasime standard värvinimede meie keha atribuudid, HTML lugeda ka hexidecimal värvikoodid, mis võimaldab täpsemalt värvi sobitamise.HEX koodid võivad leida Custom Colors osa kõige pildistamine programme;või võite leida online värvi muundurid, nagu Draac.com värvi konverter, mida saab teisendada nii standard inglise nimed ja RGB väärtused HEX koodi.See artikkel on just sulle alanud.Õnneks ei ole puudust HTML õpetused netis.Tutvu viide linke leida õpetused arenenud vormingu tehnikaid ja õppida valdav võimeid HTML web design.
  • Puuduv lõpusildiga, puudu jutumärke või isegi lihtsa kirjaviga võib murda oma veebilehel, kuid ärge muretsege.Sellised vead on lihtne leida ja parandada, kuna need on teha tänu kontrollijaid näiteks W3C Markup süntaksi.Need programmid veenduge, et teie kood on õige ja kergesti arusaadavad ja kõik veebibrauserid.

Resources

  • W3C Markup Validation Service
  • HTML kood juhendaja - Tasuta Reference Guide for Help HTML sildid
  • Draac.com värvi Converter
762
0
4
Web Design