Grade level 8

Grading period 2nd

Content ICT-Webpage Development using HTML
Topic HTML Block and Inline, Classes and ID
Apply the different html Block and Inline, Classes and ID in
creating a webpage.
Learning Competency
Know the use and function of html Block and Inline, Classes and
ID by editing and running the given examples.
Activity Worksheet 10 Create a webpage design using html codes/program by
applying all you have learn in our module10.
Time Frame 1 week
Critical and Logical thinking
21st Century skills Analyzing and interpreting HTML Program
Basic Webpage Development Literacy
In this activity, students will understand how html Block and
Inline, Classes and ID will use in the program.
Overview of the
Activity Worksheet No. Learn how to change/edit the given example program about html
10 Block and Inline, Classes and ID to see the output.
Through this activity, the student learns the:
Activity Learning * Different html Block and Inline, Classes and ID.
Objectives
* the use and function of html Block and Inline, Classes and ID
by editing and running the given examples.
Online Website: https://www.w3schools.com/
School Website: https://www.rshsmimaropa.com/
Materials Laptop, Desktop and Android Phone with internet data or
connection, Pen and paper/notebook
Prepared by Nolan G. Fadriquilan-SST II of Bansud NHS-RSHS
[email protected] Contact#:09561587717
Lesson18-HTML Block and
Inline Elements
Every HTML element has a default display value, depending on what type of
element it is.

There are two display values: block and inline.

Block-level Elements
A block-level element always starts on a new line.

A block-level element always takes up the full width available (stretches out to
the left and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline
element does not.

The <div> element is a block-level element.

Example
<div>Hello World</div>

Try it Yourself »

Here are the block-level elements in HTML:

<address>

<article>

<aside>

<blockquote>

<canvas>

<dd>

<div>

<dl>
<dt>

<fieldset>

<figcaption>

<figure>

<footer>

<form>

<h1>-<h6>

<header>

<hr>

<li>

<main>

<nav>

<noscript>

<ol>

<p>

<pre>

<section>

<table>

<tfoot>

<ul>

<video>

Inline Elements
An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is  a <span> element inside  a paragraph.

Example
<span>Hello World</span>

Try it Yourself »

Here are the inline elements in HTML:

<a>

<abbr>

<acronym>

<b>

<bdo>

<big>

<br>

<button>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<object>

<output>

<q>

<samp>
<script>

<select>

<small>

<span>

<strong>

<sub>

<sup>

<textarea>

<time>

<tt>

<var>

Note: An inline element cannot contain a block-level element!

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are

common.

When used together with CSS, the <div> element can be used to style blocks of
content:

Example
<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city
in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</div>

Try it Yourself »

The <span> Element

The <span> element is an inline container used to mark up a part of a text, or a
part of a document.

The <span> element has no required attributes, but style, class and id are

common.

When used together with CSS, the <span> element can be used to style parts of
the text:

Example
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>

Try it Yourself »

Chapter Summary
 There are two display values: block and inline
 A block-level element always starts on a new line and takes up the full
width available
 An inline element does not start on a new line and it only takes up as
much width as necessary
 The <div> element is a block-level and is often used as a container for
other HTML elements
 The <span> element is an inline container used to mark up a part of a
text, or a part of a document

HTML Tags
Tag Description

<div> Defines a section in a document (block-level)

<span> Defines a section in a document (inline)

For a complete list of all available HTML tags, visit our HTML Tag Reference.
Lesson19-HTML class Attribute
The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can
also be used by a JavaScript to access and manipulate elements with the
specific class name.

In the following example we have three <div> elements with a class attribute

with the value of "city". All of the three <div> elements will be styled equally
according to the .city style definition in the head section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Try it Yourself »

In the following example we have two <span> elements with a class attribute

with the value of "note". Both <span> elements will be styled equally according
to the .note style definition in the head section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Try it Yourself »

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Tip: You can learn much more about CSS in our CSS Tutorial.

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then,
define the CSS properties within curly braces {}:

Example
Create a class named "city":

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Try it Yourself »

Multiple Classes
HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div
class="city main">. The element will be styled according to all the classes
specified.

In the following example, the first <h2> element belongs to both the city class

and also to the main class, and will get the CSS styles from both of the classes: 

Example
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Try it Yourself »
Different Elements Can Share Same Class
Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> points to the "city" class and will

share the same style:

Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

Try it Yourself »

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for
specific elements.

JavaScript can access elements with a specific class name with

the getElementsByClassName() method:

Example
Click on a button to hide all elements with the class name "city":

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

Try it Yourself »

Don't worry if you don't understand the code in the example above.

You will learn more about JavaScript in our HTML JavaScript chapter, or you

can study our JavaScript Tutorial.

Chapter Summary
 The HTML class attribute specifies one or more class names for an
element
  Classes are used by CSS and JavaScript to select and access specific
elements
 The class attribute can be used on any HTML element
 The class name is case sensitive
 Different HTML elements can point to the same class name
 JavaScript can access elements with a specific class name with
the getElementsByClassName() method

Lesson20-HTML id Attribute
The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML
document.

Using The id Attribute

The id attribute specifies a unique id for an HTML element. The value of
the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It

is also used by JavaScript to access and manipulate the element with the
specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then,
define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name

"myHeader". This <h1> element will be styled according to the #myHeader style
definition in the head section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Try it Yourself »

Note: The id name is case sensitive!

Note: The id name must contain at least one character, and must not contain
whitespaces (spaces, tabs, etc.).

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must
only be used by one HTML element within the page:

Example
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */

.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- An element with a unique id -->

<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Try it Yourself »

Tip: You can learn much more about CSS in our CSS Tutorial.

HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a
webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the
bookmark.

Example
First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:

Example
<a href="#C4">Jump to Chapter 4</a>

Try it Yourself »

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Using The id Attribute in JavaScript

The id attribute can also be used by JavaScript to perform some tasks for that
specific element.

JavaScript can access an element with a specific id with

the getElementById() method:
Example
Use the id attribute to manipulate text with JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Try it Yourself »

Tip: Study JavaScript in the HTML JavaScript chapter, or in our JavaScript

Tutorial.

Chapter Summary
 The id attribute is used to specify a unique id for an HTML element
 The value of the id attribute must be unique within the HTML document
 The id attribute is used by CSS and JavaScript to style/select a specific
element
 The value of the id attribute is case sensitive
 The id attribute is also used to create HTML bookmarks
 JavaScript can access an element with a specific id with
the getElementById() method

Module10-Learning Tasks (ICT8)

A. Exercises 1 and 2
Answer all given exercises under HTML Classes and ID. To test and to practice yourself about
the HTML lesson, please try to answer each exercise base on the knowledge you got from the
lesson and not by clicking the “Show Answer” button to get the right answer.
B. Coding Time (This task is optional, but if you can do it much better)
Open or Copy all the Examples under HTML Block and Inline, Classes and ID by clicking the
Try It Yourself>> link found in the module or in the website of w3School.com, then try to edit or
change the codes/program then click RUN button to see the desired output. This Task will serve as
your learning activity in our lesson and to practice your skills in Webpage Development using HTML.
C. Webpage designing (Graded Output)
Create a webpage design using html codes/program by applying all you have learn in our
module10.