Unit4_CompletePPT_2024[1]

Unit-4
Web Programming
Dr. Pramod T.C

Assistant Professor
Dept. of CSE
SIT, Tumkur
pramodtc@sit.ac.in
Table Elements
Table Elements
If you want the caption’s text displayed at the

bottom, you can use the following CSS type
selector rule: caption {caption-side: bottom;}
Formatting a Data Table: Borders, Alignment,
and Padding
Table: Borders
table, th, td {border: thin solid;}

table { border: 1px solid; } https://www.w3schools.com/css/css_table.asp
table { border-collapse: collapse;}
table {width: 100%; }
table {border-width: medium;}
th {border-bottom-width: thick;}
Example
<body>
<h2>Add a border to a table:</h2>
<!DOCTYPE html>
<table>
<html>
<tr>
<head>
<th>Firstname</th>
<style>
<th>Lastname</th>
table, th, td {
</tr>
border: 3px solid orange;
<tr>
border-collapse: collapse;
<td>Peter</td>
}
<td>Griffin</td>
</tr>
table {
<tr>
width: 100%;
<td>Lois</td>
}
<td>Griffin</td>
</style>
</tr>
</head>
</table>
</body>
</html>
th, td {
text-align: left;
padding: 10px;
}
table {
border-width: medium;}
th {
border-bottom-width: thick;}
Cell Spanning
• The rowspan and colspan are the attributes of <td> tag.
• These are used to specify the number of rows or columns a cell should merge.
• The rowspan attribute is for merging rows and the colspan attribute is for
merging columns of the table in HTML.
<table>
<caption>Life Expectancy By Current Age</caption>
<tr>
<th colspan="2">65</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
<table>
<caption>Favorite and Least FavoriteThings</caption>
<tr> <tr>
<th></th> <th>Flavor</th>
<th></th> <td>Mint</td>
<th>Bob</th> <td>Walnut</td>
<th>Alice</th> </tr>
</tr> </table>
<tr> <th rowspan="2">Favorite</th>
<th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr>
<tr>
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate</td>
</tr>
<tr>
<th rowspan="2">Least Favorite</th>
<th>Color</th>
<td>Yellow</td>
<td>Pink</td>
</tr>
UNIT-2
Why few HTML4 Elements Removed from HTML5? Give the Removed HTML
Elements list and also CSS alternatives
Many of the elements are removed because they are more presentational than semantic.
Their function is better handled by CSS
To improve the overall performance
NOTE Although these elements are removed from the specification and should be avoided in favor of
CSS, they likely will continue to be supported by browsers for some time to come.
UNIT-2
Give any six Removed HTML attribute list and also CSS alternatives
HTML5 also removes numerous presentation focused attributes.
CSS Structural Pseudo-Class Selectors
• A CSS pseudo-element is used to style specified parts of an element.
• Pseudo-classes conditionally select elements from a group of elements specified by a
standard selector
• A pseudo-class consists of a colon (:) followed by the pseudo-class name
• A pseudo-class is called a “pseudo-class” because using a pseudo-class is similar to using
a class attribute, but the two entities are not identical. A pseudo-class is like a class
selector in that it matches particular instances of elements (that’s what happens with
elements that use class attributes). But they are different from class selectors in that they
don’t rely on the class attribute.
• They are used to target html elements and apply styles based on relationship present
between the html elements in the DOM tree structure (i.e root, first child , second child
etc.)
<!DOCTYPE html>
<html lang="en"> Pseudo-Class Selectors: nth-child(4)
<head>
<meta charset="utf-8">
<meta name="author" content="John Dean">
<title>Local Power Generation and Consumption</title>
<style>
li:nth-child(4){
background-color: brown;
}
</style>
</head>
<body>
<ul>
<li>This is item1</li>
</ul>
</body>
Pseudo-Class Selectors: nth-child(even), (odd), (3n)
<style> <style>
<style>
li:nth-child(odd){ li:nth-child(3n){
li:nth-child(even){
background-color: brown; background-color: brown;
} }
}
</style> </style>
</style>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
li:nth-child(3n+1){ offset
}
</style>
</head>
<body>
<ul>
</ul>
</body>
CSS Structural Pseudo-Class Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h3 {text-align: center;}
table {border-collapse: collapse; margin: 0 auto;}
th, td {border: thin solid; padding: 2px 5px;}
td:nth-of-type(3), td:nth-of-type(4) {text-align: right;}
tr:first-of-type {background-color: palegreen;}
tr:nth-of-type(2n+3) {background-color: palegoldenrod;}
</style>
</head>
<body>
<table>
<caption>
<h3>Noon Power Generation (positive) and Consumption (negative)</h3>
</caption>
<tr>
<th>Component Description</th> <th>Overall Size</th>
<th>Noon Power</th> <th>Installed Cost</th>
</tr>
<tr>
<td>PV Solar Collectors</td> <td>137 m<sup>2</sup> panel area</td>
<td>+18 kW</td> <td>$45,000</td>
</tr>
<tr>
<td>Immediate Consumption</td> <td>274 m<sup>2</sup> floor area</td>
<td>-5 kW</td><td> </td>
</tr>
<tr>
<td>Chilled Water Storage</td> <td>2.3 m diameter x 2.1 m high</td>
<td>-2 kW</td> <td>$1000</td>
</tr>
<tr>
<td>Battery Storage</td> <td>1.3 m x 1.0 m x 1.1 m high, 1250kg</td>
<td>+18 kW</td> <td>$6000</td>
</tr>
</table>
</body>
<!DOCTYPE html>
<html lang="en">
Pseudo-Class Selector: first-of-type
<head> It selects any html element targeted by the selector, if it is the
<style> first child of its type in its parent html element
p:first-of-type{
border: 3px dotted orangered;
}
</style>
</head>
<body>
<div id="div1" style="border:2px solid red;">
<h3>Heading Text</h3>
<p>Paragraph Text</p>
</div>
<div id="div2" style="border:2px solid green;">
</div>
<div id="div3" style="border:2px solid blue;">
</div>
</body>
Pseudo-Class Selector: last-of-type, nth-of-type
<style> <style> <style>
p:last-of-type{ p: nth-of-type(1){ p:nth-of-type(3n+0){
border: 3px dotted orangered; border: 3px dotted orangered; border: 3px dotted orangered;
} } }
</style>
It selects any html element targeted by the
selector, if it is the last child of its type in its
parent html element
thead and tbody Elements
<thead> : The Table Head element. The <thead> tag is used to group header
content in an HTML table.
<tbody> : The Table body element. The <tbody> tag is used to group the body
content in an HTML table.
• Note: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of
the table by default. However, you can use CSS to style these elements (see
example below)!
<!DOCTYPE html>
<html>
<head> <tfoot>
<style> <tr>
table, th, td { <td>Sum</td>
border: 1px solid black; <td>$180</td>
} </tr>
</style> </tfoot>
</head> </table>
<body>
<h1>The thead, tbody, and tfoot elements</h1> </body>
<table> </html>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody
</tbody>
<!DOCTYPE html>
<body>
<html lang="en">
<table>
<head>
<caption>Average Annual Global Temperatures</caption>
<title>Global Temperatures</title>
<thead>
<style>
<tr>
body {display: flex; justify-content: center;}
<th>Year</th>
table, th, td {border: none;}
<th>Temp<br>Rank</th>
th, td {padding: 10px;}
<th>Avg<br>Temp (°F)</th>
thead th {
</tr>
background-color: midnightblue;
</thead>
color: white;
<tbody>
vertical-align: bottom;
<tr><th>2016</th><td>1</td><td>58.98</td></tr>
}
tbody th {
background-color: mediumvioletred;
color: white;
}
</tbody>
td {
</table>
background-color: mistyrose;
</body>
text-align: center;
</html>
}
</style>
</head>
body {display: flex; justify-content: center;}
• to center all the elements in the body container horizontally
• In the CSS rule, the display: flex; property-value pair creates a flexbox layout (also called a flexible box
layout). It provides the ability to add certain formatting features to a standard block element. The formatting
feature we’re interested in now is horizontal centering, and the justify-content: center property-
value pair takes care of that.
table {margin: 0 auto;}
• two values for the margin property—0 and auto. the first value specifies the top and bottom margins and
the second value specifies the left and right margins
CSS display Property with Table Values
<!DOCTYPE html> <body> <div class="table">
<html lang="en"> <table> <div class="row">
<head> <tr> <div class="td">Fruit</div>
<title>Global Temperatures</title> <td>Fruit</td> <div class="td">Vegetable</div>
<style> <td>Vegetable</td> <div class="td">Animal</div>
.table{ <td>Animal</td> </div>
display:table; </tr>
} <tr> <div class="row">
.table .row{ <td>Mango</td> <div class="td">Mango</div>
display:table-row; <td>Carrot</td> <div class="td">Carrot</div>
} <td>Lion</td> <div class="td">Lion</div>
.table .td{ </tr> </div>
display: table-cell; <tr>
} <td>Orange</td> <div class="row">
</style> <td>Capcicum</td> <div class="td">Orange</div>
</head> <td>Tiger</td> <div class="td">Capcicum</div>
</tr> <div class="td">Tiger</div>
</table> </div>
</div>
</body>
</html>
!DOCTYPE html> <body>
<html lang="en"> <div class="table">
<head> <div class="caption">List of Fruits Vegetables Animals</div>
<title>Table display property</title>
<style> <div class="row">
.table{ <div class="td">Fruit</div>
display:table; <div class="td">Vegetable</div>
border-spacing: 30px; <div class="td">Animal</div>
} </div>
.row{
display:table-row; <div class="row">
} <div class="td">Mango</div>
.td{ <div class="td">Carrot</div>
display: table-cell; <div class="td">Lion</div>
} </div>
.caption {
display: table-caption; <div class="row">
font-size: large; bold; <div class="td">Orange</div>
text-align: center; <div class="td">Capcicum</div>
border: 1px solid black; <div class="td">Tiger</div>
} </div>
</div> </div>
</style> </body>
</head> </html>
img {display: table-cell;}
• each cell in the first row holds a picture, Testing shows that this does not work. That should make
sense when you think about what a table cell is supposed to be—a container for content. The img
element is a void element, not a container, so it’s inappropriate to try to use CSS to turn it into a table
cell.
• solution is to surround the img elements with span containers and use span as the target for a
table-cell rule
span {display: table-cell;}
.row > * {display: table-cell;}
> symbol is known as a combinator because it combines two selectors into one. The selector at the left,
.row, matches all the elements in the Ancient Wonders web page that have class="row". The universal
selector at the right, *, matches any element
The border-spacing Property
• By default, tables created with the display property are displayed with no gaps between their
cells. To avoid that ugliness, you can use the border-spacing property
.table {
display: table;
border-spacing: 20px;
}
• The border-spacing property allows you to specify horizontal and vertical cell spacing
separately. Here’s a n example:
border-spacing: 15px 25px;
Web accessibility
• Web accessibility means that disabled users can use the Web effectively. Most web accessibility efforts
go toward helping users with visual disabilities, but web accessibility also attempts to address the
needs of users with hearing, cognitive, and motor skills disabilities.
• Many countries have laws that regulate accessibility for websites. For example, https://www .access-
board.gov/guidelines-and-standards/communications-and-it describes web accessibility guidelines that
U.S. government agencies are required to follow.
• To promote the social good (through equal opportunities for disabled people) and to promote their
own businesses, many companies have policies that require web developers and software purchasers
to follow web accessibility standards.
• Typically, visually impaired users have screen readers to read web pages. A screen reader is software
that figures out what the user’s screen is displaying and sends a text description of it to a speech
synthesizer.
• To make the table more web accessible. In particular, you should consider embedding a details element
in the table’s caption element. The details element provides a description of the table’s content so that
a screen reader can read the description and get a better understanding of the nature of the table’s
organization.
Web accessibility
<!DOCTYPE html> Web accessibility <tr>
<html lang="en">
<th colspan="3" id="hw">Homework Assignments</th>
<head>
<th colspan="2" id="exams">Exams</th>
<th rowspan="2" id="awake">Ability to<br>Stay Awake</th>
</tr>
<title>Grading Weights</title>
<tr>
<style>
<th id="hw1" headers="hw">1</th>
table, th, td {border: thin solid;}
th, td {
text-align: center;
<th id="exam1" headers="exams">1</th>
padding: 10px;
<th id="exam2" headers="exams">2</th>
}
</tr>
caption {margin-bottom: 15px;}
<tr>
</style>
<td headers="hw hw1">10%</td>
</head>
<td headers="hw hw2">10%</td>
<body> <td headers="hw hw3">10%</td>
<table> <td headers="exams exam1">30%</td>
<caption>Grading Weights for Web Programming I <td headers="exams exam2">36%</td>
<details> <td headers="awake">4%</td>
<summary>Help</summary> </tr>
The first 3 columns show weights for the 3 homework assignments. </table>
The next 2 columns show weights for the 2 exams. </body>
The last column shows the weight for staying awake during class. </html>
</details>
</caption>
a Element: The Anchor element
• The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web
pages, files, email addresses, locations in the same page, or anything else a URL can address.
• enabling a user to load a resource (which usually means jumping to another web page)
<a href="http://www.park.edu">Park University</a>
Park University
• The a element can be used as a mechanism that enables a user to download a file of any
type—image file, video file, PDF file, Microsoft Word file, and so on.
<a download href="http://www.park.edu/catalogs/catalog2018-2019.pdf">Park
University 2018-2019 catalog</a>
a Element Continuation Rule for Elements that Span Multiple
Lines
<p>
Known for its Computer Science program,
<a href="http://www.park.edu/informationAndComputerScience/accolades">
Park University</a> is tied for first in the number of Turing Award
winners among all Missouri universities whose motto is "Fides es Labor."
</p>
Different Types of href Values
absolute URL
suppose you want to add a link on a Facebook page that directs the user to an Instagram page.
<a href=" https://www.instagram.com/hannahDavis.html"> Hannah's Instagram</a>
• https is another popular protocol. It stands for hypertext transfer protocol secure.
Relative URLs
• A relative URL is for jumping to a web page when the current web page and the target web page are
on the same web server.
• A relative URL value allows you to jump to a web page that resides on the same web server as the
current web page. It does so by specifying a path from the current directory to the destination web
page. The current directory is the directory where the current web page resides. The destination web
page is the page that the user jumps to after clicking on the link.
oleung directory is the home page

