Module-4

Tables and CSS, Links and Images

Module 4:
Tables and CSS, Links and Images
5.2 Table Elements

• Row-column format.

• Headers are not required for a data table,But they are common and the wind disasters table has two
column headers, labeled “Tornadoes” and “Hurricanes.”

• To create a data table, start with a table container element, fill the table element with a tr element for
each of its rows, and fill each tr element with th elements for header cells and td elements for data cells.

• To display a title for a table, embed a caption element within the table container.

• If you want the caption’s text displayed at the bottom, you can use the following CSS type selector
rule: caption {caption-side: bottom;}
table.html
5.3 Formatting a Data Table: Borders, Alignment, and Padding
• To specify whether or not you want borders for a table, you should use CSS’s border-style property. To specify the
border’s width, you should use CSS’s border-width property. For example, here’s the CSS type selector rule used in the
Wind Disasters web page:

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

 th, td {

text-align: left;

padding: 10px;

 table {border-width: medium;}

 th {border-bottom-width: thick;}

 table {border-collapse: collapse;}

Wind Disasters web
page with improved
formatting

table1.html
Note:-How there’s a gap between each of the borders. More specifically, there’s a gap between the
table’s exterior border and the individual cells’ borders, and there’s a gap between the borders for
adjacent cells. If you’d like to eliminate those gaps and merge the borders, use the border-collapse
CSS property with a value of collapse, like this:
table {border-collapse: collapse;}

The “improved
formatting”
Wind Disasters
web page

table2.html
 5.4 CSS Structural Pseudo-Class Selectors

• Pseudo-classes conditionally select elements from a group of elements specified by a standard

selector.

• 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.

• The class attribute’s value as a class selector in a CSS rule. But if the number of elements that we
want to display with a special format is large, then quite a few class="value" code insertions would
be required.
 CSS Structural Pseudo-Class Selectors

• tr:first-of-type {background-color: palegreen;}

• :first-of-type: pseudo-class checks each of those elements to see if it is a first tr element within a
particular table
• pseudo-class selectors use the terms sibling and parent.
• Sibling elements are elements that have the same parent element.
• An element is considered to be a parent of another element if it contains the other element with
just one level of nesting
 CSS Structural Pseudo-Class Selectors
popular structural pseudo-class selectors

• :last-of-type pseudo-class checks each of the elements selected by a standard selector

to see if the element is a last element from among a group of sibling elements.

• ul > li:last-of-type {background-color: palegreen;}

 CSS Structural Pseudo-Class Selectors

• td:nth-of-type(3) {text-align: right;}

• That rule matches every third td element within each row of td elements and causes
those td elements to be right-aligned.

• tr:nth-of-type(even) {background-color: lightblue;}

• Use another expression of the form an + b, where a and b are constant integers and n
is a variable named n. By using such an expression, you can specify interleaved
groups of elements. This is better explained with an example:

tr:nth-of-type(5n+2) {background-color: red;}

• values for n by starting with n equals 0 and incrementing n by 1 each time. So when
n equals 0, row 2 is selected. When n equals 1, row 7 is selected.
Output

structural-pseudo-class-selector.html
 5.5 thead and tbody Elements
• table header cells at the top of a table’s columns, but sometimes want to put them at the left of each row.
• For example, in the Global Temperatures web page in FIGURE 5.7, note the year values in header
cells at the left.
• If you have header cells at the left, very often you’ll want to differentiate those header cells from the
ones at the top.
• The preferred way to differentiate is to put the top cells’ row (or rows) in a thead element and put the
subsequent rows in a tbody element.

• The thead element contains a tr element and three th elements within the tr element.

• The tbody element contains several tr elements, with each tr element holding a th element and two td elements.

• Here are simplified versions of the descendant selector rules used to color thead’s header cells differently from
tbody’s header cells:

• thead th {background-color: midnightblue;}

• tbody th {background-color: mediumvioletred;}

• body {display: flex; justify-content: center;}

• Rule tells the browser to center all the elements in the body container horizontally within the

browser window’s borders.

• 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.
Global Temperature Webpage

body {display: flex; justify-content: center;}

thead.html
 5.6 Cell Spanning
• Table examples have used a standard grid pattern, with one cell for each row-column intersection.

• But sometimes tables will have cells that span more than one of the intersections in a standard grid.

• To create a merged cell that spans more than one column, you’ll need to add a colspan attribute to a th or td

element.
• <tr><th>Eras</th><th colspan="2">Events</th></tr>
• To create a merged cell that spans more than one row, add a rowspan attribute to the cell’s th or td element
• <tr>
<th rowspan="2">Mesozoic<br>251 to 65.5 mya</th>
<td>Evolutionary split between reptiles and dinosaurs</td>
<td>235 mya</td>
</tr>
<tr><td>South America breaks away from Africa</td> <td>105 mya</td>
</tr>
cellspanning.html
 5.7 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.

• accessible websites tend to be better for users with slow Internet connections and for users who
need glasses.

• 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. The speech synthesizer then reads the text aloud.
• If you have a data table in which one or more header cells are not in the first row or column (i.e.,it’s not a simple
table), then you should consider adding code 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.

• The Grading Weights table in FIGURE next has header cells in its second row, so the table is a good
candidate for a web accessibility makeover

• In the figure, note the right-facing triangle under the table’s title.

• If the user clicks the triangle, the browser will display “help” details that

describe the table’s content.

• The triangle and the text that describes the table both come from a details element embedded in the table’s
caption element.
• HTML5 standard requires that you preface the details element’s text with summary element.

• if you have a table element being used for layout purposes, you should add a role attribute to the table element’s start tag, like this:

<table role="presentation">

• Besides the details element, another way to help screen readers understand complicated data tables (where one or more header cells are not in the first row

or first column) is to use the headers attribute.

• With a headers attribute, specify the header cell(s) that each data cell or subheader cell is associated with. For example, in the Grading Weights table, the

36% data cell is associated with the Exams header cell and also the 2 subheader cell immediately above the 36% cell.

• So to help with web accessibility, the 36% cell has a headers attribute that specifies those two

• header cells. <td headers="exams exam2">36%</td>

• In this headers attribute, the “exams” and “exam2” values match the id values for the Exams header cell and the 2 subheader cell immediately above the

36% cell.

• <th colspan="2" id="exams">Exams</th>

• ...

• <th id="exam2" headers="exams">2</th>

Grading Weights web page

webaccessibility.html
 5.8 CSS display Property with Table Values

• Implement layout tables the right way—using CSS rather than the table

element.

• There are two main ways to implement layout tables with CSS. If you want the layout boundaries
to grow and shrink the way they do for an HTML table element, then use the CSS display property
with table values.

• On the other hand, if you want the layout boundaries to be fixed (no growing or shrinking), then
use CSS position properties.

• In this section, we discuss the first technique, using the CSS display property with table values.
The display property’s table Values:
• display: inline property-value pair to display an address element (which is normally a block
element) in the flow of its surrounding sentence.

• The display property can be used for much more than just inlining block element content.

• It can also be used to emulate the various parts of a table.

• It shows values for the display property that enable elements to behave like the parts of a
table.

• Figure 5.13’s first display property value is table.

• The table value enables an element, like a div element, to behave like a table
 CSS display Property with Table Values

<style>
.table {display: table;}
...
</style>
<body>
<div class="table">
...
</div>
</body>
 CSS display Property with Table Values

table values for the CSS display property

ancient Wonders web page
display.html
 The border-spacing property

• By default, tables created with the display property are displayed with no gaps between their cells.

• For the Ancient Wonders web page, that default behavior would have led to pictures that were
touching.

• To avoid that ugliness, you can use the border-spacing property, and that’s what we did in the
Ancient Wonders style container:

.table {

display: table; border-spacing: 20px; }

 The border-spacing property

• border-spacing: 15px; 25px;

• The first value, 15px, specifies horizontal spacing, and the second value, 25px,
specifies vertical spacing.
 6.2 a Element
• a element that implements a link to Park University’s website:

<a href="http://www.park.edu">Park University</a>

• 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. To implement that download functionality:

<a download href="http://www.park.edu/catalogs/catalog2018-2019.pdf"> Park University 2018-2019

catalog</a>

• The download attribute has no value, but if you (as the web programmer) want the end user
to save the file using a different filename than that specified by the href atttibute, then you
should include a filename for the download attribute’s value, such as download="Park
University 2018-2019 catalog.pdf".
 Continuation Rule for Elements that Span Multiple Lines

• For statements that might be too long to fit onto one line, press enter at an appropriate breaking
point to avoid line wrap.
href attribute values
 Different types of href Values

• An absolute URL, suppose you want to add a link on a Facebook page that directs the user to an
Instagram page.
Example: <a href=" https://www.instagram.com/hannahDavis.html">
Hannah's Instagram</a>
• http: Hypertext Transfer Protocol for communication.
• https: Hypertext Transfer Protocol Secure.
• The https protocol provides more security for communications than does http.
• To jump to a web page that resides on the same web server as the current web page, for the link’s
href attribute, use a relative URL. The relative URL specifies a path from the current web page’s
directory to the destination web page.
• To jump to a designated location within the current web page, for the link’s href attribute, use a
value starting with # such that that value matches an id attribute’s value for an element in the web
page.
 6.3 Relative URLs

• 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.
Relative URLs

example directory tree

 Relative URLs

• Home page directory is the directory where a home page resides, and a home page is the
starting point for a user’s browsing experience on a particular website.
• A subdirectory (also called a subfolder or a child folder) is a directory that is contained
within another directory.

• In forming a path for a relative URL value, need to navigate between a starting directory and
a target file.
• Follow these rules:
Rule 1: Use /’s to separate directories and files.
Rule 2: Use “..” to go from a directory to the directory’s parent directory.
 Relative URLs

• The home page is in the oleung directory.

• The oleung directory is the parent directory of index, so you need to use .. in order to navigate up to the
oleung directory.
• Here’s the relevant an element code:
<a href="../index.html">Olivia's Home Page</a>.
• The / (forward slash) between .. and index.html.
• As explained earlier, the / is a delimiter that separates directories and files.
• The .. refers to a directory and index.html is a file, so the / is necessary to separate them.
 Relative Path Examples

• <a href="hw1/business.html">Business Page</a>

• <a href="misc/lecture/weather.html">Weather Page</a>
• <a href="menu.html">Menu Page</a>
 path-absolute 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.
• In the prior examples, the relative URL’s path started at the current web page’s directory.
• As an alternative, you can have the relative URL’s path start at the web server’s root directory.
• A web server’s root directory is the directory on the web server that contains all the directories and files
that are considered to be part of the web server.
• If you want to have the relative URL’s path start at the web server’s root directory, preface the URL value
with /.
 path-absolute UrLs
• For example, using directory tree, if oleung is immediately below the web server’s root directory, the
following code could be added to any of the web pages shown, and it would implement a link to the
index.html page:
• <a href="/oleung/index.html">Olivia's Website</a>
• A URL value that starts with a / is referred to as a path-absolute URL, and it’s a special type of relative
URL.
• The term path-absolute URL comes from the WHATWG.
• It stands for Web Hypertext Application Technology Working Group.
• It’s the organization that keeps track of the HTML5 standard with a living document.
• Its standard aligns very closely with the W3C’s HTML5 standard,
 6.6 Navigation Within a Web Page

• There are three basic types of values for an ‘a element’s’ href attribute.

• ‘absolute URL’ value and a ‘relative URL’ value.

• In both of those cases, the target is a web page separate from the current web page.

internal.html
 6.9 Bitmap Image Formats: GIF, JPEG, PNG

• There are two basic categories of image files—bitmap image files and vector graphics files.

• The three most common formats for bitmap image files (also called raster image files) on the Web are
GIF, JPEG, and PNG.

• Two other file formats—BMP (for bitmap) and TIFF (for tagged image file format).
Bitmap Image Formats: GIF, JPEG, PNG
 GIF Image File Format

• GIF files use a filename extension of .gif. GIF stands for Graphics Interchange Format.

• In creating a GIF file from an original picture, the original picture’s colors are mapped to an 8-

bit palette of colors.

• With 8 bits for each color value, there are 256 different ways to arrange the 0’s and 1’s.

• 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.

• Instead they’ll be stored with similar colors that are part of the GIF file’s color palette, and that

leads to the GIF file’s image being a degraded version of the original photograph .
• By using only 8 bits of storage for each pixel, GIF files are able to achieve relatively small file sizes.

• That’s the main benefit of using the GIF file format—small file sizes. File sizes can be reduced further
by applying a compression scheme.

• The GIF file compression algorithm is lossless because it does not introduce any color degradation.

• But be aware that the compression is applied to the GIF file’s 256-color-palette image, not to the
original picture.

• A fun feature of the GIF file format is that it supports simple animation.
 JPEG Image File Format
• JPEG stands for Joint Photographic Experts Group, and JPEG is pronounced “jay-peg.”

• JPEG files use a filename extension of .jpeg or .jpg. In creating a JPEG file from an original picture, 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).

