Lecture 12: More HTML and Introducing CSS

1. Lecture 12:More HTML and Introducing CSS

2. Great Internet Scam Awarenesssite.. • http://www.scamwatch.gov.au/content/index.phtml/tag/Scamwatch/

3. Hypertext Historical Context • Much of the original work on Hypertext a was done right here at Brown! 1967

4. Andries Van Dam Brown University Van Dam is perhaps most known for building the first hypertext system, HES, in the late 1960s. With it and its immediate successor, FRESS, he was an early proponent of the use of hypertext in the humanities and in pedagogy. The term hypertext was coined by Ted Nelson, who was working for him at the time. Andy's continued interest in hypertext was crucial to the development of modern markup and browsing technology, and several of his students were instrumental in the origin of XML, XSLT, and related Web standards.

5. Colors in HTML • You can specify primary colors by name • You can also specify one of 16 million colors by using the binary values for red, green and blue! • For binary values we use hex notation, which is a method for specifying binary without using 1’s and 0’s • So, “3A552C” is an actual color! • See http://www.w3schools.com/html/html_colors.asp

6. Tags with Attributes • Besides the tag name, more complicated tags have attribute-value pairs. Here is the tag one would use to insert an image. img is the tag name indicating that an image goes here An = follows the attribute, which is followed by the value of the attribute. <img src=“BigD on the beach.jpg”> The attribute src indicates the source file for the image.

7. More About Attributes Attribute names are case insensitive <img SRC = “BigD on the beach”> The quote marks are usually required. Spaces are permitted (but not mandatory) around the “=“.

8. Hyperlinks • Hyperlinks, links from one web document to another, are what make the “web” a web. • To put a hyperlink in your web page use the <a> (for “anchor”) tag, as in: <a href=“http://www.cs.brown.edu/courses/2002/cs002”> The href attribute is required here. What follows it is the URL of the page to be linked to.

9. Hyperlinks in Use • A hyperlink must also define a segment of text (or some other portion of the document) where a click will cause one to go to the linked document. E.g., I also teach in the <a href=“http://www.cs.brown.edu/”> Brown Computer Science Department </a> The text between <a> and </a> will appear in a distinctive font or color.

10. You Can Link to a Lot of Things • Possible web URLs include other web pages that you have written, nationally known web sites, picture files, etc. • For example, Our archives includes a picture of a <a href=“gtpic.gif”> dog of war disguised as a great russell terrier </a> How is this different from <img src=“gtpic.gif”>?

11. Forms • So far we have only shown how an HTML document can display information. • In many web applications we want to allow the viewer to input information (e.g., their name and address). • HTML has tags that allow for this. They go under the generic name of forms.

12. A Simple Form Example • <form> • I prefer: • <input type=radio name=PC> PC • <input type=radio name=Mac>Mac • </form> • This would come out looking like this: Create a “radio” button input device Start a form I prefer PC Mac

13. Other Kinds of Input Forms • <form> • <input type=text size=32> • I prefer to use: • <select> • <option> PC • <option> Mac • <option> Abacus • </select> • </form> This would create an input box This creates an pull-down menu with three options.

14. Forms with Actions • Usually, after the viewer fills out the form, one wants to collect the information provided. There is a special button type • <input type=submit> • This creates a submit button for the user to click when ready. The hard part is to describe in your document what to do with the information.

15. E-mail Form Submission • We will describe a simple case - having the page e-mail the information to a particular e-mail address. • Simply replace <form> with: • <form action=“mailto: dls@cs.brown.edu” method=post enctype=“text/plain”> Specifies that the results should be sent in ASCII. Has to do with the details of sending the information back

16. Or jump to another Web page or Site • <form action=“http://www.gtech.com”>

17. Demo ! (Test 2)

18. CSS – Cascading Style Sheets • An adjunct to HTML that allows you to organize formatting effects and apply them without having to repeat them every time you want to invoke them.

19. CSS CSS is an excellent addition to plain old HTML. With plain HTML you define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will therefore have to work your way through the document and change it. With CSS you define the colors, sizes and layout in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site.

20. CSS Another big advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel of your site. It allows allows you to separate the content from the layout commands on your web page. The only reason not to use CSS in your design is not knowing how!

21. Simple Example <html> <head> <title>CSS Example</title> <style type="text/css"> p { color: red; } a { color: blue; } </style> ...

22. <html> <head> <style type="text/css"> body { background-color:#d0e4fe; } h1 { color:red; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; } </style> </head> <body> <h1>CSS example!</h1> <p>This is a paragraph.</p> </body> </html> CSS Code HTML Code

23. CSS example! T CSS example! This is a paragraph. CSS example! This is a paragraph. This is the result !

24. HTML and CSS Summary • Lots of fun (especially if you’re new to it!) • Very powerful (For hypermedia) • Still Evolving • Somewhat forgiving… • Easy to debug • Can be combined with other languages such as Java, Javascript, php, python, etc.

25. Questions ?