Scribd
Upload
4 views

Web Programming HTML 1,2

Uploaded by

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

Web Programming HTML 1,2

Uploaded by

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

Web

Programming
HTML
(Hyper Text Markup Language)
HTML Lists
Unordered lists
• create the familiar set of bullet points seen in Word documents.
• This list is created by using HTML <ul> tag.
• Each item in the list is marked with a bullet.

<!DOCTYPE html><html> • Beetroot


<head> <title>HTML Unordered List</title> • Ginger
</head> • Potato
<body> • Radish
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body></html
HTML Lists
The type Attribute
➢You can use type attribute for <ul> tag to specify the type of
bullet you like.
❑Square <ul type = "square">

• Disc <ul type =“disc”>

o Circle <ul type = “circle”>


HTML Lists
<ul type = "square">
▪ Beetroot
<!DOCTYPE html><html><head> <title>HTML ▪ Ginger
Unordered List</title> </head> <body> ▪ Potato
<ul type = "square"> ▪ Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body></html>
HTML Lists
<ul type = "disc">

<!DOCTYPE html><html> <head> <title>HTML • Beetroot


Unordered List</title> </head> <body> • Ginger
<ul type = "disc"> • Potato
<li>Beetroot</li> • Radish
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body></html>
HTML Lists
<ul type = "circle“>

<!DOCTYPE html><html> <head> <title>HTML o Beetroot


Unordered List</title> </head><body> o Ginger
<ul type = "circle"> o Potato
<li>Beetroot</li> o Radish
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body></html>
Ordered Lists

• Ordered lists are identical to unordered lists, except they


use the <ol> tag rather than the <ul> tag.

<!DOCTYPE html><html><head> <title>HTML Ordered 1.Beetroot


List</title></head> 2.Ginger
<body> 3.Potato
<ol> 4.Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body> </html>
Ordered Lists
• <ol type = "1">
• <ol type = "I“>
• <ol type = "i“>
• <ol type = "A“>
• <ol type = "a“>

<!DOCTYPE html><html><head> 1.Beetroot


<title>HTML Ordered List</title> </head> 2.Ginger
<body> 3.Potato
<ol type = "1"> 4.Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body></html>
Ordered Lists

<!DOCTYPE html><html> <head> I. Beetroot


<title>HTML Ordered List</title> II. Ginger
</head> II. Potato
<body> Iv. Radish
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body></html>
Ordered Lists

<!DOCTYPE html><html><head> <title> Ordered i. Beetroot


List</title> </head> ii. Ginger
<body> iii. Potato
<ol type = "i"> iv. Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body></html>
Ordered Lists

<!DOCTYPE html><html> <head> <title>HTML A. Beetroot


Ordered List</title> </head> <body> B. Ginger
<ol type = "A"> C. Potato
<li>Beetroot</li> D. Radish
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body> </html>
Ordered Lists

<!DOCTYPE html><html> <head><title>HTML a. Beetroot


Ordered List</title></head> b. Ginger
<body> c. Potato
<ol type = "a"> d. Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Ordered Lists
• The start Attribute:
You can use start attribute for <ol> tag to specify the starting
point of numbering you need. Following are the possible
options:
• <ol type = "1" start = "4"> - Numerals starts with 4.
• <ol type = "I" start = "4"> - Numerals starts with IV.
• <ol type = "i" start = "4"> - Numerals starts with iv.
• <ol type = "a" start = "4"> - Letters starts with d.
• <ol type = "A" start = "4"> - Letters starts with D.
Definition Lists

• Entries are listed like in a dictionary .


• The definition list is the ideal way to present a glossary, list of
terms, or other name/value list.

• <dl> − Defines the start of the list


• <dt> − A term
• <dd> − Term definition
• </dl> − Defines the end of the list
Definition Lists
<!DOCTYPE html><html><head> HTML
<title>HTML Definition List</title> </head>
<body> This stands for Hyper Text Markup Language
<dl>
<dt><b>HTML</b></dt> HTTP
This stands for Hyper Text Transfer Protocol
<dd>This stands for Hyper Text Markup Language</dd>

<dt><b>HTTP</b></dt>

<dd>This stands for Hyper Text Transfer Protocol</dd>


</dl>
</body>
</html>
Table Element
• You add one row at a time using the tr (table row) element and provide values
for all the relevant columns.
• The rows can either be added to the header, body or footer of the table.

• <tr> - represents rows


