HTML I CSS PROJEKAT kreiranje sajta na osnovu postojeceg dizajna

HTML I CSS PROJEKAT kreiranje sajta na osnovu postojeceg dizajna
Miljan Jeremić

PLAN NASTAVE: Uvod u HTML, struktura HTML stranice
Rad sa tekstom, linkovima, slikama Uvod u CSS – sintaksa, selektori (class, id, descendant) HTML: liste, forme, block/inline elementi. Div tag. VEŽBA i REZIME.

Šta je HTML HTML = HyperText Markup Language.
HTML nije programski jezik – to je markup jezik (jezik oznaka). Markup jezik = skup tagova. HTML koristi te tagove da opiše web stranicu.

Dakle... HTML dokumenti = Web stranice

Struktura HTML fajla.

Tekst! Heading elementi: <h1>Heading 1</h1>
Paragraf: <p>Običan paragraf</p>

Linkovi.  Linkovi se u HTML-u definišu <a> tagom.
<a href=" gimnazija.edu.rs">Knjazevacka gimnazija</a> Rezultat: Knjazevacka gimnazija

Necemo tekst, hocemo slike!
Slike se u HTML-u definisu <img> tagom. <img src="image.jpg" />

Formatiranje teksta (loše rešenje)
rmatting.asp Koristiti CSS za ovakve stvari!

Struktura HTML dokumenta
Obavezne naredbe: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <TITLE>Primer1</TITLE> Ovo je nas prvi primer Primer1

Isti primer ali sa potpunom strukturom: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Primer2</TITLE> </HEAD> <BODY> Ovo je nas drugi primer </BODY> </HTML> Primer2

HEAD sekcija Svaki dokument mora da sadži dva obavezna elementa i oni mora da se navedu u sledećem redosledu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> Ovo je referenca na formalnu definiciju u SGML jeziku (DTD korišćene verzije HTML-a). <TITLE>Ovde se upisuje naslov dokumenta</TITLE> Tag u kome se upisuje naslov dokumenta. Koristi se od strane različitih softverskih komponenti. Npr. Koristi se kod pretraživanja i prikazuje u listi nađenih dokumenata.

Elementi HEAD sekcije ISINDEX element (ne koristi se mnogo)
BASE element, specificira baznu adresu koja se implicitno podrazumeva kod URL referenci META elementi- daju različite informacije, npr. Do kada važi dokument i sl. LINK elementi, daju informacije o vezi dokumenta sa drugim dokumentima. STYLE element – definiše stil prikaza podataka koji se koristi u dokumentu. SCRIPT element; - odnosi se na script jezik koji se koristi u dokumentu.

Base element <BASE HREF="http://www.elfak.ni.ac.yu/cs/">
U ovom slučaju <A HREF="lista.html">lista primera</A> Je ekvivalentno sa: <A HREF=" primera</A>

Link element Link element kojim se navodi koji je style sheet korišćen: <LINK REL=STYLESHEET HREF="basic.css"> LINK element koji daje informacije o autoru dokumenta: <LINK REV=MADE LINK elementi koji mogu da stoje u velikom dokumentu koji je izdeljen na povezane delove: <LINK REL=CONTENTS HREF="toc.html"> <LINK REL=PREVIOUS HREF="doc31.html"> <LINK REL=NEXT HREF="doc33.html">

Style element <HEAD> <STYLE></STYLE> </HEAD> <BODY> Prva linija je obican tekst.<BR> <U>Druga linija ja podvucen tekst.</U><BR> <B>Treca linija je boldiran tekst.</B> </BODY> Primer

Tagovi na nivou bloka Različiti nivoi zaglavlja: H1, H2, H3, H4, H5, H6 Tagovi na nivou paragrafa: Običan paragraf: P Paragraf pod navodnicima: BLOCKQUOTE Adresa autora kao odvojen paragraf: ADDRESS preformatted text to be displayed as such, preserving layout (lines, blanks): PRE

Tagovi na nivou bloka Liste: Noprmalne neuređene liste: UL, LI
Kompaktne liste: MENU, LI list of small items: DIR, LI Uređene liste: OL, UL , LI definition list (Označene liste): DL, DT, DD Tabele: TABLE, CAPTION, TR, TH, TD Deljenje dokumenta na delove od kojih svaki može da ima svoje atribute: DIV, CENTER Promena teme : HR Rad sa formularima: FORM, ISINDEX.

Formatiranje teksta H1, H2, H3, H4, H5, H6
<H1 ALIGN=CENTER>Formatiranje teksta</H1> <H2>Uvod</H2> <H3>Opste napomene</H3> Primer

BLOCKQUOTE <P>The original context of the saying <I>O tempora, o mores</I> is the following:</P> <BLOCKQUOTE> <P> O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. </P> <P ALIGN=RIGHT> <A HREF=" ents/Cic.html"> Cicero</A>, <A HREF=" ents/cat1.html"> <CITE>Oratio in Catilinam Prima</CITE></A>, 2 </P> </BLOCKQUOTE> Primer

ADDRESS <ADDRESS> <P> miljan.jeremic@gmail.com </P>
</ADDRESS>Primer

PRE ASCII znaci koji se štampaju: <PRE>
! " # $ % & ' ( ) * + , - . / : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ </PRE>Primer Isti primer bez PRE taga Primer1

UL , LI <UL> <LI> milk <LI> bread <LI> apples.
<UL TYPE=DISC COMPACT> <LI> disc <LI TYPE=SQUARE> square <LI TYPE=CIRCLE> circle Primer

MENU <MENU> <LI> Undo <LI> Cut <LI> Copy
<LI> Paste <LI> Find LI> Find Again </MENU> Primer Mnogi čitači MENU prikazuju kao UL listu mada bi trebalo da prikazuju mnogo kompaktniju listu.

