Transcript HTML and JavaScript Basics Unit One

HTML and JavaScript Basics
Unit One
Lesson One
Quick HTML Know-How
Introducing basic HTML structure
and building your first basic web
page
Lesson Objectives
•
•
•
•
•
Discover HTML Tags
Enter Starting Tags
Save Web Pages Correctly
Use Headings in a Web Page
Create Ordered and Unordered Lists
Communicating on the Web
HTML or HyperText Markup Language is a
programming language used to write web pages.
Web pages are viewed on a computer or other
communication device using a web browser.
HTML programming is done by using tags that the
browser can identify, these tags are enclosed in
angle brackets. Here in example of the code to
center a title.
<CENTER>Title of the page</CENTER>
Communicating on the Web
Here is the webpage for a local Real Estate firm.
www.eastern-sunbelt.com
Here is part of the code that produces that page.
• <font color="#008000">Welcome to Eastern New
Mexico's leader in Commercial and Residential Real
Estate. Located in <a href="http://www.portales.com">
Portales N.M.</a>, home of
• <a href="http://www.enmu.edu"> Eastern New Mexico
• University</a>. Come on in and see what we can do for
you!!</font>
Can you spot the tags in this code?
The Old-Fashioned Way
• HTML is written using an ordinary word
processing program. The simpler the word
processor the better. We will be using Notepad
which is the most basic word processor provided
by Microsoft on all Windows computers.
• REMEMBER! We use a web browser like Internet
Explorer or Firefox to view web pages we use a
word processor like Notepad to build web pages.
Saving and Viewing your
HTML pages
• Computers know what program to open a
file with based on the extension it has
after it’s name. The basic extension for a
web page is .html
• Can you think of other extensions for a
web page?
• Can you identify the program that would
open these extensions?
– .doc .wpd .ppt .xls
Saving and Viewing your
HTML pages
It is not only important to save a file with
the right extension so it will open with the right
program, it is also important to know where to
save you files.
In this course we will be saving one copy on the
school network by saving to
\\file\web design\your_folder_name
and a copy will be saved to your folder on the class
wiki, as we did in the Introductory Unit, at
portaleshighwebdesign.pbworks.com
Using Headings
HTML gives you six standard headings,
or title sizes, from which to use. The tag for a
heading is the letter H followed by the heading
size number. H1 is the largest and H6 the
smallest. Here is what the code would look like
for a heading of size two.
<H2>Welcome to my Web Page!</H2>
Numbered and Bulleted Lists
Two types of lists are discussed in the
lesson, the ordered list and the unordered list.
What would cause you choose one over the other?
Here is the code for a basic ordered list
<OL>
<LI> Item One </LI>
<LI> Item Two </LI>
</OL>
Numbered and Bulleted Lists
Here is the code for a basic ordered list
<UL>
<LI> Item One </LI>
<LI> Item Two </LI>
</UL>
What are the differences?
There are other list types discussed in some of the
lesson extensions on the class wiki, check them
out!
Resources
• Barksdale, K., & Turner, E. S. (2002). HTML Basics.
HTML and JavaScript BASICS (Basics (Thompson
Learning)) (2 ed., pp. 1-33). Cambridge: Course
Technology.
• PBworks: Online Collaboration. (n.d.). PBworks:
Online Collaboration. Retrieved June 1, 2010,
from http://pbworks.com