Essential HTML

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, Netscape, AOL, 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 editor like NVU a free graphical editor (Note: use my Nvu introduction tutorial to download, install and use NVU, see also the Nvu User guide, or yet this other tutorial for more in NVU) , Microsoft FrontPage, Homesite  (download a free copy here), among others, 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.
• Of course, Microsoft Word and WordPerfect allows you to open the student.html template, edit in the familiar wordprocessing environment and save it as a Web page, as follows:
  
  • Open the student.html file you just downloaded in Word, by choosing 'File Open,' and then navigate to the folder where you saved the file.
  • To change the picture to your own picture, first select the existing picture by clicking on it, then click 'Insert a Picture From File…' and navigate to the location where your file is saved and choose your picture.
  • To change any of the hyperlinks, right click on the link, choose 'Hyperlink, Edit Hyperlink…', and edit either the text to display or the address pointed to by the link. You can also use this method to add a hyperlink, by simply right clicking on any word or highlighted text, and selecting 'Hyperlink.'
  • Finally, save as index.htm, so that you do not overwrite the template.
  • Please note that any images, pictures, you have in your page will be saved in a directory create by the wordprocessor. Your page index.htm, will make the wordprocessor create a directory index_files and save your image(s) in this directory.
  • If you use a wordprocessor to create and/or edit your page do not try to edit in one of the other editors (e.g. Homesite), but rather re-open the page in Word or WordPerfect and do the editing, then save again as a Web page.


• Consider carefully the use of a word-processor as your Web page editor, particularly Microsoft Word, because they presently use XML instead of HTML to code the pages (making difficult to edit the code) and may create problems with the uploading of images linked to the pages. Some versions of Word may not create the directory and store the image file there, but rather link to the image in the local PC directory using drive letters that will not work (exist) on the Web. In this case you will have to upload the image and edit the Word file to change the link to the image, not easy for a beginner.


• 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 (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).


• For face-to-face courses you can save your Web files in drive H:\youraccount and they will be displayed on the Web using the following address -- http://home.ubalt.edu/students/ubxxLxx -- ubxxLxx is the network user id assigned to you.


• For courses on the Web, or off-campus, access your UB Web space using the Web interface provided by the Enhanced mail.


• Log using the ubxxLxx username and password for e-mail and you will see a menu with options including:
  
• Select this icon and you will see a directory of your drive H. This directory allows you to upload files from your PC to the drive H.
• 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.
• For more details, please read this FAQ.


• You can also connect by 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 both drive H:, use ftp to home.ubalt.edu, or Enhanced mail 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:
  1. 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.
  2. 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

• HTML code tutorial
• WebMonkey intro to HTML
• CERN - HTML specs
• Web.com Resources
• Forms template
• WBG on Frames
• The Common Gateway Interface
• Yahoo HTML references

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 June 7, 2007. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.