|
| |
COP 1822 Web Design and MS FrontPage 2000
Instructor: Ray Merry, www.raymerry.com, Email: ray@raymerry.com
Unit II Outline: Basic Concepts HTML and Web Pages
HTML is An evolving language....
HTML has different versions and also 2 ofshoots: DHTML, and XML…
Basic HTML:
Tags: Consist of Brackets left and right, the tag name in between, then the
text being modified or named by the tag, and at the end of the text the same tag with the
/ just inside the first bracket. E.G.
START: <TAG>
END: </TAG>
Note: The text modified or defined by the tag goes between the tags.
E.G. <HTML> Text ..... </HTML>
<HEAD> Text... </HEAD>
<TITLE> Text...</TITLE>
The HTML tag is the container of the whole HTML page (less some programming options such as ASP)
FILO: First in Last Out: Means the last tag put in must be the first one
closed!
E.G. <HTML><HEAD></HTML></HEAD> is wrong!!! It
should be:
<HTML><HEAD></HEAD></HTML>
Note: Some tags are included inside others. For example the Title Tag
goes inside the Head Tags:
<HEAD><TITLE>This is the Title</TITLE>
</HEAD>
<BODY>
This is the text in the body <B>This text is in bold</B> This is
not.
</BODY>
</HTML>
Meta Tags
Meta tags are tags that start with the word meta. They are usually for search
engines or other features which do not directly display on the browser and are
in the <HEAD> section.
Examples are key words, description, etc.
<meta name="DESCRIPTION" Content="This is the
description">
Note the whole content is in the one tag!
White Space Commands:
Breaks:
<BR> Provides a break or open line in the document. Note: this is one of
the few commands which has no end Tag!
Paragraphs:<p></p>
Horizontal Rule: <HR> Note: no End Tag!
Physical Styles:
<B></B> Bold This is Bold
<I></I> Italic
¨ <U> </U> Underline
¨ <SUB> </SUB> Subscript
¨ <SUP> </SUP> Superscript
¨ <TT></TT> Typewriter Font
¨ <BIG></BIG> Big
¨ <SMALL></SMALL> Small
Logical Style Tags:
<EM> </EM> Emphasize Italics
<STRONG></STRONG> Strong emphasis Bold..
<BLOCKQUOTE></BLOCKQUOTE>
Quotations
<CITE></CITE> Title of book or other citation
<CODE></CODE> or <KBD></KBD>Text that should be keyed in by the user… typewriter font…
Headings:
<H1></H1> Smaller the number smaller the result...H2, H3, H4, H5, H6
Unordered Lists:
<UL><LI></LI><LI></LI></UL>
Ordered Lists:
<OL><LI></LI><LI></LI></OL>
Hyperlinks:
<A HREF=”URL”> your text </A>
E.G. <A HREF=http://www.raymerry.com/classes/> For my students </A>
Centering and Justifying:
<P ALIGN=”CENTER”> </P>
<P ALIGN=”RIGHT”> </P>
Note: align left is default and not required!
For the Future:
This type of tag is typical of many tags with “Qualifiers” inside the tag. Other examples: FONT, Color, etc.
Examples
<h3 align="center" style="text-align:center">Prospectus</h3>
<font face="BrushScript BT" size="6"> Ray Merry</font>
Converting Documents and Document Types and Cutting and Pasting:
Converting Documents and Document Types and Cutting and Pasting:
It is frequently a time saver convert a word processing
document, html, spreadsheet, or other document type from one type to another.
It is much faster than creating the document from scratch. One of the
simplest ways to convert is to open one document, select the text, copy it, open
the second program, create a new blank document, and paste the text into it. Then save the new document as html, word document, or
whatever else we want. Note if we
take text from one document and paste it in another the fonts, formatting, etc.
may or may not transfer. Some times
we want that, some times we do not. For
example if you cut from MSWord 2000 into Front Page the fonts from Word are put
into the HTML in MSFront Page. This may create conflicts with what you want to
do in MSFront Page or the other recipient program.
In this case you can first Paste into a Text Only Program like Notepad,
then copy from Notepad (which has no fonts) and paste into the final recipient
program.
Alternatively we can also
use the paste special command from the Edit menu, or right click on the
page. All the options then allow us to not import the fonts!
For more details on
converting documents see: http://www.writersforhire.com/help&faq/docstohtml.html
Special Characters
Sometimes we want to show HTML commands in our web page, but not have them actually hidden, which they would be as HTML commands
In these cases we can use the symbols for the left and right bracket instead of the actual brackets.
To create the left bracket in your HTML source code type
<
To create the right bracket type >
Now we can create any HTML without it doing anything.
For example To create <BR> in your document type
<BR>
Assignment in class:
Prepare a HTML document with each of the tags discussed above in it, Name the tag and show it’s effects.
Do it showing the commands, and then using them. For example:
This is the <B> Bold command, This is what it does
Include each of the following commands:
<HTML>,<HEAD>,<TITLE>, <meta name="DESCRIPTION"
Content="This is the description">,<BODY>,<BR>, <p>,<HR>, <B>,<I>, <U>,<SUB>, <SUP>, <TT>,<BIG>,<SMALL>, <EM>, <STRONG>, <BLOCKQUOTE>, <CITE>, <CODE>, <KBD>, <H1> ,<H2>, Unordered Lists, Ordered Lists, Hyperlinks, Centering and Justifying:
|
