web development -2

sri999

t1.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Getting Started with HTML5

Tutorial 1

Carey

Objectives

Explore the history of the web

Create the structure of an HTML document

Insert HTML elements and attributes

Insert metadata into a document

Define a page title

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued 1)

Mark page structures with sectioning elements

Organize page content with grouping elements

Mark content with text-level elements

Insert inline images

Insert symbols based on character codes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued 2)

Mark content using lists

Create a navigation list

Link to files within a website with hypertext links

Link to e-mail addresses and telephone numbers

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Check the footer.

The Structure of an HTML5 Document

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the World Wide Web

A network is a structure in which information and services are shared among devices

A host or a node can be any device that is capable of sending and/or receiving data electronically

A server is a host that provides information or a service to other devices on the network

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the World Wide Web (continued 1)

A computer or other device that receives a service is called a client

In a client-server network, clients access information provided by one or more users

Local area network - A network confined to a small geographic area, such as within a building or department

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the World Wide Web (continued 2)

A network that covers a wide area, such as several buildings or cities, is called a wide area network (WAN)

The largest WAN in existence is the Internet

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the World Wide Web (continued 3)

Timothy Berners-Lee and other researchers at the CERN nuclear research facility near Geneva, Switzerland laid, the foundations for the World Wide Web, or the Web, in 1989

They developed a system of interconnected hypertext documents that allowed their users to easily navigate from one topic to another

Hypertext is a method of organization in which data sources are interconnected through a series of links or hyperlinks that users can activate to jump from one piece of information to another

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Web Pages and Web Servers

Each document on the web is referred to as a web page

Web pages are stored on web servers

Documents on the web are accessed through a software program called a web browser

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing HTML

A Web page is a text file written in HTML (Hypertext Markup Language)

A markup language describes the content and structure of a document by identifying, or tagging, different document elements

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The History of HTML

In the early years of HTML, browser developers were free to define and modify the language as no rules or syntax were defined

The World Wide Web Consortium, or the W3C, created a set of standards or specifications for all browser manufacturers to follow

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The History of HTML (continued 1)

The W3C has no enforcement power

The recommendations of the W3C are usually followed since a uniform approach to Web page creation is beneficial to everyone

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The History of HTML (continued 2)

XHTML (Extensible Hypertext Markup Language) is a different version of HTML enforced with a stricter set of standards

HTML5 was developed as the de facto standard for the next generation of HTML

Older features of HTML are often deprecated, or phased out; you may need to use them if you are supporting older browsers

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The History of HTML (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tools for Working with HTML

Basic text editor such as Windows Notepad

Other HTML editors such as Notepad++, UltraEdit, CoffeeCup, BBEdit, and ConTEXT

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Tools for Working with HTML (continued)

IDE (Integrated Development Environment) - A software package that provides comprehensive coverage of all phases of the development process from writing HTML code to creating scripts for programs running on web servers

Validators are programs that test code to ensure that it contains no syntax errors

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring an HTML File

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The Document Type Declaration

The first line in an HTML file is the document type declaration, or doctype, that indicates the type of markup language used in the document

<!DOCTYPE html>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Element Tags

Element tag is the fundamental building block in every HTML document that marks an element in the document

A starting tag (<element>) indicates the beginning of an element, while an ending tag (</element>) indicates the ending

The general syntax of a two-sided element tag is

<element>content</element>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Element Tags (continued)

The following code marks a paragraph element

<p>Welcome to Curbside Thai.</p>

Empty elements are elements that are either nontextual (images) or contain directives to the browser about how the page should be treated

For example, <br /> is used to indicate the presence of a line break in the text

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The Element Hierarchy

<!DOCTYPE html>

<html>

<head>

head content

</head>

<body>

body content

</body>

</html>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The Element Hierarchy (continued)

An HTML document is divided into two main sections: the head and the body

The head element marks information about the document

The body element marks the content that will appear in the web page

The body element is always placed after the head element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Element Attributes

Element attributes provide additional information to the browser about the purpose of the element

The general syntax of an element attribute is

<element attr1=”value1” attr2=”value2” ...> content</element>

where attr1, attr2, etc. are the names of attributes associated with the element and value1, value2, etc., are the attribute values

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Handling White Space

HTML file documents are composed of text characters and white space

A white-space character is any empty or blank character such as a space, tabs, or a line break

You can use white space to make your file easier to read by separating one code block from another

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Viewing HTML File in a Browser

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Viewing HTML File in a Browser (continued)

HTML describes a document’s content and structure, but not its appearance

The actual appearance of the document is determined by style sheets

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating the Document Head

The document head contains metadata

Metadata is the content that describes or provides information about how the document should be processed by the browser

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating the Document Head (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Page Title

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Metadata to the Document

Meta element is used for general lists of metadata values.

The meta element structure is

Character encoding is the process by which a computer converts text into a sequence of bytes and vice versa when it stores the text and when the text is read.

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Metadata to the Document (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Comments to Your Document

A comment is descriptive text that is added to the HTML file but does not appear in the browser window

Comments can be spread across several lines

It is a good practice to always include a comment in the document head

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Comments to your Document (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Writing the Page Body

HTML marks the major topical areas of a page using sectioning elements also referred to as semantic elements.

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Comparing Sections in HTML4 and HTML5

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Grouping Elements

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Text-Level Elements

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Linking an HTML Document to a Style Sheet

A style sheet is a set of rules specifying how page elements are displayed; it is written in the Cascading Style Sheet (CSS) language

To link an HTML document to an external style sheet file, add the following element:

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Character Sets and Special Characters

Character set is a collection of characters and symbols rendered by the browser

Character encoding associates each character from a character set that can be stored and read by a computer program

Character entity reference is also used to insert a special symbol using the syntax

&char;

where char is the character’s entity reference

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Inline Images

To support embedded content, content imported from another resource, HTML provides embedded elements

Inline images are images that are placed like text-level elements in line with the surrounding content

To embed an inline image into the document, use

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Lists

List is a type of grouping element

Ordered lists are used for items that follow some defined sequential order, such as items arranged alphabetically or numerically

Unordered lists are used for lists in which the items have no sequential order

Description lists contain a list of terms and matching descriptions

Navigation lists are unordered lists of hypertext links placed within the nav element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Hypertext Links

Hypertext is created by enclosing content within a set of opening and closing <a> tags like:

<a href=“url”>content</a>

where url is Uniform Resource Locator (URL)

Inline images can also be turned into links by enclosing the image within opening and closing <a> tags

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Linking to the Internet and Other Resources

The type of resource that a hypertext link points to is indicated by the link’s URL

scheme: location

where scheme indicates the resource type and location provides the resource

Protocol is a set of rules defining how information is passed between two devices

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Linking to the Internet and Other Resources (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Linking to a Web Resource

Links to Web resources have a general structure like:

http://server/path/filename#id

where server is the name of the web server hosting the resource, path is the path to the file on that server, filename is the name of the file, and if necessary, id is the name of an id within a file

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Linking to an E-Mail Address

E-mail address can be turned into a hypertext link using the URL:

mailto : address

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Linking to a Phone Number

Many developers include links to phone numbers for their company’s customer service or help line

The URL for a phone link is

tel : phone

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition