CSC318 DYNAMIC WEB APPLICATION DEVELOPMENT

1

CSC318DYNAMIC WEB APPLICATION DEVELOPMENT

CHAPTER:HyperText Markup Language

HTML

Siti Nurbaya IsmailFaculty of Computer & Mathematical Sciences,

Universiti Teknologi MARA (UiTM), Kedah| A2-3039 | [email protected] | 019-5710562 |

Hypertext Markup Language

Hypertext Markup Language (HTML)

Introduction to HTML Effective HTML Page HTML Version Information HTML Elements HTML Attributes HTML Document Head & Body HTML Character References HTML Basic Tags

HTML Comments Lengths: Dates and Times HTML Structure Bodies

HTML Structure: Text HTML Structure: List

Alignment & Font Styles CSS

Links Table

2

Upon completion of this chapter, you will learn:


Hyper Text Markup Language

Contain markup tags- Tell web browser how to display the page

It has either ".htm" or ".html" file extension

Can be created using- Notepad- Dreamweaver

Did you know?- HTML was developed with the intent of defining the structure of documents like

headings, paragraphs, lists, and so on to facilitate information sharing between researcher

3

Introduction To HTML

Hypertext Markup LanguageHyper Text Markup Language (HTML)

1. Don‘t make users think Obvious & self-explanatory

2. Don‘t squander users‘ patience Less action is required from users (user friendly)

3. Manage to focus users‘ attention Images are more eye-catching than text Human eye is a non-linear, instantly recognize edges, patterns, motions

4. Strive for feature exposure Visually appealing: inviting, informative

5. Make use of effective writing No long texts, use effective simple text or images

Effective HTML Page

4


6. Strive for simplicity K-I-S, users are looking for information, not enjoying the design

7. Don‘t be afraid of white space Reduce page load, easy for users to look for information

8. Communicate effectively with a visible language Organize, economize, communicate

9. Conventions are our friends Reduce the learning curve

10.Test early, test often (TETO) Provide crucial insights into significant problems and issues

Effective HTML Page

5


• HTML 2.0– developed by the Internet Engineering Task Force HTML Working Group in 1996.– is an outdated version of HTML. For a Web developer there is no need to study the HTML 2.0 standard.

• HTML 3.2– W3C Recommendation 14. January 1997.– HTML 3.2 contained new features such as fonts, tables, applets, superscripts, subscripts and more

• HTML 4.0– W3C Recommendation 18. December 1997. – A second release was issued on 24. April 1998 with only some editorial corrections. (CSS)

• HTML 4.01– W3C Recommendation 24. December 1999.– a minor update of corrections and bug-fixes from HTML 4.0.

• XHTML 1.0– reformulates HTML 4.01 in XML.– W3C Recommendation 20. January 2000.

• HTML 5– January 22nd, 2008, W3C published a working draft for HTML 5.– improves interoperability, and reduces development costs, – embedding audio, video, graphics, client-side data storage, and interactive documents.

HTML Version Information

6


• The document type declaration names the document type definition (DTD) in use for the document

• The DTDs vary in the elements they support• The HTML 4.01 Strict DTD includes all elements and attributes that have not

been deprecated or do not appear in frameset documents. For documents that use this DTD, use this document type declaration:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

7

http://www.w3.org/TR/html4/sgml/dtd.html

http://www.w3.org/TR/html4/conform.html


• The HTML 4.01 Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes (most of which concern visual presentation). For documents that use this DTD, use this document type declaration:

• The HTML 4.01 Frameset DTD includes everything in the transitional DTD plus frames as well. For documents that use this DTD, use this document type declaration:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

8

http://www.w3.org/TR/html4/sgml/loosedtd.html


http://www.w3.org/TR/html4/sgml/framesetdtd.html


9

HTML Tags


Markup tags should be in:– Lowercase OR– Uppercase

HTML tags are not case sensitive BUT for good practice, please avoid mix up the tags with lowercase and uppercase

