HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

Samankaltaiset tiedostot
H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

Code Camp for Girls. Sanna Nygård. Lokakuussa

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

Verkkosivut perinteisesti. Tanja Välisalo

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

CSS - tyylit Seppo Räsänen

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

XML, XHTML ja CSS. T Hypermediadokumentin laatiminen. Mikko Pohja

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti


Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

selector { CSS property: value; property2: value; Code Camp for Girls Sonja Jaakkola & Sanna Nygård

HTML-ohjeet. Sivun perusrakenne <HTML> <HEAD> <STYLE TYPE="text/css"> ...tänne tulee CSS-koodi eli sivun ulkonäkö määritykset...

TIEDEJUTTUKURSSI FM VILLE SALMINEN

Ulkoasun muokkaus CSS-tiedostossa

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta:

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

AT4-kotisivukurssi. 4. jakso

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Lisätehtävät. Frantic 2015 sivu 1

Cascading Style Sheets

WWW-sivujen Verkkosivujen ulkoasu (CSS)

Johdatusta selainohjelmointiin

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

HTML5 -elementit jatkuu

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2013

Cascading Style Sheets

WWW-Sivustojen suunnittelu

WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat

Kuva xhtml-sivulla. Mirja Jaakkola

Alkuun HTML5 peliohjelmoinnissa

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

Suvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

Suvi Junes Tietohallinto / Opetusteknologiapalvelut 2012

Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä

HTML5 & CSS3 perusteet

XML & CSS. WWW-sovellus??

Mainonnanhallinta Käyttöopastus. Tekniikka. Olli Erjanti Mediareaktori

WWW-sivujen Verkkosivujen ulkoasu (CSS)

Digitaalisen median tekniikat. Luento 3: CSS

Tyylien käyttö. <LINK href="mystyle.css" rel="stylesheet" type="text/css"> 5 WWW-hypermedian perusta: HTML

Digitaalisen median tekniikat css tyylimääritykset

Ylläpitoalue - Etusivu

Asemointi. 1. Lohkon korkeus ja leveys

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

3 WWW-hypermedian perusta: HTML

Luento 1. Jouni Ikonen - Jouni.Ikonen lut.fi

HTML:n perusteet. Jari Sarja / Otavan Opisto Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.

HTML5 video, audio, canvas. Mirja Jaakkola

OPPITUNTI 3 Ensimmäinen skripti

Kotisivujen teko Weebly-työkalun avulla

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

Teeman rakentaminen Wordpressiin

JWT 2016 luento 11. to klo Aulikki Hyrskykari. PinniB Aulikki Hyrskykari

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

SALITE.fi -Verkon pääkäyttäjän ohje

Sivuston nopeus. Poista hahmonnuksen estävä JavaScript ja CSS sivun yläosan sisällöstä

MITÄ JAVASCRIPT ON?...3

Sivuston nopeus. (vanhentumista ei ole määritetty)

Web-selaimissa näkyvät sivut on rakennettu HTML-kielellä. Se tarkoittaa, että webissä olevat htm tai html päätteiset tiedostot

1 Yleistä Web-editorista Web-editori -dokumentin luominen Pikatoimintopainikkeet Tallenna... 3

Javascript 2: Ohjelmointikielen ominaisuudet. Jaana Holvikivi Metropolia

Kotisivut helposti - osa 4

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne


Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta.

HAAGA-HELIA ammattikorkeakoulu Lomakkeen tekeminen Google Docsilla

Turun yliopiston Nelli ohje käyttöönottoon

Digitaalisen median tekniikat JavaScript_osa Harri Laine 1

Ajatus kaiken taustalla

Internet-pohjaisen oppimisympäristön laadinta. Luento 3

UpdateIT 2010: Uutisten päivitys

HTML perusteita (ei julkiseen jakeluun)

Verkkopalvelun suunnittelu ja toteutus

Ulkopuolisen tyylitiedoston käyttö

/ * PROSESSORIN C-KIELINEN OHJELMA */

Sivuston tiedotwindowsrepublic.com.au

PROJEKTISIVUJEN PAÄ IVITTAÄ MISEN OHJEET

Opinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03

Digitaalisen median tekniikat. Luento 4: JavaScript

Sivuston tiedotgoogle.com

Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

CSS. Tekstin muotoilua

Hakukoneoptimoinnin ABC

SISÄLLYSLUETTELO 1 JOHDANTO META- JA MERKINTÄKIELI...2

TEEMA 2 Aineistot. Kirjautuminen Moodleen. Sisältö. Kirjaudut Moodleen sivulta Voit vaihtaa kielen valikosta.

Digitaalisen median tekniikat JavaScript_osa2

Transkriptio:

HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä (<p></p>).! Voidaan merkitä tekstin rakenne eli esimerkiksi, mikä osa tekstistä on otsikkoa ja mikä leipätekstiä.! HTML dokumentit = WEB-sivut! HTML5 on uusin standardi! http://www.w3.org/tr/html401/! http://dev.w3.org/html5/spec/overview.html

HTML-tiedosto! Html-tiedostot ovat.html-päätteisiä tekstiä sisältäviä tiedostoja! Tiedoston sisältöä voi muokata vaikka tekstieditorilla! Myös Html-kieleen erikoistuneita editoreja löytyy (tekstin väritys)! Myös WYSIWYG-editoreja löytyy! Jos tiedoston avaa selaimella, näkyy html:n mukainen verkkosivu HTML-syntaksi! Html koostuu tageista! Tagi kirjoitetaan merkkien < ja > väliin.! Tagi avataan (<tagi>) ja suljetaan (</tagi>)! Joissain tapauksissa tagi avataan ja suljetaan samassa kohdassa (<br />)! Avaamis-tagin ja sulkemis-tagin väliin tulee tagin sisältö (<tagi>sisältö</tagi>)! Tagit ovat joko sisäkkäin tai peräkkäin, mutta ne eivät milloinkaan ole lomittain! Html-merkinnät tulevat html-tagin sisään.! <html>html-merkinnät</html>! Html-sivu sisältää headerin ja bodyn, näitä merkitään tageilla head ja body

Head! Head tulee heti html-tagin avaamisen perään! Head-tagiin tulee ns. sivun näkymätön tieto! Head-tagin sisään laitettavat olennaiset tagit! Title: Sivun otsikko <title>otsikko</title>! Meta: sivuston metadata (näitä on monia) <meta name= description" content="kuvaus"/> <meta name="keywords" content="html, CSS, XML" />! Script: Sivun koodit, esim. JavaScript-koodit (Voi olla myös body-tagissa tai erillisenä tiedostona) <script type="text/javascript"> JavaScript-koodit </script> Body! Body alkaa heti headin päättymisen jälkeen! Bodyn sisään tulee sivun varsinainen sisältö! Muutama yleisin tagi! H1, h2 ja h3: Tekstin otsikkoja & väliotsikkoja <h1>kappaleen pääotsikko</h1>! P: Paragraph, tekstikappale <p>paljon, paljon edeltävään otsikkoon sopivaa tekstiä</p>! Div: Säiliö sisällölle <div>kuvia, videoita, tekstiä, tageja</div>! A: linkki <a href= http://www.samk.fi >Samkin etusivu</a>! Img: kuva <img src= kuva.jpg />

Tehtävä 1: html-sivu! Tee html-sivu, josta löytyy:! Head! Title! Tyhjä script-tagi JavaScriptiä varten! Body! H1-otsikko! P-kappale! Div, jonka sisällä on jokin kuva CSS (Cascading Style Sheets)! CSS määrittelee miten HTML elementit esitetään! HTML:aa ei alun perin tarkoitettu muokkaamaan HTML dokumentin ulkoasua! Se on tarkoitettu ainoastaan määrittelemään dokumentin sisältöä:! <h1>tämä on otsikko</h1>! <p>tämä on leipätekstiä</p>! Kun HTML:ään alkoi tulla tägejä, kuten <font> tai attribuutteja, joilla voi määritellä esimerkiksi värejä, dokumenteista alkoi tulla sekavia ja rumia (HTML 3.2).! Tätä ongelmaa varten W3C julkaisi CSS:n

CSS! CSS säästää suurelta määrältä työtä! CSS määrittelee miten HTML elementit näytetään selaimessa! Tyylit tallennetaan usein ulkoisesti *.css tiedostoon! Kaikki selaimet tukevat CSS tyylejä CSS! CSS määräytyy kahdesta osasta:! Mihin tägeihin tyyli vaikuttaa! Miten se vaikuttaa! Tämä sisältää aina ominaisuuden ja arvon

CSS body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } p { font-family: "Times New Roman"; font-size: 20px; } CSS

CSS! Miten classia käytetään?! HTML:! <p class= nimi > </p>! CSS:!.nimi { }! Miten id:tä käytetään?! HTML:! <p id= nimi > </p>! CSS:! #nimi { } Tehtävä 2: html-sivu + css! Muokkaa edellistä sivua lisäämällä siihen hieman tyylejä.! H1! P! Div! Lisää otsikolle toinen väri ja fontti! Lisää kappaleille jokin väri ja ryhmitä tekstit oikeaan laitaan (text-align)! Lisää diville taustaväri ja pyöristä vaikka sen reunat (border-radius)

HTML & CSS! Seuraavaksi tehdään yhdessä pohja, johon voitte upottaa omat kuvanne.! Eli luodaan HTML sivusto ja lisätään siihen hieman tyylejä CSS:n avulla.! Pohjana on perinteinen blogi pohja, jota muokkaamalla saatte omat sivunne toimimaan.! Deadline oli ilmeisesti 23.3.2012