1. Home
HTML

Learn HTML: A Comprehensive Tutorial for Beginners | Step-by-Step Guide

Learn HTML from scratch! Our tutorial covers basics to advanced concepts. Start coding websites today with step-by-step guidance.

  • 49
  • 12 Hours
right-top-arrow
40. 

HTML Code

Updated on 21/08/2024243 Views
Content

In this tutorial on HTML code, I will explore the fundamentals of HTML, explaining its syntax and providing practical examples demonstrating its advantages and versatility. Whether you want to improve your web development skills, start a personal blog, or pursue a career in front-end web development, learning HTML will surely help in all of the avenues.

Setting Up and Getting Started

Before I move on to coding in HTML, let me help you set up your device.

Choosing an HTML code editor

Choose a text editor or integrated development environment (IDE) to write HTML code. Popular options include Visual Studio Code, Sublime Text, Atom, Notepad++, Brackets, and others. Download and install the text editor/IDE of your choice from the official website. You can also choose an online HTML compiler for HTML code running online. This is where you will write your new HTML code.

Create a new HTML file

Open the text editor/IDE you have just downloaded. Then, create a new file and save it with the .html extension, such as index.html, to indicate that it is an HTML file. After this choose a suitable spot on your computer for saving the file.

Start coding

Now you can start coding in HTML in the new file adhering to the format HTML code. The basic format of HTML includes.

Code:

<!DOCTYPE html>

<html>

       <head>

                  (enter content here)

        </head>

        <body>

                (enter content here)        

        </body>

</html>

Writing content and finishing up

Now, insert the necessary content into the basic format. When the HTML code for website design is complete, save the file and run it on your browser. After you host it, your project is ready to be on the internet.

HTML Code to Style Text

We can also use tags and attributes to change how text looks in HTML. Let me share an example where I have used most of the styles commonly found in HTML code.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> HTML code for Text Styles Example </title>

</head>

<body>

    <p> <strong> This text is bold. </strong> </p>

    <p> <em> This text is italic. </em> </p>

    <p> <u> This text is underlined. </u> </p>

    <p> <mark> This text is highlighted. </mark> </p>

    <p> <s> This text has a strike-through. </s> </p>

    <p> <span style="text-transform: uppercase;"> This text is in uppercase. </span> </p>

    <p> <span style="font-variant: small-caps;"> This text is in small caps. </span> </p>

    <p> <span style="font-size: 21px;"> This text has a custom font size. </span> </p>

    <p> <span style="color: blue;"> This text has a custom font color which is blue. </span> </p>

</body>

</html>

In the above HTML code example, as you can see, different text styles can be achieved easily using different HTML tags and attributes.

  • The tags used are <strong> for bold, <em> for italic, <mark> for highlight, and <s> for strikethrough. The <u> tag is used in HTML code for underline.
  • Using inline styles (style="...") within <span> tags allows for direct text transformation, font variety, font size, and font color.

You should keep in mind that CSS is generally suggested for styling HTML elements because it allows for greater flexibility, maintainability, and separation of responsibilities. However, in some circumstances, inline styles can be used to provide quick styling without the requirement for external CSS.

HTML Code for Picture

Nowadays, almost every website has an image. It makes the website more appealing. Let me show you the HTML code for adding image to your website.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Image Example</title>

</head>

<body>

    <img src="https://images.pexels.com/photos/17363613/pexels-photo-17363613/free-photo-of-cat-lying-down-on-floor.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Description of Image"

    width="350"

    height="400">

</body>

</html>

In the above example, you can replace the link in the src attribute with the exact path or URL for your image file. For example, if your image is in the same directory as your HTML file, you can just use its name. Otherwise, you can link an image hosted on another website directly by using its link. Keep in mind that it takes longer for an image to load if you have a link instead of hosting the picture directly on your own server.

"Description of Image" should be changed with a brief description or alternative text about the image. This text is displayed in case the image fails to load or for accessibility reasons.

HTML Code for Hyperlink

Hyperlinking is the practice of including clickable links or elements in HTML code that allow users to travel between web pages, sections of the same page, or other resources such as websites, emails, or phone numbers.

Let me show you a simple HTML code to explain different types of hyperlinking in HTML.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>All Types of Hyperlinks example in HTML</title>

    <style>

        .button {

            display: inline-block;

            padding: 11px 22px;

            background-color: #123acc;

            color: #fff;

            text-decoration: none;

            border-radius: 6px;

        }

        .button:hover {

            background-color: #1234b3;

        }

    </style>

</head>

