In this Blog, you going to learn about HTML

Step - by - Step

While many guides on the internet attempt to teach HTML using a lot of mind-boggling theory, this tutorial will instead focus on giving you the practical skills to build your first site.
The aim is to show you ‘how’ to create your first web page without spending the entire tutorial focusing too much on the “why.”
By the end of this tutorial, you will have the know-how to create a basic website and we hope that this will inspire you to delve further into the world of HTML using our follow-on guide

What is HTML?

Okay, so this is the only bit of mandatory theory. In order to begin to write HTML, it helps if you know what you are writing.

HTML is the language in which most websites are written. HTML is used to create pages and make them functional.

The code used to make them visually appealing is known as CSS and we shall focus on this in a later tutorial. For now, we will focus on teaching you how to build rather than design.

The History of HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for HyperText Markup Language.
Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.
A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.

What are Tags and Attributes?

Tags and attributes are the basis of HTML.

They work together but perform different functions – it is worth investing 2 minutes in differentiating the two.

What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.

Most tags must be opened <h1> and closed </h1> in order to function

What are HTML Attributes?

Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

An example of an attribute is:

<img src="mydog.jpg" alt="A photo of my dog.">

In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

HTML Editors

Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website.

First off, we must ensure that we have the right tools. Most important, we need an HTML editor.

There are many choices on the market. Here are a handful of the most popular:

Sublime Text 3

However, for this tutorial, we will use the Sublime Text 3 as it is free and also offers cross-platform support for Windows, Mac, and Linux users.

Notepad ++

Another common choice for HTML and other language coders is Notepad ++. It is a tiny program to download and perform the functions you need for writing clean code.

What To Avoid

Your code’s front-end view varies from browser to browser – you will learn more about this with advanced CSS.

Do not use Microsoft Word or any other word processor when writing HTML code, only an HTML editor or at the very least, your machine’s built-in notepad, is suitable for the task.

Secondly, ensure that you’ve installed a number of different browsers such as Chrome and Firefox in order to preview your upcoming creation.

Creating Your First HTML Webpage

First off, you need to open your HTML editor, where you will find a clean white page on which to write your code.

From there you need to layout your page with the following tags.

Basic Construction of an HTML Page

These tags should be placed underneath each other at the top of every HTML page that you create.

<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is HTML 5.

<html> — This tag signals that from here on we are going to write in HTML code.

<head> — This is where all the metadata for the page goes — stuff mostly meant for search engines and other computer programs.

<body> — This is where the content of the page goes.

Further Tags

Inside the <head> tag, there is one tag that is always included: <title>, but there are others that are just as important:

<title>

This is where we insert the page name as it will appear at the top of the browser window or tab.

<meta>

This is where information about the document is stored: character encoding, name (page context), description

Let’s try out a basic `<head>` section:

<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This field contains information about your page. It is usually around two sentences long.">.
<meta name="author" content="Conor Sheils">
</header>

Adding Content

Next, we will make <body> tag.

The HTML <body> is where we add the content which is designed for viewing by human eyes.

This includes text, images, tables, forms, and everything else that we see on the internet each day.

How to Add HTML Headings To Your Web Page

In HTML, headings are written in the following elements:

<h1>
- <h2>
  - <h3>
    - <h4>
      - <h5>
        
        <h6>

As you might have guessed <h1> and <h2> should be used for the most important titles, while the remaining tags should be used for sub-headings and less important text.

Search engine bots use this order when deciphering which information is most important on a page.

Creating Your Heading

Let’s try it out. On a new line in the HTML editor, type:

<h1>Welcome to My Page</h1>

And hit save. We will save this file as “index.html” in a new folder called “my webpage.

Well let’s not get carried away; we’ve still got loads of great features that we can add to your page.

The Moment of Truth: Click the newly saved file and your first-ever web page should open in your default browser. It may not be pretty it’s yours… all yours. Evil laugh

How To Add Text In HTML

:

Adding text to our HTML page is simple using an element opened with the tag <p> which creates a new paragraph. We place all of our regular text inside the element <p>.

When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way.

Other Key Elements

They are as follows

Element Meaning Purpose

<b> Bold Highlight important information

<strong> Strong Similarly to bold, to highlight keytext

<i> Italic To denote text

<em> Emphasised Text Usually used as image captions

<mark> Marked Text Highlight the background of the text

<small> Small Text To shrink the text

<strike> Striked Out Text To place a horizontal line across the text

<u> Underlined Text Used for links or text highlights

<ins> Inserted Text Displayed with an underline to show an inserted text

<sub> Subscript Text Typographical stylistic choice

<sup> Superscript Text Another typographical presentation style

Let’s try it out. On a new line in the HTML editor, type the following HTML code:

<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>

So Let dig into it and know about Syntax of HTML

The DOCTYPE

DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based and therefore required a reference to a DTD.

HTML authors would use a simple syntax to specify DOCTYPE as follows −

<!DOCTYPE html>

The above syntax is case-insensitive.

Character Encoding

HTML authors can use a simple syntax to specify Character Encoding as follows −

<meta charset = "UTF-8">

The above syntax is case-insensitive.

The <script> tag

It's common practice to add a type attribute with a value of "text/javascript" to script elements as follows −

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML removes extra information required and you can use simply following syntax −

