Embed Size (px)
Citation preview
Lecture: Web Design
Assis. Prof. Freshta Hanif EhsanFaculty of Computer ScienceKabul Polytechnic University
Spring Semester - 1390
2
HTML is a language for describing web pages.
HTML stands for Hypertext Markup LanguageAn HTML file is a text file containing small markup tagsThe markup tags tell the web browser how to display the pageAn HTML file must have an htm or html file extensionAn 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
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like <html>HTML tags normally come in pairs like <b> and </b>The first tag in a pair is the start tag, the second tag is the end tagThe text between the start and end tags is the element contentHTML tags are not case sensitive, <b> means the same as <B>
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:
<html> <body> <h1>My First Heading</h1> <p>My first paragraph</p> </body> </html>
HTML documents describe web pagesHTML documents contain HTML tags and plain textHTML 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.
Start tag Element Content End tag
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />
6
An HTML element starts with a start tag / opening tagAn HTML element ends with an end tag / closing tagThe element content is everything between the start and the end tagSome HTML elements have empty contentEmpty elements are closed in the start tagMost HTML elements can have attributes.
HTML elements with no content are called empty elements.<br> is an empty element without a closing tag (the <br>
tag defines a line break).
8
Attributes provide additional information about HTML elements.
HTML elements can have attributesAttributes provide additional information about the elementAttributes are always specified in the start tagAttributes come in name/value pairs like: name="value“
Example: <body bgcolor=“green”>
9
HTML headings are defined with the <h1> to <h6> tags.<h1> defines the largest heading and the <h6> defines the smallest heading.
Example:
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>...
10
HTML paragraphs are defined with the <p> tag.Browsers automatically add an empty line before and after paragraphs.
Example:
<p>This is a paragraph</p><p>This is another paragraph</p>
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 <em> tag.
11
12
<html> <head> <title>My first webpage!</title> </head> <body> <h2 align="center">Welcome to my first webpage!</h2> <p>This is your text paragraph.</p> <p>This is the <b>second paragraph</b> of my page.</p> </body></html>
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
You can see the following code with bad HTML, still it will just look fine in the browser.
<html><head><title>This is bad HTML</title><body><h1>Bad HTML<p>This is a paragraph</body>
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
XHTML elements must
be properly nestedalways be closedbe in lowercasehave one root element
17
Attribute names must be in lower caseAttribute values must be quotedAttribute minimization is forbiddenThe id attribute replaces the name attributeThe XHTML DTD (Document Type Definitions) defines mandatory elements
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.For example, <p align="left"> and <center> will validate in transitional, but not in strict mode since the align attribute and the <center> element are both deprecated.
