Web-sivun luominen HTML-koodien avulla

HTML on Webin kieli. HTML koostuu suljetuista tunnisteista, jotka ympäröivät tekstiä ja grafiikkaa ja kertovat Web-selaimelle, mitä heidän kanssaan tehdään. HTML-koodikirjastossa on tunnisteita, jotka ohjaavat fonttia, tyyliä ja sisennystä, sekä erityisiä näyttömuotoja, kuten taulukoita, luettelolistoja ja tekstin rivitys. Suurin osa HTLM-tunnisteista tulee pareittain, jotka varoittavat selaimen, kun käynnistetään tietty toiminto ja milloin lopettaa. Tietyt attribuutit, jotka sisällytät tunnisteiden suluissa, tarkentavat edelleen kyseisen tunnuksen toimintaa.

Kirjoita HTML-koodi

1.

Avaa Muistio, joka sijaitsee Lisävarusteet-kansion "Käynnistä" -valikossa.

2.

Kirjoita tunniste "" - jätä suluissa olevat lainausmerkit täällä ja koko sivun yläreunassa. Lisää seuraavaan riviin tunniste "". Tämä tunnisteyhdistelmä kertoo selaimelle, että HTML-koodi on seurattava.

3.

Paina muutaman rivin paluuta ja kirjoita asiakirjan alaosaan "". Tämä estää nyt unohtamasta sulkea avainsanaa myöhemmin.

4.

Napsauta minkä tahansa tyhjän rivin avaus- ja sulkumerkkien välissä. Älä huolehdi siitä, että sinulla on ylimääräisiä rivejä koodisi välillä. Selain ohittaa kaikki tyhjät rivit HTML-dokumentissa.

5.

Kirjoita tunnisteiden merkkijono "." Syötä avaus- ja sulkumerkkien välissä Web-sivusi otsikko. Joe Smithin henkilökohtainen Web-sivu voi sisältää esimerkiksi koodin Tervetuloa Joe Smithin kotisivulle.

6.

Kirjoita seuraava rivi "" -merkintä ja lisää vielä muutama tyhjä rivi ja kirjoita sulkeminen "" -merkintä. Koko Web-sivun sisältö on näiden tunnisteiden välillä.

7.

Napsauta mitä tahansa tyhjää riviä sulkemisen yläosan yläpuolella ja kirjoita "" -teksti aloittaaksesi uuden tekstikohdan. Napsauta avaamista ja sulkemista

tunnisteet lisätäksesi tekstiä. Jokaisen uuden kappaleen tulee alkaa a

tunniste tai selain ei tiedä siirtävän tekstiä uuteen riviin.

8.

Muuta kappaleesi kirjasintyyliä tunnisteiden "tyyli" ja "font-family" sisällä

tunniste käyttäen muotoa

jossa "name_of_font" on tietty fontti, jonka haluat tämän kohdan tekstin näkyvän. Esimerkiksi, jos Joe Smith halusi muuttaa kappaleen fonttia Verdanaan, koodi näyttää

.

9.

Aseta teksti toisistaan ja tunnisteita, jos haluat lihavoida tai kursivoida.

10.

Lisää kuva sivullesi tunnisteella . Tämä on yksi harvoista HTML-tunnisteista, jotka eivät vaadi sulkumerkintää. Sisällä tunniste, määritä kuvatiedoston sijainti "src" -määritteellä. Esimerkiksi jos Joe Smith halusi sisällyttää itselleen kuvan Web-sivulta, hän käyttäisi koodia

. "Alt" -määrite kuvaa kuvaa niille, joilla on näkövammaisia, käyttämällä selaimia Internetin selaamiseen tai siinä tapauksessa, että kuva ei lataudu selainikkunaan.

11.

Lisää hyperlinkki sivullesi tunnisteella. Kirjoita tunnisteiden väliseen tekstiin kävijän napsauttama teksti siirtyäksesi kyseiselle sivulle. Käytä avausmerkin sisällä attribuuttia "href" tarkentaaksesi URL-osoitteen, johon linkki vie, kun napsautat. Jos esimerkiksi Joe Smith halusi sijoittaa linkin verkkosivulleen sisarensa Sally Smithin verkkosivulle, hän käyttää koodia Klikkaa tästä vierailla siskoni Sallyn sivulla.

Tallenna tiedosto HTML-muodossa

1.

Napsauta "File" -valikkoa Notepadissa ja valitse "Save As" -komento. Valitse avattavasta Tallenna nimellä -luettelosta Kaikki tiedostot ( . ).

2.

Anna tiedostolle yhden sanan nimi "Tiedostonimi" -ruutuun ja lisää laajennus ".HTM" tiedostonimen loppuun.

3.

Tallenna Notepad-tiedosto HTML-tiedostona napsauttamalla Tallenna-painiketta.

4.

Napsauta tallennettujen tiedostojen kuvaketta hiiren kakkospainikkeella ja valitse ponnahdusvalikosta "Avaa". Valitse Web-selainohjelma ehdotettujen sovellusten luettelosta, jotta voit testata, miten Web-sivu näytetään, kun lähetät sen Web-palvelimeen.

vinkkejä

  • Tunniste lisää automaattisesti hieman ylimääräistä tilaa edellisen kappaleen ja seuraavan kappaleen välillä luettavuuden kannalta. Jos haluat vähemmän riviväliä, käytä tagia yksinkertaisen rivinvaihdon sijaan kappaleenvaihdon sijaan.
  • Jos haluat käyttää tiettyä kirjasintyyliä koko Web-sivulle kappaleen kohdalla, käytä tunnistetta asiakirjan yläosassa olevan tunnisteen jälkeen. Määritä tunnisteessa kaikkien tunnisteiden fontti koodilla:
  • p {font-family: verdana;}
  • HTML-kooditiedostot vaativat selaimen yksinkertaisen tekstimuodon ja tiedostotunnisteen .HTM tunnistamaan ja suorittamaan koodin. Kun kirjoitat koodia käsin, on tärkeää käyttää vain tekstieditoria, minkä vuoksi Notepad sopii tähän tehtävään. Wordpad ja Microsoft Word voivat toimia myös tekstinkäsittelyohjelmina, mutta sinun täytyy muistaa tallentaa HTML-kooditiedosto "Vain teksti" -valintaikkunaan "Tallenna nimellä". Molemmat ohjelmat lisäävät tiedostoon laajennuksen ".TXT", mutta voit muuttaa tiedostonimen laajennuksen ".HTM": ksi napsauttamalla hiiren kakkospainikkeella Windows Explorerin tiedoston kuvaketta.

varoitukset

  • Kun määrität fontin tunnisteeseen tai tunnisteeseen, muista, että selaimet voivat näyttää vain sellaisia ​​fontteja, jotka ovat käytettävissä verkkosivua tarkastelevan tietokoneen käyttöjärjestelmässä. Jos tietokoneessa ei ole fonttia, teksti näkyy selaimen oletusfontissa, yleensä Times New Romanissa.
  • Jos yrität kirjoittaa HTML-koodin Microsoft Wordiin ja tallentaa asiakirjan HTML: ksi tavallisen tekstin sijaan, Word ei tulkitse HTML-koodeja ja tuota Web-sivua. Sen sijaan Word muuntaa kaikki sivun merkit näytettäväksi tekstiksi. Tämä johtaa siihen, että kaikki HTML-tunnisteet näkyvät niiden terävissä suluissa, jotka näkyvät Web-sivulla.
 

Jätä Kommentti