• <td> - used to create data cells
• <th> - used to add table headings
• <caption> - used to insert captions
• <thead> - adds a separate header to the table
• <tbody> - shows the main body of the table
• <tfoot> - creates a separate footer for the table
Table Element
• Cellpadding and Cellspacing Attributes
The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the content
within a cell.

• Colspan and Rowspan Attributes


Colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or
more rows.
Table Element
<!DOCTYPE html>
<html>
<head><title>HTML Table Cellpadding</title> </head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr> <th>Name</th>
<th>Salary</th>
</tr>
<tr> <td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr> <td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body></html>
Table Element
<!DOCTYPE html><html>
<head> <title>HTML Table Colspan/Rowspan</title> </head>
<body>
<table border = "1">
<tr> <th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr> <td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr> <td colspan = "3">Row 3 Cell 1</td>
</tr>
</table></body></html>
Table Element
• Table background can be set using one of the following two ways :
• bgcolor attribute − sets background color for whole table or just for
one cell.
• background attribute − sets background image for whole table or just
for one cell.

• EX:
• <table border = "1" bordercolor = "green" bgcolor = "yellow">

• EX:
• <table border = "1" bordercolor = "green" background =
"/images/test.png">
Table Element
<!DOCTYPE html><html> <head> <title>HTML Table Colspan/Rowspan</title>
</head<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr> <th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr> <td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr> <td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr> <td colspan = "3">Row 3 Cell 1</td> </tr>
</table>
</body></html
Table Element

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3


Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1
Table Element
• A table width and height can be set using width and height
attributes
• <table border = "1" width = "400" height = "150">

• 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.
Marquee in HTML

• Marquee element is used to insert a scrolling area of text

Marquee attributes
• behavior :Sets how the text is scrolled within the marquee. Possible
values are scroll, slide and alternate. If no value is specified, the default
value is scroll.
• bgcolor :Sets the background color through color name or hexadecimal
value.
• direction :Sets the direction of the scrolling within the marquee.
Possible values are left, right, up and down. If no value is specified, the
default value is left.
• height :Sets the height in pixels or percentage value.
• hspace : Sets the horizontal margin.
Marquee in HTML
• loop :Sets the number of times the marquee will scroll. If no value is
specified, the default value is −1, which means the marquee will
scroll continuously.
• scrollamount :Sets the amount of scrolling at each interval in pixels.
The default value is 6.
• scrolldelay :Sets the interval between each scroll movement in
milliseconds. The default value is 85. Note that any value smaller than
60 is ignored and the value 60 is used instead unless truespeed is
specified.
• vspace :Sets the vertical margin in pixels or percentage value.
• width :Sets the width in pixels or percentage value.
Marquee in HTML
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="250" height="200" behavior="alternate"


style="border:solid">

<marquee behavior="alternate"> This text will bounce </marquee>


</marquee>
Frameset

• The <frameset> tag defines, how to divide the window into frames.
• The rows attribute of <frameset> tag defines horizontal frames and cols
attribute defines vertical frames.

• Each frame is indicated by <frame> tag and it defines which HTML


document shall open into the frame.

• The <noframes> tag is the backup for those browsers that does not
support frames.
Frameset
<!DOCTYPE html><html><head><title>HTML Frames</title></head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src ="/html/main_frame.htm"/>
<frame name = "bottom" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body> </noframes>
</frameset></html>
Frameset
<!DOCTYPE html><html> <head> <title>HTML Frames</title>
</head> <frameset cols = "25%,50%,25%">

<frame name = "left" src = "/html/top_frame.htm" />


<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset></html>
Iframe
• You can define an inline frame with HTML tag <iframe>.
• The <iframe> tag is not somehow related to <frameset> tag, instead,
it can appear anywhere in your document.
• The <iframe> tag defines a rectangular region within the document in
which the browser can display a separate document, including
scrollbars and borders. An inline frame is used to embed another
document within the current HTML document.
Iframe
<!DOCTYPE html><html> <head> <title>HTML
Iframes</title> </head> <body>
<p>Document content goes here...</p>

<iframe src = "/html/menu.htm" width = "555" height = "200">


Sorry your browser does not support inline frames.

</iframe>

<p>Document content also go here...</p>


</body>
</html>
Iframe as target
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML iframe Tag</h2>
<p>Click the link text</p>

<iframe height="300"
width="350"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210910170539/gfg-221x300.png"
name="iframe_a">
</iframe>

<p><a href=
"https://ide.geeksforgeeks.org/tryit.php"
target="iframe_a">
GeeksforGeeks IDE
</a> </p>
</body></html>

You might also like