Scribd
Upload
8 views27 pages

HTML2 Removed Merged

The document provides a comprehensive overview of HTML, its structure, and basic syntax, including tags for text, links, images, and multimedia. It also covers how to run HTML using VS Code, the importance of semantic HTML for SEO, and various meta tags for optimization. Additionally, it introduces the relationship between HTML, CSS, and JavaScript in web development.

Uploaded by

Soumen Golder
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views27 pages

HTML2 Removed Merged

The document provides a comprehensive overview of HTML, its structure, and basic syntax, including tags for text, links, images, and multimedia. It also covers how to run HTML using VS Code, the importance of semantic HTML for SEO, and various meta tags for optimization. Additionally, it introduces the relationship between HTML, CSS, and JavaScript in web development.

Uploaded by

Soumen Golder
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

 HTML:

 HTML = Hyper Text Mark-up Language


 Created by Tim-Berners Lee (1991)
 Layout of Webpages
 Opening tag = < Tag Name >
 Closing tag = </ Tag Name >
 HTML Document [Web Page] = Head section + Body section
 HTML code written between the Tag
 <!-- "Comment here" -->
 Comments are ignored by web browsers.
 They aid in code readability and documentation.

 How to run HTML:


 Use VS Code IDE for Writing HTML Code
 Use “Live Preview” Extension for run HTML code in
server

 Basic Syntax of HTML:


 Type “Shift + !” and “Enter” for default syntax
 Line 1: Document type is HTML; Version HTML5
 Line 2: HTML Opening tag; This HTML document written in English (root of an HTML page)
 Line 3 to Line 7: Head section of HTML document starting with <head> tag and ending with </head> tag. It
contain the information about the webpages, Title, Metadata about the webpages & links to external
resources like CSS & java script file

Metadata = Small description about the webpage

 Line 8 to Line 10: Body section of HTML document. It contain the content of webpage it start with <body>
tag and with </body> tag. You can write or do anything in body section.
 Line 11: HTML Closing tag means end of the web page

 1st File in HTML:


 Name: Index.html
 All HTML file ends with “.html”
 Text tag:
 <p>--</p>: Paragraph tag (use for write paragraph)
 <u>......</u>: Underline tag (use for underlining text)

 <h1>--</h1> : Heading 1 (First-Level Heading and it is the largest and boldest among all heading
tags, most uses)
 <h2>--</h2>: Heading 2 (Second-level headings and it is slightly smaller than the <h1> tag, most
uses)
 <h3>--</h3>: Heading 3 (Therd-level headings and it is smaller than the <h2> tag, most uses)
 <h4>--</h4>: Heading 4 (Forth-level headings and it is smaller than the <h3> tag)
 <h5>--</h5>: Heading 5 (Fifth-level headings and it is smaller than the <h4> tag)
 <h6>--</h6>: Heading 6 (Sixth-level heading and is the smallest among all the heading tags)

 <strong>--</strong>: Strong emphasis (typically bold)


 <em>--</em>: Emphasis (typically italic)
 <br/>: Line break (though the / is optional in HTML5 = <br>) we can use anything
 <hr/>: Horizontal rule/line (though the / is optional in HTML5 = <hr>) we can use anything
Note: Later if you happen to use react or a framework like Next.js, you will have to close the tag like this <br/>
<hr/>. So it is better to cultivate the habit!; they are self closing tag

 <pre>--</pre>: Preformatted text (It preserves the original formatting of text & displaying
preformatted text)

The <pre> tag maintains both spaces and line breaks, ensuring that text appears
exactly as it was originally formatted. It is especially useful for displaying code snippets or
preformatted text from data files

 Anchor tag:
 for using any link use anchor tag
 <a href="link">any text related to link</a> --------(main anchor tag)
 HTML links primarily use two attributes:
1. href attribute: Defines the URL the link points to.
2. target attribute: Specifies where to open the linked document.
 Target Attribute Values:
 _blank: Opens the linked document in a new window or tab (***).
 _top: Opens document in the full body of the window.
 _self: Opens document in the same window or tab (default behavior).
 _parent: Opens the linked document in the parent frame.
 <a href="link">any text related to link</a> --------(Default anchor tag, link open in present tab or
window)
 <a href="link" target = "-blank">any text related to link</a> -------- (Link open in new tab or window)
 Link’s Colours: Links typically appear in different colors based on their state:
1. Active: Displayed in red and underlined like this sentence
2. Visited: Appears purple and underlined like this sentence
3. Unvisited: Shown as blue and underlined like this sentence
You can customize these colors using CSS to better match the style of your website.

 Media tag:
 Image tag:
for using image in your webpage use <img> tag
 use source (by src attribute) for image in the form of image name or image file path
 use alternate text (by alt attribute) for image as reference if image is not showing in webpage for
