HTML For Beginners The Easy Way: Start Learning HTML & CSS Today.
WHAT IS HTML? (WEB DEVELOPMENT)
HTML (HyperText Markup Language) is the standard markup language used to create and design the structure of web pages. It forms the foundation of most websites, allowing web developers to organize and display content in a way that browsers can interpret and present to users.
Key Points About HTML:
Markup Language:
- HTML is not a programming language; it's a markup language.
- It uses tags to describe the structure of web content, such as paragraphs, headings, images, links, etc.
Elements and Tags:
- HTML documents are made up of elements, which consist of an opening tag, content, and a closing tag.
- Example of an HTML element: <p>This is a paragraph.</p>, where <p> is the opening tag, and </p> is the closing tag.
Document Structure:
- An HTML document starts with a <!DOCTYPE html> declaration, followed by an <html> element that contains a <head> and a <body>.
- The <head> contains meta-information about the page (like the title), and the <body> contains the actual content displayed on the page.
Cross-Browser Compatibility:
- HTML is supported by all major web browsers (Chrome, Firefox, Safari, Edge, etc.), ensuring that content appears consistently across different platforms.
Hyperlinks:
- One of the primary purposes of HTML is to enable hyperlinking, allowing users to navigate from one page to another via clickable links (<a> tags).
Semantic Structure:
- Modern HTML uses semantic tags (like <header>, <footer>, <article>, <section>) to give meaning to the content, improving accessibility and SEO.
Example of a Simple HTML Document:
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple web page made with HTML.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
In summary, HTML is the essential building block for creating web pages and applications, providing the structure that is styled by CSS and made interactive with JavaScript.
HTML for Absolute Beginners
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 guides.
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 Hyper Text 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.
Golden Rules To Remember
- The vast majority of tags must be opened (<tag>) and closed (</tag>) with the element information such as a title or text resting between the tags.
- When using multiple tags, the tags must be closed in the order in which they were opened. For example:
<strong><em>This is really important!</em></strong>
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:
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 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
<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
These tags must be opened and closed around the text in question.
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>
Don’t forget to hit save and then refresh the page in your browser to see the results.
LINKEDIN PAGE SUMIT BHARTI
