Web Design 1 - HTML Lesson 8 - Line Breaks, Inline Frames

Line Breaks

There may be times that you would like your text to start on a new line but you don't really want a new paragraph. To do this use can include a line break tag. This is one of the few html tags that does not require a closing but you can add it if you like.


So, if you have a paragraph but would like to force a new line try adding the br tag. Here is an example of how I am using it in code and what it would look like on the screen.

Other uses of line break: Other times you may need to clear the formatting from the line above if you have an image in a paragraph and the next line of text is not starting on a new line - to do this you might need to add a <br clear=all> tag. Just keep it in mind in case you run into this situation.

Inline Frames

Inline Frame (iframe) is used to embed another document (web page) within the current one.

One common use is to add a Google Map to a page - like this one of Paris, France

Create your own map:

Open Google Maps in a new window. Locate a place you would like to travel to.

Once you have your map - look at the left side and use the share button - from there you will see an option to share a link or embed a map
- choose Embed map


From here you will copy the iframe code

In your page just create a new paragraph and paste the embed code within it.

my code looks like this:

Look closely at the code - do you see where the <iframe> tag starts and ends?

Notice that part of the code is setting up the width and height of the frame area. This code is calling a page from Google Maps to place in the frame. You can change these if you want to be specific about how much room the map takes up on your page.

Assignment for HTML Lesson 8

  1. Add a paragraph of text that demonstrates the use of a line break.

  2. Embed an Inline Frame for a Google Map
    - make some type of change to the height and width of the map display on your page

  3. Go futher and add an Inline Frame for a YouTube video

  4. Include a link to this lesson on your index page, and a link back to your index from this lesson

  5. Upload both files to x10 and check to be sure they work