Topic 02 : Introduction to (X)HTML

33 %
67 %
Information about Topic 02 : Introduction to (X)HTML

Published on February 17, 2014

Author: PradipKharbuja


Topic 2: Introduction to (X)HTML Er. Pradip Kharbuja

HTML • Hyper Text Markup language. • Markup refers to the sequence of characters that describes the document’s structure and how the file should look when it is printed or displayed. • HTML does not define what a page looks like! For that we have CSS. • Extension is html or htm. • Write code in any text editor (e.g. Notepad, Notepad++, Dream weaver, etc) and save as filename.html/htm • Initially, html deals with only text but now multimedia too. • Html is not a case sensitive.

HTML Tags • The markup indicators are often called "tags." • Beings with an open angle bracket (<) and ends with close angle bracket (>). • e.g. <html>, <head>, <br/>, <table>, etc. • Two types: 1. Singular Tag or Empty Elements • Tag that comes alone, no closing tag. • It doesn’t contain any content. • e.g <br />, <hr />, <img />, etc.

HTML Tags 2. Paired Tag • • • • • • • Tag that needs opening and closing tag. e.g. <h1> is opening tag. </h1> is closing tag. “Welcome to HTML” is content. Some paired tags are : <body> , <table>, <tr>, <b> , etc. Last In First Out (LIFO) concept i.e. last tag should be closed first.

My First HTML

My First HTML - Output

HTML Attributes • Additional information written immediately after the html tag separated by space is known as attributes (properties) of tag. • Attributes are written in following way : • e.g:- .

HTML Section 1. Head Section i. Title ii. Style iii. Script iv. Meta 2. Body Section • The body of HTML document contains all content that is displayed in a browser: text, images, lists, tables, and more.

Text Styles 1. 2. 3. 4. 5. Bold <b>...............</b> / <strong>..............</strong> Italic <i>................</i> / <em>..................</em> Underlined <u>..................</u> Superscript <sup> ………</sup> Subscript <sub> …………</sub>

Text Styles

Text Styles - Output

Line Breaks (<br/>)

Text Elements • There are two categories of text element: 1. Block elements • For marking up large blocks of content such as headings and paragraphs • E.g. <h1>, <h2>, <p>, <div>, etc. 2. Inline elements • For marking up individual words or phrases • E.g. <strong>, <em>, <span>, etc.

Block Element - Paragraph (<p>… </p>) • When a browser displays a paragraph, it adds a new line before the paragraph. • Paragraphs should not be nested inside other paragraphs

Paragraph Break - Output

Block Elements - Heading • There are 6 different levels of headings. <h1> to <h6>. • The highest level header format is <h1> and the lowest is <h6> i.e:- font size decreases. • All the styles appeared in bold face. • Headings shouldn’t be nested inside other headings.

Block Elements - Heading

Inline Elements • Inline elements are used to markup small portions of text. • Inline elements must always be nested inside a block level element.

‘Physical Style’ tags • HTML has <font> tag to style the text. • We can specify color, typeface, size of the text. • • • • This tag has been ‘deprecated’: Will still work in many browsers No longer in use We shouldn’t use them in our pages!

Inserting Spaces • Browsers will always truncate spaces in HTML pages. • If you write 10 spaces in your text, the browser will remove 9 of them, before displaying the page. • To add spaces to your text, you can use the &nbsp; character entity.

Character Entities Result < > Description less than greater than Entity Name &lt; &gt; & ¢ £ € ampersand cent pound euro &amp; &cent; &pound; &euro; © copyright &copy; ® ™ registered trademark trademark &reg; &trade;

List 1. Unordered List • Bulleting • <ul> … </ul> • each list starts with <li> and ends with </li> • Attribute of <ul> tag is : type. Its values can be circle, square, disc.

List 2. Ordered List • Numbering • <ol>…</ol> • each list starts with <li> and ends with </li> • Attribute of <ol> tag are a. type. It possible values are ("1", "A", "i", "I", "a") b. start

List 2. Ordered List

Nesting the List

Task #01 Last Date to Submit : 18th Jan, 2014 Send email @ with your name and batch

List 3. Definition List • The <dl> tags define the start and end of the list. • The <dt> element specifies the definition term. • The <dd> element specifies the actual definition.

Document Structure Four parts in document structure : 1. document type declaration 2. the root element 3. the head section and 4. the body section.

Document Type Declaration • The document type declaration specifies the version of HTML that the page uses. • This example specifies that the page is written using a version of HTML called XHTML 1.0 Strict.

Document Type Declaration • This is the same document rewritten as HTML 5 • Elements, tags and attributes work in exactly the same way. • Different document type declaration

Document Type Declaration • There many different versions of (X)HTML including: • HTML 4.01 • XHTML 1.0 Strict • HTML 5 (not standard yet) • XHTML is eXtensible HyperText Markup Language • It is HTML re-written to conform to the rules of XML. • It has stricter syntax than HTML.

Which Version of (X)HTML to Use? • This module is based around using XHTML 1.0 Strict. • We will also explore features of the new HTML5 specification

The Root Element • The root element <html> encloses all other elements • XMLNS attribute • This specifies the XML namespace for the page. • lang and xml:lang • These attributes specify the language used to write the document.

Valid Documents • There are many specific rules for HTML • These rules are specified in a Document Type Definition (DTD) • The XHTML Strict 1.0 DTD can be viewed at: • If an HTML document follows all the rules of the DTD, it is described as being valid. • We can check if our web pages are valid using the W3Cs validation service

Why Validate? • Validating web pages checks we are using web standards. • Accessibility • Support standards compliant browsers • Support a range of devices

Any Questions??? Topic 2 : Introduction to (X)HTML

References • XHTML 1.0 Strict Cheat Sheet • Available at: •

Add a comment

Related presentations