Web engineering: Lecture 5, 6 - Majid Mumtaz

This lecture introduce HTML – Hypertext Markup Language. Upon completion of this lesson, the successful participant will be able to: Components of HTML, HTML 4.01, difference between HTML 4.01 and HTML 5,...and another content.
Nội dung trích xuất từ tài liệu:
Web engineering: Lecture 5, 6 - Majid Mumtaz Web Engineering Lecture 5-6 MAJID MUMTAZ Department of Computer Science, CIIT Wah 1 HTML – Hypertext Markup Language Components of HTML • HTML document composed in two components – Tags and – Attributes • Both are work togather to identify different document parts and tell the browser how to display them. E.g. A Tag specify a chunk of information be displayed as a paragraph or something else. Whereas attributes are optional part of tags specify information or more thoroughly explains about a particular tag e.g. Color, aligenment, width and height etc. 2 HTML – Hypertext Markup Language (cont.) First Web Page Head Tag HTML Tag Body Tag 3 “Hello World!” in HTML 4.01 style Hello World! HTML Hello World! 4 DOCTYPE: difference between HTML 4.01 and HTML 5 There are three different declarations in HTML 4.01. In HTML 5 there is only one: i.e. HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. 5 DOCTYPE: difference between HTML 4.01 and HTML 5 • HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. 6 DOCTYPE: difference between HTML 4.01 and HTML 5 • HTML 4.01 Frameset This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content. 7 HTML – Hypertext Markup Language (cont.) • Head Tag: container of the other elements, including Title, Scripts, stylesheet (CSS), meta tag information etc. – ... – Body { background-color:yellow;} P{ color:blue;} – – Meta tags provides metadata about the HTML document. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. • • • • HTML – Hypertext Markup Language (cont.) • HTML Lists : common HTML lists are ordered and unordered lists: – An Unordered List Coffee • Coffee Milk • Milk Tea • Tea – An Ordered List Coffee 1. Coffee Milk 2. Milk Milk 3. Tea 9 HTML – Hypertext Markup Language (cont.) • Description Lists () • Coffee Coffee - black hot drink - black hot drink Milk Milk - white cold drink - white cold drink 10 HTML – Hypertext Markup Language (cont.) • Block Elements: Elements are defined as block level elements or as inline elements. – Block level elements normally start (and end) with a new line when displayed in a browser. Examples: , , , , – Inline elements are normally displayed without starting a new line. Examples: , , , , 11 HTML – Hypertext Markup Language (cont.) • The HTML Element: block level element that can be used as a container for grouping other HTML elements. Its block level element, the browser will display a line break before and after it. • element can be used to set style attributes to large blocks of content, element is not a recommended usage of layout content. Div is good option to design layout elements Align attribute ->left right center justify 12 HTML – Hypertext Markup Language (cont.) • The HTML Element element is an inline element that can be used as a container for text. the element can be used to set style attributes to parts of the text. Example: My mother has blue eyes. • Output: My mother has blue eyes. 13 Inline elements Emphasis; the content has some importance. Strong emphasis; the content is very important. Abbreviation of a term in the content. The content is an example of computer code. ... Inline quotation. ... Superscript; reduce the size and raise the content. ... Subscript; reduce the size and lower the content. ... Deleted text in edited document Increases the font size somewhat. Decreases the font size somewhat. 14 HTML – Hypertext Markup Language (cont.) Header of Web Page Menu About Me Research Work Downloads Contact Me Content goes here Copyright © mydomain.com 15 HTML – Hypertext Markup Language (cont.) 16 HTML – Hypertext Markup Language (cont.) • HTML Tables – Tables are defined with the tag. – A table is divided into rows with the tag. (tr stands for table row) – A row is divided into data cells with the tag. (td stands for table data) – A row can also be divided into headings with the tag. (th stands for table heading) – The ...