OL Lista sa numerisanim elementima <P> Proceed as follows:
<LI> Try to guess how to use the program. <LI> If it fails, send lots of questions to Usenet News. <LI> If they flame you, consider contacting local user support. <LI> When everything else fails, read the manuals. </OL> Primer

OL <P> Deklinacije u latinskom se razlikuju po nastavcima u genitivu jednine : </P> <OL TYPE=I> <LI> <I>-ae</I>, eg <I>terra:terrae</I> <LI> <I>-i</I>, eg <I>annus:anni</I> <LI> <I>-is</I>, eg <I>labor:laboris</I> <LI> <I>-us</I>, eg <I>fructus:fructus</I> <LI> <I>-ei</I>, eg <I>dies:diei</I>. </OL> Primer

DL, DD, DT <DL> <DT>Recursion, indirect
<DD>See <I>indirect recursion</I>. <DT>Indirect recursion <DD>See <I>recursion, indirect</I>. </DL> Primer

TABLE <TABLE> <CAPTION>Povrsine nordijskih zemalja u kvadratnim km</CAPTION> <TR><TH>Zemlja</TH> <TH>Ukupna povrsina</TH> <TH>Povrsina kopna</TH> <TR><TH>Denmark</TH> <TD ALIGN=RIGHT> 43,070 </TD><TD ALIGN=RIGHT> 42,370</TR> <TR><TH>Finland</TH> <TD ALIGN=RIGHT>337,030 </TD><TD ALIGN=RIGHT>305,470</TR> <TR><TH>Iceland</TH> <TD ALIGN=RIGHT>103,000 </TD><TD ALIGN=RIGHT>100,250</TR> <TR><TH>Norway</TH> <TD ALIGN=RIGHT>324,220 </TD><TD ALIGN=RIGHT>307,860</TR> <TR><TH>Sweden</TH> <TD ALIGN=RIGHT>449,964 </TD><TD ALIGN=RIGHT>410,928</TR> </TABLE> Primer

DIV Izdvajaju se delovi teksta radi posebnog poravnjanja.
<P> This is a normal paragraph which will be rendered according to default alignments, which usually means left alignment. </P> <DIV ALIGN=CENTER> <P> This is text which will be centered. </P> <P> This is a longer text paragraph which will be centered. It is so long that line breaks will most probably occur. Notice that the division into lines is usually not the same as in the HTML file. </P> </DIV> Primer

HR Ubacuju se horizontalne linije koje razdvajaju delove teksta. Primer <P> A horizontal rule placed at the right and half the width of the document layout: </P> <HR ALIGN="RIGHT" WIDTH="50%"> <P> An example with all possible spices: placed at left, solid rule (no shading), height 5 pixels, width 100 pixels: <HR ALIGN="LEFT" NOSHADE SIZE=5 WIDTH=100>

FORM Primer složenijeg formulara za evaluaciju: Primer
This is a form for sending your personal evaluation of the document <CITE>Learning HTML by Examples</CITE> as a whole. <FORM ACTION= METHOD="POST"> <P> Your home page URL (if any): <INPUT TYPE=TEXT SIZE=30 NAME=Home VALUE=" </P> <P> Please rate the overall <EM>usefulness</EM> of the document (to you):<BR> <INPUT TYPE=RADIO NAME=Useful VALUE="Very little">Very little (or none)<BR> <INPUT TYPE=RADIO NAME=Useful VALUE="Little">Little<BR> <INPUT TYPE=RADIO NAME=Useful VALUE="Some">Some<BR> <INPUT TYPE=RADIO NAME=Useful VALUE="Great">Great<BR> <INPUT TYPE=RADIO NAME=Useful VALUE="Very great">Very great </P> <P> What about general <EM>understandability</EM>? <SELECT NAME=Understandability> <OPTION VALUE=undef>(No opinion) <OPTION VALUE=verydifficult>Very difficult <OPTION VALUE=difficult>Difficult <OPTION VALUE=avg>Average <OPTION VALUE=easy>Easy <OPTION VALUE=veryeasy>Very easy </SELECT> </P> <P>Please feel free to add any comments you like:<BR> <TEXTAREA ROWS=5 COLS=72 NAME=Comments></TEXTAREA> <INPUT TYPE=HIDDEN NAME="Via" VALUE="FORM-3"> </P> <P> <INPUT TYPE=CHECKBOX NAME="*** Response requested! ***"> Would appreciate a personal answer; address: <INPUT TYPE=TEXT SIZE=25 NAME=From> </P> <P>When you are finished with filling the form, select this: <INPUT TYPE=SUBMIT VALUE=Send></P> </FORM>

Linkovi Primer <P>Hiperlink koji se referencira na dokument u istom direktorijumu gde je i aktivni dokument: <A HREF=“TABLE.htm">Primer koriscenja TABLE taga</A>. <P>Hiper link koji se referencira na neki drugi dokument bilogde: <A HREF=" fakultet</A>. <P>A hyperlink in which the link text contains markup: <a href=" HTML test set</cite></a> <p>A hyperlink referring to a label in the same document: <A HREF="#final">final example</A>. <P>A hyperlink referring to a label in another document: <A HREF=" P2.html#UR"> URL info in HTML Primer</A> <P>A link to an image: <A HREF=" TITLE="Yucca's family picture, by Minna">a family picture</A>. <P><A NAME="final">Finally, this is just text to which you can refer with a hyperlink.</A>

<div> tag! Next up: CSS!  HTML TODO:
<ul> i <li> tagovi. <form> i <input> tagovi. Block level i inline level elementi. <div> tag!

