CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ...
-
Upload
chloe-simpson -
Category
Documents
-
view
223 -
download
2
Transcript of CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ...
![Page 1: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/1.jpg)
CSC317 – INTERNET PROGRAMMINGCSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT
BY: MUHD EIZAN SHAFIQ BIN ABD AZIZFACULTY of COMPUTER and MATHEMATICAL SCIENCES
![Page 2: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/2.jpg)
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
![Page 3: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/3.jpg)
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
![Page 4: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/4.jpg)
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
![Page 5: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/5.jpg)
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
![Page 6: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/6.jpg)
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">
![Page 7: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/7.jpg)
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">
![Page 8: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/8.jpg)
FSKM UiTM Pahang Page 8
Hyper Text Markup Language (HTML)
HTML Tags
![Page 9: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/9.jpg)
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
![Page 10: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/10.jpg)
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
![Page 11: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/11.jpg)
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
![Page 12: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/12.jpg)
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>
![Page 13: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/13.jpg)
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
![Page 14: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/14.jpg)
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) '
![Page 15: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/15.jpg)
FSKM UiTM Pahang Page 15
Hyper Text Markup Language (HTML)
![Page 16: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/16.jpg)
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.
![Page 17: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/17.jpg)
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.
![Page 18: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/18.jpg)
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
![Page 19: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/19.jpg)
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>
![Page 20: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/20.jpg)
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>
![Page 21: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/21.jpg)
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>
![Page 22: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/22.jpg)
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>
![Page 23: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/23.jpg)
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>
![Page 24: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/24.jpg)
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
![Page 25: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/25.jpg)
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>
![Page 26: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/26.jpg)
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>
![Page 27: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/27.jpg)
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>
![Page 28: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/28.jpg)
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>
![Page 29: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/29.jpg)
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>
![Page 30: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/30.jpg)
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>
![Page 31: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/31.jpg)
FSKM UiTM Pahang Page 31
Hyper Text Markup Language (HTML)
HTML Links (Hyperlinks)
Tag Description
<a> Defines an anchor. Always use with href attribute
![Page 32: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/32.jpg)
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>
![Page 33: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/33.jpg)
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>
![Page 34: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/34.jpg)
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>
![Page 35: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/35.jpg)
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>
![Page 36: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/36.jpg)
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
![Page 37: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/37.jpg)
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>
![Page 38: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/38.jpg)
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>
![Page 39: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/39.jpg)
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>
![Page 40: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/40.jpg)
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
![Page 41: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/41.jpg)
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>
![Page 42: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/42.jpg)
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>
![Page 43: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/43.jpg)
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>
![Page 44: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/44.jpg)
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>
![Page 45: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/45.jpg)
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>
![Page 46: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/46.jpg)
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>
![Page 47: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/47.jpg)
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>
![Page 48: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/48.jpg)
FSKM UiTM Pahang Page 48
Question?
![Page 49: CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES.](https://reader035.fdocuments.net/reader035/viewer/2022062321/56649e015503460f94aeb30d/html5/thumbnails/49.jpg)
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)