<script src = "scriptfile.js"></script>

The <link> tag

So far you were writing <link> as follows −

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML removes extra information required and you can simply use the following syntax −

<link rel = "stylesheet" href = "stylefile.css">

HTML Elements

HTML elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between.

The difference between start tags and end tags is that the latter includes a slash before the tag name.

Following is the example of an HTML element −

<p>...</p>

HTML tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

Most of the elements contain some content like <p>...</p> contains a paragraph. Some elements, however, are forbidden from containing any content at all and these are known as void elements. For example, br, hr, link, meta, etc.

Here is a complete list of HTML Elements.

HTML Attributes

Elements may contain attributes that are used to set various properties of an element.

Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example.

Following is the example of an HTML attribute which illustrates how to mark up a div element with an attribute named class using a value of "example" −

<div class = "example">...</div>

Attributes may only be specified within start tags and must never be used in end tags.

HTML attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

Here is a complete list of HTML Attributes.

The <img> tag

In today’s modern digital world, images are everything. The <img> tag has everything you need to display images on your site. Much like the <a> anchor element, <img> also contains an attribute.

The attribute features information for your computer regarding the source, height, width, and alt text of the image.

You can also define borders and other styles around the image using the class attribute. However, we shall cover this in a later tutorial.

The file types generally used for image files online are: .jpg, .png, and (less and less) .gif.

Alt-text is important to ensure that your site is ranked correctly on search sites and also for visually impaired visitors to your site.

The <img> tag normally is written as follows:

<img src="yourimage.jpg" alt="Describe the image" height="X" width="X">

Now before we look forward to some more tags we should try some basic code -

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>HTML Document Structure Example</h1>

<p>This page should be tried in safari, chrome or Mozila.</p>

</header>

<nav>

<ul>

<li><a href = "https://www.Techpedal.com/html">HTML Tutorial</a></li>

<li><a href = "https://www.Techpedal.com/css">C Tutorial</a></li>

C++ Tutorial</a></li>

</ul>

</nav>

<p>Once article can have multiple sections</p>

</section>

</article>

<aside>

<p>This is aside part of the web page</p>

</aside>

<p>Created by <a href = "https://Techpedal.com/">Rachit Jain</a></p>

</footer>

</body>

</html>

It looks like this -

Ordered List

The first is an <ol>: This is an ordered list of contents. For example:

An item
Another item
Another goes here.

Inside the <ol> tag we list each item on the list inside <li> </li> tags.

For example:

<ol>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ol>

Unordered List

The second type of list that you may wish to include is an <ul> unordered list. This is better known as a bullet point list and contains no numbers.

An example of this is:

<ul>
<li>This is </li>
<li>An Unordered </li>
<li>List </li>
</ul>

Definition List

Finally, you may wish to include a definition list <dl> on your page. An example of a <dl> list is as follows:

HTML: A hypertext markup language is a programming language used to create web pages and is rendered by a web browser.

The code used for the above is as follows:

<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>

Let’s try it out. Open index.html and on a new line, enter the following HTML:

<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>

Now hit save and check out the results in your browser. If everything worked out then it will display a bullet-pointed table displaying the information above.

Well HTML is a very vast Language so here I'm going to give you Lastest Cheat Sheet for HTML where you can further learn about HTML

That all for in this blog if have any kind of question do tell me in the comment section and I would love to answer it all

Go download from Here

Cheatsheet link-

https://drive.google.com/drive/folders/1uaWi8jx2svfcwMPUsceaV6vmEuVD37D_?usp=sharing

HTML For begninners

What is HTML?

The History of HTML

What are Tags and Attributes?

What Are HTML Tags?

What are HTML Attributes?

HTML Editors

Sublime Text 3

What To Avoid

Creating Your First HTML Webpage

Basic Construction of an HTML Page

Further Tags

Let’s try out a basic `<head>` section:

Adding Content

How to Add HTML Headings To Your Web Page

Creating Your Heading

The Moment of Truth: Click the newly saved file and your first-ever web page should open in your default browser. It may not be pretty it’s yours… all yours. Evil laugh

How To Add Text In HTML

:

Other Key Elements

They are as follows

The DOCTYPE

Character Encoding

The <script> tag

The <link> tag

HTML Elements

HTML Attributes

Ordered List

Unordered List

Definition List

0 Comments

HTML For begninners

What is HTML?

The History of HTML

What are Tags and Attributes?

What Are HTML Tags?

What are HTML Attributes?

HTML Editors

Sublime Text 3

What To Avoid

Creating Your First HTML Webpage

Basic Construction of an HTML Page

Further Tags

Let’s try out a basic <head> section:

Adding Content

How to Add HTML Headings To Your Web Page

Creating Your Heading

The Moment of Truth: Click the newly saved file and your first-ever web page should open in your default browser. It may not be pretty it’s yours… all yours. *Evil laugh*

How To Add Text In HTML

:

Other Key Elements

They are as follows

The DOCTYPE

Character Encoding

The <script> tag

The <link> tag

HTML Elements

HTML Attributes

Ordered List

Unordered List

Definition List

0 Comments

Let’s try out a basic `<head>` section:

The Moment of Truth: Click the newly saved file and your first-ever web page should open in your default browser. It may not be pretty it’s yours… all yours. Evil laugh