1. No category

An Introduction to HTML Sujana Jyothi

An Introduction to HTML
Sujana Jyothi
Research Lab1, Callan Building,
Department of Computer Science
[email protected]
End User Computing
Course Outline
• Lectures & Labs
• Monday 1st / 8th 3-4pm
• Wednesday 3rd / 10th 3-5pm
• Thursday 4th / 11th 3-4pm
• Assignment due 26th February 2010 by 5PM.
End User Computing
Module Details
Learning Outcome:
By the end of this module you will be able to create a
webpage.
You will learn how a webpage is structured using HTML
and how a webpage is styled using CSS.
End User Computing
HTML
• HTML is a language used to define how information is
structured in a webpage
• HTML stands for HyperText Markup Language
•HyperText just stands for the text that gets sent
around the net
•Markup Language just means that the text is
surrounded by tags which tell us what type of
information is held within the tags
End User Computing
What are Tags?
•Tags are blocks that tell your browser how the
information is to be structured.
•There are a lot of them but we'll be only covering
some of the more useful ones.
• Text is surrounded by angle brackets to designate a
tag <tag>Text</tag>
• An important thing to remember is that tags must be
opened and closed.
End User Computing
HTML Files
• If you open an HTML file in a text editor you will see
text surrounded by tags
• A browser opens this file and decides how to structure
the document based on these tags so their order and
placement is critical.
• The good news is that it is quite easy to build a
simple webpage with knowledge of only a few tags.
End User Computing
Lets try and make a webpage
<html>
<head>
The
<title>Course on HTML</title>
webpage is
separated into
</head>
tags and text.
<body>
<h1>HTML Course</h1>
<p>
This is the course website for the HTML
course.
All the slides, laboratory sheets and
material will be here along with course details.
</p>
</body>
</html>
End User Computing
Lets try and make a webpage
<html>
<head>
Every HTML file
<title>Course on HTML</title>
begins and ends
with HTML
</head>
tags
<body>
<h1>HTML Course</h1>
<p>
This is the course website for the HTML
course.
All the slides, laboratory sheets and
material will be here along with course details.
</p>
</body>
</html>
End User Computing
Lets try and make a webpage
Next we have the head
<html>
and body tags. The head
<head>
<title>Course on HTML</title> section only contains
information about the
</head>
page, while within the
<body>
Body section is the
<h1>HTML Course</h1>
actual information.
<p>
This is the course website for the HTML
course.
All the slides, laboratory sheets and
material will be here along with course details.
</p>
</body>
</html>
End User Computing
Lets try and make a webpage
The title of the webpage
<html>
goes inside the title tag.
<head>
<title>Course on HTML</title> This is then displayed
in the title bar of
</head>
your browser. This is the
<body>
bar at the very top of
<h1>HTML Course</h1>
the browser.
<p>
This is the course website for the HTML
course.
All the slides, laboratory sheets and
material will be here along with course details.
</p>
</body>
</html>
End User Computing
Lets try and make a webpage
<html>
h1 means heading one.
There are six header tags,
<head>
<title>Course on HTML</title>and like in Word different
headers give you different
</head>
font sizes and styles.
<body>
<h1>HTML Course</h1>
<p>
This is the course website for the HTML
course.
p means paragraph and tells the browser
to put the text enclosed into a paragraph
All the slides, laboratory sheets and
material will be here along with course details.
</p>
</body>
</html>
End User Computing
Lets try and make a webpage
Ok the first step in making this webpage is to open up
notepad and to put the html text into it.
Let’s make a web-page together now….
End User Computing
How to make a webpage
• The first step is open up notepad
(Click on Start->Run and type in notepad).
• Then you type in your HTML, the tags and the text we
have just gone through and save it to a file (page.html).
• Once you've finished with the page and saved, just
double click on the file and it will open up inside your
browser.
End User Computing 2008
What it looks like
Once its saved we open it up with a browser
(Firefox or Internet Explorer)
Did you notice that the new lines put into notepad did not
translate to new lines on the displayed page?
To put in new lines you need to separate your sections
into paragraphs using <p> … </p> tags.
End User Computing
More tags
• HTML has lots of tags allowing you to structure your
webpage in any number of different ways. We will only
be using a subset of these tags.
• There are six header tags:
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
End User Computing
More tags
•<b>…</b> puts text in bold
•<i>…</i> puts text in italics
•<u>…</u> underlines text
•<ul>…</ul> is an unordered list
• <ol>….</ol> is an ordered list
•<li>….</li> is a list item, i.e. like a bullet point.
• <hr/> inserts a horizontal line across a page.
• <br/> inserts a line break
End User Computing
A reminder
• Remember we said that HTML is used to structure a
document not to style a webpage.
• We will deal with how to style a webpage in the next
lecture.
End User Computing
Tag attributes
• An attribute is extra information included in the tag.
• These occur for many reasons such as:
• in the image tag where they are used to tell the
browser where the image is
• with a link where they are used to tell the browser
where the link should take the user.
• Example:
• <a href=”http://www.nuim.ie”>NUI Maynooth</a>
Where the link will take
the user who clicks it.
End User Computing
The text that will appear
as the link on the page
Hyperlinks
• On the last page a hyperlink was shown
• Links are encapsulated between <a> tags called
anchors.
• They are used to connect web pages together. So a
web site is a collection of web pages which are
connected with hyperlinks.
• The most important part of the hyperlink is the href
attribute.
End User Computing
Images
• The tag for images is <img>, it should always be used
with two attributes:
• the source attribute stating where the image is located
• the alternative attribute is used to describe the image.
• <img src=”nuim.jpg” alt=”Pic of Maynooth Logo” />
A description of
the image should
be included (one
very good reason
is for
accessibility)
nuim.jpg
End User Computing
Image does
not require a
closing tag.
Finishing Up
• Most important HTML tags… but there are lots more
• We have yet to look at how to style a webpage (different font
sizes, different font colours...)
•Incorporating the new tags, the links and images, take a look at
the new webpage for the course. page3.html
End User Computing
Next time
• Wednesdays we're going to be doing an introduction to CSS
(Cascading-Style-Sheets) where you'll learn how to style a
webpage.
• Then you'll get your first chance to create your own webpage and
style it.
End User Computing

 Download  Report

Paperzz.com

Your Paperzz

© Copyright 2026 Paperzz