WHAT IS HTML
HTML, short for HyperText Markup Language, is the core
language of the World Wide Web. It defines the content
and basic structure of web pages and web applications.
First published by Tim Berners-Lee in 1989, HTML is now
used by 94% of all websites, and probably all the ones you
visit. But what is it, exactly?
What is HTML used for?
HTML is primarily used for creating web pages.
HTML is free to use and ensures your text, images, and other elements
are displayed as intended.
With HTML, can you add headings, paragraphs, lists, and other
elements to your page
you can embed images, videos, audio files, and other multimedia. you
can link to other web pages on the same website or from another site.
This allows visitors to easily navigate your website and jump between
websites.
Even after adding headings, images, and hyperlinks, you’d still have a very
basic web page — and that’s by design.
HTML is purely for the content of a page.
It creates a simple base upon which you can add styling with another language
called CSS (which stands for Cascading Style Sheets).
With CSS, you can customize your styling and layouts, changing the color,
font, and alignment of elements.
HTML is used to create things other than web pages, too. You can use it to:
•Make tables for organizing data
•Create forms for collecting user information, processing transactions, making
reservations, or placing an order
•Create emails with html
How to Write HTML
HTML Tags
HTML elements are designated by tags.
Most elements have an opening tag and a closing tag.
Opening tags precede contain the element name enclosed by angle brackets (<>).
Closing tags are identical to opening tags, save for a slash (/) that precedes the
element name.
Tags contain an element’s content. Content may be text, a media item, or even
other elements.
So, say you want to add a paragraph to your web page, the paragraph contains the
text “This is a paragraph.”
You’ll wrap it with the HTML paragraph tags <p> and </p>. So, the HTML will
look like this:
<p>This is a paragraph.</p>
How to Create an HTML File
To build a website with HTML, you need to create an
HTML file first.
This file will contain all the HTML for your web page and
will be uploaded to your web server.
That way, when a visitor searches for your website, the
server will send the HTML file to the visitor's browser, and
the browser will render the page accordingly.
Step 1: Add a <!DOCTYPE> declaration.
To start, we’ll need declare the type of document as HTML.
Add the special code <!DOCTYPE html> on the very first line of
the file. Every HTML file starts this way.
<!DOCTYPE html>
Step 2: Add an <html> element.
Next, we’ll add the <html> element after the doctype declaration,
also called the “root” element of the document because it contains
all other elements in the document.
On the line below the DOCTYPE declaration, add
an <html> opening tag. Below that, add a closing </html> tag.
<!DOCTYPE html>
<html>
</html>
Every other element in the document will be placed between these
tags.
Step 3: Add a language attribute.
Within the opening tag of the html element, we’ll also add a
lang (language) attribute. This helps screen readers determine
what language the document is in, making your website more
accessible.
Without a language attribute, screen readers will default to the
operating system’s language, which could result in
mispronunciations of the title and other content on the page.
Since we’re writing this post in English, we’ll set the
file’s lang attribute value to en.
<!DOCTYPE html>
<html lang="en">
</html>
Step 4: Add a head and body section.
An HTML document consists of two parts: the head section and the body section. The
head section contains meta-information about the page as well as any internal CSS.
The browser does not display this information to users. The body section contains all
the information that will be visible on the front end, like your paragraphs, images, and
links.
To create these sections, we will add <head></head> tags
and <body></body> tags inside the <html> section of the document.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
You’ll also notice that the <head> and <body> tags are indented here. This visually indicates
to us that these tags are placed inside, or “nested” in, the <html> tags. While indenting isn’t
necessary and makes no difference in how the browser renders the document, it’s still
common practice to indent your HTML for better readability.
Step 5: Add a title in the head section.
Next, in the head section, we want to name our document. Write a name (we’ll go
with “My HTML Page” in this example) and then wrap it in <title></title> tags.
We’ll also indent this <title> element so show that it is nested in the <head>
section.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Page</title>
</head>
<body>
</body>
</html>
Step 6: Add HTML elements in the body section.
In the body section, let’s now add a heading and paragraph. Write out the heading
content and wrap it in <h1></h1> tags, then write out the paragraph content and
wrap it in <p></p> tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Background Color
You can set the background color for HTML elements:
<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:
<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:
<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>
