1. To do: You will be developing a HTML document
2. You will need to link it to your Geocities WEB site.
3. You will first begin with your HTML, body and LINK to your CSS Style page you developed two weeks ago. Please see Number2, below to link the page
4. You will be developing a WEB page for the History department. This will be saved as the WEB page PLATO.
5. In notepad you will have a link called PLATO.html.
6. Below is the Plato document. The WORDS that I have underlined you will need to link an additional page to this document and state the definitions of those words. You may have ALL the words linked to one definition page. The definition page should be called Definitions.html.
7. You must also change the background color of the definition page so that it looks lovely and readable. See number 12 for background colors.
8. Which ever titles are bold and of a larger font you will need to develop in your HTML document. See number 7.
9. You can take the definitions from the Web page www.definition.com
10. Set indents to each paragraph. See #4.
11. Each word that is underlined should also be underlined in your PLATO HTML document.
12. The first paragraph with the heading named PLATO should have a yellow background color with black letters. See #11 and look at your document named Style sheet that you already have saved for additional information.
13. The second paragraph with the heading named Philosopher / Kings should have a light blue background with black letters.
14. The third paragraph with the heading The Structure of Human Knowledge should have a light green background.
15. The fourth paragraph with the heading The Allegory of the Cave should have a box area this paragraph and have a white background with black lettering
16. The fifth paragraph with the heading An Educational Program should be with red lettering on a plain white background.
17. Place a link and/or bookmarker inside the Plato document that sends the cursor to the top of the document. Remember HREF?
18. That is it folks!!!!!
19. Please show me the PLATO.HTML in internet explorer.
Up load this document to Geocities.com. Please name PLATO
-To the top-
Plato
Most fifth-century Greeks, like many twentieth-century Americans, supposed that natural differences between males and females of the human species entail a significant differentiation of their proper social roles. Although Plato granted that men and women are different in height, strength, and similar qualities, he noted that these differences are not universal; that is, for example, although it may be true that most men are taller than most women, there are certainly some women who are taller than many men. What is more, he denied that there is any systematic difference between men and women with respect to the abilities relevant to guardianship—the capacity to understand reality and make reasonable judgments about it. Thus, Plato maintained that prospective guardians, both male and female, should receive the same education and be assigned to the same vital functions within the society. In addition, Plato believed that the interests of the state are best preserved if children are raised and educated by the society as a whole, rather than by their biological parents. So he proposed a simple (if startlingly unfamiliar) scheme for the breeding, nurturing, and training of children in the guardian class. Note that the same children who are not permitted to watch and listen to "dangerous" art are encouraged to witness first-hand the violence of war. The presumed pleasures of family life, Plato held, are among the benefits that the higher classes of a society must be prepared to forego.
-To the top-
Philosopher / Kings
A general objection to the impracticability of the entire enterprise remains. Even if we are persuaded that Plato's aristocracy is the ideal way to structure a city-state, is there any possibility that it will actually be implemented in a human society? Of course there is a sense in which it doesn't matter; what ought to be is more significant for Plato than what is, and philosophers generally are concerned with a truth that transcends the facts of everyday life. But Plato also believed that an ideal state, embodying the highest and best capabilities of human social life, could really be achieved, if the right people are put in charge. Since the key to the success of the whole is the wisdom of the rulers who make decisions for the entire city, Plato held that the perfect society would occur only when kings become philosophers or philosophers are made kings.
Only those with a philosophical temperament, Plato supposed, are competent to judge between what merely seems to be the case and what really is, between the misleading, transient appearances of sensible objects and the permanent reality of unchanging, abstract forms. Thus, the theory of forms is central to Plato's philosophy once again: the philosophers who think about such things are not idle dreamers, but the true realists in a society. It is precisely their detachment from the realm of sensory images that renders them capable of making accurate judgments about the most important issues of human life. Thus, despite prevalent public skepticism about philosophers, it is to them that an ideal society must turn for the wisdom to conduct its affairs properly. But philosophers are made, not born. So we need to examine the program of education by means of which Plato supposed that the future philosopher-kings could acquire the knowledge necessary for their function as decision-makers for the society as a whole.
-To the top-
The Structure of Human Knowledge
Since an ideal society will be ruled by those of its citizens who are most aware of what really matters, it is vital to consider how that society can best raise and educate its philosophers. Plato supposed that under the usual haphazard methods of childrearing, accidents of birth often restrict the opportunities for personal development, faulty upbringing prevents most people from achieving everything of which they are capable, and the promise of easy fame or wealth distracts some of the most able young people from the rigors of intellectual pursuits. But he believed that those with the greatest ability—that is, people with a natural disposition fit for philosophical study—must receive the best education, engaging in a regimen of mental discipline that grows more strict with every passing year of their lives. The highest goal in all of education, Plato believed, is knowledge of the Good; that is, not merely an awareness of particular benefits and pleasures, but acquaintance with the Form itself. Just as the sun provides illumination by means of which we are able to perceive everything in the visual world, he argued, so the Form of the Good provides the ultimate standard by means of which we can apprehend the reality of everything that has value.
-To the top-
The Allegory of the Cave
Plato recognized that the picture of the Divided Line might be difficult for many of us to understand. Although it accurately represents the different levels of reality and corresponding degrees of knowledge, there is a sense in which one cannot appreciate its full significance without first having achieved the highest level. So, for the benefit of those of us who are still learning but would like to grasp what he is talking about, Plato offered a simpler story in which each of the same structural components appears in a way that we can all comprehend at our own level. This is the Allegory of the Cave.
Suppose that there is a group of human beings who have lived their entire lives trapped in a subterranean chamber lit by a large fire behind them. Chained in place, these cave dwellers can see nothing but shadows (of their own bodies and of other things) projected on a flat wall in front of them. Some of these people will be content to do no more than notice the play of light and shadow, while the cleverer among them will become highly skilled observers of the patterns that most regularly occur. In both cases, however, they cannot truly comprehend what they see, since they are prevented from grasping its true source and nature. Now suppose that one of these human beings manages to break the chains, climb through the torturous passage to the surface, and escape the cave. With eyes accustomed only to the dim light of the former habitation, this individual will at first be blinded by the brightness of the surface world, able to look only upon the shadows and reflections of the real world. But after some time and effort, the former cave-dweller will become able to appreciate the full variety of the newly-discovered world, looking at trees, mountains, and (eventually) the sun itself.
Finally, suppose that this escapee returns to the cave, trying to persuade its inhabitants that there is another, better, more real world than the one in which they have so long been content to dwell. They are unlikely to be impressed by the pleas of this extraordinary individual, Plato noted, especially since their former companion, having traveled to the bright surface world, is now inept and clumsy in the dim realm of the cave. Nevertheless, it would have been in the best interest of these residents of the cave to entrust their lives to the one enlightened member of their company, whose acquaintance with other things is a unique qualification for genuine knowledge. Plato seriously intended this allegory as a representation of the state of ordinary human existence. We, like the people rose in a cave, are trapped in a world of impermanence and partiality, the realm of sensible objects. Entranced by the particular and immediate experiences these things provide, we are unlikely to appreciate the declarations of philosophers, the few among us who, like the escapee, have made the effort to achieve eternal knowledge of the permanent forms. But, like them, it would serve us best if we were to follow this guidance, discipline our own minds, and seek an accurate understanding of the highest objects of human contemplation.
-To the top-
An Educational Program
Having already described the elementary education and physical training that properly occupy the first twenty years of the life of prospective guardians, Plato applied his account of the structure of human knowledge in order to prescribe the disciplined pursuit of their higher education. It naturally begins with mathematics; the vital first step in learning to turn away from the realm of sensible particulars to the transcendent forms of reality. Arithmetic provides for the preliminary development of abstract concepts, but Plato held that geometry is especially valuable for its careful attention to the eternal forms. Study of the (mathematical, not observational) disciplines of astronomy and harmonics encourage the further development of the skills of abstract thinking and proportional reasoning. Only after completing this thorough mathematical foundation are the future rulers of the city prepared to begin their study of philosophy, systematizing their grasp of mathematical truth, learning to recognize and eliminate all of their presuppositions, and grounding all genuine knowledge firmly on the foundation of their intuitive grasp of the reality of the Forms. Finally, an extended period of apprenticeship will help them to learn how to apply everything they have learned to the decisions necessary for the welfare of the city as a whole. Only in their fifties will the best philosophers among them be fit to rule over their fellow-citizens. Kinds of State or Person In order to explain the distinction between justice and injustice more fully, Plato devoted much of the remainder of The Republic to a detailed discussion of five different kinds of government (and, by analogy, five different kinds of person), ranked in order from best to worst:
-To the top-
Justice is Better than Injustice
Thus, we are finally prepared to understand the full force of Plato's answer to the original challenge of showing that justice is superior to injustice. He offered three arguments, each of which is designed to demonstrate the intrinsic merits of being a just person. First, Plato noted that the just life of an aristocratic person arises from an effortless harmony among internal elements of the soul, while the unjust life of a tyrannical person can maintain its characteristic imbalance only by the exertion of an enormous effort. Thus, it is simply easier to be just than to be unjust. This argument makes sense even independently of Plato's larger theory; it is a generalized version of the fairly common notion that it is easier to be honest than to keep track of the truth along with a number of false stories about it.
Second, Plato claimed that tyrannical individuals could appreciate only pleasures of the body, monetary profits, and the benefits of favorable public reputation, all of which are by their nature transitory. Aristocratic people, on the other hand, can accept these things in moderation but also transcend them in order to enjoy the delights of intellectual achievement through direct acquaintance with the immutable Forms. This argument relies more heavily upon adoption of Plato's entire theory of human nature, as developed in The Republic and other dialogues; it is likely to influence only those who have already experienced the full range of intellectual advantages for themselves.
Finally, Plato resorted to myth (just as he had at the close of the Phaedo by imagining that justice will be rewarded with steady progression in a series of lives hereafter. This "Myth of Er" isn't philosophical argument at all. Even if it were literally true and demonstrable that the just are rewarded in the afterlife, that would be only an extrinsic motive for being just, not a proof of its intrinsic value.
-To the top-
___________________________________________________________
1. For your information! ONLY
Let's start with setting the color of the text and the background. You can do this by using the STYLE element to set style properties for the document's tags:
The stuff between the is written in special notation for style rules. Each rule starts with a tag name followed by a list of style properties bracketed by { and }. In this example, the rule matches the body tag. As you will see, the body tag provides the basis for setting the overall look and feel of your Web page.
2. Linking to a separate style sheet
If you are likely to want to use the same styles for several Web pages it is worth considering using a separate style sheet, which you then link from each page. You can do this as follows:
The LINK tag should be placed in the document's head. The rel attribute must be set to the value "stylesheet" to allow the browser to recognize that the href attribute gives the Web address (URL) for your style sheet.
3. Setting the page margins
Web pages look a lot nicer with bigger margins. You can set the left and right margins with the "margin-left" and "margin-right" properties, e.g.
This sets both margins to 10% of the window width, and the margins will scale when you resize the browser window.
-To the top-
4. Setting left and right indents
To make headings a little more distinctive, you can make them start within the margin set for the body, e.g.
This example has three style rules. One for the body, one for h1 (used for the most important headings) and one for the rest of the headings (h2, h3, h4, h5 and h6). The margins for the headings are additive to the margins for the body. Negative values are used to move the start of the headings to the left of the margin set for the body.
In the following sections, the examples of particular style rules will need to be placed within the style element in the document's head (if present) or in a linked style sheet.
5. Controlling the white space above and below
Browsers do a pretty good job for the white space above and below headings and paragraphs etc. Two reasons for taking control of this yourself are: when you want a lot of white space before a particular heading or paragraph, or when you need precise control for the general spacings.
The "margin-top" property specifies the space above and the "margin-bottom" specifies the space below. To set these for all h2 headings you can write:
h2 { margin-top: 8em; margin-bottom: 3em; }
The em is a very useful unit as it scales with the size of the font. One em is the height of the font. By using em's you can preserve the general look of the Web page independently of the font size. This is much safer than alternatives such as pixels or points, which can cause problems for users who need large fonts to read the text.
Points are commonly used in word processing packages, e.g. 10pt text. Unfortunately the same point size is rendered differently on different browsers. What works fine for one browser will be illegible on another! Sticking with em's avoids these problems.
To specify the space above a particular heading, you should create a named style for the heading. You do this with the class attribute in the markup, e.g.
Getting started
The style rule is then written as:
h2.subsection { margin-top: 8em; margin-bottom: 3em; }
The rule starts with the tag name, a dot and then the value of the class attribute. Be careful to avoid placing a space before or after the dot. If you do the rule won't work. There are other ways to set the styles for a particular element but the class attribute is the most flexible.
When a heading is followed by a paragraph, the value for margin-bottom for the heading isn't added to the value for margin-top for the paragraph. Instead, the maximum of the two values is used for the spacing between the heading and paragraph. This subtlety applies to margin-top and margin-bottom regardless of which tags are involved.
-To the top-
6. First-line indent
Sometimes you may want to indent the first line of each paragraph. The following style rule emulates the traditional way paragraphs are rendered in novels:
p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
It indents the first line of each paragraph by 2 em's and suppresses the inter-paragraph spacing.
7. Font styles
The most common styles are to place text in italic or bold. Most browsers render the em tag in italic and the strong tag in bold. Let's assume you instead want em to appear in bold italic and strong in bold uppercase:
em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase; font-weight: bold; }
If you feel so inclined, you can fold headings to lower case as follows:
h2 { text-transform: lowercase; }
8. Setting the font size
Most browsers use a larger font size for more important headings. If you override the default size, you run the risk of making the text too small to be legible, particularly if you use points. You are therefore recommended to specify font sizes in relative terms.
This example sets heading sizes in percentages relative to the size used for normal text:
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }
9. Setting the font family
It is likely that your favorite font won't be available on all browsers. To get around this, you are allowed to list several fonts in preference order. There is a short list of generic font names which are guaranteed to be available, so you are recommended to end your list with one of these: serif, sans-serif, cursive, fantasy, or monospace, for instance:
body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }
In this example, important headings would preferably be shown in Garamond, failing that in Times New Roman, and if that is unavailable in the browsers default serif font. Paragraph text would appear in Verdana or if that is unavailable in the browser's default sans-serif font.
The legibility of different fonts generally depends more on the height of lower case letters than on the font size itself. Fonts like Verdana are much more legible than ones like "Times New Roman" and are therefore recommended for paragraph text.
10. Avoid problems with fonts and margins
My first rule is to avoid text at the body level that isn't wrapped in a block level element such as p. For instance:
Spring in Wiltshire
Blossom on the trees, bird song and the sound of lambs
bleating in the fields.
The text following the heading runs the risk on some browsers of being rendered with the wrong font and margins. You are therefore advised to enclose all such text in a paragraph, e.g.
Spring in Wiltshire
Blossom on the trees, bird song and the sound of lambs
bleating in the fields.
My second rule is to set the font family for pre elements, as some browsers forget to use a fixed pitch font when you set the font size or other properties for pre.
pre { font-family: monospace; }
My third rule is to set the font family on headings, p and ul elements if you intend to set borders or backgrounds on elements such as div. This is a work-around for a bug where the browser forgets to use the inherited font family, instead switching to the default font as set by the browser preferences.
h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }
11. Adding borders and backgrounds
You can easily add a border around a heading, list, paragraph or a group of these enclosed with a div element. For instance:
div.box { border: solid; border-width: thin; width: 100% }
Note that without the "width" property some browsers will place the right margin too far to the right. This can then be used with markup such as:
The content within this DIV element will be enclosed
in a box with a thin line around it.
There are a limited choice of border types: dotted, dashed, solid, double, groove, ridge, inset and outset. The border-width property sets the width. Its values include thin, medium and thick as well as a specified width e.g. 0.1em. The border-color property allows you to set the color.
A nice effect is to paint the background of the box with a solid color or with a tiled image. To do this you use the background property. You can fill the box enclosing a div as follows:
div.color {
background: rgb(204,204,255);
padding: 0.5em;
border: none;
}
Without an explicit definition for border property some browsers will only paint the background color under each character. The padding property introduces some space between the edges of the colored region and the text it contains.
You can set different values for padding on the left, top, right and bottom sides with the padding-left, padding-top, padding-right and padding-bottom properties, e.g. padding-left: 1em.
Suppose you only want borders on some of the sides. You can control the border properties for each of the sides independently using the border-left, border-top, border-right and border-bottom family of properties together with the appropriate suffix: style, width or color, e.g.
p.changed {
padding-left: 0.2em;
border-left: solid;
border-right: none;
border-top: none;
border-bottom: none;
border-left-width: thin;
border-color: red;
}
which sets a red border down the left hand side only of any paragraph with the class "changed".
12. Setting Colors
Some examples for setting colors appeared in earlier sections. Here is a reminder:
body {
color: black;
background: white;
}
strong { color: red }
This sets the default to black text on a white background, but renders strong elements in red. There are 16 standard color name, which are explained just below. You can also use decimal values for red, green and blue, where each value appears in the range 0 to 255, e.g. rgb(255, 0, 0) is the same as red. You can also used hex color values which start with the '#' characted followed by six hexadecimal digits. A two-way converter is included below which allows you to convert from RGB to hex color values.
13. Setting Link Colors
You can use CSS to set the color for hypertext links, with a different color for links that you have yet to follow, ones you have followed, and the active color for when the link is being clicked. You can even set the color for when the mouse pointer is hovering over the link.
:link { color: rgb(0, 0, 153) } /* for unvisited links */
:visited { color: rgb(153, 0, 153) } /* for visited links */
:active { color: rgb(255, 0, 102) } /* when link is clicked */
:hover { color: rgb(0, 96, 255) } /* when mouse is over link */
Sometimes you may want to show hypertext links without them being underlined. You can do this by setting the text-decoration property to none, for example:
a.plain { text-decoration: none }
Which would suppress underlining for a link such as:
This is not underlined
Most people when they see underlined text on a Web page, will expect it to be part of a hypertext link. As a result, you are advised to leave underlining on for hypertext links. A similar argument applies to the link colors, most people will interpret underlined blue text as hypertext links. You are advised to leave link colors alone, except when the color of the background would otherwise make the text hard to read.
Setting the color and background
You can set the color using the BODY tag. The following example sets the background color to white and the text color to black:
The BODY element should be placed before the visible content of the Web page, e.g. before the first heading. You can also control the color of hypertext links. There are three attributes for this:
· link for unvisited links
· vlink for visited links
· alink for the color used when you click the link
Here is an example that sets all three:
You can also get the browser to tile the page background with an image using the background attribute to specify the Web address for the image, e.g.
It is a good idea to specify a background color using the bgcolor attribute in case the browser is unable to render the image. You should check that the colors you have chosen don't cause legibility problems. As an extreme case consider the following:
Most browsers will render text in black by default. The end result is that the page will be shown with black text on a black background! Lots of people suffer from one form of color blindness or another, for example olive green may appear brown to some people.
A separate problem appears when you try to print the Web page. Many browsers will ignore the background color, but will obey the text color. Setting the text to white will often result in a blank page when printed, so the following is not recommended:[1]
You can also use the bgcolor attribute on table cells, e.g.
colored table cell
Tables can be used for a variety of layout effects and have been widely exploited for this. In the future this role is likely to be supplanted by style sheets, which make it practical to achieve precise layout with less effort.
Setting the font, its size and color
The FONT tag can be used to select the font, to set its size and the color. This example just sets the color:
This sentence has a word in yellow.
The face attribute is used to set the font. It takes a list of fonts in preference order, e.g.
some text ...
The size attribute can be used to select the font size as a number from 1 to 7. If you place a - or + sign before the number it is interpreted as a relative value. Use size="+1" when you want to use the next larger font size and size="-1" when you want to use the next smaller font size, e.g.
some text ...
There are a couple of things you should avoid: Don't choose color combinations that make text hard to read for people who are color blind. Don't use font to make regular text into headings, which should always be marked up using the h1 to h6 tags as appropriate to the importance of the heading.