Index
OBJECTIVES
In this chapter you'll:
- Understand important components of html documents.
- Use html to create web pages.
- Add images to web page.
- Create and use hyperlinks to help users navigate web pages.
- Mark up lists of information.
- Create tables with rows and columns of data.
- Create and use forms to get user input.
1.1 Introduction to
HTML
HTML (HyperText Markup Language)
- markup language that specifies the structure and content of documents that are displayed in web browsers.
We introduce some basics, then cover more sophisticated HTML techniques such as:
- tables, which are particularly useful for structuring information from databases (i.e., software that stores structured sets of data).
- forms for collecting information from web-page visitors.
- internal linking for easier page navigation.
- meta elements for specifying information about a document.
1.1 Editing HTML
- We’ll create HTML documents by typing HTML markup text in a text editor (TextPad) and saving it with the .html or .htm filename extension.
- Computers called web servers store HTML documents.
- Clients (such as web browsers running on your local computer or smartphone) request specific resources such as HTML documents from web servers.
1.2 First HTML Example
Figure 1.1 is an HTML document named main.html,
This first example displays the message Welcome to HTML! in the browser.
figure 1.1: displays the message Welcome to HTML!.
The browser ignores comments when your document is rendered.
Comments start with .
A start tag consists of the element name in angle brackets
For example,
An end tag consists of the element name preceded by a forward slash (/) in angle brackets
For example,
There are several so-called “void elements” that do not have end tags.
Many start tags have attributes that provide additional information about an element, which browsers use to determine how to process the element.
Each attribute has a name and a value separated by an equals sign (=).
The head element is also a nested element, because it’s enclosed in the html element’s start and end tags.
The title element describes the web page.
Titles usually appear in the title bar at the top of the browser window, in the browser tab on which the page is displayed.
Search engines use the title for indexing purposes and when displaying results.
Paragraph Element (...
tags forms one paragraph.
1.3 W3C HTML Validation Service
2.5 Linking
- Links are created using the a (anchor) element.
- Attribute href (hypertext reference) specifies a resource’s location, such as
2.6 Images
- The most popular image formats used by web developers today are PNG (Portable Network Graphics) and JPEG (Joint Photographic Experts Group).
- Users can create images using specialized software, such as Adobe Photoshop Express (www.photoshop.com), G.I.M.P. (www.gimp.org), Inkscape (www.inkscape.org) and many more.
- Images may also be acquired from various websites, many of which offer royalty-free images.
- The img element’s src attribute specifies an image’s location.
- Every img element must have an alt attribute, which contains text that is displayed if the client cannot render the image.
- In next example, we create five different image hyperlinks.
- Clicking an image in this example takes the user to a corresponding web page—one of the other examples in this chapter.
2.7 Special Characters and Horizontal Rules
- HTML provides character entity references (in the form &code;) for representing special characters that cannot be rendered otherwise
- The code can be:
Figure 1.4 demonstrates how to use special characters in an HTML5 document.
For an extensive list of character entities, see
www.w3.org/TR/REC-html40/sgml/entities.html
- A horizontal rule, indicated by the
tag renders a horizontal line with extra space above and below it in most browsers.
The horizontal rule element should be considered a legacy element and you should avoid using it.
- CSS can be used to add horizontal rules and other formatting to documents.
- Special characters can also be represented as numeric character
references—decimal or hexadecimal (hex) values representing special characters.
1.1 Editing HTML
- We’ll create HTML documents by typing HTML markup text in a text editor (TextPad) and saving it with the .html or .htm filename extension.
- Computers called web servers store HTML documents.
- Clients (such as web browsers running on your local computer or smartphone) request specific resources such as HTML documents from web servers.
1.2 First HTML Example
Figure 1.1 is an HTML document named main.html,
This first example displays the message Welcome to HTML! in the browser.
figure 1.1: displays the message Welcome to HTML!.Comments
Insert comments in your HTML markup to improve readability and describe the content of a document.
The browser ignores comments when your document is rendered.
Comments start with .
Start Tags and End Tags
HTML documents delimit most elements with a start tag and end tag.
A start tag consists of the element name in angle brackets
For example,
An end tag consists of the element name preceded by a forward slash (/) in angle brackets
For example,
There are several so-called “void elements” that do not have end tags.
Many start tags have attributes that provide additional information about an element, which browsers use to determine how to process the element.
Each attribute has a name and a value separated by an equals sign (=).
Title Element
The title element is called a nested element, because it’s enclosed in the head element’s start and end tags.
The head element is also a nested element, because it’s enclosed in the html element’s start and end tags.
The title element describes the web page.
Titles usually appear in the title bar at the top of the browser window, in the browser tab on which the page is displayed.
Search engines use the title for indexing purposes and when displaying results.
Paragraph Element (...
)
All text placed between the and
tags forms one paragraph.
1.3 W3C HTML Validation Service
- HTML documents that are syntactically correct are guaranteed to render properly.
- HTML documents that contain syntax errors may not display properly.
1.4 Headings
- HTML provides six heading elements (h1 through h6) for specifying the relative importance of information
** Heading element h1 is considered the most significant heading and is rendered in the largest font.
** Each successive heading element (i.e., h2, h3, etc.) is rendered in a progressively smaller font.
** Heading element h1 is considered the most significant heading and is rendered in the largest font.
** Each successive heading element (i.e., h2, h3, etc.) is rendered in a progressively smaller font.
2.5 Linking
- A hyperlink references or links to other resources, such as HTML documents and images.
- Web browsers typically underline text hyperlinks and color them blue by default.
- Web browsers typically underline text hyperlinks and color them blue by default.
- Links are created using the a (anchor) element.
- Attribute href (hypertext reference) specifies a resource’s location, such as
- a web page or location within a web page.
- a file.
- an e-mail address.
- If the web server cannot locate a requested document, it returns an error indication to the web browser (known as a 404 error), and the browser displays a web page containing an error message.
Hyperlinking to an E-Mail Address
- Anchors can link to an e-mail address using a mailto: URL
- When a user clicks this type of anchored link, most browsers launch the default e-mail program (e.g., Mozilla Thunderbird, Microsoft Outlook or Apple Mail) to enable the user to write an e-mail message to the linked address.
2.6 Images
- The most popular image formats used by web developers today are PNG (Portable Network Graphics) and JPEG (Joint Photographic Experts Group).
- Users can create images using specialized software, such as Adobe Photoshop Express (www.photoshop.com), G.I.M.P. (www.gimp.org), Inkscape (www.inkscape.org) and many more.
- Images may also be acquired from various websites, many of which offer royalty-free images.
- The img element’s src attribute specifies an image’s location.
- Every img element must have an alt attribute, which contains text that is displayed if the client cannot render the image.
- The alt attribute makes web pages more accessible to users with disabilities, especially vision impairments.
- Width and height are optional attributes.
- If omitted, the browser uses the image’s actual width and height.
- Images are measured in pixels.
Using Images as Hyperlinks
- By using images as hyperlinks, you can create graphical web pages that link to other resources.
- In next example, we create five different image hyperlinks.
- Clicking an image in this example takes the user to a corresponding web page—one of the other examples in this chapter.
2.7 Special Characters and Horizontal Rules
- HTML provides character entity references (in the form &code;) for representing special characters that cannot be rendered otherwise
- The code can be:
- Word abbreviations
- Numbers
- Decimal
- Hexadecimal
Figure 1.4 demonstrates how to use special characters in an HTML5 document.
For an extensive list of character entities, see
www.w3.org/TR/REC-html40/sgml/entities.html
- A horizontal rule, indicated by the
tag renders a horizontal line with extra space above and below it in most browsers.
The horizontal rule element should be considered a legacy element and you should avoid using it.
- CSS can be used to add horizontal rules and other formatting to documents.
- Special characters can also be represented as numeric character
references—decimal or hexadecimal (hex) values representing special characters.
- For example, the & character is represented in decimal and hexadecimal notation as & and &, respectively.
The End
Good Luck
Good Luck
0 comments :
Post a Comment