HTML:n, CSS:n ja JavaScriptin perusteet

Perusteet opetusohjelma HTML, CSS ja JavaScript

Kieli: Saksa

HTML:n, CSS:n ja JavaScriptin perusteet tutoriaali

Verkon kolme tärkeintä pilaria - HTML, CSS ja JavaScript. Opi Jan Brinkmannin tutoriaalissa perusteet ja sovella niitä suoraan. Näin voit luoda dynaamisia verkkosivustoja, tehdä ne helposti luettaviksi, lisätä kuvia, muotoilla tekstiä ja sijoitella erilaisia elementtejä. Mikä on HTML? Mikä CSS? Entä JavaScript - tutoriaalin jälkeen ei enää kysymyksiä sinulle!

62 oppituntia yhdessä yli 8 tunnin kestävässä videotutoriaalissa HTML:n, CSS:n ja JavaScriptin perusteisiin.
Hanki perustiedot helposti ja kokeile suoraan inklusiivisissa harjoituksissa
Jan Brinkmannilta, intohimoiselta web-kehittäjältä, jolla on yli 15 vuoden kokemus.

Yksi aloitus, joka maksaa itsensä sinun päivittäisessä verkkokäytössäsi. Lataa web-kehityksen perusteet tietotaitoosi!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

tiedot

Käyttökelpoinen sen kanssa:
Sisältö: 8 h Videokoulutus
Lisenssi: yksityinen ja kaupallinen Käyttöoikeudet
Bonus: sisältää työvälineet

Luokat

Verkkosuunnittelu, CMS ja kehitys

Rakkaudella luonut:

Jan Brinkmann

Johdanto

Ilmaiseksi

HTML:n, CSS:n ja JavaScriptin perusteet – 01 Johdanto

Sydämellisesti tervetuloa kurssille!

Lataa projektitiedosto

HTML: Perusteet

Perusteet HTML, CSS ja JavaScript - Mitä on HTML?

Perusteet HTML, CSS ja JavaScript - 02 Mitä on HTML?

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ä.

HTML:n, CSS:n ja JavaScriptin perusteet - HTML-dokumenttien luominen, näyttäminen ja muokkaaminen

HTML:n, CSS:n ja JavaScriptin perusteet - 03 HTML-dokumenttien luominen, näyttäminen ja muokkaaminen

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

HTML:n perusteet, CSS ja JavaScript - 04 HTML:n DNA: tagit

Perusteet HTML, CSS ja JavaScript - 04 HTML:n DNA: tagit

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

HTML: HTML-dokumenttien rakenne

HTML:n, CSS:n ja JavaScriptin perusteet – 05 Otsikkotila ja metatiedot

HTML, CSS ja JavaScript perusteet – 05 Otsikkokenttä ja metatiedot

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).

HTML:n, CSS:n ja JavaScriptin perusteet - 06 Sivun runko pääsisällöillä

HTML:n, CSS:n ja JavaScriptin perusteet - 06 Sivupalkki pääsisällöillä

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

HTML, CSS ja JavaScriptin perusteet – 07 Kommentit

HTML:n, CSS:n ja JavaScriptin perusteet – 07 Kommentit

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ä.

HTML: Hyperlinkit

Perusteet HTML, CSS ja JavaScript - 08 Relatiiviset ja absoluuttiset polkumääritykset

HTML:n, CSS:n ja JavaScriptin perusteet - 08 Suhteelliset ja absoluuttiset polkutiedot

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.

HTML:n, CSS:n ja JavaScriptin perusteet - 09 Sisäiset linkit

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

HTML:n, CSS:n ja JavaScriptin perusteet - 10 ulkoista linkkiä ja kohteet

HTML, CSS ja JavaScriptin perusteet - 10 Ulkoiset linkit ja tavoitteet

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.

HTML:n, CSS:n ja JavaScriptin perusteet - 11 viittausta asiakirjassa

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

HTML: Asiakirjat jaetaan osioihin

