The Digital Research Initiative
The University of North Carolina at Chapel Hill

HTML Primer

Quick References

Examples

Other places to go

HTML Quick Reference

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"
HREF="mailto:
user@node.host.domain"
>
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 be
preformatted 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"
Marginheight="value"
Scrolling="yes|no|auto"
Noresize
>
places into the frames documents at URL and with name text
<NOFRAMES></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
|_self|_parent|_top|_blank"
>
attribue place in a href="" tags to determine where new content will appear when the link is selected

Some Basic Exampls

CodeResult
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">picturesI like to use inline
<DL><DT>Eric hates
<DD>Definition lists</DL>
Eric hates
Definition lists
<ol>
<li>Item number 1
<li>Item number 2
</ol>
  1. Item number 1
  2. Item number 2
<ul>
<li>Item number 1
<li>Item number 2
</ul>
  • Item number 1
  • Item number 2
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>
  • Item umber 1
    • Item umber 2
    • Item umber 3
  • Item umber 4
  • Here comes a paragraph <p>breakHere comes a paragraph

    break

    Here comes a line <br>breakHere 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

    Other Useful HTML Reference Sites

    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 made by
    eric
    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