directory for student Olivia Leung
Relative Path Examples
To go from the index.html page to the business page,
• <a href="hw1/business.html">Business Page</a>
To go from the index.html page to the weather page,
• <a href="misc/lecture/weather.html">Weather Page</a>
The code for an a element that resides in the business page and takes the user to the menu page
• <a href="menu.html">Menu Page</a>
Path-Absolute URLs
• A URL value that starts with a / is referred to as a path-absolute URL, and it’s a special type of relative URL
• <a href="/oleung/index.html">Olivia's Website</a>
Navigation Within a Web Page
Syntax for Internal Link
• To jump to a designated location within the current web page, you need to use a value starting
with # such that that value matches an id attribute’s value for an element in the web page.
<a href="#pledge-drive">Pledge Drive</a>
And here’s the element that that link jumps to:
<h3 id="pledge-drive">Pledge Drive</h3>
HTML
CSS Style
Walking Through the Clock Tower Web Page’s Source Code
• class="cell” : We’re using a simple CSS table for layout with only one row and two cells—one cell for
the navigation bar at the left and one cell for the web page’s main content.
.cell {
display: table-cell;
padding: 0px 10px 10px;
}
• The rule applies to both table cells. It specifies that there’s no padding on the top, 10 pixels of
padding on the left and right (from the second value), and 10 pixels at the bottom
• where child selectors use the > symbol to match elements that are child elements of other
elements. :nth-child() selector is a special child selector in that it allows you to specify
which child element is selected
Bitmap Image Formats: GIF, JPEG, PNG
• There are two basic categories of image files—bitmap image files and vector
graphics files.
• With bitmap image files, an image is comprised of a group of pixels.
• For example, an icon, which is simply a small image file, typically has 16 rows with
16 pixels in each row. Within a bitmap image file, every pixel gets mapped to a
particular color value, and each color value is a sequence of bits (where a bit is a
0 or a 16). For a browser to display a bitmap image, it displays each pixel’s
mapped color. This reliance on mapping color bit values to pixels is the basis for
the name bitmap image.
Bitmap Image Formats: GIF, JPEG, PNG
• The three most common formats for bitmap image files (also called raster image
files) on the Web are GIF, JPEG, and PNG.
GIF Image File Format
• GIF files use a filename extensionof .gif.
• GIF stands for Graphics Interchange Format.
• each pixel uses 8 bits, and those 8 bits determine the pixel’s color. Each of those colors would
have an 8-bit sequence associated with them, such as 01011010 for red, 11011001 for brown,
and 00010110 for blue.
• With 8 bits for each color value, there are 2^8= 256 different ways to arrange the 0’s and 1’s.
• That means each GIF image file can handle a maximum of 256 distinct colors. If a picture has
more than 256 distinct colors, then when creating the GIF file from the picture, some of the colors
won’t be stored accurately.
• GIF files are good for limited-color images such as line drawings, icons, or cartoon-like illustrations
and not good for color photographs.
JPEG Image File Format
• JPEG stands for Joint Photographic Experts Group.
• JPEG files use a filename extension of .jpeg or .jpg.
• The original picture’s colors are mapped to a 24-bit palette of colors. With 24 bits,
there are approximately 16 million permutations of 0’s and 1’s in each color value
(224 = 16,777,216) i.e 16 million unique colors can be represented
• the JPEG format, all the photograph’s original colors can be displayed accurately
PNG Image File Format
• PNG stands for Portable Network Graphics
• PNG files use a filename extension of .png
• Invented in 1996 as an open-source alternative to the GIF format
• The PNG format provides more flexibility in terms of clarity versus file size. Only a few bits (to
create an image file that doesn’t require much storage) all the way up to 64 bits per pixel
• Only 24 bits are needed to represent approximately 16 million unique colors
• The PNG format provides more flexibility in terms of transparency. PNG images can have 256
• levels of transparency.
Lossy reduces file size by permanently removing some of the original data.
Lossless reduces file size by removing unnecessary metadata.
img Element
• <img src="../images/winkingSmiley.gif“ alt="Winking
Smiley Face" width="50" height="50">
• The src attribute specifies the image’s filename and the location of the image’s
file.
• The HTML5 standard states that the alt attribute is required. The alt attribute’s
value should normally be a description of the picture. The alt stands for
“alternative” because it provides an alternative for displaying the image in case the
image is unviewable.
• An img element’s width and height attributes specify the image’s size in
pixels.
Ex: <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Responsive Images
• Responsive web design (RWD) is the practice of writing code that dynamically
generates web pages that conform to different screen sizes and viewing
orientations (portrait or landscape).
FIGURE 6.15 How a responsive web page’s layout can display differently on different platforms
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dominican Republic</title>
</head>
<body>
<h1>Joe Hartman School in the Dominican Republic</h1>
<picture>
<source media="(max-width: 799px)" srcset="../images/drKids-450w.jpg">
<source media="(min-width: 800px)" srcset="../images/drKids-800w.jpg">
<img src="../images/drKids-800w.jpg" alt="Jordan with kids at recess">
</picture>
<p>
During this past spring break, Jordan participated in a service trip to
the Dominican Republic. One of the group's primary activities was
helping to build an annex to a grade school. In the above picture, you
can see Jordan with some of the kids. She's the one wearing sunglasses.
</p>
</body>
</html>
<picture>
<source media="(max-width: 799px)" srcset="../images/drKids-450w.jpg">
<source media="(min-width: 800px)" srcset="../images/drKids-800w.jpg">
<img src="../images/drKids-800w.jpg" alt="Jordan with kids at recess">
</picture>
• The viewport is the area below the address bar where web page content displays. As you
can imagine, mobile devices have the smallest viewports, whereas laptops and desktop
monitors have the largest viewports.
• The source element’s media attribute provides the condition that checks the viewport’s
width, and the source element’s srcset attribute provides the image filename
• The first source element uses the condition max-width: 799px to check for a viewport
width of less than or equal to 799 pixels. The second source element uses the condition
max-width: 800px to check for a viewport width of greater than or equal to 800 pixels
• The img element’s src attribute provides an image file that the browser loads if none of
the source element conditions are true
Resolution Switching
• The resolution switching problem can be thought of as presenting an image of appropriate