• That means approximately 16 million unique colors can be represented, and that’s more colors than the human
eye can discern.

• In attempting to produce optimized JPEG files, “lossy” compression schemes are applied.

• The person who creates the JPEG image file chooses the lossiness of the compression scheme—higher loss
means greater color degradation and greater file size reduction.
 PNG Image File Format
• PNG stands for Portable Network Graphics, and PNG is pronounced “ping.” PNG files use a filename
extension of .png.

• The PNG format was invented in 1996 as an open-source alternative to the GIF format because the GIF
format was copyright protected with a patent owned by Unisys.

• The PNG format provides more flexibility in terms of clarity versus file size. In creating a PNG file from
an original picture, you can choose to map each pixel to only a few bits (to create an image file that
doesn’t require much storage) all the way up to 64 bits per pixel (to create an image file that is very clear).

• As mentioned earlier, only 24 bits are needed to represent approximately 16 million unique colors, and
that’s all that most humans can discern.

• The additional bits for 64-bits-per-pixel PNG files are for things like multiple channels and
opacity/transparency levels.
• The PNG format provides more flexibility in terms of transparency.

• You can create images with different levels of transparency for different parts of an image.

• GIF images can have only two levels of transparency—completely opaque or completely
transparent.

• PNG images can have 256 levels of transparency.

 Image Format Comparison

