HTML & CSS

Design and Build Websites

by Jon Duckett

You can download all of the code for this book online at: htmlandcssbook

Introduction to the Book

In order to teach you about creating web pages, this book is divided into three sections:

• 1: HTML We will spend the first chapter looking at how HTML is used to create web pages. You will see that you start by writing down the words you want to appear on your page. You then add tags or elements to the words so that the browser knows what is a heading, where a paragraph begins and ends, and so on.
• 2: CSS We start this section with a chapter that explains how CSS uses rules to enable you to control the styling and layout of web pages. We then go on to look at the wide variety of CSS properties you can use in your CSS rules.
• 3: Practical We end up with some helpful information that will assist you in building better websites.

How the Web Works

When you visit a website, the web server hosting that site could be anywhere in the world. In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server.

The Structure of This Book :

Structuring Word Documents The use of headings and subheadings in any document often reflects a hierarchy of information. For example, a document might start with a large heading, followed by an introduction or the most important information.

HTML Uses Elements to Describe the Structure of Pages In the browser window you can see a web page that features exactly the same content as the Word document you met on the page 18. To describe the structure of a web page, we add code to the words we want to appear on the page.

The Evolution of HTML Since the web was first created, there have been several different versions of HTML.

• HTML 4 Released 1997
• XHTML 1.0 Released 2000
• HTML 5 Released 2000

DOCTYPEs Because there have been several versions of HTML, each web page should begin with a DOCTYPE declaration to tell a browser which version of HTML the page is using (although browsers usually display the page even if it is not included).

CSS

CSS allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level one headings should be in a blue, italic, Times typeface.

You can specify the dimensions o XX f images using CSS.This is very helpful when you use the same sized images on several pages of your site.

Traditional HTML Layouts HTML5 introduces a new set of elements that allow you to divide up the parts of a page. The names of these elements indicate the kind of content you will find in them. They are still subject to change, but that has not stopped many web page authors using them already.

JAVASCRIPT & JQUERY

Interactive Front-End Web Development

by JON DUCKETT

EXAMPLES OF JAVASCRIPT IN THE BROWSER Being able to change the content of an HTML page while it is loaded in the browser is very powerful.

• SLIDESHOWS : Slideshows can display a number of different images (or other HTML content) within the same space on a given page. They can play automatically as a sequence, or users can click through the slides manually. They allow more content to be displayed within a limited amount of space.
• FORMS : Validating forms (checking whether they have been filled in correctly) is important when information is supplied by users. JavaScript lets you alert the user if mistakes have been made. It can also perform sophisticated calculations based on any data entered and reveal the results to the user.

Before you learn how to read and write the JavaScript language itself, you need to become familiar with some key concepts in computer programming. They will be covered in three sections:

• A : What is a script and how do I create one? A script is a series of instructions that a computer can follow to achieve a goal.To write a script, you need to first state your goal and then list the tasks that need to be completed in order to achieve it.
• B : How do computers fit in with the world around them? [COMPUTERS CREATE MODELS OF THE WORLD USING DATA. OBJECTS (THINGS) In computer programming, each physica l thing in the world can be represented as an object. Each object can have its own: • Properties • Events • Methods Events : There are common ways in which people interact with each type of object. For example, in a car a driver will typically use at least two pedals. The car has been designed to respond differently when the driver interacts with each of the different pedals: • The accelerator makes the car go faster • The brake slows it down , Similarly, programs are designed to do different things when users interact with the computer in different ways. For example, clicking on a contact link on a web page could bring up a contact form, and entering text into a search box may automatically trigger the search functionality.]
• C : How do I write a script for a web page? It is best to keep JavaScript code in its own JavaScript file. JavaScript files are text files (like HTML pages and CSS style sheets), but they have the . j s extension. The HTML