HTML5&7

HTML
HyperText Markup Language

Formatimi
 Megjithese rregulli kryesor i HTML eshte qe
autori kontrollon permbajtjen ndersa browseri
kontrollon formatin, jane disa gjera qe mund
te bejme per te kontrolluar sesi teksti shfaqet
ne ekran.
 Do te shohim dhe te mesojme t’i kerkojme
browser-it qe teksti te duket ndryshe dhe si ta
formatojme kete tekst ne menyra te
ndryshme.
 Tag-u STYLE
 <STYLE>ndryshime ne stilin e dokumentit
</STYLE>
 Pershkrimi:identifikon ndryshime formatimi ne
elementet qe shfaqen ne container-in
<BODY> te dokumetit.
 Tipi: Container
 Atributet : dir, lang, media, title, type
Shembulli 2
 <HTML>
 <HEAD>
 <TITLE>Document-Level Style Sheets</TITLE>
 
 </HEAD>
 <BODY bgcolor="white">
 <H1>Week 1</H1>
 <H2>Class Topics</H2>
 <OL>
 <LI>Syllabus and class format</LI>
 <LI>Lab login procedures</LI>
 <LI>Discussion of browsers</LI>
 </OL>
 <H2>Homework (due next week)</H2>
 <H3>Read</H3>
 <P>Chapter 1 </P>
 <H3>Turn In</H3>
 <OL>
 <LI>Turn in the URL for a favorite Web site and be prepared to say a few words about what you like about this
site in class.</LI>
 <LI>Turn in the URL for a Web site you thing is poorly designed and be prepared to say a few words about what you
don't like about this site in class.</LI>
 </OL>
 <H3>Key Terms</H3>
 <UL>
 <LI>ASCII editor </LI>
 <LI>Uniform Resource Locator (URL) </LI>
 </UL>
Shembulli 2-vazhdim
 <HR noshade width="50%">
 <P align="center">
 <A HREF="#top">Top of Page</A><BR>
 <A HREF="homework.html">Back to Homework Home Page</A><BR>
 Please send comments regarding this web page to:
 <A
HREF="mailto:TrainorT@Muskegon.cc.mi.us">TrainorT@Muskegon.cc.mi.us</
A>
 </P>
 <H4>MUSKEGON COMMUNITY COLLEGE<BR>
 221 South Quarterline Road<BR>
 Muskegon, MI 49442<BR>
 616.773.9131<BR>
 </H4>
 </BODY>
 </HTML>
Shembulli 3
 <HTML>
 <HEAD>
 <TITLE>Document-Level Style Sheets</TITLE>
 <STYLE>
 H1, H2, H3, H4, H5, H6

 {
 font-weight: bold;
 font-family: sans-serif;
 }
 H1
 {
 font-size: 30pt;
 text-align: center;
 }
 H2
 {
 font-style: italic;
 }
 H3
 {
 }
 H4
 {
 font-size: x-small;
 }
 OL LI
 {
 font-family: serif;
 list-style-type: upper-roman;
 }
 UL LI
 {
 font-family: serif;
 list-style-type: square;
 }
 </STYLE>
 </HEAD>
Shembulli 3-vazhdim
 <BODY>
 <H1>Week 1</H1>
 <H2>Class Topics</H2>
 <OL>
 <LI>Syllabus and class format</LI>
 <LI>Lab login procedures</LI>
 <LI>Discussion of browsers</LI>
 </OL>
 <H2>Homework (due next week)</H2>
 <H3>Read</H3>
 <P>Chapter 1 </P>
 <H3>Turn In</H3>
 <OL>
 <LI>Turn in the URL for a favorite Web site and be prepared to say a few words about what you like about this site in class.</LI>
 <LI>Turn in the URL for a Web site you thing is poorly designed and be prepared to say a few words about what you don't like about this site in
