Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In XHTML and HTML Essential Training, Bill Weinman helps designers and coders understand XHTML and HTML. In the process, Bill covers document structure, block and inline-level tags, floating images, controlling white space, phrase and font markup, and tables and frames. He even provides a good introduction to CSS. Bill offers step-by-step guidance for building a complete working web site. Exercise files accompany the course.
So as we know, the image tag is an inline tag, which means it flows with the text in a paragraph, and so here we have a paragraph with an image tag in it and the image tag is the beginning of the paragraph and then we have some text and the close of the paragraph. So we see it displayed in the browser down here. We have something different that we are not used to. The text is actually flowing around the image. So if I bring this in and watch the text wraps here, it wraps next to the image and then when it gets past the end of the image, it wraps around the image.
That's not what we have seen in the past. The way this is accomplished is with this align=left attribute and that makes the image float to the left side of the text. You can change it to align=right and it will float to the right side of the text. Save that and reload and there now the image is floating to the right. Go ahead and change it back to left for our demonstration purposes and reload it. Another attribute here that you may not have seen before is the hspace attribute and what this does is it provides this horizontal space on either side of the image, you see there is 10 pixels on the right and there is 10 pixels on the left.
If I make this a 0, I get in there and make that a 0, go ahead and save and reload, you will see that the text now wraps very closely to the image. It's right up against the image, there is no space there anymore, because I made the space 0. So I'm going to go ahead and make the space back to 10 for 10 and this makes 10 pixels on ether side. You will see that the text will move away from the image 10 pixels but also the image will move over 10 pixels from the left margin as well. Reload, we'll see that.
That's because this hspace=10, it makes 10 pixels on either side of the image, left and right. And you can use vspace for vertical space as well. That is the image tag we used in a floating mode. This align=left or align=right makes the image float to one side or the other of the text and makes the text wrap around it.
Find answers to the most frequently asked questions about XHTML and HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.