69 Slices
Medium 9781449319274

19. Introduction to JavaScript

Jennifer Niederst Robbins O'Reilly Media ePub

by Mat Marquis

What Is JavaScript?

Variables

If/else statements

Native functions

The Browser Object

Events

In this chapter, I’m going to introduce you to JavaScript. Now, it’s possible you’ve just recoiled a little bit, and I understand. We’re into full-blown “programming language” territory now, and that can be a little intimidating. I promise, it’s not so bad!

We’ll start by going over what JavaScript is—and what it isn’t—and discuss some of the ways it is used. The majority of the chapter is made up of an introduction to JavaScript syntax—variables, functions, operators, loops, stuff like that. Will you be coding by the end of the chapter? Probably not. But you will have a good head start toward understanding what’s going on in a script when you see one. I’ll finish up with a look at some of the ways you can manipulate the browser window and tie scripts to user actions such as clicking or submitting a form.

See All Chapters
Medium 9781449319274

4. Creating a Simple Page: (HTML Overview)

Jennifer Niederst Robbins O'Reilly Media ePub

An introduction to elements and attributes

A Web Page, Step by Step

Step 2: Give the Document Structure

Step 5: Change the Look with a Style Sheet

Troubleshooting broken web pages

Part I provided a general overview of the web design environment. Now that we’ve covered the big concepts, it’s time to roll up our sleeves and start creating a real web page. It will be an extremely simple page, but even the most complicated pages are based on the principles described here.

In this chapter, we’ll create a web page step by step so you can get a feel for what it’s like to mark up a document with HTML tags. The exercises allow you to work along.

This is what I want you to get out of this chapter:

Get a feel for how markup works, including an understanding of elements and attributes.

See how browsers interpret HTML documents.

Learn the basic structure of an HTML document.

Get a first glimpse of a style sheet in action.

See All Chapters
Medium 9780596009878

20. Color and Backgrounds

Jennifer Niederst Robbins O'Reilly Media ePub

Once upon a time in 1993, when Mosaic was the only widely distributed browser in town, all web pages had black text on a gray background with blue hyperlinks and purple visited hyperlinks (unless the user changed it in the browser preferences to something more jazzysay, lime green on purple). Then in 1994, along came Netscape, and HTML extensions for coloring text and backgrounds were born. Even those limited controls came as a welcome relief to web designers and users clamoring for color.

CSS offers control over color and backgrounds that is worlds away from the effects possible with HTML extensions alone. This chapter introduces the properties for adding color and backgrounds to elements listed here.

color

background-position

background-color

background-attachment

background-image

background

background-repeat

Say goodbye to <font color=> forever. You can pitch the text, link, vlink, and alink attributes for the body element while you're at it.

The color property is used to describe the text (a.k.a. "foreground") color of an element. The foreground color is also used for an element's border unless it is specifically overridden with a border color rule.

See All Chapters
Medium 9781449319274

11. Cascading Style Sheets Orientation

Jennifer Niederst Robbins O'Reilly Media ePub

The Benefits of CSS

1. Marking up the document

2. Writing the rules

3. Attaching the styles to the document

Moving Forward with CSS

You’ve heard style sheets mentioned quite a bit already, and now we’ll finally put them to work and start giving our pages some much needed style. Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML, and in fact, any XML language. Presentation, again, refers to the way the document is displayed or delivered to the user, whether on a computer screen, a cell phone display, printed on paper, or read aloud by a screen reader. With style sheets handling the presentation, HTML can handle the business of defining document structure and meaning, as intended.

CSS is a separate language with its own syntax. This chapter covers CSS terminology and fundamental concepts that will help you get your bearings for the upcoming chapters, where you’ll learn how to change text and font styles, add colors and backgrounds, and even do basic page layout. By the end of Part III, I aim to give you a solid foundation for further reading on your own and lots of practice.

See All Chapters
Medium 9780596009878

8. HTML and XHTML Overview

Jennifer Niederst Robbins O'Reilly Media ePub

HTML (Hypertext Markup Language) is the markup language used to turn text documents into web pages. HTML allows authors to identify elements that give the document structure, such as headings, paragraphs, lists, and so on. Other elements act as mechanisms for adding hypertext links, interactive forms, and media such as audio and video to web pages.

HTML has undergone quite a journey since its creation by Tim Berners-Lee in 1991 as a simple way to indicate the meaning and structure of hypertext documents. It didn't take long for competing browser developers to add on to the initial minimal set of HTML elements or for the first crop of web designers to co-opt HTML as a visual design tool.

XHTML is a reformulation of HTML in XML. In other words, it uses the same vocabulary (the same elements and attributes) as HTML, but the syntactical rules are pulled from XML, which is stricter than HTML. XHTML is discussed in detail later in this chapter.

Before we delve into HTML and XHTML syntax, let's take a moment to look at the important role (X)HTML plays as well as the recent groundswell of respect it has earned in the new standards-driven web design environment.

See All Chapters

See All Slices