<body>

    <p><a href="https://www.example.com">Text hyperlink Example in HTML</a></p>

    

    <p><a href="https://www.example.com"><img src="https://images.pexels.com/photos/17363613/pexels-photo-17363613/free-photo-of-cat-lying-down-on-floor.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Image Link" 

    width="100" height="150" /></a></p>

    

    <p><a href="https://www.example.com" class="button">Button Link</a></p>

    

    <p><a href="mailto:info@example.com">Email Link example in HTML</a></p>

    

    <p><a href="tel:+1234567890">Phone Link examplpe in HTML</a></p>

    

    <p><a href="#section-id_1">Anchor Link example in HTML</a></p>

    

    <section id="section-id_1">

        <h2>Target Section</h2>

        <p>This is the target section for the anchor link.</p>

        <p><a href="#">Back to Top</a></p>

    </section>

</body>

</html>

In the above example, 

  • There is a text link, an image link, a CSS-styled button link, an email link, a phone link, and an anchor link that takes the user to a specified section of the webpage. 
  • The button-styled link (Button Link) is styled with CSS to look like a button with a blue background color. 
  • The anchor link (Anchor Link) takes you to the part with the ID section-id on the same webpage.
  • The target section contains a link (Back to Top) that takes you back to the top of the page (href="#").

HTML Code for Login Form

In this section, let me show an HTML code example for creating a login form using HTML and CSS.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Login Form Example in HTML</title>

    <style>

        body {

            font-family: Arial, sans-serif;

        }

        .container {

            max-width: 400px;

            margin: 50px auto;

            padding: 20px;

            border: 1px solid #ccc;

            border-radius: 5px;

            background-color: #f9f9f9;

        }

        input[type="text"], input[type="password"] {

            width: 100%;

            padding: 11px;

            margin: 9px 0;

            border: 1.5px solid #ccc;

            border-radius: 4px;

            box-sizing: border-box;

        }

        input[type="submit"] {

            width: 100%;

            padding: 10px;

            margin-top: 10px;

            border: none;

            border-radius: 4px;

            background-color: skyblue;

            color: white;

            cursor: pointer;

        }

        input[type="submit"]:hover {

            background-color: darkblue;

        }

    </style>

</head>

<body>

    <div class="container">

        <h2>Login Form Example in HTML</h2>

        <form >

            <label for="username">Username:</label>

            <input type="text" id="username" name="username" required>

            <label for="password">Password:</label>

            <input type="password" id="password" name="password" required>

            <input type="submit" value="Login">

        </form>

    </div>

</body>

</html>

In the above example, the portion includes a <style> block with CSS rules for styling the login form and associated elements. The CSS styles define properties for the body, container, input fields, and the submit button, such as font family, width, padding, margin, border, border-radius, background color, and cursor.

There are two input fields (<input type = “text”> and <input type = “password”>) for the username and password, each with its own label (<label>) for better accessibility and user experience. For CSS or JavaScript targeting, the username input has the id attribute "username", and the password input has the id attribute "password". The needed attribute specifies that both fields must be completed before the form can be submitted. 

Wrapping Up

HTML code is the foundation of front-end web development, allowing producers to arrange content, add functionality, and create interesting user experiences. It is simple yet useful, making it a necessary skill for anybody interested in web development and who wants to get a job as a code developer or an HTML code tester. 

I’d recommend enrolling in a certified course to learn more complex HTML code for websites is better. If the course is from a reputed source, it helps with your CV a lot as well. Check out upGrad. Their courses are in collaboration with some of the best universities around the world. Some of the best professors in this field have curated these courses, making sure you get optimal value out of them.

Frequently Asked Questions

  1. How to write HTML code?

You need to first set up an IDE or a text editor to write code in HTML. Then, you can use the basic structure tags like <!Doctype html>,  <html>, <head>, <body>, <meta>, <title>. You can further customize your website according to your needs by adding relevant content.

  1. What is HTML for code?

HTML, which stands for HyperText Markup Language, is a coding language used to construct and structure content on websites. It is made up of tags and components that specify the layout, text, graphics, links, and interactive aspects of a webpage.

  1. What are examples of HTML codes?

Let me show you a basic HTML code example to print Hello World.

Code:

<!DOCTYPE HTML>

<html>

<head>

<title> Simple HTML program </title>

</head>

<body>

<p> Hello World </p>

</body>

</html>

  1. How do I start HTML code?

To start HTML code, always start with <!DOCTYPE html> to declare the document type. Then, to start the HTML document, type <html>. Within <html>, use <head> for metadata and <body> for visible content. To add content, use tags like <h1> for headers, <p> for paragraphs, <img> for images, and so on.

  1. Where HTML code is written?

A code in HTML is written using a text editor or integrated development environment (IDE) on a computer.

  1. Who writes HTML code?

Web developers and designers write codes in HTML to build and structure content for websites.

  1. How to insert code in HTML?

To insert code in HTML, we use the <pre> and <code> tags.

  1. How to code HTML on mobile?

To code HTML on mobile you can use a text editor or coding apps for mobiles, like QuickEdit Text Edit for Android and Buffer Editor for iPhones.

Rohan Vats

Rohan Vats

Software Engineering Manager @ upGrad. Assionate about building large scale web apps with delightful experiences. In pursuit of transforming engi…Read More

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...