CPSP 229D: Web design

ALBERT WAVERINGBOBBY SENG

Week 2: HTML + CSS

Quiz Announcements/questions/etc Some functional HTML elements

HTML User Input Elements

Checkboxes <input type="checkbox" name="flavor"

value="Cherry" />

Radio buttons <input type="radio" name="sex" value="male" /> <input type="radio" name="sex" value="female" />

Text fields <input type="text" name="firstname" />

Buttons <button type="button">Go</button>

Can be grouped into a ‘form’

HTML User Input: Forms

<form>

First name: <input type="text" name="firstname" /> <br />

Last name: <input type="text" name="lastname" /> <br/>

Password: <input type="password" name="pwd" /> <br/> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female<br/>

<input type="checkbox" name="vehicle" value="Bike" /> Bike<br />

<input type="checkbox" name="vehicle" value="Car" /> Car <br/>

<button type=“button”>Submit</button>

</form>

More HTML stuff

Headings <h1>, <h2>, <h3>, <h4>, <h5>,

<h6> Used by search engines, etc to index

page (use properly) Horizontal rule (line)

<hr/>

More HTML stuff

Anchors <a> Already saw use as links Anchor certain places on a page:

<a name="contents">Contents</a>….<a href="#content">Go to Contents</a>

HTML Tables

<table> table tag<tr> table row

<td> table cell</td>…

</tr>…

</table>

HTML Colors

Hexadecimal notation #red green blue Each color is expressed as a

combination of its red, green, and blue components

Each component has a value from 0-255 (o to FF in hexadecimal)

Black = #000000, White = #FFFFFF Pure red = #FF0000, Pure green =

#00FF00, Pure blue = #0000FF

HTML Colors

RGB notation rgb(red,green,blue)

Integer values of components 0-255

Red = rgb(255,0,0), Blue = rgb(0,255,0) Text notation

Blue, red, green, etc

Introduction to CSS

Cascading Style Sheets CSS provides a way to apply

formatting to certain HTML elements Class- or element-based A CSS file can be included on any

HTML page CSS lets you make changes to an

entire site by editing just one file

Linking CSS to HTML

I have a file named style.css To use this style sheet in my

webpage:<head><link rel="stylesheet" type="text/css"

href="style.css"></head>

That’s it! Your CSS will be applied to the elements in your page

Writing CSS

Plaintext CSS applies properties to elements

Color Alignment Font styling (bold, underline,

strikethrough) Font family (Arial, etc) Image size and location Many other attributes!

CSS Usage

Selector Declarations

p{color: red;text-align: center;}

CSS Usage

[element] and/or [.class] or [#id]{property: value;}

(without the [ or ] characters)

CSS Usage

Selector nesting#navigation a{

style…}

Backgrounds and CSS

Common CSS background properties: background-color:#012345 background-image:url('flowers.jpg')

Many different properties; check resources online to learn specifics

body{background-color:#002000}

Formatting Text with CSS

Commonly used properties: color: (red, #0000FF, rgb(1,2,3) text-decoration: (none, overline, underline) text-align: (center, right, justify)

Fonts Generic family: similar-looking fonts (Serif,

Sans-serif, Monospace) Font family: (Verdana, Times New Roman,

etc) font-family: “Times New Roman” font-style: (normal, italic, oblique)

Formatting Text with CSS

Font size font-size: (12px, 20px, 36px)

NOT INTERNET EXPLORER (yay standards)

For Internet Explorer: ‘em’ unit equal to default text size font-size:2em would be equal to double

the normal text size

Formatting Links with CSS Properties

link unvisisted link visisted visited link hover mouse over link active selected link

Can use text decoration, colors to assign values to these properties

Assignment

Edit your previous week’s homework! Include at least three new elements

discussed today Write a separate style sheet file and

include it in your HTML file to style your page Use at least three CSS selectors to style

your page Email by midnight next Wednesday to

[email protected]

CPSP 229D: Web design

Documents

Transcript of CPSP 229D: Web design