Steven F. Freeman

page created: 01/15/2012
page last modified: 05/10/2014

how to html

Create a large customized header (title):  <p style="color: rgb(128, 0, 128); font-size:50px; margin: 5px 0px 0px 0px ; text-align: center;"><strong>How To Present a Course Project</strong></p> How To Present a Course Project

Change a box above the content body (negative top margins)  <div style="float: right; width: 27%; padding: 10px 1px 10px 10px ; border: solid 2px #FF0;color: rgb(255, 255, 00); background-color: rgb(00,00, 225);margin: -182px 0px 10px 10px "> Bibliographic Database

Indents: <ul style="margin-left:0px; padding-left:20px; list-style- type:square;"> Reduces indentation for bullets and also changes bullet type. teaching

Line Height: Mike Royko on the LAPD and Rodney King To adjust vertical spacing, use the line-height property: <p style="line-height: 150%;"></p>  (use % or px)

Columns: simple 2 equal-width columns: cantares <div style="float: left; width: 49%;"><p>  text  </p></div><div style="float: right; width: 49%;">etc... (note that widths are adjustable)

Simple 3 columns : other stuff <div style="float: left; width: 32.5%; padding-right: 1.25%"> <h1 style="margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; text-align: left; ">Other Stuff</h1><p>...</p></div><div style="float: left; width: 32.5%;"><p> ... </p></div><div style="float: right; width: 32.5%;"><p>...</p></div>

(sometimes there is a problem depending on how "width" is established -- in that case, you need a fix, for example, http://cpor.org/orgcrises.cgi )

keep blocks separate:  choosing_research_topics_ questions <div style="clear: both; "><hr />

Margin properties can be set in one declaration with one to four values. Examples:

margin:10px 5px 15px 20px;
top margin is 10px
right margin is 5px
bottom margin is 15px
left margin is 20px

margin:10px 5px;
top and bottom margins are 10px
right and left margins are 5px

margin:10px 5px 15px;
top margin is 10px
right and left margins are 5px
bottom margin is 15px

margin:10px;
all four margins are 10px

Note: Negative values are allowed.

Paragraph Spacing: <p><style type="text/css">
p {margin-top: 2px;  margin-bottom: 2px;}
h5 {margin-top: 6px;  margin-bottom: 0px;}
</style></p> ackoffpublications 

Page label (title):  <h1  style=" color: rgb(104, 53, 255); margin: 3px 0 -12px 0; ">Quotes</h1> changes color & margins of cpor quotes

Diagram and caption (upper right): concept_mapping <div style="float: right; width: 490px; padding-left: 10px;padding-bottom: 10px;"><p><img style="width: 490px; height: 349px;" src="http://k21.co/images/Conceptmap.gif" alt="" /></p><p style="text-align: center;"><span style="color: rgb(51, 153, 102);">caption here</span></p></div>

Hyphenation: presenting (Pictures section) Use a soft hyphen (&shy;): If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character.  9.3.3 Hyphenation

Text Box (upper right): class sessions: <div style="border-bottom: #000 1px solid; border-left: #000 1px solid; margin: 1%; padding-left: 1%; width: 39%; padding-right: 0.5%; float: right; border-top: #000 1px solid; border-right: #000 1px solid"><p><b>Fall 2011 Course Schedule</b></p><p>The first meeting for the class will be Wednesday, September 21 6:30-9:30 pm etc....</p><div class="hangingindent"><p>September 21, <strong>Introduction</strong></p> etc....</div>etc....</div>

Padding, border around an embedded video: How To Present a Course Project (humor) <iframe width="640" height="360" style="padding:1px;border:1px solid black;" src="http:// ..."

 



Color strip used in this website: Top color: 9DC1FF, 7998FF (89A9FF) Middle color: 2946E1 Bottom color: CDF6FF

See also: 3 columns with boxes | How to do Citations | Composing cpor Webpages - Technical Aspects | Write_cpor_Webpages

 

Web City Pages