Web design Tutorials Lesson 4.( Part 5)

Images and CSS

Before we have a tendency to begin, make certain to repeat our smaller pictures over to your york_images pictures folder, as explained earlier. There ought to be five of those within the files you downloaded for this course: (If you haven't got the additional files nonetheless, the transfer location is here, beneath the heading internet style - New Course : 

transfer the additional Files required for this course (You do not would like the downloads for the recent course.)

york_minster.jpg

york_minster_2.gif

york_minster_3.gif

york_minster_4.gif

york_minster_5.gif

The smaller ones square measure all GIF pictures.

In HTML5, image alignment is finished victimization CSS. However, if you simply wish basic left, right or centre alignment then the DIV tag is kind of helpful. The DIV tag is associate degree general-purpose tag. It's somewhat just like the P tag in this you get a line break once you employ it.

To see the DIV tag in action, amend your markup language code to the present (we've disregarded the DOCTYPE tag at the top):

Here, we're employing a try of DIV tags: . once an area, we've more the attribute ALIGN="right". this may apply to something between the gap and shutting DIV tags. For us, this can be the second of the House of York cathedral GIF pictures.

Save your work and reload the net page in your browser. you ought to see this:

The different 2 horizontal values for the ALIGN attribute square measure left and center (American spelling). strive them out by deleting "right" and replacement it with 1st  then . Save your work and see what the results square measure in your browser. (If you simply wish left alignment then you do not would like the DIV tags in the least, as a result of left is that the default alignment.)

The ALIGN attribute may also be used with the P tag:

 Again, this may apply to something between the 2 tags, together with tex

Now add some text on top of and below the 2 DIV tags:When you save your work and look at the results, you ought to see this with a left aligned image:

Notice that the DIV tags has place some house on top of and below itself: you do not ought to add a P tag for the text. however you'll if you wish - it is often smart apply to own your text between P tags.In the next lesson, you will see the way to wrap text around a picture with CSS.