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

Koko: px
Aloita esitys sivulta:

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

Transkriptio

1 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!

2 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

3 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= >Samkin etusivu</a>! Img: kuva <img src= kuva.jpg />

4 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

5 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

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

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

8 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

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

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006 H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin

Lisätiedot

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/ Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,

Lisätiedot

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009

Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009 Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate

Lisätiedot

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

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.

Lisätiedot

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

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa: XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),

Lisätiedot

CSS - tyylit. 13.11.2000 Seppo Räsänen

CSS - tyylit. 13.11.2000 Seppo Räsänen CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot

Lisätiedot

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

XML, XHTML ja CSS. T-111.361 Hypermediadokumentin laatiminen. Mikko Pohja XML, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen Mikko Pohja Sisältö XML Yleensä Eri kieliä XHTML CSS XSL XML EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard

Lisätiedot

http://www.microsoft.com/expression/

http://www.microsoft.com/expression/ Verkkojulkaisuharjoitus1 TAVOITE Harjoituksen tarkoituksena on opiskella käyttämään verkkojulkaisueditoria (Microsoft Expression Web) ja käynnistämään verkkosivu internetissä. VERKKOSIVUEDITORIN KÄYTTÖOHJEITA

Lisätiedot

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

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

Lisätiedot

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

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys WWW-OHJELMOINTI 1 WWW-ohjelmoinnin kokonaisuus SGML, XML, HTML WWW-selaimen sovellusohjelmointi WWW-palvelimen sovellusohjelmointi Eero Hyvönen Tietojenkäsittelytieteen laitos Helsingin yliopisto 26.10.2000

Lisätiedot

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

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen

Lisätiedot

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta: http://notepad-plus-plus.org/ 1 HTML-perusteita HTML on lyhenne sanoista Hyper Text Markup Language. Aluksi oli kyse tekstidokumenteista, jotka oli linkitetty toisiinsa nk. hyperlinkkien avulla. Nykyään HTML-dokumentit sisältävät paljon

Lisätiedot

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN

TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word

Lisätiedot

HTML-ohjeet. Sivun perusrakenne