CISC 1400 Computer Project
2. What is a HTML Document?
HTML stands for Hyper Text Markup Language.
Each HTML file must have an htm or html file extension, andcan be created
using a simple text editor.
The following is a short example of what the html for a
simple page might look like. When appearing in your browser, this page would
look like this.
<html>
<head>
<title>My first Web Page</title>
</head>
<body bgcolor = "white">
<h2>
My first Web Page </h2>
<p>I am so happy to be at Fordham! Here are some things about me you
might like to know.
<ul>
<li> My favorite color is blue.
<li> John Mulcahy Hall is home away from home.
<li> I love the Big Apple.
<li> My favorite web site is <a href="http://www.cnn.com">cnn.com
</a>
</ul>
</body>
</html>
HTML markup tags
The parts that are highlighted using red is called markup tags that tell the Web browser how
to display the page. All formatting
takes place via use of tags. Most HTML tags (such as <b> and </b> or <html>
and </html>) come in pairs: they wrap around the text that you
wish to have formatted in a particular way.
For example,
<b>HELLO
</b> would make the word HELLO appears in
boldface in your browser, i.e., HELLO.
HTML tags that everyone needs to know:
- < html> and </html>
They are used to wrap around your entire document. They serve to identify that your
document is an html document.
- < head
> and </head> This tag is
used to wrap around the header part of the HTML document.
For now, you will just put the title in the header space.
<title> and </title> defines the
title of a webpage, i.e., what will be viewable on the titlebar of the browser.
<body> and </body> This tag
is used to wrap around the body of the HTML document. Most of the important tags you write will
go to the body part. You can also specify things like the background color and other colors that
might appear on your page.
<b> and </b> (also <i> and <tt>)
Performs different types of formatting on the text it surrounds.
<ul> and </ul> Use this tag to wrap around a unnumbered list.
In the list, each item in the list should begin with the <li> tag.
<h1> adn </h1> Make a header in your document.
There are different levels of headers, and you can play around with
changing h1 to h2, or h3 etc...
Hyperlink: what's hyper about HTML?
One feature that makes HTML and WWW so powerful and successful is the ability to link to other web pages. Here is
how to include a link to other websites (webpages) in your own web page.
The HTML tag to use is called anchor, i.e.,
<a> and </a>. To link to another web
page you must provide the web address (called a URL) of the page to
link to. This is done by adding the web address as follows:
<a href="http://enter web
address">add the text of your link</a>
Here is an example:
The following paragraph is generated from the following html:
For further information check out this <a href="http://www.w3schools.com/html/"> online html tutorial.</a>
For further information check out this online html tutorial.
Embed Pictures
A picture is worht a thousand words! To embed your favorite pictures or photos in your web page, you need to take two steps:
- Upload the pictures files (.jpg, .pic, .gif) to the server (i.e., storm.cis.fordham.edu).
- In your webpage, use img tag to include embed the pictures.
<img src="name of image file"> Add an image to your web page.
Here is an example: (Note that I have first upload the two .jpg files to the directory where this page is located:
(For you, you should just upload the image files to the public_html directory of yours:
The height=140 in the example specifies an attribute for the image, here it's the displaying height in pixels.
<img src="dog.jpg" height=140/>
<img src="cat.jpg" height=140/>
List of Content
- Introduction
- What is a HTML Document?
- Create your web page (via web interface,
via terminal)
- Requirement of your web page
- Intro. to JavaScript (extra credits)
- Delete your web pages