HTML:n, CSS:n ja JavaScriptin perusteet tutoriaali

Sydämellisesti tervetuloa kurssille!

HTML:n ymmärtämisen kannalta on hyödyllistä ymmärtää tarkemmin, mitä HTML itse asiassa on. Tämä oppitunti käsittelee juuri tätä kysymystä.

Ratkaiseva kysymys, kun vasta aloitat: Miten HTML-dokumentit luodaan, näytetään tai muutetaan? Tässä videossa löydät vastauksen.

HTML-dokumenttien perusta ovat niin sanotut tagit. Konsepti opit tässä oppitunnissa.

HTML-dokumentit koostuvat päähän sisältävät tiedot ovat dokumentista ja näkyvästä sisällöstä. Tässä oppitunnissa keskitytään ensin pään alueeseen (head).

Varsinaiset sisällöt sijoitetaan body-alueelle. Tämä perustavanlaatuinen jakaminen on ehdottomasti ymmärrettävä. Tämä oppitunti on siis joka tapauksessa pakollinen!

Erityisesti laajoilla asiakirjoilla on hyötyä kommenteista, jotka eivät näy itse verkkosivustolla. Ne voivat tehdä koodista selkeämpää ja dokumentoidumpaa. Opettele luomaan niitä.

Verkossa törmäät jatkuvasti polkuihin - ja kahdessa eri muodossa: suhteellisina tai absoluuttisina polkuina. Käy tämä oppitunti läpi ymmärtääksesi käsitteen.

Viittaukset verkkosivuilla ovat erittäin yleisiä. Toteutuksen löydät tästä artikkelista.

Viittaukset muihin verkkosivustoihin ovat yhtä tärkeitä ja kuuluvat myös verkkosivuston arkeen. Lisäksi on olemassa kohdennus, joka määrittää, miten linkit avautuvat. Opi, miten tämä toteutetaan.

Viittaukset samaan asiakirjaan tunnetaan myös nimellä ankkurit. Opi asettamaan ne ja viittaamaan nykyisen sivun alueisiin.

Hierarkkiseen rakenteeseen kuuluvat muun muassa otsikot. Täällä opit tuntemaan saatavilla olevat elementit.

Välilyönnit ja rivinvaihdot HTML-dokumenteissa ovat rajoitettuja. On tärkeää, että tunnet tämän käsitteen.

Tekstissä kappaleilla on tärkeä rooli. Tässä opit asettamaan ne.

Erityisesti verkkosivuilla tekstien on oltava selkeitä. Luettelot auttavat katsojaa silmäilemään nopeasti. Siksi opetus järjestetyistä ja järjestämättömistä listoista on ehdoton velvollisuus.

Taulukoita on äärimmäisen tärkeää käyttää datan taulukkolajittelussa. Tässä opit perusteet.

Verkkosivua ilman kuvia on mahdoton kuvitella. Opit täällä, miten lisäät kuvia.

Opettele lisäämään erikoismerkit HTML-entiteetteinä dokumentteihisi.

Iframeien avulla upotat muita verkkosivustoja suoraan omalle verkkosivullesi.

JavaScript-tiedostot upotetaan HTML-dokumentteihin. Tässä opit, miten se tapahtuu.

Ensimmäisessä HTML-harjoituksessa käsitellään tekstien muotoilua ja otsikoiden lisäämistä.

Tässä luot reseptin HTML-dokumentin ja käytät perus-HTML-elementtejä.

Tauluista käytettyä tietoa sovelletaan nyt käytännössä.

Opi kaskadin tyyliarkkitehtuuri (CSS) käsite.

Opettele antamaan CSS-lausekkeet suoraan elementeille.

Sisäiset tyylitiedostot ovat toinen tapa antaa ohjeita suoraan asiakirjassa.

Usein esiintyvä tilanne: tyylitiedostot siirretään ulkoisiin tiedostoihin ja liitetään niihin.

Muodostamisessa attribuutit "class" ja "id" ovat äärimmäisen tärkeitä. Opi tuntemaan ne täällä.

Juuri nyt kontit ovat tärkeässä roolissa CSS-työskentelyssä. Tässä opit käsitteen esimerkin avulla div-tagista.

float-attribuutin avulla elementtejä voidaan sijoittaa eri tavoin. Keskeinen elementti suunnittelussa. Pakollinen luento!

