HTML ja CSS aloittelijoille

Joka haluaa luoda verkkosivustoja, tulee lopulta kosketuksiin HTML:n kanssa. Siksi valloittakaamme yhdessä tulevissa videotreenauksissa kaunis HTML-maailma. Tulette näkemään vaihe vaiheelta, mitä tämä kieli on ja miten voit luoda sivustoja sen avulla yhdistettynä tyylitiedostoihin. Alussa kuitenkin seisoo yksi kysymys: Mitä oikein on HTML ja tyylitiedostot? Tämän videotreenauksen lopussa kuulette myös, mitä ohjelmistoja tarvitsette sivustojen luomiseen ja testaamiseen.

Toisin kuin esimerkiksi Javassa, HTML:ssä voi saada nopeasti ensimmäiset tulokset ilman suurta perehtymistä. Kaikki mitä tarvitset alkuun, on editori ja selain. Tässä videotreenissä teet ensimmäisen HTML-dokumenttisi ja saat heti tuloksen selaimessa. Samalla opit, miten HTML-dokumentit eli verkkosivut rakentuvat ja millainen perusrakenne niillä on.

Element, Tag ja Attribut käsitteiden välinen yhteys on jo tuttu teille tämän sarjan ensimmäisestä osasta. Nyt on aika selvittää, miten näitä asioita voidaan käytännössä hyödyntää HTML-dokumenteissa. Tämän videokoulutuksen lopussa saatte tietää, miten voitte tarkistaa HTML-koodinne syntaktisen oikeellisuuden.

Teidän verkkosivustonne koostuvat varmasti paitsi kuvista myös teksteistä. Ja tekstien tulisi olla järkevästi rakennettuja jo pelkästään hyvän luettavuuden takia. Tätä varten HTML tarjoaa lukuisia elementtejä. Tässä videotreenissä esitellään tärkeimmät tekstien rakenteeseen liittyvät elementit. Lisäksi opit, miten HTML:n omia merkkejä voidaan maskata ja miten ohjelmakoodia voidaan tulostaa.

Hyvän lukemisen kannalta tarvitaan järkevää muotoilua teksteissä. Ja tämä menee pelkän rakenteen luomisen yli, kuten otsikoiden ja tekstikappaleiden. Esimerkiksi HTML:ssä voit merkitä lainaukset ja esittää yksittäisiä lauseita lihavoina tai kursiivina. Tähän tarvittavat työkalut tarjoaa tämä videotreeni.

Elementit, jotka tulevat aina vastaan HTML:ssä, ovat listat. Tämä pätee muuten paitsi tehtävälistoihin, yhteystietoihin, myös valikoiden määrittelyyn. Listat ovat siis keskeisessä asemassa HTML:ssä. Tarpeeksi hyvä syy tarkastella niitä perusteellisesti. Tässä videokoulutuksessa opitte kaikki ne listaustyyppiset, joita HTML tarjoaa. Näitä ovat pistelistat, numeroitu lista, määritelmälistat ja valikkolistat. Lisäksi saatte vinkkejä siitä, miten listoja voidaan tarvittaessa sovittaa visuaalisesti.

Taulukoilla on edelleen tärkeä rooli verkkosivuilla. Tämä pätee kuitenkin enää vain tietojen esittämisen kannalta. CSS:n puuttuessa tai sitä ei vielä todellakaan tuettu selaimissa, taulukoita käytettiin muuhunkin tarkoitukseen: asettelujen toteuttamiseen. Asetelmaelementit sijoitettiin taulukkokennoihin. Onneksi CSS:llä hallitsemattomat asettelu-taulukko-hirviöt kuuluvat onneksi jo menneisyyteen. Nykyään taulukoita käytetään web-suunnittelussa yksinomaan siihen, mihin ne alun perin on tarkoitettukin: tietojen selkeään esittämiseen.

Yhdenmukaisesti näyttävät taulukot eivät välttämättä tarvitse olla identtinen määrä soluja taulukon rivissä. Tässä videokoulutuksessa näytetään, miten voit yhdistää taulukon soluja keskenään. Toisessa osassa opit jotain taulukoiden otsikoinnista. Tämä näkökulma on tärkeä, koska siten voi heti osoittaa vieraille, mitkä tiedot lopulta ovat kyseessä. Videokoulutus päättyy yksityiskohtaiseen katsaukseen HTML-taulukoiden muotoiluun. Sillä juuri tällä alueella on tapahtunut paljon verrattuna aikaisempiin HTML-versioihin.

