The_OS_Coder
HTML Basics to Advanced: The Complete Guide for Beginners

HTML Basics to Advanced: The Complete Guide for Beginners

the_OldSchool_coder's photo
the_OldSchool_coder
·

7 min read

Table of contents

Description:
Learn HTML, the foundation of web development, with this comprehensive guide. Explore everything from basic tags and structure to advanced techniques like forms, multimedia integration, and semantic elements. Perfect for beginners looking to build professional, user-friendly websites.

a> Basics of html and basic tags :→

html :-> hyper text markup language

meta data :-> info about the anything. (mp3.mp4)

1> doctype html (is saying) hey my document type is html )

2> html don’t know about space

3> 6 heading (h1---h6)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>basic-html-by-ayush</title>
</head>
<body>
  <h1>hello world!</h1>
  <h2>hello world!</h2>
  <h6>hello world!</h6>
</body>
</html>

4>Emmet is give short cur for ez part and also give in vs code by default

5>ul>li*3 => 3 li in ul (emmet)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lists</title>
</head>
<body>
  <ul> <!--un-ordered list-->
    <li>apple</li>
    <li>mango</li>
    <li>banana</li>
  </ul>
  <ol>
    <li>apple</li>
    <li>mango</li>
    <li>banana</li>
  </ol>

</body>
</html>

6>block line element => take the whole line space and block the space

7>inline elements => take the only space given

8>list => ol and ul more over there list items will be shown in "li" format

9> ol => ordered list ul => un-ordered list and li=> list items

10>block level items :->

a>heading h1 to h6(that will give headings)

b>ol, li

c>li

d>p

e>div

11> inline elements =>

a>span

b>iimg

c>a tag

12> tag is a img,a

14> attribute is href and width height

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>image</title>
</head>
<body>

<img src="source" alt="about the pic">
<!-- image is self closing tag -->
<a href="souce link"></a>

</body>
</html>

15> controls can control video audio and all

16> we can go to mdn documentation and learn all

17> there is semantic tag => that means tag which have meaning like => a>nav

b>header

c>footer and everything which have any meaning

18>tr => table row and td => table data

19>in tr there will be td

20>all will be in table tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>table</title>
  </head>
  <body>
    <table class="login">
      <tr>
        <td>name</td>
        <td>email</td>
        <td>pasword</td>
      </tr>
    </table>
    <table>
      <tr>
        <td>ayush</td>
        <td>basakayush942@gmail.com</td>
        <td>test1</td>
      </tr>
    </table>
    <!--make basic table-->
  </body>
</html>

21>action in the form show where the data of the form to be gone

b>Forms in HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FORM</title>
  </head>
  <body>
    <label for="basics">
      <form action="place where the data go">
        E-mail:<input type="email" name="email" id="" /> basketball:<input
          type="checkbox"
          name="basketball"
          id=""
        />
        football:<input type="checkbox" name="" id="" /> hindu:<input
          type="radio"
          name=""
          id=""
        />
      </form>
    </label>
  </body>
</html>

22>by title => tooltip is given

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tooltip</title>
  </head>
  <body>
    <img src="./webp.webp" alt="" width="200px" title="html logo">
  </body>
</html>

\=> here is no code the code part will be done by exercises only

-by Ayush Basak(full stack dev)

c>11 task of html

1>Coding Exercise 1: Create a Simple Heading

2>Coding Exercise 2: Create a Paragraph with a Link

3>Coding Exercise 3:tooltip on hover

4>Coding Exercise 4:make a button

5>Coding Exercise 5:make an unordered list

6>Coding Exercise 6:make simple table

7>Coding Exercise 7:make a form with input field

8>Coding Exercise 8:make a form with dropdown menu

9>Coding Exercise 9:make a image with alt text

10>Coding Exercise 10:hyperlink that will open on new tab

11>Coding Exercise 11:create progress bar in html

d>11 task solution to master “HTML” :→

In the previous page you will get 11 task to master html

1>Coding Exercise 1: Create a Simple Heading

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>task1</title>
</head>
<body>
  <!--CREATING A SIMPLE HEADING-->
  <h1>HELLO WORLD</h1>
</body>
</html>

1>OUTPUT OF TASK-1 IS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>task2</title>
</head>
<body>
  Lorem <a href="https://www.linkedin.com/in/ayush-basak1/">ipsum dolor</a>, sit amet consectetur adipisicing elit. Labore culpa atque cum perferendis! A quis exercitationem laboriosam est velit explicabo! Debitis nisi nam quasi minus neque reiciendis facilis voluptatibus ipsum!
  Cupiditate corrupti, eius eaque atque ullam ratione dolorem laboriosam veritatis optio, praesentium rem consectetur sequi, consequatur facilis velit ut mollitia cumque sapiente delectus in! Dolorum earum laborum perspiciatis aliquam quisquam!
</body>
</html>

2>output:→

3>Coding Exercise 3:tooltip on hover

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>task3</title>
</head>
<body>
  <!--Coding Exercise 3:tooltip on hover-->
  <img src="./index.html" alt="html" width="60%" title="html logo">
</body>
</html>

4>Coding Exercise 4:make a button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>task3</title>
  </head>
  <body>
    <!--4>Coding Exercise 4:make a button-->
    <label for="login">
      <button>login</button>
    </label>
  </body>
</html>

4>output:→

5>Coding Exercise 5:make an unordered list

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>task5</title>
  </head>
  <body>
    <!--Coding Exercise 5:make an unordered list-->
    <ul>
    urordered list :->
      <li>appple</li>
      <li>banana</li>
      <li>pitch</li>
    </ul>
  </body>
</html>

5>output:→

6>Coding Exercise 6:make simple table

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>task6</title>
  </head>
  <body>
    <!--6>Coding Exercise 6:make simple tablew-->
    <table>
      <td>
        <tr>
          name
        </tr>
        <tr>
          dept
        </tr>
        <tr>
          roll
        </tr>
      </td>
      <table>
        <td>
          <tr>
            ayush
          </tr>
          <tr>
            eco
          </tr>
          <tr>
            1
          </tr>
        </td>
      </table>
      <table>
        <td>
          <tr>
            piyush
          </tr>
          <tr>
            maths
          </tr>
          <tr>
            2
          </tr>
        </td>
      </table>
    </table>
  </body>
</html>

6>output:→

7>Coding Exercise 7:make a form with input field

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>task7</title>
</head>
<body>
  <!--make a form with input field-->
  <label for="login">
  <form action="to where the dat will go">
    name: <input type="text" placeholder="name">
    E-mail: <input type="email" name="email" id="">
    phone-number: <input type="number" name="number" id="">
    <button>login here</button>

  </form>
</label>
</body>
</html>

7>output:

8>Coding Exercise 8:make a form with dropdown menu

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>task8</title>
  </head>
  <body>
    <!--8>Coding Exercise 8:make a form with dropdown menu-->

    <form action="go where the dats is important ">
      <select name="games" id="">
        <option value="pubg">pubg</option>
        <option value="bgmi">bgmi</option>
        <option value="valorant ">valorant</option>
      </select>
    </form>
  </body>
</html>

8>output:→

9>Coding Exercise 9:make a image with alt text

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>task9</title>
  </head>
  <body>
    <!--9>Coding Exercise 9:make a image with alt text-->
    <img src="/webp.webp1" alt="htmllogo" width="200px">
  </body>
</html>

9>output

here we give the wrong link if the picture and alt attribute used when the pic will break it will give alt text to us

10>Coding Exercise 10:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tast-10</title>
</head>
<body>
  <a href="https://www.linkedin.com/in/ayush-basak1/" target="_blank"></a>
</body>
</html>

10>output→

so the anchor tag (a) there is a attribute named =>”target=_blank” this will open an other tab .

11>Coding Exercise 11:create progress bar in html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tast-11</title>
  </head>
  <body>
    <!--11>Coding Exercise 11:create progress bar in html-->
    <label for="progress in file upload"> file uploading:-> </label>
      <progress id="file" value="50" max="100">
        50
      </progress>

  </body>
</html>

11>output:→

HTML Basics Summary

This guide covers the foundational concepts of HTML, the backbone of web development. Whether you're just starting or brushing up your skills, this summary walks you through the essentials:

  • Introduction to HTML: Understanding the role of HTML as a markup language to structure web content, with examples of basic tags like <html>, <head>, and <body>.

  • HTML Structure: Explanation of metadata, the purpose of <!DOCTYPE html>, and the nature of block-level and inline elements.

  • Lists: Creating ordered (<ol>) and unordered (<ul>) lists, along with Emmet shortcuts for efficient coding.

  • Images and Links: Incorporating images with <img> and hyperlinks with <a>, using attributes like src, alt, and target.

  • Tables and Forms: Designing basic tables with <table>, <tr>, and <td>, and creating forms with input fields, checkboxes, radio buttons, dropdowns, and action attributes.

  • Semantic Elements: Using meaningful tags like <nav>, <header>, and <footer> to improve readability and accessibility.

  • Interactive Elements: Exploring tooltips, progress bars, and media controls.

  • Hands-On Tasks: Eleven practical exercises ranging from creating headings and lists to building forms and progress bars, solidifying your grasp of HTML concepts.

Conclusion

With this guide, you've gained a solid understanding of HTML basics, from tags and structure to advanced elements like forms and tables. By completing the hands-on tasks, you’ve built a strong foundation for web development. The next step is diving into CSS to bring your web pages to life with styling and design.

Onward to CSS—where creativity meets structure!

— by Ayushthebatman (Full stack dev)

Web DevelopmentwebdevFrontend DevelopmentHTML5full stack