Difference between revisions of "Week Six (MGDP2050)"

Revision as of 09:56, 8 March 2016

Lecture notes and exercises for Week Six of Web Design and Development II (MGDP2050).

No class session next week!

• Next class session is March 22 (Week Seven)

See also Week Five (MGDP2050) - Week Seven (MGDP2050).

Paths to external resources in HTML

See ...

Browser tools

View Source

See View Source.

Inspect Element

In modern browsers, Inspect Element contains multiple features located under different tabs or menu selections.

Features include tools to view, and in some cases modify:

• HTML - view and modify
• CSS - view and modify
• Network traffic
  • See the Console, which displays error messages, such as failed requests for external style sheets.

See Inspect Element.

Fundamental CSS Selectors

In CSS, a selector specifies the HTML elements which will be selected by the rule.

Fundamental selectors include:

HTML element selectors

HTML element selectors select elements based on element type.

An HTML element selector consists of the HTML element itself.

Example, CSS rule to make all paragraphs red:

p { color: red; }

ID selectors

ID selectors select elements based on the ID attribute of a single HTML element.

ID selector rules begin with a pound sign, or hash mark (#).

Example, CSS ID selector rule to set width of HTML element:

 #example { width: 1100px; }
 #example { color: green; }

The element itself might look like this:

 <div id="example">
   <!-- more content and HTML elements here -->
 </div>

Class selectors

Class selectors select elements based on the class attribute of one or more elements.

Class style rules begin with a period (.).

Example, CSS class selector rule to set colors:

 .example 
  {
   color: red;
  }
 .example2
  {
   background-color: yellow;
  }

The HTML elements might look like this:

 <p class="example">
   This paragraph has red text.
 </p>

 <p>
   This paragraph has default styles.
 </p>

 <p class="example class2">
   This paragraph has red text and yellow background.
 </p>

Note how the third paragraph has two class styles: red text, yellow background.

Other CSS selectors

Many other kinds of selectors exist, for a wide range of purposes.

We will discuss some of them in later class sessions.

Bootstrap grid

The grid is Bootstrap's web page layout structure.

It is built from units of twelve. Use it to create columns.

See:

• Bootstrap grid
• Examples @ getbootstrap.com
• Examples @ bootstrap.karljones.com

Exercises: in class

...

Exercises: for next week

...

Reading

• JavaScript
• jQuery