• If your image is a photograph, you should normally choose the JPEG format because a JPEG file
will yield a higher quality image, and it will tend to be smaller in size.

• How can a JPEG file be smaller than a GIF file when a JPEG file uses 24 bits for each color and a
GIF file uses 8 bits for each color? For photographs, the JPEG compression scheme is much more
effective than the GIF compression scheme.

• The JPEG compression often reduces the size so it’s less than the size of a comparable original
GIF file and even less than a compressed version of the GIF file
• For limited-color images such as line drawings, icons, and cartoon-like illustrations, choose the
GIF or PNG format because that will lead to smaller files than if the JPEG format is used.

• The PNG format is flexible—in addition to being a good choice for limited-color images, it can
also be used for high-quality photographic images.

• The PNG format does not support animation, but in 2001, an offshoot of the PNG working group
formally introduced an extension to the PNG format called MNG that does support animation.

• a few advantages that MNG files have over animated GIF files:

▸ Significantly improved compression

▸ Ability to move images relative to the other images in the animation’s sequence of images

▸ Ability to use not only PNG images, but also JPEG-oriented (JNG format) images
 6.10 img Element
• The img element, which displays images.

<img src="../images/winkingSmiley.gif“ alt="Winking Smiley Face" width="50" height="50">

Where, the src attribute specifies the image’s filename and the location of the image’s file