HTML, CSS ja JavaScript-perusteet - 12 otsikkoa

HTML:n, CSS:n ja JavaScriptin perusteet - 12 otsikkoa

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

HTML:n, CSS:n ja JavaScriptin perusteet - 13 rivin vaihtoa, välilyöntiä ja erotusviivoja

HTML:n, CSS:n ja JavaScriptin perusteet - 13 rivitystä, välilyöntiä ja erotusviivaa

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

HTML:n, CSS:n ja JavaScriptin perusteet - lisää 14 kappaleita.

HTML:n, CSS:n ja JavaScriptin perusteet - Lisää 14 kappaleen otsikkoa

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

Luodaan 15 listaa perusteista HTML, CSS ja JavaScript -kielissä.

HTML:n, CSS:n ja JavaScriptin perusteiden – Luo 15 listaa

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.

HTML:n, CSS:n ja JavaScriptin perusteet – käytä 16 taulukkoa.

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

HTML: Muut elementit

HTML:n, CSS:n ja JavaScriptin perusteet - upota 17 kuvaa

HTML:n, CSS:n ja JavaScriptin perusteet – Liitä 17 kuvaa

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

HTML:n, CSS:n ja JavaScriptin perusteet - käytä 18 HTML-entiteettiä

HTML:n, CSS:n ja JavaScriptin perusteet - käytä 18 HTML-merkintäentiteettiä

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

HTML:n, CSS:n ja JavaScriptin perusteet - 19 iFramejen upottaminen

Iframeien avulla upotat muita verkkosivustoja suoraan omalle verkkosivullesi.

HTML:n, CSS:n ja JavaScriptin perusteet - Sisällytä 20 JavaScriptia

HTML:n, CSS:n ja JavaScriptin perusteet – Lisää JavaScript 20:nen kohdalle

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

HTML: Harjoitukset

Perusteet HTML, CSS ja JavaScript - 21 tehtävä #1: Tekstit ja otsikot

Perusteet HTML:stä, CSS:stä ja JavaScript:stä – 21 harjoitus #1: Tekstit ja otsikot

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

HTML:n, CSS:n ja JavaScriptin perusteet - 22 harjoitus #2: luoda resepti itse

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

HTML, CSS ja JavaScript perusteet - 23 tehtävä #3: pitkä taulukko

HTML:n, CSS:n ja JavaScriptin perusteet - 23 harjoitus #3: pitkä taulukko

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

CSS: Johdanto

Perusteet HTML, CSS ja JavaScript - 24 Mitä on CSS?

Perusteet HTML, CSS ja JavaScript - 24 Mikä on CSS?

Opi kaskadin tyyliarkkitehtuuri (CSS) käsite.

Perusteet HTML, CSS ja JavaScript - 25 Inline-tyylit

HTML:n, CSS:n ja JavaScriptin perusteet - 25 Inline-tyylit

Opettele antamaan CSS-lausekkeet suoraan elementeille.

Perusteet HTML:stä, CSS:stä ja JavaScript:stä – 26 sisisäistä tyylilehteä.

Perusteet HTML:lle, CSS:lle ja JavaScript:lle - 26 Sisäistä tyylien määritystä

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

HTML:n, CSS:n ja JavaScriptin perusteet - 27 ulkoiset tyylitiedostot

HTML:n, CSS:n ja JavaScriptin perusteet – 27 ulkoista tyylitiedostoa

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

HTML:n, CSS:n ja JavaScriptin perusteet - 28 HTML-attribuuttia class ja id

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

HTML:n, CSS:n ja JavaScriptin perusteet – 29 Div-konttien rooli

HTML:n, CSS:n ja JavaScriptin perusteet - 29 div-säiliön rooli

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

CSS: Perusteet

HTML, CSS ja JavaScript perusteet - 30 kelluvaa elementtiä floatilla

HTML:n, CSS:n ja JavaScriptin perusteet - 30 kelluvaa elementtiä float-ominaisuudella

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

