1. Oppitunti - Aloitus
Webbisivuja voi luoda tavallisella tekstieditorilla. Windowsin mukana tuleva notepad on aivan riittävä. Tarjolla on myös editoreita, joilla voi helpottaa kirjoitustyötä. Itse käytän Html-kitiä, jonka voi ladata netistä ilmaiseksi.
Markkinoilla on paljon myös ns. WYSIWYG-, eli "sitä saat mitä näet"-tyyppisiä editoreita, jotka muistuttavat grafiikkaohjelmia. Esim. Dreamweaverin kaltaiset ohjelmat ovat kuitenkin liian monimutkaisia, jotta niiden käyttöä selostettaisiin tässä. Sitäpaitsi, Dreamweawerin käyttäjänkin tulisi osata webbisivun teon perusteet jotka oppii parhaiten notepadia käyttäen.
Kun avaat minkä tahansa webbisivun lähdekoodin, näet paljon tekstiä hakasulkeiden sisällä. Näitä kutsutaan tägeiksi. Tägit ovat webbisivun teon perusta: ne ovat ohjeita selaimelle kuinka käsitellä sivujen sisältöä. (Lähdekoodin saa esille Firefoxissa painamalla CTRL+U)
Tägi koostuu yleensä aloitus - ja lopetuselementistä. Esim.:
<strong> = aloituselementti </strong> = lopetuselementti <strong> Tägin elementtien välissä oleva sisältö </strong>
Yllä oleva esimerkki tekee tekstistä lihavoidun. Elementit esiintyvät aina pareittain, eikä lopetuselementtiä saa unohtaa. On myös muutamia tägejä, joilla on vain aloituselementti, niistä myöhemmin.
Ensimmäiset tägit sivulla ovat html, head, title ja body. Sivun ylälaidassa on myös paljon muuta, mutta niistä ei tarvitse vielä tässä vaiheessa välittää.
<html> kertoo että kyseessä on html dokumentti
<head> tägit rajaavat ns. head-lohkon, joka sisältää tietoa sivusta. Head-lohkon sisältöä ei näytetä suoraan sivulla.
<title> tägi kertoo sivun otsikon joka näytetään selaimen yläreunassa. Title tulee aina head-lohkoon.
<body> tägien välissä on sivun varsinainen sisältö.
Tällä tiedolla pääsee jo pitkälle. Aloitetaan siis sivun luominen.
1. Avaa Notepad
2. Kopioi seuraava koodi Notepadiin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Omat sivuni</title> </head> <body> Tähän tulevat MINUN sivuni! </body> </html>
3. Tallenna sivu esim. nimellä omasivu.html
tiedoston pääte .html on tärkeä!4. Esikatsele sivua selaimessa
(Firefox-selaimessa Tiedosto ->Avaa, mene kansioon johon talletit sivusi ja kaksoisklikkaa tiedostoa.)
Onneksi olkoon! Olet juuri luonut ensimmäisen webbisivusi. Ei näytä vielä paljon miltään vai? Lue siis eteenpäin.
« Edellinen: Etusivu - Seuraava: Sisältöä sivuille »
