Important Instructions…
Give meaningful names to the files.
File name shall not contain numbers.
No special symbols shall be included in the file name.
If file name contains multiple words, then they shall be separated by – (hyphen) symbol. E.g.
full-stack-java-development-course.html
Title tag should not be empty.
Keyboard Short Keys
Alt + Tab Toggle between open application windows
! + Enter Creates automatic HTML structure in VS Code
HTML Attributes
HTML attributes provide extra information about the HTML element.
Attributes are always specified in the start tag.
E.g. <p class = "section-head"> Article About ECTI </p>
Here class = "section-head" is an attribute
class is an attribute name
"section-head" is an attribute value
We can apply multiple attributes to an element.
<blockquote> tag
The <blockquote> tag is used to indicate the quotation of a large section of text from
another source.
Browsers usually indent <blockquote> elements.
Important attributes –
cite: specifies the source of the quotation.
<blockquote cite = "https://www.brainyquote.com/authors/a-p-j-abdul-kalam-quotes"> If you
want to shine like a sun, then you first need to burn like a sun. </blockquote>
Anchor <a> tag
The <img> tag is used to insert an image in an HTML document.
Important attributes –
src: Specifies the path to the image.
alt: Specifies an alternate text for the image, if the image is displayed for some
technical issues.
title: The image title attribute is only visible on mouse-over and displays just the
image title. It is used to provide additional information about the image.
<img src="Chatrapati-Shivaji-Maharaj.jfif" alt="Chatrapati Shivaji Maharaj - The Great Maratha
Warrior" title="Chatrapati Shivaji Maharaj - The Great Maratha Warrior"/>
<img src="Sword.pn" alt="Sword" title="Sword"/>
<iframe> tag
<iframe> is used to embed another document within the current HTML document.
Important attributes –
src: Specifies the path of the document to be embedded.
width: Specifies width of the frame in pixels.
height: Specifies frame of the frame in pixels.
You can insert –
Another web page.
Another website.
You tube video.
Google maps.
For embedding you tube video or google maps you need to go to the specific video or map.
Click on share. Copy the link to be embedded. Paste the code in html document.
Another web page:
<iframe src="blockquote-CW.html" width="400" height="500"></iframe>
Another website:
<iframe src="https://www.ecti.co.in" width="400" height="500"></iframe>
You tube video:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/t8ApMdi24LI" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
Google Map:
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3784.662
8222130716!2d73.85944286461162!3d18.453612187448083!2m3!1f0!2f0!3f0!
3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2eac3b798a639%3A0x2ca4c5e0a9c
32d8c!2sKatraj%20Snake%20Park%20Lake!5e0!3m2!1sen!2sin!4v16763702766
26!5m2!1sen!2sin" width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-
downgrade"></iframe>
Unordered List <ul> tag
<ul> tag defines unordered (bulleted) list.
<li> is used to add items inside unordered list.
<ul type=“square" >
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
type attribute specifies the type of bullet. The default type is disc. Other types are square
and circle.
Ordered List <ol> tag
<ol> tag defines ordered (numbered) list.
<li> is used to add items inside unordered list.
<ol type= "i" start= "10" >
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
type attribute specifies the type of number. The default type is 1. The number formats can
be – 1, A, a, i, I
Table <table> tag
<table> tag is used to create a table in HTML document.
The tags involved are –
<table> - Adds HTML table
<caption> - Specifies table title
<thead> - Used to group header content of the table
<tbody> - Used to group body content of the table
<tfoot> - Used to group footer content of the table
<tr> - To add a row inside a table
<th> - To add table headings
<td> - To add table data
border attribute is used to add border to the table.