Šta su to stilovi Stil: Skup informacija o stilu prikaza koje se primenjuju na čist tekst. Pojam nije nov koristi se već dugo kod tekst procesora (Stilovi u Wordu, Tex-u i slično.

Zašto treba koristiti stilove
Izdvajanje sadržaja od prikaza Uniformnost stranica iste prezentacije Lake izmene pogleda na iste podatke

Primer stila BODY {font: 10 pt Palatino; color: red; margin- left: 0.5in} H1 {font 18 pt Palatino; color: blue} H2 {font 16 pt Palatino; color: AA4D60} Format {characteristic: value} Više svojstava odjednom P {font: 12 pt Times; line-height: 14 pt; color: FF00FF; text-indent: .25 in}

Tabela sa karakteristikama
Table 14.1 Font and Paragraph Characteristics Allowable in HTML Style Sheets Tabela

Korišćenje Link taga <HEAD>
<TITLE>A Document that Uses Style Sheets</TITLE> <LINK REL=STYLESHEET HREF="styles/sitestyles.css"> </HEAD>

Stil ugrađen u dokument STYLE tag
<HEAD> <STYLE><!-- BODY { font-family: sans-serif ; color: red} U { font-family: serif } -- ></STYLE> </HEAD> <BODY> Sample text 1. <BR> <U>Sample text 2.</U> </BODY> Primer

Inline stilovi Informacije o stilu se nalaze unutar HTML taga i odnose samo na taj element. <P STYLE="text-align: center; color: yellow"> Yellow, centered text</P> <P> Back to normal </P>

Tagovi sa stilom <DIV>
<H1>-<H6> (the heading styles) <UL> and <OL> <LI> <BODY>

<SPAN> Tag Tag kojim se stil vezuje za deo teksta.
<H2>Favorite Computer Games</H2> <OL> <SPAN STYLE="font-weight: bold; font-style: italics"> <LI>You Don't Know Jack</LI> <LI>Doom</LI> <LI>Wolfenstein 3D</LI> </SPAN> <LI>Solitaire</LI> <LI>Freecell</LI> </OL> Primer

Grupisanje stilova Ako želimo da istim tagovima u tekstu dodelimo iste atribute onda to možemo da uradimo na jednom mestu: A:link {font-size: 12 pt; font-weight: bold; font-decoration: underline} A:visited {font-size: 12 pt; font-weight: bold; font-decoration: underline} A:active {font-size: 12 pt; font-weight: bold; font-decoration: underline}

Grupisanje stilova Isto ali odjednom:
A:link A:visited A:active {font-size: 12 pt; font-weight: bold; font-decoration: underline}

Klase stilova <STYLE> A:link.red {color: red}
A:link.yellow {color: yellow} A:link.fuschia {color: fuschia} </STYLE> Here's a <A CLASS="red" HREF="red.html">red</A> link! And a <A CLASS="yellow" HREF="yellow.html">yellow</A> one ... And a <A CLASS="fuschia" HREF="fuschia.html">fuschia</A> one! Primer:

Kombinovanje stilova U jednom dokumentu mogu se kombinovati različiti stilovi: Globalni stilovi: Globalne karakteristike dokumenta najbolje je definisati u posebnom css fajlu. Stlovi podsekcija: Stilove koji se odnose na delove dokumenta najbolje je definisati u okviru <style> </style> tagova. Specifični stilovi: Stilove pojedinih delova stranice treba definisati unutar odgovarajućih tagova kao inline stilove.

Prioriteti stilova Inline stilovi su najvišeg prioriteta i poništavaju stilove definisane u css fajlovima i one u zaglavlju dokumenta. Stilovi definisani u zaglavlju dokumenta poništavaju one iz css fajlova. Stilovi iz css dokumenata poništavaju stilove koji su po defoltu definisani u čitaču.

Hijerarhija tagova Stilovi primenjeni u jednom tagu odnose se i na sve tagove koje on sadrži. Ako se stil primeni na UL tag odnosi se i na sve LI tagove koje on sadrži. Svi stilovi primenjeni na BODY tag odnose se i na sve tagove unutar njega jer su mu oni herarhijski podredjeni.

CSS - Cascading Style Sheets
CSS-om definišemo kako da browser prikaže HTML elemente. CSS štedi vreme i skraćuje posao!

CSS sintaksa h1 { color: blue; } SELEKTOR PROPERTY VALUE

CSS TODO: Formatiranje teksta Formatiranje linkova
Formatiranje linkova CSS implementacija (inline, interni, eksterni).

Class selektori HTML: <p class="bold">Boldovan paragraf.</p> CSS: .bold { font-weight: bold; }

ID selektori HTML: <p id="bold">Boldovan paragraf.</p>
CSS: #bold { font-weight: bold; }

Descendant selektori HTML:
<p>Boldovan <a href="#">paragraf</a>.</p> CSS: p a { font-weight: bold; }

ŠTA JE CSS? 1 CSS služi za definisanje izgleda (stila) web stranice
CSS = Cascade Style Sheet Cilj je opisati kako stranica treba izgledati U HTML-u definišemo sadržaj. Sadržaj je opisan s elementima poput <h1>, <p> ..

CSS 1 CSS definiše izgled sadržaja: boje pojedinih elemenata i cele stranice, raspored elemenata .. CSS na jednom mestu definisao kako trebaju izgledati naslovi (<h1>), kakve je boje tekst u paragrafu (<p>), izgled pozadine web stranice ..

ŠTA JE CSS? 2 Možemo reći da CSS opisuje kako treba prikazati HTML elemente (<h1>, <p> ..) Izgled stranice, definisan u CSS- u, sprema se u zasebnu datoteku s ekstenzijom (nastavkom) .css

CSS 2 Moguće je i ugraditi CSS instrukcije u HTML datoteku, ali je preporučljivo koristiti zasebnu CSS datoteku (tako da se ista datoteka može povezati sa više HTML datoteka) Preporuka je izgled stranice definisati u CSS datoteci, a sadržaj u HTML datoteci

ŠTA JE CSS? 3 CSS je stvoren, jer se u starijim verzijama HTML mešao sadržaj i izgled. Od HTML verzije 4, sve informacije o izgledu (boje i sl.) može se spremiti u CSS datoteku CSS omogućuje lakše održavanje (velikih) web site-ova sa puno web stranica Pomoću CSS, od jednom definišemo izgled svih web stranica. Ispravljanje grešaka u izgledu web stranica je puno lakše kroz CSS, jer grešku treba ispravit na jednom mestu i odmah su sve web stranice ok Naknadne dopune i izmene su zbog istog razloga olakšane

CSS sintaksa 1 Izgled stranice(a) je pohranjen u jednu ili više CSS datoteka CSS datoteka se sastoji od jednog ili više CSS pravila (rule) Pravilo se sastoji od dva dela: selektor i deklracije U pravilo je jedan selektor i jedna ili više deklaracija

CSS sintaksa 2 CSS pravilo:
Selektor određuje HTML element (npr <h1>) Deklaracije određuju vrednosti svojstava na selektiranom HTML elementu (npr. vrednost svojstva color je green na <h1>)

CSS sintaksa 3 Na početku CSS pravila dolazi selektor (ime HTML taga), zatim dolazi lista deklaracija. Lista deklaracija se piše unutar vitičastih zagrada. Svaka deklaracija se sastoji od imena svojstva i vrednost svojstva odvojenih dvotačkom. Na kraju svake deklaracije dolazi tačka-zarez.

Povezivanje HTML i CSS datoteka 1
Da bi web preglednik browser koji stil koristiti za pojedini HTML dokument, potrebno je povezati HTML datoteku s CSS datotekom Povezivanje HTML i CSS datoteke se obavlja tako da se u HTML datoteku navede referenca na CSS datoteku

HTML – CSS 1 U <head> tag, u HTML datoteci napiše se: <link href=“ime.css" type="text/css" rel="stylesheet" /> <link>  tag koji označava da se povezuje neka datoteka s ovom HTML datotekom

href  ime CSS datoteke (npr. ime.css) type="text/css“ rel="stylesheet"  ozačava da se radi o CSS tipu datoteke

HTML – CSS 2 Primer: Trenutnu HTML datoteku povezujemo s CSS datotekom koja se zove kontinenti.css: <link href="d:\HTML stranice\__css\kontinenti.css" type="text/css" rel="stylesheet" />

Osim povezivanje odvojene CSS datoteke s HTML datotekom (što je pokazano na prethodnim slide- ovima), moguće je i ubaciti CSS direktno u HTML datoteku U <head> tag, napiše se <style> tag koji definiše CSS kod. CSS datoteke se često spremaju u zaseban folder ispod glavnog foldera (npr: podfolder __css)

Primer CSS ugrađenog u HTML: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background- image:url("images/back40.gif");} </style> </head>