Myös position-attribuutti on äärimmäisen tärkeä ja kuuluu jokaiseen CSS-opetussuunnitelmaan.

Opettele erilaiset etäisyydet (”padding” ja ”margin”).

Leveys ja korkeus (korkeus ja leveys) ovat tämän oppitunnin aiheena.

HTML-elementtejä voidaan esittää kehyksen avulla. Tähän tarkoitukseen on border-attribuutti, jonka opit tässä videossa.

Jokainen on jo käyttänyt eri fonttikokoja. Tämän oppitunnin jälkeen voit määrittää ne CSS:llä.

Kirjasintyypit eivät aina ole käytettävissä jokaisella tietokoneella. Siksi verkkosivuilla määritellään mieluummin fontti perheet. Opi tästä videosta, miten se tehdään.

Tekstin muotoilun perusta: lihavoitu, kursivoitu ja alleviivattu teksti. Tässä oppitunnissa esittelen sinulle CSS-ohjeet.

Tekstin kohdistaminen on tuttu myös tekstinkäsittelystä ja ei ole epätavallista myöskään verkossa. Selvitä, miten se toimii CSS:n avulla.

Tavallista linkin ulkoasua voidaan parantaa merkittävästi CSS:llä. Opettele erilaiset linkkien tilat ja niihin liittyvät CSS-määritykset.

Lyhyt yleiskatsaus kysymykseen: "Mitä JavaScript oikeastaan tarkalleen ottaen on?

Tässä pikakurssilla upotat JavaScript-koodin HTML-dokumenttiin. Aluksi opit tekemään tämän suoraan dokumenttiin.

Ulkoiset JavaScriptit ovat myös tärkeitä ja jatkuvasti läsnä verkossa.

Opi tuntemaan ”Document Object Model”.

Tietojen tulostaminen TVML/TVJS:issä ei ole välttämätöntä tällä tavalla, mutta se on silti tärkeää jatkoesimerkkejä varten.

JavaScriptin keskeinen ominaisuus on ohjaus tapahtumien avulla. Tässä opit käsitteen esimerkin avulla klikkaustapahtumien avulla.

Opi, miten voit käyttää elementtejä ja muuttaa niiden arvoa.

Muuttujat - jokaisen ohjelmointikielen keskeinen käsite. Tässä opit, miten ne luodaan JavaScriptissä.

Vaikka JavaScript ei käytä deklaroinnissaan eksplisiittisiä tietotyyppejä, sinun tulisi silti ymmärtää käsite.

Tietokone (saksaksi "Rechner") ei pysty laskemaan mitään ilman yksinkertaista aritmetiikkaa. JavaScript osaa tietysti myös tämän.

Vaikka et suoraan käyttäisikään niitä itse, kohtaat yhdistettyjä sijoituksia käytännössä useammin. Hyvä, jos osaat lukea syntaksia!

Ilman ehtoja ohjelmointi on vain vaikea kuvitella.

Myös toistamisen käsite on äärimmäisen tärkeä. Tässä opit yhden vaihtoehdon JavaScriptissä.

Myös while-silmukoilla on käyttötarkoituksensa. Hyvä, jos tunnet nekin.

Toimintoja tulet käyttämään myös TVJS:ssä. Tärkeä käsite, jonka ymmärtäminen on tarpeen.

Jotta voit liikkua ohjelmakoodissa järkevästi, sinun täytyy tuntea JavaScriptin toimintapiirit (Scopes).

Tässä käsitellään vielä kerran ja hieman tarkemmin tapahtumia.

Tekstit todennäköisesti kohtaavat sinua jokaisessa sovelluksessa. Siksi ne kuuluvat ehdottomasti mukaan pikakurssille.

Aiheet kuten satunnaisluvut ja muut vaativat laskelmat ovat myös tärkeitä.

Myös taulukoita kohtaat varmasti JavaScript- ja TVJS-ympäristöissä. Hyvä, jos tunnet ne.

Myös TVJS:ssä käytetään objekteja. Sinun pitäisi siis tuntea vähintään JavaScriptin toteutus.

Ominaisuudet kuuluvat oliopohjaiseen ohjelmointiin ja niiden tulisi yleisesti ymmärtää.

Myös menetelmät ovat tärkeitä ja niitä kohtaat usein TVJS-esimerkeissä.