Note: It is assumed you have read and completed the content within the preface section of this course before starting Week 1.
Uniform Resource Locator (URL)
protocol://servername.domain/directory/subdirectory/file.type
example:
http://www.techprof.ca/courses/INFT1206/Content/Week01/index.html
Data transfer protocols are standardized formats used to package data for transmission/transference between two devices over a network
The Internet communicates using numerous data transfer protocols, some of the most often used are:
After the :// of the data transfer protocol until the next / is the host name (or server name) of the computer that you are visiting. The last several characters after the last period indicates the type of institute or organization displaying the information.
Some of the original top-level domains include:
NOTE: part of the original every recognized country has their own two-character domain identifier
e.g. Canada - .ca, United Kingdom - .uk, Germany - .de …
Some other popular domains (not originally top-level) are: .biz .info .online .news .tv .movie
Once you are to the web server, you must navigate to the proper file location of the resource requested. This is similar to dialing a phone number for a large company/organization and then having to dial a phone extension to get a specific person.
There are several default document names that are used. These very from server to server and technology to technology, but some are:
Default documents are the ones that are shown when the URL path ends on a directory name.
NOTE: you can map any file name as a default that is opened when no file.type is given explicitly, it makes your web site more portable to leave it as the default index.html
Provides every part of a URL and used when you are referring to files/webpages on a remote server (i.e. not the server the file currently resides on).
Analogy: Giving an exact mailing address
that works no matter where you are: street
address, city, province, postal code,
country
Example: http://www.techprof.ca/courses/INFT1206/Content/Week01/index.html
If you are on a server other than the Google server this will still access the Google site
Provides a path relative to the current position of the file and used when you are referring to files/webpages on the same server (either in the current directory or a different one).
Analogy: giving someone directions relative to where you
ar currently located: two block east, take a left, it is the
second building on your right
Example: ../pages/example.html
Relative to the current page, go up into the parent directory (../), from there go into the directory named “pages” and access a file named “test.html”.
Other Examples:
/ - so /index.html will show the default document in the root folder../ - so ./index.html will show the default document in the current folder.../ - so ../index.html will show the default document in the folder directly above the current one (if it is accessible).images/image.jpg will show the image.jpg file in the images folder. The images folder will be contained within the current folder.Tables are a very important part of traditional web pages and remain important today, although not used anywhere near as much as in the past, they are still used for many things in HTML5.
The basic tags used in tables include:
<table> - the main wrapping tag<caption> - a tag that allows a caption/title row to be included<thead> - a tag to separate the header section of the table from the body<tbody> - a tag to separate the header section of the table from the body<tr> - a tag to indicate rows that are made up of columns<th> - a tag to indicate a column cell, in a row, that is part of the header<td> - a tag to indicate a column cell, in a row, that is part of the bodyThe traditional tag layout of a table with a header row, 3 rows, and 4 columns might look like this:
<table>
<caption>Caption here</caption>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
<td>3,4</td>
</tr>
</tbody>
</table>
Which results in something like this:
| Col1 | Col2 | Col3 | Col4 |
|---|---|---|---|
| 1,1 | 1,2 | 1,3 | 1,4 |
| 2,1 | 2,2 | 2,3 | 2,4 |
| 3,1 | 3,2 | 3,3 | 3,4 |
Noting that each row is made up of cells representing columns and each row should have an equal amount of columns to keep the width of the table consistent.
Each and every cell in the table can be merged into others to make a variety of table layouts. This is accomplished by using the colspan or rowspan attributes.
colspan allows you to merge cells horizontally across columns within the same row.
For instance:
<table>
<tbody>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td colspan="2">2,2 and 2,3</td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
<td>3,4</td>
</tr>
</tbody>
</table>
results in:
| 1,1 | 1,2 | 1,3 | 1,4 |
| 2,1 | 2,2 and 2,3 | 2,4 | |
| 3,1 | 3,2 | 3,3 | 3,4 |
where the center 2 cells are merged into one.
It is very important to note in the code that the middle row now only include 3 <td> tags compared to 4 in the other rows.
If you wanted to include a row in the middle of the table that spanned side to side (like the reading week row on the main page for this course) you can span all the columns, but then note there would only be one column in that row.
<table>
<tbody>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td colspan="4">2,1 through 2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
<td>3,4</td>
</tr>
</tbody>
</table>
resulting in:
| 1,1 | 1,2 | 1,3 | 1,4 |
| 2,1 through 2,4 | |||
| 3,1 | 3,2 | 3,3 | 3,4 |
Again, review the middle <tr> row and note that there is only one <td> column coded. (i.e. the number of columns total for the table must be the same in each row, whether that be the number of td tags or the number of td tags plus any colspan attributes.
Laying out web pages has changed a couple times throughout the history of HTML. We will briefly cover each part of this. It is important that learners learn all 3 ways as there are millions of web pages out there made in each method and maintaining those pages is a crucial function of all developers.
In early days of web development, tables were used to layout pages, and even today are used to layout small parts of pages sometimes. The ability to use tables to layout a page is one thing that is important to understand, if you are going to maintain older web pages and deeply understand the extent to which tables can be implemented.
A tradition webpage may look something like this:
| Image Type Banner header | ||
|---|---|---|
| menu item 1 | menu item 2 | menu item 3 | ||
| Left navigation | Main Content |
Right Side - news feed for example |
| Footer Information | ||
This was achieved through a semi-complicated set of table related tags:
<table>
<thead>
<tr>
<th colspan="3">Image Type Banner header</th>
</tr>
<tr>
<th colspan="3"><
a href="" >menu item 1</a> | <
a href="" >menu item 2</a> | <
a href="" >menu item 3</a></th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top; width: 15%;">Left navigation</td>
<td style="vertical-align: top; width: 70%;">Main Content</td>
<td style="vertical-align: top; width: 15%;">Right Side - news feed for example</td>
</tr>
<tr>
<td colspan="3">Footer Information</td>
</tr>
</tbody>
</table>
In this method of laying out pages, developers had to be aware of the content that would be placed inside the tables, as any content that stretched the cells of the table, would instantly mess with the widths of the columns as shown above resulting in almost unpredictable wrapping issues that would make a page look very unprofessional very quickly.
Also table layout depends on the screen resolution highly and almost always has difficulties displaying the content as intended when the resolution changes. With the onset of higher resolution monitors, tablets, and the mobile market, many table based layouts just don't work well with high or low resolutions resulting in many users having a sub-optimal experience.
A full page example can be viewed here. Review the page source to view the code.
div tags.The second iteration of page layout heavily relies on div tags and CSS (cascading Style Sheets) to layout the pages. This would consist of the nesting of div tags to somewhat mirror a table layout but using CSS and order to layout the various sections of the page.
<style>
#MainLeft_Container {
width: 15%;
float: left;
padding: 0;
margin: 0;
background-color: green;
vertical-align: top;
}
#MainBody_Container {
width: 70%;
float: left;
padding: 0;
background-color: white;
color: black;
vertical-align: top;
}
#MainRight_Container {
width: 15%;
float: left;
padding: 0;
background-color: #888;
vertical-align: top;
}
</style>
<div id="Outside_Container">
<!-- Header -->
<div id="Header_Container">
Source Banner Image
<div id="MainMenu_Container">
a href="" >menu item 1</a> | <
a href="" >menu item 2</a> | <
a href="" >menu item 3</a></th>
</div>
</div>
<!-- Body -->
<div id="Main_Container">
<div id="MainLeft_Container">Left column</div>
<div id="MainBody_Container">Main Content</div>
<div id="MainRight_Container">News Feed</div>
</div>
<!-- Footer -->
<div id="Footer_Container">Footer Here</div>
</div>
Resulting in something like (when combined with css which is covered in Week 3):
A separate page example can be viewed here. View the page source to review the code.
The current protocol of HTML5 changes the way we do layout by including many new tags that are now usable. These new tags do introduce some default styles, but essentially replace the previous div method with specific tags, rather than repeated div tags with differing id or class attributes.
<nav>
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
</ul>
</nav>
<header>
Header Info Here
</header>
<section>
Section Content Here
</section>
<article>
Article Content
</article>
<aside>
Aside Content
</aside>
<footer>
Footer Content
</footer>
In this layout, each section will fall directly under the one above, so css will be used to place the various container tags in the right positions/layout.
An example HTML5 layout page can be viewed here. View the page source to view the source code.
The following page at developer.com was used as a reference.