Topic 02 : Introduction to (X)HTML
Upcoming SlideShare
Loading in...5
×
 

Topic 02 : Introduction to (X)HTML

on

  • 370 views

 

Statistics

Views

Total Views
370
Views on SlideShare
321
Embed Views
49

Actions

Likes
0
Downloads
18
Comments
0

1 Embed 49

http://www.pradipkharbuja.com.np 49

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Topic 02 : Introduction to (X)HTML Topic 02 : Introduction to (X)HTML Presentation 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. 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 @ college.pradip@gmail.com 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 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: 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