1 / 49

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

Learn the art of effective HTML page design to captivate users. Discover how to optimize layout, text, and images to improve usability and engagement on your website.

wegman
Download Presentation

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Outline Hyper Text Markup Language (HTML) • HTML Character Reference • HTML Text Formatting • HTML Date & Time (HTML5) • HTML Links (Hyperlinks) • HTML Lists • HTML Table • Introduction to HTML • Effective HTML Page • HTML Version Information • HTML Basic Tags • HTML Elements • HTML Attributes FSKM UiTM Pahang  Page 2

  3. Hyper Text Markup Language (HTML) Introduction to 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 FSKM UiTM Pahang  Page 3

  4. Hyper Text Markup Language (HTML) Effective HTML Page • Don‘t make users think • Obvious & self-explanatory • Don‘t squander users‘ patience • Less action is required from users (user friendly) • Manage to focus users‘ attention • Images are more eye-catching than text • Human eye is a non-linear, instantly recognize edges, patterns, motions • Strive for feature exposure • Visually appealing: inviting, informative • Make use of effective writing • No long texts, use effective simple text or images FSKM UiTM Pahang  Page 4

  5. Hyper Text Markup Language (HTML) Effective HTML Page • Strive for simplicity • K-I-S, users are looking for information, not enjoying the design • Don‘t be afraid of white space • Reduce page load, easy for users to look for information • Communicate effectively with a visible language • Organize, economize, communicate • Conventions are our friends • reduce the learning curve • Test early, test often (TETO) • provide crucial insights into significant problems and issues FSKM UiTM Pahang  Page 5

  6. Hyper Text Markup Language (HTML) HTML Version Information • 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"> FSKM UiTM Pahang  Page 6

  7. Hyper Text Markup Language (HTML) HTML Version Information • 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"> FSKM UiTM Pahang  Page 7

  8. Hyper Text Markup Language (HTML) HTML Tags FSKM UiTM Pahang  Page 8

  9. Good Good Hyper Text Markup Language (HTML) 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> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> <HtML> <HEaD> <TITle></TItle> </HeaD> <BodY> </bODY> </hTML> <html> <head> <title></title> </head> <body> </body> </html> Avoid FSKM UiTM Pahang  Page 9

  10. Hyper Text Markup Language (HTML) HTML Tags • 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 FSKM UiTM Pahang  Page 10

  11. Hyper Text Markup Language (HTML) HTML Elements • 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> FSKM UiTM Pahang  Page 11

  12. Hyper Text Markup Language (HTML) HTML Attributes • Specified in the start tag of HTML element: attr = "value" • Provide additional information to an HTML element <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 12

  13. Hyper Text Markup Language (HTML) HTML Attributes • 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 FSKM UiTM Pahang  Page 13

  14. Hyper Text Markup Language (HTML) A.K.A Character Entities HTML Character Reference FSKM UiTM Pahang  Page 14

  15. Hyper Text Markup Language (HTML) FSKM UiTM Pahang  Page 15

  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 16

  17. Hyper Text Markup Language (HTML) identify the document as an HTML (Web) document Meta-information:: information about the document such 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 bar contains 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 17

  18. Hyper Text Markup Language (HTML) Basic HTML Tags FSKM UiTM Pahang  Page 18

  19. Hyper Text Markup Language (HTML) Basic HTML Tags • It is very important for you to know the most important tags in HTML for: • Headings • Paragraphs • Line breaks • Headings <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 19

  20. Hyper Text Markup Language (HTML) Basic HTML Tags • Paragraphs • Defined with <p> tag <p>This is paragraph 1</p> <p>This is paragraph 2</p> FSKM UiTM Pahang  Page 20

  21. Hyper Text Markup Language (HTML) Basic HTML Tags • Line breaks • <br> forces line break wherever you place it <p>This <br> is a para<br>graph with line breaks</p> FSKM UiTM Pahang  Page 21

  22. Hyper Text Markup Language (HTML) Basic HTML Tags • 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 <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 22

  23. Hyper Text Markup Language (HTML) HTML Date & Time (HTML5) • <time> tag is used for declaring the date and/or time within an HTML document • Introduced in HTML 5 <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 23

  24. Hyper Text Markup Language (HTML) HTML Text Formatting FSKM UiTM Pahang  Page 24

  25. Hyper Text Markup Language (HTML) HTML Text Formatting • 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> FSKM UiTM Pahang  Page 25

  26. Hyper Text Markup Language (HTML) HTML Text Formatting • 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> FSKM UiTM Pahang  Page 26

  27. Hyper Text Markup Language (HTML) HTML Text Formatting • 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> FSKM UiTM Pahang  Page 27

  28. Hyper Text Markup Language (HTML) HTML Text Formatting • 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> FSKM UiTM Pahang  Page 28

  29. Hyper Text Markup Language (HTML) HTML Text Formatting • 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> FSKM UiTM Pahang  Page 29

  30. Hyper Text Markup Language (HTML) HTML Text Formatting • Preformatted • <pre> tag is used to control spaces and line breaks in HTML <html> <head> <title>Preformatted</title> </head> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> </body> </html> FSKM UiTM Pahang  Page 30

  31. Hyper Text Markup Language (HTML) HTML Links (Hyperlinks) FSKM UiTM Pahang  Page 31

  32. Hyper Text Markup Language (HTML) HTML Links (Hyperlinks) • 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> FSKM UiTM Pahang  Page 32

  33. Hyper Text Markup Language (HTML) HTML Links (Hyperlinks) • 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> FSKM UiTM Pahang  Page 33

  34. Hyper Text Markup Language (HTML) HTML Links (Hyperlinks) • 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> FSKM UiTM Pahang  Page 34

  35. Hyper Text Markup Language (HTML) HTML Links (Hyperlinks) • Email Link • Create a hyperlink to an email address <a href="url">Text to be displayed</a> <a href="mailto:eizan.aziz@gmail.com">Email to me</a> FSKM UiTM Pahang  Page 35

  36. Hyper Text Markup Language (HTML) HTML Lists FSKM UiTM Pahang  Page 36

  37. Hyper Text Markup Language (HTML) HTML Lists • Ordered List • <ol> tag is used to create ordered list in HTML <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 37

  38. Hyper Text Markup Language (HTML) HTML Lists • Unordered List • <ul> tag is used to create ordered list in HTML <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 38

  39. Hyper Text Markup Language (HTML) HTML Lists • Nested List <li>Engineering</li> <ol> <li>EC110</li> <li>EC220</li> <li>EM110</li> <li>EM220</li> </ol> </ol> </body> </html> <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> FSKM UiTM Pahang  Page 39

  40. Hyper Text Markup Language (HTML) HTML Table FSKM UiTM Pahang  Page 40

  41. Hyper Text Markup Language (HTML) HTML Table • 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. <td align="center"> content </td> FSKM UiTM Pahang  Page 41

  42. Hyper Text Markup Language (HTML) HTML Table • Table • <table> tag is used to create table in HTML <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 42

  43. Hyper Text Markup Language (HTML) HTML Table • Table with heading • <th> tag is used to create heading in a 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 43

  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 44

  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 45

  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 46

  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 47

  48. Question? FSKM UiTM Pahang  Page 48

  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) FSKM UiTM Pahang  Page 49

More Related