HTML:n, CSS:n ja JavaScriptin perusteet – sijoita 31 elementtiä

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

HTML:n, CSS:n ja JavaScriptin perusteet - 32 sisä- ja ulkoreunukset

HTML:n, CSS:n ja JavaScriptin perusteet - 32 sisä- ja ulkotilojen välistä etäisyyttä

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

Perusteet HTML, CSS ja JavaScript - määritä leveys ja korkeus 33 nauhaa

HTML:n, CSS:n ja JavaScriptin perusteet – Määritä leveys ja korkeus 33:ksi

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

HTML:n, CSS:n ja JavaScriptin perusteet - aseta 34 reunaa (border)

Perusteet HTML, CSS ja JavaScript - Aseta 34 rajaa (reunaviivaa)

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

HTML:n, CSS:n ja JavaScriptin perusteet - Aseta fonttikoko 35:ksi

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

Perusteet HTML:stä, CSS:stä ja JavaScript:stä - määrittele 36 fonttisukua

HTML:n, CSS:n ja JavaScriptin perusteet - määritellä 36 fonttiperhettä

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.

HTML:n, CSS:n ja JavaScriptin perusteet - 37 Lihavoitu, kursivoitu ja alleviivattu teksti

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

Perusteet HTML, CSS ja JavaScript - 38 Tekstin kohdistaminen muuttuu.

Perusteet HTML, CSS ja JavaScript - 38 Tekstin asettelu muuttuu

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

HTML:n, CSS:n ja JavaScriptin perusteet – Stailaa 39 hyperlinkkiä

HTML:n, CSS:n ja JavaScriptin perusteet - 39 hyperlinkin kaunistaminen

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

JavaScript: Johdanto

JavaScript-perusteet - 01 Mikä on JavaScript?

JavaScriptin perusteet - 01 Mikä on JavaScript?

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

JavaScriptin perusteet - 02 Sisäinen JavaScript

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

JavaScriptin perusteet – 03 Ulkoinen JavaScript

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

JavaScriptin perusteet – 04 "Document Object Model" (DOM) ja HTML-elementit

Perusteet JavaScriptista - 04 "Document Object Model" (DOM) ja HTML-elementit

Opi tuntemaan ”Document Object Model”.

JavaScriptin perusteet - Tulostetaan data

JavaScriptin perusteet – 05 Tietojen tulostaminen

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

JavaScript perusteet – käsitellä 06 klikkaustapahtumia

JavaScriptin perusteet – 06 Klikkaustapahtelujen käsittely

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

JavaScript perusteet – 07 Tekstin vaihtaminen

JavaScriptin perusteet – 07 Tekstin vaihtaminen

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

JavaScript: Perusteet

JavaScriptin perusteet – 08 Muuttujien käyttö

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

Perusteet JavaScriptista – 09 Datatyypit JavaScriptissä?

JavaScriptin perusteet – 09 JavaScriptin datatyypit?

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

JavaScript perusteet – 10 Aritmetiikkaa JavaScriptillä.

JavaScriptin perusteet - 10 Aritmetiikkaa JavaScriptillä

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

JavaScriptin perusteet – 11 koostetehtävää JavaScriptissä

JavaScriptin perusteet - 11 Yhdistelmätehtävää JavaScriptissä

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

JavaScriptin perusteet - 12 ehtoa if:llä

JavaScriptin perusteet - 12 ehtoa if-käskyllä

Ilman ehtoja ohjelmointi on vain vaikea kuvitella.

JavaScriptin perusteet - 13 for-silmukkaa

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

JavaScriptin perusteet - 14 while-silmukkaa

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

JavaScript: Edistyneet käsitteet

JavaScriptin perusteet – Määritä 15 funktiota

JavaScriptin perusteet - määrittele 15 funktiota

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

JavaScript perusteet - 16 Geltungsbereiche JavaScriptissa

JavaScriptin perusteet - 16 voimassaoloaluetta JavaScriptissä.

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

