Miten Kirjoita HTML-sivuja

Seuraa ohjeita luoda tämän sivun .

HTML, Hypertext Markup Language, on pohjimmiltaan joukko tunnisteita, jotka antaa ohjeita Internet-selaimet, miten näyttää tietoja kuvaruudussa.Kun ymmärrät, mitä kukin tunniste on ja mitä se tekee, kirjoittaminen web-sivu on lähes yhtä helppoa kuin kirjoittaminen päivittäistavarakaupan lista.

mitä tarvitset

  • Windows Notebook tai vastaava tavallinen tekstieditori

HTML 101

  1. Avaa uusi Muistio-tiedosto ja tallenna se työpöydälle nimellä "index.html."Etsi tiedosto työpöydällesi;tupla-klikkaa sitä avata sen selaimessa.Nyt, sen pitäisi näkyä tyhjä sivu.Kun teet ja tallentaa muutokset Notepad tiedosto, päivitä tämä verkkosivustoa testata HTML ja tarkistaa sen ulkonäkö selaimessasi.

  2. Luo avainsanoja:
    & lt; HTML & gt;
    & lt; / HTML & gt;
    Nämä tunnisteet kertovat selaimen, että kaikki sisällä näitä elementtejä on kirjoitettu tai (kun on kyse CSS tai javascript) on yhteensopiva HTML.

  3. Luo Web-sivun otsikon.Linjalla alle & lt; HTML & gt;tag, kirjoita avainsanoja: &

    lt; head & gt;& Lt; / head & gt;

  4. Anna sivun otsikko.Välillä header tags jälkeen seuraava: & lt; title & gt; HTML testisivu & lt; / title & gt ;.Tallenna työsi ja päivitä sivu selaimessasi.Sivu olisi silti näkyä tyhjä, mutta otsikko pitäisi nyt näkyä selaimen otsikkorivillä.

    Verkkosivusi otsikko pitäisi näkyä yläreunassaselainikkunan .
  5. Luo meta uudelle riville otsikon:
    & lt; META NAME = "description" content = "Tämä sivu on suunniteltu käyttäen HTML" & gt;
    & lt; META NAME = "avainsanat" content = "HTML, web design, web-sivujen suunnittelu" & gt;

  6. Luo kehon Web-sivun.Tämä on osa, joka näkyy selaimissa.
    uudelle riville alla & lt; / head & gt;tag, kirjoita seuraavat tunnisteet: & lt; body & gt; & lt; / body & gt;

  7. Luo sisältöä.& Lt; body & gt;ja & lt; / body & gt;tunnisteet, kirjoittaa tiedot, jotka näkyvät Web-sivulla.Tässä harjoituksessa tyyppi (tai kopioi ja liitä) seuraavasti:
    HTML on helppoa
    Tämä sivu on tehty käyttäen yksinkertaista, perus hypertext markup language.HTML käytetään näyttämään tekstiä eri tyylejä ja värejä.Teksti voidaan lihavointia, korosti, kursivoida tai yliviivattu.HTML voidaan myös luoda yhteyksiä ja lisätä kuvia sivulle.

    Muotoilematonta tekstiä näkyy selaimen oletusfontin asetukset .
  8. Luo sivu tausta, tekstin ja linkin väri ominaisuuksia sisällä & lt; body & gt;tag seuraavasti:
    & lt; body bgcolor = "tan" text = "laivasto" link = "sininen" vlink- = "Midnight" alink = "turkoosi" & gt;
    Tämä antaa sivusi rusketus tausta laivasto sininen teksti.Linkitetään teksti näkyy kirkkaan sininen aluksi, kääntyy aqua kun kävijät klikkaa sitä ja lopultakin yönsininen niille, jotka ovat jo vierailleet jotka viittaavat.

  9. Etsi otsikko, "HTML on helppoa."Lisää seuraavat tunnisteet keskustaan ​​ja korostaa otsikko:
    & lt; keskus & gt; & lt; H1 & gt; HTML on helppoa & lt; / H1 & gt; & lt; / keskus & gt;

  10. Käytä kohta, tai & lt; p & gt;tag, rikkoa loput tekstin kahteen kohtaan.Sijoita tämä tunniste edessä pois linja, "Tämä sivu on tehty käyttäen yksinkertaista, perus hypertext markup language."Aseta se uudelleen rivin, "HTML voidaan myös luoda yhteyksiä ja lisätä kuvia sivulle."

  11. Levitä sopiva formaatit ilmaisu "boldfaced", "painotettiin", "kursivoituna" ja "ristissä ulos."HTML, virke näyttää tältä:
    Teksti voi olla & lt; b & gt; tummennetut & lt; / b & gt ;, & lt; U & gt; alleviivattu & lt; / U & gt ;, & lt; I & gt; kursivoida & lt; / I & gt;tai & lt; STRIKE & gt; yliviivattu & lt; / STRIKE & gt ;.

  12. Etsi lause, "luoda linkkejä," viimeisellä rivillä tekstin.Muuntaa tätä hyperlinkin Googlen etusivulle työntämällä Linkki tunnisteet ennen ja jälkeen lause seuraavasti:
    & lt; a href = "luoda" & gt; http: //www.google.com "& gt; luoda linkkejä & lt; /& gt;

  13. Lisää Creative Commons lisensoitu kuva uudelle riville ja keskitä se seuraavasti:
    & lt; p & gt; & lt; keskus & gt; & lt; IMG src="</center">http://farm1.static.flickr.com/42/122959202_92ef086559.jpg"></center>
    Link kuva takaisin alkuperäiseen lähteeseen, määritä sen näytön koko, tappaa ruma linkki raja ja antaa ansaitsemaansa kuvassa otsikon, joka näkyy kun kävijöitä hiiri kuvan.
    Sisällä & lt; IMG & gt; tag, lisätä kokoja raja attribuutteja:
    & lt; img src = "http://farm1.static.flickr.com/42/122959202_92ef086559.jpg" & gt; width = "240" height = "160" border = "0" & ​​gt;
    LisääLink tunnisteet kummallakin puolella Kuva 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 = "Kuva: I_Shutter Flickr" & gt; & lt; / a & gt;
    Sisällä link tag, lisätä otsikko:
    & lt; a href = "http://www.flickr.com/photos/janelinton/122959202/" title = "Kuva: I_Shutter Flickr" & gt;
    Onneksi olkoon.Olet juuri kirjoittanut ensimmäisen sivun HTML.

