Web CH 2 - Part 2

HTML Links
• HTML links are hyperlinks. • By default, links will appear

• You can click on a link and jump to as follows in all browsers:
another document.  An unvisited link is underlined
• The HTML <a> tag defines a and blue
hyperlink. It has the following syntax:  A visited link is underlined and
<a href="url">link text</a> purple
<a href="https://www.wku.edu.et/">  An active link is underlined
Visit Wolkite University!</a> and red
Compiled By Aliazar D. (MSc in SEng) 2

Conti..
• By default, the linked page will be displayed in the current
browser window. To change this, you must specify another target
for the link.
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab
as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

Conti..
• Use target="_blank" to open the linked
document in a new browser window or tab:
• <a href="https://www.wku.edu.et/"
target="_blank">Visit WKU!</a>
• HTML Links - Use an Image as a Link
• <a href="https://www.wku.edu.et/"><img
src=“wku.jpg" alt=“WKULOGO"
style="width:42px;height:42px;"></a>
Conti..
• Link to an Email Address
 Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new
email):<a href="mailto:someone@example.com">Send email</a>
• Button as a Link
 To use an HTML button as a link, you have to add some JavaScript code.
 JavaScript allows you to specify what happens at certain events, such as a click
of a button:
<button onclick="window.location.href='https://wku.edu.et/';">Visit WKU</button>
• Link Titles
 The title attribute specifies extra information about an element. The information
is most often shown as a tooltip text when the mouse moves over the element.
 <a href=‘https://www.wku.edu.et/’ title="Go to WKU">Visit WKU Website</a>

HTML Images
• HTML Images Syntax
 The HTML <img> tag is used to embed an image in a web
page.
 Images are not technically inserted into a web page; images
are linked to web pages. The <img> tag creates a holding
space for the referenced image.
 The <img> tag is empty, it contains attributes only, and does
not have a closing tag.
 The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image
 <img src="url" alt="alternatetext">
Conti.. <!DOCTYPE html>
<html>
<body>
<h2>Floating Images</h2>
• Image Floating <p><strong>Float the image to the right:</strong></p>
<p>
 Use the CSS float property to <img src="smiley.gif" alt="Smiley face"
let the image float to the right style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a
or to the left of a text. floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a
floating image. A paragraph with a floating image.
</p>
</body>
</html>

