Putting An Image on Your Web Page
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 Attributes 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
Changing Some Colors
CSS Cascading Style Sheet Write rules to apply styles to page content Show students the CSS Zen Garden site. This site makes available an html page and a style sheet that graphic designers can use to submit their own styling of the page. As you select a design, ask students to notice how the content (text) of the page isn’t changing. Not changes are being made to the html file, only changes to the CSS used to apply styles to it. Have students note the extreme differences in style applications that have been provided as examples to this site.
Creating a CSS Rule Selector: what element to style? Property: what portion of element tweak? Value: sets value for that property
Selector 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.w3schools.com/tags/ref_colorpicker.asp
What Properties Let You Change Color? Thing It Changes Official Property Name Color of Text color Background color of screen behind background-color