Vain harva verkkosivusto tulee toimeen ilman grafiikkaa. Ei siis ole ihme, että grafiikka on tärkeä aihe myös tässä sarjassa. Tässä ja tulevissa videokoulutuksissa näytetään, miten voit sisällyttää grafiikkaa verkkosivuillesi. Alussa kuitenkin korostuu toinen näkökohta: Mitkä kuvamuodot sopivat ylipäätään verkkokäyttöön? Toisessa osassa käsitellään sitten sitä, miten kuvapolkuja voidaan viitata.

Kuinka kuvia periaatteessa voi viitata, näytettiin edellisessä osassa. Kuitenkin siitä huolimatta kuvien äärettömiä mahdollisuuksia ei ole vielä saavutettu. Itse asiassa kuvia voi kuvata tarkemmin vastaavien atribuuttien avulla. Tästä on kyse tämän videon alussa. Toisessa osassa kuvatekstien toteuttamista HTML5-syntaksin avulla kuvataan.

Internetin suola on mahdollisuus yhdistää sisältöjä toisiinsa hyperlinkkien avulla. Mikäli näitä hyperlinkejä ei olisi, Internetiä ei voitaisi kuvitella nykyisessä muodossaan. HTML tarjoaa erilaisia tapoja hyperlinkkien määrittelyyn, ja niistä voitte oppia tässä ja seuraavassa videotreenissä.

HTML tarjoaa hyperlinkkien suhteen paljon enemmän mahdollisuuksia kuin mitä edellisessä videokoulutuksessa näytettiin. Voit esimerkiksi määrittää sähköpostiviittauksia ja tarjota tiedostoja ladattavaksi. Nämä ja muut hyperlinkkiversiot opitte tässä videokoulutuksessa.

Ennakoidakseni: Erityisesti HTML5:ssä lomakkeet ovat ottaneet valtavan harppauksen eteenpäin. Kiitos lukuisille uusille kenttätyypeille, voidaan luoda erittäin mielenkiintoisia lomakkeita. Nämä uudet mahdollisuudet tulet tietysti vielä oppimaan tuntemaan. Tässä video-oppaassa aloitetaan kuitenkin tarvittavalla perustaidoilla, joita tarvitaan lomakkeiden määrittelyyn. Aluksi käsitellään yksirivisten syötekenttien luomista. Tulet näkemään, kuinka ne voidaan määritellä, kuinka niihin voidaan ennalta asettaa arvoja ja miten ne voidaan asettaa vain-lukuiseksi. Lisäksi tulet oppimaan salasanakenttien määrittelyn. Tämä on loppujen lopuksi kenttätyyppi, jota voidaan tarvita aina silloin tällöin.

Tässä videossa opitte tuntemaan lisää kenttätyyppejä, joilla voitte varustaa lomakkeitanne. Tarkemmin sanottuna kyse on valintakentistä, radiopainikkeista ja valintaruuduista. Kaikki nämä ovat tärkeitä elementtejä, joita tarvitaan lomakkeissa yhä uudelleen. Siksi onkin hyvä syy tarkastella näitä ja muita elementtejä tarkemmin.

HTML5:n myötä erityisesti lomakkeiden osalta on tapahtunut paljon. Riittävä syy tarkastella kattavasti monia uusia lomaketoimintoja, joita voidaan nyt käyttää. Ei enää tavanomaisten syöttökenttien aikaa. Vihdoinkin voidaan määritellä myös liukusäätimiä, päiväyskenttiä jne. - ja kaikki tämä ilman JavaScriptin käyttöä.

HTML5-lomakkeiden maailmaan perehdyttiin edellisessä videokoulutuksessa. Kuitenkaan tämä ei ole vielä kaikki, mitä HTML5 voi tarjota tällä alueella.

HTML5:n lisäksi esitellyjen kenttätyyppien lisäksi on myös lukuisia muita mielenkiintoisia näkökohtia. Esimerkiksi nyt on mahdollista hyvin vähällä vaivalla toteuttaa lomakekenttien automaattinen täydennysominaisuus Google-mallin mukaan. Nämä ja muut asiat esitellään tässä videokoulutuksessa.

Joka perehtyy HTML5:een, ei voi olla käsittelemättä semantiikkaa. Tässä ja seuraavissa videotreenauksissa opitte tärkeimmät elementit, joita HTML5 tuo mukanaan, joiden avulla voitte järkevästi rakentaa dokumentteja. Itse asiassa tämä looginen rakenteellisuus on välttämätöntä, jos haluaa tehdä verkkosivustonsa tulevaisuuden kestäviksi.

