Last week we explored information seeking behavior models and began thinking about the relationship between users, information and digital environments. We looked at Information
Architecture briefly and explored the role that information organization plays in constructing information systems. We began a process that we will continue for a large part of the semester - pairing a technology with a concept, theory or business practice related to information infrastructures.
This week we will do this by exploring the world of resource acquisitions alongside an expansion of our understanding of HTML. In doing so we will use our foundational understanding of digital documents and begin working with information system design with a focus on leveraging digital document and metadata to create useable documents. We will work with metadata schema and
JavaScript to create a simple web-based service and will use digital documents using HTML and CSS as the building blocks for understanding the relationships between information architecture and information design.
Work individually or in groups to complete the worksheet. When you get to a section that requires you to select a resource to explore
– pick one resource (please don’t always choose the first one!).
When asked to ‘discuss as a group’, consider your response and continue completing the worksheet.
We’re going to work with computer coding today and here’s an important note as you follow the exercises. Computer code is shown on numbered lines and are enclosed in boxes. The numbered lines are simply to help as a reference during instruction and should not be copied into your program. For example a line that reads 56. p { visibility:hidden; } should simply be typed in as
p { visibility:hidden; }
Metadata Standards and Web Services
Erik Mitchell
Page 1

1. Mitchell, E. (2015). Chapter 3 in Metadata Standards and Web Services in Libraries, Archives, and Museums.
Libraries Unlimited. Santa Barbara, CA.
2. Read: Kernighan, B. (2011). D is for Digital. , Chapter 7: Learning to Program
3. Read: Sheila Corral, The Concept of Collection Development in the Digital World, Chapter 1, in Maggie Fieldhouse and Audrey Marshall, eds. Collection Development in the Digital Age . Great Britain: Facet Publishing, 2012 pp. 3-26.
4. Read Introduction, Literature review, Skim remainder of the article. Cynthia K. Sauer, Doing the Best We Can? The
Use of Collection Development Policies and Cooperative Collecting Activities at Manuscript Repositories, American
Archivist 64(2)308-349, 2001. Available at: http://archivists.metapress.com/content/gj6771215231xm37/fulltext.pdf
5. C. M. Sperberg-McQueen and David Dubin, Data Representation, DH Curation Guide. http://guide.dhcuration.org/representation/
Libraries, Archives, Schools and Museums each focus on the acquisition and management of different categories of resources. Generally speaking this difference may not be as much in the type
(e.g. book, journal, magazine, e-resource, media) but rather in the policies that drive the development of the collection and the overall mission of the institution. School libraries for example serve a different mission and clientele than do academic libraries and Archives tend to collect unique resources with an eye on long-term preservation while public libraries often focus on acquiring resources to serve the immediate needs of their community.
If you have not already, read the Corral and Sauer readings and come back to the worksheet. These articles mention a wide range of issues, trends and collection management activities.
Select a single activity and answer the following questions
Question 1. What issue/trend/activity did you select?
Metadata Standards and Web Services
Erik Mitchell
Page 2

Question 2. Which type of institution (e.g. Library, Archive, School, Museum) does the issue/trend/activity mostly apply to? Why?
Question 3. Write down a 1 sentence description of the issue/trend/activity
In this class we consider two parallel themes, information about collection management, including document management, and information about the design of digital documents themselves. In learning about collection management in LASM institutions we will get a more holistic understanding of the factors that influence how and why we manage our collections. In becoming familiar with this process we discover that our information systems and documents are tightly woven together and that creating information infrastructures that help us manage our resources throughout the information lifecycle and collection management process is a detailed process. Reflect for a moment on the following collection management process and answer the questions related to the issue/trend/activity you studied above
Metadata Standards and Web Services
Erik Mitchell
Page 3

Figure 1 Collection management process
Metadata Standards and Web Services
Erik Mitchell
Page 4