• the alt attribute and its "Winking Smiley Face" value. 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.

• Formally, we refer to the alt attribute as a fallback mechanism because it provides content for the

browser to fall back on if the image can’t be displayed. That content is referred to as fallback content .
• Before HTML5, prior versions of HTML specified that the alt attribute’s value should be
displayed as a tooltip (text that pops up when the user hovers the mouse over an item), but that’s
no longer the case.

• An img element’s width and height attributes specify the image’s size in pixels. In implementing
an img element, you should find the image’s actual width and height values and use those values
for the img element’s width and height attributes.
6.12 Responsive Images
Responsive Images

• Users view web pages on different types of platforms—desktops, laptops, tablets,10

and smartphones.

• “responsive” (i.e., you want it to dynamically generate different layouts and images
for different platforms).

• 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).
Responsive Images

Resolution Switching
Resolution switching is when you provide a list of images for different versions
of the same picture where the images are identical in terms of aspect ratio,

where aspect ratio is the ratio of an image’s width to height.

Responsive Images

Code fragment for resolution switching img element

 Responsive Images

• Figure shows the img element for a web page that employs resolution switching to display one of
three different pictures on a web page.

• The srcset attribute, which provides a comma-separated list of image filenames with an image width
next to each file-name.

• The image width values are the pixel values you see when you hover your mouse over the file in File
Explorer

