Lasse Jalosen kotisivut

HMTL-harjoitukset

Pelastusrengas

Tältä sivulta löydät HTML harjoitukset.

Vastaa huolellisesti alla oleviin HTML-kieltä kertaaviin tehtäviin
Selitä lyhyesti, mitä tarkoitetaan seuraavilla sisällön tuottamiseen liittyvillä käsitteillä?

HTML (HyperText  Markup Language)
Hypertekstin merkintäkieli, jolla voidaan merkata hyperlinkkejä sisältävää tekstiä eli hypertekstiä. HTML tunnetaan erityisesti koodikielenä, jolla weppisivut rakentuvat.

XML (eXtensible Markup Language)
Metakieli, jonka avulla kuvataan tietoa tiedosta. XML kieltä käytetään sekä formaattina niin tiedon välitykseen kuin formaattina tiedon dokumenttien tallentamiseen. XML on rakenteellinen kuvauskieli, joka auttaa jäsentämään laajoja tietomassoja selkeämmin.

DHTML (Dynamic HTML)
Yleisnimitys eri tekniikoille, joilla lisätään staattiseen HTML rakenteeseen toiminnallisuutta. Tyypillisimpiä käytettyjä tekniikoita ovat:
- merkintäkieli kuten HTML 4/5 tai XHTML
- tyyliohje kuten CSS
- komentosarjakieli kuten skriptikieli JavaScript tms.
- DOM (Document Object Model)

XHTML (eXtensible Hypertext Markup Language)
HTML:stä kehitetty www-sivujen merkintäkieli, joka täyttää XML:n muotovaatimukset. Alun perin sen piti korvata HTML.

VRML (Virtual Reality Modeling Language)
Tiedostomuoto, jolla esitetään kolmiulotteista (3D) interaktiivista vektorigrafiikkaa. VRML on suunnattu erityisesti Web käyttöön.

SGML (Standard Generalized Markup Landuage)
Metakieli, jonka avulla voidaan määritellä dokumenttien merkintäkieliä. SGML pohjautuu IBM:n Generalized Markup Languageen ( GML).

ISP (Internet Service Provider)
Internetin palveluntarjoaja, joka tarjoaa asiakkalleen internetyhteyden. Tällä yhteydellä pääsee nettiin ja sen lukuisiin palveluihin.

DOMAIN
Domain voi tarkoittaa:
- verkkotunnusta, esim. www.esimerkki.fi
- Domain Name System:iä (DNS) eli internetin nimipalvelinjärjestelmää
- Windows Server Domain:ia eli Windows toimialuetta, tietynlaista tietokonejoukkoa

IP – OSOITE (Internet Protocol)
TCP/IP mallin mukainen protokolla, joka huolehtii IP-tietoliikennepakettien perille toimittamisesta pakettikytkentäisessä internet verkossa. Tämä on internetin ydintä, ja ainoa asia, joka yhdistää kaikkia internetiin liitettyjä tietokoneita.
IP paketit toimitetaan perille IP-osoitteiden perusteella. IP –osoite on tavallisesti numero kuten vaikkapa 192.68.11.1. (IPv4).

DNS (Domain Name System)
Internetin nimipalvelujärjestelmä, joka muuttaa verkkotunnukset IP-osoitteeksi. Internetiin kytketyt tietokoneet kommunikoivat keskenään numeeristen osoitteiden avulla, joiden muistaminen on kuitenkin hankalaa. Nimipalvelun ansiosta numeroiden sijaan voidaan käyttää helpommin muistettavia nimiä.
Nimipalvelun toinen tärkeä tehtävä on sähköpostin reititys. 

FRAMES (Kehykset)
Selainikkunan osia, jotka toimivat jossain suhteissa myös itsenäisinä osina. Kyhyksen sisällä näkyy yleensä HTML dokumentti, mutta siellä voi olla myös kuva, pelkkä tekstidokumentti tms. Kehys voi olla myös skrollattavissa.
Kehykset ovat suorakulmaisia, ikkuna voidaan jakaa myös kahteen tai useampaan osaan.

STYLE
www sivulle kehitelty tyyliohjeiden laji. Style liittyy läheisesti CSS:ään (Cascading Style Sheet) dokumenttiin, joilla voidaan määritellä useita erilaisia tyyliohjeita, jotka edelleen yhdistetään tietyllä tavalla yhdeksi säännöstöksesi.

