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 |