HTML NOTES
ЁЯМР Basic Technology Concepts (рмдрнЗрмХрнНрмирнЛрм▓рнЛрмЬрм┐ рморнМрм│рм┐рмХ рмзрм╛рм░рмгрм╛)
ЁЯФ╣ Introduction (рмкрнНрм░рм╕рнНрмдрм╛рммрмирм╛)
In today's digital world, web development and server-client architecture play a crucial role. These notes will help in understanding these concepts simply.
рмЖрмЬрм┐рм░ рмбрм┐рмЬрм┐рмЯрм╛рм▓рнНтАМ рммрм┐рм╢рнНрн▒рм░рнЗ рн▒рнЗрммрнН рмбрм┐рмнрнЗрм▓рмкрморнЗрмгрнНрмЯ рмПрммрмВ рм╕рм░рнНрмнрм░-рмХрнНрм▓рм╛рмЗрмПрмгрнНрмЯ рмЖрм░рнНрмХрм┐рмЯрнЗрмХрнНтАМрмЪрм░ рмЕрмдрм┐ рморм╣рмдрнНрмдрнНрн▒рмкрнВрм░рнНрмгрнНрмг рмЕрмВрм╢ред рмПрм╣рм┐ рмирнЛрмЯрнНтАМрмЧрнБрмбрм╝рм┐рмХ рмПрм╣рм┐ рмзрм╛рм░рмгрм╛рмЧрнБрмбрм╝рм┐рмХрнБ рм╕рм░рм│ рмнрм╛рммрнЗ рммрнБрмЭрм╛рмЗрммред
ЁЯЦе Server (рм╕рм░рнНрмнрм░)
A server is a computer or a system that provides resources, data, or services to other computers over a network.
рм╕рм░рнНрмнрм░ рм╣рнЗрмЙрмЫрм┐ рмПрмХ рмХрморнНрмкрнНрнЯрнБрмЯрм░ рмХрм┐рморнНрммрм╛ рмкрнНрм░рмгрм╛рм│рнА, рмпрм╛рм╣рм╛ рмЕрмирнНрнЯ рмХрморнНрмкрнНрнЯрнБрмЯрм░рмЧрнБрмбрм╝рм┐рмХрнБ рмПрмХ рмирнЗрмЯрн▒рм╛рм░рнНрмХ рморм╛рмзрнНрнЯрморм░рнЗ рм╕рнЗрммрм╛, рмдрмернНрнЯ рмХрм┐рморнНрммрм╛ рм╕рмВрм╕рм╛рмзрми рмкрнНрм░рмжрм╛рми рмХрм░рнЗред
ЁЯТ╗ Client (рмХрнНрм▓рм╛рмЗрмПрмгрнНрмЯ)
A client is a computer or software that requests data or services from a server.
рмХрнНрм▓рм╛рмЗрмПрмгрнНрмЯ рм╣рнЗрмЙрмЫрм┐ рмПрмХ рмХрморнНрмкрнНрнЯрнБрмЯрм░ рмХрм┐рморнНрммрм╛ рм╕рмлрнНрмЯрн▒рнЗрм░, рмпрм╛рм╣рм╛ рм╕рм░рнНрмнрм░рм░рнБ рмдрмернНрнЯ рмХрм┐рморнНрммрм╛ рм╕рнЗрммрм╛ рмЕрмирнБрм░рнЛрмз рмХрм░рнЗред
ЁЯОи Front-End (рмлрнНрм░рмгрнНрмЯ-рмПрмгрнНрмб)
The front-end is the part of a website or application that users interact with directly. It includes HTML, CSS, and JavaScript.
рмлрнНрм░рмгрнНрмЯ-рмПрмгрнНрмб рм╣рнЗрмЙрмЫрм┐ рн▒рнЗрммрнНтАМрм╕рм╛рмЗрмЯрнНтАМ рмХрм┐рморнНрммрм╛ рмЖрмкрнНрм▓рм┐рмХрнЗрм╕рмирм░ рм╕рнЗрм╣рм┐ рмЕрмВрм╢, рмпрм╛рм╣рм╛ рм╕рм┐рмзрм╛рм╕рм│рмЦ рммрнНрнЯрммрм╣рм╛рм░рмХрм╛рм░рнАрмЩрнНрмХ рм╕рм╣рм┐рмд рмЖрмирнНрмдрм░рнНрмпрнЛрмЧ рмХрм░рнЗред рмПрм╣рм╛рм░ рморнБрмЦрнНрнЯ рмЕрмВрм╢ рм╣рнЗрмЙрмЫрм┐ HTML, CSS рмПрммрмВ JavaScriptред
ЁЯЫа Back-End (рммрнНрнЯрм╛рмХрнН-рмПрмгрнНрмб)
The back-end is responsible for managing databases, server logic, and application functionality that support the front-end.
рммрнНрнЯрм╛рмХрнН-рмПрмгрнНрмб рм╣рнЗрмЙрмЫрм┐ рн▒рнЗрммрнНтАМрм╕рм╛рмЗрмЯрнНтАМ рмХрм┐рморнНрммрм╛ рмЖрмкрнНрм▓рм┐рмХрнЗрм╕рмирм░ рм╕рнЗрм╣рм┐ рмЕрмВрм╢, рмпрм╛рм╣рм╛ рмбрм╛рмЯрм╛рммрнЗрм╕рнН, рм╕рм░рнНрмнрм░ рмдрмерм╛ рм▓рмЬрм┐рмХрнНтАМ рмкрм░рм┐рмЪрм╛рм│рмирм╛ рмХрм░рнЗред рмПрм╣рм┐ рмЕрмВрм╢ рмлрнНрм░рмгрнНрмЯ-рмПрмгрнНрмбрмХрнБ рм╕рморм░рнНрмерми рмжрнЗрмЗрмерм╛рмПред
тЬН Text Editor (рмЯрнЗрмХрнНрм╕рнНрмЯ рмПрмбрм┐рмЯрм░)
A text editor is a software used to write and edit code. Examples include VS Code, Sublime Text, and Notepad++.
рмЯрнЗрмХрнНрм╕рнНрмЯ рмПрмбрм┐рмЯрм░ рм╣рнЗрмЙрмЫрм┐ рмПрмХ рм╕рмлрнНрмЯрн▒рнЗрм░, рмпрм╛рм╣рм╛ рмХрнЛрмбрнН рм▓рнЗрмЦрм┐рммрм╛ рмПрммрмВ рм╕рморнНрмкрм╛рмжрми рмХрм░рм┐рммрм╛ рмкрм╛рмЗрмБ рммрнНрнЯрммрм╣рнГрмд рм╣рнЛрмЗрмерм╛рмПред рмЙрмжрм╛рм╣рм░рмг: VS Code, Sublime Text, Notepad++ред
Html basic
HTML (HyperText Markup Language) is the standard language used to create and design webpages. It consists of different elements that define the structure of a webpage.
HTML (HyperText Markup Language) рм╣рнЗрмЙрмЫрм┐ рн▒рнЗрммрнНтАМрм╕рм╛рмЗрмЯрнН рмдрм┐рмЖрм░рм┐ рмХрм░рм┐рммрм╛ рмкрм╛рмЗрмБ рммрнНрнЯрммрм╣рнГрмд рмПрмХ рморм╛рмирмХ рмнрм╛рм╖рм╛ред рмПрм╣рм┐ рмнрм╛рм╖рм╛рм░рнЗ рммрм┐рмнрм┐рмирнНрми рмЙрмкрм╛рмжрм╛рми рмерм╛рмП, рмпрнЗрмЙрмБрморм╛рмирнЗ рн▒рнЗрммрнН рмкрнГрм╖рнНрмарм╛рм░ рмЧрмарми рмирм┐рм░рнНрмжрнНрмжрнЗрм╢ рмХрм░рм┐рмерм╛рмирнНрмдрм┐ред
HTML code is written inside a text editor like Notepad, VS Code, or Sublime Text and saved with a .html extension.
HTML рмХрнЛрмбрнН рмПрмХ рмЯрнЗрмХрнНрм╕рнНрмЯ рмПрмбрм┐рмЯрм░ (рмпрнЗрмкрм░рм┐рмХрм┐ Notepad, VS Code, Sublime Text) рм░рнЗ рм▓рнЗрмЦрм╛рмпрм╛рмП рмПрммрмВ .html рмЕрмирнБрм▓рмЧрнНрми рм░рнЗ рм╕рмВрм░рмХрнНрм╖рмг рмХрм░рм╛рмпрм╛рмПред
1я╕ПтГг
Save the file as filename.html.
2я╕ПтГг
Open it in a web browser like Google Chrome,
Mozilla Firefox, or Microsoft Edge.
1я╕ПтГг
рмлрм╛рмЗрм▓рнНтАМрмЯрм┐
filename.html
рмнрм╛рммрнЗ
рм╕рмВрм░рмХрнНрм╖рмг рмХрм░рмирнНрмдрнБред
2я╕ПтГг
Google Chrome, Mozilla Firefox, Microsoft Edge
рмнрм│рм┐
рммрнНрм░рм╛рмЙрмЬрм░ рм░рнЗ рмЦрнЛрм▓рмирнНрмдрнБред
ЁЯМЯ Changing
Text Color (рмЯрнЗрмХрнНрм╕рнНрмЯ
рм░рмЩрнНрмЧ рммрмжрм│рм╛рмЗрммрм╛)
Use
the style
attribute inside a tag:
<p style="color: blue;">This is blue text.</p>
рмЙрмкрм░рмХрнНрм░рм┐рмд рмХрнЛрмбрнН рм░рнЗ color: blue; рмжрнНрм╡рм╛рм░рм╛ рмЯрнЗрмХрнНрм╕рнНрмЯ рм░рмЩрнНрмЧ рмирнАрм│ рмХрм░рм╛рмпрм╛рмПред
ЁЯМЯ Changing
Background Color (рмкрнГрм╖рнНрмармнрнВрморм┐
рм░рмЩрнНрмЧ рммрмжрм│рм╛рмЗрммрм╛)
Use
the background-color
property:
<body style="background-color: yellow;">
ЁЯМЯ Tag (рмЯрнНрнЯрм╛рмЧрнН): A tag is a part of HTML syntax enclosed within angle brackets (<>). Example: <p>, <h1>, <body>.
ЁЯМЯ Element (рмПрм▓рм┐рморнЗрмгрнНрмЯ): An element consists of an opening tag, content, and a closing tag. Example:
HTML provides six heading tags
<h1>Largest Heading</h1>
<h2>Second Largest</h2>
<h3>Third Largest</h3>
<h4>Medium Heading</h4>
<h5>Small Heading</h5>
<h6>Smallest Heading</h6>
рмПрм╣рм┐ рмПрм▓рм┐рморнЗрмгрнНрмЯ рморм╛рмзрнНрнЯрморм░рнЗ рммрм┐рмнрм┐рмирнНрми рмЕрмкрнНрм╕рм░ рм╣рнЗрмбрм┐рмВ рмдрм┐рмЖрм░рм┐ рмХрм░рм╛рмпрм╛рмПред
ЁЯМЯ Paragraph
(<p>)
тЖТ Defines a paragraph.
ЁЯМЯ
Preformatted Text (<pre>)
тЖТ Preserves spaces and line breaks.
ЁЯМЯ
Bold (<b>)
тЖТ Makes text bold.
ЁЯМЯ
Italic (<i>)
тЖТ Makes text italic.
ЁЯМЯ
Underline (<u>)
тЖТ Underlines text.
ЁЯМЯ
Strong (<strong>)
тЖТ Makes text bold with emphasis.
ЁЯМЯ
Break (<br>)
тЖТ Inserts a line break.
ЁЯМЯ
Horizontal Rule (<hr>)
тЖТ Inserts a horizontal line.
ЁЯФ╣ Example Code:
<p>This is a <b>bold</b> text.</p>
<p>This is an <i>italic</i> text.</p>
<p>This is an <u>underlined</u> text.</p>
<hr>
<pre>
This is
preformatted text.
</pre>
ЁЯМЯ Deleted
Text (<del>)
тЖТ Shows deleted text with a strike-through.
ЁЯМЯ
Inserted Text (<ins>)
тЖТ Highlights inserted text with an underline.
ЁЯФ╣ Example Code:
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
ЁЯМЯ Subscript
(<sub>)
тЖТ Used for chemical formulas or footnotes.
ЁЯМЯ
Superscript (<sup>)
тЖТ Used for mathematical exponents.
ЁЯФ╣ Example Code:
<p>H<sub>2</sub>O (Water)</p>
<p>X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup></p>
The <div> tag is used to group HTML elements.
<div style="background-color: lightgray;">
<h2>This is a div</h2>
<p>Content inside a div.</p>
</div>
lists
1я╕ПтГг Ordered List (<ol>) тЖТ Numbered list.
2я╕ПтГг Unordered List (<ul>) тЖТ Bullet point list.
3я╕ПтГг List Items (<li>) тЖТ Items inside <ol> or <ul>.
ЁЯФ╣ Example Code:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
</ul>
Container
elements hold
other elements inside them.
Example:
ЁЯМЯ
<div>
ЁЯМЯ
<span>
ЁЯМЯ
<section>
ЁЯМЯ
<article>
Tables
in HTML are used to display data in a row-column format. A table is
created using the <table> tag, and inside it, we use rows
(<tr>), columns (<td> & <th>), and other
elements.
HTML рм░рнЗ
рмЯрнЗрммрнБрм▓рнН рморм╛рмзрнНрнЯрморм░рнЗ
рмдрмернНрнЯрмХрнБ рмкрнНрм░рмжрм░рнНрм╢рми
рмХрм░рм┐рммрм╛рмХрнБ рмкрмЩрнНрмХрнНрмдрм┐
(Row) рмПрммрмВ
рм╕рнНрмдрморнНрмн (Column)
рмнрм╛рммрм░рнЗ
рммрм┐рмирнНрнЯрм╛рм╕ рмХрм░рм╛рмпрм╛рмПред
<table
border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
</table>
ЁЯМЯ <table> - Defines a table.
ЁЯМЯ <caption> - Provides a title or description for the table.
ЁЯМЯ <tr> - Defines a row inside the table.
ЁЯМЯ <th> - Defines a header cell (bold & centered by default).
ЁЯМЯ <td> - Defines a normal table cell.
ЁЯМЯ border - Adds a border around the table.
ЁЯМЯ cellpadding - Adds space inside the cells.
ЁЯМЯ cellspacing - Adds space between table cells.
ЁЯМЯ colspan - Merges multiple columns into one.
ЁЯМЯ rowspan - Merges multiple rows into one.
ЁЯМЯ id - Uniquely identifies an element.
ЁЯМЯ class - Used to group multiple elements with the same style.
ЁЯМЯ style - Used to apply CSS styling directly.
The `<img>` tag is used to display images on a webpage. It is a self-closing tag (endless tag). Common attributes include `src`, `alt`, `width`, `height`, and `title`.
ЁЯМЯ src - Specifies the image source (URL or file path).
ЁЯМЯ alt - Provides alternative text if the image cannot load.
ЁЯМЯ width - Defines the width of the image in pixels or percentage.
ЁЯМЯ height - Defines the height of the image in pixels or percentage.
ЁЯМЯ title - Displays additional information when hovered over the image.
<img
src="image.jpg" alt="Beautiful Scenery"
width="300" height="200" title="Nature
Image">
An endless tag (also called a self-closing tag) does not require a closing tag. It ends within the same tag using `/>`.
тЬФ <img>
тЬФ <br>
тЬФ <hr>
тЬФ <meta>
тЬФ <input>
тЬФ <link>
The `<video>` tag is used to embed videos in a webpage. It supports attributes like `controls`, `autoplay`, `loop`, and `muted`.
<video
width="400" height="300" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The `<audio>` tag is used to embed sound content in a webpage. It supports formats like MP3, WAV, and OGG.
<audio
controls>
<source src="audio.mp3"
type="audio/mpeg">
Your browser does not support
the audio tag.
</audio>
The `<source>` tag is used inside `<video>` and `<audio>` elements to provide multiple media file formats for better browser compatibility.
<video
width="400" controls>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg"
type="video/ogg">
Your browser does not support
the video tag.
</video>
-
The `<img>` tag displays images and supports attributes like
`src`, `alt`, `width`, `height`, and `title`.
- Endless tags do
not require closing tags (e.g., `<br>`, `<hr>`,
`<img>`).
- The `<video>` and `<audio>` tags
embed media files, while `<source>` provides multiple format
support.
The `<a>` tag (Anchor Tag) is used to create hyperlinks in HTML. It allows users to navigate between pages or sections within a page.
<a href="https://www.example.com"
target="_blank">Visit Example</a>
Jumps allow users to navigate to a specific section of the same webpage using an anchor link with an `id`.
<a href="#section2">Jump to Section 2</a>
<h2
id="section2">This is Section 2</h2>
The `<iframe>` tag is used to embed another webpage inside a webpage.
ЁЯМЯ src - Specifies the URL of the embedded page.
ЁЯМЯ width - Defines the width of the iframe.
ЁЯМЯ height - Defines the height of the iframe.
ЁЯМЯ frameborder - Removes or adds a border to the iframe (0 or 1).
ЁЯМЯ allowfullscreen - Allows full-screen mode.
<iframe src="https://www.example.com" width="600"
height="400"></iframe>
<a href="page1.html" target="myFrame">Load
Page 1</a>
<a href="page2.html"
target="myFrame">Load Page 2</a>
<iframe
name="myFrame" width="600"
height="400"></iframe>
The `<marquee>` tag is used to create scrolling text or images.
<marquee behavior="scroll" direction="left">This
is scrolling text</marquee>
HTML comments are used to add notes in the code, which are not visible to users.
<!-- This is a comment -->
ЁЯМЯ Name - Uses predefined color names like red, blue, green.
ЁЯМЯ Hex - Defines colors using hexadecimal values, e.g., #FF5733.
ЁЯМЯ RGB - Uses RGB format, e.g., rgb(255, 87, 51).
ЁЯМЯ HSL - Defines colors using hue, saturation, and lightness, e.g., hsl(9, 100%, 60%).
<p style="color: red;">This is Red</p>
<p
style="color: #FF5733;">This is Hex Color</p>
<p
style="color: rgb(255, 87, 51);">This is RGB
Color</p>
<p style="color: hsl(9, 100%,
60%);">This is HSL Color</p>
HTML forms allow users to enter data, which can be sent to a server.
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input
type="text" id="name" name="name"
required><br><br>
<label
for="email">Email:</label>
<input
type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password"
name="password"><br><br>
<label
for="gender">Gender:</label>
<select
id="gender" name="gender">
<option
value="male">Male</option>
<option
value="female">Female</option>
</select><br><br>
<input
type="submit" value="Submit">
</form>
HTML Forms
