1 / 25

Web Pages and Style Sheets

Web Pages and Style Sheets. Bert Wachsmuth. HTML versus XHTML. XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations: < br > < ul > < li >items </ ul > This is some text. XHTML makes a document “well-formed” and easier to interpret by browsers

giona
Download Presentation

Web Pages and Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Pages and Style Sheets Bert Wachsmuth

  2. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations: <br> <ul> <li>items </ul> This is some text. • XHTML makes a document “well-formed” and easier to interpret by browsers • Especially important for browsers on mobile device with access to fewer resources

  3. XHTML Every XHTML document must have the following structure: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head>… <title>Title goes here</title></head><body> ... </body></html>

  4. XML There is also an XML standard, a generalized version of XHTML with arbitrary tags: • XML is designed to describe and structure data • HTML is designed to describe how data should be formatted • XHTML is designed to structure data with tags that have a fixed meaning

  5. Expression Web Expression web is a sophisticated web editor that: • has a WYSIWYG (what you see is what you get) mode as well as a code view of the page you are editing • provides help for all HTML tags, parameters, and options • can edit pages on your local computer as well as on the remote server • can synchronize pages between your local computer and a remote web server • has templates for creating complete web sites • can manage complete web pages • provides support for programming in JavaScript • is “standards-compliant”

  6. Exercise Start Expression Web and create • a new page with a title • a main header • some paragraph of text, • a sub header • a list of links • an image • a centered table Make sure to switch between the various display modes to see the HTML codes, their options, and how they look.

  7. Style Sheets HTML has evolved into a mixed-up language: logical structure-defining elements are mixed with pure formatting directives . It is advantageous to separate those two: • want to define logical structures for our content • want to separately define formatting options for the structures • want to be able to apply one set of formatting rules to multiple web pages for uniformity That’s what (X)HTML + CSS (Cascading Style Sheets) accomplishes. • Style sheets define how a text structure should look like • (X)HTML defines where the structures start and end and how they are related.

  8. Style Sheets (2) Styles can be defined in three different ways • external: the styles are define in a separate file, usually with .css extension • internal: the styles are defined inside the HTML file, usually in the header section • inline: the style is defined inside an existing tag The most useful one is an external style sheet, so stick with that.

  9. Style Sheets (3) Each style in a style sheet has three parts: • a selector • one or more properties • one or more valuesfor each property Syntax: selector {property1: value1 [value2 ...]; property2: value1 [value2 ...]; …}

  10. Style Sheets (4) To attach a style sheet to an XHTML document, use the <link> tag, as in: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p>Content goes here</p> </body> </html>

  11. Exercise • Use Expression Web to create new HTML document and a new style sheet • Save the empty files to the same directory. • Use the “Format” menu to attach your new style sheet to your web page • Create a level-1 headline, a list, and a paragraph of text in your web document • Check the source of your document to verify that Expression Web has inserted the correct framework and attached the right style sheet. • Define the following style: h1 { border: 2px black solid; } • Save all, switch to HTML document and reload (F5) or view with browser (F12)

  12. Style Sheets (5) Style sheets define three types of styles: • #id - ID’s are frequently used to define large structures in an HTML document. Each id can be used only once in each HTML document • .class - Classes are styles that can be reused and applied to different elements via a class parameter, such as <p class=”name”> … </p> • Element - Elements are used to redefine how existing HTML elements are to be formatted Common style properties are fonts, alignment, borders, margins, paddings, and locations.

  13. Lengths, Sizes, and Percentages Many properties refer to sizes, measured in a variety of units such as: • em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size • px (such as font-size: 12px) is the unit for pixels • pt (such as font-size: 12pt) is the unit for points • % (such as font-size: 80%) is the unit for percentages When a value is zero, you do not need to state a unit. The most useful units for font-sizes are 'em' or '%', whereas 'px' should be used for border sizes.

  14. Colors Colors are specified as name, an rgb (red/green/blue) value or a hex code. The following colors are all the same: • rgb(255,0,0) • rgb(100%,0%,0%) • #ff0000 • red Not all colors go well together, but there are several sites where you can pick appealing, matching colors. Try for example http://www.colorjack.com/

  15. Exercise Change: • Large font overall and some background color • Header text color to grey on green background • Large font size • more margins • borders only at the bottom and right side. Then define a class style to center text and apply it to a paragraph of text as well as the header.

  16. Common Use of ID Styles (1) • Define overall segments such as a header, a footer, a menu region, etc.

  17. Common Use of ID Styles (2) body { margin: 0; padding: 0; } #container { min-width: 600px; } #menu { width: 200px; float: left; } #content { margin-left: 200px; }

  18. Common Use of ID Styles (3) Create a new HTML file. Add the following HTML tags <div id="container"> <div id="container"> <div id="menu"> <h1>The Menu</h1> <ul> <li><a href="">Menu 1</a></li> <li><a href="">Menu 2</li> </ul> </div> <div id="content"> <h1>Welcome</h1> Here is the page content </div> </div> (There is an XHTML violation – find it)

  19. Common Use of ID Styles (3) Small changes can have big unexpected effects: In the above style sheet, change the “container” style to the following, then check the effect: #container { width: 900px; margin: 0 auto; } margin can have 1, 2, or 4 values: • 1 value – applies to all four sides • 2 values – apply top/bottom and right/left • 4 values – for the four sides

  20. Common Use of ID Styles (4) HTML-element styles can be redefined inside different id sections so that they only apply to the HTML tag inside the id section. Add the following styles to your style sheet: #menu h1 { font-size: 10px; color: #000080; } #content h1 { font-size: 18px; color: white; background-color: #505050; }

  21. Defining Buttons via Styles Now let’s be slick and define pseudo-buttons for our menu. Add the following styles without changing your HTML document: #menu ul { list-style-type: none; display: block; } #menu li { display: block; }

  22. Defining Buttons via Styles Not much has changed, but the bullets have disappeared from the list items. Now add the following: #menu a { color: #ffffff; background-color: #000080; text-decoration: none; } #menu a:hover { color: #000000; background-color: #4040FF; text-decoration: none; }

  23. #menu ul { list-style-type: none; display: block; margin: 0; padding: 0; width: 100%; } #menu li { display: block; margin: 0; padding: 0; width: 100%; } #menu a { color: #ffffff; background-color: #000080; text-decoration: none; display: block; } #menu a:hover { color: #000000; background-color: #4040FF; text-decoration: none; display: block; }

  24. Exercise: Create a class style named newsbox that allows you to post ‘headline’ news in a small box floating on the right side of your content. Add a few links to try it out.

  25. Cascading Style Sheets • Create a second style sheet called “defaults.css”, add styles for each ID defined previously #container { margin: 0; padding: 0; border: 0; } /* same for menu, content, and footer • save this style sheet in the same directory as the other files • add the following line to your HTML document to attach this sheet <link href="defaults.css" rel="stylesheet" type="text/css" /> <link href="menu.css" rel="stylesheet" type="text/css" />

More Related