Week 3:

WBDV111
COMPUTER STUDIES
OUR LADY OF FATIMA UNIVERSITY – Q.C
 Learning Outcomes
• Create a well-formed website
according to W3C standards.
• Appreciate the use of HTML tags and
CSS properties.
• Evaluate other websites.
WEB TOOLS
 Notepad Web Browser
• The text editor you will be using • The Web browser you will be
to manually encode the Web using to view the Web page files.
page files.
 Using Notepad++ is a text editor. This software has helpful
features such as syntax highlighting when working with
programming, scripting, and markup languages.

The
Notepad++
User Interface
Notepad++ also
supports keyboard
shortcuts.
HTML BASICS
 HTML
• HTML stands for hypertext markup language. It is
used to create web pages and is responsible for their
content and structure.
 Let’s find out the functions of the tags used in
the example.
Observe the following HTML
code for a basic document.
The document will be
structured as:
Try creating your first document.

OUTPUT
Metadata and Comments
Structuring Text Content in HTML
Headings

This is how it should look in the browser

Paragraphs

This is how it should

look in the browser
Line Breaks

This is how it should

look in the browser
Preformatted Text
Horizontal Rule

empty tag: <hr/>

Text Formatting

non-breaking space line break

&nbsp <br/>
LISTS
Lists - are a great way to communicate related information efficiently.
Types of Lists

1. Ordered List

This is how it should look

in the browser:
2. Unordered List

This is how it should look

in the browser:
Nesting List

This is how it should look

in the browser:
3. Description/Definition List

This is how it should look

in the browser:
LINKS
To create hyperlinks in an HTML document, we
need to use the anchor or <a\> tag and its href
attribute. The text that appears within the <a\>
tag is called the anchor text.

This is how it should look

in the browser:
 You can link to a section within the same
page. To do this, we need to define a
section using the id attribute and use the
# in the href attribute of the link.

This is how it should look

in the browser:
THANK YOU FOR
LISTENING!
Don't hesitate to ask any questions!