any reason then it's alternate text will appear
<img src="Path or file name of image" alt="alternate text of the image">
 if you want to resize the image use height & width (in pixel format by default), it is also use for SEO
<img src="Path or file name of image" alt="alternate text of the image" height="..."
width="....">

 Video Tag:
for using video in your webpage use <video> tag
 use source (src) for video in the form of video name or videop file path
 It supports multiple attributes to control (controls) the video.
<video src="......." controls></video>
 Attributes for <video> Tag
 src: Specifies the path to the video file.
 controls: Adds video controls, like play, pause, and volume.
 autoplay: Automatically starts playing the video when the page loads.
 loop: Repeats the video once it ends.
 muted: Mutes the video by default.
 poster: Specifies an image to be displayed before the video starts playing like thumbnail.
 width and height: Specifies the dimensions of the video.
 Audio tag:
for using audio in your webpage use <audiio> tag
 use source (src) for audio in the form of audio name
 It supports multiple attributes to control (controls) the audio.
<audio src="...." controls></audio>
 Attributes for <audio> Tag
 src: Specifies the path to the audio file.
 controls: Adds audio controls, like play, pause, and volume.
 autoplay: Automatically starts playing the audio when the page loads.
 loop: Repeats the audio once it ends.
 muted: Mutes the audio by default.
 preload: Specifies if and how the audio should be loaded when the page loads ('auto',
'metadata', 'none').

 Iframe tag:
<iframe> elements are commonly used for embedding videos, maps, external websites, or
other types of content within a web page.
 The <iframe> element has a src attribute that specifies the URL of the external content to be
embedded.
 The width and height attributes determine the dimensions of the <iframe>.
 The title attribute provides a descriptive title for the embedded content.

 Favicon in HTML:
 A favicon is a small icon that appears next to your website's title in browser tabs. It helps in
branding and easy identification among multiple tabs.
 for add Favicon in HTML use <link rel="icon" href="favicon.ico" type="image/x-icon"> code in the
<head> section of your index.html file

 SEO friendly HTML:


 Semantic HTML: Improves readability & search engine understanding.
 Meta Tags: Helps search engines display relevant content in search results.
 Open Graph & Twitter Meta: Improves social media sharing appearance.
 Canonical URL: Prevents duplicate content issues.
 Breadcrumb Navigation: Enhances user experience & SEO.
 Internal Linking: Helps distribute page authority across the site.
 Image Optimization: Uses alt text for better ranking in image search.
 Sitemap & Robots.txt Links: Guides search engine crawlers.

This template ensures a well-structured, mobile-friendly, and optimized webpage that helps improve your site’s
ranking and user experience.
 Different types of meta tag in head section:

<!-- Basic SEO Meta Tags -->

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SEO-Friendly Webpage Example | Your Website Name</title>
 <meta name="description" content="Learn how to create an SEO-friendly website with semantic HTML,
metadata, and best practices for search engine optimization.">
 <meta name="keywords" content="SEO, HTML, Web Development, Best Practices">
 <meta name="author" content="Your Name">

<!-- Open Graph (Social Media) Meta Tags -->

 <meta property="og:title" content="SEO-Friendly Webpage Example">


 <meta property="og:description" content="Learn how to create an SEO-friendly website with semantic
HTML and best practices.">
 <meta property="og:image" content="https://yourwebsite.com/seo-image.jpg">
 <meta property="og:url" content="https://yourwebsite.com/seo-friendly-webpage">
 <meta property="og:type" content="website">

<!-- Twitter Card (for better sharing on Twitter) -->

 <meta name="twitter:card" content="summary_large_image">


 <meta name="twitter:title" content="SEO-Friendly Webpage Example">
 <meta name="twitter:description" content="Learn how to create an SEO-friendly website with semantic
HTML and best practices.">
 <meta name="twitter:image" content="https://yourwebsite.com/seo-image.jpg">

<!-- Favicon -->

 <link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- Canonical URL (Avoid Duplicate Content Issues) -->

 <link rel="canonical" href="https://yourwebsite.com/seo-friendly-webpage">

<!-- Stylesheet -->

 <link rel="stylesheet" href="styles.css">

 Different types of meta tag in body section:

All content write in body section

Add this tag <script src="script.js" defer></script> before ending of the body tag. It is use for
linking JS with HTML.

 Tasks:

Make Table, Form, Header, Footer, Navbar, Search bar


 Next Step: Learn CSS
CHAPTER 0 – 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.

4
CHAPTER 1 – CREATING OUR FIRST WEBSITE
We start building a website by creating a file named index.html. index.html 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.

5
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.

