Due date: Monday, March 22, 2021.
In this lab we well learn about HTML and create a web page. The result of the lab is the web page. You do not need to save the commands you've executed in this lab.
Note. You cannot complete this lab entirely from a home Linux computer. You need to connect to one of our lab machines and create the directory and the file there in your account. It will not work otherwise.
Open a terminal and create a folder called public_html in your home directory, directly at the top level with the command
mkdir public_html
This folder will be recognized by our web server as the entry point for the account http://www.cs.iusb.edu/~username.
Add the permissions for everyone to be able to execute this directory with
chmod ugo+x public_html
We want to make sure that your home directory also has execute permissions for everyone, which is needed for your web page to work.
Execute the command
chmod ugo+x .".
If the permissions were there already, this should not change anything.
Go to your public_html folder. Using your favorite editor, open a file named index.html in editing mode (this should be a new file).
This is the most common name for the file that the web server returns when no file name is given in the address. It's the default file in every sub-directory of public_html. Other servers might use a different name, such as homepage.html.
Insert a pair of starting/ending html tags in this file (starting: <html> and ending: </html>).
Everything else you write in this file should be between the starting html tag and the ending html tag. This tag tells the browser what kind of file this is.
Add a pair of starting/ending head tags (<head> and </head>) to define the head section of your file. In between these, add a title (inside <title> ... </title>) stating this as your homepage.
The content of this title will appear on the tab's label in the browser.
After that, still inside the head section, add a meta tag with an argument name equal to "Author" and an argument content equal to your name as a string between quotes. The tag should look something like this:
<meta name="Author" content="Bobby Lee">
Meta tags are useful for several things, such as helping search engines locate your page when someone searches for your name.
Bellow the ending head tag add a pair of body tags (<body> ... </body>).
The rest of your web page will be placed between them. This is what is displayed on the page in the browser.
Suspend your editor (ctrl-z) to go back to the terminal (or just click on the terminal if you're working in an X11 environment). Here change the permission to the file index.html to make it readable by everyone:
chmod ugo+r index.html
The combination of permissions means that everyone will be able to read your file but not see the list of files in the directory.
Go back to the editor with the
command fg. Open a web browser locally on the computer you're
working on. This can be on Windows or any other OS. Copy the address
into the browser:
http://www.cs.iusb.edu/~username
where you
replace username with your actual username. Refresh this page
from time to time through the rest of the lab to see the progress of
what you are doing.
For now the page should appear blank except for the tag label at the top that should display the content of the title tag in the head section. More content will appear as we add it.
Let's add a title to be displayed on your page that is a centered and in a heading 1 or 2 style. The content should be similar to the title from the above (that you wrote in the head section).
For this, inside the body of the page, type the same title text as before and enclose it in a combination of <h1> (or h2) and <center> tags. Close both of these tags at the end of the title in reverse order from the order in which you started them.
You must always close the most recently opened tag (if it needs closing) before closing a previous tag.
Add a horizontal line below the title with the tag <hr> and then a line break after it with <br>.
Note that any sequence of whitespaces (space, tabs, new lines) will be converted into a single space, so you can space out your tags from each other any way you want.
Write a sentence below the title saying that the following is a list of courses you are taking this semester. Add a couple of line breaks after it (<br>).
Let's create a table listing these courses.
Start a table with the tag <table>. Add an argument to this tag that sets the border of the tag to 1 (border="1").
A table is composed of rows. Every row is composed of several cells. You must mark each row by tags and in each row, each cell by tags. The row and cell tags don't need a closing tag (but you can add one if you want). However, the table itself needs a closing tag.
Start a row with the tag <tr>. Create 3 cells in this row. Each of them must start with the tag <td>. Each of them must contain text in bold, meaning enclosed in a pair of tags <b> and </b>. The first one should say Course, the second one Time and the third one Classroom.
For example the first cell should look like this:
<td><b>Course</b>
This first row is a title row, marking what each column contains.
Add a row for each of the courses you are taking this semester in a similar way, without displaying the text in bold.
You should add at least two such rows. The course information itself doesn't need to be accurate, we're interested in the HTML content at the moment.
End the table with a tag </table>.
Let's add a bulleted list to the page.
Write a sentence below the table saying that the following is a list of some of your favorite links. Insert a paragraph tag (<p>) at the beginning of this sentence. Add a line break after it.
A list is composed of several list items, each of them marked by a tag. Just like the table cells, these tags don't need to be closed, but the list itself does need a closing tag. The list tag ul stands for unordered list. As opposed to it, an ordered list will have each item marked by a number instead of a bullet.
Start a list with the tag <ul>. Add a couple of list items marked by the tag <li>.
Each of these list items will contain a link. You can use any links you want as long as they are "safe for work".
For each list item, to create the link, start with <a href= followed by the address (http://...) in double quotes. The a href tag can be closed here with >, followed by the linked text, and the followed by the end tag </a>.
For example, an entire list item could look like this:
<li><a href="url">Text describing the link</a>
End the list with </ul>, then add another horizontal rule <hr> after it.
Copy one of the images from the previous homeworks or labs into your public_html folder, or upload one of your own. From the terminal (you may have to suspend the editor), verify that the image is indeed in your directory public_html, and change the permissions to this image to make it readable for everybody.
We will now embed the image in our page.
Come back to your index.html file in the editor.
We will add a tag to display the image on the page below the linked list.
To do this, write a tag that starts with <img src= followed by the name of the image in quotes, after which the img tag can be closed with >. For example, if my image is called cat.jpg and is in the same folder as index.html, the tag would appear as:
<img src="cat.jpg">
See the source of this example (file example.html) for a tag inserting an image in the file. There is also one in the PowerPoint slides. Note that in many browsers, if you right-click on a page, you can choose "View Page Source" to see the html content of what you are looking at.
Add a line break after the image tag. Below the image add the text "Figure 1." in bold, followed by an explanation of what the image is. Center both the image and the caption below.
Refreshing the browser displaying the page should show all the content created so far. If the image is too large, you can add an argument to its tag with the content width="300" or whatever number makes it look ok. A similar one exists for the height, but it's not a good idea to use both at the same time (the image might end up distorted).
Verify that the address and all the links/content of the file are working fine. This is the end of the lab.
Upload: to Canvas, in Lab 8, in Assignments, the URL (http address) of the file you created. It's the address you used in the browser where you viewed the page. If you want to make sure that I can see the file, you can also upload the file index.html itself, but it is not needed.