topic 02 : introduction to (x)html
Post on 11-Sep-2014
363 views
DESCRIPTION
TRANSCRIPT
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. Bold <b>...............</b> / <strong>..............</strong>
2. Italic <i>................</i> / <em>..................</em>
3. Underlined <u>..................</u>
4. Superscript <sup> ………</sup>
5. 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 character entity.
Character Entities
Result Description Entity Name
< less than <
> greater than >
& ampersand &
¢ cent ¢
£ pound £
€ euro €
© copyright ©
® registered trademark ®
™ trademark ™
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
http://www.pradipkharbuja.com.np/blog/
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 declaration2. the root element3. 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 re-written 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: http://tinyurl.com/5n5xq
• 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 http://validator.w3.org/
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: http://www.w3.org/2010/04/xhtml10-strict.html
• http://www.w3schools.com/html/html_entities.asp