HTML is the standard markup language for creating Web pages. HTML
stands for Hyper Text Markup Language. It is the standard markup
language for creating Web pages. It describes the structure of a Web
page. It 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.
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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.
A simple text editor is all you need to learn HTML. An HTML editor
is a piece of software for creating and editing HTML code. It can be
a stand-alone software dedicated to code writing and editing or a
part of an IDE (Integrated Development Environment).
Some free available HTML Editors are:
-
Atom
- Notepad ++
-
Sublime Text
- Visual Studio Code
- UltraEdit
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 6</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
An HTML element is defined by a start tag, some content, and an end tag.
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML attributes provide additional information about HTML elements.
All HTML elements can have attributes.
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:
<a href="https://www.w3schools.com">Visit W3Schools
The src Attribute
The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed:
<img src="img_girl.jpg">
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property and the value is a CSS value.
Images can improve the design and the appearance of a web page.
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The ![]()
tag has two required attributes:
- src - Specifies the path to the image
- alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page.
Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon.
The broken link icon and the alt text are shown if the browser cannot find the image.
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
<img src="img_chania.jpg" alt="Flowers in Chania">
A favicon is a small image displayed next to the page title in the browser tab.
You can use any image you like as your favicon. You can also create your own favicon on sites like https://favicon.cc
Tip: A favicon is a small image, so it should be a simple image with high contrast.
A favicon image is displayed to the left of the page title in the browser tab.
To add a favicon to your website, either save your favicon image to the root directory of your webserver,
or create a folder in the root directory called images, and save your favicon image in this folder.
A common name for a favicon image is "favicon.ico".
Next, add a <link> element to your "index.html" file, after the <title> element, like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Now, save the "index.html" file and reload it in your browser.
Your browser tab should now display your favicon image to the left of the page title.
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
Using The class Attribute
The class attribute is often used to point to a class name in a style sheet.
It can also be used by a JavaScript file to access and manipulate elements with the specific class name.
In the following example we have two <span> elements with a class attribute with the value of "note".
Both <span> elements will be styled equally according to the .note style definition in the head section:
<!DOCTYPE html>
<html>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">Important</span> text</p>
</body>
</html>
The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.
Using The id Attribute
The id attribute specifies a unique id for an HTML element.
The value of the id attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style sheet.
It is also used by JavaScript to access and manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name.
Then, define the CSS properties within curly braces {}.
In the following example we have an <h1> element that points to the id name "myHeader".
This <h1> element will be styled according to the #myHeader style definition in the head section:
<!DOCTYPE html>
<html>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<head>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>