PRIMER CSS 1 Napraviti dve web stranice o kontinentima.
Sadržaj web stranica (HTML): Prva stranica je o africi, a druga o aziji. Svaka stranica sadrži naslov (<h1>) s imenom kontinenta/web stranice. Na stranici je paragraf (<p>) teksta o kontinentu i lista 3 poznate životinje s kontinenta.

CSS 1 Stil stranice (CSS): Sve stranice imaju isti stil. Podloga je zelena, naslov (ime kontinenta) je crvene boje i centrirano je. Imena životinja u listi su italic.

PRIMER CSS 2 a) HTML stranica: afrika.html <html> <head>
<title>Afrika</title>  <link href="d:\HTML stranice\__css\kontinenti.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Afrika</h1> <p>Afrika je kontinent smješten oko ekvatora.</p> <p>Poznate životinje u Africi su:</p> <ol> <li>Lav</li> <li>Majmun</li> <li>Žirafa</li> </ol> </body> </html>

PRIMER CSS 3 b) HTML stranica: azija.html <html> <head>
<title>Azija</title>  <link href="d:\HTML stranice\__css\kontinenti.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Azija</h1> <p>Azija je najveći kontinent.</p> <p>Poznate životinje u Aziji su:</p> <ol> <li>Tigar</li> <li>Deva</li> <li>Panda</li> </ol> </body> </html>

PRIMER CSS 4 c) CSS datoteka: kontinenti.css body {
background-color : green; } h1 text-align : center; color : red; li font-style : italic;

PRIMER CSS 5 Napomena: U primeru se pretpostavlja da se css datoteka nalazi u folderu “d:\HTML stranice\__css\” i da se zove kontinenti.css

PRIMER CSS 6 Preglednik (Internet Explorer): Bez CSS, samo HTML

PRIMER CSS 7 Preglednik (Internet Explorer): HTML i CSS

Komentari U CSS-u komentari se pišu s /* na početku i */ na kraju
Primer: body { /* Boja pozadine cijele stranice */ background-color : green; } Komenar je /* Boja pozadine cele stranice */

Nazad na HTML! Objasniti liste. Objasniti forme. Block level elementi.
Inline level elementi.

Block level elemeti! <div>, <h1>..<h6>, <p>, <ul>, <li>,.. Browser ih prikazuje jedan ispod drugog. Width, Height, line-height i top/bottom margine se mogu menjati. Margine, ha? CSS TODO: BoxModel.

Inline level elementi! <span>, <a>, <label>, <input>, <img>, <strong> i <em>. Browser ih prikazuje jedan pored drugog. Width, Height, line-height i top/bottom margine se mogu menjati.

<div> tag. <div> definiše sekciju na stranici.
Koristi se za grupisanje određenenih elemenata na strani kako bi se oni stilizovali CSS-om.

HTML i CSS in general  HTML definiše strukturu web stranice preko svojih tagova. CSS definiše kako će web stranica izgledati.

Struktura HTML stranice
<!DOCTYPE html> <html> <head> <title>Ucenici ucenicima</title> </head> <body> content.. </body> </html>

Tekst, link, slika... ТЕКST: LINK SLIKA
<p>, <h1>, ... , <h6> LINK <a href=" SLIKA <img src="images/gim.jpg" />

