HTML reference
...(this is not a complete reference of all html, as that is beyond this introduction, but it should prove useful as it contains most commonly used aspects of html)...
tag
|
function
|
outcome (example)
|
|||||||||||||||||||||||||||
<body> </body> |
use to define your html body, but also add the attributes for background color or background images. |
<body bgcolor="#FFFFFF"></body> will give a white background <body background="images/green.jpeg"> will repeat the image specified until the screen is filled. |
|||||||||||||||||||||||||||
mailto: URL |
this is how you make your clickable "email to us " links. Instead of a normal url for the link, type mailto: dingbat@ucsd.edu |
for example: email me <a href="mailto:dingbat@ucsd.edu">email me</a> |
|||||||||||||||||||||||||||
Grouping: Methods of formatting paragraphs and lines |
|||||||||||||||||||||||||||||
<br> |
linebreak (carriage return and line feed)
|
this is a line and this is the code: this is a line <br> |
|||||||||||||||||||||||||||
<hr> |
draws a horizontal rule, which you can define the width
and alignment of.
|
<hr size=12 width="50%"> this bar will be 50% of the width of whatever window it is in (here it is 50% of the width of this table element). You can also choose to optionally specify the size, as we did here, but it is not necessary. Finally, you can specify its alignment as left, which is default, center, or right. If you want, you can specify an absolute width by saying something like width=100, with no quotes, and that will make a horizontal rule of 100 pixels width no matter what. |
|||||||||||||||||||||||||||
<p> </p> |
defines a paragraph. (if you don't, everything will remain wrapped from one line of text!) |
for example, I will write a small paragraph, and then the paragraph will need to be separated, which we will see in a minute as to how it looks... this is the new paragraph. no, it's not a totally equivalent paragraph to the real thing in writing formally, but it gives the closest thing. and here's the code: <p>for example, I will write a small paragraph,
and then the paragraph |
|||||||||||||||||||||||||||
Text formatting: The essentials |
|||||||||||||||||||||||||||||
<h1> </h1> |
heading levels 1-6, six being the least large and bold,
and one the most.
|
heading 1heading 2heading 3heading 4heading 5heading 6and the following is the code: <h1>heading 1</h1> |
|||||||||||||||||||||||||||
<u> </u> |
underlined text
|
This text is underlined!!! and here's the code to do it: <u>This text is underlined!!!</u> |
|||||||||||||||||||||||||||
<b> </b> |
boldface
|
this is bold text and here's the code: <b>this is bold text</b> |
|||||||||||||||||||||||||||
<i> </i> |
italic of what is between the tags
|
this is italic text and here's the code: <i>this is italic text</i> |
|||||||||||||||||||||||||||
<strike></strike> |
strike through what is between the tags
|
and here's the code: <strike>this text has been struck through</strike> |
|||||||||||||||||||||||||||
<sup></sup> |
superscript (puts it above the standard text, when used
in combination with the tag <small> </small>, it makes a great
footnote or exponent)
|
X2 and the code: X<sup><small>2</small></sup> |
|||||||||||||||||||||||||||
<sub></sub> |
subscript
|
Xo |
|||||||||||||||||||||||||||
<div></div> |
an organizational tool, a way of dividing the document and also of formatting sections, add effects like <div align="left"> </div> <div align = "right"></div> <div align = "center"></div> |
this is text aligned to the left, this is text aligned to the right this is centered text and the code: <div align="left">this is text aligned to the left,</div> <div align="right">this is text aligned to the right</div> <div align="center">this is centered text</div> |
|||||||||||||||||||||||||||
<font> </font> |
text font, font size, color
|
this is an example of a font that is green, size +2, and Times font. and here's the code: <font size="+2" face="Times"
color="#00FF00" >this is an example |
|||||||||||||||||||||||||||
<ul><li> </li></ul> |
unordered list, often bulleted as displayed (the start and end of the list are bounded by the <ul> and </ul> tag, and each item is bounded by <li> and </li> tag) |
this is an example of an unordered list
And here's the code: <ul> |
|||||||||||||||||||||||||||
<ol><li> </li></ol> |
ordered list, works the same as unordered but has numbers
|
this is an example of an ordered list
and here's the code: <ol> |
|||||||||||||||||||||||||||
<dl><dt></dt><dd></dd></dl> |
definition list (the <dt></dt> tag is used for the definition word or title, and then the text for it is done with the <dd></dd> tag) |
And here's the code: <dl> |
|||||||||||||||||||||||||||
Images |
|||||||||||||||||||||||||||||
<img> |
use this tag to insert an image into an html document. (note that it doesn't require an end tag) |
||||||||||||||||||||||||||||
attributes (things you can add inside the <img>
tag)
|
|
||||||||||||||||||||||||||||
Image formats and some summary information (these are
NOT tags)
|
|||||||||||||||||||||||||||||
jpeg |
an image format that you can use to display photos and
similar imagery.
|
use this format to display photos (gif only has 256 colors), as it compresses images well and shows gradients smoothly. |
|||||||||||||||||||||||||||
gif |
another image format which compresses areas of the same
color
|
use this for areas with large amounts of constant color, like this: this obviously works well for things like bars and such shapes of constant color (or mostly constant) |
|||||||||||||||||||||||||||
Tables |
|||||||||||||||||||||||||||||
<table> </table>
|
defines a table
|
attributes: align,background,bgcolor,border,bordercolor,bordercolorlight,bordercolordark, cellpadding, cellspacing, height, hspace, nowrap, rules, valign,vspace,width
|
|||||||||||||||||||||||||||
<tr></tr>
|
defines a row (tr- has these attributes- align,background,bgcolor,border ,bordercolor,bordercolorlight,bordercolordark,valign) |
for example, this is the code for the above row: <tr> |
|||||||||||||||||||||||||||
<th></th> <td></td>
|
defines a header for that row, and data inside, respectively, must go inside the <tr> tag (td and th- have these attributes- align,background,bgcolor,border,bordercolor,bordercolorlight,bordercolordark, valign,width,rowspan,nowrap,colspan) |
||||||||||||||||||||||||||||
Frames |
|||||||||||||||||||||||||||||
<frameset> </frameset>
|
define a frameset. This has several attributes: (border,bordercolor,cols,frameborder, framespacing,onblur,onfocus,onload,onunload,rows) |
NOTE: USE FRAMESET IN PLACE OF <BODY> tags
|
|||||||||||||||||||||||||||