HTML Tutorial - Complete HTML Basic Tutorial for Beginners
HTML or Hyper Text Markup Language, is the standard markup language for building a website structure in a web browser. For example, It's similar to the building construction.
HTML stands for Hyper Text Markup Language is the basic building block of the Web. It means that it helps to create a structure of web content. Other technologies besides HTML are generally used to describe a web page's design or presentation layout (in CSS) and functionality or behavior (in JavaScript).
1. HTML Documents
<!DOCTYPE html> All HTML documents must start with a document type declaration.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the
tag.2. HTML Headings and Paragraphs
<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>
<h1> defines the most important heading.
<h6> defines the least important heading.
<p> defines a paragraph content.
<p>This is my first paragraph.</p>
<p>This is another second paragraph.</p>
3. HTML Links (Using Anchor tags in HTML)
HTML links are defined with the <a> tag
<a href="https://www.solvprog.com">This is a link</a>
<a href="https://solvprog.com">This is a link</a>
http Hyper Text Transfer Protocol (its unsecured version) or https Hyper Text Transfer Protocol (Secured)
WWW stands for World Wide Web, and it's used mostly as a prefix. However, it does indicate that a given website uses HTTP to communicate.
Domain name: https://solvprog.com
Domain Server IP: 169.59.9.100 (Actual Address)
The link's destination is specified in the href attribute.
4. HTML Images
HTML images are defined with the <img> tag.
Attributes in HTML Image tag are:
- The source file (src),
- alternative text (alt),
- width, and
- height
<img src="logo.jpg" alt="Company logo" width="400" height="200">
5. How to View HTML Source Code & Inspect Element?
Have you ever seen a Web page in browser (Chrome, Firefox and more.) and wondered "How did they do this to create such a beautiful page?"
5.1. View HTML Source Code:
Right-click in an HTML page and choose "View Page Source" (in Chrome) or "View Source" (in Edge), or anything similar in other browsers. This will open a new window tab with the page's HTML source code.
5.2. Inspect an HTML Element:
To understand what elements are made up of, right-click on an element (or a blank space) and select "Inspect" or "Inspect Element" (you will see both the HTML and the CSS together). In the Elements or Styles panel that appears, you may easily alter the HTML or CSS on the fly.
6. HTML Elements & HTML Attributes
Elements:
- <html></html>
- <body></body>
- <h1></h1>
- <p></p>
- <a></a>
<br>, <img>, <hr> empty element (no closing end tags used.)
Attributes:
<a>href
<img> src
There are two ways to specify the URL in the src attribute:
6.1. Absolute URL - Links to an internal web page that is stored or hosted on the website.
Example: src="https://solvprog.com/p/73/how-to-become-a-web-developer".
Notes: External photos may be protected by copyright. You may be in violation of copyright laws if you do not obtain permission to use it. Moreover, you have no control over external photos; they can be removed or modified at any time.
6.2. Relative URL - Links to an image that is hosted within the website (in same folder). Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page.
Example: src="logo.jpg".
If the URL begins with a slash, it will be relative to the domain.
Example: src="/images/img_girl.jpg".
<img> width
<img> height
<img> alt
style - attribute is used to add styles to an element, such as color, font, size, and more. and it's also known as Inline CSS.
<html> lang - attribute declares the language of the Web page.
title - attribute defines some extra information about an element.
7. HTML Styles
<tagname style="property:value;">The property is a CSS property. The value is a CSS value.
Examples:
color: orange;
background-color: gray;8. 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
9. HTML Quotation and Citation Elements
- Quotations <blockquote> cite
- Short Quotations <q>
- Abbreviations <abbr> title
- Contact Information <address>
- Work Title <cite>
- Bi-Directional Override <bdo>
10. HTML Comments
<!-- Write your comments here -->Note: Comments are not displayed by the browser, but they are used for understanding your HTML source code.
11. HTML Colors
Color Names
- Tomato
- Orange
- DodgerBlue
- MediumSeaGreen
- Gray / Grey
- SlateBlue
- Violet
- LightGray
- Background Color: background-color:gray;
- Color: color: red;
- Border Color: border 2px solid grey;
Color Values:
- rgb(255, 99, 71)
- #ff6347
- hsl(9, 100%, 64%)
RGB is a 3-channel format containing data for Red, Green, and Blue. RGBA is a 4-channel format containing data for Red, Green, Blue, and Alpha. There is no use to the Alpha channel other than making the color transparent/opaque (or partially transparent; translucent).
- rgba(255, 99, 71, 0.5)
- hsla(9, 100%, 64%, 0.5)
HSL stands for hue, saturation, and lightness.
HSL color values are specified with: hsl(hue, saturation, lightness).
12. HTML Styles - CSS
- Inline CSS - by using the style attribute inside HTML elements
- Internal CSS - by using a <style> element in the <head> section
- External CSS - by using a <link> element to link to an external CSS file
13. HTML CSS
CSS Colors, Fonts and Sizes
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
CSS Border
The CSS border property defines a border around an HTML element.CSS Padding
The CSS padding property defines a padding (space) between the text and the border.CSS Margin
The CSS margin property defines a margin (space) outside the border.Link to External CSS
<link rel="stylesheet" href="#style.css">14. HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
- _self - Default. Opens the document in the same window/tab as it was clicked
- _blank - Opens the document in a new window or tab
- _parent - Opens the document in the parent frame
- _top - Opens the document in the full body of the window
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that opens the user's email program
15. HTML Link Colors
By default, a link will appear like this (in all browsers):
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
The CSS pseudo-class and Selector
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
The :hover selector is for selecting the elements when we move the mouse on them. It is not only limited to the links.
- hover
- link
- visited
- active
16. HTML Links - Create Bookmarks
use the id attribute to create a bookmark
- Use the id attribute (id="value") to define bookmarks in a page
- Use the href attribute (href="#value") to link to the bookmark