COMP 135 Web Site Design Intermediate. Week 3. Review. Rules of XHTML Start with proper DOCTYPE and namespace Declare character encoding with element All element names and attributes lowercase Quote all attribute values Assign values to all attributes Close all tags - PowerPoint PPT Presentation
Slide 1
COMP 135Web Site Design IntermediateWeek 3ReviewRules of
XHTMLStart with proper DOCTYPE and namespaceDeclare character
encoding with elementAll element names and attributes
lowercaseQuote all attribute valuesAssign values to all
attributesClose all tagsClose empty tags with a space and a slashDo
not put double dashes inside commentsUse character references for
displaying less-than, greater-than and ampersands in your
content
Use markup elements for their meaning and not for the way they
look
Anatomy of a CSS Ruleselector {property1: value;property2:
value;property3: value;}
The selector identifies HTML elements that the rule will be
applied to, either the actual element name or class attribute
values and unique identifiers.
Curly braces contain the properties of the element you want to
manipulate with the values you want to change them to. The braces
plus their content is called the declaration block.
The property/value pairs are separated from each other by
semi-colons. The properties are separated from their respective
values by colons. Each line is called a declaration.
p {font-size: 2em;font-family: Arial;color: red;border: 2px
solid blue;}This selects every single element in the HTML
document(s) this CSS applies, to and:
Doubles the default size of the fontChanges the font of the
paragraph to the Arial font.Changes the colour of all the text to
red.Adds a solid blue two pixel thick border around the
paragraphOther CSS SelectorsID selector: #Class selector:
.HTMLChapter 1Lorem ipsumCSS
#chapter { font-size: 3.5em; }.summary { font-style: italic;
}
Links and ListsLink element and anchor link element
(hyperlinks)ListsOrderedUnorderedDefinition
elementPlaced in elementUsed for applying external CSS files to
your document:
Can have any number of elements but only in the of the document
elementHyperlinkHome
Absolute HyperlinksUse http:// protocol and domain name to link
to another web server or on the same
serverhttp://www.smashingmagazine.comhttp://www.flemingcollege.com
Can also include subdirectories and file
names:http://fleming0.flemingc.on.ca/~pchee/fts/2011/wsdihttp://www.utata.org/whereilive11/faq.htmlRelative
HyperlinksLinks that are on the same server as the current
pageImplies a required starting point
Assume that file_to_link_from.html is the file you are linking
from
To link to the link.html file in the same directory than the
hyperlink would specify: link.htmlTo link to link2.html, in the
folder in the same directory, then you create a link to
folder/link2.htmlTo link to link3.html in the parent folder of the
folder of the current file then use two dots to specify go up one
level : ../link3.htmlRoot Relative LinkIf you want to link to the
very top directory of the web site (the root or document root) than
put a slash at the front of the file pathIf link3.html was in the
top directory of the web site, you can specify /link3.html instead
of ../link3.htmlOn the Fleming College web server / will re-direct
you to www.flemingcollege.comTo link back to your default home page
use /~username, where username is your Fleming login
Styling LinksLinks have several different states:link
(unvisited)Default state; what they should look like when first
seen. Coloured bluevisitedStyle of link previously visited [
clicked on or followed ] and coloured purplehoverStyle whilst mouse
is hovering over itfocusStyle of link when given focus by another
means than the mouse [ keyboard ]activeStyle of link when
activated; mouse button held down while pointer over link [ changes
to :focus when mouse button released ]; also style of last
activated link when going back to document from your browser
historyCSS Link StylingUses pseudo-classes to create appropriate
element selectorAppend to the selector used for linkse.g. a:link {
color: red; }a.resources:visited { color: green; }a.resoruces:hover
{ background-color: yellow; }
Link Styling Best PracticesGive link and visited distinctive
stylesfocus, hover and active can often be given the same styling
or perhaps a simple variation for activeNeed to put the selectors
in the following order because of CSS inheritance:link, visited,
hover (and focus), and activeUse this mnemomic LoVe HAte [ :focus
goes next to :hover ]ListsUsed for grouping related pieces of
information:Shopping lists, steps in a recipe, concert tour dates,
etc.Navigation menus, tabbed interfacesThree types of HTML list
elements:Unordered list: group related items in no particular
orderOrdered list: group related items in a specific
orderDefinition list: define a set of terms and related
definitionsUnordered List Markup
- bread
- coffee beans
- milk
- butter
Ordered List Markup
- Gather ingredients
- Mix ingredients together
- Place ingredients in baking dish
- Bake in oven for one hour
Definition List Markup
MilkA white, liquid dairy productBreadA baked food made with
flourButterA yellow, solid dairy productCoffeeA beverage made from
the ground seeds of the fruit of coffee trees
You must pair at least one with at least one should always come
first in the source order; dont nest within Each term and
definition is a definition groupYou can associate more than one
term with a single definition or one term with more than one
definitionNesting ListsA list item can contain another listThe
nested list should be related to one specific list itemThe nested
list is contained inside the list item when writing the markup
- Apples
- Empire
- Gala
- Delicious
- Peaches
- Pears
Styling Listsul {background-color: #FF9393;width:
20em;padding-top: 1em;padding-bottom: 1em;font-family: Arial,
Helvetica, sans-serif;border: 2px solid #A60000;}ul > li
{margin: 1em 1em 1em 0.5em;font-weight: bold;}ol > li
{margin-top: 0.5em;margin-left: -24px;font-size: 0.8em;color:
#A60000;font-weight: normal;}
Changing Bullet/Numeral TypesUse the CSS list-style-type
property on
-
elements to change the bullet styleOptions
include:squarecirclediscnoneLettersFor ordered lists options
include alphabetic:lower-alpha [ a, b, c... ]upper-alpha[ A, B,
C... ]lower-greek[ , , ... ]NumbersFor ordered lists options
include alphabetic:decimal Default [ 1, 2, 3...
]decimal-leading-zero[ 01, 02, 03... ]lower-roman[ i, ii, iii...
]upper-roman[ I, II, III... ]georgian[ an, ban, gan... ]armenian[
mek, yerku, yerek.. ]
Custom BulletsAdd small images for custom bullets using
list-style-image:list-style-image: url(bullet.gif)
and againGeneric container elementsUse with unique identifier
attribute, id, or classification attribute, class, to give your
document better semantic markupAlso creates selectors for
CSSClassitisPoorText goes hereMore text goes hereStill more text
goes here
BetterText goes hereMore text goes hereStill more text goes
here
Semantic
Text goes hereMore text goes hereStill more text goes here
DivitisPoor
Welcome to Member page!Welcome returning membersIf you are not a
member go here!>
Semantic
Welcome to Member Page!welcome returning membersIf you are not a
member go here!
Semantic Markup
Strong HeadingSome text goes hereContact us at:
[email protected]
HTML5
Strong HeadingSome text goes hereContact us at:
[email protected]