CSS sintaksa i selektori
h1 { color: blue; } HTML: Class selektor: <p class="bold">Boldovan paragraf.</p> CSS: .bold { font-weight: bold; } HTML: Id selektor: <p id="bold">Boldovan paragraf.</p> #bold {

Block/inline level elementi
Block level: <p>, <div>, <table>... Browser ih prikazuje jedan ispod drugog CSS firendly Inline level: <a>, <span>, <img> ... Browser ih prikazuje jedan pored drugog Nemogućnost definisanja CSS property-a: width, height, margin, padding.

Div tag. Definiše površ u browseru.
Potpuno neprimetan, sve dok CSS-om ne definišemo suprotno. Osnovni alat za definisanje layout-a stranice.

CSS day! PLAN ZA NASTAVU. 
CSS: Box Model. Margin. Padding. CSS: Properties (Float, Clear) CSS: Pozicioniranje apsolutno relativno fiksno HTML: Početak našeg projekta. HTML kodiranje.

Box model (na primeru <div> taga)

Margine. Pitanje za vas. 
Margin: spoljašnji prostor – od okvira do nekog drugog elementa. #div1 #div2 #div1 { margin: 50px; } #div2 { margin: 50px; }

Padding. padding: unutašnji prostor – od okvira do sadržaja elementa.
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst div { padding: 0; width: 200px; height: 100px; } div { padding: 20px; width: 200px; (240px) height: 100px; (140px) }

Float Koristeći float property, možemo pomeriti neki element skroz levo (desno) i dozvoliti drugim elementima da ga okruže. Možemo float-ovati element samo ulevo ili udesno, ne gore ili dole. Elementi pre floatovanog elementa se NE remete! Elementi posle floatovanog elementa se remete!

Turn off floating – Clear property!
Elementi posle floatovanog elementa se remete! Clear to sprečava. Thx, clear!   

Float i clear: sintaksa
FLOAT: img { float: left; } CLEAR: clear: both;

Pozicioniranje CSS property position dozvoljava da pozicioniramo elemente. static (default) absolute relative fixed

Position: relative Relativno pozicioniran element je pozicioniran relativno u odnosu na njegovu normalnu poziciju.

Position: absolute Apsolutno pozicioniran element je pozicioniran apsolutno u odnosu na prvog roditelja koji ima position: relative. Ukoliko takav element ne postoji, element se pozicionira u odnosu na <html> element. Ostali elementi na stranici ignorisu apsolutno pozicionirane elemente, tj. ponasaju se kao da oni ne postoje.

Position: fixed Fiksno pozicioniran element je pozicioniran u odnosu na ceo browser.

XHTML i CSS u izradi web stranica
Miljan G. Jeremić Informatičko društvo infoWARE

W3C W3C – World Wide Web Consortium. Nastao 1994.
Nezavisna međunarodna organizacija koju čine ljudi od samostalnih Web programera pa sve do predstavnika korporacija (Microsoft, IBM, Sun, Netscape). Iako je baziran na ISO standardima, ne vrši standardizaciju već daje preporuke.

Istorijski pregled razvoja jezika za obeležavanje teksta
SGML (1986) – Standard Generalized Markup Language HTML (1992) – Hypertext Markup Language HTML 2.0 (1995) HTML 3.2 (1996) HTML 4.0 (1997) HTML 4.01 (1999) XML (1998) – eXtensible Markup Language XHTML (2000) – eXtensible Hypertext Markup Language

XHTML Nastao “spajanjem” jezika XML i HTML, odnosno definisanjem jezika HTML kao XML aplikacije. Zasnovan na verziji HTML 4.01 Predstavlja “striktniju” varijantu jezika HMTL, tj. potrebno je poštovati znatno restriktivniji skup pravila kako bi se dobili valjani dokumenti.

Elementi, atributi, vrednosti
Tekst se obeležava korišćenjem elemenata. Npr. <p align=”right”>Ovo je pasus</p> <p> označava početak elementa, </p> njegov kraj, align je atribut, dok je right njegova vrednost.

Pravila slaganja elemenata
XML zahteva sledeća pravila slaganja: Svaki započeti element mora da se završi. Radi lakšeg zapisa uvodi se i mogućnost skraćenog pisanja elemenata koji nemaju sadržaj. (npr. <br />) Elementi moraju da budu ispravno “ugnježđeni” i ne sme biti preplitanja (<b><i>tekst</b></i> nije ispravno) Imena elemenata se pišu malim slovima Vrednosti atributa se pišu pod navodnicima

Osnovna struktura dokmenta
XML prolog DOCTYPE deklaracija <html> koreni element sa oznakom prostora imena (xmlns) zaglavlje i naslov dokumenta (<head>, <title>) telo elementa (<body>)

Primer dokumenta (Demo 1)
<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>XHTML i CSS u izradi web stranica</title> </head> <body> <h1>Naslov</h1> <p>Prvi pasus</p> </body> </html>

DOCTYPE Predstavlja oznaku tipa dokumenta i navedenen je preko DTD datoteke. XHTML podržava tri različita tipa: STRICT TRANSITIONAL FRAMESET

