HTML -Notes(BigBinary Academy)

Elements -

Heading - h1 to h6
paragraph - <p>Himalayas is a beautiful mountain range. It lies in the Indian subcontinent.</p>
unordered list or Ordered list (ol is used) -

<ul>
<li>Ice cream</li>
<li>Chocolate</li>
</ul>

div - <div></div>
line brake- <br>

Elements with attribute -

image with attribute- <img src="https://ik.imagekit.io/d9mvewbju/Course/BigbinaryAcademy/download_d1dKbP6V8.avif" alt="The view from a balcony">
Link- <a>element is used to create a link to a web page. Here are some examples:
link with target - The target attribute specifies where the linked document will open. _self: This is the default value. It opens the linked document in the same window where the link was clicked. _blank: Opens the linked document in a new window or tab.

<a href="https://www.bigbinary.com/blog/introducing-neeto-ui-v6" target="_self">
Introduction to NeetoUI v6
</a>

Attribute-An HTML element can have optional attributes. An attribute is used to set the behaviour of an HTML element. It has two parts, a name and a value, and is added within the opening tag of an element.<h1 title="The web loves HTML">On the internet, HTML is everywhere</h1>
<h1 title="The web loves HTML">On the internet, HTML is everywhere</h1>- Hovering effect
Link to parts of the same page - https://courses.bigbinaryacademy.com/learn-html/elements-with-attributes/link-to-parts-of-same-page/,using # - <a href="#country">Countries</a> and then <h2 id="country">Countries</h2>, the link will go to the header with id=country.
HTML Element Dataset - <h1 id="fruit" data-fruit-name="orange">Orange</h1> (custom-data-attribute always data- is written before writing the required data attribute name) course link
The <button> element creates a clickable button.-<button type="button">I am clickable!</button>
table - <table></table>,for row- <tr>for table data use <td></td> </tr>(table header), <th> </th>(table header is used in place <td>).The <caption> element is used to add a title to the table. It must be placed immediately after the opening <table> tag.<thead> , <tfoot>and <tbody> for wrapping the header ,footer and body (no use visually).

Form Elements-

all elements are inside <form></form>

The <input> element accepts data from the user. Its functioning depends on the value of its type attribute.

<input type="text">
<input type="submit">

<label></label> - element puts a label on other form elements.
Placeholder text is the text that appears in an input field before the user clicks it and starts typing. Placeholder text disappears as soon as the user starts typing(<input placeholder="Sam Smith">).
The <textarea> element is for submitting large textual content.

example -
<form>
<label>Your Review:</label>
<br>
<textarea
rows="3"
cols="30"
>Add detailed review here</textarea>
</form>

Required Attribute - cant leave valueless -<input placeholder="Sam Smith" required>. We can put the required attribute on input, select or textarea elements. link

drop-down lists in our forms, we use the <select>. inside it <option value="apple">Apple 🍎</option>

When we add a <button> element with the type attribute set as submit, it will be responsible for submitting the data entered in the form by the user. If the type attribute is not added to a <button> element, its default type will be submit. However, if the button is placed outside a <form> element, specifying type="submit" or type="reset" would have no effect as there is no associated form to submit.

<form id="form">
<label>First Name:</label>
<input placeholder="Renu">
<label>Last Name:</label>
<input placeholder="Sen">
<button type="submit">Submit</button>
</form>

A <button> element with the type attribute set as reset has a a special job: it helps to clear the form

The <fieldset> element is used to group related form elements. used inside <form></form>. here disabled means u cant enter inside the inputs.

<fieldset disabled>
<label>City:</label>
<input placeholder="Pune" >
<label>State:</label>
<input placeholder="Maharashtra" >
<label>Country:</label>
<input placeholder="India" >
</fieldset>
The <legend>title</legend> element is usually used inside a <fieldset> element. It provides a title for the group of form elements inside the fieldset.

till now all the form elements covered - link

Input Type-

Text -<input type="text"> is used for submitting a single line of text.
Password - <input type="password"> is used for submitting a password. It hides the text entered by the user.
Submit -<input type="submit"> creates a button for submitting the form data.

there are two common ways to create submission buttons <input type="submit"> and <button type="submit"></button>.difference is ,we cannot add any content in the input element because it does not have a closing tag.But, in the button element with type="submit", we are free to add text, images or even other HTML elements.

<input type="reset"> resets all the form data to their default values.
<input type="radio"> is used to create a list from which the user can select one option.<form>

