csc317 – internet programming csc318 – dynamic web application development by: muhd eizan shafiq...
TRANSCRIPT
CSC317 – INTERNET PROGRAMMINGCSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT
BY: MUHD EIZAN SHAFIQ BIN ABD AZIZFACULTY of COMPUTER and MATHEMATICAL SCIENCES
FSKM UiTM Pahang Page 2
Outline
Introduction to HTML
Effective HTML Page
HTML Version Information
HTML Basic Tags
HTML Elements
HTML Attributes
Hyper Text Markup Language (HTML)
HTML Character Reference
HTML Text Formatting
HTML Date & Time (HTML5)
HTML Links (Hyperlinks)
HTML Lists
HTML Table
FSKM UiTM Pahang Page 3
Hyper Text Markup Language (HTML)
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 a Notepad :-0
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
Introduction to HTML
FSKM UiTM Pahang Page 4
Hyper 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
FSKM UiTM Pahang Page 5
Hyper Text Markup Language (HTML)
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
FSKM UiTM Pahang Page 6
Hyper Text Markup Language (HTML)
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:
HTML Version Information
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
FSKM UiTM Pahang Page 7
Hyper Text Markup Language (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:
HTML Version Information
<!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">
FSKM UiTM Pahang Page 8
Hyper Text Markup Language (HTML)
HTML Tags
FSKM UiTM Pahang Page 9
Hyper Text Markup Language (HTML)
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
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
FSKM UiTM Pahang Page 10
Hyper Text Markup Language (HTML)
Remember your first code?
- Notice that all tags are used to markup HTML elements
- Notice that all tags started with ‘<‘ and end with ‘>‘
- Notice that all tags came in pairs
- <html>...</html>, <body>...</body>, etc
Willing to know what are available tags in HTML?
- Visit: http://www.w3schools.com/tags/default.asp
HTML Tags
FSKM UiTM Pahang Page 11
Hyper Text Markup Language (HTML)
Remember your first code?
- Example:
- <title>My First HTML Page</title>
- <body>Hello World!</body>
- HTML element:
- HTML element: body
- Start with a start tag: <body>
- Content of the element is: Hello World!
- End with an end tag: </body>
- Nested HTML elements (element inside element)
- Example: <p>I <b>Love</b> HTML</p>
HTML Elements
FSKM UiTM Pahang Page 12
Hyper Text Markup Language (HTML)
Specified in the start tag of HTML element: attr = "value"
Provide additional information to an HTML element
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>
FSKM UiTM Pahang Page 13
Hyper Text Markup Language (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
HTML Attributes
FSKM UiTM Pahang Page 14
Hyper Text Markup Language (HTML)
A.K.A Character Entities
HTML Character Reference
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
FSKM UiTM Pahang Page 15
Hyper Text Markup Language (HTML)
FSKM UiTM Pahang Page 16
Hyper Text Markup Language (HTML)
These tags are compulsory to create an HTML file/document.
HTML elements and attributes are some kind of information that you HAVE to know.
FSKM UiTM Pahang Page 17
Hyper Text Markup Language (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 content
you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc.
FSKM UiTM Pahang Page 18
Hyper Text Markup Language (HTML)
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
<hr> Defines horizontal rule
<!--…--> Defines a comment
FSKM UiTM Pahang Page 19
Hyper Text Markup Language (HTML)
It is very important for you to know the most important tags in HTML for:
- Headings
- Paragraphs
- Line breaks
Headings
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>
FSKM UiTM Pahang Page 20
Hyper Text Markup Language (HTML)
Paragraphs
- Defined with <p> tag
Basic HTML Tags
<p>This is paragraph 1</p><p>This is paragraph 2</p>
FSKM UiTM Pahang Page 21
Hyper Text Markup Language (HTML)
Line breaks
- <br> forces line break wherever you place it
Basic HTML Tags
<p>This <br> is a para<br>graph with line breaks</p>
FSKM UiTM Pahang Page 22
Hyper Text Markup Language (HTML)
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
Basic HTML Tags
<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>
FSKM UiTM Pahang Page 23
Hyper Text Markup Language (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="2009-02-18">next Wednesday</time>.</p>
<p>We finally hit the road at <time datetime="2009-02-17T05:00-07:00">5am last Tuesday</time>.</p>
FSKM UiTM Pahang Page 24
Hyper Text Markup Language (HTML)
HTML Text Formatting
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines 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
FSKM UiTM Pahang Page 25
Hyper Text Markup Language (HTML)
Bold
- <b> tag is used to bold any characters in your HTML
HTML Text Formatting
<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>
FSKM UiTM Pahang Page 26
Hyper Text Markup Language (HTML)
Italic & Emphasized
- <i> & <em> tags are used to define italic and emphasized text
HTML Text Formatting
<html><head><title>HTML Formatting</title></head><body><i>This text is italic</i><br><em>This text is emphasized</em><br></body></html>
FSKM UiTM Pahang Page 27
Hyper Text Markup Language (HTML)
Strong
- <strong> tag is used to render emphasized text
HTML Text Formatting
<html><head><title>HTML Formatting</title></head><body><strong>Strong</strong> the text<br><strong>Try Again</strong></body></html>
FSKM UiTM Pahang Page 28
Hyper Text Markup Language (HTML)
Superscript & Subscript
- <sup> & <sub> tags are used to define superscript and subscript text
HTML Text Formatting
<html><head><title>HTML Formatting</title></head><body>This text contains <sup>superscript</sup><br>This text contains <sub>subscript</sub></body></html>
FSKM UiTM Pahang Page 29
Hyper Text Markup Language (HTML)
Small & Big
- <small> & <big> tag are used to define small and big text
HTML Text Formatting
<html><head><title>HTML Formatting</title></head><body><small>This text is small</small><br><big>This text is big</big></body></html>
FSKM UiTM Pahang Page 30
Hyper Text Markup Language (HTML)
Preformatted
- <pre> tag is used to control spaces and line breaks in HTML
HTML Text Formatting
<html><head><title>Preformatted</title></head><body><pre>This ispreformatted text.It preserves both spacesand line breaks.</pre></body></html>
FSKM UiTM Pahang Page 31
Hyper Text Markup Language (HTML)
HTML Links (Hyperlinks)
Tag Description
<a> Defines an anchor. Always use with href attribute
FSKM UiTM Pahang Page 32
Hyper Text Markup Language (HTML)
Anchor Tag and Href Attribute
- <a> tag use to point to any resource (document/Web) on the Web:
- HTML file, sound, movie, Website, etc
HTML Links (Hyperlinks)
<a href="url">Text to be displayed</a>
<a href="http://www.google.com/">Google</a>
<a href="member_reg.asp">Registration</a>
FSKM UiTM Pahang Page 33
Hyper Text Markup Language (HTML)
Target Atrribute
- Defined where linked documet will be opened
- _blank: open URL in a new browser
- _self: open URL in a current browser
- _parent: open URL in the parent frame, still within the current browser. Only applicable when using frames.
- _top: open URL in the current browser window, but cancelling out any frames.
HTML Links (Hyperlinks)
<a href="http://www.google.com/" target="_blank">Google</a>
FSKM UiTM Pahang Page 34
Hyper Text Markup Language (HTML)
Anchor Tag and Name Attribute
- The link will "jump" to another section on the same page
HTML Links (Hyperlinks)
<a name="link_target"<h2>I Am Here!></h2></a>
<a href="#link_target/">Link Target</a>
FSKM UiTM Pahang Page 35
Hyper Text Markup Language (HTML)
Email Link
- Create a hyperlink to an email address
HTML Links (Hyperlinks)
<a href="url">Text to be displayed</a>
<a href="mailto:[email protected]">Email to me</a>
FSKM UiTM Pahang Page 36
Hyper Text Markup Language (HTML)
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
FSKM UiTM Pahang Page 37
Hyper Text Markup Language (HTML)
Ordered List
- <ol> tag is used to create ordered list in HTML
HTML Lists
<html><head><title>Ordered List</title></head><body><h2>Ordered List:</h2><ol><li>Comp. Science</li><li>Engineering</li></ol></body></html>
FSKM UiTM Pahang Page 38
Hyper Text Markup Language (HTML)
Unordered List
- <ul> tag is used to create ordered list in HTML
HTML Lists
<html><head><title>Unordered List</title></head><body><h2>Unordered List:</h2><ul><li>Comp. Science</li><li>Engineering</li></ul></body></html>
FSKM UiTM Pahang Page 39
Hyper Text Markup Language (HTML)
Nested List
HTML Lists
<html><head><title>List</title></head><body><h2>Unordered List:</h2><ol><li>Comp. Science</li><ul><li>CS110</li><li>CS220</li><li>CS225</li><li>CS226</li></ul>
<li>Engineering</li><ol><li>EC110</li><li>EC220</li><li>EM110</li><li>EM220</li></ol></ol></body></html>
FSKM UiTM Pahang Page 40
Hyper Text Markup Language (HTML)
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
FSKM UiTM Pahang Page 41
Hyper Text Markup Language (HTML)
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, but, it the 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.
HTML Table
<td align="center"> content </td>
FSKM UiTM Pahang Page 42
Hyper Text Markup Language (HTML)
Table
- <table> tag is used to create table in HTML
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>
FSKM UiTM Pahang Page 43
Hyper Text Markup Language (HTML)
Table with heading
- <th> tag is used to create heading in a table
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>
FSKM UiTM Pahang Page 44
Hyper Text Markup Language (HTML)
Table with cellpadding Attribute
- cellpadding is used to create more white space between the cell content and its border
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>
FSKM UiTM Pahang Page 45
Hyper Text Markup Language (HTML)
Table with cellspacing Attribute
- cellspacing is used to increase the distance between the cells
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>
FSKM UiTM Pahang Page 46
Hyper Text Markup Language (HTML)
Table with colspan Attribute
- To make a cell span multiple columns
HTML Table
<html><head><title>HTML Table</title></head><body><table border="1" width="30%"> <tr> <th colspan="2">Table header</th> </tr> <tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table> </body></html>
FSKM UiTM Pahang Page 47
Hyper Text Markup Language (HTML)
Table with rowspan Attribute
- To make a cell span multiple rows
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>
FSKM UiTM Pahang Page 48
Question?
FSKM UiTM Pahang Page 49
Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc.
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/html/html_entities.asp
http://www.quackit.com/html/
http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
http://csis.pace.edu/~dsachs/7keys.html
Bibliography (Book)
Bibliography (Websites)