Basic HTML Document
<!DOCTYPE html>
<html>
<head>
<title> Web and Database Level I </title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
save it in an HTML file test.html
HTML Tags
<!DOCTYPE...>
<html>
<head>
<title>
<body>
<h1>
<p>
HTML Basic Tags
A. Heading Tags
HTML provides six levels of headings, from <h1> (largest) to <h6> (smallest), to structure the
content hierarchy. Headings add line breaks automatically before and after the text.
<!DOCTYPE...>
<html>
<head>
<title></title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>
B. Paragraph Tag
The <p> tag is used to define paragraphs, creating space around blocks of text.
<!DOCTYPE...>
<html>
<head>
<title></title>
</head>
<body>
<p>This is a paragraph of text.</p>
<p>This is another paragraph.</p>
</body>
</html>
C. Line Break Tag
The <br /> tag is an empty element that inserts a line break. It does not require a closing tag.
<!DOCTYPE...>
<html>
<head>
<title></title>
</head>
<body>
<p>This is a paragraph of text.</p><br />
<p>This is another paragraph.</p>
</body>
</html>
D. Horizontal Line Tag
The <hr /> tag creates a horizontal line that visually separates sections of content.
<!DOCTYPE...>
<html>
<head>
<title></title>
</head>
<body>
<p>This is some content.</p>
<hr />
<p>This is content after the horizontal line.</p>
</body>
</html>
E. Preformatted Text Tag
The <pre> tag preserves whitespace and line breaks, displaying text exactly as it appears in the
HTML source.
<!DOCTYPE...>
<html>
<head>
<title></title>
</head>
<body>
<pre>
This text
will keep
its formatting.
</pre>
</body>
</html>
F. Nonbreaking Space
To prevent text from breaking at spaces, use instead of a normal space.
<!DOCTYPE...>
<html>
<head>
<title></title>
</head>
<body>
<p>Here is the phrase "12 Angry Men" without line breaks between
words.</p>
</body>
</html>
G. HTML Comments
Comments in HTML, enclosed within <!-- ... -->, are ignored by the browser and don’t
appear on the page. Comments help in organizing and explaining the code.
Single-line comment:
<!DOCTYPE...>
<html>
<head>
<title></title>
</head>
<body>
<p>this is paragraph one<!-- This is a single-line comment -->followed
by comment</p>
</body>
</html>
Multi-line comment:
<!DOCTYPE...>
<html>
<head>
<title></title>
</head>
<body>
<p>this is paragraph one
<!--
This is a
multi-line comment
-->
followed by comment</p>
</body>
</html>
Commenting Script and Style Code
It’s recommended to wrap JavaScript and CSS in comments for compatibility with older
browsers.
JavaScript comment:
html
Copy code
<script>
<!--
document.write("Hello World!");
//-->
</script>
Java Script Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
CSS comment:
html
Copy code
<style>
<!--
.example {
border: 1px solid #4a7d49;
}
//-->
</style>
CSS Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
</body>
</html>
1. HTML Elements
HTML elements are defined by a starting tag and, if containing content, end with a closing tag.
Some elements, called void or empty elements, don’t require a closing tag.
Examples:
<html>
<body>
<p>This is a paragraph element.</p>
<h1>This is a heading element.</h1>
<div>This is a division element.</div>
<br /> <!-- Void element -->
</body>
</html>
A. HTML Tag vs. Element
A tag defines the start or end of an element, while an element includes the start tag, content, and
end tag.
Example:
html
Copy code
<p>This is paragraph</p> <!-- <p> is a tag; <p> ... </p> is an element
-->
B. Nested HTML Elements
HTML allows elements to be nested within one another.
Example:
html
Copy code
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
2. HTML Attributes
Attributes provide additional information about HTML elements and are placed within the
opening tag. Common attributes include id, class, style, and title.
Core Attributes
1. Id Attribute: Uniquely identifies an element on the page.
html
Copy code
<p id="intro">This paragraph has a unique id.</p>
2. Title Attribute: Adds a tooltip that appears when hovering over the element.
html
Copy code
<h3 title="Hello HTML!">Hover over this heading</h3>
3. Class Attribute: Assigns the element to a specific class for CSS styling.
html
Copy code
<p class="text-primary">This text belongs to the 'text-primary'
class.</p>
4. Style Attribute: Adds inline CSS styles to the element.
html
Copy code
<p style="font-family: Arial; color: #FF0000;">Some styled text</p>
B. Internationalization Attributes
These attributes support different languages and text directions.
1. dir Attribute: Controls text direction.
html
Copy code
<html dir="rtl"> <!-- Sets document text direction to right-to-left -->
2. lang Attribute: Defines the document's language.
html
Copy code
<html lang="en"> <!-- Sets language to English -->
3. xml
Attribute: XHTML replacement for the lang attribute.
html
Copy code
<html xml:lang="en"> <!-- Sets language for XHTML documents -->
C. Generic Attributes
Attribute Options Function
align right, left, center Horizontally aligns content in elements.
valign top, middle, bottom Vertically aligns content in tables.
bgcolor numeric, hexadecimal, RGB Sets background color for an element.
background URL Sets background image for an element.
id User-defined Uniquely identifies the element for styling.
Attribute Options Function
class User-defined Assigns the element to a CSS class.
width Numeric Sets the width of elements like images or tables.
height Numeric Sets the height of elements like images or tables.
title User-defined Sets a tooltip for the element.
Example of Using Attributes:
html
Copy code
<p id="intro" class="highlight" title="Intro Text" style="color: blue;">
This is a paragraph with multiple attributes.
</p>