HTML5 tuo mukanaan lukuisia uusia rakenteellisia elementtejä. Mitkä nämä periaatteessa ovat, on jo näytetty edellisessä videokoulutuksessa. Nyt on aika ottaa nämä elementit käyttöön käytännössä. Nämä elementit mahdollistavat dokumenttien semanttisen rakenteen. Tässä videokoulutuksessa tutustutte ensisijaisesti kahteen elementtiin article ja section. Nämä elementit luovat HTML-dokumenttien perusrakenteen. Tämän videon lopussa tarkastellaan vielä kerran eroja, jotka ovat divin, articlen ja section välillä.

HTML5:ssä asiakirjat voidaan jakaa vain artikkeleihin ja osioihin. Itse asiassa on olemassa paljon lisäelementtejä, kuten otsikko, alatunniste ja muut, semanttisen rakenteen luomiseksi. Nämä ovat ehdottomasti sen arvoisia, että ne tarkastetaan tarkemmin.

Tässä viimeisessä Semanttisen elementin videokoulutuksessa opitte lisää rakennuselementtejä. Itse asiassa HTML5 tarjoaa myös elementtejä navigointialueille, reunaviitteille ja yhteenvedoille.

Aiemmissa HTML-versioissa multimediainhadeiden liittäminen oli painajainen. Yritettiin yhdistää object- ja embed-elementtejä tuodaksemme videoita ja ääntä verkkosivulle. Epävarmaa oli, näyttikö upotettu video todella. Myös tällä alueella on HTML5:ssä tapahtunut paljon kehitystä.

Miten upottaa videoita, olette nähneet. Nyt videot eivät tietenkään ole kaikki, mitä voit esitellä vierailijoillesi verkkosivustolla. Tässä videokoulutuksessa kerrotaan, mitä vaihtoehtoja HTML5 tarjoaa sinulle äänitiedostojen ja Flash-elokuvien upottamiseen. Sillä myös näitä asioita on joskus näytettävä sivustollaan.

Frames eivät enää ole osa HTML5:ttä. Sen sijaan niiden nimikkoserkut, iFramet, ovat päässeet mukaan uuteen HTML-aikaan ja ovat mukana HTML5:ssä. Perinteiset framet jakavat sivun itsenäisiin osiin, kun taas iFramen avulla voi upottaa mitä tahansa resursseja verkkosivuille.

HTML on tarkoitettu sisällön rakenteen luomiseen. Kun siirrytään sivun muotoiluun, kuvioon astuvat cascading stylesheets (CSS). Vain CSS:n ja HTML:n yhdistelmä mahdollistaa tylsästä HTML-rakenteesta miellyttävän näköisten verkkosivujen luomisen. Hyvä syy siis tarkastella CSS:ää tarkemmin.

Yksi käsite, joka tulee usein vastaan CSS:n yhteydessä, on "valitsimet". Näiden valitsimien avulla määritellään lopulta ne elementit, jotka halutaan muotoilla CSS:n avulla. Tässä videokoulutuksessa tulet oppimaan ensimmäiset valitsimet. Esitellään sinulle elementti-, ID- ja yleisvalitsimet. Näiden kanssa tulet tekemään paljon töitä päivittäin, kun muotoilet sivustoja CSS:llä.

Muutamia valitsimia esiteltiin edellisessä videokoulutuksessa. Tietenkin CSS:llä on kuitenkin paljon muita valitsimia tarjottavanaan.

Tässä viimeisessä valitsin videotreenissä esittelen teille hyvin erityisen valitsimen muodon. Kyseessä ovat niin kutsutut pseudoluokat ja pseudoelementit. Nämä ovat sellaisia valitsimia, jotka eivät viittaa tiettyihin HTML-elementteihin, vaan ne generoidaan tulostuslaitteelta.

Tässä ja tulevissa videoharjoituksissa esittelen teille tärkeimmät CSS-ominaisuudet. Tässä vaiheessa ei ole tarkoituksena esitellä teille CSS-viitelähdettä. Sen sijaan haluan, että saatte käsityksen siitä, mitä CSS:llä voi tehdä. Alkaen tästä kohdasta keskitymme kirjoitustyyliin. Tässä videoharjoituksessa esitellään kaikki asiat, jotka liittyvät suoraan niin kutsuttuihin fontteihin. Huomioikaa, että kirjoitustyyliin liittyy muitakin ominaisuuksia, jotka esitellään seuraavassa videoharjoituksessa.

Tässä videokoulutuksessa esiteltyjen CSS-ominaisuuksien avulla voidaan muokata tekstejä ja merkkejä visuaalisesti. Esimerkiksi kirjainten välistä etäisyyttä voidaan muuttaa ja tekstiä voidaan asetella. Nämä ominaisuudet auttavat siis myös tekstin esittämisessä houkuttelevalla tavalla.

Tietysti CSS:ssä ei saa unohtaa värimääritelmiä eikä graafisia taustoja. Vastaavat ominaisuudet esitellään tässä videokoulutuksessa. CSS:llä on itse asiassa runsaasti mahdollisuuksia myös tällä alueella. Ei siis voi määrittää vain yksinkertaisia värejä ja kuvia, vaan myös toistuvia taustakuvioita on mahdollista luoda.

Erityisesti silloin, kun kyse on verkkosivujen suunnittelusta, tulette kohtaamaan määrittely ulkoreunoista ja väleistä. Tässä sarjan viimeisissä videotreenauksissa toteutetaan kattava esimerkkiprojekti, jossa käytetään käytännössä näitä ja muita CSS-ominaisuuksia.

CSS tarjoaa joitain mielenkiintoisia ominaisuuksia tekstialueille ja -lohkoille, joita en haluaisi jättää teiltä huomaamatta. Voit esimerkiksi kohdistaa tekstialueet vasemmalle ja oikealle käyttäen CSS:ää.

Kun puhutaan kehyksistä, useimmat varmasti ensimmäisenä ajattelevat taulukoita. Ja todellakin kehykset ovat tärkeä osa yhdessä taulukoiden kanssa. Kuitenkin CSS:n avulla myös muita elementtejä voidaan varustaa kehyksillä. Ja millaisilta nämä kehykset lopulta näyttävät, voidaan määrittää myös CSS-määrityksillä.

Kuinka luettelot määritellään, tiedätte todennäköisesti jo. Tämä on itse asiassa esitelty perusteellisesti tässä sarjassa. Muodikas ei listat ole kuitenkaan välttämättä. Jotta ne olisivat myös visuaalisesti houkuttelevia, on olemassa vastaavia CSS-ominaisuuksia. Mitkä nämä ovat ja miten niitä käytetään, saat selville tästä videokoulutuksesta. Toisessa osassa käsitellään niin kutsuttuja laskureita, joiden avulla voidaan toteuttaa myös monimutkaisempia numerointeja.

Kun on kyse verkkosivujen asettelusta, niin kutsuttu laatikkomalli on jatkuvasti mukanasi. Koska sen avulla määritetään loppujen lopuksi, miten ja missä elementit sijoitetaan.

Voidaksesi sijoittaa elementtejä verkkosivustolla haluamiisi paikkoihin, sinun täytyy turvautua hyvin tarkkoihin CSS-ominaisuuksiin.

Edellisessä videokoulutuksessa mainittiin jo lyhyesti niin kutsuttu Floating-periaate. Aihe on kuitenkin niin monimutkainen, että tähän halutaan vielä kerran tarkastella tuota leijumista yksityiskohtaisesti. Itse asiassa kyseessä on ratkaiseva käsite CSS:ssä. Vain ymmärtämällä tätä teemaa voi todella luoda verkkosivuja.

Tähän asti tehdyissä videokoulutuksissa on käyty läpi perusteet HTML:n ja CSS:n käytöstä. Nyt on tietysti aika alkaa korjata ensimmäisiä hedelmiä. Seuraavissa videokoulutuksissa rakennetaan vaihe vaiheelta esimerkkisivusto. Tässä videokoulutuksessa opitte kuitenkin ensin tuntemaan erilaiset layout-vaihtoehdot. Sopivan layoutin valinta tulisi aina olla aloituskohta kun suunnittelette verkkosivua.

Menen käytännön projektissamme oletustyyppisen sarakkeiden asettelun perusteella. Ennen kuin kuitenkaan esitän tämän projektin konkreettisesti ja värillisenä, haluan näyttää teille hyvin selkeästi, miten voitte itse toteuttaa sarakeasetteluja. Painopisteessä ovat kahden ja kolmen sarakkeen asettelut, koska ne muodostavat edelleen suurimman osan verkkosivujen perusteista.

Seuraavissa videotreenauksissa näytän teille, miten sivuston ulkoasu toteutetaan askel askeleelta. Siihen on monenlaisia lähestymistapoja. Usein ulkoasut luodaan Photoshopissa. Yksittäiset sivuelementit leikataan sitten ja yhdistetään CSS:n ja HTML:n avulla uudelleen yhdeksi sivustoksi. Samaa tehdään myös täällä. Kuitenkin minä käytän ilmaista GIMP-ohjelmaa Photoshopin sijaan. Kuvatut vaiheet voidaan kuitenkin toteuttaa samoin Photoshopissa.

