XHTML 2

MDST 3559: DataestheticsProf. Alvarado

02/03/2011

Business

• Regarding “Assignments”– During the Basic Skills segment of the course,

assignments will be given each Thursday to be due the following Monday

– Except for Week 7, where the assignment will be handed out on Tuesday and due Thursday

Review• Documents have three layers: content,

structure, and layout.• Structure consists of elements and relationships• Relationships can be trees or networks.• Markup languages describe this structure for

computational use• XML is a general markup language or

“metalanguage.”• HTML is a specific markup language. designed

for created networked hypermedia documents.

How does HTML support trees? Networks?

Trees as nested document elements, e.g. P, TABLE, UL

Networks as hypertext elements, e.g. A, IMG

Overview

Today we ...• Continue with our learning of HTML• Enhance jEdit with plugins• Install an FTP client to upload images• Create pages on STUDIO1 accounts• Learn basic CSS

jEdit

Add plugins to your editor1. Go to “Plugins > Plugin Manager ...” to open dialog box.2. Select “Install” tab.3. Select the following:

1. FTP 2. InfoViewer3. PHPParser4. Sidekick5. XML6. XML Indenter7. CSS Editor

4. Press the “Install” button.

Testing jEdit

• Use jEdit to log in to your STUDIO1 account– STUDIO1 is a server set up for this class– Address: studio1.shanti.virginia.edu

• Do this:– Go go “File > Open” (or press Ctrl-O or use icon)– Select “Plugins > FTP > Secure FTP Server” as the very top

• Data to use– Remote host: see above– User name: your UVA user id– Password: your blue unix password

• Leave the rest as is and press “OK”• Click on the public_html and then “index.html”

Install an test FTP client

• If you do not have one, use FileZilla – See post on course site for URL

• Open FileZilla• Go to “File > Site Manager” and select “New Site”• Call the site “STUDIO1”• Set the following:

– Host: studio1.shanti.virginia.edu (same as before)– Servertype: SFTP– Logontype: Normal– User and password same as before

FTP Client

• Inspect items on left and right windows– These are the file systems on your laptop and the server – Become familiar with this structure

• About the terms “client” and “server”– Client refers to software on the client machine– Server refers to software on the server machine– Networked applications have client and server

components• WWW, MySQL, FTP, etc.

• “Remote” and “Local” are related terms

About Addresses

• This FTP location ...sftp://studio1.shanti.virginia.edu

/home/USERID/public_html

• ... maps onto this web locationhttp://studio1.shanti.virginia.edu/~USERID

• Note:– Different protocol prefixes: http vs sftp– Same machine addresses: studio1 ...– Different paths (but which map):

/~rca2t /home/rca2t/public_html

Exercise 1: Hello, World

• You already have an index page in your site.– The URL for the page is:

http://studio1.shanti.virginia.edu/~userid/

– index.html is a the default page for your site; it does not need to be specified

• Convert this page into a standard HTML page with the following structure:– html

• head– title

• body– h1– p

• Give it a title “Hello, World” and and use this as the H1 text

Exercise 2: Add a link

• Create a new page.– In jEdit, press Ctrl-N and then save the file as

“page2.html” or something.– Save the file – using Ctrl-S – noting that it allows

you to save your new file in the remote directory.• Create a link (aka anchor) from index.html to

page2.html

Exercise 3: Add an image

• Download an image from the internet• Upload to your site using FTP• In index.html, create an image element (IMG)

and use the uploaded filename as the source (SRC) attribute

• Create a link from the image to the second page you created.

Exercise 4: Create a table

• In your second page, add a table element and use it to organize two images

• A table has the following structure:<table>

<tr><td>STUFF GOES HERE</td><td>STUFF GOES HERE</td>

</tr></table>

CSS

Adding Style

CSS

• “Cascading Style Sheets”• Allows you to add styles to HTML– Each level has its language ...

• Styles include:– Font characteristics– Line characteristics– Text block – Background colors and images– Etc.

<html><head>

<title>I’m an HTML document</title></head><body>

<h1>Here is the first header</h1><p>Here is some conent</p>

</body></html>

Standard HTML Doc

<html><head>

<title>I’m an HTML document</title></head><body>

<h1>Here is the first header</h1><p>Here is some content:</p><h1><p>Some Text I want to

emphasize.</p></h1>

</body></html> What not to do!

<html><head>

<title>I’m an HTML document</title></head><body>

<h1>Here is the first header</h1><p>Here is some conent</p><div style=“font-size:14pt;"><p>Some Text I want to

emphasize.</p></div>

</body></html> Instead, use CSS

<html><head>

<title>I’m an HTML document</title><style type="text/css">div {

font-size:14pt;font-weight:bold;

}</style>

</head><body>

<h1>Here is the first header</h1><p>Here is some conent</p><div>

<p>Some Text I want to emphasize.</p></div>

</body></html>

Better yet, put CSS here

<html><head>

<title>I’m an HTML document</title><style type="text/css">.foo {

font-size:14pt;font-weight:bold;

}</style>

</head><body>

<h1>Here is the first header</h1><p>Here is some conent</p><div class=“foo”><p>Some Text I want to

emphasize.</p></div>

</body></html>

with CSS in header using class attribute

<html><head>

<title>I’m an HTML document</title><link rel=“stylesheet”

type=“text/css” href=“default.css” /></head><body>

<h1>Here is the first header</h1><p>Here is some conent</p><div><p>Some Text I want to emphasize.</p></div>

</body></html> Even better: CSS in linked file

default.css

.foo {font-size:14pt;font-weight:bold;

}

This is what the content of the default.css file would look like.

CSS Syntax: Selectors

.foo {font-size:14pt;font-weight:bold;

}

The “selector” indicates what elements the styles apply to. Can address element names, classes, and ID.

CSS Syntax: Selectors

#foo {font-size:14pt;font-weight:bold;

}

Here the selector finds an element with an ID attribute with the value “foo” …

e.g. <div id=“foo”>Hey.</div>

Example selectors

p Any p elementp.fooAny p element with a class of foo.foo Any element with a class of foo#foo The element with an id of foo

CSS Syntax: Declarations

.foo {font-size:14pt;font-weight:bold;

}

The “declarations” specify properties and values to apply to the element.

Form = property-name: value;

Example Directives

font-family: Georgia, Garamond, serif;color: blue;color: #eeff99;background-color: gray;border: 1px solid black;padding: 5px;margin: 5px;

Basic Idea• A CSS file is just a series of “rules”• A CSS rule has two parts– A selector to identify elements (tag name, class,

id)– One or more declarations of style

• CSS rules have a simple syntax– Selectors followed by curly braces– Key/value pairs separated by colons– Rules separated by semi-colons

Basic idea

• You can apply any number of rules to a document

• Rules may appear in attributes, headers, or external files

• Rules are “cascaded”– Later ones inherit previous ones– Later ones have precedence (can overwrite)

earlier ones

Exercise 4: Adding Style

• Create a style element in the head of your first page<style type=“text/css”>

body {...

}</style>

• Change the background color of your page– Use the CSS list in today’s materials

• Change the font of your header

Exercise 5: Create a separate stylesheet

• Create a new page in jEdit called “default.css”• Cut and paste the contents of your STYLE

element into your new css file• Create a LINK element in the HEAD of each

document and link to this stylesheet<link rel=“stylesheet” type=“text/css” href=“default.css” />

• Remove the STYLE elements from the HEAD of your page

Assignment (to be posted)• Create a page collection in your STUDIO1 directory with the following items:

– Main page main1.html– Topic page 1 main1-topic1.html– Topic page 2 main1-topic2.html

• For each page, create a TITLE element and an H1 element, titling each page as your wish.

• In Topic page 1– Embed two visualizations– Write 250 words of context

• In Topic page 2– Create a gallery of 4 images using a 2 x 2 tables

• Create a common style sheet for each page and define font and color styles for the following elements:– BODY, H1, and P

• Create a common menu in each page that links to the other pages