8/2/2019 bunf

1/35

8/2/2019 bunf

2/35

Advanced Website Structure

8/2/2019 bunf

3/35

SCREEN

PRINT

HANDHELD

HTML = PAGE STRUCTURE CSS = PRESENTATION

STRUCTURE

8/2/2019 bunf

4/35

A web browser like Safarior Firefox is an

interpreter for the HTMLthat you create.

HTML is a standardizedXML format that all web

browsers are expectedto interpret the same.

The W3C is an organiza-tion that has defined all

the tags, attributes andproperties that can beused in HTML. They alsodefine what these shouldall mean to a web

browser.

You can view the HTMLcode of any website us-ing view-source in yourbrowser

HTML is the language webbrowsers understand

8/2/2019 bunf

5/35

HTML, like all forms ofXML, allows tags to be

nested inside other tags.This structure is whatmakes it so useful forbuilding web pages.

Canadian ex-

change rates

There are many HTMLtags, each with its ownspecific purpose.

In HTML almost all tags in-side the create a

box.

In many cases, theseboxes have pre-definedCSS styles, but most ofthese can be overridden

with your own customstylesheet.

CSS is used to define thelook, style & positioning of

your HTML elements.

a few things about HTML

8/2/2019 bunf

6/35

anatomy of an HTML tag

8/2/2019 bunf

7/35

anatomy of an HTML tag

8/2/2019 bunf

8/35

anatomy of an HTML tag

8/2/2019 bunf

9/35

anatomy of an HTML tag

8/2/2019 bunf

10/35

anatomy of an HTML tag

8/2/2019 bunf

11/35

anatomy of an HTML tag

8/2/2019 bunf

12/35

anatomy of an HTML tag

8/2/2019 bunf

13/35

anatomy of an HTML tag

8/2/2019 bunf

14/35

Stands for Cascading Style Sheets

A Style Sheet language used to apply your own custom

styles to control the way your HTML looks

Can control the look and feel of as many HTML pagesas you want from a single stylesheet document

A collection of rules that control the way the web

browser will present selected HTML elements

what exactly is CSS?

8/2/2019 bunf

15/35

Style rules are contained inside their own CSS document

Multiple HTML documents can reference a single CSS file

and share the same styles

Expedites website creation and maintenance whileensuring a consistent look across all pages

external stylesheets

8/2/2019 bunf

16/35

anatomy of a CSS rule

8/2/2019 bunf

17/35

anatomy of a CSS rule

8/2/2019 bunf

18/35

anatomy of a CSS rule

8/2/2019 bunf

19/35

anatomy of a CSS rule

8/2/2019 bunf

20/35

anatomy of a CSS rule

8/2/2019 bunf

21/35

anatomy of a CSS rule

8/2/2019 bunf

22/35

anatomy of a CSS rule

8/2/2019 bunf

23/35

CSS selectors

main types of selectors

Type selectors

Class selectors

ID selectors

Descendant selectors

Select a specified HTML element for styling

Select an element whose class attribute con-tains the specified class

Select an element with the matching id attri-bute.

Select an element, class, or id, somewhere with-in a specified element, class, or id.

8/2/2019 bunf

24/35

Type Selectors

em {

color: #ffffff;

}

Lorem ipsumdolorsit

vehicula

tempor

rutrum

CSS HTML

8/2/2019 bunf

25/35

Class Selectors

.big {

color: #ffffff;

}

Lorem dolor

vehicula

tempor

rutrum

CSS HTML

8/2/2019 bunf

26/35

ID Selectors

#nav {

color: #ffffff;

}

Lorem dolor

vehicula

tempor

rutrum

CSS HTML

8/2/2019 bunf

27/35

Descendant Selectors

#ul em {

color: #ffffff;

}

Lorem ipsum dolor sit

amet.

item 1

item 2

item 3

CSS HTML

8/2/2019 bunf

28/35

Allow you to target a specific element or group ofelements within your HTML document to apply styles to

You can be as vague or specific as you want in yourselection.

CSS selectors

p {

line-height: 21px;

}

#header ul li .special {

color: #ffffff;

}

VAGUE SPECIFIC

selects all paragraphs in the

document and applies a line

height of 21px

selects anything with the class

special, inside of an li that is

inside a ul that is inside some-

thing with the id nav

8/2/2019 bunf

29/35

8/2/2019 bunf

30/35

When creating a layout with CSS and HTML, the twomost common types of elements are block andinline elements.

INLINE: These elements do not force

new lines before or after its place-

ment, and it only consumes as

much space as necessary.

BLOCK: New lines appear before

and after the element with it con-

suming the full width available.

inline vs. block elements

8/2/2019 bunf

31/35

examples of

blockelements

examples of

inlineelements(by default)(by default)

Generic span tag:

Active hyperlinks:

Emphasis & Strong:

,

Divisions:

Headings:

,,

, etc.

Paragraphs:

Lists, and list items:

8/2/2019 bunf

32/35

Using CSS, you can tell a block element to float to the leftor to the right. Causing other elements to wrap around it.

Floated elements will be placed to the left or right untiltheir outer edge touches the containing block edge orthe outer edge of another float.

floats

8/2/2019 bunf

33/35

This technique allows you to place block elementsbeside one another, or directly across on the other sideof their container.

floats (contd)

8/2/2019 bunf

34/35

When using floats, it is important to remember that theelements that come after your floating boxes will alwaystry and wrap around it. Additionally, its container will notproperly wrap around your boxes as you would expect.

To avoid this, you need to use a clearing technique.

floats (again contd)

8/2/2019 bunf

35/35

The box model describes how modern web browsers ap-ply padding, margin, border, width & height

intro to the box model