class.</LI>
 </OL>
 <H3>Key Terms</H3>
 <UL>
 <LI>ASCII editor </LI>
 <LI>Uniform Resource Locator (URL) </LI>
 </UL>
 <HR noshade width="50%">

 <P align="center">
 <A HREF="#top">Top of Page</A><BR>
 <A HREF="homework.html">Back to Homework Home Page</A><BR>
 Please send comments regarding this web page to:
 <A HREF="mailto:TrainorT@Muskegon.cc.mi.us">TrainorT@Muskegon.cc.mi.us</A>
 </P>
 <H4>MUSKEGON COMMUNITY COLLEGE<BR>

 221 South Quarterline Road<BR>
 Muskegon, MI 49442<BR>
 616.773.9131<BR>
 </H4>
 </BODY>
 </HTML>
 Ndryshime per tekstin
 text-align: left | center | right | justify
 Ndryshimet e fontit
 font-family: serif | sana-serif | cursive | fantasy | monospace | [
Arial, Courier,….]
 font-size: pt | 1-100% | larger | smaller | xx-small etj
 font-style: normal | italic | oblique
 font-weight: normal | bold | bolder | lighter | 100-900
 font-variant: normal | small-caps
 font-strech: normal | wider | narrower | ultra-condensed thru ultra-
expanded
 font : font-style | font-variant | font-weight | font-size | font-family
 Tag-u <BASEFONT>basefont</BASEFONT>
 Pershkrimi: dizenjuar per te ndryshuar
madhesine e fontit te perdorur brenda nje
dokumenti.
 Tipi: Container
 Atributet: class, color, face, id, lang, size,
style, title
Shembull-6
 <HTML>
 <HEAD>
 <TITLE>BASEFONT Demonstration</TITLE>
 </HEAD>
 <BODY bgcolor="#FFFFFF">
 
 <H2>BASEFONT Size Changes</H2>

 This line is shown in the normal font<BR>
 <BASEFONT size=2> Change the basefont size to 2. <BR>
 <BASEFONT size=5> Up to size 5, now we add the close tag
 </BASEFONT> and the text drops back to 3 or 2 depending on the
browser.<BR>
 </BODY>
 </HTML>
 Tag-u <FONT>
 <FONT>font-i i tekstit
 Pershkrimi: ndryshon ngjyren, tipin ose
madhesine e fontit.
 Tipi: Container
 Atributet: class, color, face, id, lang, size,
style, title
Shebulli-8
 <HTML>
 <HEAD>
 <TITLE>FONT Changes</TITLE>
 </HEAD>
 <FONT size="3">This line is shown in the normal font. </FONT><BR>

 <FONT size="+1"> Up 1 to change the basefont size to 4. </FONT><BR>
 <FONT size="+1"> Up another size does not work. </FONT><BR>
 <FONT size="-1"> Down a size works the first time. </FONT><BR>
 <FONT size="-1"> Down another size does not work. </FONT><BR>
 <FONT size="3" face="sans-serif"> Generic family names like sans-serif work. </FONT><BR>
 <FONT face="Forte">Family names like Forte are recognized if found. </FONT><BR>
 <FONT color="gray">Text color changes to gray. </FONT><BR>
 Line of text outside of the <FONT> container. <BR>
 </BODY>
 </HTML>
Tag-e te tjera
 <B>bold</B>
 <I>italic</I>
 <SUP>superscript</SUP> - gjysem rreshti siper
fundit te tekstit
 <SUB>subscript</SUB> - gjysem rreshti poshte
fundit te tekstit
 <BIG>big text</BIG> - default =3 varion 1-7
 <SMALL>small text</SMALL> - default =3 varion 1-
7
 <U>tekst i nenvizuar</U>
 <STRIKE>vijezim permes tekstit</STRIKE>
Shembull-10
 <HTML>
 <HEAD>
 <TITLE>Common Logical Styles</TITLE>
 </HEAD>
 <ABBR>abbreviation</ABBR><BR>
 <ACRONYM>acronym</ACRONYM>
 <ADDRESS>address</ADDRESS>
 <BLOCKQUOTE>blockquote</BLOCKQUOTE>
 <CITE>citation</CITE><BR>
 <DEL>delete</DEL><BR>
 <DFN>definitions</DFN><BR>
 <EM>emphasis</EM><BR>
 <INS>insert</INS><BR>
 <Q>quote</Q><BR>
 <SAMP>sample</SAMP><BR>
 <STRONG>strong</STRONG><BR>
 <VAR>variable</VAR><BR>
 </BODY>
 </HTML>
Shembull-11
 <HTML>
 <HEAD>
 <TITLE>Long and Short Quotes</TITLE>
 </HEAD>
 <H3>Block Quote</H3>
 <BLOCKQUOTE cite="http://www.w3.org/TR/1998/REC-html40-19980424">
 We recommend that style sheet implementations provide a mechanism for inserting quotation marks
