Scribd
Upload
5 views

TOPIC 2.1 Create Web Page Using HTML

The document discusses HTML tags and elements. It covers topics like the structure of HTML, common tags like headings, paragraphs and images, and other tags such as marquee, blink and horizontal rules. The document provides examples and explanations of how to use different HTML tags.

Uploaded by

SHARVENE SHARVENE
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

TOPIC 2.1 Create Web Page Using HTML

The document discusses HTML tags and elements. It covers topics like the structure of HTML, common tags like headings, paragraphs and images, and other tags such as marquee, blink and horizontal rules. The document provides examples and explanations of how to use different HTML tags.

Uploaded by

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

Topic 2: Hypertext Markup Languange (HTML)

LEARNING OUTCOME

1 Create web page using HTML

2 Use hyperlink to navigate web page

3 Create table, form and frameset in web page

2
HTML
▪ HyperText Markup Language, commonly referred to as HTML, is
the standard markup language used to create web pages.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext.
Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more
interactive and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated
by a web browser. A web page can be identified by entering an URL. A Web page can be
of the static or dynamic type. With the help of HTML only, we can create static web
pages.

3
Structure of HTML

4
Structure of HTML
<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
5
Structure of HTML
declaration to your HTML documents, so that the
browser knows what type of document to expect.

The header of an HTML document HTML tags are the hidden


where information about the document is keywords within a web page
placed. that define how the browser
must format and display the
content.

The main body of an HTML document


where all of the content is placed. You must
use this element and it should be used just
once.

6
Structure of HTML

Metadata

• is data (information) about data.


• The <meta> tag provides metadata about the HTML document.
• Metadata will not be displayed on the page, but will be machine parsable.
• Meta elements are typically used to specify page description, keywords, author of
the document, last modified, and other metadata.
• The metadata can be used by browsers (how to display content or reload page),
search engines (keywords), or other web services.
7
Structure of HTML

8
Structure of HTML

Metadata

9
HTML Elements

Header and Paragraph

CODE : OUTPUT :
<body> My First Heading
My first paragraph.
<h1>My First Heading</h1>
<p>My first paragraph.</p>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>:

</body> The <p> element defines a paragraph.


It has a start tag <p> and an end tag </p>:

10
HTML Elements
BODY Color

CODE : OUTPUT :

11
HTML Elements

BODY Background

CODE : OUTPUT :

12
HTML Elements
HTML Formatting Elements
✓Bold text
• HTML also defines special elements, for ✓Important text
defining text with a special meaning. ✓Italic text
✓Emphasized text
✓Marked text
<p>This text is normal.</p> ✓Small text
✓Deleted text
<p><b> This text is bold</b>.</p> ✓Inserted text
✓Subscripts
✓Superscripts
13
HTML Elements

Formatting elements were designed to display special types of text:


•<b> - Bold text
•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Smaller text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text

14
Activity 2.1 : HTML Elements
Write the coding and show the output.

15
Activity 2.2 : HTML Elements

• Write HTML code to produce the following output.

16
HTML Elements
HTML Attributes

• HTML elements can have attributes


• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"

<p title="About W3Schools">


W3Schools is a web developer's site.
</p>
17
HTML Elements
HTML Line Breaks

• The HTML <br> element defines a line break.


• Use <br> if you want a line break (a new line) without starting a new paragraph.

<p>This is<br>a para<br>graph with line breaks</p>

18
Activity 2.3 : HTML Elements

• Write coding below and show the output:


<!DOCTYPE html>
<html>
<body>

<p>This is<br>a paragraph<br>with line breaks.</p>

</body>
</html>

• Write HTML to produce the following picture:

19
HTML Elements
HTML Images

• In HTML, images are defined with the <img> tag.


• The <img> tag is empty, it contains attributes only, and does not have a closing
tag.

syntax <img src="url" alt="some_text">

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">


20
HTML Elements
HTML Images
✓ For image in another folder
• In HTML, images are defined with the <img> tag. <img src="/images/html5.gif" >
✓ <img src=http://www.w3school
• The <img> tag is empty, it contains attributes only,
s.com/images/w3schools_gree
and does not have a closing tag. n.jpg>

syntax <img src="url" alt="some_text">

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

21
HTML Elements
HTML Images <!DOCTYPE html>
<html>
<body>

<h2>The src Attribute.</h2>


<p> HTML images are defined with the img tag, and the filename of the image
source is specified in the src attribute:</p>

<img src= “img_girl.jpg” width=“500” height=“600”>

</body>
</html>

The src Attribute


The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed
22
HTML Heading Tags
Heading Tags

• Headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading. <h6> defines the


least important heading.

23
HTML Heading Tags
Heading Tags
OUTPUT :
CODE :

24
HTML Tags

Marquee text

The <marquee> tag is a container


tag of HTML is implemented for
creating scrollable text or images
within a web page from either
left to right or vice versa, or top
to bottom or vice versa

25
HTML Tags
Marquee text

<html>
<head><title>Example for HTML Marquee Tag</title>
</head>
<marquee width="40%" direction="up" height="30%">
This is sample scrolling text.
</marquee>
</html>

26
HTMLHTML
Tags Attributes
Tags

27
HTML Tags
Blink text

This is a non-standard tag (it only works with Netscape browsers)


and can be very irritating if used on large areas of text, so use it
sparingly.
CODE :
<p>Place around text to make it
<blink>flash</blink>.</p>

28
HTML Tags
Horizontal Line
• The <hr> tag defines a <!DOCTYPE html>
<html>
thematic break in an HTML <head>
<title>Horizontal line</title>
page (e.g. a shift of topic). </head>

<body>

• The <hr> element is used to <h2>Horizontal line</h2>


<hr>
separate content (or define a <p>This is simple horizontal line.</p>
</body>
change) in an HTML page.
</html>

29
HTML Tags
Horizontal Line

CODE :

OUTPUT :

30
HTML Lists
Unordered Lists
• no numerical order.
• To create an unordered list, we use the <ul> tag. This tag
comes in pairs, the content is written between opening
<ul> and closing </ul> tags.
• Each element of an unordered list is declared inside
the <li> tag.

31
HTML Lists
HTML Unordered Lists
HTML : OUTPUT :

32
HTML Lists
HTML Unordered Lists
HTML : OUTPUT :

33
HTML Lists
Ordered Lists
• listing items that are marked with numbers.
• It starts with the <ol> tag. This tag comes in pairs, the
content is written between opening <ol> and closing
</ol> tags.
• Each item in the ordered list starts with opening <li> tag
and ends with </li> closing tag.

34
HTML Lists
Ordered Lists
HTML : OUTPUT :

35
HTML Lists
Ordered Lists
HTML : OUTPUT :

36
Activity 2.4 : HTML List

• Write HTML list as below figure:

37
Exercise 2.1 : Practices
Below is a fake article (article in the CIDOS). There are a number of problems with how it is
displaying: the footnotes are not a superscript, the title doesn't stand out, ect. Your goal is to fix
these problems.

The changes you want to make are:


1. The page should have the title (changes the tab name) Dangers of DHMO.
2. Mark the first line with the tags for the biggest heading.
3. Give the next two words a strong (bold) appearance.
4. Emphasize (italicize) the first occurence of hydroxyl acid and DHMO
5. All numbers except the 2 in H2O should be superscripted like this : 1 .
6. Mark the letters TM behind Styrofoam as superscript.
7. The 2 in H2O should be subscripted.
8. Put paragraph tags around the different paragraphs of the article
9. If you would like to keep the original spacing on the lists, you will want to use break tags after
each comma

38
Exercise 2.1 : Practice

39

You might also like