Transcript MYCH_03 - EHSWebDesign

Exercise 3
Key Terms
Attribute
Cascading Style
Sheet CSS
Closing Switch
Closing Tag
Code View
Design View
Live View
Element
Head
HTML
Exercise 3
More Key Terms
HTML Tag
Insertion Point
Keywords
Line break
Nest
One-sided tag
Opening tag
Schema
Styles
Syntax
Value
XML
Wicket
XHTML
Exercise 3
HTML (Hypertext Markup Language) is a scripting
language-or code-you use to create pages that can be
viewed with a Web browser. Nearly every item on a Web
page-including text, formatting, pictures, and other page
elements-is controlled by HTML coding.
In addition to HTML coding, Web pages may also
incorporate Java scripts, CotdFusion's CFML code,
ActiveX, and other specialized Web page coding
designed for different kinds of dynamic or interactive
application and content. These codes, too, can be
applied and edited in Dreamweaver.
Unlike some programming languages, HTML is textbased and easy to read and follow. Even developers
with little programming experience can read and
generally understand what's happening in HTML code.
Exercise 3
Dreamweaver CS4 supports XHTML (Extensible Hypertext
Markup Language). XHTML Is a reformulation of the most
current version of HTML (HTML 4.0) that uses XML
(Extensible Markup Language).
XML is a language that uses tags to structure information,
similar to HTML. Unlike HTML, however, XML allows you
to create your own tags to fit your information more
specifically.
XHTML was developed to answer a need for a stricter
version of HTML that could be used to deliver content
across a wide variety of devices: not merely computer
browsers, but also mobile phones, laptops, PDAs, and so
on. XHTML combines the standard HTML structure with
the power and flexibility of XML.
By default, Dreamweaver saves new Web pages as
XHTML Transitional documents and applies any code
necessary to meet XHTML requirements, such as
including an XHTML DOCTYPE declaration in the Head
section of the document.
Exercise 3
HTML documents have a standard structure that
consists of two sections: a Head section and a
Body section.
The Head section contains information that
browsers need to display the Web page, such as
the page title and the character set used to create
the page. None of the information in the Head
section appears in the browser except the page
title, which displays in the browser's title bar.
The Body section contains the actual Web page
content, such as the page's headings, paragraphs,
and pictures.
Exercise 3
HTML coding instructions are delivered to the browser by
means of HTML tags
HTML tags have a specific structure, or syntax:
The first part of an HTML tag is the left Wicket <.
Next is the tag element, or name, such as title or H2.
Tag attributes may follow the tag element. For example, the
align="left" information that follows the h1 tag in line is the
attribute that controls the alignment of the text.
<h1>Welcome to GardenScape</h1>
Last is the right wicket >.
HTML tags may be written with all capital letters or all
lowercase letters. Dreamweaver's tags are all lowercase,
so that convention will be used in this book.
Most HTML codes require both an opening tag and a closing
tag. The opening tag instructs the browser to begin displaying
a format or feature for example, <title>.
Exercise 3
Tags may be nested to supply additional formatting to text.
For example, in the following HTML code,
the word three will appear In Italics in the paragraph:
<p>We also have <i>three</i> award winning landscape
designers on staff!</p>
<h1>Welcome to GardenScape!</h1>
Don't forget the closing switch when nesting tags, or
applied formats will not be "turned off “
Some HTML tags are one-sided tags (also called standalone
or empty tags). One-sided tags do not require a closing tag.
The <br> (line break) tag is a one-sided tag.
Exercise 3
Tag attributes modify a tag element by supplying addltionai
instructions to the browser about how to display an
element.
Attributes appear within HTML tags, usually between the
tag element and the right wicket.
Attributes often include values that give specific
Instructions to the browser. Attribute values are usually
enclosed in quotation marks.
"'
Typically, attributes are not repeated in closing tags.
In the following HTML code, for example, the tag element
is font. The size attribute tells the browser to display a
specific size. The value is "4", and this is the exact size the
browser will display.
<font size="4">
Exercise 3
Today cascading style sheets (CSS) are
considered the standard for formatting Web
pages. Using CSS, a designer can format a page
precisely using styles. Styles are saved
instructions that tell the Web browser how to
display the styled element.
Styles can be used to format text and headings,
tables, blocks of type on a page, and images, and
even change the default formats of HTML tags.
As a result of the widespread use of CSS, many
standard HTML tags have been deprecated in
recent versions of HTML. This means that,
although they are still supported by most
browsers,they may not be supported for much
longer. The <font> tag is one of these tags.
Exercise 3
In later exercises, when you learn how to validate the
markup language in your site, you may be warned that
<font> is deprecated and you should instead consider
using CSS styles to format text.
By default, Dreamweaver is set up to create CSS styles for
you when you apply formats to text. This means that if you
check the code after applying formats to a page, you will
not see HTML tags, attributes, and values such as those
discussed in previous sections of this exercise. You will
instead see CSS style definitions.
When you apply formats to text on a Web page,
Dreamweaver CS4 prompts you to create a CSS
style that you can also use on other pages in the
site
Exercise 3 - XML
XML is an acronym for Extensible Markup
Language. XML is a markup language similar to
HTML in that it can be used as the basis for
structuring and working with data on your Web
pages.
XML is first and foremost a data tagging system
that enables you to identify information as a
specific data type; this enables you to code
information for easy storage and retrieval. You can
use XML to
tag page and form content as well as to display
page content in a specific context (for example, as
the result to the search a user performs on your
site).
.
Exercise 3 - XML
XML separates the data and the format in which it
is displayed. The format coding for XML data is
stored separately from the XML data; this enables
you to apply a variety of formats to the XML data
by simply attaching different style sheets. These
style sheets are known as XSLTs (Extensible
Stylesheet Language Transformations).
XSL is to XML what CSS is to the information on
your Web page. The XSL is applied to the page
when you attach an XSLT. In Dreamweaver you
attach the XSLT to the XML data.
You can create an XML page from the
Dreamweaver
Getting Started window or you can choose
File> New and click XML
Exercise 3
A newly created XML file has only one line of
code:
The XML declaration is Inserted at the top of the
file. This line lets Dreamweaver know the file Is
an XML file.
You use XML tags to Identify the Individual data
elements In the code. The coding system Is
similar to HTML In that there are open tags and
close tags that Include the / character.
Dreamweaver supports code hinting for XML, and
after you have entered a full tag, with the open
and close tags, the program will offer the code In
a popup list like the one you see In the following
illustration.
You can complete the tag by pressing Enter.
Exercise 3 - Keywords
To make sure others can find and visit your
site, you can supply keywords on your pages
that search engines use to index a site in their
databases.
You add keywords to the Head section of a site
using a <meta> tag.
To add a <meta> tag containing keywords to
your home page, use the Insert> HTML >
Head Tags> Keywords menu command to
open the Keywords dialog box.
Here you can type the keywords that
summarize your site's subject.
Exercise 3
Use Effective Keywords
One of the most important aspects of creating
anew Web site is to identify keywords that will
help potential visitors find your site using a search
engine.
Keyword research is an important strategy for
creating a new Web site.
Learn about Keywords
Think about your goals in creating your site.
Identify five or six words that you think will bring
visitors to your site.
Exercise 3
Dreamweaver automatically inserts a line space after a
paragraph, so you do not have to double-space between
paragraphs as you might do in a word-processing document.
If you do not want the default space to appear after a
paragraph, you can insert a line break rather than a
paragraph break.
For easy access to the break tag (and other special
characters), click the arrow below the Insert panel tab and
click Text to display the Text panel. Clicking the BR button on
the Text panel inserts the
HTML <br> (Break) tag, which creates a new line but not a
new paragraph.
You can also insert this tag as you type by pressing the Shift +
Enter key combination.
Exercise 3
You can format the text in a Dreamweaver document with
standard HTML paragraph and heading tags that control
font style and size.
By default, all new text is formatted with the Paragraph
format. This format equates to the HTML <p>
(Paragraph) tag.
You can use the Property inspector panel to apply other
formats, including three levels of headings and the
preformatted font that can be used to display program
code
You also use the elements in the Text list in the Insert
panel to change the format of text on the page.
Exercise 3
By default, the Document window displays page content in
Design view. In Design view, content looks almost identical to
the way it will appear in a browser.
WYSIWYG
When you switch to Code view, the page content's HTML
coding appears.
You can write or edit HTML code while working in Code view.
Click anywhere in the paragraph you want to format and click
the Format list arrow on the Property inspector to display the
list of paragraph and heading formats. Or, you can choose the
format and
then begin typing. The format is applied automatically
to the new text.
Heading levels are ordered from largest (Heading 1) to
smallest (Heading 6)