Sisältö

• Askeleet
• Osa 1: Kuinka löysin HTML: n
• Neuvoja
• Varoitus
• Mitä tarvitset

HTML (HyperText Markup Language) on peruskieli verkkosivujen luomiseen. Se luotiin helpoksi ja joustavaksi koodauskieleksi. Lähes jokainen Internet-sivusto on kehitetty jollakin tämän koodin muodossa (ColdFusion, XML, XSLT). HTML on helppo ymmärtää, mutta voit oppia siitä pitkään, jos olet kiinnostunut sen kattavasta toiminnallisuudesta. Voit lisätä värejä ja hauskaa verkkosivustollesi oppimalla CSS-perusopetuksen heti, kun olet tottunut HTML-perussivuun.

Askeleet

Osa 1/4: Asiakirjan rakentaminen

1. 

   Avaa yksinkertainen tekstieditori. NotePad on hyvä vaihtoehto, ja sen voi ladata ilmaiseksi. Voit kirjoittaa HTML: ää useimmilla tekstieditorilla, mutta monimutkaisempi ohjelmisto, jossa on automaattiset muotoiluominaisuudet, voi vaikeuttaa HTML-sivusi järjestämistä.
   • Älä käytä TextEdit-ohjelmaa, koska se yleensä tallentaa tiedoston muodossa, jota selaimesi ei ehkä tunnista HTML-muodossa.
   • Voit käyttää myös online-HTML-editoria. Omistettuja HTML-muokkausohjelmia ei suositella aloittelijoille.

2. 

   
   
   Tallenna tiedosto verkkosivuna. Valitse yläreunan valikosta Tiedosto → Tallenna nimellä. Vaihda tiedostomuodoksi "Web-sivu", ".html" tai ".htm". Tallenna tiedosto, josta löydät sen helposti.
   • Näiden kolmen vaihtoehdon välillä ei ole eroa.

3. 

   Avaa tiedosto selaimessa. Kaksoisnapsauta tiedostoa, ja se avautuu automaattisesti tyhjänä verkkosivuna selaimessasi. Vaihtoehtoisesti voit avata selaimen, kuten Firefox tai Internet Explorer, ja valita sitten tiedoston valitsemalla Tiedosto → Avaa tiedosto.
   • Tämä verkkosivusto ei ole verkossa. Se on nähtävissä vain tietokoneellasi.

4. 

   
   
   Päivitä verkkosivu ja näe tehdyt muutokset. Kirjoita tyhjään asiakirjaan seuraava: Hei. Tallenna asiakirja. Päivitä selaimesi tyhjä verkkosivu ja sinun pitäisi nähdä lihavoitu sana "Hei" sivun yläosassa. Aina kun haluat testata uutta HTML-koodiasi tämän opetusohjelman aikana, tallenna .htm-asiakirja ja päivitä sitten selainikkuna nähdäksesi, kuinka HTML kootaan.
   • Jos näet sanat ""ja"'' Näkyy selaimessasi, tiedostoa ei ole käännetty oikein HTML-muodossa. Kokeile toista tekstieditoria tai toista selainta.

5. 

   
   
   Opi tunnisteet. HTML-komennot kirjoitetaan "tageiksi", jotka kertovat selaimelle, kuinka verkkosivusi kootaan ja näytetään. Ne kirjoitetaan aina yksittäisissä lainausmerkeissä ja eivät näy verkkosivulla, kuten käytit niitä yllä olevassa esimerkissä:
   • on "aloituskortti" tai "avoin kortti". Kaikki tämän tagin jälkeen kirjoitettu määritellään lihavoituna (lihavoitu verkkosivulla).
   • on "lopputunniste" tai "lopputunniste", jotka voit erottaa symbolin / merkin perusteella. Se tarkoittaa lihavoidun tekstin loppua. Suurin osa (ei kaikki) tunnisteista tarvitsee lopputunnisteen toimiakseen, joten muista sisällyttää se.

6. 

   Luo asiakirjasi. Poista kaikki HTML-dokumenttisi. Aloita alusta seuraavalla tekstillä, aivan kuten se kirjoitettiin (miinus luettelomerkit). Tämä HTML-koodi kertoo selaimelle, minkä tyyppistä HTML: ää käytät, ja että kaikki HTML-koodisi sijoitetaan tunnisteiden sisään. ja .

7. 

   Lisää pää (pää) ja vartalotunnisteet. HTML-asiakirjat on jaettu kahteen osaan. "Yläosa" -osiossa on erityistietoja, kuten sivun otsikko. "Body" -osio sisältää sivun pääsisällön. Lisää molemmat nämä osat asiakirjaan ja muista sisällyttää lopputunnisteet. Äskettäin lisätty teksti on lihavoitu:

8. 

   Anna sivullesi otsikko. Suurinta osaa pääosassa olevista korteista ei ole tärkeätä oppia aloittelijan kanssa. Otsikkotunnistetta on kuitenkin helppo käyttää, ja se määrittää, mikä näkyy selainikkunan nimellä tai selainvälilehdellä. Aseta otsikon alku- ja lopputunnisteet otsikkotagien sisään ja kirjoita haluamasi otsikot näiden tunnisteiden väliin:
   mainos

Osa 2/4: Tekstin muotoilu

1. 

   Lisää tekstiä kehoosi. Tässä osassa työskentelemme vain body-tunnisteiden kanssa. Toinen teksti on edelleen asiakirjassa, mutta säästämme tilaa, jos emme toista sitä tässä opetusohjelmassa. Kirjoita korttien väliin mitä haluat ja , ja se näkyy sivusi ensimmäisenä sisällönä. Esimerkiksi:
   • Seuraain wikiHow-ohjeita HTML-sivun kirjoittamiseen.

2. 

   Lisää otsikot tekstille. Järjestä sivusi otsikkotunnisteilla, jotka ohjaavat selainta näyttämään niiden välissä olevaa tekstiä suuremmalla kirjasinkoolla. Hakukoneet ja muut työkalut käyttävät näitä tunnisteita myös selvittääkseen verkkosivustosi ja miten se on järjestetty.
   on suurin otsikko, ja voit luoda pienempiä otsakkeita enintään
   . Kokeile niitä sivulla:
   • Tervetuloa sivulleni.

   • Seuraain wikiHow-ohjeita HTML-sivun kirjoittamiseen.

   • Tavoitteenani tänään:

   • Toteutetut tavoitteet:

   • Opi käyttämään otsikoita.

   • Keskeneräiset tavoitteet:

   • Lisätietoja tekstin muotoilutunnisteista.

3. 

   Lisätietoja tekstin muotoilutunnisteista. Olet jo nähnyt "vahva" -tunnisteen, mutta on olemassa monia muita tapoja muotoilla tekstiä. Kokeile näitä tunnisteita tai useita tunnisteita kerralla samalle tekstimerkkijonolle. Muista lisätä lopputunnisteet takana!
   • Tärkeä teksti, lihavoitu selaimessa.
   • Korostettu teksti, näkyy kursorilla selaimessa.
   • Teksti hieman tavallista pienempi. Tämän tekstin kokoa muutetaan automaattisesti, jos sitä käytetään otsikossa.
   • Teksti ei ole enää merkitystä, se näytetään rungon viivalla.
   • Teksti lisätään muita asiakirjoja myöhemmin, alleviivattuina.

4. 

   Järjestä teksti sivullesi. Olet ehkä huomannut, että "enter" -näppäimen painaminen ei riitä, että teksti näkyy toisella rivillä. Nämä tagit voivat auttaa luomaan kappaleita ja rivinvaihtoja tai järjestämään tekstisi muilla tavoilla:

   • Lyhenne sanoista "kappale", (kappale) -tunniste pitää kaiken näiden tagien välisen tekstin kappaleessa ja erottaa sen sen ylä- ja alapuolella olevasta tekstistä.

   • 
     Tämä tunniste luo rivinvaihtoja. Älä lisää siihen lopputunnistetta, koska se ei häiritse muuta sisältöä. Käytä tätä tunnistetta runoissa tai osoiteriveissä, ei kappaleissa.

   • Jos haluat näyttää tekstiä erittäin tarkasti, tämä tunniste asettaa sen sisällä olevaan tekstiin kiinteän leveyden fontin (jokaisella kirjaimella on sama leveys) ja voit luoda aikavälejä Tyhjät ja rivinvaihdot haluamallasi tavalla säännölliseen muokkaamiseen tunnisteiden sijaan.

   • Tämä tunniste määrittelee lähteestä lainattavan tekstityypin.

     Voit kuvata lähteen myöhemmin lainaa kortti.

5. 

   Lisää näkymätön kuvateksti. Kommenttimerkkejä ei näytetä verkkosivulla. Niiden avulla voit merkitä itsesi HTML-dokumenttiin vaikuttamatta sisältöön. Älä lisää lopputunnistetta.
   • Kortteja, jotka menevät yksin ilman lopputunnisteita, kutsutaan "tyhjiksi tunnisteiksi".

6. 

   Yhdistä ne yhteen. Paras tapa muistaa nämä tunnisteet on käyttää niitä verkkosivustollasi. Tässä on esimerkki korttien käytöstä vaiheissa, jotka olet oppinut tähän mennessä. Yritä ennustaa, kuinka ne näkyvät selaimessa, kopioi ne sitten asiakirjaasi ja selvitä asia.
   • Tervetuloa verkkosivustolleni.

   • Toivottavasti nautit tästä sivusta!

     Tein sen vain sinulle.

   • Osa 1: Kuinka löysin HTML: n

   • Olen oppinut HTML: n jo sisään yksi kaksituntia, joten nyt olen asiantuntija.
   mainos

Osa 3/4: Linkkien ja kuvien lisääminen

1. 

   Lisätietoja määritteistä. Tunnisteisiin voi olla kirjoitettu lisätietoja, joita kutsutaan määritteiksi. Näitä määritteitä edustavat muut sanat tunnisteiden sisällä muodossa ominaisuuden nimi = "tietty arvo". Kaikilla HTML-tunnisteilla voi olla esimerkiksi otsikkomääritelmä:

   • Johdanto-kappale on täällä.

     Nimeä kappale "Johdanto", joka tulee näkyviin, kun viet hiiren osoitteen kappaleen päälle verkkosivulla.

2. 

   Linkit muille verkkosivustoille. Korttien käyttö luoda hyperlinkki mille tahansa muulle verkkosivulle. Lisää verkkosivun URL-osoite, johon haluat linkittää href-määritteen avulla. Tässä on esimerkki, joka linkittää lukemallesi verkkosivulle:
   • Verkkosivustosi kävijät voivat napsauttaa tätä tekstiä seuratakseen linkkiä.

3. 

   Lisää tunnisteeseen id-attribuutti. Toinen attribuutti, jota kaikki HTML-tagit voivat käyttää, on "id" -elementti. Kirjoita mihin tahansa korttiin id = "vidu" tai käytä mitä tahansa nimeä, joka ei sisällä välilyöntejä. Se ei tuota mitään näkyvää vaikutusta, mutta käytämme sitä seuraavassa vaiheessa.
   • Lisää esimerkiksi seuraava asiakirjaasi:

     Tätä kappaletta käytetään esimerkkinä kuvaamaan id-attribuutin toimintaa.

4. 

   Linkki elementtiin, jolla on tietty tunnus. Nyt voimme käyttää hyperlinkkitagia, , linkittää toiseen sijaintiin samalla sivulla. URL-osoitteen sijaan käytämme # -merkkiä, jota seuraa id-arvo, johon haluamme linkittää. Esimerkiksi, Tämä teksti linkittää tekstiin, jonka tunnus on "vidu".
   • Kaikki HTML-arvot ovat isot ja pienet kirjaimet. "#VIDU" ja "#vidu" linkittävät molemmat samaan sijaintiin.
   • Jos sivusi on riittävän lyhyt näyttämään koko sivun kerralla, et todennäköisesti huomaa mitään tapahtuvaa napsauttamalla selaimen linkkiä. Muuta ikkunan kokoa, kunnes vierityspalkki tulee näkyviin, ja yritä sitten uudelleen.

5. 

   Lisää valokuvia. Kortti on tyhjä tunniste, eli lopputunnistetta ei tarvita. Kaikki tiedot, jotka selaimen tarvitsee kuvan näyttämiseen, lisätään attribuuttien avulla. Tässä on esimerkki wikiHow-logon näyttämisestä ja kuvaus jokaiselle takana olevalle attribuutille:
   • 
   • Ominaisuudet src = "" kertoo selaimelle kuvan sijainnin. (Huomaa, että valokuvan lähettämistä jonkun muun sivustolta pidetään sopimattomana - ja valokuva katoaa, kun sivu ei ole enää aktiivinen.)
   • Ominaisuudet style = "" Se voi tehdä monia asioita, mutta ennen kaikkea sitä käytetään kuvan leveyden ja korkeuden asettamiseen pikseleinä. (Voit käyttää sen sijaan myös erillisiä määritteitä width = "" and height = "", mutta tämä voi johtaa outoihin koon muuttamisongelmiin, jos käytät CSS: ää.)
   • Ominaisuudet alt = "" on lyhyt kuvaus kuvasta, jonka käyttäjä näkee, jos kuvan lataaminen epäonnistui. Tätä pidetään vaatimuksena, koska sitä käytetään sokeiden verkkosivustokäyttäjien näytönlukuohjelmiin.
   mainos

Osa 4/4: Lisätietoja verkkosivuston lisäämisestä ja saamisesta verkossa

1. 

   Vahvista HTML-koodisi. HTML-vahvistus tarkistaa koodissasi olevat virheet. Jos sivustosi ei näy oikein, vahvistus voi auttaa sinua löytämään ongelman aiheuttavan virheen. Se voi myös opettaa sinulle enemmän HTML: stä määrittämällä, että koodi näyttää hyvältä näytöllä, mutta sitä ei enää suositella HTML-standardin uusien päivitysten vuoksi. Virheellisen HTML-koodin käyttäminen ei tee sivustostasi hyödytöntä, mutta saattaa aiheuttaa ongelmia tai näyttää epävakaalta eri selaimissa.
   • Kokeile ilmaista online-vahvistuspalvelua W3C: ltä tai etsi toista HTML 5 -vahvistustyökalua verkossa.

2. 

   Lisätietoja tunnisteista ja määritteistä. On monia muita HTML-tunnisteita ja määritteitä sekä monia paikkoja oppia niitä:
   • Kokeile w3schools ja HTML Dog, niin saat lisää opetusohjelmia ja täydelliset luettelot tunnisteista.
   • Etsi verkkosivu, jolta pidät ulkonäöltään, ja hanki sitten HTML-koodi selaimesi Näytä sivun lähde -toiminnolla. Kopioi se asiakirjaasi ja tutki sen toimintaa.
   • Lue muita artikkeleita ja opi luomaan taulukoiden luominen HTML-muodossa, lisäämällä metatunnisteita mahdollisuuksien löytämiseen hakukoneiden kautta tai käyttämällä jakoa. määritä sivun alue) ja alue (käytetään tekstielementin tyylin määrittämiseen) helpottamaan tyyliä CSS: n kautta.

3. 

   Hanki verkkosivustosi verkkoon. Valitse verkkosivustosi isännöintipalvelu ja voit sitten ladata niin monta HTML-sivua kuin haluat henkilökohtaiseen verkkotunnukseesi. Tätä varten sinun on käytettävä FTP-latausohjelmistoa, mutta monet verkkovuokrauspalvelut tarjoavat myös tämän palvelun.
   • Kun linkität suoraan sivustollasi oleviin sivuihin tai kuviin, sinun on käytettävä täydellistä osoitetta. Esimerkiksi, jos verkkotunnuksesi on www.chuyengiahtmlsieudang.com, niin teksti on näissä tunnisteissa linkittää sivulle "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"

4. 

   Lisää tyylejä CSS: n avulla. Jos HTML-sivusi näyttää hieman yksitoikkoiselta, kokeile oppia CSS: n perusteet lisäämällä värejä, erilaisia ​​fontteja ja hallitsemaan paremmin elementtien sijoittelua. CSS-tyylitaulukon linkittäminen HTML-sivulle antaa sinulle mahdollisuuden tehdä voimakkaita muutoksia lennossa ja säätää automaattisesti tietyn tagin tekstin tyyliä. Voit pelata hieman alustavalla kerroksella täällä, tai kaivaa lisää yksityiskohtaisemmalla opetusohjelmalla HTML Dogin CSS-oppaassa.

5. 

   Lisää JavaScript verkkosivustollesi. JavaScript on ohjelmointikieli, jota käytetään lisäämään paljon toimintoja HTML-sivuillesi. JavaScript-komennot lisätään alku- ja lopputunnisteiden väliin , ja sitä voidaan käyttää lisäämään interaktiivisia painikkeita, laskemaan matemaattisia ongelmia ja paljon muuta. Lisätietoja w3c-esimerkeistä. mainos

Neuvoja

• Tässä opetusohjelmassa käytetty doctype-ilmoitus (Document Type Declaration used) on "löysä HTML 4.0.1 -siirtymä" (HTML 4.0.1 ei tiukka siirtyminen), helppo muoto. aloittelijoiden käyttöön. Käytä () vaihtoehto selaimen kokoamiselle tiukassa HTML 5 -muodossa, joka on suositeltava (vaikkakin harvemmin käytetty) vakiotyyli.

Varoitus

• HTML: n tarkoituksena on pitää sisältö globaalissa muodossa. Se ei hallitse verkkosivustosi esitystä, kuten taustaväriä ja elementtien tarkkaa sijoittelua. Vaikka on vielä tunnisteita, joiden avulla voit tehdä tämän, kannattaa CSS: n avulla luoda hallittavampi ja johdonmukaisempi verkkosivusto.

Mitä tarvitset

• Yksinkertainen tekstieditori, kuten NotePad tai TextEdit
• Verkkoselain, esimerkiksi Internet Explorer tai Mozilla Firefox
• (Valinnainen) HTML-editori, kuten Adobe Dreamweaver, Aptana Studio tai Microsoft Expression Web