Figure 2 LASM information systems
Question 4. What processes are most impacted by your issue/trend/activity? Why?
Question 5. What information systems are most important in your issue/trend/activity?
Question 6. How has your issue/trend/activity changed over the last 5 years. How will it change these processes/systems the next 5 years?
Spend a few minutes connecting steps in the collection management process with the information systems commonly used with these processes using Table 1. If this looks needlessly complex you are on the right track. There is a trend towards system interoperability simplification in LASM information system design. At the moment the profession is in a gap between these new systems that streamline interoperability and information sharing either through unified deployment on a cloudbased platform or through the use of new design techniques that facilitate implementation of information systems using business process modeling. Ultimately however, this work is made
Metadata Standards and Web Services
Erik Mitchell
Page 5

complex by the fact that LASM institutions are charged with information management in a way that is fundamentally different from other institutions. LASM institutions are called on to be customers of information producers, managers of a diverse set of resources, public service agents to our communities, appraisers of value for our collections and, of course, preservers of information resources. Ensuring that we have good processes and systems to support this work is definitely a non-trivial process!
Table 1 Table of CM processes and related information systems
CM Process
Appraise
Select
Information system types
See data gathering - appraisal systems may include reports that focus on patron use, resource value, content fit or other measure of alignment with institutional mission or operational goals
Miscellaneous systems including book reviews, approval plans, collection development policies.
May use an Electronic Resource Management System (ERMS)
ERMS, Vendor websites, often the Integrated Library System (ILS) for 'traditional' purchasing. Acquire, License
Receive, Process ILS, external vendor databases for metadata records, ERMS for electronic records, Binding platform for print journals that need to be gathered into volumes
Store Institutional Repository (IR) for locally created documents/scholarship, Digital and print archives for storage of master objects, High Density Storage Systems (HDSS) both physical and virtual resources, book shelves for print
Provide Access Discovery platforms, may include locally hosted or cloud-based services, OpenURL resolvers,
Interlibrary Loan and other resource sharing systems
Preserve/Conserve Print preservation usually involves a preservation/conservation lab, preservation in digital arena includes use of automated digital object verification tools including backup, version control, bitchecking software (e.g. Jhove)
Gather Data Materials use databases often located within other systems including ILS (print) e-stats systems
(electronci COUNTER/SUSHI) or web analytics systems (e.g. Google Analytics).
Metadata Standards and Web Services
Erik Mitchell
Page 6

At the end of the day, collection management involves similar issues for libraries, archives, schools and museums (LASM). Given constrained resources LASM institutions need to scope their collection development and acquisition processes to an institutional mission, needs of patrons and patron groups or in support of academic programs. At times LASM institutions have their collection management practices shaped by donors either through funding of through direct gift of collections.
While donor support can be a good thing it can also create difficulties in ongoing collection management and organizational missions for the LASM institution.
Another key factor impacting collection management practice is the shift from print to electronic formats. This shift has required the development of licensing and copyright expertise in LASM professionals, has shaped the strategic planning of LASM institutions at every level (e.g. planning for space, services, financial sustainability, community outreach) and has required new professional literacies to make it possible for librarians and archivists to acquire, process, provide access to, preserve and evaluate these resources.
At its core, these literacies require that LASM professionals have an in depth understanding of how digital documents are created and what information systems are required throughout the document's lifecycle.
Documents can be divided into discrete subcomponents according to its intellectual content.
Encoding systems then allow you to control the content representation, content layout and formatting, interactivity.
HTML documents, jpg images, audio files, and other text and medial documents, when made available via a special application known as a web server, will form a website. In essence, a website
Metadata Standards and Web Services Page 7
Erik Mitchell

