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

Related pages

Introduction to HTML - W3Schools Online Web Tutorials

HTML Introduction « Previous. Next Chapter ...
Read more

HTML and XHTML - W3Schools Online Web Tutorials

HTML HOME HTML Introduction HTML Editors HTML Basic ... What Is XHTML? XHTML stands for EXtensible H ... By combining the strengths of HTML and XML, XHTML ...
Read more

98.07.02: The Population Explosion: Causes and Consequences

Contents of Curriculum Unit 98.07.02: Introduction; ... INTRODUCTION The rapid growth of ... The end of the population explosion worldwide will be ...
Read more

81.02.06: The Industrial Revolution - Yale University

Bibliography for Teachers: Ashton, T. S. The Industrial Revolution. London: Oxford University Press, 1969. Chambers, J. D. The Workshop of the World.
Read more

VRML 2.0 Sourcebook X3D Examples Archive, Chapter 02 ...

... VRML 2.0 Sourcebook, Chapter 02 - Introduction. ... Online at
Read more

A Long Walk to Water: Introduction

We are currently reading the book A Long Walk to Water by Linda Sue Park, which is based on a true story. ... Introduction; Watermark template.
Read more

Introduction to Research Design and Statistics - Phil Ender

Introduction to Research Design and Statistics Research Designs. Pre-Experimental Designs 1. ... One-Group Pretest-Posttest Design O1 X O2 3.
Read more

X3D Example Archives: VRML 2.0 Sourcebook, Chapter 02 ...

... Chapter 02 - Introduction. ... Introduction to VRML97 ... examples/Vrml2.0Sourcebook/Chapter02-Introduction/viewpointSlideshow.html.
Read more

IELTS Writing Task 2: short, clear introduction - ielts ...

... I want to focus on the introduction that Peter wrote: ... Sorry for digressing the topic, ... Kim | Monday, February 17, 2014 at 02:16.
Read more

87.05.02: An Introduction to Mathematical Probability

An Introduction to Mathematical Probability. by ... Contents of Curriculum Unit 87.05.02: Introduction; ... The product of the number 4 x 3 x 2 x 1 = 4! = 24.
Read more