A Beginner’s “Beginner’s Guide” to HTML

(this is a repost of a blog post from http://ryan.cordells.us/s13dh/blog/

I spent a decent amount of time working through HTML tags and format after class last Wednesday, so this week I decided to put general formatting tips and tags into a single post. I will begin with a few comments on structure concerning HTML, and then I will list various common tags and sub-tags that you will probably need if you choose to do more with HTML. This post will not consider CSS yet—I might try to incorporate that into next week’s post. I will conclude with a few style- and organization-related tips that I have found useful.

 

HTML stands for “HyperText Markup Language.” It pairs pure text and text “tags” in a plain-text document. Depending on the specific tag, these tags manipulate the appearance of the entire page, of sections of the page, of the entire text, or of sections of text. Tags are specific words enclosed in “<” and “>.” So an example of a tag would be “<Example>.” Tags typically surround regular text have an effective range based on the positions of the opening and closing tags. Most tags must be closed with a closing tag, such as “</Example>.” For the purposes of this overview, assume that a tag introduced here requires a complementary closing tag unless specifically stated. Using this fictional example tag, an example of html tags paired with pure text would be:

“<Example>EXAMPLE</Example>”

 

Also you are not limited to only use one tag to apply to a given text. Multiple tags often apply to the same text areas, and often tags open and close within the text of a tagged larger section. So for example:

“<Example>This is an <ex>EXAMPLE</ex> !!!</Example>”

 

Now that those basic structural components are out of the way, it is time to learn some key tags that any beginner HTML user should learn. First, one must learn the opening and closing tags that initiate and terminate any html project. This is the “<html>” opening tag and “</html>” closing tag. These tags signify that you are creating an HTML document. Some sources say you need to include a “<!DOCTYPE html> tag before the <html> tag, but others do not. I would suggest including it anyway—it certainly would not hurt.

 

There are two important tags that divide your document in sections. These are the “<head>” and “<body>” tags. The “<head>” tag describes the header of the document. It is not the actual page but what lies above it. If you are viewing this blog post on the s13dh blog section, the <head> section would be the text “Blog | Doing Digital Humanities (S13)” at the very top of the web browser. You can title the <head> section by including <title> tags surrounding what you wish it to say.  The <body> tag distinguishes the main part of your webpage from this <head> section. The body is the main text of your page, and most of your HTML tags will be nested between the <body> opening and closing tags.  Also in order to make a line break on your webpage, you cannot just press enter in the plain text document. You must include a “<br>” tag in order to indicate where you want the line break.

 

Within the body there are certain tags that deal with the appearance of various sections of text on your page. Heading tags are designated <h1> to <h6>. These are preset heading sizes. Think of the tags like Russian nesting dolls, where <h1> is the largest and <h6> is the smallest.

 

Paragraph tags enclose exactly that—blocks of text that you want to appear as part of a single paragraph. These paragraph tags are designated by “<p>” tags. Two more important tags to remember are the “<strong>” and “<em>” tags: “<strong>” tags bold the text in between the opening and closing tag, whereas “<em>” tags make that text italicized.

 

Besides this heading and paragraph format, HTML also allows you to create both ordered and unordered lists. Ordered lists are designated by the opening tag “<ol>” and create numbered lists. Typically one might use a heading tag to title the list, followed by the “<ol>” opening tag. Between the opening and closing tags of “<ol>,” the list items are designated between “<li>” and “</li>” tags. Here is an example of what an ordered list might look like in HTML:

 

<h2>Important List</h2>

<ol>

<li>Ordered List Item 1</li>

<li>Ordered List Item 2</li>

<li>Ordered List Item 3</li>

</ol>

You can also create unordered lists, which create bullet point lists rather than numbered ones. Unordered lists follow the same format as ordered lists except are designated by the “<ul>” tag rather than by “<ol>.” You can also nest unordered lists within order list items and vice versa.  To expand off of the above example:

 

<h2>Important List</h2>

<ol>

<li>Ordered List Item 1</li>

<ul>

<li>Unordered List Item 1</li>

<li>Unordered List Item 2</li>

<li>Unordered List Item 3</li>

</ul>

<li>Ordered List Item 2</li>

<ul>

<li>Unordered List Item 1</li>

<li>Unordered List Item 2</li>

<li>Unordered List Item 3</li>

</ul>

<li>Ordered List Item 3</li>

<ul>

<li>Unordered List Item 1</li>

<li>Unordered List Item 2</li>

<li>Unordered List Item 3</li>

</ul>

</ol>

 

Remember that you can nest any style tags, such as <strong> and <em> within the any of the list sections.

 

There are two more key tags the beginner HTML user should become very familiar with. These are the tags for generating images and hyperlinks. Hyperlinks begin with the tag <a href=” ”> and end with the “</a>” tag. This is a different kind of tag than what I have shown you so far. The equal sign and the quotation are vital in creating the tag. Between the quotation marks after the equals sign, you type in the URL for whatever website you want your hyperlink to link to. For example, if you want your hyperlink to take you to Twitter, it will look something like this:

<a href=”http://twitter.com”>Click here for Twitter</a>

 

What if you want to add an image to your page? It is also quite simple. You simply open a <img src=” ”/> tag, where the URL of the image is placed between the quotation marks. Note that this tag is considered a self-closing tag—you do not need a “</>” closing tag after the opening tag. Instead you close the tag by placing “/>” after the image URL. You can even make a picture a hyperlink by placing an image tag in the place of the text between the <a href=””> and </a> tags. It would look something like this:

 

<a href=”http://twitter.com”><img src=”Insert Image URL”/></a>

 

These two tags also bring up an important part of HTML tags in general. Notice the “href=” and the “src=” parts of the tag. Now these are vital to forming a hyperlink or generating an image, but they also represent subsections of a more general HTML tag. Each general HTML has certain “sub-tags” (my words) within the tag that allow for more customization. Sometimes utilizing CSS for these style elements is easier, but I will mention a few here that you will probably run across.  Probably the most common “sub-tag” is the “style=” designation. Within the quotation marks you can determine the background color, font, font color, font size, and alignment. These style elements are designated by a specific phrase, a colon, followed by the customizable section. You string multiple style elements within the same “style=” sub-tag quotation marks by placing a semicolon between sections. Here is a list of examples of these style tags:

Background color: background-color: blue

Font: font-family: Times New Roman

Font color: color: red

Font size: font-size: 16px

Alignment: text-align: center

 

Here is an example of a paragraph tag utilizing all of these style elements in one tag so that you can understand how they go together:

<p style=”background-color: blue; font-family: Times New Roman; color: red; font-size: 16px; text-align: center”> This is a stylish paragraph! </p>

 

These style tags can apply any of your tags that designate text, such as the <body>, <h1>,  <ol>, <ul>, or <li> tags I have mentioned above. If you include these style elements in the body tag, it will affect the entire document, whereas if you utilize it in the other sections it will only affect the text and page area between its opening and closing tag.

 

Finally there are a few more sub-tags that are useful to know starting out. Concerning resizing images the “width=” and “height=” sub-tags are pretty simple to incorporated. They are included in the image tag after the “src=” but before the “/> “ closing tag section. The sizes are measure in px—or pixels—and are accompanied by a number. An example of a resized image tag would look like:

<img src=”Insert image URL” width=”200px” height=”200px” />

 

Notice that between these sub-tags, only a space is necessary. You do not need to put in punctuation as you have to in the style tags within the “style=” quotation marks. Also be careful to maintain the same width to height ratio as the original image, or it will look distorted. For example, if the original image was 720px by 360px, an acceptable resizing would be 360px by 180px not 200px by 200px. A final important introductory sub-tag is the “id=” tag. This is more useful if you are utilizing CSS stylesheets later, but it allows you to individually name certain sections of your page so that you can apply unique styling to them in your CSS stylesheet.

 

Finally, here are a few tips for being successful at using HTML:

  1. Utilize the space you have available in the plain text document to organize your html document. Make it easier for yourself. Line breaks and indentations in an HTML plain text document do not translate over to the web page. If you are using an opening tag with a lot of other tags in between, such as the “<head>” or “<body>” tags, make everything that comes in between indented further than the opening tag. This will not only help you remember to close your tags, but will also allow you to visualize what tags are within others. Moreover, this will make it easier to include style tags to exactly the sections you want to.  For a visual example of this see the above section on ordered and unordered lists.
  2. Be careful about punctuation! One missed quotation mark, opening “<,” closing “>,” semicolon, colon, or dash will result in your tags not being recognized. Following the above tip will help you with this, but make sure you are still very careful about punctuation.
  3. Preview your page in an online browser frequently, if possible. Do not think you are going to sit down, place your <html> tag, insert your entire page content flawlessly, close your </html> tag, and have a completed web page. Check after each section. Make sure your organization and punctuation is correct. Sometimes it is hard to notice a punctuation or spelling error as you are typing, but if you preview your page and notice the desired effect did not translate, then you know where to look.

I hope this “Beginner’s ‘Beginner’s Guide’” helped out. I know just writing it helped me understand the process even more. There are certainly more things you can generate and play around with while using HTML, but these structural and content related properties and tags can help you start out.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s