Web Development

(Input Types, Image tag and List)

Input Tag:
- Input tag makes an input field where user can enter data.
- Input is a singular tag; it is not closed because the user is entering the
data not the coder. It does not have any content between it. That’s why
it is a singular tag.
Syntax: <input>
Label Tag:
- Label tag is used to tell what input name/label is?
- It is used specifically for input tag
- It is a paired tag, as there is needed text inside it.
- It works in the same way as <p> and <span>.
Syntax: <label>Name</label>
Attribute:
- Attribute is used to add extra properties/feature in a tag.
- Every tag has its own attribute but there is also some attribute which
can be used on every tag.
- Attributes are always specified in the start tag.
For Example, width, height, name, style are some attributes.
Types of INPUT in Input tag:
1. Button: The <input type="button"> defines a clickable button (mostly used
with a JavaScript to activate a script).
2. Checkbox: to make a checkbox as input
3. Color: to make a color chooser input
4. Date: to make a time chooser input
5. datetime-local: to make a date and time chooser input.
6. Email: to make an email field where user can input an email. It work
properly with backend
7. File: to input file from user.
 8. Image: to define an image as submit button. The path to the image is
specified in the src attribute.
9. Month: to input month from user.
10. Number: to input number from user. It can be incremented or
decremented.
11. Password: to input password from user.
12. Radio: to make a radio button for selection from user. Example, in
choosing gender.
13. Range: defines a control for entering a number whose exact value
is not important (like a slider control).
14. Reset: defines a reset button which resets all form values to its
initial values.
15. Search: Define a search field
16. Submit: defines a submit button which submits all form values to
a form-handler
17. Tel: defines a field for entering a telephone number
18. Text: used to input text from user. Text is alphanumeric data.
19. Time: used to input time from user.
20. Week: to input week from user.

Image Tag:
- The <img> tag is used to embed/link an image in an HTML page.
- It is a single tag.
- The image tag has commonly two attributes:
 src: Specifies the url/path to the image
 alt: Specifies an alternate text for the image, if the image for some
reason cannot be displayed.

Synax: <img src= “[path_of_image]” alt= “[alternate text]”

For example:
<img src= “a.jpg” alt= “A picture of an Elephant”>
Types of Url:
1. Relative Url: points to another web site (like
href="https://www.example.com/a.php)
2. Absolute Url: points to a file within a web site (like href="Images/a.jpg)
 In terms of image:

Relative: <img src= “Images/a.jpg”>

Absolute: <img src="https://images.unsplash.com/photo-

1508921912186-
1d1a45ebb3c1?q=80&w=1000&auto=format&fit=crop&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGhvdG98ZW58MHx
8MHx8fDA%3D">
List tag:
- List allow to group a set of related items in lists.
- To display list items, we use <li></li> tag. Without it list items will not
be displayed.
- There are three types of list in html:
1. Ordered List:
- It starts with <ol> tag. It will mark list items with numbers by default. It
is a paired tag.
Syntax: <ol></ol>
Example:
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
2. Unordered List:
- It starts with <ul> tag. It will mark list items with bullets (small black
circles by default).
Syntax: <ul></ul>

Example:
<ul>
<li>HTML</li>
 <li>CSS</li>
</ul>
3. Descriptive List:
- A description list is a list of terms, with a description of each term.
- It has following tags:
1. <dl>: define the description list
2. <dt>: define the term (name) of list
3. <dd>: describe each term
For Example:
<dl>
<dt>Computer:</dt>
<dd>An electronic device</dd>
<dt>Mouse:</dt>
<dd>A pointing device </dd>
</dl>

Nested List:
- It means to add list inside list.
- You can add multiple list under list tags.
For Example:
In terms of Ordered List:
<ol>
<li>HTML
<ol>
<li>Hyper Text Markup Language</li>
<ol>
</li>
<li>CSS
 <ol>
<li>Cascading Style Sheet</li>
<ol>
</li>
</ol>

In terms of Unordered List:

<ul>
<li>HTML
<ul>
<li>Hyper Text Markup Language</li>
<ul>
</li>
<li>CSS
<ul>
<li>Cascading Style Sheet</li>
<ul>
</li>
</ul>

In terms of Decriptive List:

<dl>
<dt>HTML</dt>
<dd> Hyper Text Markup Language
<dl>
<dd>It is a markup language </dd>
</dl>
 </dd>
</dl>

Note:
1. You can also add ordered list in unordered or vice versa by using
method of nested list:

<ul>
<li>HTML</li>
<li>CSS
<ol>
<li>Cascading Style Sheet</li>
<li>It is used to style html elements</li>
</ol>
</li>
</ul>
2. You can also add ordered and unordered list under descriptive list.

______ 1ST SEMESTER: ___________Prepared by Zikrya Bukhari (2124) ______