Basic HTML

(adapted from DUDENEY, Gavin. The Internet and the Language Learner. Cambridge: C.U.P., 2000 / W3 Schools)

English for Computing.
Professor: Sandro Luis Sousa, PhD.

What is a Webpage?

A simple webpage is a text file which has a few instructions for formatting text (e.g. making bold or italic), adding images and linking to other pages. These instructions are called HTML (Hypertext Markup Language) tags. Most HTML tags are made up of two parts: an opening tag (e.g. <B> = turn bold text on) and a closing tag (</B> = turn bold text off). The most recent version of HMTL is HTML 5.

I. Complete:
1. A synonym for HTML tags are .
2. The two parts of a tag are and .


You can write webpages using any word processing programs or text editor. For the purposes of this activity, we will be using the Windows text editor Notepad.
When you look at a web page in a browser like Google Chrome or Mozilla Firefox you don’t normally see the HTML tags because the browser interprets them as instructions:

HTML text file

My name is <B> Sandro Sousa</B>.

Browser view

My name is Sandro Sousa.

The HTML tag (or instruction) you can see in the example: <B> tells the browser (navigator) to make the following text bold. When you want the text to stop being bold, we put </B> (the ‘/’ character means ‘stop’ or ‘end’).
So, to make a webpage you use a text editor to write the content and the tags which will format it. To view a webpage you use a browser.

 

Below is the basic framework of a webpage

I. Making, Saving and Viewing a Webpage


01. Run Notepad (or similar) and Type in these tags:
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
Welcome to my first webpage
</body>
</html>

02. Now, Click on File and Choose Save As and Call it ‘index.html’ then Click on Save button, making sure you know where you are saving it. Your Notepad window should look like this:


03. Open up this new webpage in your browser. In Google Chrome or similar, explore where you’ve saved your new webpage.
4. Your page should look like this:

07. If you’ve got this far, Congratulations – You’ve made your first webpage!

Now let’s look at what all those tags mean.

HTML tags What do they do?
<HTML> Tells the browser this is the start of a webpage
<HEAD> The head element is a container for metadata (data about data) and is placed between the tag and the tag. Metadata is data about the HTML document. Metadata is not displayed.
<TITLE>My first webpage</TITLE> The title is displayed at the top of the browser
</HEAD> The end of the head
<BODY> The body element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Welcome to my first webpage Some plain text displayed on the page
</BODY> The end of the body
</HTML> Tells the browser this is the end of the webpage

 

08. Go back to your Notepad document and Change the text ‘Welcome to my first webpage’ to ‘English Class and HTML’. Save the changes by Clicking on File and then Save.

09. Now Click on your browser window and Click the Refresh button (Netscape users click on Reload). You should see  the changes displayed instantly.

 

II. Adding an image to a webpage


You put an image on a webpage by using the IMG tag. Images must be either JPG or GIF files. GIFs are usually logos and drawings using a maximum of 256 colors, while JPGs are for high-quality photographs. Here’s how the IMG tag works:

HTML text file Browser view
<IMG SRC= "animbut.gif">


10. Use Google to find free images on the Internet (Use Google para achar imagens grátis na Internet).
11. To save an image from a webpage: Right-click on it with the mouse button and Choose the Save Image As…option. Create a folder and Save the image in it.

REMEMBER: Save it in the  same place as your webpage.

III. Changing text colors and formatting


You can make a text bold, italicized or underline it, as well as using colors to enhance the look of your page.

THESE ARE JUST EXAMPLES. YOU DO NOT NEED TO USE ALL OF THEM IN YOUR PAGE NOW.

HTML text file Browser view/effect
My name is <B>Sandro Sousa</B> My name is Sandro Sousa
I live in <I>Brazil</I> I live in Brazil
I am an <U>English teacher</U> I am an English teacher
My car is <FONT COLOR="green">green</FONT> My car is green
My jacket is <FONT COLOR="Blue">blue</FONT> My jacket is blue
I hate <FONT COLOR="Red">red</FONT>pens I hate red pens
This is <FONT SIZE="3">IMPORTANT</FONT> This is important
This is <FONT SIZE="6">quite important</FONT> This is quite important
<CENTER>this text is centered</CENTER>
This text is centered
<BR> Puts an empty line on the page
<P> Starts a new paragraph
<marquee>English Class</marquee> English Class


IV. Changing document colors


You can decide on a background color for your page and default colors for your text and links by changing the body definition for your website:

  IMPORTANT NOTE: REMEBER TO USE A GOOD BACKGROUIND x BODY TEXT COLOR COMBINATION.

HTML text file Browser effect
<BODY BGCOLOR= "Yellow"> Changes the background of the page to yellow
<BODY BGCOLOR="Red" TEXT="White"> The background color changes to red and normal text is displayed  white
<BODY TEXT="White" link="Red"> A white text with red hyperlinks

 

V. Hexadecimal Color code

If you want, you can use hexadecimal color codes instead of the color name. Just follow the link: http://www.immigration-usa.com/html_colors.html

VI. Adding hypertext links


You can link text and images on your page to:

When someone clicks on one of these links, they will be taken to the new page, site or email program:

HTML text file Browser view/effect
<A HREF="page2.htm">on to page 2</A> On to page 2
When someone clicks on the link it opens another webpage called page2.htm
<A HREF=http://www.ifrn.edu.br">Visit IFRN</A> Visit IFRN
When someone clicks on the link they are taken to the IFRN website
<A HREF="mailto:sandro27101@yahoo.com">send me mail</A> send me email
When someone clicks the link, their email program opens with a new message to me

 

Customizing your Webpage - Personalizando sua Página

III. Write a paragraph in English on your page.

01. Write Welcome to Fulano's Page
02. Use marquee; font 5; bold = negrito).

03. Include:
a) an image;
b ) your first and last names;                                                                     
c ) where you study;
d ) what time you study;
e ) your English teacher's first and last names;
f ) the subjects you like most in your school;
g ) what you like to do in your free time;
h ) a link to Cefet Website;
i ) a link to UFRN Website;
j ) a link to your favorite Website;
k ) a link to your e-mail address.

Vocabulary: Subjects = disciplinas.
                      You like most = que você mais gosta.

 

Example:                               

My name is Sandro Sousa. I study at . . .

 


Home

Unit 01: Creating a Folder
Unit 02: Word Building
Unit 03: Types of Computer
Unit 04: Yahoo Account
Unit 05: Parts of a Computer
Unit 06: Keyboard and Mouse
Unit 07: LANs and WANs
A Game: Hangman
Unit 08: LANs and WANs 02
Unit 09: LANs and WANs 03
Unit 10: Designing Webpages
Unit 11: Reviewing Websites
Ladies and Gentlemen...The Beatles
Test

S@ndroSousa