HTML JEZIK Ponavljanje to je HTML HTML ili

  • Slides: 29
Download presentation
HTML JEZIK

HTML JEZIK

Ponavljanje Što je HTML? • HTML ili (Hyper Text Markup Language) je jezik kojim

Ponavljanje Što je HTML? • HTML ili (Hyper Text Markup Language) je jezik kojim opisujemo izgled web stranice.

PONAVLJANJE • Što je web stranica? • pojedinačni HTML dokument • Zašto se web

PONAVLJANJE • Što je web stranica? • pojedinačni HTML dokument • Zašto se web stranice različito prikazuju u različitim web preglednicima? • jer svaki drugačije tumači HTML jezik

HTML oznake (tagovi) • “riječi” HTML jezika • < ime_oznake > - otvorena oznaka

HTML oznake (tagovi) • “riječi” HTML jezika • < ime_oznake > - otvorena oznaka • </ ime_oznake > - zatvorena oznaka • < ime_oznake /> - otvorena i zatvorena

Građa HTML dokumenta Dva dijela: 1. Zaglavlja (head) 2. Tijela (body)

Građa HTML dokumenta Dva dijela: 1. Zaglavlja (head) 2. Tijela (body)

Građa HTML dokumenta • ZAGLAVLJE - informacije o naslovu stranice te o osnovnim obilježjima

Građa HTML dokumenta • ZAGLAVLJE - informacije o naslovu stranice te o osnovnim obilježjima stranice • jezik stranice • ključne riječi • ime autora… • TIJELO - sadržaj stranice prikazan u web pregledniku

OSNOVNE OZNAKE • <HTML> - početna oznaka dokumenta • </HTML> - završna oznaka dokumenta

OSNOVNE OZNAKE • <HTML> - početna oznaka dokumenta • </HTML> - završna oznaka dokumenta Sve ostale oznake u HTML dokumentu pišu se unutar te dvije oznake!

OSNOVNE OZNAKE <HEAD> i </HEAD> • označavaju zaglavlje <BODY> i </BODY> • označavaju tijelo

OSNOVNE OZNAKE <HEAD> i </HEAD> • označavaju zaglavlje <BODY> i </BODY> • označavaju tijelo <html> <head> </head> <body> </html>

OSNOVNE OZNAKE u HEAD tagu <META> (ne mora se zatvoriti) • definira obilježja stranice

OSNOVNE OZNAKE u HEAD tagu <META> (ne mora se zatvoriti) • definira obilježja stranice <TITLE> i </TITLE> • naslov stranice

OSNOVNE OZNAKE – u BODY tagu <IMG> (ne mora se zatvoriti) • umetanje i

OSNOVNE OZNAKE – u BODY tagu <IMG> (ne mora se zatvoriti) • umetanje i podešavanje slike <P> i </P> • odlomak <a> i </a> • poveznica (link)

OSNOVNE OZNAKE – u P tagu <b> i </b>, <i> i </i>, <u> i

OSNOVNE OZNAKE – u P tagu <b> i </b>, <i> i </i>, <u> i </u> • podebljan, ukošen, podcrtan tekst <BR /> • Ide u novi red

<HTML> <HEAD> <META> </HEAD> <STYLE></STYLE> <TITLE></TITLE> <BODY> <IMG> <DIV> </DIV> <P></P> <DIV> </DIV> <B></B>

<HTML> <HEAD> <META> </HEAD> <STYLE></STYLE> <TITLE></TITLE> <BODY> <IMG> <DIV> </DIV> <P></P> <DIV> </DIV> <B></B> <I></I> <U></U> <PRE></PRE> <A></A> </BODY> </HTML>

PARAMETRI OZNAKA <ime_oznake ime_ parametra = “vrijednost_parametra”> npr. <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=„slika. jpg”> Pišu se samo

PARAMETRI OZNAKA <ime_oznake ime_ parametra = “vrijednost_parametra”> npr. <img src=„slika. jpg”> Pišu se samo na otvorenoj oznaci!

Zadatak. . . sredi svoju mapu • U svojoj mapi izradi podmape PYTHON, EXCEL,

Zadatak. . . sredi svoju mapu • U svojoj mapi izradi podmape PYTHON, EXCEL, WEB, POWERPOINT… • Sortiraj dosadašnje datoteke u te mape. • Unutar mape WEB izradi podmapu 00_PROBA.

Vježba Otvori Notepad. . .

Vježba Otvori Notepad. . .

Osnovna građa HTML dokumenta.

Osnovna građa HTML dokumenta.

Spremanje HTML dokumenta iz Notepada File Save As. . . Lociraj svoju mapu 00_PROBA

Spremanje HTML dokumenta iz Notepada File Save As. . . Lociraj svoju mapu 00_PROBA File name: index. html (ako spremi kao html. txt: Save as type: All files (*. *))

Ponovno otvaranje HTML dokumenta u Notepadu Otvori Notepad Open Lociraj svoju mapu 00_PROBA Odabrati

Ponovno otvaranje HTML dokumenta u Notepadu Otvori Notepad Open Lociraj svoju mapu 00_PROBA Odabrati All files (*. *) Otvori HTML dokument

Definira tko je autor (author) i koji je opis (description) web stranice

Definira tko je autor (author) i koji je opis (description) web stranice

Samostalno. . . • Podebljaj svoje ime. • Ukosi naziv mjesta.

Samostalno. . . • Podebljaj svoje ime. • Ukosi naziv mjesta.

Samostalno. . . • Preuzmi neku svoju osobnu sliku u mapu 00_PROBA. • Nazovi

Samostalno. . . • Preuzmi neku svoju osobnu sliku u mapu 00_PROBA. • Nazovi je slika (puni naziv datoteke tada je npr. slika. jpg). • Guglaj kako se u HTML dokument ugrađuje slika (img tag). • Umetni svoju sliku ispod rečenice.

Primjer rezultata. . .

Primjer rezultata. . .

PONAVLJANJE • Što je web preglednik ili browser? • program za dohvaćanje web stranica

PONAVLJANJE • Što je web preglednik ili browser? • program za dohvaćanje web stranica • Što je HTML? • prezentacijski jezik u kojem su napisane web stranice

PONAVLJANE • Od koja se dva dijela sastoji svaki HTML dokument? • Od zaglavlja

PONAVLJANE • Od koja se dva dijela sastoji svaki HTML dokument? • Od zaglavlja (head) i tijela (body). • Čemu služi <img> oznaka? • Za umetanje slika.

PONAVLJANE • Čemu služi <a> oznaka? • Za umetanje poveznice. • Čemu služi <p>

PONAVLJANE • Čemu služi <a> oznaka? • Za umetanje poveznice. • Čemu služi <p> oznaka? • Za umetanje odlomka.