• When specifying an image width value, insert a space before the value and append a w after the value.

• The sizes attribute. Its value helps the browser choose the most appropriate file from among the srcset
attribute’s list of image files.
 Responsive Images

• The sizes attribute provides a comma-separated list of values.

• Each value has two parts—a condition that checks the width of the browser window’s
viewport and the width of the slot in which the image displays.

• 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.
 Responsive Images

(max-width: 340px) 90vw

• The max width: 340px condition means that if the device’s viewport is less than or equal
to 340 pixels, then the web page uses 90vw for its image slot width.

• The vw unit stands for viewport window, and it’s used for specifying an image slot width
as a percentage of the viewport’s width.

• The 90vw value means that the image slot width spans 90% of the viewport’s width.

• You can use other units rather than vw (such as px), but vw can make maintenance chores
easier.
Responsive Images
art Direction
• Another responsive-image implementation technique.

• With resolution switching, the different versions are different sizes, but they have the same aspect.

• On the other hand, with art direction, the different versions can have different aspect ratios as a result
of cropping the original picture in different ways.

• For example, for a desktop computer layout, the browser’s viewport would be wider, so having a wide
landscape-oriented picture should be OK.
 Responsive Images
art Direction

• For example, for a desktop computer layout, the browser’s viewport would be wider, so
having a wide landscape-oriented picture should be OK.

• But for a mobile device layout, the browser’s viewport would be narrower, so using that
same landscape-version image would probably make the picture’s main subject too small.

• The solution is to use a portrait-version image where the main subject can be zoomed in.
 Responsive Images
art Direction

• To implement responsive images with the art direction technique, you wrap the images in
a picture container.

• The picture container holds a group of source elements, where each source element value
has two parts—a condition that checks the width of the browser window’s viewport and
an image filename.
Responsive Images

republic.html
 7.2 Positioning Images

• The img element is an inline element (more formally, a phrasing element), so it gets displayed within the
normal flow of its surrounding text.
• That works well for small images (icons), but not so well for medium and large images.
• See the smiley face image in FIGURE 7.1. It’s a small image, an icon, and its default inline positioning
works well.
• But the tree photographs? They’re taller and their default inline positioning causes the browser to generate
quite a bit of dead space above the text lines in which they’re embedded.
• In general, you should avoid such dead space.
• 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
Positioning Images

• “floating” an image to the left or to the right, so

its adjacent text displays along its right or left border, respectively.

• 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.html & float1.html
Positioning Images
7.3 Shortcut Icon

• To mark your web page with a shortcut icon in the browser’s tab area, in your web page’s head
container, include a link element with rel="icon".

• For example, here’s the code from the Trees web page that causes the tree shortcut icon to be
displayed:

<link rel="icon" href=“Desert.jpg”>

shorticon.html
7.4 iframe Element
• An iframe is an inline frame that allows us to embed another document within the current HTML
document. In HTML, the inline frame is defined with the <iframe> tag.

• This tag creates a rectangular region at specified place within the HTML document in which the
browser can display an external document such as a map or another web page.

• URL or path of the external document is attached using the src attribute of <iframe> tag. If the
content of iframe exceeds the specified rectangular region, HTML automatically includes the
scrollbars. HTML allows any number of iframes, but, it may affect the performance of the website.
• Iframe for a Hyperlink

• To create a target Iframe for a hyperlink, we use the name attribute of <iframe>
tag. The value of this attribute is used in the target attribute of elements
like <form> and <a> to specify the target frame.

iframe.html
• iframe {border: none; overflow: hidden;}

• The border-none property-value pair makes the iframe’s browsing context border invisible.
Normally, if the iframe’s content is larger than the iframe’s dimensions, the browser displays
scrollbars so all of the content can be accessed. The overflow-hidden property-value pair clips

• the content so no scrollbars display.

iframe1.html