Lesson 5: Block and Inline Elements

Unit 1: HTML & CSS 
Lesson 5: Block and Inline Elements
Common Core Standards: RST.11-12.3
1-2 Day Lesson

Aim: How can we use block and inline elements to enhance HTML page layouts ?

Students will be able to:
  • Understand html block and inline elements.
  • Understand html classes.
  • Create a HTML webpage layout of European cites.
Mini Lesson: 

Lesson Question

  1. What are the two different types of element display ?
  2. How are block elements display?
  3. What are some examples of block elements?
  4. How are inline elements display?
  5. What are some examples of inline elements?

HTML Block and Inline Elements

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.


Block-level Elements

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

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


Examples of block-level elements:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

  • <span>
  • <a>
  • <img>

The <div> Element

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

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

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

 

Example:

<div style=”background-color:Blue; 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>

<img style=”border: solid; 9px;” src=url.jpg alt= London/>

</div>

 

The <span> Element

The <span> element is an inline element that is often used as a container for some text.

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

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

Example

<h1>My <span style=“color:red”>Important</span> Heading</h1>

 

European Cities

  1. Create a webpage title European Cities in H1 tags.
  2. Pick 3 famous cities within Europe.
    1. The title of each city should be h2 tags.
    2. The description of each city in paragraph tags.
  3. Add one image of each city.
  4. Add a link to reference the city resource description

Here is your first city below:

London

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.

Screen Shot 2015-11-04 at 12.41.53 PM

Screen Shot 2015-11-04 at 12.46.01 PM

Screen Shot 2015-11-04 at 2.08.00 PM

Create a HTML & CSS website with the following:

  • images
  • headings
  • paragraphs
  • hyperlinks
  • background color
  • color paragraph text

HTML Structure Page Link HereScreen Shot 2015-11-04 at 1.42.30 PM

 

Video Tutorials

Summary: Discussion…..

How can we use block and inline elements to enhance HTML page layouts ?

 

Homework: 
Write a summary of todays lesson and activity in your google classroom journal.
Advertisements