HTML Background Images
• To add a background image on an
HTML element, use the HTML • Background Repeat
style attribute and the CSS  If the background image is smaller
background-image property:
<p style="background-image: than the element, the image will
url('img_girl.jpg');"> repeat itself, horizontally and
• You can also specify the vertically, until it reaches the end of
background image in the <style>
element, in the <head> section: the element.
<style>  To avoid the background image from
p{ repeating itself, set the background-
background-
image: url('img_girl.jpg’); repeat property to no-repeat
}
</style> <style>
• If you want the entire page to have body {
a background image, you must background-
specify the background image on image: url('example_img_girl.jpg');
background-repeat: no-repeat;
the <body> element
}
</style>
Conti..
<!DOCTYPE html>
• Background Cover <html>
 If you want the background image to cover <head>
<style>
the entire element, you can set the body {
background-size property to cover. background-image: url('img_girl.jpg');
background-repeat: no-repeat;
 Also, to make sure the entire element is background-attachment: fixed;
background-size: cover;
always covered, set the background- }
attachment property to fixed: </style>
</head>
 This way, the background image will <body>
<h2>Background Cover</h2>
cover the entire element, with no <p>Set the background-size property to "cover" and the background
stretching (the image will keep its original image will cover the entire element, in this case the body element.</p>
</body>
proportions). </html>

Conti.. <!DOCTYPE html>
<html>
<head>
• Background Stretch <style>
body {
background-image: url('img_girl.jpg');
If you want the background-repeat: no-repeat;
background-attachment: fixed;
background image to }
background-size: 100% 100%;
stretch to fit the </style>

</head>
entire element, you <body>
<h2>Background Stretch</h2>
can set the <p>Set the background-size property to "100% 100%"
and the background image will be stretched to cover
background-size the entire element, in this case the body element.</p>
</body>
property to 100% </html>
100%.

• The HTML <picture> element allows you to <!DOCTYPE html>
display different pictures for different devices or <html>
screen sizes. <head>
• The <picture> element contains one or more <meta name="viewport" content="width=device-width, initial-
<source> elements, each referring to different scale=1.0">
images through the srcset attribute. This way the </head>
browser can choose the image that best fits the <body>
current view and/or device. <h2>The picture Element</h2>
<picture>
• Each <source> element has a media attribute that
<source media="(min-width: 650px)" srcset="img_food.jpg">
defines when the image is the most suitable.
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
<p>Resize the browser to see different versions of the picture
loading at different viewport sizes</p>
</body>
</html>
HTML Favicon
• A favicon is a small image displayed next to the page title in the
browser tab.
• You can use any image you like as your favicon. You can also
create your own favicon on sites like https://www.favicon.cc.
• A favicon image is displayed to the left of the page title in the
browser tab, like this:

Conti..
• To add a favicon to your website, <!DOCTYPE html>
either save your favicon image to <html>
the root directory of your <head>
<title>My Page Title</title>
webserver, or create a folder in the <link rel="icon" type="image/x-
root directory called images, and icon" href="/images/favicon.ico">
</head>
save your favicon image in this <body>
folder. A common name for a <h1>This is a Heading</h1>
favicon image is "favicon.ico". <p>This is a paragraph.</p>
</body>
• Next, add a <link> element to your </html>
"index.html" file, after the <title>
element,
HTML Tables
• HTML tables allow web • Table Cells • Table Rows
developers to arrange data into  Each table row starts with a <tr> and
rows and columns.  Each table cell is defined by
ends with a </tr> tag.
• A table cell can contain all a <td> and a </td> tag.  tr stands for table row.
sorts of HTML elements: text,  td stands for table data. <table>
images, lists, links, other
tables, etc.  Everything between <td> <tr>
<td>HTML</td>
• Table Headers and </td> are the content of <td>CSS</td>
 Sometimes you want your the table cell. <td>JavaScript</td>
cells to be table header <table> </tr>
cells. In those cases use <tr>
the <th> tag instead of the <tr>
<td> tag: <td>HTML</td> <td>Lab 1-3</td>
<td>CSS</td> <td>Lab 3-4=</td>
 th stands for table header.
<td>JavaScript</td> <td>Lab 5-6</td>
<tr> </tr>
<th>Chapter 2</th> </tr>
<th>Chapter 3</th> </table> </table>
<th>Chapter 4</th> Compiled By Aliazar D. (MSc in SEng) 14
</tr>
Conti..
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TH elements define table headers</h2>
<table style="width:100%">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body> Compiled By Aliazar D. (MSc in SEng) 15
</html>
HTML Table
• HTML Table Borders • Collapsed Table Borders • Style Table Borders • Border Color
 HTML tables can have • To avoid having double  If you set a background • With the border-
color property,
borders of different borders, set the border- color of each cell, and give you can set the
styles and shapes. collapse property to the border a white color color of the
 When you add a border collapse. (the same as the document border.
to a table, you also add • This will make the borders background), you get the th, td {
borders around each
table cell collapse into a single border impression of an invisible border-
 To add a border, use the• table, th, td { border: color: #96D4D4;
CSS border property on border: 1px solid table, th, td { }
black; border: 1px solid white;
table, th, and td elements border-collapse: collapse;
table, th, td { border- }
border: 1px solid collapse: collapse; th, td {
black; } background-color: #96D4D4;
}
}

Conti..
• Round Table • To skip the border • Dotted Table • The following values
Borders around the table by Borders are allowed:
 Table with the leaving out table from  With the border-style
border-radius the css selector: property, you can set
property, the borders the appearance of the
th, td { border.
get rounded corners:
border: 1px solid th, td {
table, th, td {
border: 1px black; border-
border- style: dotted;
solid black; }
border- radius: 10px;
radius: 10px; }
}

• HTML Table • HTML Table Row
Cont.. Column Width Height
• HTML Table Sizes  To set the size of  To set the height of a
 HTML tables can specific row, add the
a specific style attribute on a
have different sizes column, add the
for each column, table row element:
row or the entire style attribute on <table style="width:100%">
<tr>
table. a <th> or <td> <th>Firstname</th>
 Use the style element: <th>Lastname</th>
<th>Age</th>
attribute with the </tr>
<tr style="height:200px"
width or height <table style="width:100%">
<tr> >
properties to specify <th style="width:70%"> <td>Jill</td>
Firstname</th> <td>Smith</td>
the size of a table, <th>Lastname</th> <td>50</td>
row or column. <th>Age</th> </tr>
</tr>
18
Compiled By Aliazar D. (MSc in SEng)
Conti..
• HTML Table Headers • Vertical Table Headers • Align Table Headers
 To use the first column as table headers,
 Table headers are defined define the first cell in each row as a <th>  By default, table headers are
with th elements. Each th element: bold and centered.
<table>
element represents a table <tr>  To left-align the table headers,
<th>Firstname</th>
cell. <td>Jill</td> use the CSS text-align
<td>Eve</td>
<table> </tr> property:
<tr>
<tr> <th>Lastname</th> th {
<th>Firstname</th> <td>Smith</td>
<th>Lastname</th> <td>Jackson</td> text-align: left;
</tr>
<th>Age</th> <tr> }
<th>Age</th>
</tr> <td>94</td>
<tr> <td>50</td>
</tr>
</table>
19
• Table Caption
Conti..  You can add a caption that serves as a
heading for the entire table.
• Header for Multiple Columns  To add a caption to a table, use the
 You can have a header that <caption> tag:
spans over two or more <table style="width:100%">
columns. <caption>Monthly savings</caption>
<tr>
 To do so, use the colspan <th>Month</th>
attribute on the <th> element: <th>Savings</th>
</tr>
<table> <tr>
<tr> <td>January</td>
<td>$100</td>
<th colspan="2">Name< </tr>
/th> <tr>
<td>February</td>
<th>Age</th> <td>$50</td>
</tr> </tr>
</table>
<tr>

Conti..
• HTML Table - Cell Padding • HTML Table - Cell Spacing
 Cell padding is the space between the cell edges and
the cell content.  Cell spacing is the space between
 By default the padding is set to 0. each cell.
 To add padding on table cells, use the CSS padding  By default the space is set to 2
property:
 To add padding only above the content, use the pixels.
padding-top property.  To change the space between table
 And the others sides with the padding-bottom, cells, use the CSS border-spacing
padding-left, and padding-right properties:
th, td { property on the table element:
padding-top: 10px; table {
padding-bottom: 20px;
padding-left: 30px; border-spacing: 30px;
padding-right: 40px; }
}

Conti..
• HTML Table – Rowspan
• HTML Table – Colspan
 To make a cell span over multiple rows,
 To make a cell span over use the rowspan attribute.
multiple columns, use the  The value of the rowspan attribute
colspan attribute. represents the number of rows to span.
<table>
 The value of the colspan attribute <tr>
<th>Name</th>
represents the number of columns to <td>Jill</td>
</tr>
span. <tr>
<th rowspan="2">Phone</th>
<table> <td>555-1234</td>
<tr> </tr>
<th colspan="2">Name</th> <tr>
<td>555-8745</td>
<th>Age</th> </tr>
</tr> </table>
<tr>
22
Use the :hover selector on tr to highlight table rows on mouse over:
Conti..
HTML Table Styling
• HTML Table - Zebra Stripes • Combine Vertical and Horizontal Zebra
• Horizontal Dividers
 If you add a background color on Stripes
every other table row, you will get a  You can combine the styling from the two  If you specify borders only at the bottom
nice zebra stripes effect. examples above and you will have stripes of each table row, you will have a table
 To style every other table row on every other row and every other column. with horizontal dividers.
element, use the :nth-child(even).  If you use a transparent color you will get  Add the border-bottom property to all tr
 If you use (odd) instead of (even), the an overlapping effect. elements to get horizontal dividers:
styling will occur on row 1,3,5 etc.  Use an rgba() color to specify the tr {
instead of 2,4,6 etc. transparency of the color border-bottom: 1px solid #ddd;
tr:nth-child(even) { tr:nth-child(even) { }
background-color: #D6EEEE; background-color: rgba(150, 212,
} 212, 0.4);
}
th:nth-child(even),td:nth-
child(even) { • Hoverable Table
background-color: rgba(150, 212,  Use the :hover selector on tr
212, 0.4); to highlight table rows on
}
mouse over:
tr:hover {background-
Compiled By Aliazar D. (MSc in SEng) color: #D6EEEE;} 23
Conti..
• HTML Table Colgroup <table> • The <colgroup> tag must be a child of a
 The <colgroup> element is used to <colgroup> <table> element and should be placed before
style specific columns of a table.
<col span="2" style any other table elements, like <thead>, <tr>,
 If you want to style the two first <td> etc., but after the <caption> element, if
columns of a table, use the <colgroup> ="background-color:
and <col> elements. #D6EEEE"> present.
 The <colgroup> element should be used </colgroup> • Multiple Col Elements
as a container for the column <tr>  If you want to style more columns with
specifications. <th>MON</th> different styles, use more <col> elements
 Each group is specified with a <col> <th>TUE</th> inside the <colgroup>:
element. <colgroup>
<th>WED</th>
 The span attribute specifies how many <col span="2" style="background-
columns that get the style. <th>THU</th>
... color: #D6EEEE">
 The style attribute specifies the style to
give the columns. <col span="3" style="background-
• Hide Columns color: pink">
 You can hide columns with the </colgroup>
visibility: collapse property:
<col span="3" style="visibility:
collapse">
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
• HTML Unordered • The CSS list-style-type property is
• Nested HTML Lists
 A list item (<li>) can contain a
Lists used to define the style of the list new list, and other HTML
 An unordered list starts item marker. It can have one of the elements, like images and links,
etc.
with the <ul> tag. Each following values:
Value Description <ul>
list item starts with the disc Sets the list item marker to a <li>Coffee</li>
<li> tag. bullet (default) <li>Tea
circle Sets the list item marker to a <ul>
<ul style="list- circle
<li>Black tea</li>
style-type:disc;"> square Sets the list item marker to a
square <li>Green tea</li>
<li>Coffee</li> none The list items will not be </ul>
marked </li>
<li>Tea</li> Disk Circle Square None <li>Milk</li>
<li>Milk</li> </ul>
</ul>
Conti..
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body> Compiled By Aliazar D. (MSc in SEng) 26
</html>
Conti..
• HTML Ordered Lists • The type attribute of • Nested HTML Lists
 The HTML <ol> tag defines an  A list item (<li>) can contain a
ordered list. An ordered list can be the <ol> tag, defines new list, and other HTML
numerical or alphabetical. Each list the type of the list item elements, like images and links,
item starts with the <li> tag. etc.
 Numbers marker: <ol>
Type Description
<ol type="1"> <li>Coffee</li>
type="1" The list items will be numbered
<li>Coffee</li> with numbers (default) <li>Tea
<li>Tea</li> <ol>
<li>Milk</li> type="A" The list items will be numbered
with uppercase letters
<li>Black tea</li>
</ol> <li>Green tea</li>
 By default, an ordered list will start type="a" The list items will be numbered
with lowercase letters
</ol>
counting from 1. If you want to start </li>
counting from a specified number, type="I" The list items will be numbered <li>Milk</li>
you can use the start attribute with uppercase roman numbers
</ol>
1 A a I i type="i" The list items will be numbered
with lowercase roman numbers

Conti..
• HTML Other Lists <dl>
<dt>Coffee</dt>
A description list is a list of terms, <dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
with a description of each term. </dl>
The <dl> tag defines the
description list, the <dt> tag
defines the term (name), and the
<dd> tag describes each term
HTML Block and Inline Elements
• Every HTML element has a default display value, depending on what • Two commonly used block
type of element it is. elements are: <p> and <div>.
• There are two display values: block and inline. • The <p> element defines a
• Block-level Elements paragraph in an HTML
 A block-level element always starts on a new line, and the browsers document.
automatically add some space (a margin) before and after the • The <div> element defines a
element. division or a section in an
 A block-level element always takes up the full width available HTML document.
(stretches out to the left and right as far as it can).
<p>Hello World</p>
<div>Hello World</div>

Conti..
• Inline Elements • The <div> Element • The <span> Element
 An inline element does not  The <div> element is often used as a container o The <span> element is an inline container
used to mark up a part of a text, or a part of
start on a new line. for other HTML elements.
• The <div> element has no required attributes, a document.
 An inline element only takes but style, class and id are common. o The <span> element has no required
up as much width as attributes, but style, class and id are
necessary. • When used together with CSS, the <div>
common.
element can be used to style blocks of content: o When used together with CSS, the <span>
 This is a <span> element <div style="background-
inside a paragraph. color:black;color:white;padding:20px;">
element can be used to style parts of the
<h2>London</h2> text:
 An inline element cannot <p>London is the capital city of <p>My mother
contain a block-level England..</p> has <span style="color:blue;font-
element! </div> weight:bold;">blue</span> eyes and my
father
<span>Hello World</span> has <span style="color:darkolivegreen;f
ont-weight:bold;">dark
green</span> eyes.</p>

Web CH 2 - Part 2

Uploaded by

Document Information

Original Title

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

Web CH 2 - Part 2

Uploaded by

Copyright:

Available Formats

HTML Links

• HTML links are hyperlinks. • By default, links will appear

Compiled By Aliazar D. (MSc in SEng) 2

Compiled By Aliazar D. (MSc in SEng) 3

Compiled By Aliazar D. (MSc in SEng) 5

Compiled By Aliazar D. (MSc in SEng) 7

Compiled By Aliazar D. (MSc in SEng) 9

stretch to fit the </style>

Compiled By Aliazar D. (MSc in SEng) 10

Compiled By Aliazar D. (MSc in SEng) 12

Compiled By Aliazar D. (MSc in SEng) 16

Compiled By Aliazar D. (MSc in SEng) 17

Compiled By Aliazar D. (MSc in SEng) 20

Compiled By Aliazar D. (MSc in SEng) 21

Compiled By Aliazar D. (MSc in SEng) 27

Compiled By Aliazar D. (MSc in SEng) 29

Compiled By Aliazar D. (MSc in SEng) 30

You might also like