10

HTML Tags

<html><head><title></title></head><body></body></html>

<HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>

<HtML><HEaD><TITle></TItle></HeaD><BodY></bODY></hTML>

Good Good Avoid


If you are going to use tag pairs in combination (which you will probably be doing quite a bit), then to avoid confusing the browser (not to mention confusing yourself) they should be nested, not overlapping.

----- overlapping tags…. bad

----- nested tags…. good

11

HTML Tags

<this><that>HTML Attributes</this></that>

<this><that>HTML Attributes</that></this>


Remember your first code? − Notice that all tags are used to markup HTML elements− Notice that all tags started with "<" and end with ">"− The element content is everything between the start and the end tag− Notice that all tags came in pairs

− <html>...</html>, <body>...</body>, etc− Some HTML elements have empty content− Empty elements are closed in the start tag− Most HTML elements can have attributes

Willing to know what are available tags in HTML?- Visit: http://www.w3schools.com/tags/default.asp

12

HTML Elements

http://www.w3schools.com/tags/default.asp


Remember your first code? – Example:

• <title>MY Online Page</title>• <body>Programming is Fun!</body>

– HTML element:• HTML element: body• Start with a start tag: <body>• Content of the element is: Programming is Fun!• End with an end tag: </body>

– Nested HTML elements (element inside element)• Example: <p>I <b>Love</b> HTML</p>

13

HTML Elements


Specified in the start tag of HTML element Attributes come in name/value pairs like: name="value" Provide additional information to an HTML element

14

HTML Attributes

<html><head><title>HTML Attributes</title></head><body><h4 title="Do You See me?">Put your mouse cursor on me ;)</h4></body></html>


Have you tried the code?– <h4>...</h4>: define the start of the heading– title: is an attribute placed in <h4>...</h4>. It suggested the title for the

element Willing to know what are available attributes in HTML?

– Visit: http://www.w3schools.com/tags/ref_standardattributes.asp

15

HTML Attributes

http://www.w3schools.com/tags/ref_standardattributes.asp


16

<html>

<head>

<title> My Online Page </title>

</head>

<body>

Programming is Fun!

</body>

</html>

HTML Document Head & Body


<html>

<head>

</head>

<body>

</body>

</html>

17

These tags are compulsory tocreate an HTML file/document.

HTML elements and attributes are some kind of information that you HAVE to know.



18

<html>

<head>

</head>

<body>

</body>

</html>

identify the document as an HTML (Web) document

Meta-information:: information about the documentsuch as its title & keywords, that may be useful to search engines, & other data that is not considered as document content. ex: <title> :: identifies the document displayed in the browser’s title barcontains of the document’s contentyou can think of the body as a canvas where the content appears: text, images, colors, graphics, etc.



It includes mathematical symbols, Greek characters, various arrows, technical symbols and shapes.

19

HTML Characters References | Entities

Result Description Entity Name Entity Number non-breaking space

< less than < <> greater than > >

& ampersand & &" quotation mark " "

' apostrophe ' (does not work in IE) '


20

Basic HTML Tags

Tag Description<html> Defines an HTML document

<body> Defines the document’s body

<h1> to <h6> Defines header 1 to header 6

<p> Defines a paragraph

<br> Inserts a single line break | Enter |

<hr> Defines horizontal rule

 Defines a comment in HTML


It is very important for you to know the most important tags in HTML for:– Headings– Paragraphs– Line breaks

Headings

21

Basic HTML Tags

<h1> This is heading 1 </h1><h2> This is heading 2 </h2><h3> This is heading 3 </h3><h4> This is heading 4 </h4><h5> This is heading 5 </h5><h6> This is heading 6 </h6>


Paragraphs– Defined with <p> tag

22

Basic HTML Tags

<p>This is paragraph 1</p><p>This is paragraph 2</p>


Line breaks– <br> forces line break wherever you place it

23

Basic HTML Tags

<p>This <br> is a para<br>graph with line breaks</p>


Comment in HTML– Comment tag is used when you want to put comment in the HTML code– Comment tag can be placed anywhere, as long as in the HTML code– Comment will not appear in the web browser

24

HTML Comments

<html> <head> <title>Comment Tag in HTML</title> <!–- This is comment tag --> </head> <!–- This is comment tag --> <body> <!–- This is comment tag --> <h4 title="Do You See me?"> Put your mouse cursor on me ;) </h4> </body></html>


<time> tag is used for declaring the date and/or time within an HTML document

Introduced in HTML 5

HTML Date & Time (HTML5)

<p>On Saturdays, we open at <time>09:00</time>.</p>

<p>The concert is <time datetime="2011-12-07">next Wednesday</time>.</p>

<p>We finally hit the road at <time datetime="2011-11-29T05:00-07:00">5am last Tuesday</time>.</p>

25


26

HTML Text Formatting

Tag Description<b> Defines bold text

<big> Defines big text

<em> Renders as emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Define strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text


Bold– <b> tag is used to bold any characters in your HTML

27


<html> <head> <title>HTML Formatting</title> </head> <body> This is how we <b>bold</b> characters in HTML. <br> <b>Another example in bold-ing characters</b> <br> </body></html>


Italic & Emphasized– <i> & <em> tags are used to define italic and emphasized text

28


<html> <head> <title>HTML Formatting</title> </head> <body> <i>This text is italic</i> <br> <em>This text is emphasized</em> <br> </body></html>


Strong– <strong> tag is used to render emphasized text

29


<html> <head> <title>HTML Formatting</title> </head> <body> <strong>Strong</strong> the text <br> <strong>Try Again</strong> </body></html>


Superscript & Subscript– <sup> & <sub> tags are used to define superscript and subscript text

30


<html> <head> <title>HTML Formatting</title> </head> <body> This text contains <sup>superscript</sup> <br> This text contains <sub>subscript</sub> </body></html>


Small & Big– <small> & <big> tag are used to define small and big text

31


<html> <head> <title>HTML Formatting</title> </head> <body> <small> This text is small </small> <br> <big> This text is big </big> </body></html>


Preformatted– <pre> tag is used to control spaces and line breaks in HTML

32


<html> <head> <title>Preformatted</title> </head> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> </body></html>


Open a new notepad.Write down the html tags in order to display the following text format in a web page.

33

Lets Test Your Skills


34

HTML Lists

Tag Description<ol> Defines an ordered list<ul> Defines an unordered list<li> Defines a list item<dl> Defines a definition list<dt> Defines a definition term<dd> Defines a definition description


Unordered List– <ul> tag is used to create ordered list in HTML

35

HTML Lists

<html> <head> <title>Unordered List</title> </head> <body> <h2>Unordered List:</h2> <ul> <li>Humpty Dumpty</li> <li>Hickery Dickery</li> </ul> </body></html>


Ordered List– <ol> tag is used to create ordered list in HTML

36

HTML Lists

<html> <head> <title>Unordered List</title> </head> <body> <h2>Unordered List:</h2> <ol> <li>Humpty Dumpty</li> <li>Hickery Dickery</li> </ol> </body></html>


Nested List

37

HTML Lists

<html> <head> <title>List</title> </head> <body> <h2>Unordered List:</h2> <ol> <li>Humpty Dumpty</li> <ul> <li>An Egg</li> <li>Sat on the wall</li> <li>Had a great fall</li> </ul>

<li>Hickery Dickery</li> <ol> <li>A clock</li> <li>A mouse</li> <li>Run around</li> <li>Fall down</li> </ol> </ol> </body></html>


Open a new notepad.Write down the html tags in order to display the following bullet & text format.

38


Exercise 1 Exercise 2

Hypertext Markup LanguageFonts

Sample: using <font> tag to display text

<html><body>

<p><font size="2" face="Verdana">This is a paragraph.</font></p>

<p><font size="5" face="Times" color="blue">This is another paragraph.</font></p>

</body></html>

39


We can change the fontsizetoo... It's pretty easy!‒ Specify the size attributes ‒ Fonts come in 7 sizes:

40

<font size="2"> Font with size 2</font>


We can also change the font type too... It's pretty easy!-specify the face attributes - some common fonts that are on *most* computers and are pretty safe bets.

Arial Arial Black Arial NarrowBookman Old Style Century Gothic Comic Sans MSCourier New Georgia ImpactLucida Console Tahoma Times New RomanTrebuchet MS Verdana

41

<font face="impact"> Impact </font>

<font face="georgia"> Georgia </font>


We can also change the font color too... It's pretty easy!-specify the color attributes

42

<font color="red"> Dazzling RED </font>

<font color="#999ccc"> Crazy Blue </font>


Color Values• HTML colors are defined using a hexadecimal notation (HEX) for the combination of

RED, GREEN, and BLUE color values (RGB). • The combination of RGB values from 0 to 255, gives more than 16 million different

colors (256 x 256 x 256).• HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.

• Web Safe Colors?• HTML Color Picker

43

HTML Color

http://www.w3schools.com/html/html_colors.asp

http://www.w3schools.com/tags/ref_colorpicker.asp


Remember!!!A <tag> tells the browser to do somethingAn attribute goes inside the <tag> and tells the browser how to do it.

Defaultsdefault value is a value that the browser assumes if you have not told it otherwise.

A good example is the font size. The default font size is 3 (usually). If you say nothing it will be 3. If you make faces at your computer it will still be 3!

Every browser has a default font setting - font name, size and color. Unless you have messed with it, the default is probably Times New Roman or Verdana 12pt (which translates into 3 for our purposes) and it's black.

44


• Unfortunately <font> tag is deprecated in HTML 4, and removed from HTML5.

• The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations.

• In HTML 4, Cascading Style Sheets (CSS) should be used to define the layout and display properties for many HTML elements.

45

Hypertext Markup LanguageCascading Style Sheet (CSS)

W3C recommends the uses of Cascading Style Sheet (CSS) to create layout and display properties of HTML

CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.

Styles is different from HTML, they have a format of 'property: value' and most properties can be applied to most HTML tags.

About CSS | you need to learn by urself |

46

http://www.w3schools.com/css/default.asp


<align> to align tables, images, objects, paragraphs, etc. within web browser Possible values:

– left : text lines are rendered flush left. – center : text lines are centered. – right : text lines are rendered flush right. – justify : text lines are justified to both margins.

• This attribute has been deprecated in favor of CSS

47

Alignment

<H1 align="center"> How to Carve Wood </H1>

Deprecated example:

<center><h1> How to Carve Wood </h1></center>

Solution example:

Better Solution CSS: http://www.w3.org/TR/html4/present/graphics.html


http://www.w3.org/TR/html4/present/graphics.html


48

Open a new notepad. Write html tags in order to display the following output.

The sequence of the alphabet size are:3 , 4 , 4, 5, 6, 7, 7, 6, 5, 4, 3, 2,1

The sequence of the alphabet color are:#ee0000#ff7700#eeee00#00bb00#0000ee#dd00dd#880088


49

HTML Links (Hyperlinks)

Tag Description<a> Defines an anchor. Always use with href attribute


Anchor Tag and href Attribute– <a> tag use to point to any resource (document | Web) on the Web:

• HTML file, sound, movie, Website, etc

50


<a href="url">Text to be displayed</a>

<a href="http://www.facebook.com/">Sign in Facebook</a>

<a href=“my_hometown.asp“>HOMETOWN</a>


Target AtrributeDefined where linked documet will be opened• _blank : open the linked document in a new window or tab• _self : open the linked document in the same frame as it was clicked (default)• _parent : open the linked document in the parent frameset. (only applicable when using frames)• _top : open the linked document in the full body of the window• _framename : open the linked document in a named frame

51


<a href="http://www.google.com/" target="_blank">Google</a>


Anchor Tag and Name Attribute– The link will "jump" to another section on the same page

52


<a name="link_target"<h2>I Am Here!></h2></a>

<a href="#link_target/">Link Target</a>


Email Link– Create a hyperlink to an email address

53


<a href="url">Text to be displayed</a>

<a href="mailto:[email protected]">Email to me</a>


7/12/2010 54

HTML Table

Tag Description<table> Defines a table<th> Defines a table header<tr> Defines a table row<td> Defines a table cell<caption> Defines a table caption<colgroup> Defines groups of table columns<col> Defines the attribute values for one or more columns in

a table<thead> Defines a table head<tbody> Defines a table body<tfoot> Defines a table footer


Table– <table> tag is used to create table in HTML– <tr> tag is used to create row, and– <td> tag is used to create table data where it can contains text, image, and so

forth– Attribute like border can be placed in <table> tag.

• If border value is 0, there will be no border will be displayed • If border value is 1, there will be a border.

– If you want to place the content in the (center | left | right), place align attribute in <td> tag like below:

*Note: specify align value with center, left, or right. Default value is left.

7/12/2010 55

HTML Table

<td align="center"> content </td>


Table– <table> tag is used to create table in HTML

7/12/2010 56

HTML Table

<html> <head> <title>HTML Table</title> </head> <body> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body></html>


Table with heading– <th> tag is used to create heading in a table

7/12/2010 57

HTML Table

<html> <head> <title>HTML Table</title> </head> <body> <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> </table> </body></html>


Table with cellpadding Attribute– cellpadding is used to create more white space between the cell content and

its border

7/12/2010 58

HTML Table

<html><body><h4>With cellpadding:</h4><table border="1" cellpadding="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table></body></html>


Table with cellspacing Attribute– cellspacing is used to increase the distance between the cells

7/12/2010 59

HTML Table

<html><body><h4>With cellspacing:</h4><table border="1" cellspacing="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table></body></html>


Table with colspan Attribute– To make a cell span multiple columns

7/12/2010 60

HTML Table

<html><head> <title>HTML Table</title></head><body> <table border="1" width="30%"> <tr> <td colspan="2">Table header</td> </tr> <tr> <td width="20%">Table cell 1</td> <td>Table cell 2</td> </tr> </table> </body></html>


61


Table with rowspan Attribute– To make a cell span multiple rows

7/12/2010 62

HTML Table

<html><head> <title>HTML Table</title></head><body> <table border="1" width="30%"> <tr> <th rowspan="2">Table header</th> <td>Table cell 1 </tr> <tr> <td>Table cell 2</td> </tr> </table></body></html>


Open a new notepad.Write down the html tags in order to display the following table & text format.

7/12/2010 63



Bibliography (Book)• Knuckles (2001). Introduction to Interactive Programming on the Internet

using HTML & Javascript. John Wiley & Sons, Inc.

Bibliography (Websites)• http://www.w3schools.com/html/default.asp• http://www.w3schools.com/html/html_entities.asp • http://www.quackit.com/html/• http://www.w3.org/TR/html4/conform.html#deprecated• http://www.w3.org/TR/1999/REC-CSS1-19990111• http://www.htmldog.com/guides/cssbeginner/

64

Bibliography

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/html/html_entities.asp

http://www.quackit.com/html/


http://www.w3.org/TR/1999/REC-CSS1-19990111

http://www.w3.org/TR/1999/REC-CSS1-19990111

http://www.htmldog.com/guides/cssbeginner/

Date post:	24-Feb-2016
Category:	Documents
Upload:	darice
View:	37 times
Download:	0 times

CSC318 DYNAMIC WEB APPLICATION DEVELOPMENT

Documents