HTML stands for
hyper
text
markup
language and very simply it is the language that web browsers use to display content. Using it is very different from using a Word processor. HTML uses
tags to define such functions as determining headers, paragraphs, lists, and other bits of markup. For example, an H1 tag identifies selected text as a level 1 header and displays that text as very large and bold. Header tags progress down to level 6, which is the smallest in terms of font-size and weight. When looking at the code for a header, it is identified with an opening and a closing tag, ex. <h1>This is a header</h1>. Note the forward slash in the closing tag. Every html tag will use an opening and a closing tag, with two exceptions: the horizontal rule <hr /> (which creates a horizontal line) and a line break <br /> (which creates a blank line). A paragraph is defined using <p> and </p> to enclose a block of text. Successive paragraph tags will create a blank line between each pair of opening and closing tags.
Other commonly used tags include <ul> and </ul> (unordered, bulleted lists) and <ol> and </ol> (ordered lists). These list tags will have the <li> and </li> tags nested between their opening and closing tags. There can be as many list items (li) as needed. And another is the <div> tag, again closed by </div>. It simply stands for "division", or it can be thought of as a container tag. All of these tags normally reside with in the <body> and </body> tags. This is where the content resides that will display in a web browser.
So typically, one could have (as a very simple example):
<html>
<head>This is where the "workings" like styles, descriptions, scripts, and more, go.
<title>The title of your page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Greetings from the Andromeda Galaxy! We come in peace.</p>
</body>
</html>
By copying the above clump of code and pasting it into a blank Notepad page, then saving it as "index.html" for example, one could then open it in a web browser and see:
Hello World!
Greetings from the Andromeda Galaxy! We come in peace.
Without the underlying code tags, of course.
One of the easiest ways to get one's feet wet is to open a web page in a web browser and right-click somewhere in a blank area of that page and choose View source. This will open a text window that displays all the underlying code. And this is generally where most take one look and never go back. It looks quite complicated to unfamiliar eyes.
There are four basic types of editors.
1. WYSIWYG (what you see is what you get)
2. WYSIWYM (what you see is what you mean)
3. Text (plain text like Notepad where understanding of html and css is important and helpful)
In our district, we use the WYSIWYG editor built-in with our Schoolwires management system. This has the advantage of allowing users to easily create and edit pages using the tools available in the Flex Editor. As with any such editor, however, it is not perfect - none of them are. But most problems arise from a basic misunderstanding of how these types of editors work. As with anything, time spent in careful studying of the capabilities and workings pay off in the long run in terms of time saved by not having to go back and try to correct mistakes, or starting over from scratch.
