Essential HTML
This is a short course in the essential elements of HTML. It was tested
using Internet Explorer, Firefox and Chrome. Some details in the
examples are only seen correctly in Internet Explorer and Firefox.
Compatibility with others browsers is not guaranteed.
What am I supposed to do?
To create web (HTML) documents or pages, you need to create a
text (ASCII) file and format it using tags, or marks. These tags will
make an Web browser like Internet Explorer, Firefox, Chrome,
etc, display your document with special formats, connections and
graphics. The Lynx browser can display text and perform connections,
but cannot display graphics.
How do I start?
- The basic page architecture:
Just copy and adapt the Simple page
as your template for the basic architecture. It includes the initial
and ending < HTML >,< TITLE > and <
BODY > tags. It also includes the tags for a first Header and a
template for page authoring and disclaimer.
- Copy from similar pages
(unless noted copyrighted) to the one you intend to create. See Student home page for an
example of a student page, or Faculty
home page for an example of a faculty home page, that are
free for you to copy and adapt. To copy use a browser and select Save
As Web Page, complete (to include graphics) or Web Page, HTML only
(just the page text).
What should I do next?
- Use an graphical Web pages editor:
- To open the the student.html page template and replace the
text in the page templates with your personal information. Don't forget
to save as mystudent.htm, so that you
do not overwrite the template, because you may need it later.
- You may use a digital camera or scan your picture, and
save it as a gif or jpg and link the picture to your page.
If you are a member of the University of Baltimore
comunity
- When you enrolled for the first time at UB as a student,
or when you were hired as faculty or staff you received a network ID
code like ubxxLxx or idxxLLxx
(x are numbers and L is a letter of the alphabet) in the mail with
passwords for the UB network and e-mail system (some students may still
have NWSxxxxx accounts.
- You
are allowed to create and store your Web pages in the UB Web server.
The pages will be displayed on the Web using the following address: http://home.ubalt.edu/firstname.lastname, where firstname.lastname is your UB e-mail account without @ubalt.edu. Note:
students in a class using Web pages have this alias automatically
created for them. Students not in a class need to go to MyUB, select
the MyResources tab, then in the Personal Web Space Request box, click the request link to create the alias (the address with firstname.lastname).
- You have different ways to edit and save your pages in your UB Web space:
- If you decide to use Kompozer you can access your UB Web space
remotely and edit and save your pages directly in the UB Web server, as
explained in this tutorial.
- For face-to-face courses you can edit using any editor and save your Web files in drive H:\youraccount.
- For
courses on the Web, or off-campus, access your UB Web space by login in
MyUB using the ubxxLxx or idxxLLxx username and password:
- You will see a tools area in the right side of the screen and you should select My files and you will see a series of file directories to store files at UB.
- Select Web file Storage, campus H drive and you will see a directory of your UB Web space. This directory allows you to upload files from your PC to your UB Web space.
- In addition you can create new sub-directories
(folders), delete files, double-click to move to sub-directories, all
using a simple Web browser interface.
You can also edit your pages home then connect using FTP
to HOME -- home.ubalt.edu -- and upload your files to your ubxxLxx
account.
Faculty and staff may have NTxxxxx accounts or ubxxLxx
accounts and can access drive H: in the office, and use ftp from home to home.ubalt.edu as discussed above.
Do you want do know more? What should you know to edit
HTML
files?
- Create headers: use a
pair of
Hn tags to mark your headers. For example < H2 > A header
of your choice < /H2 > will create a header of level 2.
The smaller the n, the bigger the header font will be when displayed in
a browser, e.g. h2 > h3 > h4. Use your browser now to see
the source text for this page and see how
I used the header tags.
- Using an editor just highlight the header text and
select from the editor the heading level you wish. The editor will
introduce the pair of tags needed.
- Identify paragraphs: If
you
do not use paragraph tags your text will run continuously, for HTML
does not recognizes carriage return (CR), or enter. Whenever you want
to create a paragraph just enter < P > by typing it or
select it from the editor. See again the source text of this page for
examples.
- Create emphasis as
needed:
use one of the many tag styles to create emphasis in your text. To make
your text display in bold use, for example, < STRONG >
and < /STRONG >.
- Setup links: A key
feature of
HTML is to allow links to other pages created using HTML on the Web.
You create a link by using the tags <A HREF="link-url" >
link-name < /A >.
- The link-url is the address of the page you want to
link to. This address can start by a variety of resource types: http,
gopher, ftp,etc.
- It will be followed by the internet address of the
resource. For example: http://www.ubalt.edu/ is the link to the web
address of the home page of the University of Baltimore.
- The link-name is how you want to call the resource,
for
example: University of Baltimore.
- The full example would be: < A
HREF="http://www.ubalt.edu/" > University of Baltimore <
/A > and would look like:
University of
Baltimore.
- Include graphical images:
This is another key feature of HTML. You can display graphics in your
page. Lynx, however, will not be able to display these images, as we
saw before. The most frequent type of image used on the Web are gif
graphical files. You include an image in your page using the tags
< IMG ALIGN=position SRC="image-address" ALT="text" >.
- The position can be BOTTOM,TOP or MIDDLE. This
aligns
the text with, respectively, the bottom, top or middle of the image.
- The image-address is the internet address of the
graphical file.
- The text in ALT="text" is a text message for
non-graphical browsers, like Lynx.
- For example < IMG ALIGN=top
SRC="www_sm_i.gif"
ALT="Web" > will be displayed as:
in graphical and Web
in text browsers.
- NOTE: In the above example I used a "relative"
address
for the image file -- I omitted the internet address of the resource.
This assumes that the image is in the same directory and internet
address of this page. This can (and should) be used for links too.
- Using a graphical editor: I suggest you see my
tutorial
on Graphics.
- Use bullet and numbered lists:
This is also an important feature of HTML, for it allows the
enumeration of items in topics and subtopics. I have used extensively
lists in this page. You can use two types of tags:
- Bullet (unordered) lists: uses the pair < UL
> and < /UL > to start and end the list. The items
are entered between these two tags, with a < LI > typed
before each one of them. The browsers display each item of the list,
indented and with a bullet in front of the text.
- Numbered (ordered) lists: uses the pair <
OL
> and < /OL > to start and end the list. The
< LI > tag is used in the same way. The browsers,
however, display numbers instead of bullets before each list item. See
the source code of this page for examples of lists, including nesting.
- Others:
Three other tags are also important to know:
- drawing a line in the page: < HR >.
See
an example below, just before the authorship and disclaim messages.
- creating carriage returns for addresses: use the
tag
< BR > . For example < BR > Your name
< BR > Street address < BR > City and Zip ,
will display as:
Your name
Street address
City and Zip
- setting-up an e-mail connection to you: the tag
< A HREF="mailto:e-mailaddress" > e-mailaddress <
/A > will display as: e-mailaddress
and when selected will allow e-mail messages to be sent to e-mailaddress,
as shown in this image.
Additional references
If you feel you need more information use, among others, the following
sources:
This page is maintained by Al Bento who
can be reached at abento@ubalt.edu.
This page was created in March 28, 1995. Last updated in July 8,
2019. Although we will attempt to keep this information accurate, we
can not guarantee the accuracy of the information provided.
Feel free to copy this page for educational,
not-for-profit use. For other uses please contact the author.
