Post on 20-Jan-2016
description
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/> <!-- This is a comment -->
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
sduwebship@gmail.com