(X)HTML WITH EXPRESSION WEB Mark Frydenberg Technology Intensive IT 101, Bentley College

Concepts HTML XHTML Hypertext Hyperlink Deprecated Tags Attributes Style sheet CSS Layers EW: Interactive Buttons EW: Dynamic Web Templates Local Reference Relative Reference Absolute Reference Microsoft Expression Web WYSIWYG Released May, 2006 Beta 1: Sept, 2006 Public: Dec. 2006

HTML

XHTML

Hypertext

Hyperlink

Deprecated

Tags

Attributes

Style sheet

CSS

Layers

EW: Interactive Buttons

EW: Dynamic Web Templates

Local Reference

Relative Reference

Absolute Reference

Microsoft Expression Web

WYSIWYG

Released May, 2006

Beta 1: Sept, 2006

Public: Dec. 2006

Microsoft Expression Web Microsoft ® Expression ® Web is a professional design tool to create modern, standards-based sites that deliver superior quality on the Web.

Microsoft ® Expression ® Web is a professional design tool to create modern, standards-based sites that deliver superior quality on the Web.

Why XHTML? Use XML to describe data. Use HTML to display data. XHTML Works in all browsers Backward browser compatible Pages can be read by all XML enabled devices (phones, PDAs, browsers) Documents must be &quot;well-formed&quot; XHTML tags must be properly nested closed lowercase Attributes must be lower case quoted Examples <img src=&quot;pic.jpg&quot; /> <a href=&quot;page2.htm&quot;>Page 2</a> http://www.w3schools.com/xhtml/xhtml_why.asp

Use XML to describe data.

Use HTML to display data.

XHTML

Works in all browsers

Backward browser compatible

Pages can be read by all XML enabled devices (phones, PDAs, browsers)

Documents must be &quot;well-formed&quot;

XHTML tags must be

properly nested

closed

lowercase

Attributes must be

lower case

quoted

Examples

<img src=&quot;pic.jpg&quot; />

<a href=&quot;page2.htm&quot;>Page 2</a>

Local References File, web page, or image is in the same folder as the page referencing it <img src=&quot;mypic.jpg&quot; /> <a href=&quot;page2.htm&quot;>Page 2</a> Attributes name=&quot;value&quot;

File, web page, or image is in the same folder as the page referencing it

<img src=&quot;mypic.jpg&quot; />

<a href=&quot;page2.htm&quot;>Page 2</a>

Relative References File, web page, or image is in a subfolder of the page referencing it <img src=&quot;images/mypic.jpg&quot;/> <a href=&quot;project/projecthome.htm&quot;>Project Home</a>

File, web page, or image is in a subfolder of the page referencing it

<img src=&quot;images/mypic.jpg&quot;/>

<a href=&quot;project/projecthome.htm&quot;>Project Home</a>

Absolute References File, web page, or image somewhere else on the World Wide Web <img src=&quot;http://www.catfacts.org/cat-facts.jpg&quot; /> <a href=&quot;http://www.bentley.edu&quot;>Bentley</a>

File, web page, or image somewhere else on the World Wide Web

<img src=&quot;http://www.catfacts.org/cat-facts.jpg&quot; />

<a href=&quot;http://www.bentley.edu&quot;>Bentley</a>

Common HTML Tags Headers <h1> … </h1> through <h5> … </h5> Horizontal Line <hr /> Paragraph <p> </p> Line Break <br> </br> (or <br/> ) Preformatted <pre> </pre> Big Text <big> </big> Bold <b> </b> Emphasis <em> </em> More <strong> </strong>

Headers

<h1> … </h1> through <h5> … </h5>

Horizontal Line

<hr />

Paragraph

<p> </p>

Line Break

<br> </br> (or <br/> )

Preformatted

<pre> </pre>

Big Text <big> </big>

Bold <b> </b>

Emphasis <em> </em>

More <strong> </strong>

Lists <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> Item 1 Item 2 Item 3 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Item 1 Item 2 Item 3 Ordered (Numbered) Unordered (Bulleted)

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

Item 1

Item 2

Item 3

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Item 1

Item 2

Item 3

Ordered (Numbered)

Unordered (Bulleted)

Tables <table style=&quot;width: 100%&quot; class=&quot;style1&quot;> <tr> <td>A</td> <td>B>td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> .style1 { border: 1px solid #008080; background-color: #CCCCFF; } </style>

<table style=&quot;width: 100%&quot; class=&quot;style1&quot;>

<tr>

<td>A</td>

<td>B>td>

</tr>

<tr>

<td>C</td>

<td>D</td>

</tr>

</table>

.style1 {

border: 1px solid #008080;

background-color: #CCCCFF;

}

</style>

Common XHTML Style Attributes color text-decoration text-size font-weight font-style font-family font-size background-color background-image You can string together as many attribute:value pairs as you wish in a single style. Each attribute:value pair must end with a semicolon. style=&quot;attribute:value;attribute:value;&quot;

color

text-decoration

text-size

font-weight

font-style

font-family

font-size

background-color

background-image

You can string together as many attribute:value pairs as you wish in a single style.

Each attribute:value pair must end with a semicolon.

style=&quot;attribute:value;attribute:value;&quot;

Div and Span Defines logical divisions of a page Lets you define a style for a particular section of a page Breaks paragraphs Identifies Layers Changes style of the text it encloses Apply the style to whatever’s in the span, but no paragraph break after Example: Style a specific word to be red This word is <span style=&quot;color: #FF0000;&quot;>red</span> div span

Defines logical divisions of a page

Lets you define a style for a particular section of a page

Breaks paragraphs

Identifies Layers

Changes style of the text it encloses

Apply the style to whatever’s in the span, but no paragraph break after

Example: Style a specific word to be red

This word is <span style=&quot;color: #FF0000;&quot;>red</span>

div

span

Deprecated Tags and Attributes in HTML 4.0: Tags Attributes align=left style=&quot;text-align:left ;&quot; background=cat.jpg style=&quot;background-image: url('http://www.catfacts.org/cat-picture.jpg'); &quot; bgcolor=#FF00FF style=&quot;background-color: #FF00FF; &quot; Deprecated: Use this instead: <center> style=&quot;text-align:center; &quot; <font> … </font> style=&quot;color : #f00; &quot; <u> </u> style=&quot;text-decoration:underline; &quot;

Tags

Attributes

Hyperlink and Image Tags <a href=&quot;mypage.htm&quot;>My Page</a> Common Attributes: href name <a name=“top”>Top</a> <a href=“page.html#top”>Top</a> target=“_blank” (open in new window) <img src=&quot;picture.jpg&quot; /> Common Attributes: src alt height width Hyperlink (Anchor) Image

<a href=&quot;mypage.htm&quot;>My Page</a>

Common Attributes:

href

name

<a name=“top”>Top</a>

<a href=“page.html#top”>Top</a>

target=“_blank” (open in new window)

<img src=&quot;picture.jpg&quot; />

Common Attributes:

src

alt

height

width

Hyperlink (Anchor)

Image

Colors XHTML allows these 16 color names . Web Safe RGB Values (Older) Browser-Specific Names color: #ff6600; color: red; color: #ff0000; color: rgb(100%, 0%, 0%); Each RGB values ranges from 0 to 255

XHTML allows these 16 color names .

Web Safe RGB Values

(Older) Browser-Specific Names

color: #ff6600;

color: red;

color: #ff0000;

color: rgb(100%, 0%, 0%);

Each RGB values ranges from 0 to 255

CSS In line (this tag) Internal (this page) External (this site) To create a style sheet: File  New  CSS Save it as YourNameStyles.css Add it to all pages in your web site Add styles to the style sheet

In line (this tag)

Internal (this page)

External (this site)

To create a style sheet:

File  New  CSS

Save it as YourNameStyles.css

Add it to all pages in your web site

Add styles to the style sheet

Inline Styles Inline styles appear as a style attribute of the tag being styled Use it once to style individual elements <p style=&quot;font-family: Arial Black; font-size: 20px; font-weight: bold; color: #FF0000&quot; > This is an inline style</p>

Inline styles appear as a style attribute of the tag being styled

Use it once to style individual elements

<p style=&quot;font-family: Arial Black; font-size: 20px; font-weight: bold; color: #FF0000&quot; > This is an inline style</p>

Internal Styles Define in the head section of the document Can re-use styles within the document <head> <meta http-equiv=&quot;Content-Language&quot; content=&quot;en-gb&quot; /> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot; /> <title>Internal Style</title> <style type=&quot;text/css&quot;> p { font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-variant: small-caps; color: #0000FF; } </style> </head> <body> <p>This text is controlled by an internal style.</p> <p> Here is more text controlled by the same internal style.</p> </body> </html>

Define in the head section of the document

Can re-use styles within the document

<head> <meta http-equiv=&quot;Content-Language&quot; content=&quot;en-gb&quot; /> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=windows-1252&quot; /> <title>Internal Style</title> <style type=&quot;text/css&quot;> p { font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-variant: small-caps; color: #0000FF; } </style> </head> <body> <p>This text is controlled by an internal style.</p>

<p> Here is more text controlled by the same internal style.</p> </body> </html>

External Styles Style syntax is the same as inline and internal styles Share styles among web pages by attaching a style sheet to each page in the web site using the link tag Identify the style by its name (no style tags in the HTML document) <p class=&quot;cssexample&quot;> StyleSheet.css : .cssexample { font-family: Courier New, Courier, monospace; border-style: dashed; border-width: 1px; border-color: #FF6600; padding: 5px; background-color: #FFFFCC; } < link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;MarkStyles.css&quot; />

Style syntax is the same as inline and internal styles

Share styles among web pages by attaching a style sheet to each page in the web site using the link tag

Identify the style by its name (no style tags in the HTML document)

<p class=&quot;cssexample&quot;>

StyleSheet.css :

.cssexample { font-family: Courier New, Courier, monospace; border-style: dashed; border-width: 1px; border-color: #FF6600; padding: 5px; background-color: #FFFFCC; }

Styling Hyperlinks a:link { } a:visited { } a:hover { } a:active { } Hover is useful for creating rollovers Order of defining styles for links is important: LoVe/HAte

a:link { } a:visited { } a:hover { } a:active { }

Hover is useful for creating rollovers

Order of defining styles for links is important:

LoVe/HAte

Interactive Buttons Insert Interactive Button Set button properties Save the page. Change folder for saving button images to one within your web site What HTML code does this generate?

Insert Interactive Button

Set button properties

Save the page.

Change folder for saving button images to one within your web site

Layers Any absolutely positioned page element is a layer . Position is taken from top/left of browser window. Layers generate a div tag Design areas of the site in layers Create a navigation bar layer Create a content layer Use layers with a dynamic web template to specify content regions to be copied to each page <!-- #BeginEditable &quot;contentregion&quot; --> <div style=&quot;position: absolute; width: 600px; height: 400px; z-index: 2; left: 136px; top: 67px&quot; id=&quot;layer2&quot;> This is the main content.</div> <!-- #EndEditable -->

Any absolutely positioned page element is a layer .

Position is taken from top/left of browser window.

Layers generate a div tag

Design areas of the site in layers

Create a navigation bar layer

Create a content layer

Use layers with a dynamic web template to specify content regions to be copied to each page

<!-- #BeginEditable &quot;contentregion&quot; -->

<div style=&quot;position: absolute; width: 600px; height: 400px; z-index: 2; left: 136px; top: 67px&quot; id=&quot;layer2&quot;>

This is the main content.</div>

<!-- #EndEditable -->

Dynamic Web Templates/ Editable Regions Use a DWT to specify an overall Web-site design. When you edit individual pages, you can modify regions designated on the template as editable. Create a Dynamic Web Template. Attach the template to individual web pages in your site. Match regions (i.e., body tag to a content region) EW will ask you if you want to update pages in the site when your template changes.

Use a DWT to specify an overall Web-site design.

When you edit individual pages, you can modify regions designated on the template as editable.

Create a Dynamic Web Template.

Attach the template to individual web pages in your site.

Match regions (i.e., body tag to a content region)

EW will ask you if you want to update pages in the site when your template changes.