Lecture 1B - Introduction To HTML (Part 1)

FC
L
E
C
T Introduction to
U
R
HTML
E
Fundamentals of Computing
Polytechnic Foundation Programme
1B 2022/23, Semester 2
Official (Closed) - Non Sensitive
Objectives
At the end of this lecture, you will

• Learn what is HTML
• Understand a simple HTML Document
• Use basic HTML tags to format a document
• Create List and Links in HTML document
Polytechnic Foundation Programme, Lecture 1B

FC AY22/23, Sem 2 Slide 2 Last updated 05/09/22
Topics
 What is HTML?
 Structure of an HTML document
 A simple HTML document
 Create a web page with HTML Tags
 Create List and Links in HTML document

What is HTML?
 HTML [ HyperText Markup Language ]
• The standard markup language for creating Web pages.
• Describes the structure of a Web page and how it is to be rendered
or displayed.
• Consists of a series of elements, tell the browser how to display the
content.
• It’s called a markup language, not a programming language.
 Web browsers can read HTML files and render them into
visible or audible web pages.
• It is relatively easy to learn.

What is HTML?
HTML stands for HyperText Markup Language
 HyperText
• The method by which we move around on the web — by
clicking on special text called hyperlinks which bring you
to the next page.
• Hyper means not linear — you can go to any web site on
the Internet by clicking on links, there is no set order to do
things in.
 Markup
• What HTML tags do to the text. For example the use of a
specific Tag to mark up a text as italicised text.
 Language Polytechnic Foundation Programme, Lecture 1B
Structure of an HTML Document

 An HTML document consists of two basic parts: "head" & "body".
 Head element starts with the <head> tag and ends with the </head>.
Body element starts with the <body> tag and ends with the </body>.
Both the head and body elements must be enclosed in
<html>....</html>.
<html>
<head>
. . .
</head>
<body>
. . .
</body>
</html>
 The head provides information about the document itself. The body
contains the information that people see in their browsers.
A simple HTML document
Save the file with the .HTML

extension and open it in browser.
This is what you will see:
Every file with .html extension is usually opened by a web browser when you double-click
on it.
Example Explained
 <!DOCTYPE html> declaration defines that this
document is an HTML5 document
 Text between <html> and </html> describes an
HTML document
 Text between <head> and </head> provides
information about the document
 Text between <title> and </title> provides a title
for the document
 Text between <body> and </body> describes
the visible page content
 Text between <h1> and </h1> describes a large
heading
 Text between <p> and </p> describes a
paragraph
Ref: https://www.w3schools.com/html/html_intro.asp

HTML Elements
 An HTML element is defined by a start tag, some content, and an end
tag:
<tagname>content goes here...</tagname>
Examples
<h1>My First Heading</h1>
<p>My first paragraph</p>
 The 1st tag in a pair is the start tag <h1>, the 2nd tag is the end tag
</h1>. The end tag has a / before the tag name.
 Start and end tags are also called opening tags and closing tags.
 Some HTML elements have no content (like the <br> element which
defines a line break). These elements are called empty elements.
Empty elements do not have an end tag!

HTML Elements
 HTML elements can be nested (elements can contain other
elements). Make sure you close the tags properly.
 Example:
Correctly nested
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
Incorrectly nested
<body>
<h1>My First Heading
</body>
</h1>
<p>My first paragraph
</p>

The Basics: HTML Tags

 Once you understand what each tag means, creating your
HTML document is easy!
 Refer to http://www.w3schools.com/tags/default.asp for a

full list of HTML tags.
 You may learn other tags by viewing source code from

already existing pages (right mouse click on a web page
and choose "View Page Source").

HTML Tag: Heading <h#>

 Heading tags are applied to text and are good way to make different
sections in your document
 Displayed in various sizes: <h1> <h2> <h3> <h4> <h5> <h6>
Source code Output (browser)

HTML Tag: Paragraph <p> & Line Break <br>

 The <p> tag defines a paragraph of text, browsers automatically add a
single blank line before and after each <p> element.
 The <br> tag forces the browser to break to the next line
• Paragraphs cause space between lines
• Line breaks have no space between lines
space between paragraphs

no space
between
lines

HTML Tag: Horizontal Rule <hr>

 Method for breaking up space
 The <hr> tag causes a line to appear across the Web page that separates
the content
 Default width is the entire page
• Width and thickness can be adjusted by using attributes or css

HTML Tag: Lists <li> with <ol> & <ul>

 <li> tag defines a list item.
 It is used inside ordered lists (<ol>) and unordered lists (<ul>).
 Can set the starting number of ordered list and the bullet type for
unordered list by using attributes or css.

HTML Tag: Definition List <dl>

 <dl> tag defines a list of definitions/descriptions.
 It is used with the <dd> and <dt> tags.
 The <dl> tag creates a list, the <dt> tag specifies the term, and the
<dd> tag specifies the description of the term.

HTML Tag: Comments 

 The comment tag is used to insert comments in the source code.
 Comments are not displayed in the browsers.
 You can use comments to explain your code, which can help you when
you edit the source code at a later date. This is especially useful if you
have a lot of code.
• E.g. <! -- This section displays a definition list -->

HTML Tag: <meta> tag

 The <meta> tag provides information about an HTML document.
 <meta> tags always go inside the <head> element.
 Typically used to specify character set, page description, keywords,
author of the document, and viewport settings.
 It will not be displayed on the page.

Adding Links to a Web Page

 Hyperlinks allow you to create a network of documents
• When you click on a link it can take you to another page of the
web document or web site
 Links make use of the ANCHOR tag <a>
 All text enclosed in the anchor tag will appear as a hyperlink
 Inside the link you specify what page to link to:
<a href = "somewebpage.com">Some website</a>
 A linked page is normally displayed in the current browser window,
unless you specify another target.

Adding Links to a Web Page

Adding Links to a Section

 You can also link to other sections of the same web page.
• Assign a name to the document section that you want to link to
<a name="SectionName">Section to link to</a>
• In <a> link, specify the name of section to link:

<a href="#SectionName">Link to the section
called SectionName</a>
Note: use valid identifier for the section name – no blank space

Activity: Adding Links to a Section

Try the following HTML code:
Open in browser. Minimize the browser so that you will be able to see how
it moves from one section to another.
Adding Links: Email

 You can also hyperlink to an email address by using the <a> tag.
<a href="mailto:someone@np.edu.sg">Send me mail</a>
• In the web document, clicking on the words "Send me mail" will
automatically open an email program in which you can send email to
someone@np.edu.sg

HTML Images
 Images are useful for making web pages more attractive
• Avoid too much text
• Avoid too many graphics
 Use <img> tag to add image to the document:
<img src="myPicture.jpg">
The src attribute defines the image to be displayed.
 Use the alt attribute to provide a text alternative. When the image is not
found
<img src="myPicture.jpg" alt="My Picture">
 Images can be placed in <a> tags to form image links.
<a href="http://www.np.edu.sg">
<img src="nplogo.gif" alt="Ngee Ann Poly"></a>

Location of the image file

 The src attribute provides the relative location of the image file to the
location of the HTML document.
• If the file is in same folder (as the HTML document):
<img src="myPicture.jpg">
• If the file is in a subfolder called ‘Images’ within current HTML folder:
<img src="Images/myPicture.jpg">
• If the file is in another folder called ‘Images’ at the same level as the
current HTML folder:
<img src="../Images/myPicture.jpg">
• If the file is located in other websites, e.g. in the NP website Images
folder :
<img src="http://www.np.edu.sg/Images/myPicture.jpg">

Activities
Question 1
a. The tag that marks the beginning of a paragraph is .
b. The tag that marks the beginning of the highest-level heading is
.
c. The tag that marks the beginning of text that appears in the title
bar of a Web browser is .
d. The tag that creates a line break is .
e. The tag that marks the beginning of page contents that are visible
in the main window of a Web browser is .
f. The tag that marks the beginning of a Web page is .
g. The tag that marks the beginning of code that does not appear in
the main browser window is .
Activities
Question 2
Write code that displays the title "School of InfoComm Technology" as

shown in the browser above.
Question 3
Write the HTML codes to link a web page to www.google.com.sg

Activities
Question 4
Write the HTML codes for School of ICT web page to
display the following courses in the home page.
Question 5
Write the HTML codes to create the following list:

Reading Reference
 http://www.w3schools.com/html/html_intro.asp
 http://www.htmlprimer.com
 http://www.w3schools.com/tags/default.asp

Summary
In this lecture you have learned:

• Basic HTML tags to format a document
• Eg. <h#> <p> <br> <hr> <ol> <ul>
• Create a local HTML document viewable with a browser
• Other useful HTML tags
<a href = "somewebpage.com">click me</a>
<a name = "SectionName">click here</a>
<a href = "mailto:someone@np.edu.sg">email me</a>

Lecture 1B - Introduction To HTML (Part 1)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 1B - Introduction To HTML (Part 1)

Uploaded by

Copyright:

Available Formats

FC

At the end of this lecture, you will

Polytechnic Foundation Programme, Lecture 1B

Polytechnic Foundation Programme, Lecture 1B

Polytechnic Foundation Programme, Lecture 1B

Structure of an HTML Document

A simple HTML document

Save the file with the .HTML

Polytechnic Foundation Programme, Lecture 1B

Polytechnic Foundation Programme, Lecture 1B

Polytechnic Foundation Programme, Lecture 1B

The Basics: HTML Tags

 Refer to http://www.w3schools.com/tags/default.asp for a

 You may learn other tags by viewing source code from

Polytechnic Foundation Programme, Lecture 1B

HTML Tag: Heading <h#>

Polytechnic Foundation Programme, Lecture 1B

HTML Tag: Paragraph <p> & Line Break <br>

space between paragraphs

Polytechnic Foundation Programme, Lecture 1B

HTML Tag: Horizontal Rule <hr>

Polytechnic Foundation Programme, Lecture 1B

HTML Tag: Lists <li> with <ol> & <ul>

Polytechnic Foundation Programme, Lecture 1B

HTML Tag: Definition List <dl>

Polytechnic Foundation Programme, Lecture 1B

HTML Tag: Comments

Source code Output (browser)

Polytechnic Foundation Programme, Lecture 1B

HTML Tag: <meta> tag

Polytechnic Foundation Programme, Lecture 1B

Adding Links to a Web Page

Polytechnic Foundation Programme, Lecture 1B

Adding Links to a Web Page

Source code Output (browser)

Polytechnic Foundation Programme, Lecture 1B

Adding Links to a Section

• In <a> link, specify the name of section to link:

Polytechnic Foundation Programme, Lecture 1B

Activity: Adding Links to a Section

Adding Links: Email

Polytechnic Foundation Programme, Lecture 1B

Polytechnic Foundation Programme, Lecture 1B

Location of the image file

Polytechnic Foundation Programme, Lecture 1B

Write code that displays the title "School of InfoComm Technology" as

Polytechnic Foundation Programme, Lecture 1B

Polytechnic Foundation Programme, Lecture 1B

Polytechnic Foundation Programme, Lecture 1B

In this lecture you have learned:

Polytechnic Foundation Programme, Lecture 1B

You might also like