Scribd
Upload
23 views38 pages

Welcome To HTML Class 2

This document provides an overview of an HTML class on basic markup elements. It discusses elements covered in the previous class like headings, paragraphs, bold and italics. It then goes over new structural elements like line breaks and horizontal rules. Students are instructed to create HTML files practicing these elements, like adding various sized headings, bold and italics text within paragraphs, and using line breaks and horizontal rules. The document aims to teach HTML markup through practical examples and exercises for students to code.

Uploaded by

funnerdstv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views38 pages

Welcome To HTML Class 2

This document provides an overview of an HTML class on basic markup elements. It discusses elements covered in the previous class like headings, paragraphs, bold and italics. It then goes over new structural elements like line breaks and horizontal rules. Students are instructed to create HTML files practicing these elements, like adding various sized headings, bold and italics text within paragraphs, and using line breaks and horizontal rules. The document aims to teach HTML markup through practical examples and exercises for students to code.

Uploaded by

funnerdstv
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

Welcome to HTML

class 2.
What did we learn previously?

 What is HTML?
 What are webpages?
 HTML structures
 Elements, tags, and attributes.
 <head>, <title> and <body>

 Creating YOUR own web page.


Previous class summary.
 HTML pages are text documents.

 HTML uses tags (characters that sit inside angled brackets) to give the
information they surround special meaning.

 Tags are often referred to as elements.

 Tags usually come in pairs. The opening tag denotes the start of a piece of
content; the closing tag denotes the end.

 Opening tags can carry attributes, which tell us more about the content of
that element.

 Attributes require a name and a value.

 To learn HTML you need to know what tags are available for you to use, what
they do, and where they can go.
Understanding HTML with Text

Headings and paragraphs

Bold, italic, emphasis

Structural and semantic markup


When creating a web page, you
add tags (known as markup) to the
contents of the page. These tags
provide extra meaning and allow
browsers to show users the
appropriate structure for the page.
Types of Markup

Structural Markup Semantic Markup

These are elements These elements provides extra

that you can use to information; such as where


emphasis is placed in a sentence,
describe both
that something you have written is
headings and
a quotation (and who said it), the
paragraphs.
meaning of acronyms, and so on.
Get Digging with Structural
Markup.
1. Headings

Well we all know what “headings” are, so let’s skip boring explanations.

HTML has six level of heading based on hierarchy of importance.


There are:
<h1></h1> : This is used for the main heading.
<h2></h2> : This is used as a sub heading.
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Now let’s get PRACTICAL.

1.Create a webpage or
HTML file named
“headings”.
You successfully did step 1.

2. Now input this code in between your <body> tag.


<body>
<h1>This is a Main Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
</body>
Now your code should look like this.
Execute your code.
2. Paragraphs <p></p>

Remember this from class 1

Let’s see it in action.


Paragraphing contents.

To create a paragraph, surround the words


that make up the paragraph with an
opening <p> tag and closing </p> tag.

By default, a browser will show each


paragraph on a new line with some space
between it and any subsequent
paragraphs.
Now let’s get PRACTICAL.

1.Create a webpage or
HTML file named
“paragraph”.
You successfully did step 1.
2. Now input this code in between your paragraph.html
Wow you’re getting the hang of it
now a 2 minute break to digest
what we’ve learnt.
3. Bold <b> and Italics <i>

First “Getting BOLDER with HTML”

By enclosing words in the tags <b>


Bold text here </b> and we can
make characters appear bold.
The element also represents a
section of text that would be
presented in a visually different
way (for example key words in a
paragraph) although the use of
the element does not imply any
additional meaning.
Watch this video on <p> and <b>
Execute your code.
Second Styling with italics <i>

Italics(<i></i>> just like the <b> is


used in between a
paragraph(<p></p>)
Using the tags <i> and </i> we can
characters appear in italics.

The element also represents a section of text


that would be said in a different way from
surrounding content — such as technical
terms, names of ships, foreign words, thoughts,
or other terms that would usually be italicized.
Now let’s get practical
1. Create a html file called “italics”.
2. Just like we did earlier in the <b>, type in this code
Now Execute the code.
Note the <b> and <i> elements are
traditionally used inside or in
between another element e.g <p>,
<span>, etc.
2. Wasting spaces with white
spacing.
Breaking lines and rules in HTML

1. Line breaks

2. Horizontal rule
1. Line break <br />

As you have already seen, the browser will

automatically show each new paragraph or heading

on a new line. But if you wanted to add a line break

inside the middle of a paragraph you can use the line

break tag.
Now let’s get practical
1. Create a html file called “line-breaks”.
2. Just like we did earlier in the <br />, type in this code
<br /> in action
2. Ruling lines in a web page using
Horizontal rule <hr />

To create a break between themes — such

as a change of topic in a book or a new

scene in a play — you can add a horizontal

rule between sections using the <hr /> tag.


Now let’s get practical
1. Create a html file called “horizontal-rule”.
2. Just like we did earlier in the <hr />, type in this code
<hr /> in action
Assignment: Create a HTML file and
let this picture below be the output.
THANKS FOR ATTENDING GOOD
NIGHT.

You might also like