INTRODUCTION
HTML, which stands for "HyperText Markup Language," is the foundational
language of the web. It's used to create and structure websites. By utilizing
HTML tags, we can define the appearance and layout of a website. With a
good grasp of these tags and their proper usage, creating beautiful websites
becomes straightforward and efficient!
THEN WHY CSS & JAVASCRIPT
HTML is used to define the layout of a page, providing a barebone structure for
the content.
CSS is used to add styling to that barebone page created using HTML.
JavaScript is used to program logic for the page layout e.g. What happens when a
user hovers on a text, when to hide or show elements etc.
A BEAUTIFUL ANALOGY
• HTML = Car body (only metal) • CSS = Car paint,
decoration etc.
• JavaScript = Car engine + Interior logic
We will start learning how to build beautiful websites in this course.
INSTALLING VS CODE
We can use any text editor of our choice. Here I am using VS Code because it is
lightweight, opensource & from Microsoft.
Note: You can write HTML even in Notepad. Text editors like VS Code just makes
these things easier.
1
CREATING OUR FIRST WEBSITE
We start building a website by creating a file named [Link]. [Link] is a
special filename which is presented when the website root address is typed.
A BASIC HTML PAGE
<!Doctype html> <!-- Specifies this is an html 5 document -->
<html> <!-- Root of an HTML page-->
<head> <!-- Contains page metadata. -->
<title>Harry's Website</title> <!-- Contains title -->
</head>
<body> <!-- The main body of the page (rendered by the browser) -->
<h1> <!-- This is a heading <h1> - heading tag -->
<p> My paragraph </p> <!-- Paragraph tag -->
</body> <!-- Closing body tag. -->
</html>
A tag is like a container for either content or other HTML tags.
IMPORTANT NOTES
• <head> & <body> tags are children of HTML tag.
• HTML is the parent of <head> & <body> tags.
• Most of the HTML elements have opening & closing tag with content in between
opening & closing tags.
• Some HTML tags have no content. These are called Empty elements e.g. <br>
• We can either use .htm or .html extension.
• you can use “inspect element” or “view page source” option from Chrome to look
into a website’s HTML Code.
2
COMMENTS IN HTML
Comments in HTML are used to mark text which should not be parsed. They can help
document the source code.
<!-- HTML COMMENT -->
CASE SENSITIVITY
HTML is a case insensitive language. <H1> and <h1> tags are the same.
HTML ELEMENT
An HTML element consists of everything from the starting tag to the ending tag.
<body> <!-- Opening tag -->
Content
</body> <!-- Closing tag -->
HTML ATTRIBUTES
HTML attributes are used to add more information corresponding to an HTML tag.
Example:
<a href= "[Link] Harry </a>
We can either use single or double quotes in attributes.
THE HEADING TAG
Heading tag is used to mark headings in HTML. From h1 to h6, we have tags for the most
important to the least important heading.
<h1> Most important heading
</h1>
3
<h2> Another heading H2 </h2>
<h3> Another heading H3 </h3>
<h4> Another heading H4 </h4>
<h5> Another heading H5 </h5>
<h6> Another heading H6 </h6>
Note: We should not use HTML headings to make text thick or bold.
THE PARAGRAPH TAG
Paragraph tags are used to add paragraph to an HTML page.
<p> This is a paragraph </p>
THE ANCHOR TAG
The Anchor Tag is used to add links to an existing content inside an HTML page.
<a href = "[Link] click me </a>
THE IMG TAG
<img> tag is used to add images in an HTML page.
<img src= "[Link]">
BOLD, ITALIC AND UNDERLINE TAGS
We can use bold, italic and underline tags to highlight the text as follows:
<b> This is bold </b>
<i>This is italic </i>
<u> This is underline </u>
BR TAG
The <br> tag is used to create line breaks in an HTML document.
<br>
BIG AND SMALL TAGS
We can make text a bit larger and a bit smaller using <big> and <small> tags respectively.
4
<big>Hello world</big>
<small>Hello world</small>
HR TAG
<hr> tag in HTML is used to create a horizontal ruler often used to separate the content.
<hr>
SUBSCRIPT & SUPERSCRIPT
We can add subscript and superscripts in HTML as follows:
this <sub> is </sub> subscript.
this <sub> is </sup>
superscript.
PRE TAG
HTML always ignores extra spaces and newlines. In order to display a piece of text as is, we
use pre tag.
<pre>
This is written.
using
pre tag
</pre>
LINK ATTRIBUTES
<!-- Contact page opens in the same tab -->
<a href="/contact">Contact</a>
<!-- Contact page opens in a new tab -->
<a href="/contact" target="_blank">Contact us</a>
We can put any content inside an anchr tag (images, headings etc are all allowed). If the
page is inside a directory, we need to make sure that we link to the correct page
(Same applies to img tag as well.)
We can add links to images like this.
<a href = "/about"> <img src="[Link]" width = "120"> </a>
THE DIV TAG
The <div> tag is often used as a container for other elements. It is a block-level element,
meaning it always takes up the full width available.
5
<div>
<h1>This is a heading inside a div.</h1>
<p>This is a paragraph inside a div.</p>
</div>
THE SPAN TAG
The <span> tag is an inline container, meaning it only takes up as much width as necessary.
<p>This is a <span>highlighted</span> word in a sentence.</p>
LISTS
Lists are used to display content which represents a list.
UNORDERED LIST
An unordered list is used to list items that do not have a specific order.
<ul>
<li>Home</li>
<li>About</li>
</ul>
ORDERED LIST
An ordered list is used to list items in a specific order, typically numbered.
<ol>
<li>Phone</li>
<li>PC</li>
6
<li>Laptop</li> </ol>
TABLES
The <table> tag in HTML is used to define tables, which are used to format and display
tabular data.
• <tr> tag: Used to display table row.
• <td> tag: Used to display table data.
• <th> tag: Used in place of table data for displaying table headers.
We can define as many table rows as we want. To add a caption to the table, we use
<caption> tag inside table.
• <thead> tag: Used to wrap table head (caption & <tr> with <th>)
• <tbody> tag: Used to wrap the table body.
Example:
<table>
<caption>Students Report</caption>
<thead>
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rohan</td>
<td>A+</td>
</tr>
<tr>
<td>Amrt</td>
<td>D</td>
</tr>
</tbody> </table>
COLSPAN ATTRIBUTE
This attribute is used to create cells spanning multiple columns.
<!-- Spans 3 Columns -->
7
<th colspan = "3" > Harry </th>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td rowspan="2">Alice</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
</tr>
</table>
EMBEDDING VIDEOS
To embed videos in HTML, you can use the <video> tag along with various attributes to
control its behavior.
<video src = 'vdeo1.mp4'> Error </video>
ATTRIBUTES FOR VIDEO
We can use the following attributes:
8
• src: Specifies the URL of the video file (harry.mp4 in this case).
• width: Adjusts the width of the video player. Height adjusts automatically to
maintain aspect ratio.
• controls: Displays video controls such as play, pause, volume, etc.
• autoplay: Automatically starts playing the video when the page loads.
• loop: Causes the video to automatically start over from the beginning when it
reaches the end.
• preload: Specifies whether the video should be loaded when the page loads (auto,
metadata, none).
<video width="640" autoplay loop>
<source src="vdeo1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>