1.Osnove HTML-a HyperText Markup Language – tekst procesor koji nije What You See Is What You Get HTML je standardizovan jezik koji se koristi na Web-u.

Slides:



Advertisements
Similar presentations
ตัวอย่างโครงสร้างและ ส่วนประกอบภาษา HTML about 10 words BACKGROUND="name.gif" BGCOLOR="#0000FF" TEXT="#000000" LINK="#0000FF" VLINK="#FF00FF" ALINK="#FF0000"
Advertisements

Introduction to HTML II Shih-Heng Chin. Preface Structure of a HTML File Elements used frequently Tables.
Phil Campbell (LSBU) Session 2 Other Common Tags IMG Finding images Tables Anchor Tags Web layouts Tables Exercise Summary of attributes.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
CS105 Introduction to Computer Concepts HTML
HTML Hyper-Text Markup Language or tags. HTML is a “tag” language Open and close tags Tags identified with angle brackets Basic format content (shorthand.
>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language.
© Marty Hall, Larry Brown Web core programming 1 HyperText Markup Language (HTML) Designing Documents for the.
HTML HyperText Markup Language ©Richard L. Goldman July 15, 2003.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom
©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.
HTML newsletter. Pričaćemo o… HTML CSS HTML, CSS i newsletteri.
Chapter 4 HTML Tags. HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write.
Revision Webpage design HTML.   FACE  Attributes  Marquee  Define the following terms.
Hyper Text Markup Language
HTML & CSS Jan Janoušek.
HTML.
Survey of Computer Science CSCI 110, Spring 2011 Lecture 23 HTML
Elements of HTML Web Design – Sec 3-2
>> HTML: Tables.
HTML <table> tag syntax: <table> </table>
Programming the Web using XHTML and JavaScript
HTML.
Vežba II.
Programiranje 1 uvod u html
Slike, Hipertekst veze, Liste, Linije, Tabele
TABELE.
Табеле Табеле се представљају елементом TABLE.
Petlje WHILE – WEND.
Osnove HTML-a Hypertext Markup Language – jezik za opis hiperteksta
Hyper Text Markup Language
4.1 Vizualni (grafički) HTML uređivači
Programiranje 1 uvod u html
HTML.
MICROSOFT WORD 2010.
CheckBox RadioButton RadioGroup
Petlje FOR - NEXT.
Font tag and its attributes
Uvod u HTML Zoltan Geller 2017
مقدمة عن الإنترنت وفهم لغة HTML
KREIRANJE OBJEKATA.
Programiranje za Internet
HTML.
Elektrotehnički fakultet – Podgorica Operativni sistemi
Podešavanje osobina stranica
Hyper Text Markup Language
Vežba 1. Formatiranje teksta korišćenjem stilskih šablona
Kartica Insert.
HTML.
Web Design and Development
Element form Milena Kostadinović.
Obrada slike na računaru
Ključne reči,identifikatori, konstante i promenljive
PYTHON I HTTP, PYTHON I HTML
Kaskadni opisi stilova
EXCEL 2 Formatiranje.
Osnovni simboli jezika Pascal
Do While ... Loop struktura
Uvod u HTML.
HTML HTML is a language for describing web pages.
10th International Conference on Live Maintenance
Single Tags <tagName> Example: <BR>
Basic HTML.
Johan Ng and Muhammad Hazzry
Presentation transcript:

1.Osnove HTML-a HyperText Markup Language – tekst procesor koji nije What You See Is What You Get HTML je standardizovan jezik koji se koristi na Web-u. Koristi se za opisivanje formata Web stranice i njenih elemenata. HTML jezik ne sadrži podatke, već definiše način na koji se podaci prikazuju na Web stranicama.

1.Osnove HTML HTML komande se pišu u vidu tag-ova (etiketa) HTML tagovi su “case insensitive” i pišu se unutar < >. Vrste tagova: Prosti <X > (bez završnog taga) Složeni <X> neki tekst </X> Sa atributima <X A1=a A2=b...> neki tekst </X>

1.Osnove HTML HTML kod počinje sa <HTML> i završava sa </HTML> Svaka stranica se sastoji od dva dela: zagljavlja i tela stranice Zaglavlje može da sadrži: Naslov stranice Definicije stilova za formatiranje teksta Skriptove koji treba da se izvršavaju na klijentskoj strani Podatke namenjene pretraživačima, kao što su ključne reči i opis sadržaja stranice

1.Osnove HTML Zaglavlje počinje sa <HEAD> Oznaka <TITLE> definiše naslov stranice Oznaka <STYLE> služi za opisivanje definicije stilova (Cascading Style Sheets) Oznakama <SCRIPT> započinje i završava se blok koda koji treba da se izvršava na klijentskom računaru Oznaka <META> definiše opisne podatke namenjene pretraživačima Web-a Zaglavlje se završava sa oznakom </HEAD> Primer1 Primer1

1.Osnove HTML HTML ignoriše oznake za novi red, kao i više od jednog razmaka između reči. Primer: <html><head><title>Probna stranica</title></head> <body> Svaka reč je u novom redu. </body> </html>

2.Struktura teksta Naslovi <Hn>, n=1 do 6 Odeljak <DIV> Pasus <P> Novi red <BR> Podvlaka <HR> Unapred formatiran tekst <PRE> Duži navodi <BLOCKQUOTE>

2.Struktura teksta Naslovi <Hn>, gde n može da bude 1-6. Primer: <HTML> <HEAD><TITLE>Različite veličine naslova</TITLE></HEAD> <BODY> <H1> Naslov veličine 1 </H1> <H2> Naslov veličine 2 </H2> <H3> Naslov veličine 3 </H3> <H4> Naslov veličine 4 </H4> <H5> Naslov veličine 5 </H5> <H6> Naslov veličine 6 </H6> </BODY> </HTML> Primer2

2.Struktura teksta Paragraf (pasus) <P> Služi za razdvajanje pasusa u tekstu. Tekst pasusa postavi se između oznaka <P> i </P> Radi isto što i <BR> samo sa većim proredom Atribut ALIGN služi za poravnavanje (LEFT, RIGHT, CENTER, JUSTIFY) Iste atribute ima i tag <DIV> za definisanje odeljaka Primer3

2.Struktura teksta Novi red <BR> Ovom oznakom prelamamo tekst, prelazimo u novi red, pri čemu se ne dodaje prazan red Ako želite da je vaš tekst u jednom redu to se postiže tagom <NOBR> </NOBR>. Tada se pojavljuje horizontalni “scrollbar”. Nevidljiv razmak   - ubacuje jednu prazninu između reči. Ovaj kod moramo ponoviti onoliko puta koliko praznih karaktera (space) želimo da dodamo. Primer 4

2.Struktura teksta Podvlaka ili razdvojna linija <HR> Ima atribute : NOSHADE - za nezasenčenu liniju ALIGN – za poravnavanje (=“center”) SIZE - za debljinu linije (=“5”) WIDTH - određuje koliko linija zauzima od širine stranice (u %) (=“50%”) COLOR (=#ff0000”)

3.Formatiranje teksta Telo stranice počinje sa <BODY> i završava se sa </BODY>. Tag <BODY> ima sledeće atribute: BACKGROUND – Zadaje pozadinsku sliku BGCOLOR – Zadaje boju pozadine stranice TEXT – Zadaje standardnu boju teksta LINK – Zadaje boju veze na stranici ALINK – Zadaje boju veze pre selektovanja VLINK – Zadaje boju veze koja je već bila posećena Primeri 5, 6 i 7

3.Formatiranje teksta <FONT> - služi za formatiranje teksta. Ima sledeće atribute: COLOR – zadaje boju teksta FACE – zadaje ime fonta SIZE – zadaje relativnu veličinu fonta (od 1 do 7)

3.Formatiranje teksta Tag <B> - Bold Tag <I> - Italic Tag <S> - precrtana slova Tag <U> - podvučena slova Tag <STRONG> - jača slova Tag <BIG> - veća slova Tag <SMALL> - manja slova Tag <SUB> - spuštena slova -index Tag <SUP> - podignuta slova – stepen Tag <TT> - teleprinterska slova Primer 8

4.Liste Nenumerisane <UL> tag Numerisane <OL> tag Neuređene <DL>tag Stavke se definišu pomoću <LI> taga Dozvoljene su i liste unutar liste

4.Liste Nenumerisane liste imaju atribut TYPE i on može dobiti vrednost: CIRCLE DISC SQUARE Primer 9

4.Liste Numerisane liste imaju atribut TYPE i on može dobiti vrednost: A - velika slova a – mala slova I – rimski brojevi i – mali rimski brojevi Ako se ništa ne navede onda se koriste arapski brojevi Atribut START navodi od kog broja kreće nabrajanje Primer 10

4.Liste Neuređene (opisne) liste <DL> <DT> odrednica1 <DD> njen opis <DT> odrednica2 <DD> njen opis ... </DL> Primer 11 i 12

5.Linkovi Tag <A> - opisuje vezu koja vodi ka drugom čvoru. Atributi su HREF i NAME <A HREF=http://www.s-markovic.edu.rs> Link ka gimnaziji – polazni čvor1 </A> <A NAME=“pozicija u dolaznom čvoru 2”> je mesto gde želimo da stignemo. Ako se ne navede, pozicioniraćemo se na početak čvora 2.

5.Linkovi Pristupa se drugom delu iste stranice (sadržaj, povratak na vrh, ...) Link na drugu stranicu iste prezentacije Link na stranice drugih prezentacija U prva dva slučaja dovoljno je relativno adresiranje, dok je u trećem potrebno navesti punu putanju URL – Uniform Resourse Locator Primer 13, 14 i 15

6.Slike Tag <IMG> mora imati bar jedan atribut i to: SRC koji definiše naziv i lokaciju slike Ostali atributi su: ALIGN Za vertikalno poravnavanje TOP, MIDLE, BOTTOM Za horizontalno LEFT,CENTER,RIGHT WIDTH i HEIGHT za dimenzionisanje HSPACE i VSPACE za položaj slike BORDER za širinu okvira slike ALT naziv slike kao alternativa prikaza

6.Slike Slika može biti i veza za link <A HREF=“Primer.html”> <IMG SRC=“Slika.gif”> </A> Primer 16 , 17 i 18

7.Tabele Parametri: Tag <TABLE> - pravljenje tabela Za nadnaslov se koristi <CAPTION> Parametri: ALIGN – poravnavanje (left, right) BACKGROUND – slika pozadine BGCOLOR – boja pozadine BORDER – debljina ivice oko ćelija tabele, ako je vrednost 0 – neće biti linija CELLPADDING – razmak između ivice i sadržaja svake ćelije

7.Tabele Svaki red u tabeli se opisuje tagom <TR> CELLSPACING – razmak između ćelija tabele HEIGHT – zadaje visinu tabele (u pikselima ili % veličine prozora Web browsera) WIDHT – zadaje širinu tabele Svaki red u tabeli se opisuje tagom <TR> Parametri: ALIGN (left, center, right) i VALIGN (top, middle, bottom) , BACKGROUND i BGCOLOR Pr1, Pr1a i Pr1b

7.Tabele Tag <TH> - obeležava zaglavlje tabele (prvi red). Isti je kao i <TD> samo što obezbeđuje da je boldovan i centriran Parametri: ALIGN, BACKGROUND, BGCOLOR, COLSPAN (broj kolona koje se spajaju), ROWSPAN (broj redova koji se spajaju), VALIGN (vertikalno poravnavanje), WIDTH ( širina ćelije) Tag <TD> - Opisuje pojedinačnu ćeliju. Parametri: isti kao kod <TH> Pr2, Pr3,Pr4 i Pr5