1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
-
Upload
barry-hardy -
Category
Documents
-
view
217 -
download
0
Transcript of 1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
1
Lesson 1Quick HTML Know-How
HTML and JavaScript BASICS, 4th Edition
Barksdale / Turner
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E2
About the Presentations
The presentations cover the objectives found in the opening of each lesson.
All lesson objectives are listed in the beginning of each presentation.
You may customize the presentations to fit your class needs.
Some figures from the lessons are included. A complete set of images from the book can be found on the Instructor Resources disc.
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E33
Objectives
View HTML tags. Enter starting tags. Save correctly. Integrate levels of headings into Web pages. Create unordered, ordered, and embedded
lists.
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E44
Vocabulary
angle brackets apps Cascading Style Sheets (CSS) Flash gadgets home page
HTML page Hypertext Markup Language (HTML) Java JavaScript landing page tags
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E55
Vocabulary (continued)
Web browser Web page Web site
welcome page XHTML XML
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E66
Communicating on the Web
Web pages share text, images, gadgets, maps, video, sound, and multimedia effects with a simple click on any computer.
Web sites are collections of related Web pages.
Web pages are displayed by Web browsers whose job it is to locate and display Web information.
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E77
Communicating on the Web (continued)
Dominant Web browser: Microsoft’s Internet Explorer
Early forerunners that went out of business: Mosaic and Netscape Navigator
New strong competitors: Mozilla’s Firefox, Apple’s Safari, and Google’s Chrome
Popular Browsers
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E88
Interfacing HTML and Other Tools
Hypertext Markup Language or HTML is the original Web page creation tool. – Allows you to create dynamic Web pages– Tells Web browsers how Web pages should look– Works on Macintosh, Linux, and Windows
Cascading Style Sheets (CSS) create convenient ways to determine the style on multiple Web site pages.
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E99
Interfacing HTML and Other Tools (continued)
XML and XHTML give new power to HTML. Other languages work with HTML:
– Java, a programming language used widely with Internet applications
– Flash, a high-impact multimedia creation tool– JavaScript, a Java-like scripting language used to
create miniapplications called apps, and gadgets HTML tags let you determine the placement
of content on Web pages.
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E
Uncovering the Page Beneath the Page
The images below show the same page viewed in two different ways.
10
A Google Sites CSS-style Web page (sites.google.com)
HTML tags for the Google Sites-created page
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E
Uncovering the Page Beneath the Page (continued)
How HTML Works: HTML tags usually appear in pairs enclosed
in <angle brackets><center>HTML and JavaScript BASICS</center>
There is a starting tag, <center> And a closing tag, </center> The only difference between the two tags is a
slash
11
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E1212
Entering Your Mystery Tags the Old-Fashioned Way
The many terms used to describe pages created with HTML tags:
Web page: HTML page on the World Wide Web Home page: The main Web page of a Web site Welcome page: Designed for new visitors Landing page: Targeted “welcome” page used by Web
advertisers Web site: Collection of many interconnected Web
pages
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E
Entering Your Mystery Tags the Old-Fashioned Way (continued)
Creating a Powerful Advantage with Tags: There are many ways to create HTML tags.
– You can use specialized software, such as Expression Web 2 by Microsoft or Dreamweaver by Adobe
– You can use free tools such as Sites from Google (sites.google.com).
– You can write your own tags using a text editor
13
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E1414
Entering Your Mystery Tags the Old-Fashioned Way (continued)
Why Learn HTML?: You will be able to
– Develop a deeper understanding of how HTML works.
– Quickly troubleshoot Web page errors.– View other pages and achieved the same effects.– Understand the file/folder structure of Web servers.– Understand how different Web tools work together.
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E1515
Entering Your Mystery Tags the Old-Fashioned Way (continued)
What to Use: Any text editor will work for creating both HTML
tags and JavaScript code– In Windows, you can use Notepad– On a Macintosh, you can use SimpleText
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E1616
Saving and Viewing Your HTML Page
HTML files are text files with an .html or .htm extension.
The .html or .htm extensions signal to the Web browser that this is an HTML text file.
All of the sophisticated word-processing commands are erased, leaving just the characters.
Saving as text allows HTML files to move quickly over the Web.
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E
Saving and Viewing Your HTML Page (continued)
File extensions identify file types. Common file extensions are
17
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E1818
Using Headings
Most printed documents use headings to help the reader find important portions of text.
HTML has six standard headings or title sizes. Anything inside the heading tags will be made larger
or smaller, depending on the number. Heading numbers indicate the level of importance for
marked headings, with 1 being the most prominent and 6 being the least prominent.
<h1>Very Big</h1> <h3>In the Middle</h3> <h6>Very Small</h6>
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E1919
Using Numbered and Bulleted Lists
One of the most powerful ways to organize information on a Web page is by the use of lists. There are several kinds of lists, including the following:
<ul></ul> Unordered (or bulleted) lists <ol></ol> Ordered (or numbered) lists
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E
Using Numbered and Bulleted Lists (continued)
Examples of lists
20
An unordered list An ordered or numbered list
Le
sso
n 1
Barksdale / Turner HTML and JavaScript BASICS 4E2121
Summary
In this lesson, you learned: How to identify HTML tags. How to enter your starting tags. How to save your HTML file correctly. How to integrate levels of headings into Web
pages. How to create unordered, ordered, and
embedded lists.