Handout1 intro to html

WEBPROG1 – Web Programming 1 (HTML) Prelim Period
Handout #1

Brief HTML Background

• HTML has not been around for many years. November 1990 marks the day of
the first web page and back then there were little to no HTML standards to be
followed.
• A group called the World Wide Web Consortium was formed and have set the
standards that are widely accepted

Web Pages

• Web pages have many uses. Here are some important facts about why web
pages are so useful.
o A cheap and easy way to spread information to a large audience.
o Another medium to market your business.
o Let the world know about you with a personal website!

Important Terms

• Tag - Used to specify special regions to the web browser. Tags look like this:
<tag>
• Element - A type of tag. There are many elements in HTML.
• Attribute - Used to modify the value of the HTML element. Elements will
often have multiple attributes.

For now just know that a tag is a command the browser interprets, an element is
a type of tag, and an attribute customizes an element.

HTML Elements

An element consists of three basic parts: an opening tag, the element's content,
and finally, a closing tag.

1. <p> - opening paragraph tag
2. Element Content - paragraph content
3. </p> - closing tag

Every webpage contains four basic elements. html, head, title, and body.

The HTML Element

• <html> begins and ends each and every web page. Its sole purpose is to
encapsulate all the HTML code. Remember to close your HTML documents
with the corresponding </html> tag at the bottom of the document.
• If you haven't already, open up Notepad or Crimson Editor and have a
new, blank document ready to go. Copy the following HTML code into your
text editor.

HTML Code:

Prepared By: RICHARD F. ORPIANO Page 1 of 5

Handout #1

<html>
</html>

• Now save your file by Selecting Menu and then Save. Click on the "Save
as Type" drop down box and select the option "All Files". When asked to
name your file, name it "index.html", without the quotes. Double check
that you did everything correctly and then press save. Now open your file
in a new web browser so that you refresh your page and see your
changes.

The HEAD Element

• The <head> element is "next" as they say. As long as it falls somewhere
between your <html> tag and your web page content, you're golden. The
head functions "behind the scenes." Tags placed within the head element
are not directly displayed by browsers. We will be placing the <title>
element here and will talk about the other possible elements in a later
lesson.
• Here's a sample of the initial set up.

HTML Code:
<html>
<head>
<title>My WebPage!</title>
</head>
</html>

The TITLE Element

• Place the <title> tag within the <head> element to title your page. The
words you write between the opening and closing <title></title> tags will
be displayed at the top of a viewer's browser.
• Here's the html code:

HTML Code:
<html>
<head>
</head>
</html>


Handout #1

The BODY Element

• The <body> element is where all content is placed. Paragraphs, pictures,
tables, etc.

HTML Code:
<html>
<head>
</head>
<body>
All my content goes here!
</body>
</html>

Beginning HTML Tags

• Tags are embedded commands in an HTML document. By placing a tag
correctly, you tell the browser what to display and how to display it. Tags
come in pairs. First, an opening tag <tag>, followed by a closing tag
</tag>.
• The tags themselves are not case sensitive, however it is recommend
that you type tags in all lowercase.(Lowercase becomes required in
XHTML and Dynamic HTML). Remember to double check that you have
your closing tags otherwise the browser might interpret your page
incorrectly.

HTML Heading Tags

• Headings are numbered 1-6, with 1 being the largest heading and 6 being
the smallest.

HTML Code:
<body>
<h1>Headings</h1>
<h2>are</h2>
<h3>great</h3>
<h4>for</h4>
<h5>titles</h5>
<h6>and subtitles</h6>
</body>


Handout #1

Display:

Headings
are
great

for
titles
and subtitles

Attributes

• Attributes can be added to nearly every tag and are used to format the
tag in some way. We could justify paragraphs, center headings, etc.
• Here are some examples of attributes that can be placed inside many
HTML tags if not all of them.

Attribute "value"
=
align= "center","left","right","justify"
valign= "top","middle","bottom"

HTML Code:
<h1 align="center">Centered Heading</h1>

Display:

Center Heading


Handout #1

Paragraph Tag <p>

• Use the <p> tag to define paragraphs. The paragraph tag will place a
blank line before the first line in a paragraph and after the final line of
your paragraph.

HTML Code:
<p>Avoid losing floppy disks with important school...</p>
<p>For instance, let's say you had a HUGE school...</p>

Display:

Avoid losing floppy disks with important school/work projects on them. Use the web
to keep your content so you can access it from anywhere in the world. It's also a
quick way to write reminders or notes to yourself. With simple html skills, (the ones
you have gained so far by now) it is easy.

For instance, let's say you had a HUGE school or work project to complete. Off hand,
the easiest way to transfer the documents from your house could be a 3.5" floppy
disk. However, there is an alternative. Place your documents, photos, essays, or
videos onto your web server and access them from anywhere in the world.


Handout1 intro to html

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Handout1 intro to html

Similar to Handout1 intro to html (20)

More from Nadine Guevarra

More from Nadine Guevarra (7)

Recently uploaded

Recently uploaded (20)

Handout1 intro to html