Web engineering: Lecture 10 - Majid Mumtaz

This lecture introduce HTML – Hypertext Markup Language. In this lecture, you will be able to: HTML Form Fieldset Element, frameset HTML tag, HTML Iframes, HTML Colors, XHTML,...and another content. Inviting you to refer.
Nội dung trích xuất từ tài liệu:
Web engineering: Lecture 10 - Majid Mumtaz Web Engineering Lecture 10 MAJID MUMTAZ Department of Computer Science, CIIT Wah 1 HTML – Hypertext Markup Language (cont.) First Web Page Head Tag HTML Tag Body Tag 2 HTML – Hypertext Markup Language (cont.) • HTML Form Fieldset Element: Group related elements in a form: set caption for fieldset, it can be align left, right e.g. Personal Info: Name: Email: Date of birth: 3 HTML – Hypertext Markup Language (cont.) • Frameset HTML tag : The tag defines a frameset. The element holds one or more elements. Each element can hold a separate document. E.g. 4 HTML – Hypertext Markup Language (cont.) • HTML Iframes – An iframe is used to display a web page within a web page. The syntax would be – Set Height and Width • The height and width attributes are used to specify the height and width of the iframe. E.g. page1.htm 5 HTML – Hypertext Markup Language (cont.) • HTML Colors – Colors are displayed combining RED, GREEN, and BLUE light. CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). Lowest value would be light sources is 0 (hex 00). The highest value is 255 (hex FF). 6 HTML – Hypertext Markup Language (cont.) • Color Names Supported by All Browsers – 140 color names are defined in the HTML and CSS color specification (17 standard colors plus 123 more). Visit below mentioned URL’s for more detail... http://www.w3schools.com/html/html_colornames .asp • Color Values http://www.w3schools.com/html/html_colorvalues .asp 7 Useful HTML Character Entities Result Description Entity Name Entity Number non-breaking space &nbsp; &#160; < less than &lt; &#60; > greater than &gt; &#62; & ampersand &amp; &#38; ¢ cent &cent; &#162; £ pound &pound; &#163; ¥ yen &yen; &#165; € euro &euro; &#8364; © copyright &copy; &#169; ® registered trademark &reg; &#174; 8 What is XHTML • XHTML is HTML written as XML • XHTML stands for EXtensible HyperText Markup Language • XHTML is almost identical to HTML 4.01 • XHTML is a stricter and cleaner version of HTML • XHTML is HTML defined as an XML application • XHTML is supported by all major browsers. 9 Why XHTML? • Many pages on the internet contain 'bad' HTML. This is bad HTML Bad HTML This is a paragraph XML is a markup language where documents must be marked up correctly and 'well-formed'. XHTML is HTML redesigned as XML. 10 Important Differences from HTML • Document Structure – XHTML DOCTYPE is mandatory e.g. – The XML namespace attribute in is mandatory i.e. – , , , and is mandatory • XHTML Elements – XHTML elements must be properly nested – XHTML elements must always be closed – XHTML elements must be in lowercase – XHTML documents must have one root element 11 Important Differences from HTML • XHTML Attributes – Attribute names must be in lower case • E.g. • Attribute values must be quoted E.g. • Attribute minimization is forbidden – E.g. 12 How to Convert from HTML to XHTML • Add an XHTML to the first line of every page • Add an xmlns attribute to the html element of every page • Change all element names to lowercase • Close all empty elements • Change all attribute names to lowercase • Quote all attribute values • Validate XHTML With The W3C Validator 13 XHTML • The Doctype – XHTML 1.0 Strict: – XHTML 1.0 Transitional: – XHTML 1.0 Frameset: 14 Questions 15