1 / 64

CSC318 DYNAMIC WEB APPLICATION DEVELOPMENT

CSC318 DYNAMIC WEB APPLICATION DEVELOPMENT. CHAPTER: H yper T ext M arkup L anguage HTML. Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences , Universiti Teknologi MARA (UiTM), Kedah | A2-3039 | sitinurbaya@kedah.uitm.edu.my | 019-5710562 |.

darice
Download Presentation

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. CSC318DYNAMIC WEB APPLICATION DEVELOPMENT CHAPTER: HyperText Markup Language HTML Siti Nurbaya Ismail Faculty of Computer & Mathematical Sciences, Universiti Teknologi MARA (UiTM), Kedah | A2-3039 | sitinurbaya@kedah.uitm.edu.my | 019-5710562 |

  2. Upon completion of this chapter, you will learn: 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

  3. 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 • 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

  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

  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

  6. Hyper Text Markup Language (HTML) HTML Version Information • 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.

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

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

  9. HTML Tags

  10. Good Good 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

  11. HTML Tags 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 <this><that>HTML Attributes</this></that> <this><that>HTML Attributes</that></this>

  12. HTML Elements • 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

  13. HTML Elements • 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>

  14. HTML Attributes • Specified in the start tag of HTML element • Attributes come in name/value pairs like: name="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>

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

  16. HTML Document Head & Body <html> <head> <title> My Online Page </title> </head> <body> Programming is Fun! </body> </html>

  17. HTML Document Head & Body <html> <head> </head> <body> </body> </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.

  18. HTML Document Head & Body <html> <head> </head> <body> </body> </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.

  19. HTML Characters References | Entities It includes mathematical symbols, Greek characters, various arrows, technical symbols and shapes.

  20. Basic HTML Tags

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

  22. Basic HTML Tags • Paragraphs • Defined with <p> tag <p>This is paragraph 1</p> <p>This is paragraph 2</p>

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

  24. HTML Comments • 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 <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>

  25. 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="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>

  26. HTML Text Formatting

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

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

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

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

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

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

  33. Lets Test Your Skills Open a new notepad. Write down the html tags in order to display the following text format in a web page.

  34. HTML Lists

  35. 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>Humpty Dumpty</li> <li>HickeryDickery</li> </ul> </body> </html>

  36. HTML Lists • Ordered List • <ol> tag is used to create ordered list in HTML <html> <head> <title>Unordered List</title> </head> <body> <h2>Unordered List:</h2> <ol> <li>Humpty Dumpty</li> <li>HickeryDickery</li> </ol> </body> </html>

  37. HTML Lists Nested List <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> <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>

  38. Lets Test Your Skills Open a new notepad. Write down the html tags in order to display the following bullet & text format.

  39. Fonts 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>

  40. Fonts We can change the fontsizetoo... It's pretty easy! • Specify the sizeattributes • Fonts come in 7 sizes: <font size="2"> Font with size 2 </font>

  41. Fonts We can also change the fonttypetoo... It's pretty easy! -specify the face attributes - some common fonts that are on *most* computers and are pretty safe bets. Arial Arial BlackArial Narrow Bookman Old StyleCentury GothicComic Sans MSCourier NewGeorgia ImpactLucida ConsoleTahoma Times New RomanTrebuchet MS Verdana <font face="impact"> Impact </font> <font face="georgia"> Georgia </font>

  42. Fonts We can also change the fontcolortoo... It's pretty easy! -specify the color attributes <font color="red"> Dazzling RED </font> <font color="#999ccc"> Crazy Blue </font>

  43. HTML Color 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

  44. Fonts Remember!!! A <tag> tells the browser to do something An attribute goes inside the <tag> and tells the browser how to do it. Defaults default valueis 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.

  45. Fonts • 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. 

  46. Cascading 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 |

  47. Alignment • <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 <center><h1> How to Carve Wood </h1></center> Deprecated example: <H1 align="center"> How to Carve Wood </H1> Solution example: Better Solution CSS: http://www.w3.org/TR/html4/present/graphics.html

  48. Fonts • 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)

  50. 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.facebook.com/">Sign in Facebook</a> <a href=“my_hometown.asp“>HOMETOWN</a>

More Related