Web Programming I — Week 2

Mikheil Rukhaia

International Black Sea University,

Tbilisi, Georgia

September 3, 2018
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Outline

1 Uniform Resource Locator

2 Links and Navigation

3 HTML Tables

4 Laboratory Work

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 2 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Uniform Resource Locator

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 3 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Hyperlink

I Hyperlinks take you directly to other pages (and even specific

parts of a given page).

I They are often credited for Web’s success.

I Hyperlinks allow visitors to navigate between web sites by

clicking on words, phrases, images, etc.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 4 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Directories

I Directory is just a folder on web site.

I It is important to organize the files on your web site into

directories.

I Terminology:
root directory is the main directory of web site.
subdirectory is within another directory.
parent directory is a directory having a subdirectory.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 5 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

URL

I URL is used to locate a resource on the Internet.

I URL has several parts:

http : // www.logic.at /staff/mrukhaia

| {z } | {z }| {z }
scheme host address file path

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 6 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

The scheme

I Indicates a type of protocol, how the resource should be

retrieved.

Scheme Description
http:// Hyper Text Transfer Protocol
https:// Secure Hyper Text Transfer Protocol
ftp:// File Transfer Protocol
file:// Local machine or local network resource.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 7 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Host address and file path

I Host address can be either IP address or domain name.

I File path is a sequence of directories separated via slashes,

possibly ending with a filename.

I If filename is not given, then web server returns either

Default file (usually index.html or default.html)
List of files in the directory
An error message File Not Found (404) or Forbidden (403).

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 8 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Other parts of URL

I Credentials: a way of specifying a username and password.

http://admin:[email protected]/

I Ports: like doors to the server.

http://www.logic.at:8080/

I Path arguments: pass extra information to a server program.

http://www.logic.at/asap/?page=1

I Fragment identifiers: indicate a specific part of the page.

http://www.logic.at/asap/?page=5#3

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 9 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Absolute and relative URLs

I Absolute URL: a full URL, unique for each file on the Internet.

I Relative URL: indicates where the resource is in relation to the

current page.

I Browser turns relative URL into absolute one.

I Relative URLs work only within the same web site; they cannot
be used to link to pages on other servers.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 10 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Relative URL

I Same directory: just use the name of the file.

I Subdirectory: use the path to file, starting from the subdirectory.

I Parent directory: use ../ as many times as you go up another

directory.

I From the root: use the path, starting with slash, from the root
directory to the file.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 11 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

The <base> element

I Allows to specify a base URL for a page that all relative URLs
will be added to.
<base href="http://www.logic.at/staff/" />

I Relative URL mrukhaia/index.html ends up

http://www.logic.at/staff/mrukhaia/index.html

I Important: be careful with slashes! Do not end up with

http://www.logic.at/staffmrukhaia/index.html
http://www.logic.at/staff//mrukhaia/index.html

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 12 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Links and Navigation

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 13 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Linking to other documents

I <a> element is used to create links between pages.

I Its href attribute contains the path to the document.

<a href="http://www.ibsu.edu.ge/">IBSU</a>

I Its content forms the link.

I Link should be concise and descriptive, not just “click here”.

I Use title attribute for more information.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 14 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Terminology

I Source: starting point of a hyperlink.

I Destination: ending point of a hyperlink.

I Source anchor: every link you see on a web page.

I Destination anchor: mark specific points in a page that a link can

point to.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 15 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Destination anchor

I Common usage:
“Back to top” links at the bottom of long pages.
A list of contents.
Links to footnotes or definitions.

I Created using id attribute of <a> element.

