HTML
HTML Hypertext Markup Language
HTML is the language of web. It is used to create websites.
We use HTML tags to define look and feel of a website.
With understanding of these tags and how to put them together we can create beautiful websites
easily.
Then Why CSS and JavaScript?
HTML is used for defining layout of a page. A backbone page structure.
CSS is used to add styling to that backbone 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.
Analogy:
HTML: Car body (only metal)
CSS: Car paint, decoration etc.
JavaScript: Car Engine + Interior logic
DOWNLOAD VS CODE AS AN EDITOR
https://code.visualstudio.com/
While installing please make sure to select below checkbox.
We can use any text editor of our choice. Here we will be using VS Code because it is light weight
open source and from Microsoft. We can use even notepad for html but it is using good editor gives
more flexibility and other benefits.
CREATING FIRST WEBSITE
We start building a website by creating a file named index.html which is a special filename which is
presented when the website root address is typed in browser.
Basic HTML Page
<!DOCTYPE html> --> Specifies this is an html 5 doc
<html lang="en"> --> root of an HTML Page
<head> --> contain page metadata
<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> --> 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> --> closing doc
[To get this above template either you can type this or else you can just hit “!” and then Enter in VS
Code which will automatically populate the boiler plate code. So this is one of the advantage of using
VS code even other editor also has its own advantage.]
A tag is like a container for either content or other HTML tags.
Head and Body are children of HTML Tag.
HTML is the parent of head and body tag.
Most of the HTML elements have opening and closing tag with content in between.
Some of the tags have no content. These are called Empty elements. <br>, <hr>
We can either use .htm or .html extension while saving the html file.
You can use Inspect Elements or view page Source option from chrome to look into a
website HTML code.
Comments in HTML
Comments in the HTML are used to mark text which should not be parsed. They can help
document the source code.
<! --HTML comment-->
HTML is a case insensitive language. <H1> and <h1> tags are the same.
BASIC HTML TAGS
We can add elements inside the body tag to define the page layout.
HTML Elements
<body> Opening Tag
->Content<-
</body> Closing Tag
HTML Attributes
Used to add more information corresponding to an HTML tag.
Example: - <a href=www.google.com>Google</a>
We can either use single or double quotes in attributes.
Heading Tag
<h1> Most Important heading</h1>
<h2> Most Important heading</h2>
<h3> Most Important heading</h3>
<h4> Most Important heading</h4>
We should not use HTML headings to make text thick or bold.
Paragraph Tag
<p>This is a paragraph</p>
Anchor Tag
<a href=www.google.com>Google</a>
img Tag
Is used to add images in an HTML page.
<img src=”image.jpg”>
<img src=”image.jpg” alt=”type to show if for some reason image is not loaded”>
Bold Italic and Underline Tags
<b>This is bold</b>
<i>This is italic</i>
<u>This is underline</u>
br Tags
The <br> tag is used to create line breaks in an HTML document.
hr tag
<hr> tag in HTML is used to create a horizontal ruler often used to separate the content.
big and small tags
We can make the text a bit larger and bit smaller using big and small tags respectively.
Subscript & superscript
We can add subscript and superscript in HTML as follows:
<sub>This</sub> is Subscript
<sup>This </sup> is Superscript
pre Tag
HTML always ignores extra spaces and newlines. In order to display a piece of text as it is we use pre
tag.
<pre>
This is written
Using pre
tag
</pre>
CREATING A PAGE LAYOUT
When we use the right tag in the right place, it results in a better page layout better indexing by
search engine and better user experience.
We use the following tag to get the job done.
Website Layout
<header> Contains nav tag
<main>
<footer>
Inside the main tag we insert the following tags:
<main> Main opening tag
<section> a page section
<article> a self-contained content
<aside> Content aside from the content (e.g. Ads )
</main> The main closing tag
Creating a page like this is not necessary but it creates a readable and structure layout.
Also, they are useful for SEO.
Link Attribute
<a href=”/contact”>Contact Us</a> Contact page opens in same tab
<a href=”/contact” target=”_blank”>Contact Us</a> Opens in a new tab
We can put any content inside an anchor tag (images, heading etc. are all allowed)
If the page is inside a directory, we need to make sure that we link to correct page.
We can add links to images like this.
<a href=”/about”><img src=’a.jpg’ width=”120”></a>
The Div Tag
Div tag is often used as a container for other elements. div is a block level element. (Block always
takes full width)
The Span Tag
Span is an inline container. (Takes as much width as necessary)
UTF-8 Arrows
https://www.w3schools.com/charsets/ref_utf_arrows.asp
LIST, TABLES AND FORMS
Lists are used to display content which represents a list.
Unordered List:
Used to list unordered items
<ul>
<li>Home</li>
<li>AboutUs</li>
::::
</ul>
Ordered List:
Used to list ordered items.
<ol>
<li>Home</li>
<li>AboutUs</li>
::::
</ol>
Tables:
The <table> tag is used to define tables in HTML.
It is used to format & 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 tables we use <caption> tag inside table.
thead tag: used to wrap table head.(captions & tr with th)
tbody tag: used to wrap the table body.
Colspan attribute
This attribute is use d to create cells spanning multiple coloumns.
<th colspan=”3”>Kiran</th> Spans three columns.
<!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>
<div>
<table>
<caption>Employee Table</caption>
<thead>
<th>Empno</th>
<th>Ename</th>
<th>Sal</th>
<th>Deptno</th>
<th colspan="2">Comment</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kiranjit</td>
<td>5000</td>
<td>10</td>
<td>Hi this is for comment</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
IFRAME (The Inline Frame element)
It is used to embed another HTML page into current one. (Nested browsing context).
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html?bbox=-
0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.4785698618
98606&layer=mapnik">
</iframe>
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>
<body>
<div>
<form action="action.php">
name: <input type="text" placeholder="Type you name"><br>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="trans" name="gender" value="trans">
<label for="trans">Trans</label><br>
<input type="checkbox" id="yes" value="yes" name="tick">
<label for="yes">Yes</label>
<input type="checkbox" id="no" value="no" name="tick">
<label for="no">No</label> <br>
<select id="car">
<option value="omni">Omni</option>
<option value="maruthi">Maruthi</option>
</select><br>
<textarea name="text" placeholder="please explain the reason in 15
0 words"></textarea>
</form>
</div>
</body>
</html>
There is different form element for different kinds of user input.
Input elements: Can be of type text, checkbox, radio, button and submit we also have a file
type.
textarea element: Define a multiline text input. Cols and rows attribute can be used to size
the textarea.
Select element: Defines a drop-down list.
EMBEDDING VIDEOS
Video tag is used to play videos in HTML
<video src=”kiran.mp4”>Error</video>
Attribute for video
We can use width to adjust width of a video and height will be adjusted automatically.
We can use autoplay / loop to auto play or loop the video.
SEO
We will focus only on HTML standpoint of SEO.
Types of SEO
On Page SEO (can be done by HTML developers)
Off page SEO
HTML Developers can implement SEO using the following techniques:
1. Set the title very nice and to the point.
2. Set the metadata description. <meta name=” description” content=” ….”>
3. Set a nice URL Slug
4. Add alt text to images.
5. Remove unused HTML/CSS and JS Files + compress them
6. Compress images and other resources. https://compresspng.com/
7. Set a favicon. https://favicon.io/
8. Set the meta-author tag <meta name=” author” content=” Kiran”>
9. Set the meta keyword tag. <meta name="keywords" content="…">
