Slide 1

HTML and JavaScript Basics Unit One Lesson One Quick HTML Know-How Introducing basic HTML structure and building your first basic web page Slide 2 Lesson Objectives Discover HTML Tags Enter Starting Tags Save Web Pages Correctly Use Headings in a Web Page Create Ordered and Unordered Lists Slide 3 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. Title of the page Slide 4 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. Welcome to Eastern New Mexico's leader in Commercial and Residential Real Estate. Located in Portales N.M., home of Eastern New Mexico University. Come on in and see what we can do for you!! Can you spot the tags in this code? Slide 5 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. Slide 6 Saving and Viewing your HTML pages Computers know what program to open a file with based on the extension it has after its 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 Slide 7 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 Slide 8 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. Welcome to my Web Page! Slide 9 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 Item One Item Two Slide 10 Numbered and Bulleted Lists Here is the code for a basic ordered list Item One Item Two What are the differences? There are other list types discussed in some of the lesson extensions on the class wiki, check them out! Slide 11 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