Scribd
Upload
7 views

Lecture Notes-HTML Part 3

HTML

Uploaded by

seif
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Lecture Notes-HTML Part 3

HTML

Uploaded by

seif
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Web Development for Business Applications

Lecture Notes: Fundamentals of HTML (3)

Learning Objectives:
• Understand Tags, Elements and Attributes
• Understand the basic Structure of HTML
• Text Elements
• Lists
• Article Tag
• Tables
• Embedded Content: image, Audio, video, links etc.
• Forms
• Meta Tag
• Layout
• Additional Tags

1. Forms: form elements are the basic building block of HTML page , this is the most common
elements that you will be using for any website development project that can be used to create contact
form, Newsletter form, Register or login form, personal information form
Forms are used to collect information from the user and post data to the script running on the server
(script on server can save data in database or file)
You can restrict data submit to the server and use different form elements to capture different type of
data from user
Basic Form Element:
<form> : form tag are used to define all form elements and into which users enter the data and submit
the data to the user
All form elements should be defined inside the <form> tag
Example: <body>
Label is used to enter some text before input field <form>
Input tag is used to define type of field using type <label for=” input-name”>First Name</label>
attribute <input id=” input-name” type=”text”
placeholder=” Enter your first name”>
placeholder: small text in the box to indicate what to
</form>
type.
</body>

1|Page
Input box form element:
<input> tag elements are used to display text boxes, submit buttons, email boxes and many other types
of form elements

<fieldset>: used to group elements together (border)


<legend>: display short headings of group of elements for readability purpose (heading of group
elements)
Example:

<body><h1>The fieldset element</h1>


<form action="#">
<fieldset> <legend>Personalia:</legend>
Legend
<label for="fname">First name:</label> Fieldset

<input type="text" id="fname"


name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email"
name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday"
name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>

2|Page
HTML offer different kinds of type values that can be used inside input tag each kind represent
different usage and output inside the form
<input id="name" type="text" placeholder="Enter your name">

<input id="email" type="email" placeholder="domain@example.com">

<input id="pass" type="password" placeholder="XXXXX"


minlength="2" maxlength="10">
<input id="age" type="Number" placeholder="Your age" min="10"
max="60">

<input id="search" type="Search" placeholder="Search for">

<input id="Phone" type="tel" placeholder="(07)-xxxxx">

<input id="file" type="file">

<input id="time" type="time"> return time

<input id="birthday" type="date"> return day, month, year

<input type="month"> return month and year only

<input type="datetime-local"> return full date and time

<input id="color" type="color">

<input id="checkbox" type="checkbox" checked>

<input id="radio" type="radio" checked >

<input id="rank" type="range" min=”0” max=”10” value=”5”> range


ranking values

<input id="btn" type="button" value="Login"> or you can use button tag


<button class="btn1">Login</button> will help in JavaScript

<input id="submit" type="submit"> Send data to the backend

3|Page
<input id="clear" type="reset"> Clear data in the form

Example for Personal Information Form

<body>
<h1> Personal Information Form</h1>
<form>
<label for="fname"> First Name:</label>
<input id="fname" type="Text" placeholder="First Name Here"><br><br>
<label for="lname">Last Name:</label>
<input id="lname" type="text" placeholder="Last Name Here"><br><br>
<label for="phone"> Phone Number:</label>
<input id="phone" type="tel" placeholder="Your Phone Number"><br><br>
<label for="comment"> Comments</label>
<input id="comment" type="text" placeholder="Let us Know how you feel?"><br><br>
<input type="submit" id="btn">
<input type="reset" id="btn2">
</form> </body>

4|Page
Select Form Element:
<select> are used to show list of values that user can select from it like asking user to select one from
the option given
<select> <option> <optgroup>
Example1:

<h1> Option Group</h1>


<form>
<label for="apply"> Applying For:</label>
<select id="apply">
<optgroup label="1-10">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</optgroup>
<optgroup label="A-D">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</optgroup></select>
</form>
</body>