<label>Can you vote?</label>
<br>
<input type="radio" value="no" name="vote">
<label>No</label>
<br>
<input type="radio" value="yes" name="vote">
<label>Yes</label>
<br>
<input type="radio" value="maybe" name="vote">
<label>Maybe!</label>
</form>
The value attribute is important for the website to analyze the choice made by the user. Also, it is required to have the name attribute be the same for all the radio input types for them to be treated as a group.

<input type="checkbox"> allows the user to select one or more options from a list of choices.<input type="checkbox" value="apple">

<label>Apple</label>

<input type="button"> creates a clickable button. eg - <input type="button" value="Click Me!">
<input type="email"> defines a field for an e-mail address.
<input type="date"> element allows users to input a date
File select - <input type="file" accept="image/png, image/jpeg" placeholder="image.png/image.jpeg" multiple>, here accept is the types of files it accepts and multiple means it can select multiple files.
<input type="tel" placeholder="+91 012 3456 789"> - for inputting telephone number, for only number type="number"
<input type="datetime-local">
<input type="color"> creates an input field that lets us choose a colour of our choice.
The label element has a for attribute which lets us bind this attribute to the particular form element that it references.

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

The for attribute value should be the same as the value for the id of the form input element. This way, the label element is now bound to this particular form element. If you click on the label text, you'll see that the particular form element will be highlighted.

<input type="text" id="username" autofocus> , here the Full Name: input field automatically gains focus when the page loads, allowing the user to start typing without needing to click inside the field.

BASIC STRUCTURE -

<!DOCTYPE html>-It provides information about the type of HTML used in the document.
we specify language as -

<!DOCTYPE html>
<html language="en">
<body>

</body>
</html>

If the page contains content in a different language, just add the language attribute to an element surrounding that content like this:
<p>This is <span lang="fr">une baguette française</span></p>
<p>This is <span lang="de">eine deutsche Wurst</span></p>

<p>This is <span lang="hi">एक भारतीय मिठाई</span></p>

The <body> element contains the HTML elements that are used to display the contents of the web page, such as headings, images, paragraphs, links etc. There can be only one <body> tag within an HTML document.
The <span></span> tag acts like a special marker that we can place around that specific part of the sentence or word. It allows us to apply a different style to that marked portion, such as changing its color, font, or background.

HTML MEDIA-

Picture Element

The <picture> element allows you to provide multiple image sources for different screen sizes and resolutions.

Example:


<picture>
  <source srcset="large.jpg" media="(min-width: 800px)">
  <source srcset="medium.jpg" media="(min-width: 500px)">
  <img src="small.jpg" alt="Responsive Image">
</picture>
or
<picture>
  <source media="(max-width: 550px)" srcset="imglink.jpg">
  <source media="(max-width: 780px)" srcset="imglink2.jpg">
  <img src="imglink3.jpg" alt="Picture of Bird" width="100%">
</picture>

Use when you need responsive images.

2. Audio Element

The <audio> element embeds audio in a webpage.

Example:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
</audio>
or
<audio src="https://upload.wikimedia.org/wikipedia/commons/f/f8/
Hip_hop_Beatmix.ogg" controls autoplay muted loop></audio>

Supports MP3, Ogg, WAV formats.

Attributes:

controls – Adds play/pause UI
autoplay – Plays automatically
loop – Repeats the audio
muted – Starts muted

3. Video Element

The <video> element embeds video content.

Example:

<video controls width="500">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

Supports MP4, Ogg, WebM formats.

Attributes:

controls – Shows playback UI
autoplay – Auto-plays
loop – Repeats the video
muted – Starts muted

4. iFrame Element

The <iframe> element embeds another webpage inside a webpage.

Example:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Used for embedding YouTube videos, maps, etc.

Security Concerns:

Can be used for phishing or clickjacking.
Use the sandbox attribute for security.

5. Figure and Figcaption

The <figure> element groups media with a caption using <figcaption>.

Example:

<figure>
  <img src="image.jpg" alt="A beautiful view">
  <figcaption>A beautiful view</figcaption>
</figure>

Used for images, diagrams, and illustrations.

MISCELLANEOUS-

Fieldset - Form Attribute- fieldset can be made outside the form , but to link it "form" attribute of fieldset should be equal to "id" of form . e.g- <form id="quiz"><fieldset form="quiz">

Search This Blog

The JK Journal