JavaScriptin perusteet – 17 tapahtumaa

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

JavaScript perusteet – 18 merkkijonoa

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

Perusteet JavaScript - 19 laskeminen JavaScriptillä

JavaScript-perusteet – 19 Laskeminen JavaScriptillä

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

Perusteet JavaScript - käytä 20:tä taulukkoa

JavaScriptin perusteet - hyödynnä 20 taulukkoa

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

JavaScript: Olio-ohjelmointi

Perusteet JavaScriptista – määrittele 21 objektia.

JavaScriptin perusteet - määrittele 21 objektia

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

JavaScriptin perusteet - 22 ominaisuutta objekteista

JavaScriptin perusteet - 22 objektin ominaisuutta

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

JavaScriptin perusteet - 23 metodia

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

Yksityiskohdat sisällöstä

HTML, CSS, JavaScript – opi perusteet ja käytä niitä heti
Monilla alueilla internetin käyttö on nykyään osa arkipäivää. Olit sitten bloggaaja, mainostekstien kirjoittaja tai verkkomarkkinoija, kehittäjä, toimittaja tai journalisti – perusymmärrys HTML:stä, CSS:stä ja JavaScriptistä helpottaa verkkotyötä ja tarjoaa lukuisia mahdollisuuksia aloittaa itsenäisesti sivustojen taustojen koodauksen.
Erikoisesti teksti- ja kuvamateriaalin sisällyttäminen, niiden muotoilu ja sijoittaminen ovat usein hyödyllisiä tekniikoita, jotka on helppo ja nopea oppia. Valmentajasi Jan Brinkmann opettaa sinulle yli kahdeksan tunnin opetusohjelmassa kaikki asiaankuuluvat näkökohdat teoriassa ja käytännössä. Kurssin sisällöt ovat seuraavat:

HTML – perusta verkkosivuillesi

Kurssi jakautuu kolmeen suureen osaan: HTML, CSS ja JavaScript. Jokaisessa osassa on erilaisia lukuja, jotka käsittelevät tiettyä pääaihetta. Saatuaan tietää, mistä HTML koostuu, opit tuntemaan HTML-dokumenttien rakenteen, luomaan hyperlinkkejä, jakamaan dokumenttejasi otsikoiden, rivinvaihtojen, kappaleiden, listojen ja taulukoiden avulla ja opit lopulta sisällyttämään muita elementtejä, kuten kuvia, iframeja tai JavaScriptiä.

CSS – muotoilu sivuillesi

CSS-oppimisosiossa antaa verkkosivuillesi rakenteen, selkeyden ja muodon. Kun ymmärrät niin kutsuttujen leijailevien tyylitiedostojen (CSS) toiminnan, voit seuraavissa oppitunneissa sijoittaa elementtejä, määrittää etäisyyksiä, asettaa fonttikokoja ja -tyylejä ja soveltaa monia muita muotoilumahdollisuuksia.

JavaScript – dynamiikkaa web-projekteihisi

JavaScript mahdollistaa lopulta staattisten HTML-dokumenttiesi dynaamistamisen. Syvennät jälleen JavaScript-elementtien sisällyttämistä ja käsittelet aiheita kuten Document Object Model tai edistyneitä käsitteitä, kuten merkkijonoja, tapahtumia tai taulukoita.

Nämä opit perusopetusohjelmassa HTML:stä, CSS:stä ja JavaScriptistä

Ymmärrät ensinnäkin webin perustoiminnan, ja toisekseen video-opetuksen jälkeen pystyt luomaan itse HTML-dokumentteja selkeässä ohjelmointirakenteessa, muotoilemaan sivustoja CSS:llä ja lisäämään JavaScriptillä enemmän dynamiikkaa. Opetellaan siten taitoja, joita voit soveltaa ja käyttää päivittäisessä työssäsi tai myös yksityisissä projekteissasi. Jatkumoa voi olla esimerkiksi PHP tai CSS ja Sass -kurssit.