Scribd
Upload
78 views

Week 3 - HTML Basics

This document provides an overview of HTML basics for a computer studies class. It discusses using Notepad++ as a text editor, and introduces key HTML tags for structuring text like headings, paragraphs, lists and links. Examples are given for how each tag should appear in the browser. The document aims to help students create their first HTML document and evaluate website structures.

Uploaded by

Maam Sheinnyx
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
78 views

Week 3 - HTML Basics

This document provides an overview of HTML basics for a computer studies class. It discusses using Notepad++ as a text editor, and introduces key HTML tags for structuring text like headings, paragraphs, lists and links. Examples are given for how each tag should appear in the browser. The document aims to help students create their first HTML document and evaluate website structures.

Uploaded by

Maam Sheinnyx
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

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!

You might also like