Scribd
Upload
16 views

HTML NOTES

The document provides a comprehensive guide to creating a basic HTML website, starting with the structure of an HTML page and essential tags like <head>, <body>, and various content tags. It covers HTML elements, attributes, and best practices for SEO, including the use of title tags, meta descriptions, and semantic HTML. Additionally, it includes practical exercises for readers to apply their knowledge in creating web pages.

Uploaded by

daily.use.web
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
16 views

HTML NOTES

The document provides a comprehensive guide to creating a basic HTML website, starting with the structure of an HTML page and essential tags like <head>, <body>, and various content tags. It covers HTML elements, attributes, and best practices for SEO, including the use of title tags, meta descriptions, and semantic HTML. Additionally, it includes practical exercises for readers to apply their knowledge in creating web pages.

Uploaded by

daily.use.web
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/ 9

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.

1
2

•Some HTML tags have no content. These are called Empty elements e.g.
<br>
• We can either use .html or .html extension.
• You can use “inspect element” or “view page source” option from
Chrome to look into a website’s HTML Code.
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.

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? CHAPTER 2 – BASIC HTML TAGS

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>

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>

3
2

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.
by pre tag.
</pre>

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

5
2

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>

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.

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>

Table: 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>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 FORM
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.

7
2

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

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

You might also like