Validacija Validni dokumenti su dokumenti koji koriste elemente i atribute koji su definisani u odgovarajućoj DTD specifikaciji i to na način koji specifikacija propisuje. Validnost dokumenta se može proveriti korišćenjem odgovarajućih alata (npr.

Demo 2 Elementi: <h1>, ..., <h6>
<div>, <p>, <br> <b>, <i>, <a>, <img>, <ol>, <ul>, <li> <table>, <tr>, <td>

CSS CSS – Cascading Style Sheets
omogućavaju razdvajanje sadržaja i logičke strukture dokumenta od njegovog izgleda i grafičke prezenacije Deo jezika HTML još od verzije 4.0

Nivoi korišćenja CSS-a
direktno (inline) – opis izgleda elementa se navodi u okviru style atributa. ugnježđeno (embedded) – opis izgleda različitih elemenata se navodi u okviru zaglavlja dokumenta i to u okviru <style> elementa. uvezeno (linked) – opis izgleda dokumenta se čuva u posebnoj datoteci koja se uvozi korišćenjem elementa <link>

Selektori, svojstva, vrednosti
Osnovni oblik CSS deklaracije je: selektor { svojstvo1 : vrednost1; svojstvo2 : vrednost2; ... } Selektor određuje elemente na koje se deklaracija odnosi, dok se svojstvima i vrednostima vrši izmena određenih karakteristika prikaza.

Primeri CSS deklaracija
body { font-family : Arial, sans-serif; font-size : 10pt; } p#pocetni { margin-left : 50px; .zeleno { color : green; odnosi se na celokupan dokument odnosi se na pasus čiji je id="pocetni" odnosi se na sve elemente čiji atribut class sadrži vrednost zeleno

Demo 3 svojstva: font-family, font-size, text-align, text-weight, text-style, text-decoration margin, padding color, border, background

Uvod u Web programiranje

Osnovni pojmovi WWW – World Wide Web Internet – “mreža svih mreža”
Sistem međusobno povezanih hipertekst dokumenata na Internetu kojima se pristupa preko Web čitača (browsera) Hipertekst (HyperText) dokument – tekst sa linkovima (referencama ka ostalim dokumentima) Internet – “mreža svih mreža” Svetska, javno dostupna mreža povezanih računarskih mreža koje prenose podatke korišćenjem IP (Internet Protocol) standarda.

Vizualizacija Interneta
Svaka boja kojom je mreža nacrtana označava jedan domen (.com, .org, .us, ...)

Internet vs. Web Internet je mreža računara (hardvera), dok je Web mreža dokumenata i drugih resursa (multimedija) Internet je medijum za razne servise kao što su: , file sharing, VoIP (voice telephony) Web Streaming multimedia (muzika, video,...), itd.

Osnovni pojmovi Web aplikacija – aplikacija kojoj se pristupa preko Web čitača korišćenjem Interneta (ili intranet mreže) Web sajt – skup Web strana uokviru nekom domena (npr. uokviru domena Web strana – dokument napisan u (X)HTML-u.

Web standardi U osnovi Web-a su tri standarda:
HTTP (HyperText Transfer Protocol) HTML (HyperText Markup Language) URI (Uniform Resource Indentificator) Analogija: HTTP – poštanski sistem HTML – pismo URI - adresa

Evolucija Web-a 1980 -1990 Formiranje Weba; samo tekstualni dokumenti
1993 Mosaic browser (tekst i grafika) Statički Web sajtovi (strane se ne procesiraju na serveru) Dinamički Web sajtovi (Web server napravi Web stranu i šalje je klijentu) Dvoslojne, troslojne i višeslojne Web aplikacije

Evolucija Web-a Web 2.0 – glavni moto je kolaborativnost, tj. ljudi širom Interneta kreiraju sadržaj Web sajtovi služe kao servisi Primeri: Google Maps (korisnici dodaju lokacije na mapi) Wikipedia (korisnici pišu sadržaj) Del.icio.us (social bookmarking) MySpace, Faces (predstavljanje korisnika)

Web 2.0 YouTube, Google Videos (korisnici uploaduju video materijal)
Blog sajtovi (“online dnevnik”, korisnici pišu “blogove”)

Osnovni elementi Web strane
(X)HTML i CSS Osnovni elementi Web strane

Osnovi HTML-a HTML - Hypertext Markup Language.
Tekst sa dodatnim karakteristikama: formatiranje, slike, multimedija i linkovi ka drugim dokumentima. XHTML – eXtensible Hypertext Markup Language Izveden iz XML-a i time je sintaksno stroži od HTML-a (maltene pravilno napisani HTML)

CSS – Cascading Style Sheets
HTML elementi služe da se napravi sadržaj Web strane (u smislu strukture strane): ovo ovde je naslov, zatim ide podnaslov, pa slika, itd... Stilovi definišu kako da se prikažu HTML elementi Oni definišu kako će naslov izgledati, gde će biti pozicija slike, kakva će biti slova u tekstu, itd.

HTML se sastoji od: elemenata, <div> </div>
atributa, <div style=“…”> komentara i  znakovnih referenci. &quot predstavlja “

Deo za informacije o verziji HTML-a Zaglavlje - informacije o dokumentu Telo dokumenta – sadržaj, tj. Skup HTML elemenata Element se sastoji od početnog dela (tag-a, <div>), sadržaja i završnog dela (</div>). Npr: <div>Novosti</div>

Neki elementi nemaju sadržaj i krajnji deo, i njima se na kraju početnog dela stavlja /. Npr:
<br /> Crta se stavlja u početnom delu kao znak da je to ujedno i kraj elementa

Primer HTML dokumenta <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01/
/EN“ " strict.dtd"> <html> </html> <head> <title>Moja prva Web strana</title> </head> <body> <p>Hello world!</p> </body>

Postoje dva tipa elemenata:
Blokovi (block-level) -počinju novim redom, mogu da sadrže oba tipa elemenata; npr. P, DIV, TABLE Neposredni (inline, text-level) – ne počinju novim redom, mogu da sadrže samo inline elemente; npr. SPAN

Primer <html> Paragraf sa identifikatorom “par1” <head>
<title>Moja prva Web strana</title> </head> <body style="background-color:#acd373"> <p id=“par1” style="background-color:#ff6600;“> Hello<span style="color:white;“>world </span> </p> <div>Hello again</div> </body> </html> Paragraf sa identifikatorom “par1” SPAN inline element; style atribut predstavlja CSS objekat pridružen ovom SPAN elementu

Primer 1

HTML i CSS Svaki HTML element ima pridružen CSS objekat.
Svaki HTML element je uokviren kutijom čiji je izgled definisan tim CSS objektom.

Osnovne kategorije CSS objekta
CSS objekat se sastoji od mnoštva atributa koji se mogu svrstati u sledeće kategorije: Border - Izgled okvira Margin - Udaljenost od drugih elemenata Padding – Udaljenost od okvira do sadržaja Font – Izgled slova Background – Izgled pozadine

Deklarisanje stilova Tri načina za deklarisanje stilova
U style elementu uokviru strane U style atributu uokviru samog elementa U eksternom CSS fajlu

Deklaracija u style elementu
<html> <head> <title>Uvod u CSS</title> <style> #par1 { font-family:tahoma; font-size:20px; border:2px # dashed; /* slozeni atribut */ background-color:#3d7f44; } </style> </head> <body style="background-color:#acd373"> <p id="par1">Hello <span style="color:white;">world</span></p> <div>Hello again</div> </body> </html>

Deklaracija u style atributu
<html> <head> <title>Uvod u CSS</title> </head> <body style="background-color:#acd373"> <p id="par1“ style=“font-family:tahoma; font-size:20px; border:2px # dashed; background-color:#3d7f44;” >Hello <span style= "color:white;“> world</span></p> <div>Hello again</div> </body> </html>

Deklaracija u eksternom fajlu
<html> <head> <title>Uvod u CSS</title> <link rel=“stylesheet” type=“text/css” href=“main.css”> </head> <body style="background-color:#acd373"> <p id="par1“>Hello <span style="color:white;">world </span></p> <div>Hello again</div> </body> </html> main.css #par1 { font-family:tahoma; font-size:20px; border:2px # dashed; /* slozeni atribut */ background-color:#3d7f44; }

Primer 2

Kako selektovati elemente u CSS-u?
Postoje više načina za selekciju elemenata. Tri osnovna su: Selekcijom tipova Selekcijom klasa Selekcijom ID-a

Selekcijom tipova Primer: Grupisanje tipova: h1 {color:red;}
svi h1 elementi će biti crvene boje Grupisanje tipova: h1, h2, h3 {color:red;} svi h1, h2 i h3 elementi će biti crvene boje

Selekcijom klasa Koncept klase. Svaki HTML element može pripadati jednoj ili više klasa. To se navodi u class atributu: <p class=“special”></p> Navedeni paragraf (<p> element) pripada klasi special <p class=“special highlight”></p> Navedeni paragraf (<p> element) pripada klasama special i highlight Sada uokviru style elementa ili eksternog fajla navesti definiciju klase (jednostavno navesti sve atribute) : .special {color:red;} Sintaksa: tačka (.) pa ime klase

Selekcijom ID-a Primer: Sintaksa: znak # pa ID elementa
#par1 {color:red;} Element sa ID-om par1 će biti crvene boje Sintaksa: znak # pa ID elementa

Nasleđivanje stilova Svaki HTML element kaskadno nasleđuje karakteristike CSS objekta pridruženog roditeljskom HTML elementu. Analogija sa nasleđivanjem u objektno-orijentisanim jezicima

Nasleđivanje stilova - primer
<body style="background-color:#acd373"> <p style=“color:red; font-size:20px“>Hello <span style="color:white;“> world </span></p> <div>Hello again</div> </body> background-color:#acd373; color:white; font-size:20px; background-color:#acd373 background-color:#acd373; color:red; font-size:20px; body p span Nasleđivanje

Dizajn interfejsa Web aplikacije
Upotreba (X)HTML-a i CSS-a

Dizajn strane Postoje tri načina dizajniranja Web strane:
Pomoću okvira (FRAMESET) Pomoću DIV i SPAN elemenata Pomoću tabela (TABLE)

“Tables are dead...long live tables”
Prema W3C standardima, preporučuje se dizajn strane pomoću DIV i SPAN elemenata, uz pomoć CSS-a (stilova) - U praksi nije moguće uvek dizajnirati stranu ovom metodom zbog parcijalne podrške Web čitača, tako da se i dalje koriste tabele Okviri se generalno izbegavaju kao vizuelno loše rešenje, pritom i zbunjujuće za korisnike

Primer strane

Dizajn strane - pregled
Dat je hierarhijski prikaz strane. Prvo ce da se napravi pomocu DIV-ova (CSS), a posle pomocu tabela

Dizajn interfejsa pomoću CSS-a

<title>Dizajn pomocu CSS-a</title> </head>
<html> <head> <title>Dizajn pomocu CSS-a</title> </head> <body> <div style="height:90%"> </div> <div style="height:10%; background-color:#988675“> Footer</div> </body> </html> Dokument se sastoji od dva DIV elementa na najvišem nivou hierarhije CSS atribut background-color određuje boju pozadine elementa CSS atribut height određuje visinu elementa u odnosu na roditeljski element (u ovom slučaju body)

Rezultat

Prvi DIV element se sastoji
<html> <head> <title>Dizajn pomocu CSS-a</title> </head> <body> <div style="height:90%"> <div style="float:left; height:100%; width:200px; background- color:#c4df9b">Prva kolona </div> color:#00bff3">Druga kolona</div> <div style="height:100%; background-color:#c7b299; vertical- align:bottom;"> </div> <div style="height:10%; background-color:#988675">Footer</div> </body> </html> Prvi DIV element se sastoji od tri DIV elementa float atribut određuje poziciju elementa u odnosu na elemente istog nivoa. Umesto da ova tri DIV-a budu jedan ispod drugog, oni će se ređati jedan pored drugog

Tri DIV elementa u vidu kolona

Ovaj DIV element se sastoji od
<html> <head> <title>Dizajn pomocu CSS-a</title> </head> <body> <div style="height:90%"> <div style="float:left; height:100%; width:200px; background- color:#c4df9b">Prva kolona </div> color:#00bff3">Druga kolona</div> <div style="height:100%; background-color:#c7b299; vertical- align:bottom;"> <div style="height:80%;">df</div> <div style="height:20%; background-color:#fbaf5d;">Test</div> </div> <div style="height:10%; background-color:#988675">Footer</div> </body> </html> Ovaj DIV element se sastoji od dva DIV elementa

Konačan rezultat

Dizajn interfejsa pomoću tabela

HTML tabela Tabela se u HTML-u kreira pomoću tri elementa:
Jednog glavnog elementa (<table>), definiše tabelu Elemenata za redove (<tr> od “table row”) Elemenata za kolone uokviru reda (<td> od “table data”) Postupak: definiše se glavni, table element. On sadrži tr elemente (redove), a svaki red sadrži isti broj td elemenata.

<title>Upotreba Float-a</title> </head> <body>
<html> <head> <title>Upotreba Float-a</title> </head> <body> <table style="width:100%; height:100%;"> <tr style="height:90%; vertical-align:top;"> <td>Glavni deo</td> </tr> <tr style="background-color:#988675;"> <td>Footer</td> </table> </body> </html> U ovom slučaju (još uvek) imamo samo jednu kolonu, pa zato i jedan td element Nije potrebno stavljati height atribut jer će ovaj red zauzeti preostali prostor, tj. 10% Sledeći korak je da se u prvi red ubaci nova tabela koja će sadržati samo jedan red i tri kolone. Alternativni način je da se vrši spajanje kolona (colspan atribut) (prvi red 3 kolone, drugi samo jednu)

Primer za rowspan i colspan
<table> <tr> <td>1</td> <td rowspan="2">2</td> <td>3</td> </tr> <td>4</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </table>

…još tri kolone… <table cellspacing=0 cellpadding=0 style="width:100%; height:100%;"> <tr style="height:90%; vertical-align:top;"> <td> <table cellspacing=0 cellpadding=0 style="width:100%; height:100%;"> <tr style="vertical-align:top;"> <td style="width:200px; background-color:#c4df9b">Prva kolona</td> <td style="width:200px; background-color:#00bff3">Druga kolona</td> <td style="background-color:#c7b299">Treca kolona</td> </tr> </table> </td> <tr style="background-color:#988675;"> <td>Footer</td> Cellspacing i cellpadding određuju udaljenost između ćelija. Da ne bi bile šupljine između ćelija, vrednosti su im 0. Ovi atributi još uvek ne mogu da se kontrolišu preko CSS atributa margin i padding (bag) Sledeći korak je da se treća kolona podeli na dva reda. To ćemo uraditi ubacivanjem nove tabele sa dva reda i jednom kolonom u treću kolonu

... i dva reda... . . . <td style="background-color:#c7b299">
<table cellspacing=0 cellpadding=0 style="width:100%; height:100%;"> <tr style="height:80%; vertical-align:top;"> <td>gore</td> </tr> <tr style="vertical-align:top; background- color:#fbaf5d"> <td>dole</td> </table> </td> Prikazana je samo treća kolona i tabela koja je ubačena u nju

Razdvajanje stila i HTML-a
Radi lakšeg menjanja izgleda sajta, preporučuje se da se definicije stilova nalaze u eksternoj datoteci. Tako će promenom te CSS datoteke biti promenjen izgled svih Web strana koji je koriste Princip je sledeći: svi stilski atributi koji se ponavljaju za neke elemente izdvojiti i napraviti CSS klasu koja definiše te atribute, a onda povezati te HTML elemente da koriste tu klasu

Na primer, sve tri tabele imaju atribute:
width:100%; height:100%; Zato ćemo ova dva atributa izdvojiti i napraviti novu klasu (neka se zove max) table.max {width:100%; height:100%;} prefiks table znači da navedeno pravilo važi samo za table elemente koji pripadaju klasi max (a ne za recimo div element, iako pripada klasi max)

Sve tri tabele pripadaju klasi max:
<table class="max" cellspacing=0 cellpadding=0> <tr id="glavniDeo"> <td> <tr> <td id="prvaKolona">Prva kolona</td> <td id="drugaKolona">Druga kolona</td> <td id="trecaKolona"> <tr id="trecaGore"> <td>gore</td> </tr> <tr id="trecaDole"> <td>dole</td> </table> </td> <tr id="footer"> <td>Footer</td> Sve tri tabele pripadaju klasi max: table.max {width:100%; height:100%;}

Elementima koji imaju svoj CSS stil definisan (ne javlja se
<table class="max" cellspacing=0 cellpadding=0> <tr id="glavniDeo"> <td> <tr> <td id="prvaKolona">Prva kolona</td> <td id="drugaKolona">Druga kolona</td> <td id="trecaKolona"> <tr id="trecaGore"> <td>gore</td> </tr> <tr id="trecaDole"> <td>dole</td> </table> </td> <tr id="footer"> <td>Footer</td> Elementima koji imaju svoj CSS stil definisan (ne javlja se kod drugih elemenata) je pridružen id i za svaki konkretan element je definisan stil

Stilska (CSS) datoteka
table.max {width:100%; height:100%;} tr {vertical-align:top;} #glavniDeo {height:90%;} #prvaKolona {width:200px; background-color:#c4df9b} #drugaKolona {width:200px; background-color:#00bff3} #trecaKolona {background-color:#c7b299} #trecaGore {height:80%;} #trecaDole {background-color:#fbaf5d} #footer {height:90%; background-color:#988675} <head> <title>Dizajn tabelom 4</title> <link rel="stylesheet" href="master.css"> </head>

HTML I CSS PROJEKAT kreiranje sajta na osnovu postojeceg dizajna

Similar presentations

Presentation on theme: "HTML I CSS PROJEKAT kreiranje sajta na osnovu postojeceg dizajna"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

HTML I CSS PROJEKAT kreiranje sajta na osnovu postojeceg dizajna

Similar presentations

Presentation on theme: "HTML I CSS PROJEKAT kreiranje sajta na osnovu postojeceg dizajna"— Presentation transcript:

Similar presentations

About project

Feedback