1. Introduction to HTML- Basics
Outline
1 Introduction
2 Editing HTML
3 First HTML Example
4 W3C HTML Validation Service
5 Headers
6 Linking
7 Images
8 Special Characters and More Line Breaks
9 Unordered Lists
Nested and Ordered Lists
Meta Elements
Web Resources

2. In this chapter, you will learn:
Objectives
In this chapter, you will learn:
To understand important components of HTML documents.
To use HTML to create Web pages.
To be able to add images to Web pages.
To understand how to create and use hyperlinks to navigate Web pages.
To be able to mark up lists of information.
To be able to send Web page information to search engines

3. HyperText Markup Language
1  Introduction
HyperText Markup Language
HTML
A markup language
Separation of the presentation of a document from the structure of the document’s information
Based on HTML
Technology of the World Wide Web Consortium (W3C)

4. 2 Editing HTML HTML documents Source-code form
Text editor (e.g. Notepad, Wordpad, emacs, etc.)
Text Authoring tool (FrontPage, DreamWeaver, etc.)
.html or .htm file-name extension
Web server
Stores HTML documents
Web browser
Requests HTML documents

5. 3 First HTML Example HTML comments
Start with <!-- and end with --> You can ignore lines 1-3 for the following program. They are only some specs about XHTML (Extensible HTML, an advanced version of HTML)
html element
head element
Head section
Title of the document
Style sheets and scripts
body element
Body section
Page’s content the browser displays
Start tag
attributes (provide additional information about an element)
name and value (separated by an equal sign)
End tag

6. main.html (1 of 1)

7. 4 W3C HTML Validation Service
Validation service ( validator.w3.org )
Checking a document’s syntax
URL that specifies the location of the file
Uploading a file to the site validator.w3.org/file-upload.html

8. 4 W3C HTML Validation Service

9. 4 W3C XHTML Validation Service

10. Six headers ( header elements)
h1 through h6

11. header.html (1 of 1)

13. 6 Linking Hyperlink <strong> tag
References other sources such as HTML documents and images
Both text and images can act as hyperlinks
Created using the a (anchor) element
Attribute href
Specifies the location of a linked resource
Link to addresses using mailto: URL
<strong> tag
Bold

14. links.html (1 of 2)

15. links.html (2 of 2)

16. contact.html (1 of 1)

18. Internal Linking
Enables the user to jump between locations in the same document

19. links.html (1 of 3)

20. links.html (2 of 3)

21. links.html (3 of 3)

23. picture.html (1 of 1)

24. 7 Images Three most popular formats Pixels (“picture elements”)
Graphics Interchange Format (GIF)
Joint Photographic Experts Group (JPEG)
Portable Network Graphics (PNG)
img element
src attribute
Specifies the location of the image file
width and height
Pixels (“picture elements”)
Empty elements
Terminated by character / inside the closing right angle bracket (>), or by explicitly including the end tag
br element
Line break

26. nav.html (1 of 2)

27. nav.html (2 of 2)

29. 8 Special Characters and More Line Breaks
Character entity references (in the form &code;)
Numeric character references (e.g. &)
del
Strike-out text
sup
Superscript text
sub
Subscript text
<hr />
Horizontal rule (horizontal line)

30. contact2.html (1 of 2)

31. contact2.html (2 of 2)

33. Unordered list element ul
9  Unordered Lists
Unordered list element ul
Creates a list in which each item begins with a bullet symbol (called a disc)
li (list item)
Entry in an unordered list

34. links2.html (1 of 2)

35. links2.html (2 of 2)

36. 10 Nested and Ordered Lists
Represent hierarchical relationships
Ordered lists (ol)
Creates a list in which each item begins with a number

37. list.html (1 of 3)

38. list.html (2 of 3)

39. list.html (3 of 3)

41. Specify information about a document
11 meta Elements
Specify information about a document
Attribute name
Identifies the type of meta element
“keywords” ( name = “keywords” )
Provides search engines with a list of words that describe a page
“description” ( name = “description” )
Provides a description of a site
Attribute content
Provides the information search engine use to catalog pages

42. main.html (1 of 2)

43. main.html (2 of 2)

44. 12 Web Resources www.w3.org/TR/xhtml11 www.xhtml.org
validator.w3.org
hotwired.lycos.com/webmonkey/00/50/index2a.html
wdvl.com/Authoring/Languages/XML/XHTML