albert wavering bobby seng. week 2: html + css quiz announcements/questions/etc some functional...
TRANSCRIPT
![Page 1: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/1.jpg)
ALBERT WAVERINGBOBBY SENG
![Page 2: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/2.jpg)
Week 2: HTML + CSS
Quiz Announcements/questions/etc Some functional HTML elements
![Page 3: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/3.jpg)
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’
![Page 4: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/4.jpg)
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>
![Page 5: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/5.jpg)
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 -->
![Page 6: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/6.jpg)
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>
![Page 7: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/7.jpg)
HTML Tables
<table> table tag<tr> table row
<td> table cell</td>…
</tr>…
</table>
![Page 8: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/8.jpg)
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
![Page 9: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/9.jpg)
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
![Page 10: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/10.jpg)
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
![Page 11: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/11.jpg)
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
![Page 12: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/12.jpg)
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!
![Page 13: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/13.jpg)
CSS Usage
Selector Declarations
p{color: red;text-align: center;}
![Page 14: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/14.jpg)
CSS Usage
[element] and/or [.class] or [#id]{property: value;}
(without the [ or ] characters)
![Page 15: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/15.jpg)
CSS Usage
Selector nesting#navigation a{
style…}
![Page 16: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/16.jpg)
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}
![Page 17: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/17.jpg)
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)
![Page 18: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/18.jpg)
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
![Page 19: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/19.jpg)
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
![Page 20: ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS Quiz Announcements/questions/etc Some functional HTML elements](https://reader035.vdocuments.site/reader035/viewer/2022062422/56649ec45503460f94bcf18a/html5/thumbnails/20.jpg)
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