Building the Basic Web page with XHTML and CSS part 2

1
Building the Basic Web page withXHTML and
CSSpart 2

• Week 5 - Presentation 1
• Veronica Noone

2
Agenda

• Review
• Things you should know by now.
• Tables
• HTML VS XHTML
• Structural Mark-up
• Elements
• The Box Model
• Cascading Style Sheets
• Why use CSS?
• CSS Rules

3
HTML is HTML

• HyperText Markup Language
• No matter how you produce a web page it can be
  transported from one computer to another
• There is no MAC html or PC html or even
  Dreamweaver html it is all the same
• Efficiency is important!

4
HTML is HTML

• All HTML pages follow a basic structure

lthtmlgt ltheadgt lttitlegt Page title goes here
lt/titlegt lt/headgt ltbodygt lth1gtMy
Pagelt/h1gt ltpgtThis is my first page! Whatcha
think?lt/pgt lt/bodygt lt/htmlgt
5
Some Issues in Web Development

• No absolute way of configuring a web site so that
  we know exactly how the viewer will see it
• Compatibility issues among browsers
• Its getting better

6
Dreamweaver basic concepts

• A WYSIWYG editor that generates HTML/XHTML code
• Produces text, all else is linked
• A professional web development tool that assumes
• You are developing a whole site not just a page
• You dont want proprietary code added
• You may want to work on the code
• You will want to put your site on the web

7
File naming conventions

• No spaces
• Avoid capital letters - use all lowercase
• Unix Issue
• No illegal characters . / \ !
• Use eight or fewer characters
• Use extension .html

• Use eight or fewer characters (Macs and PCs)
• Think about file names and plan them before you
  start developing
• Group things with prefixes

8
What is file management?
ProjectFolder ?images ?styles

• Management of
• html pages
• Graphics
• Style Sheets
• Swf Moves
• any other files
• Includes
• The organization
• The Folder structure
• Naming conventions

Dreamweaver MX has a site management scheme that
requires that you keep all your files in one main
local root folder
9
The importance of index.html

• Most Web servers recognize index.html as the
  default home page
• The Web server will automatically open the
  index.html even though a URL isnt complete

10
Links and Paths

• Two Types of links
• Relative
• contact.html
• Absolute
• http//student.ccbcmd.edu/vnoone/contact.html
• When you are linking to files its all about
  folder location
• graphics/pict.jpg
• ../myGraphics.gif
• resources/images/ping.png

11
Tables (2 purposes??)

• Originally tables were meant to display tabular
  information
• Then people started realizing they can utilize
  tables to help with the designs of their pages

12
Tables - the Details

• Tables are a combination of tags

lttablegt lttrgt lttdgtCell 1lt/tdgt lt/trgt lttrgt
lttdgtCell 2lt/tdgt lt/trgt lt/tablegt
lttablegt lttrgt lttdgtCell 1lt/tdgt lttdgtCell 2lt/tdgt
lt/trgt lt/tablegt
13
Tables in DreamWeaver

• DreamWeaver makes the creation of tables easy
• Insert gt Table (OR Click the Table Icon in the
  Insert panel)
• The Table Dialog box will open
• Select
• The number of Rows
• The number of Columns
• Width
• Border
• Cell Padding
• Cell Spacing
• Click OK
• Lets take a look

14
HTML

• Even though we have tools like dreamweaver it is
  still a good idea to be familiar with HTML
• Why?
• Tag based language
• Attributes
• Open Closed tags
• Standard structural elements

15
In the beginning

• HTML was all about Structured documents
• Browser would interpret structure visually
• Then browsers started extending html to allow
  designers to have more control

16
Then we spiraled out of control

• Then browsers gave us the font tag
• Tables were beginning to be used for layout
  purposes
• And what HTML couldnt do for us we used graphics
• Why is this bad?
• Transparent gifs
• ltbrgtltbrgtltbrgt

17
SO what?

• Web pages began to look better - Great!
• Markup was not meaningful - Woops!
• So I say again, SO WHAT?
• Why is this bad?
• How do we solve the problem?

?
18
Structural Mark-up

• Dont be a Dreamweaver victim
• Start with content and mark it up with basic HTML
  tags
• lth1gt, ltpgt, ltulgtltligt,
• Add some more meaning
• ltdiv idexperiencegt
• ltspan classtitlegt

Lets take a look at a structural markup up
document
19
Elements

• Elements
• Parts of a HTML document that are held between
  container tags
• Block vs inline
• Nested, parents, children

ltpgtA paragraph.lt/pgt
ltdiv idsect1gt ltpgtAnother ltbgtparagraphlt/bgt.ltimg
srcimg1.gifgtlt/pgt lt/divgt
20
The Box Model
You can set all at once or use individual
sizes Margin 10px Margin-top 10px
How do we manipulate this for our designs?
21
YAY! CSS

• Cascading Style Sheets
• Web Standard
• Control Display of web Pages
• Colors
• Typography
• Size and placements of elements
• Margins
• Borders
• Dreamweaver can help but you can do it alone!

22
Why use CSS?

• Consistency in any number of documents
• Ease in changing all documents at one time
• Bandwidth, Bandwidth, Bandwidth!
• Easier Accessibility, removes presentational
  elements from content
• Welcome to the future!
• Trend of separating content from presentation
  Web Standards Trinity

23
CSS Rules

• Simple, simple, simple just rules
• There are three basic ways of defining CSS rules
• HTML (tag) Selector
• Class Selector
• ID Selector

24
CSS Rules Dissected
Rule

• Selectors
• Properties
• Values

Selector HTML, Class or ID
Declaration
H1 color green font-size 14px
Property
Value

• The declaration has property/value pairs
  separated by semicolons

25
Rule 1 HTML (tag) Selector

• Redefining how a content within specific tags
  will be displayed.
• The text portion of an html tag
• For ltpgt - p is the selector

p font bold 10px Arial
26
Rule 2 Class Selector

• Rule that can be applied to any html tag
• You name, you decide
• Doesnt get applied unless you assign the class
  to an HTML tag

ltp classalertgtblah blah blahlt/pgt lth4
classalertgtYadda Yaddalth4gt
.alert color FF0000font-weight bold
27
Rule 2 ID Selector

• Similar to classes
• Applied only once on a given page
• Normally used to identify areas of a web page
  using div tags

ltdiv idmaingt lt/divgt
main backgroundF2F2E6 margin-right180px pa
dding5px 25px 5px 25px
28
Where do I put CSS

• External
• Most powerful type
• The code is not part of the page but is instead
  stored in a separate file with a .css extension.
• You link your pages to the style

• Embedded
• Affects only one page, all the code is in the
  ltheadgt tag
• Inline
• Not recommended

29
More CSS Rules Sort of

• When declaring multiple Selectors

p font-size small td font-size small ul
font-size small ol font-size small li
font-size small
Verses
p, td, ul, ol, li font-size small
Much Nicer
30
More CSS Rules Sort of

• Contextual Selectors
• Style of an element depends on the context it
  appears

siteNav background E4EDF7 border-bottom
1px solid 369 padding-bottom 1px siteNav
ul display inline list-style-type none
strong font-size bigger font-style
bold li strong font-style bold color
blue
OR
31
Lets Explore

• Lets take a sample page and manipulate some CSS
  properties to understand the box model
• Well look at
• Inline vs Block
• span vs div
• Basic box model properties