Mdst 3559-02-01-html

571 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
571
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mdst 3559-02-01-html

  1. 1. XHTML 2<br />MDST 3559: DataestheticsProf. Alvarado02/03/2011<br />
  2. 2. Business<br />Regarding “Assignments”<br />During the Basic Skills segment of the course, assignments will be given each Thursday to be due the following Monday<br />Except for Week 7, where the assignment will be handed out on Tuesday and due Thursday<br />
  3. 3. Review<br />Documents have three layers: content, structure, and layout.<br />Structure consists of elementsand relationships<br />Relationships can be trees or networks.<br />Markup languages describe this structure for computational use<br />XML is a general markup language or “metalanguage.”<br />HTML is a specific markup language. designed for created networked hypermedia documents.<br />
  4. 4. How does HTML support trees? Networks?<br />
  5. 5. Trees as nested document elements, e.g. P, TABLE, ULNetworks as hypertext elements, e.g. A, IMG<br />
  6. 6. Overview<br />Today we ...<br />Continue with our learning of HTML<br />Enhance jEdit with plugins<br />Install an FTP client to upload images<br />Create pages on STUDIO1 accounts<br />Learn basic CSS<br />
  7. 7. jEdit<br />Add plugins to your editor<br />Go to “Plugins > Plugin Manager ...” to open dialog box.<br />Select “Install” tab.<br />Select the following:<br />FTP <br />InfoViewer<br />PHPParser<br />Sidekick<br />XML<br />XML Indenter<br />CSS Editor<br />Press the “Install” button.<br />
  8. 8. Testing jEdit<br />Use jEdit to log in to your STUDIO1 account<br />STUDIO1 is a server set up for this class <br />Address: studio1.shanti.virginia.edu<br />Do this:<br />Go go “File > Open” (or press Ctrl-O or use icon)<br />Select “Plugins > FTP > Secure FTP Server” as the very top<br />Data to use<br />Remote host: see above<br />User name: your UVA user id<br />Password: your blue unix password<br />Leave the rest as is and press “OK”<br />Click on the public_html and then “index.html”<br />
  9. 9. Install an test FTP client<br />If you do not have one, use FileZilla<br />See post on course site for URL<br />Open FileZilla<br />Go to “File > Site Manager” and select “New Site”<br />Call the site “STUDIO1”<br />Set the following:<br />Host: studio1.shanti.virginia.edu (same as before)<br />Servertype: SFTP<br />Logontype: Normal<br />User and password same as before<br />
  10. 10. FTP Client<br />Inspect items on left and right windows<br />These are the file systems on your laptop and the server <br />Become familiar with this structure<br />About the terms “client” and “server”<br />Client refers to software on the client machine<br />Server refers to software on the server machine<br />Networked applications have client and server components<br />WWW, MySQL, FTP, etc.<br />“Remote” and “Local” are related terms<br />
  11. 11. About Addresses<br />This FTP location ...<br />sftp://studio1.shanti.virginia.edu<br />/home/USERID/public_html<br />... maps onto this web location<br />http://studio1.shanti.virginia.edu/~USERID<br />Note:<br />Different protocol prefixes: http vssftp<br />Same machine addresses: studio1 ...<br />Different paths (but which map):<br />/~rca2t  /home/rca2t/public_html<br />
  12. 12. Exercise 1: Hello, World<br />You already have an index page in your site.<br />The URL for the page is:<br />http://studio1.shanti.virginia.edu/~userid/<br />index.html is a the default page for your site; it does not need to be specified<br />Convert this page into a standard HTML page with the following structure:<br />html<br />head<br />title<br />body<br />h1<br />p<br />Give it a title “Hello, World” and and use this as the H1 text<br />
  13. 13. Exercise 2: Add a link<br />Create a new page.<br />In jEdit, press Ctrl-N and then save the file as “page2.html” or something.<br />Save the file – using Ctrl-S – noting that it allows you to save your new file in the remote directory.<br />Create a link (aka anchor) from index.html to page2.html<br />
  14. 14. Exercise 3: Add an image<br />Download an image from the internet<br />Upload to your site using FTP<br />In index.html, create an image element (IMG) and use the uploaded filename as the source (SRC) attribute<br />Create a link from the image to the second page you created.<br />
  15. 15. Exercise 4: Create a table<br />In your second page, add a table element and use it to organize two images<br />A table has the following structure:<br /><table><br /><tr><br /><td>STUFF GOES HERE</td><br /><td>STUFF GOES HERE</td><br /></tr><br /></table><br />
  16. 16. CSS<br />Adding Style<br />
  17. 17. CSS<br />“Cascading Style Sheets”<br />Allows you to add styles to HTML<br />Each level has its language ...<br />Styles include:<br />Font characteristics<br />Line characteristics<br />Text block <br />Background colors and images<br />Etc.<br />
  18. 18. <html><br /> <head><br /> <title>I’m an HTML document</title><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> </body><br /></html><br />Standard HTML Doc<br />
  19. 19. <html><br /> <head><br /> <title>I’m an HTML document</title><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some content:</p><br /><h1><br /><p>Some Text I want to emphasize.</p><br /></h1><br /> </body><br /></html><br />What not to do!<br />
  20. 20. <html><br /> <head><br /> <title>I’m an HTML document</title><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> <div style=“font-size:14pt;"><br /><p>Some Text I want to emphasize.</p><br /></div><br /> </body><br /></html><br />Instead, use CSS<br />
  21. 21. <html><br /> <head><br /> <title>I’m an HTML document</title><br /><style type="text/css"><br /> div {<br />font-size:14pt;<br /> font-weight:bold;<br /> }<br /> </style><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> <div><br /> <p>Some Text I want to emphasize.</p><br /></div><br /> </body><br /></html><br />Better yet, put CSS here<br />
  22. 22. <html><br /> <head><br /> <title>I’m an HTML document</title><br /><style type="text/css"><br /> .foo {<br />font-size:14pt;<br /> font-weight:bold;<br /> }<br /> </style><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> <div class=“foo”><br /><p>Some Text I want to emphasize.</p><br /></div><br /> </body><br /></html><br />with CSS in header using class attribute<br />
  23. 23. <html><br /> <head><br /> <title>I’m an HTML document</title><br /><link rel=“stylesheet” type=“text/css” href=“default.css” /><br /> </head><br /> <body><br /> <h1>Here is the first header</h1><br /> <p>Here is some conent</p><br /> <div><br /><p>Some Text I want to emphasize.</p><br /></div><br /> </body><br /></html><br />Even better: CSS in linked file<br />
  24. 24. default.css<br />.foo {<br /> font-size:14pt;<br /> font-weight:bold;<br />}<br />This is what the content of the default.css file would look like.<br />
  25. 25. CSS Syntax: Selectors<br />.foo {<br /> font-size:14pt;<br /> font-weight:bold;<br />}<br />The “selector” indicates what elements the styles apply to. Can address element names, classes, and ID.<br />
  26. 26. CSS Syntax: Selectors<br />#foo {<br /> font-size:14pt;<br /> font-weight:bold;<br />}<br />Here the selector finds an element with an ID attribute with the value “foo” …<br />e.g. <div id=“foo”>Hey.</div><br />
  27. 27. Example selectors<br />p Any p element <br />p.foo Any p element with a class of foo<br />.foo Any element with a class of foo<br />#foo The element with an id of foo<br />
  28. 28. CSS Syntax: Declarations<br />.foo {<br /> font-size:14pt;<br /> font-weight:bold;<br />}<br />The “declarations” specify properties and values to apply to the element.<br />Form =property-name: value;<br />
  29. 29. Example Directives<br />font-family: Georgia, Garamond, serif;<br />color: blue;<br />color: #eeff99;<br />background-color: gray;<br />border: 1px solid black;<br />padding: 5px;<br />margin: 5px;<br />
  30. 30. Basic Idea<br />A CSS file is just a series of “rules”<br />A CSS rule has two parts <br />A selector to identify elements (tag name, class, id)<br />One or more declarations of style<br />CSS rules have a simple syntax<br />Selectors followed by curly braces<br />Key/value pairs separated by colons<br />Rules separated by semi-colons<br />
  31. 31. Basic idea<br />You can apply any number of rules to a document<br />Rules may appear in attributes, headers, or external files<br />Rules are “cascaded”<br />Later ones inherit previous ones<br />Later ones have precedence (can overwrite) earlier ones<br />
  32. 32. Exercise 4: Adding Style<br />Create a style element in the head of your first page<br /><style type=“text/css”><br />body {<br /> ...<br />}<br /></style><br />Change the background color of your page<br />Use the CSS list in today’s materials<br />Change the font of your header<br />
  33. 33. Exercise 5: Create a separate stylesheet<br />Create a new page in jEdit called “default.css”<br />Cut and paste the contents of your STYLE element into your new css file<br />Create a LINK element in the HEAD of each document and link to this stylesheet<br /><link rel=“stylesheet” type=“text/css” href=“default.css” /><br />Remove the STYLE elements from the HEAD of your page<br />
  34. 34. Assignment (to be posted)<br />Create a page collection in your STUDIO1 directory with the following items:<br />Main page  main1.html<br />Topic page 1  main1-topic1.html<br />Topic page 2  main1-topic2.html<br />For each page, create a TITLE element and an H1 element, titling each page as your wish.<br />In Topic page 1<br />Embed two visualizations<br />Write 250 words of context<br />In Topic page 2<br />Create a gallery of 4 images using a 2 x 2 tables<br />Create a common style sheet for each page and define font and color styles for the following elements:<br />BODY, H1, and P<br />Create a common menu in each page that links to the other pages<br />

×