Scribd
Upload
37 views

Unit-1 HTML

The document discusses various HTML tags and attributes used for links, images, forms, and media elements. It describes the <a> tag and href and target attributes used to create hyperlinks. It also explains the <img> tag and its attributes like src, alt, width, and height. For forms, it covers the <form>, <label>, <input>, <select>, <textarea>, <button>, and <datalist> tags along with their attributes. It provides examples of how to create text fields, radio buttons, checkboxes, dropdowns, textareas, and buttons. It also discusses the <video> and <audio> tags used to embed media with the src and type attributes.

Uploaded by

Gamit Mayank
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

Unit-1 HTML

The document discusses various HTML tags and attributes used for links, images, forms, and media elements. It describes the <a> tag and href and target attributes used to create hyperlinks. It also explains the <img> tag and its attributes like src, alt, width, and height. For forms, it covers the <form>, <label>, <input>, <select>, <textarea>, <button>, and <datalist> tags along with their attributes. It provides examples of how to create text fields, radio buttons, checkboxes, dropdowns, textareas, and buttons. It also discusses the <video> and <audio> tags used to embed media with the src and type attributes.

Uploaded by

Gamit Mayank
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

1.1.

2 HTML Links and Attributes:

Links in HTML are used to connect different web pages and allow users to navigate between
them. The anchor tag, <a>, is used to create a hyperlink.

The attributes used with anchor tags are:

- href: specifies the URL of the page to which the link goes.
- target: specifies where to open the linked page. The values used with target are _self, _blank,
_parent, and _top.

_self: opens the linked page in the same tab

_blank: opens the linked page in a new tab

_parent: opens the linked page in the parent frame

_top: opens the linked page in the full body of the window

Example:

<a href="https://www.google.com" target="_blank">Go to Google</a>

1.1.3 Absolute URL and Relative URL in <href>

- Absolute URL: It contains a fully qualified URL, including the protocol and domain name.
Syntax: <a href="https://www.example.com">Link Text</a>
- Relative URL: It is used when the linked page is in the same website as the current page. It
only contains the path to the file.
Syntax: <a href="/path/to/file.html">Link Text</a>

1.1.4 <img> tag and its attributes (src, alt, style, width, height)

The <img> tag is used to embed a single image on a web page.

The attributes used with the <img> tag are:

- src: specifies the URL of the image.


- alt: provides text for screen readers and when the image cannot be displayed.
- style: specifies the style of the image.
- width: specifies the width of the image.
- height: specifies the height of the image.

Example:

<img src="example.jpg" alt="Example Image" style="width: 500px; height: 400px">

1.2 HTML Forms:

HTML forms are used to collect user input. The <form> tag is used to create a form.

1.2.1 Form elements and their attributes:

1.2.1.1 <form> (action, method, novalidate, autocomplete, target)


- action: specifies where to send the form data.
- method: specifies the HTTP method to use for submitting the form data. The values used with
method are "get" and "post".
- novalidate: specifies that the form should not be validated by the browser.
- autocomplete: specifies if the form should autocomplete.
- target: specifies where to open the result page.

Example:

<form action="process-form.php" method="POST" novalidate autocomplete="off"


target="_blank">
...
</form>

1.2.1.2 <label>, <input> (text, radio button, checkboxes, submit/reset button)

- <label>: used to associate a label with a form control


- <input>: used for multiple types of form controls.

For text input:


<input type="text" name="username">

For radio buttons:


<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

For checkboxes:
<input type="checkbox" name="interest[]" value="books"> Books
<input type="checkbox" name="interest[]" value="music"> Music
<input type="checkbox" name="interest[]" value="movies"> Movies

For submit/reset button:

<input type="submit" value="Submit">


<input type="reset" value="Reset">

1.2.1.3 <select>(id, name, <option>)

- <select>: used to create a drop-down list.


- <option>: used to create an option for the select element.

<select id="cars" name="cars">


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

1.2.1.4 <textarea>(name, rows, cols)

- <textarea>: used for multi-line text input.

<textarea name="message" rows="4" cols="50">


Enter your message here.
</textarea>
1.2.1.5 <button>(type, onclick)

- <button>: used to create a clickable button.

<button type="button" onclick="alert('Hello World!')">Click Me</button>

1.2.1.6 <datalist>

- <datalist>: used to provide a predefined list of options for input.

<input list="browsers">

<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>

1.2.2 Media: Video, Audio detailed notes with example for above syllabus

Media elements such as videos and audios can be added to HTML using the <video> and
<audio> tags.

Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>

You might also like