HTML and Basic Web Page Construction
Hyper Text Markup Language
- Consists of text and tags
- Tags
- <tag_name> .... </tag_name>
- e.g. <b> This is bold </b>
- tags exist for formatting, inserting images, creating lists, and
linking portions of a document, and linking documents
- most tags have an opening and closing tag sequence, for
example, <b> starts bolding the text, </b> stops bolding
the text. The / indicates a closing tag.
- some tags don't require an closing tag, or the closing tag is
optional. In this case you add the
/ within the tag itself, e.g. <br /> causes a
line break, <hr /> causes a horizontal line.
- Refer to http://www.w3schools.com/tags for a complete list
of tags for HTML version 5
- Note, the current version of HTML standard is version
5. Significant changes were made in HTML 5 from HTML 4.
Most browsers still support all the features of HTML 4.
Special Tags
- Since coding documents in HTML requires the use of <, > and
other characters to denote tags, therefore if you want these characters
to
be included as part of the document, you must use special sequences of
characters in their place. Click here for a complete list - http://www.w3schools.com/html/html_entities.asp
&keyword; - used to insert reserved characters.
< - less than sign
> - greater than sign
& - ampersand
- space
" - double quote
' - single quote
HTML Document
- Document composed of a head and body.
- Sample, minimal document:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>My Page </TITLE>
</HEAD>
<BODY>
<H1>Big Bold Heading Line</H1>
</BODY>
</HTML>
- <!DOCTYPE html> specifies that this is an html 5
document (for more doctypes, see
http://www.w3.org/QA/2002/04/valid-dtd-list.html), this should be
the first line. Note, Internet Explorer will create errors if you place
comments before this line.
- The <HTML> tag starts the html portion of the document
- The <HEAD> tag starts the header area of the document
- <TITLE> defines the title of the document, this title is
displayed by the browser in its tab and is used for bookmarks.
- The <BODY> tag starts the main body (part displayed by the
browser) of the document
Commenting your HTML Code
- <!-- starts a block of
comments
- --> ends the block of
comments
- Internet Explorer does not like it if you place comments before
the DOCTYPE tag, it screws up cascading style sheet styles
<!--
this is a comment and will not appear to the reader
-->
Physical Formatting Tags
<b> . . . </b> Bold font
<i> . . . </i> Italics
<u> . . . </u> Underline
<p> paragraph </p>
<br /> Break line
<hr /> Horizontal line
<pre> ... </pre> Preformatted text
<Hn> </Hn> Header format n = 1..6
Logical FormattingTags
<em> . . . </em> Emphasis
<strong> . . . </strong> Stronger emphasis
<code> . . . </code> Display an HTML directive
<samp> . . . </samp> Include sample output
<kbd> . . . </kbd> Display a keyboard key
<var> . . . </var> Define a variable
<dfn> . . . </dfn> Display a definition
<cite> . . . </cite> Display a citation
Lists
- Unordered lists (items have bullets)
<UL>
<LI> List item 1 </LI>
<LI> List item 2 </LI>
</UL>
- Ordered lists (items have numbers)
<OL>
<LI> List item 1 </LI>
<LI> List item 2 </LI>
</OL>
- Descriptive lists, each item has a title (hanging) and a
description.
<DL>
<DT> Title 1 </DT>
<DD> Description 1 </DD>
<DT> Title 2 </DT>
<DD> Description 2 </DD>
</DL>
Lists within lists
<UL>
<LI> A few New England states: </LI>
<UL>
<LI> Vermont</LI>
<LI> New Hampshire </LI>
</UL>
<LI> One Midwestern state: </LI>
<UL>
<LI> Michigan </LI>
</UL>
</UL>
Hyperlinks
- To define a location in a document, just add the id attribute to
a tag, this is generally done with the heading tags, e.g.
<H1 id ="Section1"> Section 1</H1>
- Define a link
<a href="url" target = window > link text </a>
- where
- url specifies what to display, adding a # followed by a
location name allows you to link to a specific point in a document
- http://www.google.com
- http://test.junk.com/index.html
- http://test.junk.com/index.html#Section1
- window is the name of the window to display it in (if missing,
link is displayed in the same window)
- _blank - create a new browser window
- _top - display in top level window
- name - display in a window named in a FRAME tag
Uniform Resource Locators
- FTP (file://) file://FTP.CICA.INDIANA.EDU/PUB/WIN3...
- News (news://) news://news.server.com/rec.gardening
- HTTP (hypertext transport/transfer protocol http://)
http://www.fgcu.edu
- HTTPS (Hypertext Transfer Protocol Secure)
- Mail (mailto : ) mailto:mpenderg@fgcu.edu
Images
- To include an inline image in your document, enter:
<IMG SRC="logo.gif" alt="FGCU logo" width="400" height = "300" />
- SRC speficies the url of the image file, alt is text to use
if image cannot be displayed.
- Width and height are optional and specify the number of pixels
to allocate to place the image in. If you leave these off, then
the browser will use the actual size of the image.
- To use an images to click on to take someone to another web
page use just place the img tag inside the A tag
<A HREF = "htp://www.fgcu.edu">
<IMG SRC="logo.gif" alt="FGCU logo" /></A>
- Make certain the image is in GIF, TIFF, JPEG, PNG, or HDF format.
- To allow text to wrap around the image, use style="float:left" or
style="float:right", e.g.
- <IMG SRC="logo.gif" alt="FGCU logo" style="float:left"
/> causes the image to be on the left with text wrapping
around to the right.
- Note, if you are using photos, you should use a tool
like MS Paint or Paint.Net to resize the image to the size you want it
to appear on the screen. this will make the file smaller and image load
faster.
Video
- You can embed video several ways
- Create a link to the video
- Use an "embed" tag to embed a plugin (such as Quicktime or
Realplayer)
- or just use the Video tag, e.g.
<VIDEO width="300" height = "200" controls="controls">
<Source src ="myvideo.mp4" type = "video/mp4" />
Your broswer does not support video
</VIDEO>
- width and height are in pixels and tell the browser how much
screen space to use
- controls tells the browser to display the stop/start/pause
buttons (if controls is left off, then the user will have to right
click on the video to start it)
- between the <Video and the </Video> you can have
multiple source tags, each can specify a video of a different
type. the browser will play the first one it knows how to play
(different browser can deal with different video types)
- if the browser cannot deal with video at all, it will display the
text between the tags is shown.
- click
here for more
Audio
- You can embed audio several ways
- Create a link to the song
- Use an "embed" tag to embed a plugin (such as Quicktime or
Realplayer)
- or just use the Audio tag, e.g.
<Audio controls="controls">
<Source src ="mysong.mp3" type = "audio/mp3" />
Your broswer does not support audi
</Audio>
- controls tells the browser to display the stop/start/pause buttons
- between the <Audio> and the </Audio> you can
have
multiple source tags, each can specify a music of a different
type.
the browser will play the first one it knows how to play (different
browser can deal with different audio types)
- if the browser cannot deal with audio at all, it will display the
text between the tags is shown.
- click here
for more
Tables in HTML
- Tables enclosed with <TABLE> and </TABLE>
- Each row of the table is delimited by <TR> and </TR>
- Cells within a table row can be either header cells
<TH>..</TH> or data cells <TD>...</TD>
- Captions can be added by <CAPTION>...</CAPTION>, the
caption tag must go right after the table tag
- Borders can be added by including the border attribute in the
table tag. <TABLE BORDER="1"> ....
- Use the CSS style attribute to set the alignment and width of the
table, 300px means 300 pixels.
- For a cell to span multiple rows or columns, add ROWSPAN=N or
COLSPAN=N to TH, or TD tags.
- Cells between the <THEAD> and </THEAD> are header
cells and will be placed at the top of the table.
- Cells between the <TFOOT> and </TFOOT> are footer
cells and will be placed at the end of the table.
- Cells between the <TBODY> and </TBODY> are body cells
and will be placed at the middle of the table. For tables with a large
body, some browsers will allow scrolling of the body part, keeping the
header and footer in place.
<table style="width: 300px; text-align: left;"
border="1">
<caption>Monthly Savings Table</Caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Monthly Savings Table
| Month |
Savings |
| Sum |
$180 |
| January |
$100 |
| February |
$80 |
Pages within Pages using IFRAME
- You can insert an html file within another file using the IFRAME
tag
- This is handy if you want to create a form by hand, then insert
it into a page created by a web design program.
- The tag looks like the following:
<IFRAME SRC= url NAME = frame_name WIDTH = width HEIGHT
= height > text to display if browser does not
support iframes </iframe>
- url is the link to the page, Name is a name for the frame
(optional), width can be in percent or in pixels, height can be in
pixels
- The following statement created the iframe shown below:
<iframe src="http://www.fgcu.edu/" height="300" width="400"> you
need to update your
browser</iframe>
Online information References Tutorials