Simple HyperText Markup Language
HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser.
If you’re creating a website or even a blog, knowing some of the basics of the code can help you alleviate a lot of frustration when you’re trying to format your text and it simply won’t work properly! Grr!
The best thing to do in these cases, is not get frustrated, but look at the code behind the text. Whither you’re using a HTML editor, or adding a new post or page to your blog, both editing systems will have a way to look at the code. When you have a general idea of what you’re looking at, you can find the issue and make attempts to fix it.
The HTML editor will probably have some form of “Source” view, you simply have to find where it is. For instance, the editor I recommend, Kompozer, the Source option is at the bottom of the screen.
In a WordPress blog post, you’ll typically type your text in the Visual editor, and up in the right hand corner you’ll see a tab that says Text. That text is the source code, behind your page.
You don’t have to know how to code a page from scratch. But sometimes knowing what the basic codes do and how they’re supposed to be configured will help you find problems or issues that are changing the format of your articles and not letting you do what you want. So here’s a basic overview of HTML.
If you’re not a technical person, Don’t Panic!
This really is a lot easier than you might think. You need to know 3 things.
- HTML codes are called Tags.
- All tags are identified between greater than/less than brackets <tag>
- All tags have a start <tag> and an end </tag>
Now you know enough to create HTML. What goes in between the brackets is what tells a browser what to do with the text. To make it bold, to make it part of a numbered or bullet list, or to indent text or make it italicized. So let’s get to it.
|
A page typically consists of 3 parts. You probably won’t see these parts for a blog post. But they’re there.
|
||||||||
<HTML> |
A web page can be created with simple HTML, DHTML, a Java Script, VRML or a more complex CGI, C++ or Perl program, or a variety of other languages. Many business sites today use JAVA applications to provide varying database services. We’re going to focus on HTML here.HTML code is really just a series of TAGs that tell a browser how to display the text you want the user to see. With only a few exceptions, all the tags are made up of 2 statements, one to START the tag command and one to END the tag command. |
||||||||
| <HTML> <title> The Smith’s Home Page </title> <body> <center> Welcome <br> To Our Little Home On The World Wide Web </center> </body> </HTML> |
A tag is represented by a reserved word which is contained inside 2 brackets <HTML>. A web page must start with the <HTML> tag and end with the </HTML> tag.The TITLE section defines the heading on the browser window. For instance, if you look at the top of your browser, you’ll see the heading for this page, which says:The Bare Minimum Basics of HTML | Springwolf’s Kosmos . That information is specified by the title tag.The BODY of your web page can contain images, text and links to other pages or sites. This is typically where your blog post starts it’s code behind the “Visual” tab. But if you look at one of your blog posts, even if you look at the source for this page, you’ll see all these components in the source. . Give it a try. Right click on this page, and select “View Page Source” from the pop up menu. A new window will pop up where you can see the code. At the top you’ll see something like: <!DOCTYPE html>, there maybe additional “If” statements, but you’ll also see <html lang=”en-US“>, <head> and a <body> tags as well. |
||||||||
<Strong>Bold</Strong> <I>Italic</I> <EM>Italic</EM> <U>Underlined</U> |
. Why the two versions? Because Techies can’t agree on anything! We have to reinvent the wheel sometimes. The Strong and EM tags, and a few others, came along during the creation of Web 2.0, which describes World Wide Web sites that use technology beyond the static pages of earlier Web sites, presumably Web 1.0. . With today’s technology, many HTML editors will accept both types of codes, but some will translate the old into the new. For instance you might manually type in <i> in the source code mode, when you switch back to the visual view of your page, the editor will change that to <em>. Either way, as long as it works, I don’t care. |
||||||||
Here we can use the <BR> tag for a hard line break to force a new line within a paragraph. <P> Then using the <P> tag to force double space for a new paragraph. |
The other way to regain textual control is to use a ‘hard’ break <BR> tag where you want a carriage return. This allows you to keep lines short – and to control the flow or presentation of your text, instead of allowing the text to continuously wrap around.The paragraph does exactly what it sounds like. It creates a new paragraph of text on your web page. So here we have two paragraphs. . The first is running on and looks like a normal paragraph. In a blog, you simply keep typing and hit the return key to get a new paragraph.But what if you don’t want a line between the heading of your paragraph and the paragraph itself, like I have defined above in this section? After the “Breaks:” there’s a <BR> tag. . In the blog version, you can achieve that by pressing the SHFT key, then press the Return key, and you’ll move down 1 line to continue entering your text. |
||||||||
space between words. |
At times you’ll find a need to include extra spacing between words or images. HTML code does not recognize more than one blank space between two objects. To get around this you can use the ‘non-breaking space’ ( ) tag to force extra spacing. . So if I want to say: This is part 1 of a line – and – this is part 2 of the lineI would use the before and after the ” – and – ” to achieve that extra space look. |
||||||||
<DT>HEADING/TERM <DD>DEFINITION </DL> |
Using a Term and definition list can also help you format your text.Not just for creating glossaries, but also for creating titled sections within your web page. You may remember this format which we used on the previous page to explain the web environment. . The easiest way to remember this is that <DL> tells your browser that you’re going to create a Definition List now. <DT> says this is the Definition Text</DT> <DD> is the Definition itself</DD> </DL> tells the browser, you’re ending the Definition List. . Most Blogs will include the ending tag in the code. But this may not show up in a static HTML editor. Here’s how it would look through your browser. .
|
||||||||
| <BLOCKQUOTE> Creating an indent </BLOCKQUOTE> |
Blocking text is used when you want to indent an entire paragraph to set it apart from the rest of your text. The code to the left will produce text that looks like the following:
|
||||||||
Even with the limitations of current HTML code, you can still do a lot to design your web page in an easy to read format. You can structure your text with numbered lines, bullets or blocking. . Most editors, for HTML or Blogs, have handy buttons you can push to create numbers and bullets. But what if they don’t come out looking the way you want. Especially in the blogging editors, I often have issues with copying text and pasting into what I’m working on for a bullet list. It’s fairly annoying. But it would be even more annoying if I didn’t know how to fix it in the code. |
|||||||||
<UL> <LI>Item 1 <LI>Item 2 </UL>Nested Unordered List: <UL> <LI>Item 1 <UL> <LI>Item 1a <LI>Item 1b </UL> <LI>Item 2 </UL> |
There are two tags used to create lists. The Un-ordered List creates a bullet list. The code to the left will produce a bullet list like this:
You can include a sub-bullet simply by adding another tree of the UL tags. Such as this:
|
||||||||
<OL> <LI>Item 1 <LI>Item 2 </OL>Nested Ordered List: <OL> <LI>Item 1 <OL> <LI>Item 1a <LI>Item 1b </OL> <LI>Item 2 </OL> |
Ordered / Numbered Lists: The second list tag is for creating an Ordered List creates a numbered list. The code to the left will produce a bullet list like this:
You can include a sub-bullet simply by adding another tree of the OL tags. Such as this:
|
||||||||
| <UL TYPE=A> <LI>1st listing <LI>2nd listing <LI>3rd listing </UL> . The code above will create this:
|
Both the Unordered List and Ordered List can be used with additional parameters to change the type of bullet or number used in the list.With the <UL> tag you can use the TYPE parameter with the following values: CIRCLE SQUARE DISC . With the <OL> tag you can use the TYPE parameter with the following values: A a I i 1 (When used with the VALUE attribute) |
||||||||
Be careful using these attributes with HTML editors, such as PageMill. If they do not provide an option through their front end interface, you’ll have to code these values by hand through the HTML view. But when you switch back to the ‘page view’ they may replace the code you entered from ‘A’ to an ‘a’. . It can be frustrating and annoying. You can safe the options you set IF you make your final updates through the ‘code view’ and save your page without switching back to the ‘page view’. Then you’ll have to remember this page has to be modified through the ‘code view’ instead of the ‘page view’. .
|
|||||||||
Structure Text As Well |
Tables can give you a great deal of formatting assistance. You can place pictures in specific locations relative to a group of text. Or you can set up highlighted text next to a detailed description. . The format of this page is actually a table. The 1st column is what you see to the left as the bold text and examples. The 2nd column contains the text you’re reading right now. . |
||||||||
These are just some of the bare basics of HTML. You can find many resources online to help you learn more, or to find out what a particular command can do. Don’t under estimate the help you can find from a good Google search. There are tons of sites out there that can help you code your pages. |
|||||||||
© 1997-2014 Springwolf, D.D., Ph.D., Springwolf’s Kosmos. All Rights Reserved.
This helped me a lot. Thanks