Welcome to slump.com
This is my practice web page. Eventually I will figure out what I am doing and this page may just turn into something interesting. In the meantime, I will just be learning html and css.
Be wary of politicians bearing gifts.
The greatest dangers to liberty lurk in insidious encroachment by men of zeal, well-meaning but without understanding.
Louis D. Brandeis
A Third Header
The "h3" tag above is different than the prior two headers. Note that this entire sentence is in italics because I have defined the p2 tags as being italics.
Applying Logical Formatting
This is an example of an "h4" header. I am also using a "br /" tag to not skip a line before the next line.
Use the tag "strong" when you want a word to be bold.
Notice the preceeding text is a different color because i defined the color in the r tag. These two sentences are bracketed by p tags.
Use the tag "em" when you want a word to be in italics.
Also please note that this paragraph is very large, because at the beginning
of this web page, I defined the tag "p3" as having 200% font size.
Hyperlinks - CREATING A LINK TO ANOTHER WEB PAGE SOMEWHERE ELSE
Above heading is using "h5" tag. Note that this section is bold because I have defined the p1 tag as being bold.
This is a hyperlink to Google.
The hyperlink is made by using the tag "a href=http://www.google.com."
Create a Link within the Page
"h6" headings are very small. Let's go back and do an "h1" heading.
Create a Link within the Page
The hyperlink is made by using the tag "a href=pagelink.html"
This is a Linked Page.
and if you want to email me
You simply have to click here: e-mail Joe Slump .
How to Put an Image on your Web Page
This is a picture of Ringo.
.
Ringo is COOL.
This is a picture of Saint George fighting the dragon.
Saint George is COOLER than Ringo.
INDENTING AND ALIGNING TEXT
To center text one must
This is text outside of a box:
OutsideText OutsideText OutsideText OutsideText.
This is text inside the box. Loremipsumdolor sitamet, consetetursadipscingelitr, seddiamnonumyeirmodtemporinviduntutlabore et dolore magna aliquyamerat, seddiamvoluptua.
Next, let's add some padding (Listing B):
Listing B
#box {
width: 350px;
border-color: red;
border-style: dashed;
padding: 10px;
}
As you can see, the additional padding on all four sides of the text has increased the space between the border and the element content by 10px. The total width of the box is now (350+10+10) = 370px.
Next, how about increasing the thickness of the border (Listing C):
Listing C
#box {
width: 350px;
border-color: red;
border-style: dashed;
padding: 10px;
border-width: 15px;
}
The difference is immediately visible. The new width of the box is (370+15+15) = 400px.
The border demarcates the visible area of the element. Other elements flow around the outer border of the element. If you'd like to increase the spacing between this element's border and others on the page, you must turn to the third layer of the box: margins. Consider the next rule (Listing D), which adds a margin of 40px to the top border of the element:
Listing D
#box {
width: 350px;
border-color: red;
border-style: dashed;
padding: 10px;
border-width: 15px;
margin-top: 40px;
}
Of course, because the margin's only been added to the top, the width of the box remains 400px. However, the height increased by the size of the top margin. If you'd prefer a uniform margin, consider the following rule (Listing E), which adds a margin of 40px on all sides of the box:
Listing E
#box {
width: 350px;
border-color: red;
border-style: dashed;
padding: 10px;
border-width: 15px;
margin: 40px;
}