Make Notes from Youtube Videos

1) <pre></ pre> tag is an alternative to the p tag and is pre formatted i.e. text appears as is written
inside the tag.

2) a tag has another attribute target. Setting target = "_blank", the hyperlink will open in a new tab.

3) The title attribute adds extra info as a tooltip.

4) href="mailto:quiltwcc@gmail.com" in the a tag initiates the process of emailing someone.

5) img tag is a self closing tag

6) audio tag: <audio controls autoplay muted loop>

<source src=".mp3" type="audio/ mpeg">

<source src=".wav" type="audio/ wav">

</audio>

The second source is a fallback to support the audio if the browser does not support an mp3 file.
Also type attribute tells the browser about the type of the audio file that is there.

7) including video: Any one of the following formats: .mp4 .webm .ogg

<video height="" width="" controls autoplay muted loop>

<source src="" type="video/ mp4">

<source src="" type="video/ webm">

</video>

video can also be converted to an hyperlink

8) Favicons: these are the small images that appear with the title in the upper tab controls.

Recommended size for a favicon: 96px by96px.

most favicons accept .ico, .png, .gif, .jpg, .svg files.

for this inside the head tag, add this:

<link rel="icon" type="iage/ jpg" href="filepath">

9) Lists: <ul><li> </li>

<li></ li>

<li></ li>

<li></ li>
<li></ li>

<ul></ ul> This is a nested list

</ul>

<ol> This is an ordered list

Description list:

<dl>

<dt>dragon</ dt>

<dd>A mythical creature or monster</ dd>

<dt>phoenix</ dt>

<dt>vampire</ dt>

<dt>werewolf</ dt>

</dl>

10) table tags:

<table>

<tr>

<th></ th> -----> Table header

<th></ th>

<th></ th>

<th></ th>

</tr> ----> table row

Then in another <tr> tag add <td> tags which stand for table data.

</table> More has been done in the vs code.

11) buttons: button tag. More in the vs code editor in the javascript folder.

12) Forms: form tag. Attributes: i) action --> A backend submission page where the form submission
is saved. ii) method: GET or POST request post is for sensitive or confidential data such as passwords
etc and get is for insensitive information.

12) label tag: it is used to specify what for is the input being entered in the input box. has for attribute
which specifies the purpose of the input box and the label. on clicking on the label the coursor would
automatically move to the textbox if the id of the input is same as the for attribute
13) input tag: inside the form tag the input tag actually takes input from the user. Attributes are:

i) type: text email phone numbers etc. Specifies the type of input that is to be taken as input from the
user. required in the tag means the user cannot leave the field empty. Attributes minlength and
maxlength do the stuff they specify.

type attribute can also have values submit for a submit button and reset for a reset button for
resetting all input boxes in the form.

type value password hides the text by replacing the characters with dots by default.

type value email requires the user to enter an @ sign.

ii)placeholder: it gives an information about what is to be entered in the text box.

for a type tel a phone number is entered by the user and using the pattern attribute, the pattern in
which the phone number should be entered can also be changed.

pattern="[0-9] {3}- [0-9] {3} -[0-9] {4} "

for a type date, the input tag accepts a date as input.

for a type number, the user can enter a number by using the step up and step down buttons. min
and max attributes are used to set the minimum and maximum value to which the numbers can be
entered. value attribute puts a default value in the input tag.

for type radio, we create radio buttons where the user can check these for sending input. These have
attributes such as name and value. The value attributes contains the value that will be sent through
the form post submission if the radio button is checked. And in order to ensure that only radio
button is checked, we use the name attribute and all the radio buttons sharing the same name can
have only one member checked. Input tags are self closing tags.

select tags are used for input from a drop down menu. The select tag contains the option tags that
have the value attribute and represent the options in the drop down menu.

checkboxes are created by using the type checkbox and they represent yes no boolean values.

textarea tags are used to take long form texts as inputs such as comments. Their size can be
adjusted and default size can be given by rows and cols attributes.
adjusted and default size can be given by rows and cols attributes.

for taking files as input, we use the input tag of type file and we can select the file type by using the
accept attribute contining the file types more than one comma separated file types can be taken as
input.

enctype ="multipart/ form- data" in the form tag: In layman language, this attribute breaks large data
into smaller parts and sends it and when recieved, these smaller parts are recombined. However, it is
much more complicated than that.

Header and Footer in HTML

Header and Footer are both semantic tags. Enhance the page readability by crawlers and also signify
the structure to the web browser and the algorithms that rank the web pages.

Headers are used for the introductory content and footers are used for the concluding content of the
webpage.

pair of header tags for the header and after the header tag, use the main tag, after which use the
footer tag.