Block, or Inline? Your choice.

Hello again.  I’m Horton Deakins, the real-life writer of this blog.  By that I mean that all the other “writers,” Craig Brewer, Professor Dubois, Ichiro Morioka, and Lana Abston, are characters from my new Sci-Fi book, Time Pullers.  So, for them, I say “Howdy,” “Bonjour,” “Konnichiwa,” and “How are you?”

I have created a new trailer for Time Pullers.  You can find it on YouTube by searching for my name, or you can access it via my Web page, www.hortondeakins.com , or you can click on this link: TIME PULLERS TRAILER .  I had a bit of fun creating it, and I hope you enjoy it. The best part was writing the music for it.  Of course, I also hope it makes you want to get the book to find out what it’s all about!

Last time I promised to talk about the HTML elements span and div.  These are container elements that are defined to be, by default, inline, and block, respectively.  What does this mean?  Let’s start with a little history (so apropos for a writer of time-travel stories, don’t you think?)

In the early days of HTML, all the tags, e.g.,” <P>”, for paragraph, were written in uppercase.  Also, it was quite acceptable to have a paragraph tag and not end the paragraph with a closing tag, i.e., “</P>”.  Today, the trend is to make HTML “XHTML” compatible, i.e., HTML written according to the rules of XML, and standards are beginning to tighten, as well.  Thus, out go the uppercase tags, in come the lowercase, and everything must either have a beginning and an ending tag, or in the case of a few elements such as “<hr />”, or horizontal rule, the ending tag is combined with the opening tag by way of the slash.

A “<span> </span>” container is used to group HTML elements that will usually be displayed within the flow, i.e., no extra lines or carriage returns are generated by this container in its default mode (more about that later). A “<div> </div>” container, however, begins a new line before displaying the elements it contains, and it creates a new line at its end before any following content is displayed.  It is as if a rectangle, or “block,” has been created by the <div> in which to render its contents on the screen.

When elements are grouped using a <span> or a <div>, it makes it very handy for the control of the display of these elements as a group using CSS, or Cascading Style Sheets. Unfortunately, CSS is beyond the scope of this lesson, but it can be used to control the margins of the block and how much padding is allowed around the internal elements, the size and color of the text, the font, and many other things.

I mentioned “default mode” before. It is actually possible, using CSS styles, to reverse the inline and block properties of the <span> and <div> containers, thus making the one behave like the other. The reasons for doing this also fall beyond the scope of this lesson, however.

Let me conclude with a quick example of how to apply margins around a <div> and padding around the elements it contains.   We won’t use a style sheet; we will instead add what is called inline style. Enter the following HTML markup (notice I didn’t say “code,”  since, strictly speaking, the creation of HTML markup is not coding, a word which is generally used as a synonym for programming. HTML is not a programming language) into the body of your HTML document:

The <div> block containing the paragraph will have at least 100 pixels of space all around it, and the <p> block inside the <div> will have at least 50 pixels of space (padding) all around that.  Note that the blocks expand to the width of the window or the containing block, minus the margin (or padding). This is easy to see with the borders we placed around the blocks.  Note that the widths of the blocks change dynamically as you adjust the width of your browser window.

That’s it for this time.  Check out my book trailer—it’s less than two minutes long.
TIME PULLERS TRAILER