HTML NOTES
Introduction :
• HTML is the language in which most websites are written.
HTML is used to create pages and make them functional.
• A web page is fundamentally made up of three
Technologies :
1. HTML (Hypertext Markup language).
2. CSS (Cascading Style Sheet).
3. Javascript.
• HTML will only give the structure of the web page.
• CSS adds beauty to the webpage.
• JavaScript is used for making web page dynamic.
HTML (Hypertext Markup Language).
1. HTML stands for Hyper Text Markup Language.
2. HTML is the standard markup language for creating web
pages and web applications.
3. It is used to describe the structure of the web pages using a
process called markup.
4. HTML consists of a series of elements.
5. HTML elements tell the browser how to display the
content.
6. HTML was first created by Tim Berners-Lee and others
starting in 1989.
7. Hypertext means that the document contains links that
allow the reader to jump to other places in the document
or to another document altogether. The latest version is
known as HTML5.
8. A Markup Language is a way that computers speak to each
other to control how text is processed and presented.
9. To do this HTML uses two things: tags and attributes.
Structure of HTML (or) HTML boilerplate :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Content of the document
</body>
</html>
DOCTYPE Declaration :
• Helps browser to display web pages correctly.
• It must appear once, at the top of the page before any
HTML tags.
• HTML <!DOCTYPE> tag is used to inform the browser
about the version of HTML used in the document.
• It is called as the document type declaration (DTD).
Syntax :
• <!DOCTYPE html>
HTML document itself begin with <html> and end with </html>
(which tells the browser that this is an HTML page).
Head tag which contains meta information about the
document, title of the web page and also contains a link to the
styling sheets, the fonts etc.
Body tag contains of elements like heading tags, paragraph
tags, etc. itself begin with the <body> and end with </body>.
Steps :
1. Open notepad
2. Write HTML code
3. Save the code and extension of the file name should be
html
• Ex : [ [Link] ]
• You can use either .htm or .html as file extension.
4. Open the saved HTML file in your favorite browser.
Text Formatting Tags:
1. b : bold text
2. strong : Important text (bold)
3. i : Italic text
4. em : Emphasized text
5. mark : Marked text (Highlight the text)
6. del : removal from the document (no longer accurate or
relevant)
7. s : strike the text (no longer accurate or no longer relevant) .
So to strike you can use either s or del.
8. ins : Inserted text
9. u : Underline text
10. sub :subscript text. Ex. Chemistry formulae.
11. sup : superscript text. Ex. Mathematical formulae
12. q : element(quote element) is used to print double
quotes.
HTML HEADINGS :
• HTML headings are titles or subtitles that you want to
display on a webpage.
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading.
• <h6> defines the least important heading
HTML PARAGRAPHS :
• A paragraph contains text or paragraphs.
• A paragraph always starts on a new line, and is usually a
block of text.
• HTML paragraphs are defined with the <p> tag.
• Opening tag is <p> and closing tag is </p> .
Example:
<body>
<p>TEKS--TRANSFERING EXPERTS KNOWLEDGE TO STUDENTS </p>
</body>
HTML Tags:
Line Break: <br>
if you want a line break (a new line) without starting a new
paragraph.
The <br> tag is an empty tag, which means that it has no end
tag.
Pre Element: <pre>
The text inside a <pre> element is displayed in a fixed-width
font (usually courier) and it preserves both spaces and line
breaks.
Comment line:
If you want to keep a code or sentence in comment line then
we will write as <!—comment -->
Abbrivation:
<abbr title="Transferring Experts Knowledge to Students">TEKS</abbr>
Image Tag:
<img src= “ ” alt=” ”>
<img src="Screenshot 2024-09-20 [Link]" alt="">
Img tag is a self closing tag and we need to mention the image
path in src(source) and we need to give alt(alternative) if any
case image won’t displayed then alternative name will be
displayed.
Horizontal Rules :
The <hr> element is used to separate content (or define a
change) in an HTML page.
<hr> tag is an empty tag, which means that it has no end tag.
Audio Tag :
<audio controls autoplay loop muted src="[[Link]] 02 - Hanuman
Chalisa.mp3"></audio>
• controls : If this attribute is present, it will allow the user
to control audio playback, including volume, seeking, and
pause/resume playback.
• loop : This Boolean attribute if specified, will allow audio
automatically seek back to the start after reaching at the
end.
• muted : audio will be muted in browser.
• src : The URL of the audio to embed.
Image to play audio:
Syntax
<a href="[[Link]] 02 - Hanuman Chalisa.mp3"><img src="clouds-country-
[Link]" alt=""></a>
Video Tags:
<video controls src="------.mp4"> </video>
• Controls : If this attribute is present, it will allow the user
to control video playback, including volume, seeking, and
pause/resume playback.
Image to play video:
<a href="guvi.in_.mp4"><img src="Screenshot 2024-09-20 [Link]" alt=""></a>>
HTML Links : Anchor tag
• HTML links are defined with the <a> tag.
Syntax:
<a href=“ ” rel=“ ”>
• If the element has an href attribute, then it represents a
hyperlink (a hypertext anchor).
HTML Links using image :
Syntax:
<a href="[Link] src=“[Link]"
width=“20%" height=“30%"> </a>
HTML Links in separate tab : to display link in new tab
<a href="[Link] " target="_blank">link</a>
List in html:
In HTML, there are three types of lists used to display information in a structured way:
1. Ordered List (<ol>): A list that is numbered (1, 2, 3, ...).
2. Unordered List (<ul>): A list that is bulleted (•, ○, ...).
3. Description List (<dl>): A list used to describe terms and their definitions.
1. Ordered List (<ol>): An Ordered List is used when the order of list items is important.
The list items are automatically numbered by the browser.
Syntax:
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
2. Unordered List (<ul>): An Unordered List is used when the order of the list items does
not matter. Items are marked with bullet points.
Syntax:
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
3. Description List (<dl>): A Description List is used for defining terms. It pairs <dt>
(definition term) with <dd> (definition description).
Syntax:
<dl>
<dt>Term 1</dt>
<dd>Description for Term 1</dd>
<dt>Term 2</dt>
<dd>Description for Term 2</dd>
</dl>
//Program on combination of ordered list, Unordered List and Description List
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ol>
<li>CSE</li>
<li>ECE</li>
<li>EEE</li>
</ol>
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>Hypertext markup language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
</html>
HTML List Tags :
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Inline and Block Elements
HTML elements are primarily classified into two categories: inline elements and block
elements. This classification affects how the elements behave in a web page layout, particularly
how they occupy space, and how they are displayed in relation to other elements.
1. Block Elements
Block elements take up the full width available (100% width of their parent container) and
always start on a new line. They stack vertically one after another. These elements typically
contain content that is more substantial, like paragraphs or sections of a web page.
Characteristics of Block Elements:
Always start on a new line.
Occupy the full width of their container, unless a specific width is set.
Can contain other block-level elements or inline elements.
Respect margin and padding, both vertically and horizontally.
By default, block elements expand vertically to fit their content.
Common Block Elements:
<div>: Generic block container, often used for layout purposes.
<p>: Defines a paragraph.
<h1> to <h6>: Headings of different levels.
<ul> / <ol>: Unordered and ordered lists.
<li>: List item.
<section>: Represents a section of a document.
<header>, <footer>, <article>, <nav>: Semantic elements that define specific parts of
the document.
2. Inline Elements
Inline elements only take up as much width as necessary to fit their content. They do not start
on a new line and remain in the flow of the text, meaning they sit alongside other inline
elements or text. Inline elements are generally used for small pieces of content within a block.
Characteristics of Inline Elements:
Do not start on a new line.
Only take up as much width as needed (does not fill the entire width of the parent
container).
Respect padding and margin horizontally but not vertically.
Cannot contain block-level elements.
Are typically used for formatting small chunks of text or adding links/images inside a line
of text.
Common Inline Elements:
<span>: Generic inline container for text and styling purposes.
<a>: Anchor element (used for links).
<img>: Embeds an image.
<strong>: Defines important or bold text.
<em>: Defines emphasized or italic text.
<code>: Used to define inline code snippets.
<br>: Inserts a line break.
TABLE Element :
• <TABLE> tag is used to create a table in HTML.
• <CAPTION> defines the caption(main heading) of the table
• <TH> declares the header row of the table
• <TR> declares a row of the table
• <TD> defines a cell of a row
TABLE has the following attributes:
• BORDER=“n” : defines the width of the border in pixels
• WIDTH=“npx” or “n%” : defines the width in pixels or a percentage of
page width
• BGCOLOR=“color” : defines the background color of table
• CELLPADDING=“n” : space in pixels from sides of the cell
• CELLSPACING=“n” : space in pixels between cells
• ALIGN=“left|right|center” : Aligns the table w.r.t. page
• RULES=“none|rows|cols|all” : internal lines of the table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
height: 70px;
width: 80px;
}
</style>
</head>
<body>
<table border="10" cellpadding="3" cellspacing="3" bordercolor="green"
height="800" width="800">
<caption>Student Details</caption>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
<th>Year</th>
</tr>
<tr>
<td><img src="[Link]" alt="image"></td>
<td>JAVA</td>
<td>100</td>
<td>2024</td>
</tr>
<tr>
<td>Lucky</td>
<td>Python</td>
<td>99</td>
<td>2020</td>
</tr>
<tr>
<td colspan="3">Daisy</td>
<td>Love</td>
</tr>
<tr>
<td>HAI</td>
<td>Hello</td>
<td>50</td>
<td>Yes</td>
</tr>
</table>
</body>
</html>
FORM ELEMENT :
• An HTML Form is used to collect user input. The user input is more often
sent to server for processing.
• The HTML <form> element is used to create an HTML form for user input.
<form>
form elements
</form>
<label>First Name</label>
<input type="text" value="Enter First Name">
• placeholder helps us to give new input directly.
<label>First Name</label>
<input type="text" placeholder=" Enter First Name ">
<input type="text" placeholder="enter first name" required>
Type Description
<input type=“text”> Displays a single line text input field
<input type=“radio”> Displays a radio button (for selecting one of many choices)
<input type=“checkbox”> Displays a checkbox(for selecting zero or more of many choices
<input type=“submit”> Displays a submit button (for submitting the form)
<input type=“button”> Displays a clickable button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.teks{
background-color: #6d2e2e;
}
.bodyinfo{
background-color: aqua;
}
</style>
</head>
<body>
<form action="">
<div class="teks"> <h1>Registration Form</h1></div>s
<div class="bodyinfo"> <label for="">Name:</label>
<input type="text" placeholder="enter your name"><br><br>
<label for="">Email:</label>
<input type="email" placeholder="enter your email"><br><br>
<label for="">Password</label>
<input type="password" placeholder="enter your password"><br><br>
<label for="">Linkedin</label>
<input type="url"><br><br>
<label for="">Contact:</label>
<input type="number" placeholder="enter your number"><br><br>
<label for="">Address</label>
<textarea rows="3" cols="15"></textarea><br><br>
<label for="">Gender</label><BR></BR>
<input type="radio" name="MALE">MALE <BR></BR>
<input type="radio" name="MALE">FEMALE <BR></BR>
<input type="radio" name="MALE">Others <br><br>
<label for="">DOB</label>
<input type="date"><br><br>
<label for="">Percentage</label>
<input type="number" placeholder="enter percentage"><br><br>
<label for="">Course:</label>
<select >
<option value="">CSE</option>
<option value="">ECE</option>
<option value="">EEE</option>
<option value="">CIVIL</option>
<option value="">MECH</option>
</select><br><br>
<label for="">College:</label>
<input type="text" placeholder="enter your college"><br><br>
<label for="">Fav Colour</label>
<input type="color"><br><br>
<label for="">College Feedback</label>
<input type="range" min="0" max="10">
<br><br></div>
<input type="checkbox" name="" id="">
The above info is correct
<br><br>
<input type="button" value="Submit">
</form>
</body>
</html>
DETAILS and SUMMARY Element:
• The details element represents a disclosure widget from which the user can
obtain additional information or controls.
• The summary element child of the element, if any, represents the summary
or legend of the details.
<details>
<summary>Automated Status: Operational</summary>
<p>Velocity: 12m/s</p>
<p>Direction: North</p>
</details>
Textarea :
<textarea rows=“10” cols=“20”></textarea>
NAV Element:
• The nav element represents a section of a page that links to other pages or to
parts within the page.
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="[Link]">Index of all articles</a></li>
<li><a href="[Link]">Things sheeple need to wake up for today</a></li>
</ul>
</nav>
SECTION ELEMENT:
A section, in this context, is a thematic grouping of content, typically with a
heading.
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many supermarkets.</p
</section>
FORM ELEMENT : with legend and Fieldset tag
The <legend> tag defines a caption for the <fieldset> element
Reset Button state (type=reset) :
• The input element represents a button that, when activated, resets the form.
The element is a button.
reset:<input type="reset">
Example: <button type="submit">Register</button>
<button type="reset">Reset</button>
MARQUEE Element
• The <marquee> tag in HTML is used for creating scrolling text or image in a
webpages. It scrolls either from horizontally left to right or right to left, OR
vertically top to bottom or bottom to top.
• Attributes of marquee element are :
• Direction
• Scrollamount
• Height
• Width
• bgcolor
• Scrolldelay
• Loop
<marquee bgcolor="blue" direction="up" hspace="10" vpsace="30"
scrollamount="10"><img src=“[Link]" alt=“no image"
width="100px" height="100px"></marquee><br>
HEADER ELEMENT
• The header element represents a group of introductory or navigational aids.
• A header element is intended to usually contain the section's heading (an h1–
h6 element or an hgroup element)
<header>
<div>
<img src="[Link]" style="display: inline-block;">
<h1>Shivani Degree college</h1>
<img src="[Link]" style="display: inline-block;">
</div>
</header>
FOOTER ELEMENT :
The footer element represents a footer for its nearest ancestor sectioning content or
sectioning root element. A footer typically contains information about its section
such as who wrote it, links to related documents, copyright data etc.
ADDRESS ELEMENT :
• The address element represents the contact information for its nearest article
or body element.
• If that is the body element, then the contact information applies to the
document as a whole the address element would be included along with
other information in a footer element.
<footer>
<address> For more details, contact<a
href="[Link]
college/contact">shivani college contact details</a>.
</address>
</footer>