I From source anchor it is referred via hash (#) sign.

I Example: <a id="top">Top Section</a>

<a href="#top">Back to top</a>

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 16 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Attributes of <a>

I accesskey provides a keyboard shortcut that can be used to

activate a link (key is case-sensitive).

I charset and hreflang indicate encoding and language,

respectively, of destination document.

I cords and shape indicate coordinates and shape, respectively,

of clickable part of an image (not well-supported way to create
image maps).

I tabindex specifies the order in which links (or form controls)

obtain focus. It has values from 0 to 32767.

I target indicates in which window or frame destination

document opens. Values are frame names or _blank.
Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 17 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Linking to e-mail

I use mailto keyword:

<a href="mailto:[email protected]">mail us</a>

I Not recommended, spamers can detect and use it.

I Use e-mail forms or hide the address using JavaScript (scripting

required).

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 18 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Advanced e-mail links

I It is possible to add cc, bcc, subject and body parts of the

message via e-mail link.

I Follow the e-mail address with ? to separate the extra

name/value pairs.

I Name and Value are separated by =, and name/value pairs are

separated by &.

I Use %20 for spaces and %0D%0A for newline characters.

I Recommended to use e-mail forms instead.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 19 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

HTML Tables

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 20 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Introduction

I Table is a grid, made up of rows and columns.

I Row: collection of cells from left to right in one line.

I Column: collection of cells from top to bottom in one line.

I In HTML, table is written row by row.

I Every row must contain equal number of cells, even if they are
empty.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 21 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Basic elements

I <table> is used to create a table.

I <tr> (table row) is used to create a row in a table.

I <td> (table data) is used to create a cell in a row.

I <th> (table heading) is used to create a cell with heading

(usually rendered in bold).

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 22 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Example

<table>
<tr>
<th> row 1, column 1 </th>
<th> row 1, column 2 </th>
<th> row 1, column 3 </th>
</tr>
<tr>
<td> row 2, column 1 </td>
<td> row 2, column 2 </td>
<td> row 2, column 3 </td>
</tr>
</table>

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 23 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Attributes of <table>

I dir specifies text direction ltr (default) or rtl.

I summary provides summary of table’s purpose (helpful for

people with disabilities).

I All other attributes are styling ones and are deprecated, you
should use CSS instead.

I Example: dir="rtl" summary="a timetable"

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 24 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Deprecated attributes of <table>

I align is used to place a table either left (default), right or

center.

I bgcolor specifies background color of the table.

I border specifies the width of borders to all cells.

I cellpadding creates a gap between the edges of a cell and its

contents.

I cellspacing creates a space between the borders of each cell.

I width specifies width of a table either in pixels or percents.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 25 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Deprecated attributes of <table> (ctd.)

I rule indicates which inner borders of the table should be

displayed.

I Example: rule="all"

Value Description
none No inner borders (the default).
groups Displays inner borders between all table groups.
rows Displays horizontal borders between each row.
cols Displays vertical borders between each column.
all Displays all borders.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 26 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Deprecated attributes of <tr>

I align specifies horizontal alignment for all cells in the row

(left (default), right, center or justify).

I bgcolor specifies background color of the particular row.

I valign specifies the vertical alignment for all cells in the row
(top, middle (default), bottom or baseline)

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 27 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Attributes of <td> and <th>

I align, valign and bgcolor override the ones (if) defined in

<table> or <tr>.

I colspan specifies the number of columns of the table a cell

will span across.

I rowspan specifies the number of rows of the table a cell will

span across.

I headers indicates which headers correspond to that cell (used

for disabled people).

I height and width specify dimensions of the cell in pixels or

percents.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 28 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Splitting up tables

I Tables can be split into three parts: header, body and footer.

I <thead>, <tbody> and <tfoot> are used to group elements

for header, body and footer respectively.

I table can contain several <tbody> element, but only one

<thead> and <tfoot> elements.

I In the source code, <thead> and <tfoot> must be defined

before <tbody>.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 29 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Example

<table>
<thead>
<tr> <th>A header</th> </tr>
</thead>
<tfoot>
<tr> <td>A footer</td> </tr>
</tfoot>
<tbody>
<tr> <td>A cell in a body </td> </tr>
</tbody>
<tbody>
<tr> <td>A cell in other body</td> </tr>
</tbody>
</table>

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 30 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Caption of a table

I Use <caption> element to add a caption to the table (usually

shown above the table, centered).

I It should be placed after <table> tag before the first <tr>

element.

I Example
<table>
<caption> A caption of the table. </caption>
<tr> <td> The table data </td> <tr>
</table>

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 31 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Spanning columns and rows

I When spanning columns or rows, you must use less <td>

elements in a row.

I Example
<table>
<caption> Spanning in table. </caption>
<tr> <td colspan="2"> r1c1-2 </td> </tr>
<tr>
<td rowspan="2"> r2-3c1 </td>
<td>r2c2</td>
</tr>
<tr> <td> r3c2 </td> </tr>
</table>

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 32 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Grouping columns

I There is a possibility to group adjacent columns using

<colgroup> and <col> elements.

I Mostly they are used for formatting reasons, but they are not well
supported in recent browsers (use CSS instead).

I <col> can be a child element of <colgroup> and they are

placed after <table> tag before the first <tr> element.

I span attribute is used to specify number of columns in the

group.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 33 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Example

<table>
<colgroup span="3">
<col span="2" />
<col span="1" />
</colgroup>
<tr>
<td> col1 </td>
<td> col2 </td>
<td> col3 </td>
</tr>
</table>

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 34 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Linearization of tables

I Voice readers for disabled people linearize tables.

I They start reading from the first row, reading all cells from left to
right.

I If there is another table in a cell, then the voice readers linearize

the nested table before they continue.

I So you should be careful when designing a complex table.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 35 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Linearization of tables (ctd.)

I There are several recommendations that help during

linearization:

Always use <th> element to indicate a table heading.

Always put headings in the first row and/or the first column.

If table is using cell or row-padding, then use headers attribute

on those and adjacent cells to clearly indicate which heading
applies to them.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 36 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Laboratory Work

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 37 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Exercises

I Create an HTML page describing your timetable. Span the cells

with the same lecture.

I Add some links to refer to other web pages using absolute and
relative URLs.

I Add a menu-bar to your web page to navigate between internal

sections.

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 38 / 39
Uniform Resource Locator Links and Navigation HTML Tables Laboratory Work

Discussion?!

Web Programming I — Week 2 M. Rukhaia International Black Sea University September 3, 2018 39 / 39