W3 Schools Notes

4/5/11

     

HTML

HTML allows you to create your own website.

Intro- HTML is a language used to describe web pages and it stands for Hyper Text Markup Language. There are keywords enclosed in angle brackets called HTML tags.

Get Started- It makes no difference if you save an HTML file as .html or .htm. Dreamweaver and Visual Studio are popular editors used to write and edit HTML.

Basic- The language of HTML can be very confusing but luckily there are some patterns. For example, headings and paragraphs are defined in a similar way. Headings start with <h1> and end with </h1>. While paragraphs start with <p> and end with </p>. Images are a little different because they begin with <img src= and end with />.

CSS

You can save lots of information with CSS.

Intro- CSS stands for Cascading Style Sheets and it explains how to display HTML elements. Styles helped to solve the issue of including fonts and colors in websites because it allowed web developers to store HTML document formatting in a separate CSS file.

Syntax- There is a selector and one or more declarations in a CSS rule. The selector is generally the HTML element you want to fashion. The declaration defines what will be done to the selector. Each declaration has two parts, a property and a value. The property is the style trait you want to alter (such as color) and each property has a value (such as red). For example, if you want to change the color and font size, it would look something like this, {color:red; font-size:14px;}.

Id & Class- Id and class selectors allow you to specify a style for elements. The id selector specifies a style for a single, unique element while the class selector specifies a style for a group of elements. The id selector is described using a “#” and the class selector is described using a “.”

Styling Backgrounds- There are a few different background effects that can be applied using CSS properties. Background color and background images are specified in a similar way. For example, a background color can be defined as {background-color:#42535;} and a background image can be defined as {background-image:url(‘paper.jpg’);}.

Styling Text- You can alter the color, alignment, and indentation of text. You can also alter the decoration and transformation of text. This would include altering text from underlining to uppercase and lowercase letters.

Box Model- Box Model in CSS, refers to the design and layout. Margins, borders, padding and content make up the different parts of a box model from the outside working your way in. To determine the full size of an element, you need to add all four of the elements.

Border- With border properties, you can define all different kinds of borders such as dashed, dotted, solid, ridged, and grooved. You can also determine the width and color of the border.

Outlines- Outlines go outside the border and help to make the element stand out. They can also be altered with color and width.

Margin- The margin is completely transparent. You can determine specific widths for each side of the margin.

Padding- Padding establishes the space around the content but inside the border of an element. Like margins, each side of the padding can be determined individually.