resolution given a device’s display density, viewport size or other size constraint.
• With resolution switching, We can provide the browser with additional information (viewport
width, resolution, etc.), which it can use to display a different-sized copy of the same image
based on the device.
• We’ll use both the srcset and size attributes on the `img element to provide the browser with
additional image assets to make the right choice.
Positioning Images
To avoid wasted space around a medium or large image, you might want to display it on
a line by itself by surrounding it with a block element.
Positioning Images
• floating” an image to the left or to the right
• To float an image, you apply a CSS rule to the img element, where the CSS rule uses
the float property and a value of left or right.
.left {float: left; margin: 8px;}

.right {float: right; margin: 8px;}
<img class="left" src="../images/coconut.jpg“ width="100" height="150" alt="">

<img class="right" src="../images/nuytsia.jpg“ width="150" height="100" alt="">
iframe Element
• The <iframe> tag specifies an inline frame.
• An inline frame (iframe) is a HTML element that loads another HTML page within
the document.
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.w3schools.com" title="W3Schools

Free Online Web Tutorials">
</iframe>
</body>
</html>
display: flex;
• Flex is the value of css display . By using display flex in parent element,
child elements automatically align like column or row with auto width and
auto height.
<head> <body> Example1
<style> <div class="container">
.container{ <div>A</div>
display:flex; <div>B</div>
background-color: blue; <div>C</div>
} <div>D</div>
.container>div{ <div>E</div>
background-color: azure; <div>F</div>
margin: 7px; <div>G</div>
padding:10px; <div>H</div>
flex-wrap: wrap; <div>I</div>
} </div>
</style> </body>
</head>
display: flex;
Example2
<!DOCTYPE html> <body>

<html>
<head> <h1>Create a Flex Container</h1>
<style>
.flex-container { <div class="flex-container">
display: flex; <div><img src="img2.jpg" alt="Girl in a jacket" width="520" height="600"></div>
width: 1750px; <div><img src="img3.jpg" alt="Girl in a jacket" width="520" height="600"></div>
background-color: DodgerBlue; <div><img src="img3.jpg" alt="Girl in a jacket" width="520" height="600"></div>
} </div>
.flex-container > div { <p>A Flexible Layout must have a parent element with the <em>display</em>
background-color: #f1f1f1; property set to <em>flex</em>.</p>
margin: 10px;
padding: 20px; <p>Direct child elements(s) of the flexible container automatically becomes flexible
font-size: 30px; items.</p>
}
</style> </body>
</head> </html>
Output

Unit4_CompletePPT_2024[1]

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit4_CompletePPT_2024[1]

Uploaded by

Copyright:

Available Formats

Unit-4

Dr. Pramod T.C

If you want the caption’s text displayed at the

table, th, td {border: thin solid;}

oleung directory is the home page

• The resolution switching problem can be thought of as presenting an image of appropriate

.left {float: left; margin: 8px;}

<img class="left" src="../images/coconut.jpg“ width="100" height="150" alt="">

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com" title="W3Schools

<!DOCTYPE html> <body>

You might also like