img Tag src specify the file name extension

src Filename is case-sensitive Spaces in filename cause problems Naming convention for us: Keep

Where should the file actually be located The pictures are still separate from the

Relative The URL we are listing for the image is just the filename or

height & width Why specify? So browser knows how much space to leave for

alt Description of what the picture shows Why? some of your visitors cannot see

CSS Cascading Style Sheet Write rules to apply styles to page content

Creating a CSS Rule Selector: what element to style? Property: what portion of element

Selector can be any html tag If selector is a tag, will apply style

Where does the CSS go? <head> section After the meta tags Between two <style>

What are these color numbers? We’ll talk in depth about what they mean later

Using Color Picker When you write your style rule… Type color: The picker will

What Properties Let You Change Color? Thing It Changes Official Property Name Color of

Slides: 16

Download presentation

img Tag src specify the file name & extension of the picture width & height of the picture in pixels alt Short description of the picture in words

Considered in a Bit More Detail

src Filename is case-sensitive Spaces in filename cause problems Naming convention for us: Keep filenames fairly short Separate multiple words with hyphens Filenames should make sense to describe image

Where should the file actually be located The pictures are still separate from the page If src=“filename. jpg”…. filename. jpg sits directly next to the web page in the SAME folder If src=“images/filename. jpg”… filename. jpg sits inside a folder called images that is in the same folder as the web page

Relative The URL we are listing for the image is just the filename or the filename and folder that contains it This is b/c the picture is internal to our site If picture were not in our site (still saved on Flickr, etc), we’d need the whole URL (an absolute address)

height & width Why specify? So browser knows how much space to leave for the picture as the page renders

alt Description of what the picture shows Why? some of your visitors cannot see images alt attribute is of great help for those search engine bots can use this info

CSS Cascading Style Sheet Write rules to apply styles to page content

Creating a CSS Rule Selector: what element to style? Property: what portion of element tweak? Value: sets value for that property

Selector can be any html tag If selector is a tag, will apply style to all such tags on the page

Where does the CSS go? <head> section After the meta tags Between two <style> tags Define as many style rules there as you need

What are these color numbers? We’ll talk in depth about what they mean later For now – to figure out a color – easiest way is to find the Brackets Color Picker extension and install it

Using Color Picker When you write your style rule… Type color: The picker will pop up Alternate Option: Website with Color Picker: http: //www. w 3 schools. com/tags/ref_color picker. asp

What Properties Let You Change Color? Thing It Changes Official Property Name Color of Text color Background color of screen behind background-color