is nothing more than a collection of documents that are linked together using the <a> or anchor element. These documents commonly live together on a single file system but as you know from your own use of the web it is very common for links to point to other servers and websites. In fact, this widespread inter-linking of pages is what makes the web work. Much like Bate's Berrypicking model users and computers traverse the web by clicking on links embedded in documents
Let's resume our tour of HTML this week by creating two webpages that link to one another. Open a text or code editor and create the two documents.
Figure 3 Save this document as myfirstpage.html
1. <html>
2. <body>
3. <h1>This is page 1</h1>
4. <p>This webpage is my first page. It links to my <a href="mysecondpage.html">second page</a></p>
5. </body>
6. </html>
Figure 4 Save this document as mysecondpage.html
7. <html>
8. <body>
9. <h1>This is page 2</h1>
10. <p>This webpage is my second page. It links to my <a href="myfirstpage.html">first page</a></p>
11. </body>
12. </html>
Save the two documents in the same folder (e.g. on your desktop create a folder called mywebsite).
Be sure to follow the file naming convention indicated in the caption above each box. In doing so you will name your two documents the same name that you use in your <a> element (e.g. <a href="myfirstpage.html">).
Metadata Standards and Web Services
Erik Mitchell
Page 8

Let's see how these two pages work together. Open a web browser and open the file called
"myfirstpage.html." You should see a link that you can click. Follow that link to your second page.
Question 7. What HTML element did we use to create the link?
Using the W3Schools website (http://www.w3schools.com/html/default.asp) look up the role of each of the elements used in your document "myfirstpage.html"
Element Element type
<html>
<body>
<h1>
<a>
<p>
Heading
Anchor
Paragraph
Role in HTML standard
The two documents that you have created are the foundation of every website. While many websites are created dynamically (e.g. computer programs generate web pages 'on-the-fly') when the page reaches your web browser it is usually a simple document with HTML elements, CSS stylesheets and
JavaScript scripts.
As you can see, a website is simply a set of documents made available through a special program
(e.g. a web browser) that interprets the page text and shows it using pre-defined formatting rules. As we observed earlier though, often we point to pages that exist at other locations or at least need to reference documents that may live somewhere else than the same folder as all of your other documents.
Metadata Standards and Web Services
Erik Mitchell
Page 9

Figure 5 Nested pages
Let's explore this in more detail by creating a folder
structure for our web pages. Using Figure 3, create the folders "website," "folder1," and
"folder2" on your computer (make sure folder1 and folder2 are within your website folder) and place your two web pages in their respective folders.
In your web browser open the file firstpage.html and follow the link to your second page.
Question 8. What happens when you follow the link to your second page?
Because the secondpage file now is located in another folder we need to update our link path in the file myfirstpage.html. These file system locations follow a few simple rules that may not seem intuitive at first. This location is called a "Path" in HTML and refers to the contents of the href attribute which is, in this case, a child of the anchor element (e.g. "href="/sample/test.html" contains the path
/sample/test.html). For now we will just focus on something known as "relative paths" or path statements that provide a location from whatever the current folder is. In contrast to a relative path which does not state what the root folder is, an absolute path specifies the entire location of a document. Study the following example relative and absolute paths in the table and answer the questions below.
Path in HTML <a> element
<a href="page1.html">
Path type relative
<a href="./folder1/page1.html">
<a href="http://me.com/page2.html">
<a href="../folder1/page1.html"> relative absolute relative
Location on your computer
The page1.html document is located in the current folder that your web-browser is working from.
Page1 is located in a sub-folder called folder1
Page2 is located at the website me.com in the root folder. This is actually an example of an absolute path in that it specifies the server and the root folder on the server
Page1 is located within the folder1 folder
Metadata Standards and Web Services
Erik Mitchell
Page 10

<a href="./folder2/page2.html">
<a href="/folder2/page2.html"> relative absolute which is one level up from the current folder
Page2 is located within the folder folder2 which is a subfolder of the current folder
Page2 is located within the folder folder2 which is a subfolder of the current folder
Question 9. In a path statement what does a "../" mean at the beginning of a path statement?
Question 10. What does "./" mean at the beginning of a path statement?
Question 11. What does "/" mean at the beginning of a path statement?
Question 12. Explain the following path: "../../folder3/file.html"
Question 13. What is the main difference between a relative and an absolute path?
Question 14. If your website home is a folder "website" which contains two folders, folder1 and folder2, each of which has a document named page.html in it, what would the two href path statements read to allow you to access from one document to the other?
Documents can be divided into discrete subcomponents according to its intellectual content.
Encoding systems then allow you to control the content representation, content layout and formatting, interactivity.
Metadata Standards and Web Services
Erik Mitchell
Page 11

Open http://www.ibiblio.org/pioneers/bush.html. View the source (Hint – look under view in your web browser or Google "view source in safari, chrome, internet explorer...").
Question 15. On what line number does the content about Vannevar Bush start?
Question 16. Where is formatting information (e.g. font size and color) located?
Question 17. What technology controls the menu system on the left hand side of the page?
Question 18. Based on your initial thoughts about this page, how tightly integrated is the content and the presentation layer in this document? Is this a good or bad design decision?
Why?
Our experiment with HTML and CSS have taken us into the world of computer programming and have demonstrated the elements of document
Figure 2: MVC Model structure (HTML) and presentation (CSS). These are two important aspects of an approach (i.e. framework) for programming called MVC. MVC stands for Model, View, Controller and describes an approach to separating the data (model) from the program logic (controller) and the view (rendered web page).
Figure 1 shows us a simple architecture of MVC and from the perspective of data-flow. In this figure a
Metadata Standards and Web Services
Erik Mitchell
Page 12

client requests data from the server via the controller. The controller decides which data to return to the client and returns a customized data model to the view rendering engine to be returned to the client. The MVC approach has a number of advantages over other approaches to programming including:

Separation of model, program logic and interface allows upgrading of elements individually without breaking other components

Removal of logic from the elements that the client can interact with leads to greater security

The abstraction of the data model means that it is easier to customize the application and add new elements/functions as needed.
While MVC systems are often implemented using a development framework (e.g., Django) our interest in this approach is in helping us understand the differences between the technologies that we are working with this semester. So far we have worked with HTML primarily as a data storage system (a Model). We have chosen to work with CSS as a View platform. So far we have not needed a controller since we were simply displaying all of the content in our web-page. As we will see with each of the information organization standards that we explore this semester, being able to understand how the standards approach these three components (MVC) will help us understand more about the standard itself.
The HTML standard allows us to create document models in which we can insert different types of information. You may have already seen the idea of data modeling in use in HTML documents if you noticed a consistent layout and organizational structure on a website. Underneath this layout is an approach to designing the HTML documents to resources are made available in the same way.
HTML is an interesting standard because it often serves a "view" role in providing access to information. At the same time however, HTML helps us model and store data and for this week at least, we will consider the role HTML plays in supporting data modeling.
In order to better understand the relationship between this modeling process and how it is made visible to our users we will work with a re-typed version of the above webpage that separates out these elements. Lets start by getting the base HTML file to work from.
Metadata Standards and Web Services Page 13
Erik Mitchell

Get an HTML file to work with for the remainder of the exercise a. Go to ELMS, find the folder for class 3 (look under modules for class 3 resources) and download the file csslayout_nostyle.html. b. Open the file in both a web browser and text editor. (have a mac? – visit http://support.apple.com/kb/ta20406 if you cannot see the html codes).
Question 19. What HTML element is used to represent the title that the webpage displays?
Question 20. What HTML element is used to denote paragraphs?
Question 21. What elements have attributes associated with them? For each attribute, what is the expected function? a. Element __________ b. Element __________ c. Element __________ attribute __________ function ___________ attribute __________ function ___________ attribute __________ function ___________
Today we are going to explore how content (metadata schema) and structure (XHTML encoding) impact our use of digital documents. We will do this using a technology called Cascading Style
Sheets (CSS). In our first attempt we will do this by adding formatting instructions first to the document and later by extracting these formatting instructions and putting them into a separate document with a different metadata schema and encoding system.
Add formatting instructions into the HTML file
Metadata Standards and Web Services
Erik Mitchell
Page 14

c. Open the HTML page in a text editor and find the l ine with the code “<p class="firstp">”. d. Inside of this p element add a new element named font with the attribute red (e.g. <p class=”firstp”><font color=”red”>. e. Just before the closing of this p element add a closing font element (e.g. </font> f. Load the page in a web-browser. What happens? g. Return to the text editor and lets modify the p element that we found. This time, add the attribute align with the value right (<p class=”firstp” align=”right”>
Save the file and reload it in a web-browser. What happens?
We just found that the HTML encoding system includes content definition and layout standards. We also found out that this is one of the worst features of HTML because it allows the creation of documents that are difficult to maintain or re-use for other purposes (e.g., if you want to change the color of text, you would have to change the attributes of all your html documents manually). We will now turn to a standard called C ascading Style Sheets to see how “complementary” metadata schemas can work together
Let’s begin by reviewing the structure of a CSS document. Recall that unlike HTML documents, CSS documents are not encoded using XML. Instead they use their own syntax. Review the sample CSS document below.
13. body { text-align: center; }
14. div {
15. width: 600px;
16. text-align:left;
17. }
Metadata Standards and Web Services
Erik Mitchell
Page 15

In the above example you can see common HTML elements (e.g. body, div) listed. After each element name the pa ge contains { } to indicate that “all the instructions between these braces belong to the element listed. It is worth noting that CSS documents use their own encoding scheme that is nothing like HTML or XHTML.
You can also see that at the end of each instruction there is a semi-colon (;). This tells the CSS interpreter that this is the end of the direction. You can also see that a colon (:) separates a directive and a value (e.g. width: 600px). This allows the CSS interpreter to parse apart the commands properly.
In our work with this exercise we will be creating our own CSS file to structure the sample HTML page. Lets get started!
Understanding the structure of our HTML document
Look for the two classes firstp and secondp in the document (e.g. p cl ass=”firstp”). Classes are special attributes that you can apply to HTML elements which can be used by our CSS file to apply special behaviors to the HTML page. CSS allows you to both set directives for an element
(<p>) and classes for that element (clas s=”firstp”). This is part of what makes CSS “Cascading” and should ring a bell in regards to the property of inheritance that comes with hierarchical documents. Today we will use these classes to modify the look and feel of these p elements differently from our other elements. While we are here, lets also locate the last <p> element in the page. Notice how this <p> element contains an extra entry class=”footer".
Create our CSS file and link it to our HTML page
1. Create a new text file and name it with a .css file extension (hint – if you are using a Mac, visit http://support.apple.com/kb/ta20406 to enable you to do this in textedit). a. Open a text editor b. Save the file (it can be empty) with a name (any name you want) ending with .css.
Note, your HTML file and your .css file need to be in the same folder on your computer. c. We will be adding to this document in step 3
Metadata Standards and Web Services Page 16
Erik Mitchell

2. Create a link to this file in the header of the html page that you downloaded in step 1 using the following syntax. a. Edit the HTML file you downloaded in a text editor, b. First – remove the font element and align class that you added in the first part of this exercise. c. Enter the following line in the HEAD portion of your document, replacing the t ext “the name of your css file” with the actual name of your file. Remember – leave the quotes, all HTML attributes must be quoted.
18. <link rel="stylesheet" type="text/css" href="the name of your css file”/> d. You can Save the HTML document now.
Lets take a minute to review what we just did. By adding the <link> element with the attributes rel, type, and href, we added metadata to our HTML file that allows the HTML interpreter (e.g. Chrome,
Safari, Firefox, IE) to import and use our CSS commands. The link element accomplishes a few things. First, it allows us to separate the unique purposes of the HTML and CSS documents for content and style respectively. Second, it provides metadata that connects our files and allows the processor to take actions based on this relationship. This is an important foundation of the web and is something that we will build on throughout this semester.
Working with CSS
3. Now it is time to begin adding content to our CSS file. As you add content you should save the
CSS file and reload the HTML page in your web browser (e.g. go to View >> Reload in
Chrome or Safari). If your changes do not show up you should debug by looking at your CSS file. To begin, lets add entries for the h1 and h2 elements to the css file.
19. h1 {
20. font-size: 2em;
21. color: red;
22. }
Metadata Standards and Web Services
Erik Mitchell
Page 17

23. h2 {
24. font-size: 1em;
25. }
Save your CSS file and your HTML file and reload the HTML page. You should have seen your font sizes change and font in the h1 element turn red. In the next step we will explore some of the capabilities of CSS. In the following step you will see some comments. Comments in CSS are denoted with /* and */ markers. In coding it is always good practice to comment your code so feel free to put in notes here to help you remember what each element does. Remember, if you are curious about CSS elements you can use the reference guide located at http://erikmitchell.info/lbsc670/class_03_resources
4. Let’s hide all of our content and just play with floating two elements (the two p elements with classes). Note, all of the following code includes comments following the /*…*/ you do not need to enter the comments into your CSS file for it to work.
26. p {
27. visibility:hidden; /* This hides all p elements */
28. }
29. img {
30. visibility:hidden; /* This hides all img elements */
31. } a. Save your CSS file and reload your webpage. What happened?
5. Now lets get to understand the ideas of inheritance and cascading by adding commands for the p classes that we mentioned earlier. Keep the previous p and img directives in your CSS file and add the following code.
32. .firstp {
33. visibility:visible;
34. position:relative;
/*Show all elements with .firstp class*/
/*position the element relatively*/
Metadata Standards and Web Services
Erik Mitchell
Page 18

35. float:left;
36. width: 50%;
37. }
38. .secondp {
39. visibility:visible;
40. position:relative;
41. float:right;
42. width: 50%;
43. }
/*position the element on the left*/
/* Take up half of the screen */
/*Show all elements with .firstp class*/
/*position the element relatively*/
/*position the element on the right*/
/* Take up half of the screen */
Technical note: Notice that the .firstp text is not aligned at the top of the screen. This is because there is an image element that is being positioned within that p. To remove the image element from document flow add “position:absolute;” to the img directive. Try taking out the visibility directive to see where the image appears. Notice that it appears right on top of the .firstp classed element. This is because it is “absolutely” positioned and is out of the document flow for that p (but still exists within the context of that p). This works because CSS understands the structure of the document
(according to the DOM) but is also capable of re-sorting the display of those elements in a browser.
Question 22. From your observation the behavior of the HTML page after working with CSS, can you come up with some benefits be of using CSS instead of adding formatting directly to the HTML page?
Question 23. Today we explored multiple metadata schemas and encoding models and saw the relationship between complementary systems. We also explored some key concepts in information organization. For each of the concepts identify an example from our exercises
Metadata Standards and Web Services
Erik Mitchell
Page 19

today and identify one impact that the concept has on our implementation of information organization in digital documents: a. Inheritance (e.g. taking the formatting of a parent element) b. The difference between adding information byvalue (e.g. adding “font color=red”) versus by-reference (e.g. linking to a CSS document). c. Element refinement (e.g. adding more specificity to an element through attributes)
Our goal in this exercise is to better understand the role between HTML and CSS documents. If you would like spend more time working with CSS, refer to appendix A which contains a CSS stylesheet designed to provide a centered layout for our HTML page. Take a step-by-step approach in adding the CSS instructions to your own CSS document and refer to the CSS reference at w3schools when you have questions about functionality
When we transformed our HTML page using CSS and extracted data from our Window object we used the Web browser as our interpreter. The process of loading the document into a web browser triggered the interpreter to run our code (e.g. the JavaScript or CSS) and display a new document in our web browser. Figure 1 demonstrates the transformation process for HTML, CSS and JavaScript documents
Metadata Standards and Web Services
Erik Mitchell
Page 20

Figure 6: Anatomy of a web browser transformation
Input Documents
• HTML
• CSS
• JavaScript
Interpreter
• Web browser
Output
• Formatted HTML
• Redirected webpage
Question 24. MVC is an acronym for what three words?
Question 25. So far in this class we have worked with XHTML and CSS. Based on our use of HTML would you consider it to be a model, a view, or a controller?
Question 26. How about CSS? Which element of MVC does it most closely resemble?
Question 27. True or False: Including css and formatting elements within an HTML page itself is a good example of MVC design. (hint
– remember the first Vannevar Bush page)
Question 28. The Controller is primarily responsible for interacting with what elements?
Metadata Standards and Web Services
Erik Mitchell
Page 21

As we recall, the Document Object Model (DOM) is a model for representing documents in web-browsers. The DOM applies to a suite of web-based technologies including HTML, XML,
JavaScript and CSS. Figure 1 shows the DOM model. Notice that the parent element is the “Window” object. That window has the children history and document. The document object in turn has multiple children. The DOM and MVC can be viewed as complementary models in that they help us create web applications using MVC design. This is possible in part because
MVC defines an approach to software design that separates data from logic and display and the DOM allows us to write
Figure 7 DOM Model abstracted programs that can be applied to multiple documents
(or even document types). Without these two concepts we would be limited to integrating our data model (e.g. HTML elements), our design model (e.g. styles, layout and formatting using HTML) and our web service behaviors (e.g. JavaScript commands) into a single document, making it much harder to both create and maintain.
Review the DOM model below and answer the associated questions
Question 29. What is the top element of the DOM?
Question 30. The document element (or object) in this model has what siblings?
In this exercise we explored the relationship between collection management and LASM operations.
We learned more about HTML and got a quick introduction to CSS. More importantly, we learned
Metadata Standards and Web Services
Erik Mitchell
Page 22

about the Document Object Model and had an opportunity to explore JavaScript to create a metadata-rich information service.
Question 31. In our work this week we explored three different technologies (HTML, CSS,
JavaScript). Using what you know about the MVC model, how would you categorize each of these technologies (e.g. which one is a Model, which one contributes to the view, which one contributes to the controller)?
Question 32. What does the acronym DOM stand for?
Question 33.
DOM?
What standards have we looked at in weeks 2 and 3 that make use of the
44. h1 {
45. margin-bottom: 10px;
46. padding-bottom: 20px;
47. font-size: 2em;
/*keep some padding between the h1 and other elements*/
/*make the font big*/
48. border-bottom: #333333 thick solid; /*use border-bottom to give a nice horizontal line*/
49. background-image:url(http://ischool.umd.edu/sites/all/themes/ischool/images/um_logo.jpg); /*set background image*/
50. background-repeat:no-repeat;
Metadata Standards and Web Services
/*show the image only once */
Page 23
Erik Mitchell

51. background-position:left top;
52. text-align:right; /*Align the text right in the h1 element*/
53. }
54.
55. h2 {
56. margin: 10px 10px 10px 10px; /* the four values are for top, right, bottom, and left */
57. }
58.
59. p {
60. position:relative;
61. margin: 0px 0px 40px 30px;
62. }
63. img {
/*set our p positioning to relative*/
/*set some margins for spacing*/
64. position:relative;
65. float:right;
66. margin: 0 10px 10px 10px;
67. padding: 5px 5px 5px 5px;
68. border:#333333 thin solid;
69. }
70.
71. .footer {
/*also position our images relatively*/
/*always position our images to the right*/
/*set some margins*/
/*set some padding*/
/*add a nice border to the image*/
72. float: left;
73. margin: 20px;
/*position our footer to the left*/
/*add some padding*/
74. width: 100%; /*make sure it spans the page*/
75. border-bottom: #333 medium solid; /*use our same horizontal line trick*/
76. }
77. p.footer:before {
Metadata Standards and Web Services
/*add some content above our footer*/
Page 24
Erik Mitchell

78. content: "University of Maryland College of Information Studies";
79. }
80. body {
81. text-align: center;
82. }
83. div {
/*tells the document to center everything*/
84. margin: 0 auto;
85. width: 600px;
86. text-align:left;
87. }
/*set a 0 top margin and automatic left and right margins*/
/*set a width*/
/*align all text within div to left*/
Metadata Standards and Web Services
Erik Mitchell
Page 25