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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Topic 02 : Introduction to (X)HTML

286
views

Published on

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
286
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Topic 2: Introduction to (X)HTML Er. Pradip Kharbuja
  • 2. 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.
  • 3. 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.
  • 4. 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.
  • 5. My First HTML
  • 6. My First HTML - Output
  • 7. 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:- .
  • 8. 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.
  • 9. 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>
  • 10. Text Styles
  • 11. Text Styles - Output
  • 12. Line Breaks (<br/>)
  • 13. 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.
  • 14. 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
  • 15. Paragraph Break - Output
  • 16. 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.
  • 17. Block Elements - Heading
  • 18. Inline Elements • Inline elements are used to markup small portions of text. • Inline elements must always be nested inside a block level element.
  • 19. ‘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!
  • 20. 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.
  • 21. 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;
  • 22. 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.
  • 23. 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
  • 24. List 2. Ordered List
  • 25. Nesting the List
  • 26. 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/
  • 27. 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.
  • 28. Document Structure Four parts in document structure : 1. document type declaration 2. the root element 3. the head section and 4. the body section.
  • 29. 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.
  • 30. 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
  • 31. 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.
  • 32. 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
  • 33. 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.
  • 34. 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/
  • 35. Why Validate? • Validating web pages checks we are using web standards. • Accessibility • Support standards compliant browsers • Support a range of devices
  • 36. Any Questions??? Topic 2 : Introduction to (X)HTML
  • 37. 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