Look especially at › File Tips and Shortcuts › Student video.
-
Upload
carmella-barnett -
Category
Documents
-
view
219 -
download
0
Transcript of Look especially at › File Tips and Shortcuts › Student video.
![Page 1: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/1.jpg)
CSS
![Page 2: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/2.jpg)
New Resources Posted
Look especially at › File Tips and Shortcuts› Student video
![Page 3: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/3.jpg)
Special symbols in HTML < and > are special symbols with special
meaningsHow would you display A < B ?Suggestions?
< for < and > for >& is an escape symbol, handled specially.Always ends with ;
Means that you need a special way to display
“&” too: &
Good list at http://www.utexas.edu/learn/html/spchar.html
![Page 4: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/4.jpg)
Web Instructions: Three Legs
HTML
Content
CSS
Presentation
JavaScript
Behavior
![Page 5: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/5.jpg)
CSS...CSS is for giving style to your contentHTML: contentCSS: styleCSS Zen Garden
![Page 6: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/6.jpg)
What can you change?
Font: size, color, style› More on color next week› For now, by name
Background Border
› Must have size color and style Position: margins, centering Size
![Page 7: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/7.jpg)
Syntax (how it looks)
Selector specifies the HTML element to styleDeclaration:
always contains a property & valueends with a semicolon
Property: style element you want to change Value: what you are changing the property to
![Page 8: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/8.jpg)
Formatting your CSS
Formatting Practices:some flexibility, but you must be consistent.always comment unclear code!
/* someCommentHere */curly bracestab alignment
Bad practices:declarations on the same line as braces or selectormultiple declarations on the same lineleaving off the last semi-colon
![Page 10: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/10.jpg)
Font Families
Preferable to use: universality Multiple fonts: use first available
![Page 11: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/11.jpg)
Defining size
pt refers to printer’s font measurement
px refers to pixels
em is a relative measure› 1 em = base size (defined in body or
default)› Great for changing all at once
![Page 12: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/12.jpg)
Page Structure
![Page 13: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/13.jpg)
General Page Structure<!DOCTYPE html>
<html><head> <! ---defining character necessary for validation --- > <meta charset="UTF-8"> <! --- what shows up on the tab --- >
<title>Put your title here</title></head><body>
<! --- the “good stuff” i--- > What will appear on the page
</body>
</html>
![Page 14: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/14.jpg)
The Body
Every page needs› Header (DIFFERENT THAN head)› Content› Footer
Minimal content› Header: title› Footer: who wrote it and when
![Page 15: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/15.jpg)
Dividing Up the BodyBasic model:
<header>…</header>Use for main title
<main> … </main> Use for the main content
<footer> … </footer>Use for accreditations and citations
Each section can be formatted independently (soon)
![Page 16: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/16.jpg)
Adding CSS to your HTML
The best (only way for this class!) way to insert CSS to your HTML is by using an External Style Sheet
Define all your styles in one placeEasily change the look of your siteUse the following <link> tag within the <head> tag
Save your external style sheet as a .css file.
<link href=“mystyle.css” rel=stylesheet type=“text/css”>
![Page 17: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/17.jpg)
Folder Structure
![Page 18: Look especially at › File Tips and Shortcuts › Student video.](https://reader035.fdocuments.net/reader035/viewer/2022062805/5697c0251a28abf838cd512b/html5/thumbnails/18.jpg)
One folder per assignment
Contains all needed pages› HTML› CSS› (more to follow)
Main (first) page called index.html Can view the page with the folder
name unc.edu/~pozefsky/foldername