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

Marjatta Salminen
8 vuotta sitten
Katselukertoja:

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

Samankaltaiset tiedostot

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