Download presentation
Presentation is loading. Please wait.
1
Putting An Image on Your Web Page
2
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
3
Considered in a Bit More Detail
Attributes Considered in a Bit More Detail
4
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
5
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
6
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)
7
height & width Why specify?
So browser knows how much space to leave for the picture as the page renders
8
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
9
Changing Some Colors
10
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.
11
Creating a CSS Rule Selector: what element to style?
Property: what portion of element tweak? Value: sets value for that property
12
Selector Selector can be any html tag
If selector is a tag, will apply style to all such tags on the page
13
Where does the CSS go? <head> section After the meta tags
Between two <style> tags Define as many style rules there as you need
14
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
15
Using Color Picker When you write your style rule… Type color:
The picker will pop up Alternate Option: Website with Color Picker:
16
What Properties Let You Change Color?
Thing It Changes Official Property Name Color of Text color Background color of screen behind background-color
Similar presentations