SPAN
Span tagiin voidaan lisätä attribuutti (XHTML:n osa, joka on lisätty itse tagiin. Attribuutti määrittää aina jotakin: se voi esimerkiksi kertoa, mihin luokkaan kyseinen elementti kuuluu tai minkä tyyppinen elementti on kyseessä) class tai id ja tehdä näin CSS muotoiluja. Span elementti on erityisen hyvä tekstin muotoiluun silloin, kun muuta koodia ei ole saatavilla.
Yleensä span tagia käytetäänkin yhdistämään halutut CSS muotoilut haluttuun tekstinosaan.

LAYER
Layer on taso, jolla voidaan niin lisät, poistaa kuin muokata niin tasoaan itseään kuin muitakin tasoja. Layer on olennaisen osa mm. Adoben PhotoShop ohjelmaa, jossa layereita hallinnoidaan Layer paletista käsin.

WYSIWYG (What You See Is What You Get)
WYSIWYG:llä tarkoitetaan ohjelmia, joissa sisältö näyttää muokattaessa hyvin samankaltaiselta kuin itse lopputulos. Sen sijaan muotoa ja rakennetta kuvaavaa metadataa ei välttämättä näy. Käytännössä WYSIWIG:llä tarkoitetaan useimmiten tekstinkäsittelyohjelmia tai HTML-editoreita.

FTP (File Transfer Protocol)
TCP (Transmission Control Protocol) ptotokollaa käyttävä tiedonsiirtojärjestelmä kahden tietokoneen välillä. FTP-yhteys toimii asiakas-palvelin –periaatteella. Yleensä asiakas (client) ottaa yhteyttä palvelimeen (host/ server), joka tarjoaa FTP-palvelun.

HYPERLINKKI
Hyperlinkki on kuva,teksti tai sana, joka siirtää käyttäjän hypertekstisivulta toisella. Heperlinkkejä käytetään erilaisissa hypertekstijärjestelmissä, joista tunnetuin on varmasti World Wide Web. Hyperlinkit ovat hypertekstin määrittelevä osuus. Hypertekstijärjestelmissä liikkuminen perustuu hyperlinkkeihin. Hyperlinkkejä kutsutaan usein vain linkeiksi.

CSS (Cascading Style Sheets, porrastetut tyyliarkit)
CSS on erityisesti www dokumenteille kehitetty tyyliohjeiden laji. CSS:ssä voidaan määritellä useita erilaisia tyyliohjeita, jotka yhdistetään tietyllä tavalla yhdeksi säännöstöksi.

META-TEKSTI
Metateksti on tekstiä tekstistä, jossa tekstin tai koodin laatija viittaa omaan tekstiinsä tai kirjoittamaansa koodiin.

TAGI
Tagi ilmentää elementtiä ja kertoo selaimelle, kuinka sen esittämä data tulee esittää. Esimerkiksi <H1> tagi ilmeisee ensimmäisen tason otsikon.

CGI (Common Gateway Interface)
Web -ympäristön tekniikka, jonka avulla selain voi välittää dataa suorittavalla ohjelmalle. CGI määrittää standardin tähän datan välitykseen.

JAVASCRIPT
JavaScript on alun perin Netcsape Comminications Corporationin kehittämä pääasiassa Web-ympäristössä käytettävä komentosarjakieli (komentosarja=scripti). JavaScriptin tärkein ominaisuus on mahdollisuus lisätä Web-sivulle dynaamista toiminnallisuutta.

JAVA
Java on Sun Microsystemsin kehittämä laaja teknologiaperhe ja ohjelmistoalusta, johon kuuluu muun muassa ohjelmistoriippumaton oliopohjainen ohjelmointikieli, ajoaikainen ympäristö virtuaalikoneineen ja luokkakirjastoineen. Sun on ilmoittanut Javan julkaisusta vapaana ohjelmistona GPL (General Public Lisence)-lisenssillä. Java alusta on käytössä noin 3,8 miljardissa laitteessa aina matkapuhelimista supertietokoneisiin.

JAVA-APLETTI
Java-apletti (Java-sovelma) on epäitsenäinen, asiakaskoneessa selaimen yhteydessä suoritettava Java-ohjelma. Sovelmia ajetaan selaimessa, johon on asennettu Java-virtuaalikone tai Sun:n AppletViewer, joka on tarkoitettu sovelmien testaamiseen. Java-apletit sisältyivät jo vuonna 1995 julkaistuun Java-kielen ensimmäiseen versioon.

