This document provides instructions for students taking an XHTML course. It discusses assignments, document structure, HTML support for trees and networks, and an overview of topics to be covered in class including using the jEdit editor, installing FTP clients, basic CSS, and exercises to create webpages and style them using CSS. Students are asked to create a simple page collection with topics and common styling.

1. XHTML 2 MDST 3559: DataestheticsProf. Alvarado02/03/2011

2. 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

3. Review Documents have three layers: content, structure, and layout. Structure consists of elementsand 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.

4. How does HTML support trees? Networks?

5. Trees as nested document elements, e.g. P, TABLE, ULNetworks as hypertext elements, e.g. A, IMG

6. 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

7. jEdit Add plugins to your editor Go to “Plugins > Plugin Manager ...” to open dialog box. Select “Install” tab. Select the following: FTP InfoViewer PHPParser Sidekick XML XML Indenter CSS Editor Press the “Install” button.

8. 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”

9. 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

10. 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

11. About Addresses This FTP location ... sftp://studio1.shanti.virginia.edu /home/USERID/public_html ... maps onto this web location http://studio1.shanti.virginia.edu/~USERID Note: Different protocol prefixes: http vssftp Same machine addresses: studio1 ... Different paths (but which map): /~rca2t  /home/rca2t/public_html

12. 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

13. 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

14. 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.

15. 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>

16. CSS Adding Style

17. 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.

18. <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

19. <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!

20. <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

21. <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

22. <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

23. <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

24. default.css .foo { font-size:14pt; font-weight:bold; } This is what the content of the default.css file would look like.

25. 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.

26. 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>

27. Example selectors p Any p element p.foo Any p element with a class of foo .foo Any element with a class of foo #foo The element with an id of foo

28. 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;

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

30. 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

31. 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

32. 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

33. 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

34. 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