do you speak html?
DESCRIPTION
Naslov: Do you speak HTML? Natjecanje povodom Europskog tjedna programiranja Autorica: Kristina Novak, dipl. informatičarka - OŠ "Matija Gubec"CernikTRANSCRIPT
Uvod u HTML – jezik za opis web stranicaRadionica – voditeljica Kristina Novak
Do you speak HTML?
Cernik, 27. 11. 2013.
ŠKOLSKI WEB – „IZVANA”
ŠKOLSKI WEB – „IZNUTRA”
WEB STRANICA – današnji rad – „IZVANA”
WEB STRANICA – današnji rad – „IZNUTRA”
HTML kod
<oznake> atributi ˝vrijednosti atributa˝
<oznaka atribut=˝vrijednost_atributa˝>
</kraj_oznake>
Osnovi HTML kod
<html><head>
zaglavlje – naslovi, jezik stranice</head><body>
tijelo – sadržaj stranice</body></html>
<html><head></head><body>Ovo je moja prva web stranica pisana HTML kodom. </body></html>
PISANJE TEKSTA<body> tekst </body>
<html><head></head><body>Ovo je moja prva <b> web stranica </b> pisana HTML kodom. </body></html>
PODEBLJAVANJE SLOVA<b> tekst </b>
<html><head></head><body>Ovo je moja prva <b> web stranica </b> pisana <i> HTML kodom. </i> </body></html>
UKOŠAVANJE SLOVA<i> tekst </i>
<html><head></head><body>Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </body></html>
PODCRTAVANJE SLOVA<u> tekst </u>
<html><head></head><body><font color=˝red˝> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font></body></html>
OBLIKOVANJE SLOVA - boja<font color=˝red˝> tekst </font>
P
<html><head></head><body><font color=˝red˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font></body></html>
PRIJELOM RETKA<br>
<html><head></head><body><font color=˝red˝ size=˝2˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font></body></html>
OBLIKOVANJE SLOVA - veličina<font size=˝2˝> tekst </font>
<html><head></head><body><font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font></body></html>
OBLIKOVANJE SLOVA - font<font face=˝Verdana˝> tekst
</font>
<html><head></head><body><p> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </p><p> Idem u OŠ „Matija Gubec” Cernik. </p></body></html>
ODLOMCI <p> tekst </p>
P
<html><head></head><body><p align=˝left˝> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </p><p align=˝center˝ > Idem u OŠ „Matija Gubec” Cernik. </p></body></html>
PORAVNANJE ODLOMKA<p align=˝left˝> tekst </p>
<html><head></head><body bgcolor=˝silver˝><p align=˝left˝> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </p><p align=˝center˝ > Idem u OŠ „Matija Gubec” Cernik. </p></body></html>
BOJA POZADINE STRANICE<body bgcolor=˝silver˝>
<html><head>
<title>Dobrodošli!</title></head><body bgcolor=˝silver˝><p align=˝left˝> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </p><p align=˝center˝ > Idem u OŠ „Matija Gubec” Cernik. </p></body></html>
NASLOVNA TRAKA - KARTICA<title>tekst</title>
<html><head>
<title>Dobrodošli!</title></head><body bgcolor=˝silver˝><p align=˝left˝> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </p><p align=˝center˝ > Idem u OŠ „Matija Gubec” Cernik. Posjetite je na <a href=˝http://www.os-matija-gubec.hr/˝>webu. </a> </p></body></html>
POVEZNICA - HIPERVEZA<a href=˝http://www...˝>tekst</a>
P
<html><head>
<title>Dobrodošli!</title></head><body bgcolor=˝silver˝><p align=˝left˝> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </p><p align=˝center˝ > Idem u OŠ „Matija Gubec” Cernik. Posjetite je na <a href=˝http://www.os-matija-gubec.hr/˝>webu. </a> </p><p align=˝center˝> <img src=˝skola.JPG˝></p></body></html>
UMETANJE SLIKE<img src=˝ime_slike.jpg˝>
<html><head>
<title>Dobrodošli!</title></head><body bgcolor=˝silver˝><p align=˝left˝> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </p><p align=˝center˝ > Idem u OŠ „Matija Gubec” Cernik. Posjetite je na <a href=˝http://www.os-matija-gubec.hr/˝>webu. </a> </p><p align=˝center˝> <img src=˝skola.JPG˝></p></body></html>
Zadatak: Oboji tekst u drugom odlomku po želji. Promijeni veličinu i vrstu slova.
<html><head>
<title>Dobrodošli!</title></head><body bgcolor=˝silver˝><p align=˝left˝> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </p><p align=˝center˝> <font color=˝blue˝ size=˝4˝ face=˝Arial˝> Idem u OŠ „Matija Gubec” Cernik. Posjetite je na <a href=˝http://www.os-matija-gubec.hr/˝>webu. </a> </font> </p>
<p align=˝center˝> <img src=˝skola.JPG˝> </p></body></html>
Rješenje
<html><head>
<title>Dobrodošli!</title><meta http-equiv=˝Content-Type˝ content=˝text/html˝
charset=˝windows-1250˝></head><body bgcolor=˝silver˝><p align=˝left˝> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja se zovem Kristina. <br> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </p><p align=˝center˝ > Idem u OŠ „Matija Gubec” Cernik. Posjetite je na <a href=˝http://www.os-matija-gubec.hr/˝>webu. </a> </p><p align=˝center˝> <img src=˝skola.JPG˝></p></body></html>
KODNA STRANICA<meta ...>
A sada malo samostalnog kodiranja....
Dodajte na stranicu po želji tekst, sliku i oblikujte ih...
... ovo je tek početak...