Real World Math
  • Home
  • Lesson Downloads
    • Concept Lessons
    • Measurement Lessons
    • Project Based Learning
    • Exploratory Lessons
    • Space Lessons
  • Videos
  • Tutorials
    • Google Earth Tutorials
    • Xtranormal Tutorials
    • HTML Layout Tutorials >
      • Introduction
      • The Basics
      • Layout Templates >
        • Cover page
        • Blogger HTML Formatting
        • Paragraphs w Image
        • Image w. bullets
        • Video
        • Split text & image
        • Complex table
      • More tips
  • Teachers
    • Lessons >
      • Concept Lesson Outlines >
        • Around the World...
        • Estimation
        • Exchange Rate
        • Line Graphs
        • Oil Spill Estimates
        • Planes of Greenland
        • Polyhedrons
        • Scientific Notation 1
        • Scientific Notation 2
        • Tessellations
        • Time Zone Problems
        • Volume of Solids
      • Measurement Lesson Outlines >
        • Intercept Theorem
        • Complex Area
        • Crop Circles
        • Estimating Distance
        • Fractal Coastline
        • Tsunami Warning
      • PBL Lesson Outlines >
        • Spreadsheet App
        • Community Building
        • Iditarod Challenge
        • SAR Project
        • SketchUp
        • Typhoon Project
        • U-Boat Hunt
        • Water Problems
      • Exploratory Lesson Outlines >
        • Crop Circles 2
        • Four Color Map
        • Line Patterns
        • Mazes & Labyrinths
        • Networks
        • Pyramid in the Desert
        • The Flat Earth
        • Whale Watch
      • Space Lesson Outlines >
        • Lunar Fieldtrip
        • Lunar Sports
        • Rockets
    • Blog
    • About the site
    • RWM Video Overview
  • Contact


Menu

Introduction
The Basics

    Text
    Images & Hyperlink
    Color
Layout Templates
  • Cover page
  • Blogger HTML Formatting
  • Paragraphs w. image
  • Image w. bullets
  • Video
  • Split text & image
  • Complex Table
More Tips

Basics

Computers need to understand language just like we do, so it’s important that you use the proper HTML “grammar”.  The order of the symbols and letters is crucial to writing an effective code.  Often the the commands have a beginning and an end, but not always.  The initial command is enclosed within angle brackets <>, and the closing command has angle brackets with a forward slash </>.  Quotation marks also play a special part. 

Below you will find some basic HTML commands for formatting text, images, and more.


To continue, choose a topic from the navigation menu on the left.


TEXT


Command


Paragraph


Symbol


<p>

Example


<p>This starts a paragraph of text, and here it ends.</p>

This starts a paragraph of text, and here it ends.

Heading
<h1>
<h1>Big title</h1> for a paragraph

Big title
for a paragraph


(Note: There's also h2, h3, h4, h5, and h6)


Block quote
<blockquote>
<blockquote>This is an easy way to create margins on each side of the text.</blockquote>
This is an easy way to create margins on each side of the text.

Bold
<b>
This <b>makes text bold</b> until you tell it to stop

This makes text bold until you tell it to stop


Italic
<i>
This <i>makes text italic</i> until you tell it to stop

This makes text italic until you tell it to stop


Bold & Italic
<b> & <i>
Here's a <b>combination of bold and <i>italic</i> words</b> in a sentence.

Here's a combination of bold and italic words in a sentence.


Line Break
<br>
This makes a line of text end<br> where you want it to.

This makes a line of text end
where you want it to.

Line
<hr>
This will add a horizontal line to your text.<hr> Like Line Break, there is no closing tag for it.

This will add a horizontal line to your text.


Like Line Break, there is no closing tab for it.

Images & Hyperlink


Command   

Image
Symbol

<img src= "URL"/>
Note

The URL portion is the URL of the image.  Be sure to include the quotation marks, and use the image's URL and not the web page's.

Alt attribute
<img src= "URL" alt="description"/>
The alt attribute provides words in place of the image.  This is helpful for visually impaired persons.  Just enter a short description of the image (i.e. erupting volcano).
This command doesn't seem to work in Google Earth at this time.


Center
<center>
<center>This command</center> can be used to center an image or text element.
This command
can be used to center an image or text element.

Size
<img src="URL" width="400" height="300"/>
Width and height can be specified within the image command.  Be careful of proportions.

Hyperlink
<a href= "URL"> Link text</a>
<a href= "goo.gl/gdicu"> Real World Math</a>

Real World Math


Color


Color can be added to text, border lines, and the background.  The color command can be given as the color’s name or a 6-digit code consisting of letters and/or numbers.  Like most of the commands above, it is added on to the list of descriptives for a particular element.  In the Layout Templates, I will provide the cue “add color” at the appropriate spots for you.  Delete the add color and enter a color name or 6-digit code from one of these resources: Visibone's Web Color Chart or W3 School’s HTML Color Names.  Enter in color codes such as 33FF33 or just try typing in the color you want.  You’ll find many of the basic color names such as red or darkblue (no spaces) will work also.

Command

Background
Symbol

bgcolor = "add color"
Description

This command designates the color for the background.

Border
border color = "add color"
This portion will determine the color of a table's border.

Color
color = "add color"
This is typically what you will see as one of the descriptive elements for the text.  It determines the color of the text.  You'll probably see other text elements with it, such as font and size.  Those can be changed also.

Back to top

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.