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


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


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


Vocabulary (continued)

Web browser Web page Web site

welcome page XHTML XML

Le

sso

n 1


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


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


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


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


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


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


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



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



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


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


Saving and Viewing Your HTML Page (continued)

File extensions identify file types. Common file extensions are

17

Le

sso

n 1


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


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


Using Numbered and Bulleted Lists (continued)

Examples of lists

20

An unordered list An ordered or numbered list

Le

sso

n 1


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.

1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Documents

Transcript of 1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.