1. Lecture: Web Design Assis. Prof. Freshta Hanif Ehsan Faculty of Computer Science Kabul Polytechnic University Spring Semester - 1390

2. 2 HTML is a language for describing web pages. HTML stands for Hypertext Markup Language An HTML file is a text file containing small markup tags The markup tags tell the web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor  TextPad (windows)  TextMate( Mac)  Note: Adding descriptive tags to a text document is known as “marking up” the document.

3. 3 HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, means the same as

4. 4 The purpose of a web browser is to read HTML documents and display them as web pages. Tags in the HTML document gives the browser instructions for how the text is to be handled and where the images should be placed. Example: My First Heading My first paragraph

5. HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages 5 HTML documents are defined by HTML elements. An HTML element is everything from the start tag to the end tag.

6. 6 An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes.

7. HTML elements with no content are called empty elements. is an empty element without a closing tag (the tag defines a line break).

8. 8 Attributes provide additional information about HTML elements. HTML elements can have attributes Attributes provide additional information about the element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value“ Example:

9. 9 HTML headings are defined with the to tags. defines the largest heading and the defines the smallest heading. Example: This is a heading...

10. 10 HTML paragraphs are defined with the tag. Browsers automatically add an empty line before and after paragraphs. Example: This is a paragraph This is another paragraph

11. block-level element begins on a new line, and some space is also usually added above and below the entire element by default. Inline elements does not start a new line like tag. 11

12. 12 My first webpage! Welcome to my first webpage! This is your text paragraph. This is the second paragraph of my page.

13. 13 XHTML is a stricter and cleaner version of HTML. XHTML is a combination of HTML and XML (EXtensible Markup Language). XHTML consists of all the elements in HTML 4.01, combined with the strict syntax of XML.

14. 14 You can see the following code with bad HTML, still it will just look fine in the browser. This is bad HTML Bad HTML This is a paragraph

15. 15 Today's market consists of different browser technologies, some browsers run on computers, and some browsers run on mobile phones or other small devices. The last-mentioned do not have the resources or power to interpret a "bad" markup language. Therefore – XHTML is strongly recommended.

16. 16 XHTML elements must be properly nested always be closed be in lowercase have one root element

17. 17 Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The id attribute replaces the name attribute The XHTML DTD (Document Type Definitions) defines mandatory elements

18. The difference between strict and transitional XHTML: Transitional is a forgiving form of doctype.While you must code cleanly — properly nested lowercase tags — transitional allows deprecated elements and attributes to pass validation. The strict doctype is strict: deprecated elements and attributes will fail to validate under a strict doctype and may well display incorrectly as well.deprecated elements and attributesdeprecated elements and attributes  For example, and will validate in transitional, but not in strict mode since the align attribute and the element are both deprecated.