HTML TUTORIAL
HTML TUTORIAL
This tutorial is for those who want to learn HTML and create a website. HTML, or Hypertext Markup Language, is the basic language used to structure content on the web. It uses tags to label elements such as headings, paragraphs, and images, which web browsers then interpret and display as a webpage.
HTML is the building block for websites
➔ HTML is a hypertext markup language for the web.
➔ To create a webpage, website or web application, it is necessary to learn HTML along with other technologies.
➔ It is very easy for anyone to learn.
➔ Browsers read HTML documents to display web content correctly.
How the browsers work with HTML
➔ Every browser understands HTML language, because the programming is built-in to the browsers.
➔ Web developers write HTML code along with other web technologies to create webpages or websites.
➔ Browsers read HTML tags and contents within it and know what is the meaning and purpose of each HTML tag.
➔ Finally browser renders the contents on the page, viewers see the web page.
The basic structure of HTML
Every HTML document has to follow a specific structure so that browsers can recognize it and translate or interpret it accordingly.
<!DOCTYPE html>: Tells the browser that the document is an HTML5 file.
<html>: This is the root element that encloses all the content of the page.
<head>: This element contains meta-information that users cannot see, such as the page title, character encoding, and links to CSS.
<body>: This is the main part visible to users and can contain all visible content, including text, images, animations, and videos.
Quickly setting up an HTML coding environment
As a beginner, you can start coding HTML using simple tools on your computer without having to download or install anything.
Text editor: A simple editor like Notepad (Windows) or TextEdit (Mac) can be used to start coding HTML. But for a professional experience, use Visual Studio Code or any other IDE, in which case you will need to download and install the selected IDE.
Creating an HTML file: Create a file with the .html extension and give it any meaningful name like index.html, demo.html. Then save the file with some HTML code.
Viewing the output: Open your saved file in Google Chrome or any other modern web browser to view the results.
Online HTML Editor:: There are many online editors available on the internet to practice and learn HTML, but it is highly recommended to create your own coding and learning environment to learn everything from scratch and in depth.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example Basic Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<h3>My Second Heading</h3>
<p>My first paragraph.</p>
</body>
</html>
Click the "Try it now" button and see how it works.
Sample Code
Copy each file contents and paste it to your project, run and see the final output when everything is correct.
Example HTML Table
<h3>HTML Table Example</h3>
<table>
<tr>
<th>MyStID</th>
<th>MyStName</th>
<th>MyStCity</th>
</tr>
<tr>
<td>ST1000</td>
<td>Julia</td>
<td>New York</td>
</tr>
<tr>
<td>ST1001</td>
<td>Scott</td>
<td>California</td>
</tr>
<tr>
<td>ST1002</td>
<td>A Jennifer</td>
<td>Philadelphia</td>
</tr>
<tr>
<td>ST1003</td>
<td>Anna</td>
<td>Texas</td>
</tr>
<tr>
<td>ST1004</td>
<td>Joseph</td>
<td>Arizona</td>
</tr>
<tr>
<td>ST1005</td>
<td>Thomas</td>
<td>Florida</td>
</tr>
<tr>
<td>ST1006</td>
<td>William</td>
<td>Ohio</td>
</tr>
</table>
Click the "Try it now" button and see how it works.