Quick References |
Examples |
Other places to go |
HTML Tag/Command | function | |
---|---|---|
Document Structure | ||
<HTML ></HTML > | placed at the start and end of HTML document establishes that the document is in HTML format | |
<HEAD ></HEAD > | placed at the beginnning and end of the document's meta-information this includes title, meta-tags, comments and javascripts | |
<BODY ></BODY >
| placed at the beginning and end of the content which the author wishes to be displayed by the browser | |
Document Meta Tags | ||
<TITLE ></TITLE > | the document's title is placed between these tags; goes inHEAD | |
<BASE HREF="URL" > |
base reference URL of document; goes in Head | |
<LINK Rev="made" > |
user@node.host.domain written the document; goes in HEAD | |
Text | ||
author's text |
the author's text consists of ASCII characters, which is displayed by the browserwithout the extra spaces between words and line breaks which are in the source document | |
&#code |
special character with numeric code or ISO Latin-1 name given as code | |
<!-- comment --> |
author's comment; will not displayed by browser | |
Anchor Tags | ||
<A HREF="URL">UNC</A> |
anchor linking UNC text to another document's URL | |
<A NAME="JOMC 50">Text</A> |
anchor with name JOMC 50 associated with Text | |
<A HREF="URL#JOMC 50">Deb</A> |
anchor with jump from Deb to anchor named JOMC 50 in document URL | |
Lists and Blocks of Text | ||
<UL ></UL > | placed at the beginning and end of unordered list (items marked with <LI >) | |
<OL ></OL > | placed at the beginning and end of ordered list (items marked with <LI >) | |
<DL ></DL > |
placed at the beginning and end of definition list (terms marked with <
DT >, definitions marked with <DD >) | |
<BLOCKQUOTE ></BLOCKQUOTE
> |
placed at the beginning and end of an extended quotation | |
<ADDRESS ></ADDRESS > |
placed at beginning and end of address; often used for document author identification | |
Separators | ||
<H1 ></H1 >... <H6 ></H6 > |
causes text in between these tags to be a heading size 1, 2, 3, 4, 5 or 6; 1 being the largest and 6 being the smallest | |
<HR > |
creates a horizontal rule | |
<HR Size="thickness" > |
horizontal rule that is thickness pixels high | |
<BR > |
creates a line break | |
<P > |
creates a paragraph break | |
<P Align="left|center|right" ></P > |
creates a paragraph start and end, and causes text to be aligned left, center, or right | |
Physical Character Formatting | ||
<B ></B > |
causes text in between these tags to be bold | |
<I ></I > |
causes text in between these tags to be italic | |
<TT ></TT > |
causes text in between these tags to be typewriter | |
<PRE ></PRE > | causes text in between these tags to bepreformatted text; preserves line breaks | |
<SUP ></SUP > | causes text in between these tags to be superscript | |
<SUB ></SUB > | causes text in between these tags to be subscript | |
<CENTER ></CENTER > | causes text in between these tags to be centered | |
<BLINK ></BLINK > | causes text in between these tags to blink | |
<FONT SIZE="size" ></FONT > |
font set to size , ranging from 1 to 7 | |
<FONT Size="+|-step" ></FONT > |
font size stepped up (+) or down (-) by step | |
<FONT COLOR="#RRGGBB" ></FONT > | causes text in between these tags to be printed in a color given by hexadecimal red, green, and blue values, RRGGBB | |
Logical Character Formatting | ||
<CITE ></CITE > | creates a citation | |
<CODE ></CODE > | computer source code | |
<EM ></EM > | causes text in between these tags to be emphasized | |
<KBD ></KBD > | causes text in between these tags to look like a keyboard entry | |
<SAMP ></SAMP > | used to make text look like text sample | |
<STRONG ></STRONG > | causes text in between these tags to be strongly emphasized | |
<VAR ></VAR > | used for a variable name | |
Image Tags | ||
<IMG SRC="URL" > |
inserts image at URL into document | |
<IMG SRC="URL" Alt="string" > | displays string for non-graphical browsers, such as LYNX, in place of an image | |
<IMG SRC="URL" Align="top|bottom|middle" > |
controls alignment of text after image | |
<IMG SRC="URLi" HREF="URLm" Ismap > | makes image at URL given by URLi a map, defined by a map file given at URLm | |
<IMG SRC="URL" Width="width"Height="height" > |
sets image to be width pixels wide by height pixels high | |
Form Tags | ||
<FORM Action="URL Method="get|post" ></FORM > |
a Form with a gateway program at URL and using a method | |
<INPUT Name="name" Type="checkbox |hidden |image |password |radio |reset |submit |text" > |
Input element with a specific type and symbolic name, name | |
<TEXTAREA Name="name" Rows="R" Cols="C" > |
Text area (lines of editable text) with symbolic name, name and R rows and C columns visible at a time | |
<SELECT Name="name" Size="N" Multiple > |
Select element with symbolic name, name, N selections visible at a time; and multiple selections possible; selections defined using OPTION | |
<OPTION Value="string" > |
Option element used with SELECT ; with returned value string | |
<TABLE Border ></TABLE > |
placed at the start and stop of a Table with a border | |
<CAPTION Align="top|bottom" ></CAPTION > |
placed at the start and stop of the caption, placed on the top or bottom of the table | |
<TR ></TR > |
placed at the start and stop of a row | |
<TH Colspan="C" Rowspan="R" ></TH > |
placed at the start and stop of a header cell spanning C columns and R rows | |
<TD Colspan="C" Rowspan="R" ></TD > |
placed at the start and stop of a data cell spanning C columns and R rows | |
<TH|TD Align="left|right|center" >
< /TH|TD > | sets horizontal alignment of item in header or data cell | |
<TH|TD VAlign="top|middle|bottom" >
< /TH|TD > | sets vertical alignment of item in header or data cell | |
<TH|TD Width="width" ></TH|TD > |
sets the horizontal width of header or data cell by width , in pixels | |
Netscape Body Extensions | ||
<BODY Background="URL" > |
cause background to be an image at URL | |
<BODY BGcolor="#RRGGBB" > | causes background to be a color with red, green, blue values given by hexadecimal RR, GG, BB | |
<BODY Text="#RRGGBB" > |
sets the text color | |
<BODY Link="#RRGGBB" > |
sets the colors of unvisited links | |
<BODY VLink="#RRGGBB" > |
sets visited links color | |
<BODY ALink="#RRGGBB" > |
sets the links of active links | |
Frames | ||
<FRAMESET Rows="number%"
FRAMESET Cols="number %" ><
/FRAMESET > |
FRAME elements are placed in between these tags These tags are substituted for the Body tags; The numbers placed in these tags determine how large each column or row will be. |
|
<FRAME SRC="URL"Name="text" Marginwidth="value"
> |
places into the frames documents at URL and with name text | |
<NOFRAMES>< | in between these tags in the content which will appear when a page containing frames is called by a broswer which does no recognize frames. | |
<A Target="frame_name
> |
attribue place in a href="" tags to determine where new content will appear when the link is selected |
Code | Result |
---|---|
HTML | |
<!-- Author's comment, which can be as long as the author wants and can talk about anything at all, and none of this will be displayed by Netscape--you only see it when you look at the code > | |
<HEAD > | |
<TITLE >Study hard for JOMC 50 </TITLE > | Netscape--[Study hard for JOMC 50} |
<BODY > | |
<H1 >Avoid hard work</H1 > | Avoid hard work |
<H4 >sneezing is wonderful<H4 > | sneezing is wonderful |
Some people use<em >emphasis</em > while others use <strong >strong</strong > | Some people use emphasiswhile others use |
Use all the spaces   you want.<p > | Use all the spaces you want |
I like to use inline <img src="http://www.unc.edu/~echernof/eye.gif" >pictures | I like to use inline |
<DL ><DT >Eric hates< DD >Definition lists</DL > |
|
<ol >< li >Item number 1< li >Item number 2< /ol > |
|
<ul >< li >Item number 1< li >Item number 2< /ul > |
|
Lists can also be "nested" for more emphasis<P ><MENU >>< LI >Item number 1>< UL >< LI >Item number 2< LI >Item number 3< /UL >
<LI >Item number 4< /MENU >
| |
Here comes a paragraph <p >break | Here comes a paragraph break |
Here comes a line <br >break | Here comes a line break |
You can have links that send you around in the same page <A HREF="#name" >like this</A > | You can have links that send you around in the same page like this |
This is where <A NAME="name" >end up </A > | THis is where you will end up |
Pictures can be links <A HREF="http://www.unc.edu/courses/jomc050" ><IMG SRC="http://www.unc.edu/~echernof/person.gif" ></A > | Pictures can be links |
Jomc 50's "How to do the Hard Stuff" (
http://www.unc.edu/courses/jomc050/cool.html
):Lonks to info about counters, image maps, and more...WWW Consortium HTML Information (
http://www.w3.org/pub/WWW/MarkUp/
): the official word on the latest standards.WWW FAQ (
http://www.boutell.com/faq/
): helpfulgeneral information about the World Wide Web.HTML Writer's Guild (
http://www.hwg.org/
): an association of Web developers.Web Developer's Library (
http://www.stars.com/Vlib/
): Web development information on many topics.
|
This site was created especially for students of the UNC School of Journalism's JOMC 050 Class, and anyone else who may be interested. For more information, please contactdaikat@email.unc.edu |