Ensimmäiset askeleet kohti omaa ulkoasua tehtiin edellisessä videokoulutuksessa. Tietenkin puuttuu vielä monia elementtejä. Nämä lisätään tähän videokoulutukseen. Kun ulkoasu sitten on valmis, jatketaan leikkaamista, niin kutsuttua Sliceria. Tämä on lopulta työvaihe, jonka avulla luotu design voidaan käytännössä toteuttaa HTML:llä ja CSS:llä.

Olette luoneet ulkoasun. Nyt siirrymme sen käytännön toteuttamiseen. Tässä videokoulutuksessa luomme yhdessä verkkosivuston HTML-pohjan.

Sivuston runko on pystyssä, mutta se näyttää vielä melko niukalta. Tässä videokoulutuksessa sivustoa laajennetaan edelleen. Ensimmäisenä painopisteessä on valikko, joka sijaitsee sivuston yläosassa. Siihen liittyvät myös oikea ja alavarausvalikko.

Tärkeä näkökulma houkuttelevan verkkosivuston luomisessa on tietysti niiden tekstin ulkonäkö. Tässä sarjassa olette jo oppineet HTML:n ja CSS:n antamat mahdollisuudet tekstin muotoiluun. Tässä videotreenissä niitä käytetään sivun kohottamiseen. Muuten kuin klassiseen tyyliin emme keskity. Taikasana "eksoottisten" kirjasintyyppien käyttöön on @font-face.

Yleensä vierailijoille tulisi tarjota mahdollisuus ottaa yhteyttä. Yksinkertaisimmassa tapauksessa siihen merkitään puhelinnumero ja/tai sähköpostiosoite. Sitä voi tehdä näin, mutta se ei ole kovin kätevää vierailijoille. Siksi tässä videokoulutuksessa luodaan lomake, jonka avulla vierailijat voivat ottaa meihin helposti yhteyttä. Ja tietenkin hyödynnämme HTML5:n ja CSS3:n meille tarjoamia mahdollisuuksia.

Perusrakenne ja lomakkeen perusmuotoilu on määritelty ja valmiina. Ja todellakin, lomake näyttää jo melko houkuttelevalta. Kiitos CSS3:lle, mutta siinä on vielä paljon enemmän, kun kyse on lomakkeen visuaalisesta parantamisesta. Tässä videokoulutuksessa lomaketta muokataan vielä hieman.

Jo nyt varmaan olette käyttäneet paljon aikaa ja vaivaa verkkosivustonne kehittämiseen. Alkaen suunnittelusta ja ulkoasun luomisesta aina sen toteuttamiseen HTML:ssä ja CSS:ssä. Tämä antaa siis hyvän syyn esitellä sivustonne maailmalle lopultakin. Tästä tarkoituksesta on kyse tässä videokoulutuksessa. Näytän teille, miten voitte julkaista sivustonne verkossa. Aluksi opitte, miten saatte oikean palveluntarjoajan ja sopivan verkkotilan paketin. Sen jälkeen datat siirretään suositulla FileZilla-ohjelmalla palvelimelle. Ja sitten, no, silloin verkkosivusto on totta kai verkossa.

Tässä videokoulutuksessa haluan antaa teille pienen katsauksen oikeaan kehitysympäristöön verkkosivujen luomiseen. Ne, jotka ovat jo kirjoittaneet kokonaisia verkkosivuja tai pienempiä yksittäissivuja, omistavat yleensä jo nämä editointiohjelmat ja voivat hypätä tämän videon yli.

Näytetään:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-pohja on voimakas mallipohja HTML5- ja CSS3-verkkosivuille; se tekee HTML5:stä mahdollisimman hyvin yhteensopivan selainten välillä ja sisältää joitain erinomaisia koodimalleja JavaScript, CSS3 ja tietysti myös HTML -alueilla.

Tässä videokoulutuksessa haluan esitellä teille juuri nämä ominaisuudet. HTML5:n ja CSS3:n aloittamiseen ei juuri nyt ole parempaa mallipohjaa.

Tässä videokoulutuksessa haluan esitellä teille muutamia erittäin hyödyllisiä työkaluja, joiden avulla voi kehittää HTML5: tä ja CSS3: ta.

Siihen sisältyy:
html5css3box.com
kuler.adobe.com (nyt https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com