before and after a quotation delimited by BLOCKQUOTE in a manner appropriate to the current
language context and the degree of nesting of quotations.<BR>
 <BR>
 However, as some authors have used BLOCKQUOTE merely as a mechanism to indent text, in order to
preserve the intention of the authors, user agents (browsers) should not insert quotation marks in the
default style.
 </BLOCKQUOTE>
 <H3>Inline Quote</H3>
 Tim responded, <Q lang="en">I asked Diane for directions to the Effiel Tower and she said
 <Q lang="fr">Tu es marteau! Nous sommes à Marseille.</Q>
 I just wanted to crawl into a hole and cover myself up after that.</Q>
 </BODY>
 </HTML>
Shembulli-12
 Karakteret speciale
 <HTML>
 <HEAD>
 <TITLE>Special Characters I</TITLE>
 </HEAD>
 <B>Without Special Characters</B><BR>

 For example, were we to convert this document into HTML and try to show it on a browser, a line that
said:<BR>
 <BR>
 "The format of a standard tag is <tag> with the < starting the tag and the > closing it."<BR>
 <BR>
 wouldn’t look like that when displayed, because the browser would try to resolve the <s and the >s. Being
unable to do so, it would ignore them. Let’s see how that would actually look.
 </S>
 <BR>
 <BR>
 <B>With Special Characters</B><BR>
 "The format of a standard tag is <tag> with the < starting the tag and the > closing it."<BR>
 <BR>
 </BODY>
 </HTML>
Shembulli-13
 <HTML>
 <HEAD>
 <TITLE>Special Characters II</TITLE>
 </HEAD>
 <H3>Special Characters</H3>
 & or & - ampersand <BR>
 © or © - copyright <BR>
 < or < - less than <BR>
 > or > - greater than <BR>
 ® or ® - registration <BR>
 " or " - double-quote <BR>
 <H3>Foreign Language</H3>
 À or À - uppercase A + grave accent <BR>
 Á or Á - uppercase A + acute accent <BR>
 Â or Â - uppercase A + circumflex accent <BR>
 Ã or Ã - uppercase A + tilde <BR>
 Ä or Ä - uppercase A + umlaut <BR>
 Å or Å - uppercase A + ring <BR>
 Æ or Æ - uppercase A + diphthong <BR>
 Ç or Ç - uppercase C + cedilla <BR>
 Ð or Ð - uppercase Eth (Icelandic) <BR>
 Ø or Ø - uppercase O + slash <BR>
 Þ or Þ - uppercase THORN (Icelandic) <BR>
 </BODY>
 </HTML>
 <PRE>pre-formated text</PRE>
 Pershkrimi - percakton text te paraformatuar
qe browser-i nuk duhet tendryshoje.
 Tipi - Container
Shembulli-14
 <HTML>
 <HEAD>
 <TITLE>Using Pre-Formatted Text</TITLE>
 </HEAD>
 <BIG><BIG><TT><B>DOS DIR Command</B></TT></BIG></BIG><BR>

 After the DOS prompt type: <TT>dir a:</TT><BR>
 The computer will display: <BR>
 <PRE>
 Volume in drive A has no label.
 Volume Serial Number is 0000-0000
 Directory of A:\
 08/24/98 01:33p 67,584 Case Study Prospectus.doc

 08/18/98 02:34p 37,888 hwk102f.doc
 08/18/98 02:20p 59,904 PSY102f.DOC
 08/24/97 10:29a 78,848 100SYL.DOC
 08/10/98 12:23p 7,061 hwk110df.htm
 08/10/98 12:31p 6,891 hwk110nf.htm
 08/10/98 11:15a 4,317 cis110sy.htm
 08/19/98 01:55p 72,727 cis110sg.jpg
 08/19/98 01:59p 73,144 cis110tx.jpg
 08/19/98 02:03p 71,025 cis110lb.jpg
 08/19/98 02:06p 65,909 cis100tx.jpg
 08/24/98 07:36p 29,184 CIS100HW.DOC
 08/30/98 12:52p <DIR> work
 09/28/98 12:33a 808 nletter.css
 09/28/98 12:33a 3,327 newsletter.htm
 10/05/98 12:39a 962 e05-11.htm
 10/05/98 12:39a 491 e05-10.htm
 10/04/98 09:59p 2,351 e05-05.htm
 09/09/98 05:57p 623,392 css2.txt
 19 File(s) 1,205,813 bytes
 75,776 bytes free
 </PRE>
 <BR>
 To clear the screen type: <TT>cls</TT>
 </BODY>
 </HTML>
