HTML and Java Script Basics Unit One Lesson

HTML and Java. Script 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 Hyper. Text 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 \fileweb designyour_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. H 1 is the largest and H 6 the smallest. Here is what the code would look like for a heading of size two. <H 2>Welcome to my Web Page!</H 2>

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 Java. Script 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