Scribd
Upload
9 views

HTML Basic Tags

Uploaded by

ethioawashmedia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

HTML Basic Tags

Uploaded by

ethioawashmedia
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

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 &nbsp; instead of a normal space.

<!DOCTYPE...>
<html>
<head>
<title></title>
</head>

<body>
<p>Here is the phrase "12&nbsp;Angry&nbsp;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>

You might also like