HTML and CSS Tag Review
<strong>
Used to make text bolder
<span>
Used to stylistically modify any length of text.
style="background-image:xxx;"
Format uses a url object, such as background-image:url(mypic.gif);
<html> <head> <title> </title> <style> </style> <body> </body> </html>
Html shell
<input type="text" maxlength="50" name="password" value="passworddata"/>
Identical to type="text" except that the user's input is obscured by *s on the screen.
<blockquote>
Indents and separates a paragraph of text on the page
style="text-indent:xxx;"
Indents the text. Values could 1-100 px.
<p>
Used to define a "paragraph" on a page. Can also be used to apply alignment such as <p style="text-align:center">This is centered</p>
<em>
Used to emphasize text through italics
box-shadow: 10px 10px 5px #888888
Adds a shadow to the div
text-shadow: #6374AB 20px -12px 2px;
Adds a shadow to the text
style="border-style:xxx;"
Defines the type of border. Values could be none, dotted, dashed, solid, double, groove, ridge, inset, outset.
style="z-index:xxx;"
Determines if an element is closer or behind other elements. Values could be: 1-900
<input type="image" src="button.gif"/>
Alternative to the submit button, this loads an image that the user clicks to submit the contents of the form. Like the img tag, you provide a src attribute to define its graphic file.
<a>
Anchor tag, used to create links between pages. Needs to have an href attribute to tell it where the link should go. Needs href (actual link), target (where the link opens up, such as _new for example)
<body>
Besides being a structural tag, style formatting applied to the body effects the entire page, such as <body style="background-color: gray; color: green">
style="text-transform:xxx;"
Can capitalize text. Values could be lowercase, uppercase.
style="text-decoration:xxx;"
Can have the overline, line-through, or underline value
style="font-weight:xxx;"
Can make the font thicker. Values could be normal, bold, lighter, 100-900
style="line-height:xxx;"
Change how space in between lines. Values could be 1-100 pt.
style="font-style:xxx;"
Changes the style of font. Values could be normal, italic, oblique
style="clip:xxx;"
Clips an image inside a rectangle.
<ol> and <li>
Create an ordered list of items. Operates structurally the same as <ul> and <li>
<ul> and <li>
Create an unordered list. The <ul> defines the overall list. And <li> defines the individual "list items" in the list. For examples, List of colors<ul><li>Blue</li><li>Green</li><li>Red</li></ul>
<br />
Creates a line break in page
style="background-repeat:xxx;"
Creates a repeating image background. Values could be repeat, repeat-x, repeat-y, no-repeat.
style="position:xxx;"
Determines the position of the element. Absolute attaches it to the page itself. Relative attaches it to its original position. Fixed moves with the page.
style="visibility:xxx;"
Determines whether an element is visible or not. Values could be: inherit, visible, hidden.
<br style="clear:xxx;">
Makes sure that divs close. Both is the value that should be used.
border-radius: xxx;
Makes the border corners rounded. The value (usually in pixels) determines how rounded out the corners become. Don't forget to add moz and webkit.
style="background-position:xxx;"
Moves the background image. Values could be 50%, 200px, top, center, bottom, left, right.
<input type="radio" name="animals" value="dog"/> Dog <input type="radio" name="animals" value="cat"/> Cat <input type="radio" name="animals" value="bird"/> Bird
Radio buttons that users can select. The user can only select one.
<input type="reset" value="Start Over"/>
Reset button.
<img>
Sets an image on the page. Needs src (source of the picture) and alt (description of the picture)
opacity:xxx;
Sets the opacity/transparency of an object. Values could be 0-1.0.
.xxx:hover
Style elements that are listed under this tag are activated after the mouse is hovered over the div.
<html>
Tells the browser that this file is html
<input>
The HTML input tag creates the majority of our form objects: text boxes, radio buttons, checkboxes and three types of buttons (submit, reset and image).
<form action="process.php" method="post">
The form tag defines the beginning and end of a form
<textarea name="story"></textarea>
The textarea tag creates a large (multiline) text area for a user to type sentences or paragraphs into
<input type="submit" value="Submit Survey"/>
This creates the button that caused the form to be submitted when the user clicks it.
<input type="hidden" name="formname" value="politicalsurvey"/>
This incarnation of the input tag is for passing information along to the form processor, such as the name of the form.
<select name="colors"> <option value="red">Red</option> <option value="#000077">Blue</option> <option value="#444444" selected="1">Gray</option> </select>
This is how you create drop-down menus
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Used to apply relative size and weight to phrases or headlines. H1 is the largest and boldest, and H6 is the smallest (far smaller than "normal" text size)
<hr>
Used to create a horizontal rule (line) across the page. You can also set the width of the line.
<head>
Where non-content code is stored, such as the title or style sheets
<title>
Where the title on the tab in the browser is stored
style="text-alignment:xxx;"
Will make text inside this tag go right, left, center, or justify
How do you modify what tags do?
You set it up with a stylesheet. For example, a { text-decoration:none; color:purple } makes all links not underlined and purple instead of blue.