Vinkkejä & amp;Varoitukset

  • otsikko on jakso, joka tarjoaa ohjeet Web miten näyttää ja luetteloida sivun.Se sisältää otsikko yleensä näkyy selaimen otsikkorivillä sekä sisällönkuvauskentistä kuvaavat sivun sisällön ja antaa avainsanoja, jotka helpottavat hakukoneiden luetella sivusi.Kehittyneemmissä sivuja, tämä on myös silloin CSS ja JavaScript menee.Muokata tahansa otsikon sisällön, yksinkertaisesti korvata lainattu teksti oman otsikon ja meta sisältöä.Voit linkittää minkä tahansa sivun Web.Vaihda Google URL URL, jossa "http: //" etuliite, sivun haluat linkittää sijaan.Huomaa, että IMG tag seisoo yksin.Ei ole & lt; / IMG & gt;sulkeminen tag.Vaikka käytimme vakioväri nimiä kehossamme attribuutteja, HTML voi myös lukea heksadesimaaliarvo tulee värikoodit, joka mahdollistaa tarkemman värien.HEX-koodit löytyvät Custom Colors osa useimpien kuvantamisen ohjelmista;tai löydät verkossa väri muuntimet, kuten Draac.com väri muunnin, joka voi muuntaa sekä vakio Englanti nimet ja RGB-arvot HEX koodi.Tämä artikkeli on vain pääset alkuun.Onneksi ei ole puutetta HTML tutorials Webissä.Tutustu viittauslinkit löytää tutorials kehittynyttä muotoilua tekniikoita ja oppia laaja ominaisuuksia HTML web design.
  • puuttuvia sulkeminen tag, puuttuu lainausmerkit tai jopa yksinkertainen kirjoitusvirhe voi rikkoa Web-sivun, mutta ei hätää.Tällaiset virheet ovat niin helppo löytää ja korjata, koska ne ovat tehdä, kiitos validators kuten W3C: n Markup Validator.Nämä ohjelmat varmistaa, että koodi on oikea ja voidaan helposti lukea ja ymmärtää kaikki selaimet.

Resurssit

  • W3C: n Markup Validation Service
  • HTML-koodi opetusohjelma - Ilmainen Reference Guide for Help HTML Tunnisteet
  • Draac.com n Color Converter
761
0
4
Web Suunnittelu