Skip to content
/ html-tutorial-for-beginners Public

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

License

MIT license
3 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Subham-Maity/html-tutorial-for-beginners

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

118 Commits

1. PDF (Detailed Explain)

1. PDF (Detailed Explain)

 
 

2. All Experiments And Codes

2. All Experiments And Codes

 
 

3.Projects

3.Projects

 
 

4.HTML CheatSheet

4.HTML CheatSheet

 
 

5.Images(ignore)

5.Images(ignore)

 
 

LICENSE

LICENSE

 
 

README.md

README.md

 
 

Repository files navigation

HTML Tutorial For Beginners

I cover all aspects of HTML from Basic to Pro Level

Writer Intro

I am Subham Maity.

Welcome to this book on "Learning HTML In 4 Steps". I love Programming. One of the aims I had when I started CodeXam was to make learning programming easy.

At CodeXam, we ask ourselves one question every day: "How do we create awesome learning experiences?"

Help us improve this guide - Fork, Pull Requests, Shares and Likes are recommended!

Chapters

Intro

For Detailed with visualization

What is HTML ?

An HTML file contains the structure of the page itself. 
It is kind of like the structure of the building.

What is CSS ?

A CSS file contains the styling of the page. 
It allows you to change colors, positioning and more. 
It is kind of like the design of the building itself.

What is JavaScript ?

A JavaScript file determines the dynamic and interactive elements on the page. 
It determines what happens when users click, hover or type within certain elements. 
This is kind of like the functionality of the building.

Use Extension And Software ?

1.VSCODE

2.Pretty Formatter

3.Live Server

Level 1

1.Basic HTML

1.Hyper Text Markup Language

2.HTML is the code that is used to

3.structure a web page and its content.

4.The component used to design the

5.structure of websites are called HTML tags

2.First HTML File

