Mr. O'Connell's Technology Home Page

home web design business and personal finance biography links2

Personal Website: Lorem Ipsum Project

What you will learn and be able to do:

By the end of this project/tutorial, you will learn what Lorem Ipsum Text is, and how it is used in web design. You will learn how to generate Lorem Ipsum text for your Personal Website. You will then insert this Lorem Ipsum "placeholder" text on all six pages of your Personal Website in order to help you develop your text formating.

According to the website lipsum.com, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." It is useful to us as web designers as "placeholder text" so that we can see how the text is going to fit into each page even before we know what the text will be. It is also useful because we can concentrate on HOW the text looks in terms of font, size, alignment, weight, and color without being distracted by WHAT the text says.

There is a longer and better explanation of Lorem Ipsum on the lipsum.com website, linked below. Read the explanation carefully, or this entire assignment will seem incomprehensible and nonsensical.

Prep:

If you haven't done so already, insert a table into your body div:

  • Click to the right of your placeholder text
  • ctrl+alt+t
    • columns: 2
    • rows: 1
    • width: 840
    • border thickness: 0
    • cell padding: 0
    • cell spacing: 0

Next, download the image placeholder below, and save it in your image folder. Then, drag it into the left hand cell of your new table.

image placeholder

 

 

Part One: Generating Lorem Ipsum Text

Note: As always, if the instructions don't mention a dialog box setting, leave it at the default value.

  • Go to http://www.lipsum.com/
  • CAREFULLY read the following paragraphs so you understand what you are doing, and why.
    • What is Lorem Ipsum?
    • Where does it come from?
    • Why do we use it?
    • Where can I get some?
  • Read the instructions
  • Generate 2 Paragraphs of Ipsum Text
  • Select the text, and copy it

Part Two: Adding your Lorem Ipsum Text to the pages of your Personal Website

  • Open index.html
  • Spell check the page. (Shift+F7)
  • Paste (Ctrl+v) your Lorem Ipsum text into the right cell of the table you created in the body div.
  • Select the text
  • In the Properties Panel at the bottom of the screen, click the Format drop down menu and choose Paragraph
  • Repeat this procedure until you have added your Lorem Ipsum text to each of the six pages of your website

Example:

placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu lacinia nisl. Donec id nulla vitae justo efficitur eleifend sed non quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vehicula placerat elit, in sagittis nibh. Donec lacinia bibendum enim in lobortis. Suspendisse tristique nulla in luctus mattis. In feugiat ac est non ultrices. Sed efficitur ante nunc, in imperdiet lacus convallis vel.

Duis ac quam odio. Curabitur vitae diam pulvinar, accumsan lorem vitae, facilisis orci. Proin fringilla, quam ac porttitor dignissim, ligula neque ultrices eros, lacinia commodo lorem arcu at sapien. Vivamus condimentum tempor laoreet. Nulla dignissim, ante vitae pharetra ultrices, nunc neque fringilla velit, id feugiat velit diam at nisi. Nunc venenatis ante interdum erat ultrices dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur mattis eu sem vel sodales. Donec hendrerit eleifend efficitur. Vestibulum id elit vitae massa lobortis dignissim laoreet sed ipsum. Proin tempus eleifend

 

When you're done, turn in your work through Google Classroom. Attach all six of your web pages.

In Google Classroom

  • Add<File<Select files from your computer
  • Navigate to your personal website folder
  • Ctrl click all six HTML pages
  • Upload
  • Turn In