Download presentation
Presentation is loading. Please wait.
1
COMP 101 Review
2
Topics page structure validation file structures box model centering
lists links selective formatting colors
3
Page structure
4
Page <!DOCTYPE html> <html lang=“en”> <head></head> <body></body> </html>
5
Head <head> <title></title> <meta> <link> <!– CSS and google fonts --> </head>
6
Body <body> <header></header> <main></main> <footer></footer> </body>
7
validation
8
Validation error = something wrong
Validater tries to fix Adds tags that aren’t closed If tag in wrong context, will create context <p> in head <ul> in p Complains if not told everything Language Character set
9
File Structures
10
Need to organize information
Folders contain files To find a specific file, need to identify the folder it is in Folders can hold files or other folders Think of the path as a set of google map directions: takes you step by step Always starts you where you are Analogies Finding a room A person’s name Folder/folder/file.ext (only files have extensions)
11
Box model
12
Box Model Margin – clears an area around the border. Does not have a background color – it is transparent Border – a border that goes around the padding and content. Affected by the background color of the box. Padding – clears an area around the content. Affected by background color of the box Content – the content of the box, where text appears. Don’t forget to give the border some sort of style! <div> this is a div with some text <br/> In fact, this text has two lines <div> div { width:220px; padding:10px; border:5px solid gray; margin:0px; }
14
Chrome Inspect
15
Centering
16
Two Categories Centers text within the CONTENT space
TEXT-ALIGN DISPLAY: BLOCK Centers text within the CONTENT space Centers the whole box, not the content within Needs a width BLOCK: you specify the width TABLE: computer computes Tell browser to balance the margins MARGIN-LEFT: AUTO NARGIN-RIGHT: AUTO
17
lists
18
List options Ordered or unordered Bullets or no bullets
Bullets inside box or outside of it Vertical or horizontal Whole list Position Width Alignment of text in each list item
19
links
20
Links Need to define two things: The destination
Something to click on to get there Tag is <a href=…>click here</a> Can be text, special character or image (next week) Can change the text format
21
href formats summary To reference Use Another file in the same folder
file.ext A file in a subfolder subfolder/file.ext index.html in a subfolder subfolder A file in a containing folder ../file.ext Anchor point on this page (need an id) #anchor The top of this page # Anchor point other page same folder file.ext#anchor An external page (target=“_blank”)
22
Link Pseudo-classes Link states a:link -- a normal, unvisited link
a:visited -- a link the user has visited a:hover -- a link when the user mouses over it a:active -- a link the moment it is clicked Note: CSS order important hover must come after link & visited active must come after hover LoVe HAte a:link { color: green; } a:visited { color: black;
23
Selective formatting
24
Selecting one of several definitions for the same tag
Name the context in the css by using a space header p { text-align: center; } footer p { text-align: right; Any div with the class of center can look like this.
25
Class for one element Name the declaration set for a specific selector (tag) HTML: class=“name” CSS: tag.name div.intro{ text-align: center; } <div class=“intro”> </div> Any div with the class of center can look like this.
26
Class for many elements
HTML: class=“name” CSS: .name Particularly useful for maintaining consistency .intro{ text-align: center; color: red; } <h1 class=“intro”>Header 1</h1> <h2 class=“intro”>Header 2</h2>
27
Using class and pseudo p.intro:first-letter { color: red; } a.highlight:hover { color: red; }
28
colors
29
Color Defintions Names RGB(red, green, blue)
Each is a decimal value 0-255 #RRGGBB Each is a hexadecimal value 00-FF
Similar presentations
