CS306 Introduction to Web Programming
Lecture 3
HTML Tags
Lecture :Dr. Ayman Mohamed
1
HTML Create a List:
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li> Output:
</ul> Beetroot
Ginger
</body> Potato
</html> Radish
HTML Ordered Lists:
If you are required to put your items in a
numbered list , This list is created by using <ol>
tag.
The numbering starts at one and is incremented
by one for each successive ordered list element
tagged with <li>
HTML Ordered Lists Types:
You can use type attribute for <ol> tag to specify
the type of numbering you like. By default it is a
number.
<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
HTML Ordered Lists:
Example: with using <ol type=“1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="1">
<li>Beetroot</li>
1. Beetroot
<li>Ginger</li>
2. Ginger
<li>Potato</li>
3. Potato
<li>Radish</li>
4. Radish
</ol> </body></html>
HTML Ordered Lists:
Example: with using <ol type=“I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type=“I">
<li>Beetroot</li>
I. Beetroot
<li>Ginger</li>
II. Ginger
<li>Potato</li>
III. Potato
<li>Radish</li>
IV. Radish
</ol> </body></html>
HTML Ordered Lists:
Example: with using <ol type=“i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type=“i">
<li>Beetroot</li> i. Beetroot
<li>Ginger</li> ii. Ginger
<li>Potato</li> iii. Potato
<li>Radish</li> iv. Radish
</ol> </body></html>
HTML Ordered Lists:
Example: with using <ol type=“A">
<!DOCTYPE html>
<html>
<head>
<title> HTML Ordered List </title>
</head>
<body>
<ol type=“A">
<li>Beetroot</li>
A. Beetroot
<li>Ginger</li>
B. Ginger
<li>Potato</li>
C. Potato
<li>Radish</li>
D. Radish
</ol> </body></html>
HTML Ordered Lists:
Example: with using <ol type=“a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type=“a">
<li>Beetroot</li> a. Beetroot
<li>Ginger</li> b. Ginger
<li>Potato</li> c. Potato
<li>Radish</li> d. Radish
</ol> </body></html>
HTML Text Color:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph</p>
</body>
</html>
HTML Text Fonts:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana">This is a
heading</h1>
<p style="font-family:courier">This is a
paragraph.</p>
</body>
</html>
HTML Text size:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%">This is a heading </h1>
<p style="font-size:160%">This is a paragraph </p>
</body>
</html>
HTML Text Alignment:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<div> Element:
<div> is used for defining a section of your
document.
With the div tag, you can group large sections of
HTML elements together and format them with
CSS.
<div> Element:
Example:
<html>
<head> <title>HTML div Tag</title>
</head>
<body>
<div id="contentinfo">
<p>Welcome to our page. We provide HTML
notes </p>
</div>
</body>
</html>
Marquee HTML:
The Marquee HTML tag is used to scroll a
image or text horizontally or vertically.
you can say that it scrolls the image or text up,
down, left or right automatically.
Example:
<marquee>This is an example of html marquee </marquee>
HTML Marquee Attributes: :
Example: scroll marquee:
To scroll the text from right to left, and restarts at
the right side of the marquee when it is reached
to the end of left side.
<marquee width="100%" behavior="scroll" bgcolor="pink">
This is an example of a scroll marquee.
</marquee>
HTML Marquee Attributes: :
Example: right direction marquee:
To change the direction of scrolling text.
The direction can be left, right, up and down.
<marquee width="100%" direction="right"> This is
an example of a right direction marquee...
</marquee>
HTML Marquee Attributes: :
Markup Tags for inserting Images, URL,
Tables and Frames:
a. Images:
<img src="[Link]"
alt="[Link]" width="104"
height="142">
Notes:
The source file (src), alternative text (alt), and size (width
and height) are attributes.
The alt attribute specifies an alternative text to be used,
when an HTML element cannot be displayed.
Markup Tags for inserting Images, URL,
Tables and Frames:
b. URL:
The HTML anchor tag defines a hyperlink that links
one page to another page .
The "href" attribute is the most important attribute of the
HTML a tag.
Example of HTML anchor tag.
<a href="[Link]">Click for Second Page</a>
<a href ="[Link] Google </a>
Markup Tags for inserting Images, URL,
Tables and Frames:
c. Table:
The "href" attribute is the most important attribute of the
HTML a tag.
HTML tables are used to manage the layout of the page e.g.
header section, navigation bar, body content, footer section
etc.
Markup Tags for inserting Images, URL,
Tables and Frames:
c. Table:
c. Table: Example:
<html>
<body>
<table border="1">
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td>
<td>Table cell 4</td>
</tr> </table> </body> </html>
c. Table Header, Body, and Footer: Example:
The three elements for separating the head, body, and
foot of a table are:
<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.
HTML Audio Tag:
HTML audio tag is used to define sounds such as
music and other audio clips.
1. mp3
2. wav
3. ogg
HTML Audio Tag:
Example:
Let's see the code to play mp3 file using HTML
audio tag.
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Your browser does not support the html audio
tag.
</audio>
HTML Audio Tag:
MIME Types for HTML Audio format: The
available MIME type HTML audio tag is given
below:
HTML Video Tag:
HTML supports <video> tag also. The
HTML video tag is used for streaming
video files such as a movie clip, song clip
on the web page.
HTML Video Tag: Example:
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video
tag.
</video>
HTML Video Tag:
Let's see the example of video tag in HTML where are
using height, width, autoplay, controls and loop
attributes.
Example:
<video width="320" height="240" controls
autoplay loop>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video
tag.
</video>
HTML Forms & Buttons
HTML Forms
HTML Forms are required, when you want
to collect some data from the site visitor.
For example, during user registration you
would like to collect information such as
name, email address, credit card, etc.
HTML Forms
Form Example:
The HTML <form> tag is used to create an HTML form
and it has following syntax:
<form action = "Script URL" method = "GET|POST">
form elements like input, text area etc.
</form>
HTML Buttons
HTML buttons are defined with the <button> tag.
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text
or images.
HTML Buttons
Example:
two button elements that act as one submit button and
one reset button (in a form)
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit"value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
HTML Buttons