Tabelat
 Te dhenat ne rreshta dhe shtylla
 Tabelat na ndihmojne te paraqesim
informacionin ne menyre eficiente.
 Para se te ndertoheshin tabelat ne HTML, e
vetmja menyre per te krijuar te dhena tabelore
ishte duke perdorur tag-un <PRE>.
 Tabela eshte menyra me eficiente, koncize,
direkte per te paraqitur tipe te ndryshme te
dhenash.
Tabelat
 Tabelat jane te ndertuara nga rreshta dhe
shtylla.
 C
 R OW
 L
 U
 M
 N
Shembull
 <HTML>
 <HEAD>
 <TITLE>3 by 2 Table Using Styles</TITLE>
 </HEAD>
 <BODY style="background-color: white">
 <H3>The Team's Home Schedule</H3>
 <TABLE border="5" style="border-color: Fuchsia; float: right; padding: 5px">
 <CAPTION align="bottom">
 Games start at 8:00 p.m.
 </CAPTION>
 <TR>
 <TD>Dallas </TD>
 <TD>November 5th </TD>
 </TR>
 <TR>
 <TD>Detroit </TD>
 </TR>
 <TR>
 <TD>Toronto </TD>
 <TD>November 17th</TD>
 </TR>
 </TABLE>
 Show the home team your support by attending one of the remaining home games. Our guys need to hear from you as they
battle for the championship. It's a lot of fun, so bring the whole family!
 </BODY>
 </HTML>
Shembull-1
 <HTML>
 <HEAD>
 <TITLE>2 by 3 Table</TITLE>
 </HEAD>
 The table following is just a simple 2 x 3 table. It has very few fancy attributes, but it does show how the
parts of the table fit together.
 <TABLE border="5">
 <CAPTION align="BOTTOM"> This caption is aligned to the bottom. </CAPTION>
 <TR>
 <TD>Row1/Column1 </TD>
 <TD> R1/C2 </TD>
 <TD> R1/C3 </TD>
 </TR>
 <TR>
 <TD>R2/C1</TD>
 <TD>R2/C2</TD>
 <TD>R2/C3</TD>
 </TR>
 </TABLE>
 The table in this example has 6 cells and this text starts below the table.
 </BODY>
 </HTML>
Tabelat
 Tag-u <TABLE>
 <TABLE>tabele</TABLE>
 Pershkrimi : percakton rreshtat, shtyllat, dhe
dicituren (caption) qe perbejne nje tabele.
 Tipi : container
 Atributet : align, bgcolor, border, cellspacing,
cellpadding, class, frame, dir, id, lang, onClick,
onDblClick, onKeyDown, onKeyPress, onKeyUp,
onMouseDown, onMouseMove, onMouseOut,
onMouseOver, onMouseUp, rules, style, summary,
title, width.
Shembulli-2
 <HTML>
 <HEAD>
 </HEAD>
 <TABLE>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat
 Border – eshte vija qe rrethon tabelen dhe ndermjet
cdo qelize.
 Vlera default e atributit border eshte 1, do te thote 1-
pixel border rreth tabeles dhe rreth cdo qelize ne
tabele.
 Frame – eshte vija qe rrethon nje qelize te vetme
apo te gjithe tabelen.
 Frame – specifikon cilat pjese te kufirit te tabeles
jane te dukshme.
 Rule – eshte vija vertikale apo horizontale qe ndan
rreshtat dhe kolonat e qelizave.
 Rule – specifikon se cilat shfaqen ndermjet qelizave
brenda tabeles.
Shembulli-3
 <HTML>
 <HEAD>
 </HEAD>
 <TABLE frame="ABOVE">
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat
 Frame
 Border : te gjitha anet
 Box : te kater anet
 Void : asnje ane
 Above : vetem ana e siperme
 Below : vetem ana e poshtme
 Hsides : anet horizontale
 Vsides : anet vertikale
 Lhs : vetem anet e majta
 Rhs : vetem anet e djathta
Tabelat
 Rules
 none : no rules, vetem frame i jashtem
 Rows : rules vetem ndermjet rreshtave
 Cols : rules vetem ndermjet shtyllave
 All : rules ndermjet rreshtave dhe shtyllave
