HTML Headings

HTML
 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
TAGS
 The <!DOCTYPE html> declaration defines that this document is an HTML5
document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Output
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Output:
This is a paragraph.
This is another paragraph.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" width="104" height="142">
</body>
</html>
HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
<hr>
<p>This is some other text.</p>
</body>
</html>
HTML Line Breaks

The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
The <br> tag is an empty tag, which means that it has no end tag.
HTML Comment Tag

You can also hide more than one line. Everything between the  will be hidden from
the display.
<!DOCTYPE html>
<html>
<body>


<p>This is a paragraph.</p>

</body>
</html>
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href
attribute:</p>
<a href="https://www.youtube.com/ ">Visit YOUTUBE </a>
</body>
</html>
Output:
HTML Colors
Text Color
You can set the color of text:
Hello World
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">welcome</p>
<p style="color:MediumSeaGreen;">life is unexpected</p>
</body>
</html>
Output:
Color Names
In HTML, a color can be specified by using a color name:
Background Color
You can set the background color for HTML elements:
PROGRAM 1
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
PROGRAM 2
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
On the Insert tab, the galleries include items that are designed to coordinate with the overall
look of your document. You can use these galleries to insert tables, headers, footers, lists,
cover pages, and other document building blocks. When you create pictures, charts, or
diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look
for the selected text from the Quick Styles gallery on the Home tab. You can also format text
directly by using the other controls on the Home tab. Most controls offer a choice of using the
look from the current theme or using a format that you specify directly.
</p>
</body></html>
Border Color
You can set the color of borders:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
HTML Formatting Elements

Formatting elements were designed to display special types of text:
 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
 HTML <b> and <strong> Elements
 The HTML <b> element defines bold text, without any extra importance.
 The HTML <strong> element defines text with strong importance. The content inside
is typically displayed in bold.
 HTML <i> and <em> Elements
 The HTML <i> element defines a part of text in an alternate voice or mood. The
content inside is typically displayed in italic.
 The <i> tag is often used to indicate a technical term, a phrase from another language,
a thought, a ship name, etc.
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.
A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
HTML <small> Element

The HTML <small> element defines smaller text:
HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:
HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will
usually strike a line through deleted text:
HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers
will usually underline inserted text:
HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character
below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used
for chemical formulas, like H2O:
HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font. Superscript text can be
used for footnotes, like WWW[1]:
HTML Text Formatting Elements

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
Example of emphasized tag
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
 Item
 Item
 Item
 Item
An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered list</h2>
<ul>
<li>Tree</li>
<li>Plant</li>
<li>Climbers</li>
</ul>
</body>
</html>
Output:
An unordered list
 Tree
 Plant
 Climbers
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<!DOCTYPE html>
<html>
<body>
<h2>An ordered list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output:
An ordered list
1. Coffee
2. Tea
3. Milk
HTML Description Lists

HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd>
tag describes each term:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Output:
A Description List
Coffee
- black hot drink
Milk
- white cold drink
HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Tables
A table in HTML consists of table cells inside rows and columns.
Table Cells
Each table cell is defined by a <td> and a </td> tag.
Everything between <td> and </td> are the content of the table cell.
Table Headers
th stands for table header.
the text in <th> elements are bold and centered
HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table

<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapsed Borders</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Collapsed Borders
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80
Table exercise
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Table With Border

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80
HTML Forms
HTML Forms use the <form> tag to collect user input through various interactive controls. These
controls range from text fields, numeric inputs, and email fields to password fields, checkboxes,
radio buttons, and submit buttons.
Form Elements
The HTML <form> comprises several elements, each serving a unique purpose. For instance,
the <label> element defines labels for other <form> elements. On the other hand, the <input>
element is versatile and can be used to capture various types of input data such as text,
password, email, and more simply by altering its type attribute.
Elements Descriptions
<label> It defines labels for <form> elements.
It is used to get input data from the form in various types such as text, password, email,
<input>
etc by changing its type.
<button> It defines a clickable button to control other elements or execute a functionality.
<select> It is used to create a drop-down list.
<textarea> It is used to get input long text content.
<fieldset> It is used to draw a box around other form elements and group the related data.
<legend> It defines a caption for fieldset elements
<datalist> It is used to specify pre-defined list options for input controls.
<output> It displays the output of performed calculations.
<option> It is used to define options in a drop-down list.
<optgroup> It is used to define group-related options in a drop-down list.

