Basics
Intermediate
Projects

Hey guys <-.-> hope you will find this tutorial helpful. so before learning any tech or language we must have some knowledge of the basics. hence I am starting this tutorial with very basic concepts to advance. so, there are many tutorials then why read this? because it will work as quick notes for you as well as its a beginner friendly. so, let's get started. if you find any problem or mistake in this HTML tutorial, you can contact me.

DAY1

HTML Introduction: HTML stands for Hypertext Machine Learning 😂 . No, don't worry there are no new inventions in HTML ^😉 . HTML simply stands for HYPERTEXT MARKUP LANGUAGE.

-> HTML is used to create web pages and web applications.

-> We can create a static website by HTML only.

-> HTML is a Markup language ( a computing language that consists of easily understandable keywords, names or tags that help format the overall view of a page and the data it contains .) rather than a programming language and it is used to describe the structure of a web page.

This picture of the skeleton represents the structure of a body. similarly, HTML represents the structure of a webpage.

:: Structure of HTML

<!DOCTYPE>

<html>

<head>(stores information about page means page title , page keywords , page description etc.)

<title>Web page title</title>

</head>

<body> ( it is displayed on the browser body )

<h1>Write Your First Heading</h1>

<p>Write Your First Paragraph.</p>

</body>

</html>

-> HTML editors : we can use Notepad , Notepad++ , Vs code , sublime text editor. I recommend a sublime text editor. create a file and save it using the (.html) extension.

-> HTML comments : <!-- write your comment -- >

->Tags: An HTML tag surrounds the content and applies meaning to it. It is written between < and > brackets.

->Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.

->Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags is termed as HTML elements .

----------------So now let's write our first hello world program😁-----------------

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Hello World</title>  
 </head>  
  <body>  
       <h1> HELLO WORLD</h1> 
  </body>  
</html>

DAY2

HTML Basic Tags: There are many tags in HTML and it's hard to remember all of them so I am going to mention only important tags. rest you can learn by building as many projects as you can :-)

HTML Headings

-> A subtitle that you want to display on the webpage.

-> Six different HTML headings are from <h1> to <h6> tags, from the highest level h1 (main heading) to the least level h6 (least important heading).

-> let's try headings, you can copy and paste this code here in the HTML editor to understand the heading tag.

 <!DOCTYPE html>
 <html>
  <title> learn headings </title>
  <body>
    <h1> Trying heading1 </h1>
    <h2> Trying heading2 </h2>
    <h3> Trying heading3 </h3>
    <h4> Trying heading4 </h4>
    <h5> Trying heading5 </h5>
    <h6> Trying heading6 </h6>
 </body>
 </html>

HTML hr tag (<hr>)

-> A paragraph-level thematic break.

-> It draws a horizontal line.
HTML Paragraph

-> Used to define a paragraph.

-> example = <p>This is a paragraph.</p>
HTML Anchor

-> Defines a hyperlink that links one page to another page.

-> It can create hyperlinks to another web page as well as files, locations, or any URL.

-> <a href = "..........."> Link Text </a>

-> href attribute is used to define the address of the file to be linked.

-> target="_blank" = used to open that link to another page.
HTML <br> tag

-> To create a line break in a text.

-> works the same as pressing the enter key in a word processor.
HTML Image

-> Closing tags are not used in the HTML image element.

-> Attributes of HTML image tag:-

-> src = describes the source or path of the image.

-> alt = defines an alternate text for the image.

-> height

-> width

-> example : <img src="xyz.jpg" height="180" width="300" alt="xyz image"/>
HTML Button Tag

-> Used to create a clickable button within the HTML form on your webpage.

-> <button name="button" type="button">Click Here</button>
HTML Section Tag

-> Defines sections in a document.

-> <section> ".. content.." </section>
HTML Div Tag

-> It is like a container unit that is used to encapsulate other page elements and divides the HTML documents into sections.

-> <div> </div>

So, I hope you have understood the basics of HTML we will start creating projects just after completing a very important concept which is the " HTML LIST"

DAY 3

HTML Lists

-> lists are very important concepts to learn and it needs your crucial time to read and understand this important concept.

-> Contain one or more list elements. There are three different types of HTML lists:

* Ordered List or Numbered List (ol)

* Unordered List or Bulleted List (ul)

* Description List or Definition List (dl)

Ordered List or Numbered List(ol) :

-> represents elements in a numbered format.

-> example : <ol type = ""> list of items</ol> here types represent start attribute . various types are : 1,A,a,I etc.
```
 <ol type="i" start="5">  
  <li>HTML</li>  
  <li>Java</li>  
  <li>JavaScript</li>  
  <li>SQL</li>  
 </ol>
```
Unordered List or Numbered List(ul) :

-> Displays elements in bulleted format.

-> 4 types of bulleted list: disc , square , none, circle .

<ul type="circle">  
 <li>HTML</li>  
 <li>Java</li>  
 <li>JavaScript</li>  
 <li>SQL</li>  
</ul>

Description List (dl) :

-> <dl> tag defines the description list.

-> <dt> tag defines data term.

-> <dd> tag defines data definition (description).

<dl>  
  <dt>HTML</dt>  
  <dd>is a markup language</dd>  
  <dt>Java</dt>  
  <dd>is a programming language and platform</dd>  
 <dt>JavaScript</dt>  
 <dd>is a scripting language</dd>  
  <dt>SQL</dt>  
  <dd>is a query language</dd>   
</dl>  

OUTPUT -

HTML
   is a markup language
Java
  is a programming language and platform
JavaScript
  is a scripting language
SQL
  is a query language

DAY4

let's start working on projects now. some useful projects that will help in learning HTML in a better way.

Project1 :

