Lao Tzu suggests that the best way to start a long journey is from the very beginning. Last week we made a few first steps into HTML and CSS that would allow us to provide a bit of structure to our blog entries. You’ll recall that I suggested your brain might have been mushed by much of that. It’s not uncommon. So, I’ll recapitulate some of that discussion here.
We are used to thinking of altering text in WYSIWYG applications like Microsoft Word. In Word, if you want something to be italicized, you might highlight the text and click on a button that says “italicize.” The word on your screen then gets a bit squashed and slanted. Behind the scenes, a bit more is going on, but on the screen you only see the effect. In fact, it’s really hard (especially as a human) to read the “behind the scenes” files in the case of Word, but in the case of the Web, it’s at least a little bit easier.
HyperText Markup Language (HTML) is a set of codes for “marking up” text, a term that comes from the days of typewritten (or handwritten) manuscripts that would later go to a printer. You might, for example, circle a bunch of text and say “make this bold or something.” Today, the browser is the printer, and by annotating your text, you can tell the browser how you would like something displayed (or, what kind of information some piece of text is).
Tagging the text
To mark up a piece of text, you put a tag at the beginning of a piece of text, and another tag at its end. For example, if you wanted to emphasize a word, you might write:
Now, <em>that</em> is an interesting question.
In this case, the tag we are using is em, used to emphasize something. A tag is made up of a pair of angle brackets <em>. The end tag is made up of a slash before the tag </em>. The same is true of all tags. For example, the <strong> tag is a way of saying you want some word, or group of words, or even a whole page to be expressed “strongly.” (Normally, the way this is interpreted as a request for “bolding” some section.) You would begin a section with <strong> and end with </strong>.
These tags can be “nested” — that is to say, you might want some text to both be emphasized and strong. For example:
Now, <em><strong>that</strong></em> is an interesting question.
In fact, on most web pages there are nests inside of nests inside of nests. But for blogging, you usually only will use a few tags and don’t have to worry about the more complicated structures.
Once you understand how the tags work, it’s easy to add tags to your vocabulary. Let’s look at some of the others:
<blockquote>: By placing blockquote tags around a piece of text, it is usually set off by larger left and right margins. More importantly, this lets people know about the content: it’s not yours, it’s a quotation.
<p>: This tag marks off a paragraph. Again, it can be rendered (displayed) in various ways, but usually this puts a line before and after the section of text.
Tag attributes
Tags can also have options related to them that further explain what to do with text. Take, for example, the <a> tag makes a piece of text into a hyperlink. But unless you tell it where to link, how can it know? In fact, in some browsers, if you write
Try searching on <a>Google</a>.
The browser won’t do anything at all to the text within the tag. The attribute you need to include is a reference to a hypertext page, or an “href.”
Try searching on <a href="http://www.google.com">Google</a>.
There are two things important to note here. First, the href= part only appears in the first, opening, tag. The closing tag does not have to then repeat this. Second, note that the URL is a fully validated URL, including the http:// part that you might normally skip. In fact, this is the most common mistake that people learning HTML make. If you leave the http:// part off, the link won’t work correctly.
There are some tags, including <div> and <span> that are designed mostly just to hold attributes! They don’t really do much by themselves.
Just a little CSS
One of the attributes you can add to an HTML tag is the “style” tag, which you can use to gain a bit more control over how text is displayed. The style tag allows you to describe how to display something using Cascading Style Sheets. There is no reason to go into depth regarding CSS here, but we should touch on the idea of separating content and display.
Style sheets are designed as a way for telling the computer how to display chunks of text identified by HTML (and other markup language). For example, you might want to say that a section of text is blockquote, but want to ask the browser to do more than the standard margin adjustment. Maybe you want the text to be smaller when a blockquote is used. Later, we’ll get to the idea of how CSS can be largely separated from HTML, but for now, let’s see what they can do together.
Consider this section of text, surrounded by the <p> tag:
<p style="font-size: 6pt;">This is a section of text that explains a very small idea.</p>
This paragraph tag includes an attribute that defines a style for the paragraph, a set of more specific requests for the display of the information. Inside the quotation marks for the font-size attribute there can be one or more style requests, each followed by a semicolon. In this case, we have requested that the font be very, very small: six points. There are other measurements you can use. For example, you could request that the paragraph be written in six-inch letters:
<p style="font-size: 6in;">This is a section of text that explains a very small idea.</p>
If you try this, you will find that it isn’t a very effective size to use on the web. There are many other measurements — including ems, centimeters, and pixels — that you can use.
We can add another style request to the paragraph:
<p style="font-size: 6pt; color: red;">This is a section of text that explains a very small idea.</p>
It should be pretty obvious what this does to the output. Like HTML tags, there are a dozens of other style attributes you can use to affect the way your text is displayed. Later, we will talk about how to use CSS to affect the way your page is displayed, and where pieces of text are placed on the page.
Self-closing tags
There are a handful of HTML tags that don’t enclose anything. It doesn’t make sense for these to have a closing tag. Consider the line-break tag, BR. We could have an open and close break tag, like this: <br> </br>. But for a line-break, there is nothing that seems to make sense that would come between the open and close tag. So, we can collapse it into a single tag, but typing <br />. This tag can be used by itself, as a single, self-closing tag. So,
First line<br />next line.
will be displayed on two separate lines.
Another important tag that is self-closing is the <img /> tag, which displays an image on the page. The image tag, of course, needs some attributes for it to work. The one most vital attribute is the “src” attribute, telling the browser where to find the image to display. If you include the following code, for example, an image of me will be displayed:
You now know almost enough to code HTML “by hand.” There are some important pieces missing, but these are fairly trivial. Once you understand the very basic elements of HTML, you can easily add new tags to your vocabulary, and learn some of the tricks of the trade.
A good place to start might be the cheat sheets found at Web Monkey for <a href=”http://webmonkey.wired.com/webmonkey/reference/html_cheatsheet/”>HTML, or the CSS tutorial. But there are a lot of other good online resources for learning more. I encourage readers to add their favorites in the comments.
[MITIA] Web Authoring in a Post
What is HTML
Lao Tzu suggests that the best way to start a long journey is from the very beginning. Last week we made a few first steps into HTML and CSS that would allow us to provide a bit of structure to our blog entries. You’ll recall that I suggested your brain might have been mushed by much of that. It’s not uncommon. So, I’ll recapitulate some of that discussion here.
We are used to thinking of altering text in WYSIWYG applications like Microsoft Word. In Word, if you want something to be italicized, you might highlight the text and click on a button that says “italicize.” The word on your screen then gets a bit squashed and slanted. Behind the scenes, a bit more is going on, but on the screen you only see the effect. In fact, it’s really hard (especially as a human) to read the “behind the scenes” files in the case of Word, but in the case of the Web, it’s at least a little bit easier.
HyperText Markup Language (HTML) is a set of codes for “marking up” text, a term that comes from the days of typewritten (or handwritten) manuscripts that would later go to a printer. You might, for example, circle a bunch of text and say “make this bold or something.” Today, the browser is the printer, and by annotating your text, you can tell the browser how you would like something displayed (or, what kind of information some piece of text is).
Tagging the text
To mark up a piece of text, you put a tag at the beginning of a piece of text, and another tag at its end. For example, if you wanted to emphasize a word, you might write:
Now, <em>that</em> is an interesting question.In this case, the tag we are using is em, used to emphasize something. A tag is made up of a pair of angle brackets
<em>. The end tag is made up of a slash before the tag</em>. The same is true of all tags. For example, the<strong>tag is a way of saying you want some word, or group of words, or even a whole page to be expressed “strongly.” (Normally, the way this is interpreted as a request for “bolding” some section.) You would begin a section with<strong>and end with</strong>.These tags can be “nested” — that is to say, you might want some text to both be emphasized and strong. For example:
Now, <em><strong>that</strong></em> is an interesting question.In fact, on most web pages there are nests inside of nests inside of nests. But for blogging, you usually only will use a few tags and don’t have to worry about the more complicated structures.
Once you understand how the tags work, it’s easy to add tags to your vocabulary. Let’s look at some of the others:
<blockquote>: By placing blockquote tags around a piece of text, it is usually set off by larger left and right margins. More importantly, this lets people know about the content: it’s not yours, it’s a quotation.<p>: This tag marks off a paragraph. Again, it can be rendered (displayed) in various ways, but usually this puts a line before and after the section of text.Tag attributes
Tags can also have options related to them that further explain what to do with text. Take, for example, the
<a>tag makes a piece of text into a hyperlink. But unless you tell it where to link, how can it know? In fact, in some browsers, if you writeTry searching on <a>Google</a>.The browser won’t do anything at all to the text within the tag. The attribute you need to include is a reference to a hypertext page, or an “href.”
Try searching on <a href="http://www.google.com">Google</a>.There are two things important to note here. First, the href= part only appears in the first, opening, tag. The closing tag does not have to then repeat this. Second, note that the URL is a fully validated URL, including the http:// part that you might normally skip. In fact, this is the most common mistake that people learning HTML make. If you leave the http:// part off, the link won’t work correctly.
There are some tags, including
<div>and<span>that are designed mostly just to hold attributes! They don’t really do much by themselves.Just a little CSS
One of the attributes you can add to an HTML tag is the “style” tag, which you can use to gain a bit more control over how text is displayed. The style tag allows you to describe how to display something using Cascading Style Sheets. There is no reason to go into depth regarding CSS here, but we should touch on the idea of separating content and display.
Style sheets are designed as a way for telling the computer how to display chunks of text identified by HTML (and other markup language). For example, you might want to say that a section of text is blockquote, but want to ask the browser to do more than the standard margin adjustment. Maybe you want the text to be smaller when a blockquote is used. Later, we’ll get to the idea of how CSS can be largely separated from HTML, but for now, let’s see what they can do together.
Consider this section of text, surrounded by the
<p>tag:<p style="font-size: 6pt;">This is a section of text that explains a very small idea.</p>This paragraph tag includes an attribute that defines a style for the paragraph, a set of more specific requests for the display of the information. Inside the quotation marks for the font-size attribute there can be one or more style requests, each followed by a semicolon. In this case, we have requested that the font be very, very small: six points. There are other measurements you can use. For example, you could request that the paragraph be written in six-inch letters:
<p style="font-size: 6in;">This is a section of text that explains a very small idea.</p>If you try this, you will find that it isn’t a very effective size to use on the web. There are many other measurements — including ems, centimeters, and pixels — that you can use.
We can add another style request to the paragraph:
<p style="font-size: 6pt; color: red;">This is a section of text that explains a very small idea.</p>It should be pretty obvious what this does to the output. Like HTML tags, there are a dozens of other style attributes you can use to affect the way your text is displayed. Later, we will talk about how to use CSS to affect the way your page is displayed, and where pieces of text are placed on the page.
Self-closing tags
There are a handful of HTML tags that don’t enclose anything. It doesn’t make sense for these to have a closing tag. Consider the line-break tag, BR. We could have an open and close break tag, like this:
<br> </br>. But for a line-break, there is nothing that seems to make sense that would come between the open and close tag. So, we can collapse it into a single tag, but typing<br />. This tag can be used by itself, as a single, self-closing tag. So,First line<br />next line.will be displayed on two separate lines.
Another important tag that is self-closing is the
<img />tag, which displays an image on the page. The image tag, of course, needs some attributes for it to work. The one most vital attribute is the “src” attribute, telling the browser where to find the image to display. If you include the following code, for example, an image of me will be displayed:<img src="https://alex.halavais.net/photos/photos/alexpics/unhuried.jpg" />Moving forward
You now know almost enough to code HTML “by hand.” There are some important pieces missing, but these are fairly trivial. Once you understand the very basic elements of HTML, you can easily add new tags to your vocabulary, and learn some of the tricks of the trade.
A good place to start might be the cheat sheets found at Web Monkey for <a href=”http://webmonkey.wired.com/webmonkey/reference/html_cheatsheet/”>HTML, or the CSS tutorial. But there are a lot of other good online resources for learning more. I encourage readers to add their favorites in the comments.
Share this: