CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.

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



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



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



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



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">



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">



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

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



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



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



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>



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



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) '





These tags are compulsory to create an HTML file/document.

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



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.



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



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>



Paragraphs

- Defined with <p> tag

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

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

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>



<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>




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



Bold

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


<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


<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


<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


<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


<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


<html><head><title>Preformatted</title></head><body><pre>This ispreformatted text.It preserves both spacesand line breaks.</pre></body></html>




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


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

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

<a href="member_reg.asp">Registration</a>



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.


<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


<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


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

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



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



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>



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>



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>



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, 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>



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>



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>



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>



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>



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>



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>


Question?


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)

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.

Documents

html slide

html file extension

uppercase html tags

fskm uitm pahang page

page load

transitional dtd

effective simple text

document type definition