$24
IS5103 W02 Markup Solved
Exercise 1: Writing HTML
In this exercise you will edit an HTML document in a text editor, preview the changes in a browser, and upload the page to the School server. You may use any text editor and browser of your choice (e.g. Notepad++, Atom, Brackets, VS Code; Chrome, Safari, Firefox).
Setup
1. Download the required source files from: https://studres.cs.st-andrews.ac.uk/IS5103/Lectures/W02-Markup/Exercises/W02-html.zip
2. Extract/uncompress the zip to a folder containing sample.html and 5103.jpg
3. Check the properties of the files to make sure they are not read only
4. Open sample.html in a text editor of your choice. You will see some plain text formatted only with line breaks in suitable places.
5. Open sample.html in a browser of your choice. The text will display as one long, unbroken line of text, because there is no markup in the file to tell the browser how to display it
P a g e 1 | 5
IS5103 W02 Markup 2022/23
Add Markup
Make changes to the HTML content in the text editor and view the changes in a browser.
Select the appropriate mark-up tags to reproduce the sample webpage displayed in Figure 1.
Figure 1: Finished webpage
P a g e 2 | 5
IS5103 W02 Markup 2022/23
6. Create the document outline using html, head, title and body tags.
7. Make use of html mark-up tags to produce the following - headings, paragraphs, a table, an ordered, unordered and definition list, an external hyperlink, an image displayed on the page, character entities and embolden or emphasize words within paragraphs.
8. Remember to save any changes in your html file and open/refresh the page in a browser to view the changes.
Note: You may find the HTML tutorial a useful reference when looking up what tags to use and how to use them https://www.w3schools.com/html/default.asp
Publish your page
Upload the page to a WWW server: SFTP – For example you can use a client such as FileZilla
9. Create a folder nginx_default within your home directory
10. Copy the sample.html and 5103.png files to the nginx_default. If all has gone well, your page is now uploaded to the web server.
View the uploaded page in a browser using a URL:
11. View your uploaded page using the address below - make sure username is your own username:
http://username.host.cs.st-andrews.ac.uk /sample.html
Everything as expected?
P a g e 3 | 5
IS5103 W02 Markup 2022/23
Exercise 2: XHTML
In this exercise you will test your knowledge of XHTML. Examine the markup in Figure 2 and answer the questions below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XHTML and Structure</title>
</head>
<body>
<article>
<header>
<h1><img src="logo.png" alt="home page" width="53" /> XHTML</h1> <hr />
</header>
<section>
<h2>A reformulation of HTML 4 in XML 1.0</h2>
<p>Documents must be well formed. Element and attribute names must be
in lower case. XHTML is case sensitive. For non-empty elements, end tags are required. Attributes must always be quoted.</p>
<p>Use the <code>p</code> element for paragraphs. Don’t use the <code>br</code> element to provide paragraph-like breaks.</p>
<p>Use heading elements for headings: <code>h1</code>, <code>h2</code>,
<code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code>.
Don't use <abbr title="Cascading Style Sheets">CSS</abbr>, the
<code>strong</code> element, or other markup to fake your headings.</p>
<p>Use definition list elements for terms and their corresponding descriptions. Another possible use is for marking up dialogues, with each <code>dt</code> element naming a speaker followed by the <code>dd</code> element containing the speaker's words.</p>
<h3>So why bother with using semantic markup? What’s the big deal?</h3> <ol>
<li>User agents can draw meaning from your structure;</li>
<li>Presentation can be change more easily if content & meaning are separate from it;<li>
<li>Your markup will make sense to anyone else, whether today or later;</li>
</ol>
<p><a href="http://www.w3.org/TR/xhtml1/">More about XHTML</a></p> </section>
</article>
</body>
</html>
Figure 2: Markup
P a g e 4 | 5
IS5103 W02 Markup 2022/23
Markup Elements
1. What is the page title? Explain its significance?
2. Why add Meta elements if they are not displayed on the page?
3. Which text is in the lowest-level header used in the example markup?
4. What does the </li> tag indicate?
5. Does the page contain valid mark-up?
6. What does the <hr /> tag do?
Images and Hyperlinks
1. Identify any images included in the markup.
a) What file format is in use?
b) What is the purpose of the alt tag?
c) Where are the images being stored in this website? Think about folder structure.
2. List the destination of hyperlinks from the sample webpage.
Tables
Examine the markup in Figure 4
1. Draw a rough sketch of the table as it would be presented or rendered by a browser.
2. Extend the mark-up to include a caption and footer for the table.
XHTML
1. Why was XHTML introduced as a web standard?
2. List the important differences between HTML and
XHTML.
3. List the XHTML Syntax Rules.
<table>
<tr>
<td>Language</td> <td>Working Draft</td> <td>Recommendation</td>
</tr>
<tr>
<td>HTML 4.01</td>
<td>1998</td>
<td>1999</td>
</tr>
<tr>
<td>XHTML 1.0</td>
<td>2000</td>
<td>2002</td>
</tr>
<tr>
<td>HTML 5.2</td>
<td>2015</td>
<td>2017</td>
</tr>
</table>
Figure 4: table
Figure 3: HTML table
P a g e 5 | 5
