Do you speak HTML?
Uvod u HTML – jezik za opis web stranica
Radionica – voditeljica Kristina Novak

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>
PISANJE TEKSTA
<body> tekst </body>

<html>
<head>
</head>
<body>
Ovo je moja prva web stranica pisana HTML
kodom.
</body>...
PODEBLJAVANJE SLOVA
<b> tekst </b>

<html>
<head>
</head>
<body>
Ovo je moja prva <b> web stranica </b> pisana
HTML kodom....
UKOŠAVANJE SLOVA
<i> tekst </i>

<html>
<head>
</head>
<body>
Ovo je moja prva <b> web stranica </b> pisana
<i> HTML kodom...
PODCRTAVANJE SLOVA
<u> tekst </u>

<html>
<head>
</head>
<body>
Ovo je moja prva <b> web stranica </b> pisana
<i> <u> HTML...
<html>
OBLIKOVANJE SLOVA - boja
<font color=˝red˝> tekst </font>
<head>
</head>
<body>
<font color=˝red˝> Ovo je moja prva...
<html>
PRIJELOM RETKA
<br>
<head>
</head>
<body>
<font color=˝red˝> Ja se zovem Kristina. <br>
Ovo je moja prva <b> web st...
<html>
OBLIKOVANJE SLOVA - veličina
<font size=˝2˝> tekst </font>
<head>
</head>
<body>
<font color=˝red˝ size=˝2˝> Ja se ...
OBLIKOVANJE SLOVA - font
<html>
<font face=˝Verdana˝> tekst
<head>
</font>
</head>
<body>
<font color=˝red˝ size=˝2˝ face=...
<html>
ODLOMCI
<head>
<p> tekst </p>
</head>
<body>
<p> <font color=˝red˝ size=˝2˝ face=˝Verdana˝> Ja
se zovem Kristina. <...
<html>
PORAVNANJE ODLOMKA
<head>
<p align=˝left˝> tekst </p>
</head>
<body>
<p align=˝left˝> <font color=˝red˝ size=˝2˝
fa...
<html>
BOJA POZADINE STRANICE
<head>
<body bgcolor=˝silver˝>
</head>
<body bgcolor=˝silver˝>
<p align=˝left˝> <font color=...
NASLOVNA TRAKA - KARTICA
<html>
<title>tekst</title>
<head>
<title>Dobrodošli!</title>
</head>
<body bgcolor=˝silver˝>
<p ...
POVEZNICA - HIPERVEZA
<html>
<a href=˝http://www...˝>tekst</a>
<head>
<title>Dobrodošli!</title>
</head>
<body bgcolor=˝si...
UMETANJE SLIKE
<html>
<img src=˝ime_slike.jpg˝>
<head>
<title>Dobrodošli!</title>
</head>
<body bgcolor=˝silver˝>
<p align...
Zadatak: Oboji tekst u drugom odlomku
<html>
po želji. Promijeni veličinu i vrstu slova.
<head>
<title>Dobrodošli!</title>...
<html>
<head>

Rješenje

<title>Dobrodošli!</title>
</head>
<body bgcolor=˝silver˝>
<p align=˝left˝> <font color=˝red˝ siz...
<html>
<head>
<title>Dobrodošli!</title>
<meta http-equiv=˝Content-Type˝ content=˝text/html˝
charset=˝windows-1250˝>
</hea...
A sada malo samostalnog
kodiranja....
Dodajte na stranicu po želji tekst,
sliku i oblikujte ih...
Do you speak HTML?
Upcoming SlideShare
Loading in …5
×

Do you speak HTML?

1,885 views

Published on

Naslov: Do you speak HTML?
Natjecanje povodom Europskog tjedna programiranja
Autorica: Kristina Novak, dipl. informatičarka - OŠ "Matija Gubec"Cernik

Published in: Education
  • Be the first to comment

  • Be the first to like this

Do you speak HTML?

  1. 1. Do you speak HTML? Uvod u HTML – jezik za opis web stranica Radionica – voditeljica Kristina Novak Cernik, 27. 11. 2013.
  2. 2. ŠKOLSKI WEB – „IZVANA”
  3. 3. ŠKOLSKI WEB – „IZNUTRA”
  4. 4. WEB STRANICA – današnji rad – „IZVANA”
  5. 5. WEB STRANICA – današnji rad – „IZNUTRA”
  6. 6. HTML kod <oznake> atributi ˝vrijednosti atributa˝ <oznaka atribut=˝vrijednost_atributa˝> </kraj_oznake>
  7. 7. Osnovi HTML kod <html> <head> zaglavlje – naslovi, jezik stranice </head> <body> tijelo – sadržaj stranice </body> </html>
  8. 8. PISANJE TEKSTA <body> tekst </body> <html> <head> </head> <body> Ovo je moja prva web stranica pisana HTML kodom. </body> </html>
  9. 9. PODEBLJAVANJE SLOVA <b> tekst </b> <html> <head> </head> <body> Ovo je moja prva <b> web stranica </b> pisana HTML kodom. </body> </html>
  10. 10. UKOŠAVANJE SLOVA <i> tekst </i> <html> <head> </head> <body> Ovo je moja prva <b> web stranica </b> pisana <i> HTML kodom. </i> </body> </html>
  11. 11. PODCRTAVANJE SLOVA <u> tekst </u> <html> <head> </head> <body> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </body> </html>
  12. 12. <html> OBLIKOVANJE SLOVA - boja <font color=˝red˝> tekst </font> <head> </head> <body> <font color=˝red˝> Ovo je moja prva <b> web stranica </b> pisana <i> <u> HTML kodom. </u> </i> </font> </body> </html>
  13. 13. <html> PRIJELOM RETKA <br> <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>
  14. 14. <html> OBLIKOVANJE SLOVA - veličina <font size=˝2˝> tekst </font> <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>
  15. 15. OBLIKOVANJE SLOVA - font <html> <font face=˝Verdana˝> tekst <head> </font> </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>
  16. 16. <html> ODLOMCI <head> <p> tekst </p> </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>
  17. 17. <html> PORAVNANJE ODLOMKA <head> <p align=˝left˝> tekst </p> </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>
  18. 18. <html> BOJA POZADINE STRANICE <head> <body bgcolor=˝silver˝> </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>
  19. 19. NASLOVNA TRAKA - KARTICA <html> <title>tekst</title> <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>
  20. 20. POVEZNICA - HIPERVEZA <html> <a href=˝http://www...˝>tekst</a> <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-matijagubec.hr/˝>webu. </a> </p> </body> </html>
  21. 21. UMETANJE SLIKE <html> <img src=˝ime_slike.jpg˝> <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-matijagubec.hr/˝>webu. </a> </p> <p align=˝center˝> <img src=˝skola.JPG˝> </p> </body> </html>
  22. 22. Zadatak: Oboji tekst u drugom odlomku <html> po želji. Promijeni veličinu i vrstu slova. <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-matijagubec.hr/˝>webu. </a> </p> <p align=˝center˝> <img src=˝skola.JPG˝> </p> </body> </html>
  23. 23. <html> <head> Rješenje <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.osmatija-gubec.hr/˝>webu. </a> </font> </p> <p align=˝center˝> <img src=˝skola.JPG˝> </p> </body> </html>
  24. 24. <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 ...>
  25. 25. A sada malo samostalnog kodiranja.... Dodajte na stranicu po želji tekst, sliku i oblikujte ih...

×