NOTES
HTML NOTES
FOR
BOOTCAMP
CREATED BY : LAKSHYA ROY
NOTES
HTML NOTES FOR BOOTCAMP
MAKE A HTML FILE AND ADD BOILEPLATE CODE
OPEN VISUAL STUDIO CODE
CREATE A NEW FILE
SAVE THE FILE
START WRITING HTML
UNDERSTAND TAGS IN HTML
HTML TAGS:
HTML STANDS FOR HYPERTEXT MARKUP LANGUAGE.
HTML USES TAGS TO DEFINE DIFFERENT ELEMENTS
WITHIN A WEB PAGE. TAGS ARE ENCLOSED IN ANGLE
BRACKETS < > AND USUALLY COME IN PAIRS: AN
OPENING TAG AND A CLOSING TAG.
EXAMPLE:-
<a href="https://www.example.com">Click here</a>
NOTES
HTML NOTES FOR BOOTCAMP
Commonly Used Tags: Some commonly used HTML tags
include:
<h1>, <h2>, <h3>, ... <h6>: Headings of different levels.
<p>: Paragraph.
<a>: Anchor (creates hyperlinks).
<img>: Image.
<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.
<div>: Division or section.
<span>: Inline section.
Nested Tags: HTML elements can be nested inside other
elements.
For example:
<div>
<p>This is a paragraph inside a division.</p>
</div>
UNDERSTAND H1- H6 IN HTML
Heading Tags: In HTML, heading tags (<h1> to <h6>) are
used to define headings or titles for different sections of
a webpage.
NOTES
HTML NOTES FOR BOOTCAMP
UNDERSTAND P TAG IN HTML
PARAGRAPH TAG: IN HTML, THE <P> TAG IS USED TO
DEFINE PARAGRAPHS OF TEXT. IT'S ONE OF THE MOST
COMMONLY USED TAGS FOR ORGANIZING AND
STRUCTURING TEXTUAL CONTENT ON A WEBPAGE.
EXAMPLE:
<p>This is the first paragraph of text.</p>
<p>This is the second paragraph of text.</p>
UNDERSTAND <BR> TAG IN HTML
Line Break Tag: The <br> tag is used to insert a line break
within the text. It's a self-closing tag, meaning it doesn't
require a closing tag like many other HTML elements.
EXAMPLE:
This is some text.<br>This is text on a new line.
UNDERSTAND <IMG> TAG IN HTML
Image Tag: The <img> tag is used to embed images into a
webpage. It's a self-closing tag, meaning it doesn't have a
closing tag like many other HTML elements.
Example:
<img src="image.jpg" alt="Description of the image" />
NOTES
HTML NOTES FOR BOOTCAMP
UNDERSTAND A TAG IN HTML
Anchor tag (<a>) for creating hyperlinks
<a href="https://www.example.com">Visit Example</a>
UNDERSTAND DIV TAG IN HTML
<div> tag, short for "division
div is a fundamental building block for creating
sections and structuring your web page's content
example:
<div class="main-content">
<h1>Welcome to my website!</h1>
<p>This is the main content area of my page.</p>
</div>
UNDERSTAND ATTRIBUTE IN HTML
Attributes are special additions to HTML tags that
provide further information about how an element should
behave or be displayed.
EXAMPLE:
<img src="image.jpg" alt="A beautiful sunset">
src and alt are attributes of the img tag.
<a href="https://www.example.com">Click here</a>
href are attributes of the Anchor tag.
NOTES
HTML NOTES FOR BOOTCAMP
UNDERSTAND CLASS IN HTML
the class attribute is used to assign one or more class
names to an HTML element. These class names serve as
identifiers that can be used to apply CSS styles or
JavaScript functionality to specific elements.
EXAMPLE:
OUTPUT
NOTES
HTML NOTES FOR BOOTCAMP
UNDERSTAND ID IN HTML
the id attribute uniquely identifies an individual element
within a web page. Unlike the class attribute, which can
be applied to multiple elements, the id attribute must be
unique within the HTML document. It provides a way to
target specific elements for styling with CSS or for
manipulation with JavaScript.
EXAMPLE:
OUTPUT
