Unit 2.3 Part 1
18
Unit 3 – Basic Tags in HTML Presentation 1 Web Programming
-
Upload
intan-jameel -
Category
Technology
-
view
385 -
download
4
description
Transcript of Unit 2.3 Part 1
Unit 3 – Basic Tags in HTML
Presentation 1
Web Programming
Revision
1. Give the expansion of HTML?
2. List the steps to be followed while correcting the errors in a HTML document?
3. List the steps to be followed in creating a virtual directory.
4. Define the term Tag.
Objectives
At the end of this presentation, you will be able to
• Add headings to your Web page
• Align text as paragraphs in Web pages
• Add blank lines to your Web page
• Make your HTML code readable by adding comments
Hands-on!
• Open the HTML file Heading.HTML in C:\HTML\Unit 2.3\Hands On Folder.
Web page shown is displayed.
Headings Tag
• <H1>, <H2>, <H3> <H4>, <H5> and <H6> are the heading tags.
• <H1> displays text in big size and <H6> in small size.
• ALIGN attribute Aligns the heading in the Browser window.
• Values for the ALIGN attribute can be Left, Right
or Center.
Eg. <H1 Align=”Left”> The Puzzle </H1>.
Lab Exercise
1. Open D3_1.html in Internet Explorer. a. View the Source code in Notepad.b. Identify the tag, which is used to display Heading 1 in the source code
D3_1.html c. Identify the attribute used to display the Heading Tag with centre
alignment.d. Find out the tag, which is used to display Heading 4 in the source code of
D3_1.html.
Lab Exercise
2. Open D3_1.html in Internet Explorer. a. View the source code in Notepad.b. Change the style of Heading 1 from <H1> to <H3>.c. Change the alignment of Heading 2 to centre align. d. Change the alignment of Heading 3 to right align. e. Save the source code file and refresh the Web page.
Lab Exercise
3. Write HTML code to display the output as given in the following figure using the <HEAD> tag.
Lab Exercise
4. Open Welcome.html you have created in the previous unit, add <HEAD> tag into the file and display the output as given in the following figure. Save the file and view the output in the browser.
Paragraph Tag
• <P> tag is used for creating paragraphs.
• The Align attribute is used to change the paragraph alignment.
• The values of Align attribute can be Left, Right, Center or Justify.
Lab Exercise
5. Open D3_2.html in Internet Explorer a. View the source code in Notepad.b. Identify the tag which is used to create
paragraph?c. Identify and list the different values given for
the align attribute in the HTML document.
Lab Exercise
6. Write a HTML code to display the output as given in the following figure using <P> tag.
Lab Exercise
7. Open Welcome.html, add <P> tag into the file and display the output as given in the following figure. Save the file and view the output in the browser.
Hands-On!
• Open the HTML file Break1.HTML in C:\HTML\Unit 2.3\ Hands On Folder.
• The output is shown below:
Line Breaks
• <BR> tag is used to insert the line breaks.• <BR> tag does not have any end tag.• Web page using <BR> tag is shown below:
Comments
• Used to improve the readability • Used to identify the errors in case of lengthy
source codes • Should be enclosed within the <!-- and -->
symbols • Example:
<!-- The following code displays the content using <P> tag -->
Summary
In this presentation, you learnt the following:• The tags <H1>, <H2>, <H3> <H4>, <H5> and
<H6> are the heading tags.• <P> tag is used for creating paragraphs.• <BR> tag can be used to insert the line
breaks.• The comment should be enclosed within the
<!-- and --> symbols.
Assignment
1. Name the attribute used to change the alignment of a paragraph?
2. Write the use of <BR> tag?
3. Give the purpose of adding comments?
