Scribd
Upload
6 views3 pages

TB2 Week 1 Worksheet 1 Basic Structure and Elements

This document outlines a workshop for creating basic HTML structures and elements using a text editor and browser. It includes tasks for creating a simple HTML document, a blank template, an 'About Me' page, viewing existing HTML source, and validating markup. Each task provides step-by-step instructions for practicing HTML coding skills.

Uploaded by

indiasking690
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views3 pages

TB2 Week 1 Worksheet 1 Basic Structure and Elements

This document outlines a workshop for creating basic HTML structures and elements using a text editor and browser. It includes tasks for creating a simple HTML document, a blank template, an 'About Me' page, viewing existing HTML source, and validating markup. Each task provides step-by-step instructions for practicing HTML coding skills.

Uploaded by

indiasking690
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML Workshop 1 – Basic Structure and Elements

For this laboratory you will need a basic text editor (NOT Microsoft Word) and a browser. In the
laboratories, we recommend you use Notepad ++ and Firefox. If you are using your own machine,
you can download these for free:

Task 1: Creating a basic HTML document

Open a new blank text document in Notepad ++ and type in the following lines of HTML, spacing the
elements on separate lines.

<html>
<head>
<title>My first HTML document</title>
</head>
<body>
<h1>HTML</h1>
<p>Hello! This demonstrates the <em>basic</em>
structure of an HTML document.</p>
</body>
</html>

Save the file using the name: lab1task1.html

Note that the .html extension is important (some Operating Systems use this to determine which
application can be used to open which file). Start Firefox and use File-Open File from the menu to
select your HTML page. It should be displayed (rendered) in the window. If the content fails to
appear, check your HTML code and then reload.

Task 2: Creating a blank template

Take the file you created in task 1 and use the save as command to create a copy called
template.html. It is useful to have a blank template with the basic elements in place, which can then
be added to as required. Change the contents of the file to look like this:

<html>
<head>
<!--
Created by:
Date:
-->
<title>title</title>
</head>
<body>

</body>
</html>
Save your work.

1
Task 3: Creating an About Me page

Take the template file you created in task 2 and use the text editors save as command to create a
copy called aboutme.html.

Many blogs have an About Me page, which provides a mini profile of the person writing the blog.
This task requires you to write a similar page.

Lay the following out in the page, using headings, paragraphs and tables. Use <em> and <strong>
elements where appropriate to highlight parts of the text.

Name

Contact email

About me

In this section write a brief paragraph about where you are from, what your hobbies are and other
interesting facts (if there are any!)

My course

Write down the name of your course

Modules you are studying in the first year

Show the modules you are taking in a table, with the name of the module leader in a separate
column.

Save your work.

Use a browser to check that the mark-up displays correctly.

Task 4: Looking at an existing page’s HTML source

The source markup of a published page can be seen by using Firefox’s View-Page Source command
(a similar command is available in Internet Explorer).

Use a browser to navigate to the HMTL page of the W3C, the organisation which co-ordinates the
development of the HTML standard:-

http://www.w3.org/html/

Use the View-Page Source command to see the markup that is used to create the page. There will
be a lot of markup which we have not seen yet, but you should be able to make out a head and body
section, with a title, headings and paragraphs present.

2
Task 5: Validating and correcting markup

Open the poorly formatted page poormarkup.html on Canvas. Use a right mouse click and select
Save link as to download the file.

The W3C runs a free validator which checks the syntax of HTML documents, available at
http://validator.w3.org/

Select Validate by File Upload and browse for the file poormarkup.html file. Then click on the Check
button. The validator will list the errors.

Read the error messages


and use a text editor to
correct the HTML.

Keep saving and revalidating


the page until you have
removed as many errors as
possible.

You might also like