Basics of HTML – A Beginners Guide
On the internet, there are many basics of html blogs and articles are there to teach you HTML. That many blogs explain theory instead of practices. But the theory makes you understand the theoretical knowledge, not the technical skills. In this HTML guide, we share and explain step-by-step processes to learn HTML. We mainly focused on making you understand practical knowledge and theory as well. Let us begin.
What is HTML?
- HTML stands for a hypertext markup language. It is a markup language.
- Html is used to create a web page and make them work.
- Tags and attributes are used to design web pages.
- With this HTML, CSS is also used to beautify web pages. We will learn about this CSS later.
HTML Document
All HTML documents must start with an <!DOCTYPE HTML>. It is a document declaration. Doctype helps browsers to display properly. It should display only once.
HTML tags starts with <html> and ends with </html>
Next, the Body tag, all the tags, and content lie inside the body. body tags start with <body> ends with </body>.
Let us take an example of an HTML document:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body></body>
</html>
HTML Headings
The heading is defined as an important heading. Heading tags contains six types. <h1> to <h6>. It helps to display text from large size to small size.
Let us Take an example of a heading.
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
Output:
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hyperlinking (Link):
A link tag is used for hyperlinks. Links help to move from one page to another after clicking. Whenever you move your mouse on links, the arrow turns into a little hand.
Syntax of a Link:
<a href=”https://www.freepik.com/”>Freepik</a>
Output:
Using target: “_blank” helps to open the linked document in the new browser.
<a href=”https://www.techiebears.com/web-development/what-is-web-development/” target=”_blank”>What is web Development</a>
Output:
Formatting:
Formatting is nothing but highlighting and marking important text in a document. There are several types of formatting types available. bold, italic, strong, etc.
- -<B> Bold text
- -<Strong> Important text
- – <Italic>Italic text
- -<em>Emphasized text
- – <mark> Marked text
- – <small> Smaller text
- – <ins> Inserted text
- – <sub> Subscript text
- – <sup> Superscript
Tables:
Data tables or tables are used to arrange the data in rows and columns and for formatting. The table will help you to organize data properly.
Let us Take an example of a Table:
Output:
| Name | Contact | Country |
|---|---|---|
| Alfreds | Anders | India |
| Moctezuma | Francisco | New York |
Lists
Lists are nothing but arranging text in order wise using <ul> and <li> tags. These tags help to format and make web pages engaging. There are two types of list tags.
1. Ordered lists
2. Unordered list
Ordered lists will show the text in number format, and the unordered list will display in bullets, circles, etc
Let us Take an example of a lists:
Output:
Ordered List
- Freepik
- TechiBears
- Web Development
Un-Ordered List
- Freepik
- TechiBears
- Web Development
Elements:
There are two types.
1. Block-level Elements
2. Inline Elements
Block Level Elements:
They always starts on new line. A block-level element always takes up the full width.
Example:
<p>Hello World</p>
<div>Hello World</div>
Output:
Inline Elements:
An Inline element does not start on a new line. An Inline Element can be fitted in between any other element.
You can insert other text or images on the same line using Inline elements.
Example:
<span>, <br>, <img>
Output:
HTML block-level elements
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul>
Here are the inline elements in HTML:
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
File Paths
In the file path, HTML describes the location of files in website folders. File paths are used to move from one page to another page of the same website or to visit other website pages.
There are 2 types of paths:
1. Absolute file path: A absolute file path contains the complete location of a page or image.
2. relative file path. In the relative file path location is related to the current directory. This uses 2 types ./ and ../, which translate currents and parent directory.
Example:
<img src=”https://www.techiebears.com/wp-content/uploads/2022/10/Web-Design-1024×279.png” alt=”Elements”>
Comments
Comment code is used to comment on the code and it will not execute and be shown in the results.
Comment the code on a single line using ‘//’
To comment on the code on multiple lines use ‘/* */’
HTML Tags
HTML tags are used to design and structure web pages. these tags help to format text, design, display images, hyperlinking, etc.
Section:
is a thematic grouping of content. In section, contains typically a heading and paragraphs.
Header
<head> elements represent as the head of the web page. The head section contains a group of navigational links, meta tags, and tracking codes.
Example:
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet….</p>
</article>
Footer
The footer tag defines a footer for a document or section.
A <footer> element typically contains :
- Authorship information
- Sitemap
- Back to top links
- Related documents
Div
<div> A div tag is used to create a section in an HTML document. It is used as a container and then styled with CSS or manipulated with JavaScript. By default, browsers always place a line break before and after the <div> element.
Local Storage & Session Storage
With web storage, web applications can store data locally within the user’s browser.
1)Local Storage: The local Storage object stores data with no expiration date.
The data will not be deleted after the user closes the browser and will be available for many days.
2)Session Storage: It stores data for only one session. The data is deleted when the user closes the specific browser tab.
Zaik
October 25, 2022nice information about 🤔 html