1
Employment through Skill
Sindh Technical Education & Vocational Training Authority (STEVTA)
GOVT: INSTITUTE OF BUSNIESS & COMMERCIAL EDUCATION (G.I.B.C.E), KHAIRPUR
Address: Beside Govt: Comprehensive H.S.S near Therhi Phattak, Khairpur
Phone: 0243-684089 E-mail:
[email protected] INTRODUCTION TO HTML
WHAT IS HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML markup to describe the structure of web pages
HTML you can create your own Website.
HTML describes the structure of a Web page
HTML consists of a series of elements, & they are represented by tags!
HTML tags consist of “Heading”, “Paragraph”, ”Table” and so on
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.
HTML tags are not shown on the page.
HTML documents read by Chrome, Firefox, Edge, Safari Web browsers & display them
HTML TAGS:
Tags are instructions that are embedded directly into text of the document. An HTML tag is a
signal to a browsers that it should do something other than just throw text up on the screen by
convention all HTML tags begin with an open angle bracket [<] and end with a close angle
bracket [>].
There are two types of tags in HTML.
1. Pair Tag
2. Singular Tag
1. PAIR TAG:
A tag is said to be paired tag if it along with a companion tag, Flanks the text for example <B> is
paired tag.
2. SINGULAR TAG:
The second type of tag is the singular or stand-alone tag. A stand-alone tag does not have a
companion tag. For example: <BR> tag is singular tag.
2
HTML HISTORY:
HTML was first introduced in 1993 by Tim Berners-Lee, the inventor of the World Wide Web.
Since then, it has evolved through several versions, with the latest being HTML5.Since the early
days of the World Wide Web, there have been many versions of HTML introduced:
HTML1 (1993): The first version of HTML
HTML2 (1995): Added features like forms and tables
HTML3 (1995): Introduced applets, fonts and other enhancements
HTML4 (1997): Improved accessibility and internationalization
HTML5 (2014): Added features like Video, Audio, Canvas and more
KEY FEATURES OF HTML:
1. Markup Language: HTML uses tags to wrap around content and apply meaning to it.
2. Platform-independent: HTML can be used on any device or platform with a web browser.
3. Easy to Learn: HTML has a simple syntax and is relatively easy to learn.
4. Flexible: HTML can be used for building a wide range of web applications, from simple
websites to complex web applications.
HTML DOCUMENT STRUCTURE:
<!DOCTYPE html>: Declares the document type
<html>: The root element
<head>: Contains metadata, title and links to style sheets
<body>: Contains the content of the HTML document
A Simple HTML Document:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
3
Example Explained:
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
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Note:
Some HTML elements have no content (like the <br> element). These elements are called empty
elements. Empty elements do not have an end tag!
WEB BROWSERS:
The purpose of a web browser (Chrome, Edge, Firefox, and Safari) is to read HTML documents
and display them correctly. A browser does not display the HTML tags, but uses them to
determine how to display the document:
4
HTML Page Structure:
This is a visualization of an HTML page structure:
Note: The content inside the <body> section will be displayed in a browser. The content inside
the <title> element will be shown in the browser's title bar or in the page's tab.
BASIC HTML CONCEPTS:
1. ELEMENTS:
HTML elements are represented by tags such as <p>, <img>, and <div>
2. TAGS:
HTML tags are used to wrap around content and apply meaning to it.
3. ATTRIBUTES:
HTML attributes provide additional information about an element, such as src for an image
or href for a link.
4. SEMANTIC MEANING:
HTML elements provide semantic meaning to the content, making it easier for search
engines and screen to understand.
5
HTML ELEMENTS:
HTML elements divided into different categories such as:
BLOCK-LEVEL ELEMENTS: Occupy a full line, like <p>, <h1>, <div>
INLINE ELEMENTS: Occupy only the space needed, like <span>, <a>. <img>
EMPTY ELEMENTS: Don’t have content, like <br>, <hr>, <img>
SEMANTIC ELEMENTS:
o Header: <header>
o Footer: <footer>
o Navigation: <nav>
o Main Content: <main>
o Section: <Section>
o Article: <article>
o Aside: <aside>
COMMON HTML ELEMENTS:
Headings: <h1>, <h2>, <h3>, etc.
1. Paragraph: <p>
2. Links: <a>
3. Images: <img>
4. Lists: <ul>, <ol>, <li>
5. Containers: <div>, <span>
HTML is often used in conjunction with CSS (Cascading Style Sheets) for styling and
javascript for functionality.
HTML ATTRIBUTES:
GLOBAL ATTRIBUTES: Can be used on any element, like id, class, style
SPECIFIC ATTRIBUTES: Used on specific elements like src for <img>, href for <a>
6
HERE IS A SIMPLE HTML PROGRAM THAT CREATES A BASIC WEB
PAGE:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is my first HTML program.</p>
<p>I am excited to learn more about web development!</p>
</body>
<html>
EXPLANATION OF EACH PART OF THIS CODE DOES:
<!DOCTYPE html>: Declares the document type as HTML5
<html>: The root element of the HTML document
<head>: Contains metadata about the document, such as the title
<title>: My First Web Page</title>:
Sets the title of the page. Which appears in the browser’s title bar
<body>: Contains the content of the HTML document
<h1>Welcome to My Web Page</h1>:
A heading element that displays the text in a large font size
<p>This is my first HTML program.</p>:
A paragraph element that displays the text in a normal font size
7
HTML EDITOR / PAGE LAYOUT:
An HTML editor is a software tool used to create, edit, and design HTML documents. Here are
some popular HTML editors:
1. NOTEPAD++ (WINDOWS): A free, open-source editor with syntax highlighting and auto-
completion.
2. TEXT EDITOR (MAC): A free, built-in editor with basic features.
3. VISUAL STUDIO CODE (WINDOWS, MAC, LINUX): A free, open-source code editor
with advanced features like debugging and extensions.
4. ADOBE DREAMWEAVER (WINDOWS, MAC): A commercial editor with advanced
features like design and preview modes.
5. SUBLIME TEXT (WINDOWS, MAC, LINUX): A commercial editor with advanced
features like syntax highlighting and plugins.
PAGE LAYOUT REFERS TO THE ARRANGEMENT OF CONTENT ON A WEB
PAGE. HERE ARE SOME KEY CONCEPTS:
1. HEADER: The top section of the page of ten containing the logo, navigation, and title.
2. FOOTER: The bottom section of the page, often containing copyright information, links,
and contact details.
3. NAVIGATION: The menu system that allows users to move between pages.
4. CONTENT AREA: The main section of the page where the content is displayed.
5. SIDEBAR: A secondary column that can contain additional information, links, or widgets.
6. GRID SYSTEM: A way of organizing content into rows and columns using HTML and
CSS.
SOME POPULAR PAGE LAYOUT TECHNIQUES INCLUDE:
1. FIXED LAYOUT: A layout that remains the same width regardless of screen size.
2. FLUID LAYOUT: A layout that adjusts to the screen size.
3. RESPONSIVE DESIGN: A layout that adapts to different screen sizes and devices.
4. FLEXBOX: A CSS layout mode that allows for flexible and efficient layouts.
5. GRID LAYOUT: A CSS layout mode that allows for grid-based layouts.
8
WEB WRITING AND TYPOGRAPHY:
Web writing and typography are crucial aspects of creating engaging and readable online
content. Here are some key considerations:
WEB WRITING:
1. CLEAR AND CONCISE LANGUAGE: Use simple, straightforward language to
communicate your message.
2. SCANNABLE CONTENT: Breakup text into headings, subheadings, and bullet points to
make it easy to scan.
3. SHORT PARAGRAPHS: Keep paragraphs short and focused to maintain reader attention.
4. ACTIVE VOICE: Use active voice instead of passive voice to make your writing more
engaging.
5. SEO CONSIDERATION: Use keywords strategically to improve search engine
optimization.
TYPOGRAPHY:
1. FONT CHOICES: Select fonts that are legible, web friendly, and consistent with your brand.
2. FONT SIZES: Use a clear hierarchy of font sizes to create visual structure.
3. LINE SPACING: Ensure sufficient line spacing (leading) to improve readability.
4. TEXT ALIGNMENT: Use left-aligned text for body copy and center-aligned text for
headings.
5. COLOR CONTRAST: Ensure sufficient contrast between text and background text and
background colors.
BROWSERS:
Web browsers are software applications that allow users to access and view websites on the
internet. Here are some key points about browsers:
POPULAR BROWSERS:
1. Google Chrome
2. Mozilla Firefox
3. Microsoft Edge
4. Apple Safari
5. Opera
9
BROWSER FEATURES:
1. TABBED BROWSING: Multiple tabs for easy navigation
2. BOOKMARKS: Save favorite websites for quick access.
3. HISTORY: View previously visited websites
4. SEARCH BAR: Search the internet directly from the browser.
5. EXTENSIONS/ADD-ONS: Customize the browser with additional features
6. INCOGNITO/PRIVATE MODE: Browse privately without saving history or data
7. DEVELOPER TOOLS: Debug and inspect web pages for developers.
10
IMAGE EMBEDDING IN HTML:
To embed an image in HTML, you use the <img> tag. Here’s a basic example:
<img src=”image.jpg” alt=”Description of the image”>
src attribute: specifies the URL or file path of the image
alt attribute: provides a text description of the image for accessibility and if the image
can’t be loaded.
Additional attributes:
width and height: specify the image dimensions in pixels
title: provides a tooltip or title for the image
border: specifies the border width in pixels
align: specifies the image
Example with additional attributes:
<img src=”image.jpg” alt=”Description” width=”200”height=”150” title=”image title”>
Note:
Use the alt attribute to provide a description of the image for accessibility purposes.
Use the src set attributes to specify multiple image sources for responsive images.
Use the loading attribute to specify the loading behavior of the image.
IMAGE MAPPING IN HTML:
Image mapping in HTML, allows you to create clickable areas on an image. This is achieved
using the <map> and <area> tags.
Here’s an example:
<img src=”image.jpg”
usemap=”#mapname”>
<map name=”mapname”>
<area shape=”rect”
cords=”34.44,270,350” href=”link1.html”
alt=”link1”>
<area shape=”rect”
cords=”337,300,44” href=”link2.html”
alt=”link2”>
<area shape=”poly”
cords=”371,166,402,192,383,219”
href=”link3.html” alt=”link3”>
</map>
11
TEXT FORMATTING IN HTML:
Text formatting in HTML allows you to control the appearance of text on a web page. Here are
some common text formatting elements and attributes:
Headings:
<h1>: Main heading
<h2>: Subheading
<h3>: Sub-subheading
Text Style:
<b>: Bold text
<i>: Italic text
<u>: Underline text
<s>: Strikethrough text
<strong>: Strong emphasis (bold)
<em>: Emphasis (Italic)
Text Alignment:
<p align=”left”>: Left-aligned text
<p align=”center”>: Centered text
<p align=”right”>: Right-aligned text
<p align=”justify”>: Justify text
Text Size:
<font size=”1”>: Smallest text size
<font size=”7”>: Largest text size
<small>: Smallest text
<big>: Largest text
Text Color:
<font color=”red”>: Red text
<font color=”#FF0000”>: Red text
Note:
Some elements and attributes are deprecated in HTML5.
Use CSS (Cascading Style Sheets) for more control over text formatting
Use semantic elements (<strong>, <em>) instead of presentational elements (<b>, <i>) for
better accessibility
12
A simple HTML program to insert a Table:
<!DOCTYPE html>
<html>
<head>
<title> Simple Table</title>
</head>
<body>
<h2>Simple Table</h2>
<table border=”1”>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Jane</td>
<td> 25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
<html>
This program creates a simple Table with three columns (Name, Age, City) and two rows of
data. The border attribute adds a border around the table.
Here’s a breakdown of the code:
<table>: Defines the table
<tr>: Defines a table row
<th>: Defines a table header cell
<td>: Defines a table data cell
Border: Adds border around the table
13
COMMANDS OF HTML:
Here are some basic HTML commands:
1. <!DOCTYPE html>: Declares the document type.
2. <html>: Root element of the HTML document
3. <head>: Contains metadata about the document
4. <title>: Sets the title of the page
5. <body>: Contains the content of the HTML document
Headings:
1. <h1>: Main heading
2. <h2>: Subheading
3. <h3>: Sub-subheading
4. <h4>: Sub-sub-subheading
5. <h5>: Sub-sub-sub-subheading
6. <h6>: Sub-sub-sub-sub-subheading
Text Elements:
1. <p>: Paragraph
2. <span>: Inline text container
3. <div>: Block-level text container
4. <string>: Bold text
5. <em>: Italic text
6. <u>: Underline text
7. <s>: Strikethrough text
Links:
1. <a>: Anchor element (link)
2. href: Specifies the link destination
Images:
1. <img>: Image element
2. src: Specifies the image source
3. alt: Specifies the alternative text
Lists:
1. <ul>: Unordered list
2. <ol>: Ordered list
3. <li>: List item
Tables:
1. <table>: Table element
2. <tr>: Table row
3. <td>: Table cell
4. <th>: Table header cell
14
Forms:
1. <form>: Form element
2. <input>: Input field
3. <textarea>: Text area
4. <select>: Drop-down menu
5. <button>: Button
Semantic Elements:
1. <header>: Header section
2. <nav>: Navigation section
3. <main>: Main content section
4. <section>: Section element
5. <article>: Article element
6. <footer>: Footer section
HTML BASIC:
1. HTML Structure: HTML documents consist of a series of elements, represented by tags (<
>). The basic structure includes:
<!DOCTYPE html>: Document type declaration
<html>: Metadata container
<title>: Page title
<body>: Content container
2. Elements:
HTML elements are represented by tags and are used to define the structure and content of a
web page. Examples include:
Headings (<h1>, <h2>, etc.)
Paragraphs (<p>)
Links (<a>)
Images (<img>)
Lists (<ul>), <ol>, <li>)
Tables (<tables>, <tr>, <td>)
Forms (<form>, <input>, <textarea>, etc.)
15
3. Tags: HTML tags are used to define elements and are surrounded by angle brackets (< >).
Tags usually come in pairs, with the opening tag preceding the content and the closing tag
following the content.
4. Attributes: HTML attributes provide additional information about elements and are added to
the opening tag. Examples include:
href (link destination)
src (image source)
alt (alternative text)
style (inline styles)
id (unique identifier)
class (class name)
5. Content: HTML content is the text images, and other media displayed on a web page.
6. Semantic Meaning: HTML elements have semantic meaning which helps search engines
and screen readers understand the structure and content of a web page.
7. Validation: HTML validation ensures that the document follows the rules and syntax of
HTML.
8. Doctype: The doctype declaration (<!DOCTYPE html>) tells the browser which version of
HTML is being used.
16
HTML ELEMENTS:
Here are some common HTML elements:
Headings:
<h1>: Main heading
<h2>: Subheading
<h3>: Sub-subheading
<h4>: Sub-sub-subheading
<h5>: Sub-sub-sub-subheading
<h6>: Sub-sub-sub-sub-subheading
Text Elements:
<p>: Paragraph
<span>: Inline text container
<div>: Block-level text container
<strong>: Bold text
<em>: Italic text
<u>: Underline text
<s>: Strikethrough text
Links:
<a>: Anchor element (link)
Href: Specifies the link destination
Images:
<img>: Image element
Src: Specifies the image source
Alt: Specifies the alternative text
Lists:
<ul>: Unordered list
<ol>: Ordered list
<li>: List item
Tables:
<table>: Table element
<tr>: Table row
<td>: Table cell
<th>: Table header cell
Forms:
<form>: Form element
<Input>: Input field
<textarea>: Text area
<select>: Drop-down menu
<button>: Button
17
Semantic Elements:
<header>: Header section
<nav>: Navigation section
<main>: Main content section
<section>: Section element
<article>: Article element
<footer>: Footer section
Multimedia Elements:
<audio>: Audio element
<video>: Video element
<source>: Specifies the media source
Interactive Elements:
<button>: Button element
<input>: Input field
<textarea>: Text area
<select>: Drop-down menu
18
HTML ATTRIBUTES:
HTML attributes provide additional information about HTML elements and are added to the
opening tag. Here are some common HTML attributes.
1. Global Attributes:
id: Unique identifier
class: Class name
style: Inline styles
title: Tooltip text
2. Link Attributes:
href: Link destination
target: Link target (e.g., _blank for new tab)
3. Image Attributes:
src: Image source
alt: alternative text
width and height: Image dimensions
4. Form Attributes:
action: Form submission URL
method: Form submission method (e.g., get or post)
name: Form name
placeholder: Input field placeholder text
5. Input Attributes:
type: Input type (e.g., text, password, checkbox, etc.)
value: Input vale
checked: Checkbox or radio button checked state
6. Table Attributes:
border: Table border width
cellpadding and cellspacing: Table cell padding and spacing
7. Semantic Attributes:
header: Associated header element
footer: Associated footer element
8. Accessibility Attributes:
aria-label: Accessible label text
aria-hidden: Hidden element indicator
9. Event Attributes:
onclick: Click event handler
onmouseover: Mouseover event handler
onmouseout: Mouseout event handler
19
HTML HEADINGS:
HTML headings are defined with the <h1> to <h6> tags, with <h1> being the highest level and
<h6> being the lowest. Headings are used to structure and organize content on a web page.
Here is a brief overview of HTML headings:
<h1>: Main heading typically the title of the page
<h2>: Subheading, typically a section title
<h3>: Sub-subheading, typically a subsection title
<h4>: Sub-sub-subheading, typically a subsection title
<h5>: Sub-sub-sub-subheading, typically a minor heading
<h6>: Sub-sub-sub-sub-subheading typically a minor subheading
Example:
<h1>: Main title</h1>
<h2>: Section</h2>
<h3>: Subsection 1.1</h3>
<p>: Content……</p>
<h3>: Subsection 1.2<h3>
<p>: Content……</p>
<h2>: Section 2</h2>
<p>: Content……</p>
20
HTML PARAGRAPHS:
HTML paragraphs are defined with the <p> tag. The<p> tag is used to wrap a block of text to
indicate that it is a paragraph.
Example:
<p>This is a paragraph of text.</p>
Attributes:
Align: Specifies the alignment of the paragraph (left, center, right, or justify)
Example:
<p align=”center”>This paragraph is centered.</p>
<p>This is a paragraph of text.<br>
It can contain multiple lines. </p>
21
HTML FORMATTING:
HTML formatting refers to the use of HTML elements and attributes to control the layout,
appearance, and structure of text and other content on a web page. Here are some common
HTML formatting elements and techniques.
1. Bold and Italic Text:
<b> or <strong> for bold text
<i> or <em> for italic text
2. Underline Text:
<u> for underline Text
3. Strikethrough Text:
<s> or <strike> for strikethrough
4. Superscript and Subscript Text:
<sup> for superscript text
<sub> for subscript text
5. Line Breaks:
<br> for line breaks
6. Horizontal Rule:
<hr> for horizontal rule
7. Font size and Color:
<font> CSS styles for font size and color
8. Alignment:
Align, attribute (CSS styles for text alignment)
Example:
<p><strong>Bold Text</strong> and
<em>italic text</em>.</p>
<p>This is a<sup>superscript</sup>
and <sub>subscript</sub> example.</p>
CSS styles:
p{
font-size: 18px;
color: blue;
text-align: center;
}
22
HTML QUOTATION AND CITATION ELEMENTS:
In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>,
and <bdo> HTML elements.
HTML <blockquote> FOR QUOTATIONS:
The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
Example:
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading
conservation organization, WWF works in nearly 100 countries. At every level, we collaborate
with people around the world to develop and deliver innovative solutions that protect
communities, wildlife, and the places in which they live.
</blockquote>
HTML <q> FOR SHORT QUOTATIONS:
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
Example:
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
HTML <abbr> FOR ABBREVIATIONS:
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.",
"Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation systems and search-
engines.
Tip: Use the global title attribute to show the description for the abbreviation/acronym when you
mouse over the element.
Example:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <address> FOR CONTACT INFORMATION:
The HTML <address> tag defines the contact information for the author/owner of a document or
an article.
The contact information can be an email address, URL, physical address, phone number, social
media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always add a line
break before and after the <address> element.
23
Example:
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> FOR WORK TITLE:
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a
painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
Example:
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <bdo> for Bi-Directional Override:
BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
Example:
<bdo dir="rtl">This text will be written from right to left</bdo>
24
HTML COMMENTS:
HTML comments are not displayed in the browser, but they can help document your HTML
source code.
HTML COMMENT TAG:
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
Note: Comments are not displayed by the browser, but they can help document your HTML
source code.
Add Comments:
With comments you can place notifications and reminders in your HTML code:
Example:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Hide Content:
Comments can be used to hide content.
This can be helpful if you hide content temporarily:
Example:
<p>This is a paragraph.</p>
<!-- <p>This is another paragraph </p> -->
<p>This is a paragraph too.</p>
You can also hide more than one line. Everything between the <!-- and the --> will be hidden
from the display.
Example:
Hide a section of HTML code:
<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>
Hide Inline Content:
Comments can be used to hide parts in the middle of the HTML code.
Example:
Hide a part of a paragraph:
<p>This <!-- great text --> is a paragraph.</p>
25
HTML COLORS:
HTML colors are specified with predefined color names, or with RGB (Red Green Blue), HEX,
HSL, RGBA, or HSLA values.
Color Names:
In HTML, a color can be specified by using a color name:
HTML supports 140 standard color names.
BACKGROUND COLOR:
You can set the background color for HTML elements:
Example:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
TEXT COLOR:
You can set the color of text:
Hello World
Example:
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
BORDER COLOR:
You can set the color of borders:
Example:
<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>
