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>