Elements Descriptions
Commonly Used Input Types in HTML Forms

In HTML forms, various input types are used to collect different types of data from users.
Here are some commonly used input types:
Input Type Description

<input type=”text”> Defines a one-line text input field
<input
Defines a password field
type=”password”>
<input type=”submit”> Defines a submit button
<input type=”reset”> Defines a reset button
<input type=”radio”> Defines a radio button
<input type=”email”> Validates that the input is a valid email address.
Allows the user to enter a number. You can specify min, max, and
<input type=”number”>
step attributes for range.
<input
Used for checkboxes where the user can select multiple options.
type=”checkbox”>
<input type=”date”> Allows the user to select a date from a calendar.
<input type=”time”> Allows the user to select a time.
<input type=”file”> Allows the user to select a file to upload.
The <form> Element

The HTML <form> element is used to create an HTML form for user input:
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
The <input> Element

The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields
The <input type="text"> defines a single-line input field for text input.
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="name">Last name:</label><br>
<input type="text" id="name" name="name" value="Doe">
<p>Choose your favorite Web language:</p>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>
MICROSOFT VISUAL BASIC 6.0

Visual Basic 6.0 (VB6) is a programming language that allows users to develop graphical
user interface (GUI) applications, access databases, and create ActiveX controls. It's
considered one of the most widely used programming languages in the world.
Here are some features of Visual Basic 6.0:
Event-driven: Code is written to perform tasks in response to specific events
RAD: Visual Basic 6.0 uses a Rapid Application Development (RAD) approach that
emphasizes speed and ease of software development
Easy to learn: Visual Basic 6.0 is considered easier to learn than other programming
languages like C++, C#, and Java
Graphical user interface: Users can drag and drop controls to work with instead of
writing code
Simple syntax: Visual Basic 6.0 uses a simple syntax that incorporates some common
English words
Microsoft released Visual Basic 6.0 in 1998 as the last version of Visual Basic. It's still
widely taught and learned today.
Visual Basic features and characteristics

VB is a GUI-based development tool that offers a faster RAD than most other programming
languages. VB also features syntax that is more straightforward than other languages, a visual
environment that is easy to understand and high database connectivity.
Visual Basic was designed to be a complete programming language that contained ordinary
features, such as string processing and computation. The visual environment is characterized
by a drag-and-drop feature which allows programmers to build a user interface that is easy to
use, even for developers with minimum experience.
While these features of VB are advantageous, there are others that can have a negative effect.
The VB programming environment requires a large amount of memory, both for the initial
installation and to run efficiently afterwards. The graphical features of the programming tool
take up a large amount of space and require a significant amount of memory.
Furthermore, Visual Basic is not useful when developing programs that require a lot of
processing time, like games, and the use of VB is restricted to Microsoft operating systems
(OS).
Finally, with C languages, programmers can feasibly locate and use the defined values for
variable data in a computer program at declaration time. This initialization practice is
something that isn't easily done with VB.

HTML Headings

Uploaded by

Copyright:

Available Formats

HTML Headings

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Headings

Uploaded by

Copyright:

Available Formats

HTML

 HTML stands for Hyper Text Markup Language

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<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>

<p>This is another paragraph.</p>

This is another paragraph.

<p>HTML images are defined with the img tag:</p>

<img src="w3schools.jpg" width="104" height="142">

HTML Horizontal Rules

<h1>This is heading 1</h1>

<p>This is some text.</p>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

HTML Line Breaks

HTML Comment Tag

The href Attribute

<h2>The href Attribute</h2>

<a href="https://www.youtube.com/ ">Visit YOUTUBE </a>

<p style="color:MediumSeaGreen;">life is unexpected</p>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

HTML Text Formatting

HTML Formatting Elements

 <b> - Bold text

HTML <small> Element

HTML <mark> Element

HTML <del> Element

HTML <ins> Element

HTML <sub> Element

HTML <sup> Element

HTML Text Formatting Elements

Example of emphasized tag

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

An unordered HTML list:

An ordered HTML list:

Unordered HTML List

<h2>An unordered list</h2>

Ordered HTML List

The list items will be marked with numbers by default:

<h2>An ordered list</h2>

HTML Description Lists

A description list is a list of terms, with a description of each term.

<h2>A Description List</h2>

HTML List Tags

HTML Table Tags

<table> Defines a table

<th> Defines a header cell in a table