index.html(It is the default name for a website's homepage)

1.Create a folder on your computer for your project. Name the folder Portfolio (or anything you want).

2.Open VS Code.

3.Open the File menu and select Open Folder …. Browse for the folder you created and open it.

4 .Right-click below the folder and select New File. Name the file index.html.

5.Now you have a blank text file named index.html.

3.HTML Tag

A container for some content or other HTML tags

4.Basic HTML Page

1.Open vs Code

2. and type !

3.Body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

5.Quick Points

1.Html tag is parent of head & body tag

<html lang="en">    </html>

2.Most of html elements have opening & closing tags with content in between

<head>   </head>

3.Some tags have no content in between, eg -

<br>

4.We can use inspect element/view page source to edit html -

Like This

view-source:https://www.google.com/

6.Comments in HTML

This is part of code that should not be parsed.

<!-- This is an HTML Comment -->

7.HTML is NOT case sensitive

<html> = <HTML>
<p> = <P>
<head> = <HEAD>
<body> = <BODY>

Level 2

1.Basic HTML Tags

Attributes are used to add more information to the tag

<html lang="en">

2.Heading Tag

Attributes are used to add more information to the tag

Heading 1 (most important)

Heading 2

Heading 3

Heading 4

Heading 5 (least important)
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 1</h6>

3.Paragraph Tag

Used to add paragraphs in HTML

<p> This is a sample paragraph </p>

4.Anchor Tag

Used to add links to your page

<a href="https://google.com"> Google </a>

How it looks

5.Image Tag

Used to add links to your page

<img src="/image.png" alt="Description">

6.Br Tag

Used to add next line(line breaks) to your page

<br>

7.Bold, Italic & Underline Tags

Used to highlight text in your page

<b> Bold </b>
<i> Italic </i>
<u> Underline </u>

8.Big & Small Tags

Used to display big & small text on your page

<big> Big </big>
<small> Small </small>

9.Hr Tag

Used to display a horizontal ruler, used to separate content

<hr>

10.Subscript & Superscript Tag

Used to display a horizontal ruler, used to separate content

<sub> subscript </sub>
<sup> superscript </sup>

11.Pre Tag

Used to display text as it is (without ignoring spaces & next line)

<pre> This
is a sample
text.
</pre>

Level 3

1.Page Layout Techniques

using Semantic tags for layout using the Right Tags

<header>
  <main>
    <footer>

header

main

footer

2.Inside Main Tag

a.Section Tag For a section on your page

<section>

Code

<!DOCTYPE html>
<html>
<body>

<h1>The section element</h1>

<section>
  <h2>WWF History</h2>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h2>WWF's Symbol</h2>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

</body>
</html>

b.Article Tag For an article on your page

<article>

Code

<!DOCTYPE html>
<html>
<body>

<h1>The article element</h1>

<article>
  <h2>Google Chrome</h2>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
  <h2>Mozilla Firefox</h2>
  <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
  <h2>Microsoft Edge</h2>
  <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

</body>
</html>

c.Aside Tag For content aside main content(ads)

<aside>

Code

<!DOCTYPE html>
<html>
<body>

<h1>The aside element</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
  <h4>Epcot Center</h4>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

</body>
</html>

3.Revisiting Anchor Tag

a.For New Tab

<a href="https://google.com" target="main"> Google </a>

b.For clickable Pic

<a href="https://google.com"> <img src="link"> </a>

4.Revisiting Image Tag

a.Set Height

<img src="link" height=50px >

b.Set Width

<img src="link" width=50px >

5.Div Tag

a.Div is a container used for other HTML elements

b.Block Element (takes full width)

c.List : Div Tags

List : Div Tags
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

6.Span Tag

a.Span is also a container used for other HTML elements

b.Inline Element (takes width as per size)

c.List : Span Tags

List : Span Tags
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<tt>
<var>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>

Level 4

1.Ordered and UnOrdered List

Lists are used to represent real life list data.

Type 1 Type 2
unordered ordered

Unordered

<ul>
<li> Apple </li>
<li> Mango </li>
</ul>

Implement

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<header></header>
<main>
  <ul>
    <li>Apple</li>
    <li>Mango</li>
    <li>Litchi</li>
  </ul>
</main>
<footer></footer>


</body>
</html>

Unordered Sublist

Implement

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<header></header>
<main>
  <ul>
    <li>Apple</li>
    <li>Mango</li>
    <ul>
      <li>color : yellow</li>
      <li>season : summer /li>
    </ul>
    <li>Litchi</li>
  </ul>
</main>
<footer></footer>


</body>
</html>

Ordered

<ol>
  <li> Apple </li>
  <li> Mango </li>
</ol>

Implement

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<header></header>
<main>
  <ol>
    <li>Apple</li>
    <li>Mango</li>
    <li>Litchi</li>
  </ol>
</main>
<footer></footer>


</body>
</html>

Ordered Sublist

Implement

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<header></header>
<main>
  <ol>
    <li>Apple</li>
    <li>Mango</li>
    <ol>
      <li>color : yellow</li>
      <li>season : summer </li>
    </ol>
    <li>Litchi</li>
  </ol>
</main>
<footer></footer>


</body>
</html>

2.Tables in HTML

Tables are used to represent real life table data.

<tr> used to display table row
<td> used to display table data
<th> used to display table header

tr tag

Implement

<!DOCTYPE html>
<html>
<head>
  <style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>The tr element</h1>

<p>The tr element defines a row in a table:</p>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

td tag

Implement

<!DOCTYPE html>
<html>
<head>
  <style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>The td element</h1>

<p>The td element defines a cell in a table:</p>

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

</body>
</html>

Implement

<!DOCTYPE html>
<html>
<head>
  <style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>The th element</h1>

<p>The th element defines a header cell in a table:</p>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

Caption in Tables

<caption> Student Data </caption>

Implement

<!DOCTYPE html>
<html>
<head>
  <style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>The caption element</h1>

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

thead & tbody & tfoot in Tables

<thead> to wrap table head
<tbody> to wrap table body

Implement

<!DOCTYPE html>
<html>
<head>
  <style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>The thead, tbody, and tfoot elements</h1>

<table>
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>Sum</td>
    <td>$180</td>
  </tr>
  </tfoot>
</table>

</body>
</html>

Colspan attribute in Tables

<th colspan="2" >

  Sum: $180 
</th>
<!DOCTYPE html>
<html>
<head>
  <style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>The td colspan attribute</h1>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>

</body>
</html>

3.Form in HTMl

Forms are used to collect data from the user

Eg- sign up/login/help requests/contact me

<form>
form content
</form>

Implement

<!DOCTYPE html>
<html>
<body>

<h2>Text input fields</h2>

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body>
</html>

Action in Form

Action attribute is used to define what action needs to be performed when a form is submitted

<form action="/action.php" >

Form Element : Input

Taking input from user and placeholder means what will be written down already in that blank space

<input type="text" placeholder="Enter Name">

LABEL

Screen reader users (will read out loud the label, when the user is focused on the element) Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the element, it toggles the input (this increases the hit area).

<input type="radio" value="class X" name="class" id="id1">
<label for="id1">
</label>
<input type="radio" value="class X" name="class" id="id2">
<label for="id2">
</label>

Radio Button

Radio buttons let a user select only one of a limited number of choices:

<!DOCTYPE html>
<html>
<body>

<h1>Display Radio Buttons</h1>

<form action="/action_page.php">
  <p>Please select your favorite Web language:</p>
    <input type="radio" id="html" name="fav_language" value="HTML">
    <label for="html">HTML</label><br>
    <input type="radio" id="css" name="fav_language" value="CSS">
    <label for="css">CSS</label><br>
    <input type="radio" id="javascript" name="fav_language" value="JavaScript">
    <label for="javascript">JavaScript</label>

  <br>

  <p>Please select your age:</p>
  <input type="radio" id="age1" name="age" value="30">
  <label for="age1">0 - 30</label><br>
  <input type="radio" id="age2" name="age" value="60">
  <label for="age2">31 - 60</label><br>
  <input type="radio" id="age3" name="age" value="100">
  <label for="age3">61 - 100</label><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Class & Id

The HTML class attribute is used to specify a class for an HTML element. A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

<div id="id1" class="group1">
</div>


<div id="id2"> class="group1">
</div>

Checkbox

Let the user select one or more options of a limited number of choices:

<label for="id1">
  <input type="checkbox" value="class X" name="class" id="id2">
</label>
<label for="id2">
  <input type="checkbox" value="class X" name="class" id="id2">
</label>

Textarea

A multi-line text input control (text area):

<textarea name="feedback" id="feedback" placeholder="Please add Feedback">
  
</textarea>

Select Tag

The <select> element is used to create a drop-down list. The <select> element is most often used in a form, to collect user input.

<select name="city" id="city">
  <option value="Delhi"> Delhi </option>
  <option value="Mumbai"> Delhi </option>
  <option value="Bangalore"> Delhi </option>
</select>

Implement A Proper Form

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<h4>Registration Form</h4>
<form action="/action.php">
  <input type="text" placeholder="username" />
  <br />
  <br />
  <input type="password" placeholder="password" />
  <br /><br />
  <h5>Select your class</h5>
  <label for="101">
    <input type="radio" value="class XI" name="class" id="101" />class XI
  </label>
  <br /><br />
  <label for="102">
    <input type="radio" value="class XII" name="class" id="102" />class XII
  </label>
  <br /><br />
  <h5>Select Fav Subjects</h5>
  <label for="math">
    <input type="checkbox" value="math" name="subject" id="101" /> Math
  </label>
  <br /><br />
  <label for="phy">
    <input type="checkbox" value="phy" name="subject" id="102" /> Physics
  </label>
  <br /><br />
  <label for="chem">
    <input type="checkbox" value="chem" name="subject" id="103" /> Chemistry
  </label>
  <br /><br />
  <label for="CS">
    <input type="checkbox" value="CS" name="subject" id="104" /> Computer
    Science
  </label>
  <br /><br />
  Select your city
  <select name="city">
    <option value="Delhi">Delhi</option>
    <option value="Banglore">Banglore</option>
    <option value="Pune">Pune</option>
    <option value="Mumbai">Mumbai</option>
  </select>
  <br /><br />
  <textarea
          name="feedback"
          id="101"
          placeholder="please give your valuable feedback here"
          rows="5"
  ></textarea>
  <br />
  <input type="submit" value="submit" />
</form>
<body></body>
</html>

4.Video Embed

iframe Tag

website inside website

<iframe src="link">

Implement

<!DOCTYPE html>
<html>
<body>
<iframe
        width="424"
        height="238"
        src="https://www.youtube.com/embed/q933Vpo-Naw"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
></iframe>
</body>
</html>

Video Tag

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

The <video> tag contains one or more tags with different video sources. The browser will choose the first source it supports.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

<video src="myVid.mp4"> My Video </video>

Attributes

  • controls
  • height
  • width
  • loop
  • autoplay

Implement

<!DOCTYPE html>
<html>
<body>
<video width="560" height="315" src="/myVideo.mov" controls> my video
  <!-- <video width="560" height="315" src="/myVideo.mov" autoplay> my video -->
  <!-- <video width="560" height="315" src="/myVideo.mov" loop> my video -->
</video>
</body>
</html>

About

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

Topics

javascript css html learning basic website design development book master beginner-project advanced projects html-template cheats html-css-javascript website-template

Resources

Readme

License

MIT license
Activity

Stars

3 stars

Watchers

2 watching

Forks

1 fork
Report repository

Releases 1

html A-Z For Beginners to Master Vol 1 Latest
Apr 11, 2022

Packages

No packages published

Languages