Chapter-8 Creating Web Pages using HTML5
HTML stands for Hypertext Mark-up
language. It is a complete code package that
allows the user to create web pages that contain
both text and graphics. To work with HTML we
need two basic tools:
1. HTML Editor- for creating and saving the
documents. Example-Notepad
2. Browser- for viewing the documents. Example-
Internet Explorer, Google Chrome ,etc..
Creating an HTML document
<html>
<head>
<title>My HTML Document</title>
</head>
<body>
Hello, World!
</body>
</html>
In this example, we have an HTML document structure that includes a an opening <html> tag,
and closing </html> tag. Inside the <html> tags, we have the <head> and <body> sections
Within the <head> section, we have a <title> element that sets the title of the document,
which appears in the browser's title bar or tab. Inside the <body> section, we can add various
elements. In this code, it contains the text “Hello, World”.
This is just a simple example to get you started. You can add more elements and styles to
customize your HTML document further.
Tags, Elements and Attributes
In HTML (Hypertext Markup Language)- tags, elements, and attributes
are the building blocks used to structure and define the content and
presentation of a web page. Here's a brief explanation of each:
Tags
Tags are the building blocks of a web page. They contain elements
which define how the information on a web page is formatted or
displayed. Tags do not appear in the browser window but they
affect the display of the text and non-text items in it.
Elements
An HTML element is consisting of an ON tag and OFF tag. These can be categorized as
1. Container Elements - The elements that include both on and
off tags are called container elements.
For example, the <b> tag.
2. Empty Elements- Empty elements have only on tags. They do
not have off tags. These elements do not
enclose any data; instead they perform
some function on their own. For example,
the <br> tag.
Attribute
An Attribute is the property that provides additional information
about an HTML element. It enhances the functionality of a tag. An
attribute is always specified inside the opening tag.
Important tags in HTML
Headings in HTML are used to define the hierarchy and structure of a page's content.
There are six levels of headings in HTML, starting from h1 as the most important (largest)
heading and ending with h6 as the least important (smallest) heading.
Here is an example of how to use HTML headings:
<html> OUTPUT
<head>
<title>Headings in HTML</title>
</head> Heading 1
<body>
<h1>Heading 1</h1> Heading 2
<h2>Heading 2</h2>
<h3>Heading 3</h3> Heading 3
<h4>Heading 4</h4>
<h5>Heading 5</h5> Heading 4
<h6>Heading 6</h6>
</body>
Heading 5
</html> Heading 6
In HTML, the <p> element is used to define a paragraph of text.
Here is an example of how to use HTML paragraph:
<html>
<head>
<title>Document Title</title>
</head>
<body>
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text</p>
</body>
</html>
Line Break Element
In HTML, the <br> tag splits the line and displays the text
on a new line. It is like an enter key on keyboard.
It is an empty tag, which means it does not require a closing
tag.
Here's an example of how you can use the <br> tag:
<p>This is the first line.<br>
This is the second line.</p>
In this example, the text "This is the first line" will be followed by a
line break, and then the text “.This is the second line" will appear on
a new line.
zontal rule
TML, the <hr> tag is used to insert a horizontal rule or line into the
ument. It draws a horizontal line across the page.
<hr> tag is an empty tag, which means it doesn't require a closing t
e's the basic syntax:
>
In HTML, the comment tag is used to insert comments within the
code that are ignored by the browser when rendering the webpage. It's a
way to add notes or explanations to the HTML code for developers or
future reference.
The comment tag in HTML is represented by the following syntax:
<!-- Your comment goes here -->
Anything placed between <!-- and --> will be treated as a comment and will
not be displayed on the webpage. This allows you to add information, instructions, or
reminders within your HTML code without affecting the rendered output.
Bold, Italic, Underline
To apply bold, italic, and underline styles to text in HTML, you can use the following tags:
1.Bold: To make the text bold, you can use the <b> tags. Here's an example:
<b>This text is bold.</b>
2. Italic: To make the text italic, you can use the <i> tags. Here's an example
<i>This text is italic.</i>
3. Underline: To underline the text, you can use the <u> tag. Here's an example
<u>This text is underlined.</u>
Text Properties
HTML allows you to set the text style with help of the following properties:
*Color *Font *size
Text Color
This property is used to set the colour of the text.
Syntax:
color: value, where value = color/RGB color code
For example:<p style=”color:red”>Text colour is red.</p>
Text Font
This property is used to set the font of the text.
Syntax:
font-family: value, where value = name of the font.
For example:<p style=”font-family: Times New Roman”>Text font is Times New Roman.</p>
Text Size
This property is used to set the size of the text.
Syntax:
font-size: value, where value = size in pixels.
For example:<p style=”font-size:50px”>Text font size is 50px</p>
Example: Write a program to create a webpage about your school, using text properties.
<html>
<head>
<title>My school</title>
</head>
<body ><u>
Text properties - Text color, Text Font and Text Size</u>
<p style="color:red"> ABU DHABI INDIAN SCHOOL BRANCH 1,AL WATHBA</p>
<p style="font-family:Chiller"> Website: www.adiswathba.com</p>
<p style="font-size:50px">Email: info@adiswathba.com </p>
</body>
</html>
Write a program to create a web page about UAE.
<html>
<head>
<title> UAE</title>
</head>
<body>
<h1> UAE </h1>
<P>The United Arab Emirates (UAE) is situated in the Southeast of the Arabian Peninsula, bordering Oman and Saudi
Arabia. In December 1971, the UAE became a federation of six emirates - Abu Dhabi, Dubai, Sharjah, Ajman, Umm Al-
Quwain, and Fujairah, while the seventh emirate, Ras Al Khaimah, joined the federation in 1972.</p>
<hr>
<!-- Emirates of UAE-->
<h2> <b> <i> <u> Emirates of UAE </u> </i> <b> </h2>
<br> Abu Dhabi
<br> Dubai
<br> Sharjah
<br> Ajman
<br> Umm Al-Quwain
<br> Fujairah
<br> Ras Al Khaimah
</body>
</html>
Thank you…..