5|Page
Example2:

<h1> Option Group</h1>


<form>
<select id="month">
<option>Jan</option>
<option selected>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option></select>
</form>
</body>

Radio Buttons From elements


Radio buttons are used to give option for user to pick one option from various option provided
Example <body>
<h1> Radio Button</h1>
<form>
<h2> Gender:</h2>
<label for="gender">Female</label>
<input id="gender" type="radio" name=” gender” ><label
for="gender"> Male</label>
<input id="gender" type="radio" name=” gender”>
</form></body>
6|Page
Checkbox Form Element
Checkbox are used to pick many options from the list of items displayed, the user can select one or
more from the option
Example

<body>
<h1>Show Checkboxes</h1>
<form action="#">
<input type="checkbox" id="vehicle1"
name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2"
name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3"
name="vehicle3" value="Boat">
<label for="vehicle3"> I have a
boat</label><br><br>
<input type="submit" value="Submit">
</form></body>

TextArea From element:


Text area is similar to textbox but you can enter multiple line in the text area and also control width
and height of the box by specifying rows and columns attributes of it

<body>
<h1> Text Area</h1>
<form>
<label for="gender">Comment</label>
<textarea cols="50" rows="5"></textarea>
</form>
</body>

7|Page
Action Get and Post from form
Method attribute of <form> tag explain how data should go when the form is submitted and they are
two types:
❖ Get
❖ Post
GET: parameters are appeared in the URL, used for fetching documents, retrieving data
POST: parameters are appeared in the body, used for updating data
Action: attribute that show the source that form will send after submission in the backend side

Meta Tag
Metadata Means data about data
<meta> tag describes about your page to the machines that are accessing your page
<meta> tag will help improve search engine optimization as it describes your page in such way that
search engine understand and learn about your page like keywords that help search engine to show
your page when these keywords are searched
Description: small description about your page
Robot help to communicate with search engine bots
All these tags are added inside head tag and not displayed on the browser you will not see anything on
the page.

<head>

<meta charset="UTF-8">

<meta name="description" content="Free Web tutorials">

<meta name="keywords" content="HTML, CSS, XML,


JavaScript">

<meta name="author" content="John Doe">

<meta name="viewport" content="width=device-width,


initial-scale=1.0">

</head>

8|Page
Meta tag with viewport: scale zoom page on the browser (width, height, scaling)
Like

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta tag with auto redirect: tell you can tell the browser to redirect the page to another after n seconds
<meta http-equiv="refresh" content="30; url=https://www.w3schools.com/tags/tag_meta.asp">

Layout of HTML Page

• <header> - Defines a header for a


document or a section
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a
document
• <article> - Defines an independent, self-
contained content
• <aside> - Defines content aside from the
content (like a sidebar)
• <footer> - Defines a footer for a document
or a section
• <details> - Defines additional details that
the user can open and close on demand
• <summary> - Defines a heading for
the <details> element

Additional Tags: Most commonly used in HTML


<div> used as a container to group elements together and apply simple formatting on it
<span> are inline doesn’t

<body>

<h1>The span element</h1>

<p>My mother has <span style="color: blue; font-weight:


bold">blue</span> eyes and my father has <span
style="color: darkolivegreen; font-weight: bold">dark
green</span> eyes. </p>

</body>

9|Page
<style>

.myDiv {

border: 5px outset red;

background-color: lightblue;

text-align: center;

</style>

</head>

<body>

<h1>The div element</h1>

<div class="myDiv">

<h2>This is a heading in a div element</h2>

<p>This is some text in a div element. </p>

</div>

<p>This is some text outside the div element. </p>

White Space, special characters and Case Sensitive


Special Symbols that can be added inside any html tag in body and many symbols and emojies have code
To be added in HTML
&nbsp; Single space
&ensp; Two spaces
&emsp; Triple spaces
&copy; ©
&dollar; $
&Sum; ⅀
&Commat; @
&#128512;
&#128640;
&#128187;

10 | P a g e

You might also like