6
CHAPTER 1 – PRACTICE SET
1. Inspect your favourite website and change something on the page which is
displayed.
2. Go to your favourite website and try to view the page source and write the exact
lines of code. Does it clone the website? Why?
3. Write any HTML code inside a text file. Does it work if you write it using notepad?

7
CHAPTER 2 – BASIC HTML TAGS
We can add elements inside the body tag to define the page layout.

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= "https://codewithharry.com"/> 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>


<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 = "https://google.com"> click me </a>

8
THE IMG TAG
<img> tag is used to add images in an HTML page.

<img src= "image.jpg">

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.

<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>

9
CHAPTER 2 – PRACTICE SET
1. Create an HTML page with a heading (title heading), a primary heading and a
subheading. Which tags did you use?
2. Create a page with 5 wallpaper images taken from the internet.
3. Use <br> and <hr> tags to display a piece of text with line breaks.
4. Try to write the following Chemical equation using HTML.
C + O2 = CO2
5. Try to write a Wikipedia article using HTML.

10
CHAPTER 3 – CREATING A PAGE LAYOUT
When we use the right tag in right place, it results in a better page layout, better indexing
by search engines and better user experience.

We use the following tags to get the job done.

Inside the main tag we insert the following tags:

<!-- The main opening tag -->


<main>
<!-- A page section -->
<section>
<!-- A self-contained content -->
<article>
<!-- Content goes here -->
</article>
</section>
<!-- Content aside from the main content (e.g. Ads, sidebars) -->
<aside>
<!-- Aside content goes here -->
</aside>
</main>
<!-- The main closing tag -->
Creating a page like this is not necessary but it creates a readable & structured layout.
Also, they are useful for SEO.

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 anchor tag (images, headings etc are all allowed).

11
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="a.jpg" 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.

<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>

12
CHAPTER 3 – PRACTICE SET
1. Create an SEO friendly website using HTML.
2. Create an HTML page which opens google when clicked on an image.
3. Create a website which has your 5 top used websites bookmarked. The links
should open in a new tab.

13
CHAPTER 4 – LISTS, TABLES & FORMS

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>
<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.

14
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>Harry</td>
<td>D</td>
</tr>
</tbody>
</table>

COLSPAN ATTRIBUTE
This attribute is used to create cells spanning multiple columns.

<!-- Spans 3 Columns -->


<th colspan = "3" > Harry </th>

HTML FORMS
An HTML <form> tag is used to create a form that collects input from users.

<form>
<!-- Elements of form -->
</form>
There are different form elements for different kinds of user input.

• <input> element: Can be of type text, checkbox, radio, button and submit.
We also have a ‘file’ type.
• <textarea> element: Defines a multiline text input ‘cols’ and ‘rows’
attributes can be used to size the text area.
• <select> element: Defines a drop-down list.

Note: you don’t have to remember all the tags, you will automatically memorize them
with practice.

15
EMBEDDING VIDEOS
To embed videos in HTML, you can use the <video> tag along with various attributes to
control its behavior.

<video src = 'harry.mp4'> Error </video>

ATTRIBUTES FOR VIDEO


We can use the following attributes:

• 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="harry.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

16
CHAPTER 4 – PRACTICE SET
1. Create an HTML page with video embedded inside it.
2. Replace the video in question no 1 with a YouTube video.
3. Create an HTML form for a travel website to book a vacation.
4. Create a table displaying score of cricket Players in a match using HTML.

17
CHAPTER 5 – SEO
We will focus only on HTML standpoint of SEO. We will not be looking into keyword
building and content optimization aspect of SEO.

TYPES OF SEO
• On page SEO (This can be done by HTML developers).
• Off page SEO.

HTML SEO
HTML developers can implement SEO using the following techniques:

1. Title Tag: Set a clear and descriptive <title> tag that accurately reflects the
content of the page.
2. Meta Description: Provide a concise summary of the page content using the
<meta> tag.
3. URL Slug: Use a clean and readable URL structure that includes relevant
keywords.
4. Meta Author Tag: Optionally include the author information in a <meta> tag
5. Favicon: Use a favicon to enhance brand recognition and usability.
6. Image Optimization: Compress images to improve page load times and include
descriptive alt attributes.
7. Optimize Resources: Remove unused HTML, CSS, and JavaScript files, and
minify/compress them to reduce page load times.
8. Semantic HTML: Use appropriate HTML tags (<header>, <nav>, <article>,
<footer>, etc.) to structure the content logically, which can improve SEO
indirectly by making the content more accessible and understandable to search
engines.

<head>
<title>Example Page - SEO Best Practices</title>
<meta name="description" content="This is an example page
demonstrating SEO best practices in HTML.">
<meta name="author" content="Harry">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

18

You might also like