Create a simple resume page using only HTML.

  <div>
    <hr>
    <h1> ANSHU JHA </h1> 
    <hr>
    <section>
      <!-- about -->
      <h3> ABOUT ME </h3>
      <hr>
      <p> 
       <ul type ="circle">
         <li> Final year under graduate pursuing B.Tech from NIET greater noida</li>
         <li>  Proficient in HTML ,CSS ,JAVASCRIPT.</li>
         <li> Passionate about learning new technologies and enhancing my skills .</li>

      </ul>
      </p>
    </section>

<section>
    <!-- projects -->
    <hr>
    <h3> PROJECTS </h3>
    <hr>
    <p> 
     <dl>
          <dt> <b> Resume App</b></dt>
          <dd> An application made using html. It shows the resume of the person.</dd>
          <dt> <b> BMI calculator</b> </dt>
          <dd> An application made using javascript . It shows the BMI of a person.</dd>

        </dl>
     </p>
  </section>

 <section>
    <!-- achievements -->
    <hr>
    <h3> Achievements</h3>
    <hr>
    <ul type = "circle">
      <li> Awarded as best student of school. </li>
      <li> Best coder of college ( write yours)</li>
      <li> Achieved ict certificate</li>
    </ul>
  </section>
  <section>

<section>
    <!-- education -->
    <hr>
    <h3> Education</h3>
    <hr>
    <dl> 
      <dd> <b><h7>Bachelor of Technology</b> - NIET || 8.93 cgpa </h7> </dd>
    </dl>
    <dl> 
      <dd> <b>Senior Secondary </b> - Xyz school || 8.93 cgpa </dd>
    </dl>
    <dl> 
      <dd> <b>Matriculation</b> - Xyz school || 8.93 cgpa </dd>
    </dl>
  </section>

<section>
    <!-- skills -->
    <hr>
    <h3>  Skills</h3>
    <hr>
    <ul type ="circle">
      <li> HTML </li>
      <li> CSS</li>
      <li> Javascript </li>
      <li> Java </li>
    </ul>
  </section>

<section>
    <!-- links -->
    <h3> Links </h3>
    <hr>
    <p> --Mention your useful links-- </p>
    <hr>
  </section>
<p><i> Note : </i> I here by informed that above mentioned information is correct to the best of my knowledge. </p>
<hr>
</div>
Try to copy paste this code on codepen . This Project is completely made using HTML .

Output :

DAY 5

Project2 :

-> Create a Survey form using only HTML. This Project will give an insight into HTML forms. let's learn about HTML forms.

-> The HTML <form> element is used to create an HTML form for user input.

-> HTML Form Elements:

1. <input Element>: types of input are text, radio, checkbox, submit, and button. example : <form> <input type = " text"></form>

2. <label Element>: <label for="fname">First name:</label><br> .The <label> tag defines a label for many form elements. The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

3. Radio Buttons : <input type="radio"> . let a user select ONE of a limited number of choices.

4. Checkboxes : <input type="checkbox"> . let a user select ZERO or MORE options of a limited number of choices.

5. Submit Button : <input type="submit"> .

6**.Select Element:** defines a drop-down list. The <option> elements define an option that can be selected. To define a pre-selected option, add the selected attribute to the option. Use the size attribute to specify the number of visible values.

7. Input Type Reset : <input type="reset"> . Defines a reset button that will reset all form values to their default values.

-> let's build a survey form.

<h1 id="title">  Party Survey Form </h1>
<form>

  <div >
    <label for="name" id="label-name">
      Name
    </label>
    <input type="text" id="name" placeholder="Enter your name" />
</div>
<div >
    <label for="email" id="label-email">
      Email
    </label>
    <input type="email" id="email" placeholder="Enter your email" />
</div>
<div >
    <label for="age" id="label-age">
      Age
    </label>
    <input type="number" id="age" placeholder="Enter your age" />
</div>

<div >
  <label for="role" id="label-role">
    Which option best describes you?
  </label>
  <select name="role" id="role">
    <option value="student">Student</option>
    <option value="intern">Intern</option>
    <option value="professional">Professional</option>
    <option value="other">Other</option>
  </select>
</div>

  <div 
  <label >
    Will you attend the party?
  </label>
  <label for="attend-1" id="label-attend-1">
    <input type="radio" id="attend-1" name="attend">
      Yes
    </input>
  </label>
  <label for="attend-2" id="label-attend-2">
    <input type="radio" id="attend-2" name="attend">
      No
    </input>
  </label>
</div>

<div >
  <label>What did you like about the program?</label>
  <br>
  <label for="inp-1">
    <input type="checkbox" >Training</input>
  </label>
  <br>
  <label for="inp-2">
    <input type="checkbox" >The Learning Sessions from Industry Experts</input>
  </label>
  <br>
  <label for="inp-3">
    <input type="checkbox" >Community Meetups</input>
  </label>
  <br>
  <label for="inp-4">
    <input type="checkbox">Brown Bag Sessions</input>
  </label>
  <br>
  <label for="inp-5">
    <input type="checkbox" >Switching to Hybrid Mode</input>
  </label>
  <br>
  <label for="inp-6">
    <input type="checkbox" >Food, Office etc.</input>
  </label>
</div>

 <div>
    <label for="comment">
      Any comments or suggestions
    </label>
    <textarea name="comment" id="comment" placeholder="Enter your comment here">
    </textarea>
</div>

<button type="reset" value="reset" id="reset">
    Reset
</button>
<button type="submit" value="submit" id="submit">
    Submit
</button>


</form>

Try to copy and paste this code on codepen.io to see the output.

-> This is completed from my side hope you liked it 😉 .

Learn HTML in 5 days :)

Table of contents

Contents

DAY1

DAY2

DAY 3

DAY4

DAY 5