A Beginner's Guide To Learn Html
HTML or HyperText Markup Language is the foundation of all web pages, so understanding how it works is essential to creating a website. If you want to learn how to code, HTML is a great place to start. This beginner's guide to HTML will teach you the basics of coding in HTML so that you can start your web development journey.
This HTML tutorial will teach you the basics of HTML. After completing this tutorial, you'll find yourself at a basic level of expertise in HTML, from where you'll be able to take yourself to the next level.
|Table of Content|
HTML is the standard markup language for creating web pages and web applications. HTML stands for Hyper Text Markup Language. HTML is an instrumental tool used to structure and present content on the World Wide Web. HTML is written in the form of elements that are the building blocks of HTML pages. HTML elements are represented by tags, which are written using angle brackets.
- HTML tags
Tags are the building blocks of HTML pages. They are used to structure and present content on the web. HTML tags have an opening tag and a closing tag. The opening tag is written using less-than and greater-than symbols, and the closing tag uses less-than and slashes symbols.
There are three types of HTML tags: opening, closing, and empty. Opening tags have a left angle bracket (<) at the start and a right angle bracket (>) at the end. Closing tags have a left angle bracket (<) at the start and a forward slash (/) at the end. Empty tags have a left angle bracket (<) at the start, a forward slash (/) at the end, and no content in between.
- HTML Elements
They are used to structure the content of a page and can be nested inside each other. Elements are represented by tags, which are enclosed in angle brackets. The opening tag has the element's name, and the closing tag has a slash before the element's name.
HTML elements have an opening and a closing tag. The content of an HTML element is everything between the opening and closing tags. For example, the content of the <p> element is everything between the <p> and </p> tags.
Some HTML elements do not have closing tags. These are called empty elements. For example, the <br> element is an empty element. It is used to add line breaks in a document.
- HTML Attributes
HTML attributes are the characteristics of an HTML element. They are used to define an element's behavior or provide additional information about an element. There are four types of attributes: global attributes, element-specific attributes, event attributes, and data attributes.
Global attributes are those that are common to all HTML elements. They include attributes such as id, class, and style. Element-specific attributes are those that are specific to a particular type of element. For example, the href attribute is specific to the <a> element, and the src attribute is specific to the <img> element.
Event attributes are those that define the behavior of an element when an event occurs. For example, the onclick attribute defines what happens when a user clicks on an element.
- HTML Structure
HTML structure refers to how the different elements of a web page are arranged. The basic structure of any HTML document consists of a head and a body. The head element contains the document's title, and the body element contains the document's content.
Now that you know how HTML is used in theory, let's put that into practice by creating an HTML file. To create an HTML file, you will need a text editor. There are various text editors available, both free and paid. Some popular text editors include Visual Studio code and Notepad++. Choose whichever you like (you can even use the notepad already installed on your computer); it wouldn't make any difference to use one or the other at this point and install it.
Once a text editor is open, you will need to create a new file. To do this, go to File> New in your text editor. In the new File, you will need to type in the following code:
<title>My First HTML Page</title>
This code is the basic structure for an HTML page. The <!DOCTYPE> tag tells the web browser that this is an HTML document. The <html> tag is considered the root element of an HTML page. The <head> element contains information about the document, such as the document's title. The <body> element contains the actual content of the page. The <h1> element is used to create a heading, in this example. The text between the <h1> and </h1> tags will be displayed as a heading on the page.
You can save your HTML file using File> Save in your text editor. Be sure to save the File with a .html extension so the web browser will recognize it as an HTML file. For example, if you were creating a file called "mypage," you would save it as "mypage.html."
Once you have saved your HTML file, you can open it in a web browser to view it. To do this, go to the HTML file and double-click; the File will open in your default web browser.
Now that you have an HTML file, you should style it a bit. There are several ways to style HTML elements with CSS, a style sheet language. Inline styling is the most basic method and involves adding the style attribute to an HTML element.
The style attribute can be used to set various style properties, such as color, font family, font size, etc. Add the style tags to your HTML document's <head> section to use internal CSS. All the tags will be applied to the entire document. Here's a simple example:
As you can see, the CSS rules are added between the <style> and </style> tags in the <head> section.
The following components are used to write headers in HTML:
<h1> \s<h2> \s<h3> \s<h4> \s<h5> \s<h6>
The most significant titles should be marked with h1> and h2>, while the remaining tags should be used for sub-headings and less significant information.
This arrangement is used by search engine bots to determine which content on a page is most crucial.
Adding Text To HTML
The simplest way to add text to our HTML page is to use an element that is opened with the tag p>, which produces a new paragraph. The element p contains all of our normal text.
There are a variety of additional elements available when writing text in HTML that we can utilise to modify or alter how the content appears. Other Important Elements
Here are some of them:
|<b>||Bold||Highlight important information|
|<strong>||Strong||Similarly to bold, to highlight key text|
|<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/td>|
|<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|
It is necessary to open and close these tags around the target text.
For example, <p>
Welcome to my new website, which I just launched. This website will serve as my new online residence. </p> To view the results, don't forget to hit save and then reload the page in your browser.
The majority of the links you click on when browsing the web lead to either another page on the website you are now visiting or to an external website. Links are contained in an attribute that the a> tag opens. Since this is the first element we've encountered to employ an attribute, it differs from the tags stated earlier in terms of appearance.
If you want to learn HTML, there are a few things you should keep in mind. First, HTML is a straightforward language. You don't need to know any programming to learn it. Second, many resources are available online to help you learn. Third, once you know the basics, you can start playing around with code and experimenting to see what you can create.
If you're starting, check out some of the resources below. With a little effort, you'll be writing HTML code in no time!
- W3Schools: This website offers comprehensive free coding courses for learning HTML. It covers all the basics and then some.
- Physics Wallah: Physics Wallah offers a great interactive course on HTML & CSS. Learning the basics and doing it at your own pace is excellent.
The language we use to communicate with computers is HTML. It describes how text, images, paragraphs, and other elements on a web page are rendered by browsers. As a result, HTML is the primary language used on the Web. The language is, therefore, crucial for marketers and those learning to program. Understanding the fundamentals of this markup language will enable you to update your website. It allows you to avoid being dependent on a developer, saving you and your company time and money.
Q1. How do I save an HTML file?
Ans. HTML files are saved with the .html extension. For example, if your website is called "My Website", you would save your HTML file as "my-website.html."
Q2. How do I view an HTML file?
Ans. To view an HTML file, you will need a web browser. Navigate to the HTML file you wish to view and open it on any browser.
Q3. How do I make my HTML page interactive?