Shembulli-4
 <HTML>
 <HEAD>
 </HEAD>
 <TABLE rules="ROWS">
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat shembulli-5
 Width – kontrollon gjeresine e tabeles
 <HTML>
 <HEAD>
 <TITLE>3 by 2 Table With Border</TITLE>
 </HEAD>
 <TABLE border="10" width="10%">

 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat
 Cellpadding – percakton hapesiren ndermjet
te dhenave dhe ne qelize dhe kufirit te
qelizes.
 Cellspacing – percakton hapesiren ndermjet
qelizave ne tabele.
Shembulli-6a
 <HTML>
 <HEAD>
 </HEAD>
 <TABLE border="10" cellpadding="10">

 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Shembulli-6b
 <HTML>
 <HEAD>
 </HEAD>
 <TABLE border="10" cellpadding="10" cellspacing="10">

 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Shembulli-6c
 <HTML>
 <HEAD>
 </HEAD>
 <TABLE border="10" cellspacing="0">

 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Shembulli-6d
 <HTML>
 <HEAD>
 </HEAD>
 <TABLE border="10" cellpadding="0" cellspacing="0">

 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat- shembulli-7
 Bgcolor – ndryshon ngjyren e sfondit te tekstit brenda tabeles.
 <HTML>
 <HEAD>
 </HEAD>
 
 <TABLE border="5" bgcolor=#00FFFF>

 
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Shembulli-8
 <HTML>
 <HEAD>
 <TITLE>3 by 2 Table Using Styles</TITLE>
 </HEAD>
 <TABLE border="5" style="border-color: Fuchsia; float: right; padding: 5px">
 <CAPTION align="bottom">Games start at 8:00 p.m.</CAPTION>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 Show the home team your support by attending one of the remaining home games. Our guys need to hear from you as they
battle for the championship. It's a lot of fun, so bring the whole family!
 </BODY>
 </HTML>
Tabelat
 <TR>qelizat e tabeles</TR>
 Pershkrimi : percakton nje rresht ne tabele.
 Atributet : align, class, char, charoff, dir, id,
lang, onClick, onDblClick, onKeyDown,
onKeyPress, onKeyUp, onMouseDown,
onMouseMove, onMouseOut, onMouseOver,
onMouseUp, style, title, valign.
Shembulli-9
 <HTML>
 <HEAD>
 <TITLE>Horizontal and Vertical Text Alignment</TITLE>
 </HEAD>

 <TR align="LEFT">
 <TD>Left</TD>
 <TD>Align Left</TD>
 </TR>
 <TR align="CENTER">
 <TD>Center</TD>
 <TD>Align Center</TD>
 </TR>
 <TR align="RIGHT">
 <TD>Right</TD>
 <TD>Align Right</TD>
 </TR>
 <TR valign="TOP">
 <TD>Vertical Alignment Top<BR>
 <BR>
 </TD>
 <TD>Top</TD>
 </TR>
 <TR valign="CENTER">
 <TD>Vertical Alignment Center<BR>
 <BR>
 </TD>
 <TD>Center</TD>
 </TR>
 <TR valign="BOTTOM">
 <TD>Vertical Alignment Bottom<BR>
 <BR>
 </TD>
 <TD>Bottom</TD>
 </TR>
 <TR valign="BASELINE">
 <TD>Vertical Alignment Baseline<BR>
 <BR>
 </TD>
 <TD>Baseline</TD>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat
 <TD>te dhenat e tabeles</TD>
 Pershkrimi : percakton te dhena te tabeles(nje
qelize).
 Atributet : abbr, align, axis, class, char, charoff,
colspan, dir, headers, height, id, lang, nowrap,
onClick, onDblClick, onKeyDown, onKeyPress,
onKeyUp, onMouseDown, onMouseMove,
onMouseOut, onMouseOver, onMouseUp, style,
rowspan, scope, title, valign, width.
Shembulli-10
 <HTML>
 <HEAD>
 </HEAD>
 <TR>
 </TR>
 The Dallas game starts at 8:00 p.m.
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat
 <TH>koka e tabeles</TH>
 Pershkrimi : percakton koken e tabeles (nje qelize).
 Atributet : abbr, align, axis, class, char, charoff,
colspan, dir, headers, height, id, lang, nowrap,
onClick, onDblClick, onKeyDown, onKeyPress,
onMouseOut, onMouseOver, onMouseUp, style,
rowspan, scope, title, valign, width.
Shembulli-11
 <HTML>
 <HEAD>
 <TITLE>Tables With Headers</TITLE>
 </HEAD>
 <H3>Vertical Table Layout</H3>

 <TR>
 <TH>Opponent </TH>
 <TH>Date </TH>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 <H3>Horizontal Table Layout</H3>

 <TR>
 <TH>Opponent</TH> <TD>Dallas</TD> <TD>Detroit</TD> <TD>Toronto</TD>
 </TR>
 <TR>
 <TH>Date</TH> <TD>November 5th</TD> <TD>November 11th</TD> <TD>November 17th</TD>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Shembulli-12
 <HTML>
 <HEAD>
 <TITLE>Column Spanning Cells</TITLE>
 </HEAD>
 <BODY>
 <TR>
 <TH colspan="6">Home Ticket Options</TH>
 </TR>
 <TR>
 <TH>Zone</TH>
 <TD>Red</TD>
 <TD>Blue</TD>
 <TD>Green</TD>
 <TD>Yellow</TD>
 <TD>Orange</TD>
 </TR>
 <TR>
 <TH>Price</TH>
 <TD>$101.00</TD>
 <TD colspan="2">$25.50</TD>
 <TD colspan="2">$9.00</TD>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Shembulli-13
 <HTML>
 <HEAD>
 <TITLE>Row Spanning Cells</TITLE>
 </HEAD>
 <BODY>
 <TR>
 <TH rowspan="6">Home Ticket Options</TH>
 <TH>Zone</TH>
 <TH>Price</TH>
 </TR>
 <TR>
 <TD>Red</TD>
 <TD>$101.00</TD>
 </TR>
 <TR>
 <TD>Blue</TD>
 <TD rowspan="2">$25.50</TD>
 </TR>
 <TR>
 <TD>Green</TD>
 </TR>
 <TR>
 <TD>Yellow</TD>
 <TD rowspan="2">$9.00</TD>
 </TR>
 <TR>
 <TD>Orange</TD>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Shembulli-14
 <HTML>
 <HEAD>
 <TITLE>Width and Height Attributes</TITLE>
 </HEAD>
 <TR>
 <TH width="75" rowspan="6">Home Ticket Options</TH>
 <TH width="100" height="50">Zone</TH>
 <TH width="100" >Price</TH>
 </TR>
 <TD height="50">Red</TD>
 <TD>$101.00</TD>
 </TR>
 <TD height="30">Blue</TD>
 <TD rowspan="2">$25.50</TD>
 </TR>
 <TD height="30">Green</TD>
 </TR>
 <TD height="30">Yellow</TD>
 <TD rowspan="2">$9.00</TD>
 </TR>
 <TD height="30">Orange</TD>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Shembulli-15
 <HTML>
 <HEAD>
 <TITLE>Cell Width and Height Using Styles</TITLE>
 </HEAD>
 <TR>
 <TH style="width: 75px" rowspan="6">Home Ticket Options</TH>
 <TH style="width: 100px; height: 50px">Zone</TH>
 <TH style="width: 100px">Price</TH>
 </TR>
 <TR style="text-align: center">
 <TD style="height: 50px">Red</TD>
 <TD>$101.00</TD>
 </TR>
 <TD style="height: 30px">Blue</TD>
 <TD rowspan="2">$25.50</TD>
 </TR>
 <TD style="height: 30px">Green</TD>
 </TR>
 <TD style="height: 30px">Yellow</TD>
 <TD rowspan="2">$9.00</TD>
 </TR>
 <TD style="height: 30px">Orange</TD>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat
 <CAPTION>caption</CAPTION>
 Pershkrimi : percakton nje diciture per
tabelen.
 Atributet : align, class, dir, id, lang, onClick,
onDblClick, onKeyDown, onKeyPress,
onMouseOut, onMouseOver, onMouseUp,
style, title.
Shembulli-16
 <HTML>
 <HEAD>
 <TITLE>Table With Caption</TITLE>
 </HEAD>
 <CAPTION align="BOTTOM">Multiplication Table</CAPTION>
 <TR>
 <TH> </TH> <TH>1</TH> <TH>2</TH> <TH>3</TH> <TH>4</TH> <TH>5</TH>
 </TR>
 <TR>
 <TH>1</TH> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> <TD>5</TD>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat
 <COLGROUP>grup kolonash
</COLGROUP>
 Pershkrimi : krijon ndarje strukturore brenda
tabeles qe mund te formatohet ne menyre te
pavarur.
 <COL>kolone</COL>
 Per kolona te vecante dhe jo grup kolonash
Shembulli-17
 <HTML>
 <HEAD>
 <TITLE>Multiplication Table</TITLE>
 </HEAD>
 <COLGROUP span="3" width="50"
 style="
 font-family: sans-serif;
 font-style: italic;
 ">
 </COLGROUP>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Shembulli-18
 <HTML>
 <HEAD>
 <TITLE>Multiplication Table</TITLE>
 </HEAD>
 <COL width="10">
 <COL width="20" style="font-style: italic">
 <COL width="30" style="font-size: 8pt">
 <COL width="60" span="2" style="text-align: center">
 <COL width="30" style="font-family: sans-serif">
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 <TR>
 </TR>
 </TABLE>
 </BODY>
 </HTML>
Tabelat
 <THEAD>koka e tabeles</THEAD>
 - Percakton koken e tabeles
 <TFOOT>table footer</TFOOT>
 - Percakton fundin e tabeles
 <TBODY>trupi i tabeles </TBODY>

 - Percakton trupin e tabeles
Shembulli-19
 <HTML>
 <HEAD>
 <TITLE>Headers and Footers</TITLE>
 </HEAD>
 <CAPTION>Common Software Tools</CAPTION>
 <THEAD>
 <TR>
 <TH>Icon</TH> <TH>Description</TH>
 </TR>
 </THEAD>
 <TFOOT>
 <TR>
 <TH>Icon</TH> <TH>Description</TH>
 </TR>
 </TFOOT>
 <TBODY style="text-align: center">
 <TR>
 <TD><IMG src="save.jpg"></TD> <TD>Save</TD>
 </TR>
 <TR>
 <TD><IMG src="preview.jpg"></TD> <TD>Print Preview</TD>
 </TR>
 <TR>
 <TD><IMG src="print.jpg"></TD> <TD>Print</TD>
 </TR>
 <TR>
 <TD><IMG src="cut.jpg"></TD> <TD>Cut</TD>
 </TR>
 <TR>
 <TD><IMG src="copy.jpg"></TD> <TD>Copy</TD>
 </TR>
 <TR>
 <TD><IMG src="paste.jpg"></TD> <TD>Paste</TD>
 </TR>
 <TR>
 <TD><IMG src="left.jpg"></TD> <TD>Left Align</TD>
 </TR>
 <TR>
 <TD><IMG src="center.jpg"></TD> <TD>Center Align</TD>
 </TR>
 <TR>
 <TD><IMG src="right.jpg"></TD> <TD>Right Align</TD>
 </TR>
 </TBODY>
 </TABLE>
 </BODY>
 </HTML>

HTML5&7

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5&7

Uploaded by

Copyright:

Available Formats

HTML

HyperText Markup Language

 H1, H2, H3, H4, H5, H6

 <H2>Homework (due next week)</H2>

 <HR noshade width="50%">

 <H4>MUSKEGON COMMUNITY COLLEGE<BR>

 <H2>BASEFONT Size Changes</H2>

 <FONT size="3">This line is shown in the normal font. </FONT><BR>

 <B>Without Special Characters</B><BR>

 <BIG><BIG><TT><B>DOS DIR Command</B></TT></BIG></BIG><BR>

 08/24/98 01:33p 67,584 Case Study Prospectus.doc

 <TABLE border="5" style="border-color: Fuchsia; float: right; padding: 5px">

 <TABLE border="10" width="10%">

 <TABLE border="10" cellpadding="10">

 <TABLE border="10" cellpadding="10" cellspacing="10">

 <TABLE border="10" cellspacing="0">

 <TABLE border="10" cellpadding="0" cellspacing="0">

 <TABLE border="5" bgcolor=#00FFFF>

 <TABLE border="5" style="border-color: Fuchsia; float: right; padding: 5px">

 <CAPTION align="bottom">Games start at 8:00 p.m.</CAPTION>

 <TABLE border="5" width="50%">

 The Dallas game starts at 8:00 p.m.

 <H3>Vertical Table Layout</H3>

 <H3>Horizontal Table Layout</H3>

 <TBODY>trupi i tabeles </TBODY>

You might also like