PERL (Practical Extraction and Report Language)
Perl on tulkattava proseduraalinen scriptimäinen ohjelmointikieli. Se on hyvin monimuotoinen ohjelmointikieli , mutta sen oppiminen on suhteellisen helppoa. kaikenlaiset säännölliset lausekkeet esimerkiksi tekstinkäsittelyssä, data-analyysi, datan käsittely sekä modularisointi ovat helppoja Perlillä, ja se onkin suosittu myös unix- ylläpitäjien keskuudessa.

TULKKI
Usein lähdekoodimuodossa olevaa ohjelmaa tietokone ei voi ajaa suoraan, vaan ohjelma pitää joko tulkata tai kääntää konekielelle. Tulkkaamisen tai kääntämisen tekee sitä varten erityisesti kehitetty ohjelma, ohjelmointikielen tulkki tai ohjelmointikielen kääntäjä.

KÄÄNTÄJÄ
Ks. edellinen vastaus. Esimerkiksi jokainen Java-lähdekoodi voidaan kääntää millä tahansa koneella, johon on asennettu Java-kääntäjä.

APACHE
Apache on avoimeen lähdekoodiin perustava HTTP-palvelinohjelma (hypertekstin siirtoprotokolla). Apachen http-palvelin on Apache Software Foundationin tunnetuin tuote.

COOKIE
Cookie eli eväste (kutsutaan myös nimellä keksi tai pipari) on dataa, jonka Web-palvelin  tallentaa käyttäjän tietokoneelle. Selain lähettää evästeet vain kyseiselle palvelimelle. Evästeellä tarkoitetaan lähinnä sellaista tietoa, jonka palvelun tarjoajan palvelin lähettää käyttäjän selainohjelmalle pyytäen selainta tallentamaan tiedon käyttäjän päätelaitteelle ja jota kyseinen palvelun tarjoajan palvelin voi myöhemmin pyytää takaisin. Kyse on käytännössä pienestä määrästä dataa, tyypillisesti lyhyestä tekstistä.

Takaisin HTML-harjoitusten alkuun

2. Mitä työkaluja tarvitset?

Laatiaksesi omat kotisivut?

Riippuu paljolti siitä, millaiset kotisivut haluaa tehdä ja millä resursseilla. Helpommillaan kotisivut voidaan rakentaa sitä erityisesti suunnitellulla kotisivukoneella, joita netissä on tarjolla. Kotisivun voi helposti rakentaa myös Wordpressin kaltaisella ohjelmalla valmiille sivupohjalle, eikä siinä kauaa nokka tuhise. Ja paremman puutteessa kotisivut voi tehdä vaikkapa muistiolla koodaamalla.
Mutta jos haluaa nähdä vaivaa ja on jo jonkin verran osaamista, niin oikeastaan on kaksi hyvää ja käyttökelpoista vaihtoehtoa.

Sivut rakennetaan sivueditorilla, jolloin sivut voidaan muokata täsmälleen halutunlaisiksi. Tällöin weppirakentaja ei ole vain valmiiden sivupohjien armoilla, vaan tekee omat ratkaisunsa itsenäisesti. Erilaisia editoreita on netti pullollaan, ilmaisista maksullisiin. Oma suosikkini on Dreamweaver, ja etenkin sen uusin painos, CS5. Ohjelma on hyvin voimallinen ja moneen taipuva editori, jolla voi kätevästi koodata aina CSS:stä JavaScriptiin ja PHP:en asti, vaikka käyttäjä ei juurikaan osaisi koodata.
Toinen vaihtoehto on käyttää jotakin sisällönhallintajärjestelmää (CMS), kuten vaikkapa Drupalia tai Joomlaa. Oma suosikkini tässä lajissa on Joomla, joka on ilmainen ja johon saa lukemattomia ammattimaisia templettejä ja ektensiota. CMS ohjelmien yksi parhaimmista anneista on se, että sivujen päivittäminen on hyvin helppoa.
Lisäksi tulisi osata myös www rakentamisen perusteet, kuten esim. tiedon siirto ftp (File Transfer Protocol) ohjelmalla, kuvanmuokkaus, verkkotekstin tuottaminen, värien hallinta ja projektin kokonaisuuden hallinta ja etenkin sen huolellinen suunnittelu. Tämä kun on kaiken a & o. Huonosti suunnitellut sivut, joihin netissäkin törmää, ovat käyttäjälle ikuinen kompastuskivi. Sen sijaan etukäteen ja täsmällisesti suunnitellulla projektilla sivustoista saadaan hyvin toimiva kokonaisuus, jota ei tarvitse paikkailla jälkeen päin.

