Day 1: Introduction to HTML
Creating your first HTML file
Create a folder in your local system with any names of your choice
Open VS code
Day 1: Introduction to HTML 1
Click on Open and go to your directory where you have created your folder and open that
folder, in my case it is HTML folder
Click on Open and now you are in HTML folder
Day 1: Introduction to HTML 2
Now you can create files and folders
Now I will create a folder called Day-1, inside Day-1 I will add a file called intro.html
Day 1: Introduction to HTML 3
Your HTML file is now ready for coding. Happy Coding 🙃
History of HTML
HTML was created by Sir Tim Berners-Lee in late 1991.
Before he created HTML, he used to send research documents via email.
To make it easier for scientists at different universities to gain access to each other's
documents, he created HTML.
Why has HTML become so popular and why not MS docs
User-friendly
Very lightweight
Easy to learn
Easy to integrate with all browsers
So is HTML a programming language or not?
Day 1: Introduction to HTML 4
Think of it this way: you can’t compute the sum of 2 + 2 in HTML; that’s not what it’s for. This is
because HTML is not a programming language.
Overview of HTML
Let’s take analogy of car with HTML
Car body : Structure of HTML
Car color : Styling (CSS)
Gears, breaks : Functionality (JS)
Day 1: Introduction to HTML 5
HTML Elements
The three main parts of the HTML elements are:
Opening Tag : It marks the start of the element.
Content : The contents that is visible on the browser
Closing Tag : It marks the end of the element. Usually it starts with a backward slash '/'
Syntax :
<opening tag> Content </closing tag>
Example :
<h1> Hello World! </h1>
HTML Page Structure
You are one step away from building your first website in HTML. You need to add <html>, <head>,
<title> and <body> tags to successfully build your website. Let's see what each tag means:
The <!DOCTYPE html> declaration defines the version of HTML document, in this case it is 5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page.
The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> , <h2> element defines a headings.
<html>
<head>
Day 1: Introduction to HTML 6
<title> HTML Introduction </title>
</head>
<body>
<h1>Masai School</h1>
</body>
</html>
Explanation:
The <html> elements contains all the contents of the webpage.
The <head> element contains additional information about the HTML page like the page title.
The <title>element specifies a title for the webpage which is shown in the browser's
window. HTML Introduction title will be shown on the browser's title bar.
The <body> element contains all the contents of the webpage like the heading and the
paragraph.
The <h1> element specifies a heading
And finally your website looks like this!
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Day 1: Introduction to HTML 7
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Read more:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p> Welcome to Masai School.</p>
Read more:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
Example
<p>This is a <br> paragraph with a line break.</p>
For instance, the horizontal ruling tag <hr> is an Empty HTML tag.
Syntax
<hr>
Day 1: Introduction to HTML 8
Attributes
It is basically additional features, take an example of mobile and ask attributes of mobile for
eg: battery, camera, ram,rom etc.
Each and every tag in HTML will have some attributes(additional features)
Anchor Tag
The above example is the anchor which connects the ship to the shore
Similarly, an anchor tag connects one website to other websites using an anchor tag -
codepen
Day 1: Introduction to HTML 9
The <a> tag is used to add external or internal links as content in your HTML document.
You could also include external links to other websites in your HTML document. Here's an
example that demonstrates this:
<a href="www.google.com">Visit Google</a>
Above code will redirect you to google.com in same page, if you want to redirect to new blank
page you should add an attribute known as target.
target=”_blank” will open your page in new tab
<a target="_blank" href="www.google.com">Visit Google</a>
HTML Input
So far we have found a great way of formatting whatever we want to share. This worked great
for the scientific community to share their documents. But as HTML grew in popularity, it
started getting used for a lot of other applications like filling online applications, online voting,
etc.... . Now these applications needed user input! How do we do that?
Take example of form which they generally fill online before joining masai
Different input tags
<input type="text"/> (default value)
<input type="button"/>
<input type="checkbox"/>
Day 1: Introduction to HTML 10
<input type="color"/>
<input type="date"/>
<input type="datetime-local"/>
<input type="email"/>
<input type="file"/>
<input type="hidden"/>
<input type="image"/>
<input type="month"/>
<input type="number"/>
<input type="password"/>
<input type="radio"/>
<input type="range"/>
<input type="reset"/>
<input type="search"/>
<input type="submit"/>
<input type="tel"/>
<input type="time"/>
<input type="url"/>
<input type="week"/>
HTML List Tags
Lists are used quite often in websites to display a set of data or items in an ordered or unordered
fashion.
HTML provoides us with three types of list tags:
Unordered List
Ordered List
Let's learn a bit about each of these.
Unordered List
<ul>
<li>Hollywood</li>
<li>Bollywood</li>
<li>Tollywood</li>
</ul>
Output:
Day 1: Introduction to HTML 11
Ordered List
<ol>
<li>Hollywood</li>
<li>Bollywood</li>
<li>Tollywood</li>
</ol>
Output:
For nested list refer to this codepen
To know more about type attribute read this https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/ul
Day 1: Introduction to HTML 12
HTML Image tag
Have you ever wondered how to images in websites
The <img> tag in HTML is used to output or render images on the webpage. It specifies the
source of the image using the src attribute as shown below:
<img src="https://masai-website-images.s3.ap-south-1.amazonaws.com/Nrupul_d3fe3b289a.jpg" />
The above would render the image specified inside the src attribute:
Day 1: Introduction to HTML 13
HTML Tables:
Basic Excel sheet
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td>
element defines a table cell.
Codepen Link : https://codepen.io/vchandu111/pen/qBVbdQO
Read more:
Table
Table Head
Table Body
TH
TR
Day 1: Introduction to HTML 14
TD
Other Important essential tags:
Tag Name Description
<!DOCTYPE> This tag is used to specify the version of HTML
<html> represents the root of an HTML document
<a> It is termed as anchor tag and it creates a hyperlink or link.
<b> It is used to make a text bold.
<body> It is used to define the body section of an HTML document.
<br> It is used to apply single line break.
<button> It is used to represent a clickable button
<div> It defines a division or section within HTML document.
<form> It is used to define an HTML form.
<h1> to <h6> It defines headings for an HTML document from level 1 to level 6.
<head> It defines the head section of an HTML document.
<hr> It is used to apply thematic break between paragraph-level elements.
<img> It is used to insert an image within an HTML document.
<input> It defines an input field within an HTML form.
<label> It defines a text label for the input field of form.
<li> It is used to represent items in list.
<link> It represents a relationship between current document and an external resource.
<meta> It defines metadata of an HTML document.
<option> It is used to define options or items in a drop-down list.
<p> It represents a paragraph in an HTML document.
<script> It is used to declare the JavaScript within HTML document.
<select> It represents a control which provides a menu of options.
<small> It is used to make text font one size smaller than document?s base font size.
<span> It is used for styling and grouping inline.
<style> It is used to contain style information for an HTML document.
Day 1: Introduction to HTML 15
Tag Name Description
<table> It is used to present data in tabular form or to create a table within HTML document.
<tbody> It represents the body content of an HTML table and used along with <thead> and <tfoot>.
<td> It is used to define cells of an HTML table which contains table data
<textarea> It is used to define multiple line input such as comment feedback and review etc.
<tfoot> It defines the footer content of an HTML table.
<th> It defines the head cell of an HTML table.
<thead> It defines the header of an HTML table. It is used along with <tbody> and <tfoot> tags.
<title> It defines the title or name of an HTML document.
<tr> It defines the row cells in an HTML table
<u> It is used to render enclosed text with an underline.
<ul> It defines unordered list of items.
Day 1: Introduction to HTML 16
