Web Designing TutorialsAdding captions to images)

Two new elements are the HTML5 tags FIGURE and FIGCAPTION. The first one, FIGURE, is good for things like images and other graphics, while FIGCAPTION is used to tell people what they are looking at. As an example, take a look at the following code:

<FIGURE>

<IMG SRC=”york_images/york_minster.jpg”>
<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>

</FIGURE>

Read More...

Web Designing Tutorials(Background Images and Background Positions)

You can set your backgrounds to be images, if you prefer. The CSS property to use is background-image. For the value, you specify the location of your image. This goes between round brackets and after the word url. The image name is surrounded with single quote marks:

BODY {

background-image: url(‘my_image.gif’);

}

The same rules on image referencing you learned earlier apply here. The above code, therefore, references an image in the same folder as the current web page. You could place your background images in a folder called backgrounds. The code would then be:

Read More...

Web Designing Tutorials(CSS Image Borders)

You can have a nice border around your images. There are quite a lot of CSS borders to choose from. But not all are supported in every browser. For example, the border style inset might work OK with a black border in Firefox but not Internet Explorer. (Most border styles should work OK, though.)

The border properties you’ll use the most are these:

border-style
border-width
border-color

The border style values you can use are these (you can also use outset, hidden, and none, but we won’t):

Read More...

Web Designing Tutorials(Wrap text around an image with CSS)

A few of the IMG Attributes from previous version of HTML have been deprecated in HTML5. One of the most-used was the image alignment attributes. You had quite a few to choose from:

Absbottom
Absmiddle
Bottom
Middle
Left
Right
Texttop
Top

So you could do this:

Read More...

Web Designing Tutorials(Images and CSS)

Before we start, make sure to copy our smaller images over to your york_images images folder, as explained earlier. There should be 5 of these in the files you downloaded for this course: (If you haven’t got the extra files yet, the download location is here, under the heading Web Design – New Course :(You don’t need the downloads for the old course.)

york_minster.jpg
york_minster_2.gif
york_minster_3.gif
york_minster_4.gif
york_minster_5.gif

The smaller ones are all GIF images.

Read More...

Web Designing Tutorials(Image Attributes)

When you use IMG you are using a HTML tag. The SRC part is called an attribute. There are lots of other attributes you can add to the IMG tag. Here are the image attributes in HTML 5:

ALT
SRC
HEIGHT
WIDTH
USEMAP
ISMAP

In previous versions of HTML, you also had these:

Read More...

Web Designing Tutorials(More on Inserting Images)

Navigate to where on your hard drive you saved your HTML pages. For us, this was a folder called HTML. Inside of the HTML folder, create two more. Call one of the folders images and the otherpages. If you’re using a Windows computer, your Explorer window will then look like this (Windows 7):

Read More...