Vaatimuslista on siis varsin monipuolinen.

Laatiaksesi toimivan kauppapaikan yritykselle?

Ensinnäkin nettikaupan perustaminen vaatii tietokantojen tuntemusta. Yksi vaihtoehto nettikaupan rakentamisessa on käyttää em. Joomlaa, ja installoida siihen ekstensio nimeltään VirtueMart. Se on ilmeisen hieman hankala hallita ja vaatii oman opettelunsa, mutta näin itse nettikauppaa ei kuitenkaan tarvitse koodata käsin. Mikäli Joomlaan asentaa vielä JoomFish kielilisäosan, niin kauppaa voi pyörittää eri kieliversioin.
Tietokannoista toimivin Joomlan yhteydessä on MySql. Se on ilmainen tietokantaohjelma, johon voidaan lisätä nettikaupassa myytävät tuotteet.  Myös ilmaisia php-pohjaisia scriptejä löytyy netistä (jotka vaativat siis MySql tietokannan toimiakseen). Yksi esimerkki on vaikkapa Shop-Script FREE osoitteessa http://www.shop-script.com/scripts/shop-script-free.html.
Nettikaupan maksuprosessi voidaan hoitaa esim. pdf/ html pohjaisella laskutuksella tai hieman kehittyneemmällä Maksuturva –toiminnolla (https://www.maksuturva.fi).
Tärkeää on pohtia myös sitä, miten nettikauppaan rakennetaan toimiva navigaatio ja miten myytävät tuotteet kuvataan/valokuvataan ammattitaitoisesti. Suttuisten ja epämääräisten kuvien perustella harva meistä ostaa yhtään mitään.

3. HTML-kielen komentojen kertausta

  1. Miten viestität hakuroboteille hakusanat, joilla toivot dokumenttisi löytyvän hakupalvelimilla haettaessa.
    <HEAD><META name="keywords" content="Lasse Jalonen, opiskelu, www, javascript, verkkoviestintä"></HEAD>

  2. Kuvauksen dokumentin keskeisestä sisällöstä.
    <META name="description" content="Lasse Jalosen kotisivut">

  3. Miten kerrot kuka on dokumentin laatija (kirjoita koodi).
    <META name="author" content="Lasse Jalonen">

  4. Miten viestität selaimelle, että dokumentti ei enää näy tietoverkossa tietyn päivämäärän jälkeen (kirjoita koodi).
    <META http-equiv="expires" content="Thursday, 5 Apr 2011">

  5. Miten määrittelet dokumentissa esiintyvät värit (tausta, teksti, vierailtu hyperlinkki, aktiivinen hyperlinkki, hyperlinkki, linkki ilman alleviivausta). Kirjoita komento, jolla muutat fontin koon. Lisäät taustaäänen ja lisäät taustakuvan. Voit käyttää myös CSS määrittelyjä.
    CSS:
    body {
      background-color: black;
      color: white;
      font-size: 12px;
      background-image: url(kuva.png)
    }
    a:link { color: #FF0000; text-decoration: none; }
    a:visited { color: #00FF00; }
    a:hover { color: #FF00FF; }
    a:active { color: ##0000FF; }
    - -
    tai HTML:
    <body bgcolor="black" text="black" font size=”12” link="blue" vlink="green" alink="red">
    elikkä:
    linkki :link="väri"
    vierailtu linkki: vlink="green"
    aktiivinen linkki: alink="red"
    - -
    ja ääni:
    <meta http-equiv="REFRESH" content="0;URL='pop.mid?autostart=true'">
    <bgsound src="stills.wav" balance="0" loop="infinite"
    - -
    ja taustakuva:
    <body background="http://freenet.hut.fi/taustakuva.gif">

Miten teet linkin, joka lähettää itsellesi sähköpostia kuvaa eamiled.gif napautettaessa (Kirjoita koodi ja testaa sen toimivuus).
<a href="mailto:lasse.jalonen@dnainternet.net"> < img src="eamiled.gif"></a>

  1. Miten teet linkin, jossa siirryt "Turun AMK" -tekstiä napauttamalla Turun AMK:n kotisivulle (kirjoita koodi ja testaa sen toimivuus).
    <a href="http://www.turkuamk.fi">Turun amk </a>
    Siis: Turun AMK

4. Muunna alla oleva HTML-koodi XHTML-koodiksi ja CSS-koodiksi

--ALKUPERÄINEN--

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>

<TITLE>Kotisivu</TITLE>
<META NAME="Author" CONTENT="Jarmo Mäntyvaara ">
<META NAME="GENERATOR" CONTENT="Mozilla/4.51 [fi] /WinNT; I) [Netscape] ">
</HEAD>

<BODY TEXT="black" BGCOLOR="grey" LINK="blue" VLINK="yellow" ALINK="red">

<H1>TERVETULOA KOTISIVULLENI </H1>

<P><IMG SRC="mina.gif" HEIGHT=217 WIDTH=190 ALIGN=BOTTOM alt="Kuva"></P>

</BODY>

</HTML>
--MUUNNETTU--
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kotisivu</title>
<meta content="Jarmo Mäntyvaara " name="Author" /></head>
<body vlink="yellow" text="black" bgcolor="grey" alink="red" link="blue">
<h1>TERVETULOA KOTISIVULLENI </h1>
<p><img width="190" height="217" align="BOTTOM" alt="Kuva" src="mina.gif" /></p>
</body></html>
---CSS---
<--
@charset "utf-8";

body{
background-color:grey;
color: black;
}
a:link {color:blue;}
a:visited {color:yellow;}
-->

Tyylitiedostot voidaan tallentaa myös omaksi ulkoiseksi tiedostokseen, joka tallennetaan samaan hakemistoon kuin HTML-sivukin.
Linkki kytketään komennolla <link>, esim.
<link rel=stylesheet type=text/css”
href=esimerkki.css”>
Tämä siis <head></head> tagien osioon. Jotta tyylimäärittelyt eivät tulisi näkyviin vanhemissa selaimissa, voidaan niiden ympärille laittaa HTML- kommenttimerkinnät
<!-- ja -->

5. Kerää HTML/XHTML-kieleen liittyvistä asioista linkkejä verkosta ja linkitä ne omaan dokumenttiisi
HTML linkkejä:
Perusteellinen HTML opas
w3schoolsin HTML opas
Perusteellinen HTML opus
HTML pähkinänkuoressa
HTML perusteet
Hämeenlinnan kaupunginkirjaston kattava portaali – Makupalat ja verkkojulkaiseminen
W3c:n HTML validaattoripalvelu

XHTML linkkejä:
XHML:n perusteet, rakenne ja johdatus
XHTML konverttori
w3schoolsin XHTML opas
XHTML perustietoa
Hämeenlinnan kaupunginkirjaston kattava portaali – Makupalat ja verkkojulkaiseminen
XHTML validaattoripalvelu

CSS linkkejä:
CSS pähkinänkuoressa
CSS opas
w3schoolsin CSS opas
Tyyliohjeita
Hämeenlinnan kaupunginkirjaston kattava portaali – Makupalat ja verkkojulkaiseminen
CSS validaattoripalvelu

Takaisin HTML-harjoitusten alkuun


 

KUKA OLEN

Olen Jalosen Lasse, raisiolainen Web Designer. Lähdin kurssille mukaan, koska halusin verestää tietotekniikan taitojani ja syventää niin verkkoviestinnän kuin JavaScriptin osaamistani.

Tavoitteenani on oppia luomaan niin sisällöllisesti kuin rakenteellisesti toimivia sivuja.

Ohjelmistopaketti

Vaaditut tehtävät olen tehnyt Adoben Creative Suite CS5 Design Premium -ohjelmistopaketilla, johon olen ollut enemmän kuin tyytyväinen.


Käytössä ovat olleet etenkin Dreamweaver ja PhotoShop -ohjelmat.

MitÄ teen

Teen harrastelijapohjalta erilaisia verkkoviestinnän ratkaisuja eri asiakkaille. Myös kirjoittaminen, valokuvaaminen ja sisällönhallintaratkaisut - kuten Joomla! -kuuluvat vahvuuksiini.

Teen toimivia ratkaisuja niin designin kuin lay-outin suhteen.

Kiinnostaako

Käytettävyydeltään toimivien internet sivujen rakentaminen vaatii niin tekniikan kuin sommittelun osaamista, puhumattakaan kokonaisuuden hallinnasta ja hakukoneoptimoinnista.

Tavoitat minut osoitteesta
lasse.jalonen(at)dnainternet.net

 

 

© 2011 Lasse Jalonen