intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

Web engineering: Lecture 5, 6 - Majid Mumtaz

Chia sẻ: You You | Ngày: | Loại File: PDF | Số trang:18

53
lượt xem
3
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:
Lưu

Nội dung Text: Web engineering: Lecture 5, 6 - Majid Mumtaz

  1. Web Engineering Lecture 5-6 MAJID MUMTAZ Department of Computer Science, CIIT Wah 1
  2. 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
  3. HTML – Hypertext Markup Language (cont.) First Web Page Head Tag HTML Tag Body Tag 3
  4. “Hello World!” in HTML 4.01 style Hello World! HTML Hello World! 4
  5. 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
  6. 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
  7. 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
  8. 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. • • • •
  9. 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
  10. HTML – Hypertext Markup Language (cont.) • Description Lists () • Coffee Coffee - black hot drink - black hot drink Milk Milk - white cold drink - white cold drink 10
  11. 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
  12. 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
  13. 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
  14. 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
  15. HTML – Hypertext Markup Language (cont.) Header of Web Page Menu About Me Research Work Downloads Contact Me Content goes here Copyright © mydomain.com 15
  16. HTML – Hypertext Markup Language (cont.) 16
  17. 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 elements are the data containers in the table. – The elements can contain all sorts of HTML elements like text, images, lists, other tables, etc. 17
  18. Questions 18
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
19=>1