Scribd
Upload
19 views

HTML Notes For Students

Uploaded by

Divya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

HTML Notes For Students

Uploaded by

Divya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML Introduction

HTML:- Html is a hyper text markup language it use to make layout or


structure of web application.

<h1> Tag: First-Level Heading


The <h1> tag defines the first-level heading and is typically the largest
and boldes among all the heading tags.

<h1> <!-- Heading content --> </h1>

<h2> Tag: Second-Level Heading


The <h2> tag is used for second-level headings and is slightly smaller
than the <h1> tag

<h2> <!-- Heading content --> </h2>


<h3> Tag: Third-Level Heading
The <h3> tag is used for third-level headings. These are smaller than <h2> tags and
are often used for sub-sections within an <h2> section.

<h3> <!-- Heading content --> </h3>

<h4> Tag: Fourth-Level Heading


The <h4> tag defines a fourth-level heading, which is smaller than the <h3> tag.
It's often used for sub-sections within an <h3> section.
<h4> <!-- Heading content --> </h4>

<h5> Tag: Fifth-Level Heading


The <h5> tag is used for fifth-level headings and is smaller than <h4> tags.

<h5> <!-- Heading content --> </h5>

<h6> Tag: Sixth-Level Heading


The <h6> tag defines the sixth-level heading and is the smallest among all the
heading tags
<h6> <!-- Heading content --> </h6>
Paragraph Tag :- <p> tag is use to define the paragraph in html.

<p> <!-- Paragraph content --> </p>

Line Break Tag:- The <br> tag inserts a single line break. The <br> tag is
useful for writing addresses or poems. The <br> tag is an empty tag which means that
it has no end tag.
<br>

Horizontal Line Tag:-The <hr> tag is an empty or self-closing tag, meaning


it doesn't require a closing tag. It serves as a visual separator, dividing
different sections of your document with a horizontal line.
<hr>
Anchor Tag:-Links are fundamental to navigating the web. In HTML, links
are created using the <a> tag, also known as the Anchor tag.

<a href="Your specified path"> content </a>

Image Tag:-the <img> tag is used to embed images into web pages.

<img src="image's path" />


HTML Inline Elements:-Inline Elements don't start on a new line. It only
takes the width required to cover the content.

<span>This is <strong>important</strong> text.</span>

HTML Block Elements:- You already know about HTML inline elements. All
HTML tags have specific display behavior: they are either block-level elements or
inline elements.
• It always start from new line.

HTML Unordered List:- An unordered list is a list of items that are not
arranged in any specific, sequential order.
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>

You can specify the style of bullet points using the type attribute. It
supports three values:
•disc - default bullet style
•square
<ul type="square">
•circle
<li>Notebook</li>
<li>Marker</li>
</ul>
HTML Ordered List:-An ordered list is a list of items that are arranged in
a specific, sequential order.

<ol>
<li>Mango</li>
<li>Orange</li>
<li>Litchi</li>
</ol>

Setting the 'type' Attribute:-


The type attribute specifies the style of numbering. You have several options:
1.Uppercase Roman Numerals: Use type="I“,
2.Lowercase Roman Numerals: Use type="i“,
3.Arabic Numerals: Use type="1" (This is the default if the type attribute is not
specified),
4.Lowercase Alphabetical Letters: Use type="a“,
5.Uppercase Alphabetical Letters: Use type="A“,
<ol type="A" start="3">
<li>Pen</li>
<li>Pencil</li>
</ol>
HTML Input Types:-Input types in HTML forms are the backbone of interactive
web applications. They allow users to send information to web servers for various
purposes like searching, logging in, or providing feedback. In this blog, we'll
explore common HTML input types: text, password, radio, and checkbox

Text Input:-The text input type is the most basic form of input and is widely
used for collecting simple text data.

<input type="text" name="username" placeholder="Enter your username">

In the above example, the placeholder attribute provides a hint to the user about
what to enter.

Password Input:- The password input type is similar to the text type but
hides the characters entered by the user for security reasons.

<input type="password" name="password" placeholder="Enter your password">


Radio Buttons:-Radio buttons are used when you want the user to select
only one option from a set of choices.

<input type="radio" id="male" name="gender" value="male">


<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Checkbox:- Checkboxes allow the user to select multiple options from a set.

<input type="checkbox" id="subscribe" name="subscribe" value="yes">


<label for="subscribe">Subscribe to newsletter</label>

The Textarea Element:- The textarea element is used when you need
multiline text input from the user.

<textarea name="comment" rows="4" cols="50"> Enter your comment here... </textarea>


The Select Element:-The select element creates a dropdown menu for the user

<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>

File upload input:- it use to upload file and photo from the device.

<label>Upload your photo</label>


<input type=“file" ></input>
iFrames in HTML:- iFrames, or Inline Frames, are an integral part of modern
web development. It use to create a frame.
<iframe src="URL" width="width" height="height"></iframe>

Embedding Google Maps:-

<iframe src="https://maps.google.com/maps?q=LOCATION&output=embed" frameborder="0"></iframe>


Video & Audio Tags:-

The <video> Tag :- The <video> tag is used to embed video files in an HTML
document. It supports multiple attributes to control the video playback.

<video src="video.mp4" controls></video>

Attributes for <video> Tag:-


• src: Specifies the path to the video file.
• controls: Adds video controls, like play, pause, and volume.
• autoplay: Automatically starts playing the video when the page loads.
• loop: Repeats the video once it ends.
• muted: Mutes the video by default.
• poster: Specifies an image to be displayed before the video starts playing.
• width and height: Specifies the dimensions of the video.
The <audio> Tag:-The <audio> tag is used to embed audio files in an HTML
document. It also supports multiple attributes for control.

<audio src="audio.mp3" controls></audio>

Attributes for <audio> Tag:-


• src: Specifies the path to the audio file.
• controls: Adds audio controls, like play, pause, and volume.
• autoplay: Automatically starts playing the audio when the page loads.
• loop: Repeats the audio once it ends.
• muted: Mutes the audio by default.
• preload: Specifies if and how the audio should be loaded when the page loads
('auto', 'metadata', 'none').

You might also like