HTML Terminology
Alt text: Text description of a graphic that appears before the graphic is loaded into the browser. After an image has been downloaded on the browser, the alt text may briefly appear over the graphic as you rollover the mouse over the graphic.
Anchor <a>: The anchor tag is used to define a hypertext link.
Angle brackets: less than (<) and greater than (>) symbols used to surround an element to create a tag.
Attribute: A property of an HTML element used to provide additional instructions to a given HTML tag. The attribute is specified in the start of HTML tag.
Elements: An element in HTML refers to a tag (such as <head>, <body>, and <p>) or element of structure of a document(such as body, title, and paragraph).
Entities: Entities are those characters that do not appear on the keyboard (i.e., ™ ©, ®, etc.) or characters that have special meaning in HTML (i.e., <, >, &, etc.).
Form: A mechanism that enables a user to supply input to the web page author.
Footer text: The text that is not specifically related to the content of the webpage and that appears on every webpage is referred to as footer text. The most notable example of footer text is the copyright statements at the bottom of webpages
Tags: The HTML code that controls the appearance of an HTML document's content.
Syntax: Syntax basically refers to the rules a computer language uses to perform a task. Without syntax, a computer language would not be functional or useful at all. HTML syntax dictates what and how a web page will display.
Syntax error: A syntax error basically refers to a situation in which the rules (or a rule) of the computer language are (is) broken. In HTML, depending on the syntax error you produce, the web page may look completely different than what you had intended.
Uploading: Think of uploading as just opposite of downloading. While uploading simply means moving/sending files to the server, downloading means getting/receiving files from the server.
HTML Editor: A software that inserts HTML code as you work to create an HTML file.
Hypermedia: Hypertext that may include multimedia like text, images, sound, and video.
The basic structure of an HTML document
An HTML document has two* main parts:
- head. The head element contains title and metadata of a web document.
- body. The body element contains the information that you want to display on a web page.
* To make your web pages compatible with HTML 4, you need to add a document type declaration (DTD) before the HTML element. Many web authoring software add DTD and basic tags automatically when you create a new web page.
In a web page, the first tag (specifically, <html>) indicates the markup language that is being used for the document. The <head> tag contains information about the web page. Lastly, the content appears in the <body> tag. The following illustration provides a summary.
An HTML document has two* main parts:
- head. The head element contains title and metadata of a web document.
- body. The body element contains the information that you want to display on a web page.
* To make your web pages compatible with HTML 4, you need to add a document type declaration (DTD) before the HTML element. Many web authoring software add DTD and basic tags automatically when you create a new web page.
In a web page, the first tag (specifically, <html>) indicates the markup language that is being used for the document. The <head> tag contains information about the web page. Lastly, the content appears in the <body> tag. The following illustration provides a summary.
Understanding elements
To markup your web pages, you will need to learn the syntax (rules of a computing language) of HTML. HTML syntax is very simple to follow. Remember the syntax only controls the presentation or structure of a web page. The most fundamental piece of building block of HTML is the elements.
In HTML, an element refers to two different things:
- element of structure of a document (for example, paragraph, web page title, etc.).
- element in the sense of a tag (for example, <p>, <title>)
Because of the different meanings of the word "element", it can be confusing what the word "element" means in a particular context. The following discussion may help you to understand the differences in the meaning. When we talk about the element in the sense of element of structure of a document, we are referring to the structure of the document; for example, document's header information (head), title, body, etc. When, however, we use the word element to refer to a tag, we are talking about a specific HTML instruction that uses angled brackets like: <>. As the following table shows,
Examples of elements of the structure of a document | head | body | p |
|---|---|---|---|
Examples of elements as tags | <head> | <body> | <p> |
an element becomes a tag when we use the angled brackets around it. To create a web page, we use tags. A tag instructs the browser what specific instruction to execute. Assume in your web page you want to emphasize some text as bold. To do this, HTML requires three pieces of information from you:
- With what tag do you want to emphasize the text? (Answer to this question determines what and where a specific HTML instruction will begin. In other words, this starts an HTML instruction.)
- What text do you want to make bold?
- Where do you want to stop the instruction? (An instruction should be ended with the same tag that started the instruction. See below.)
As an example, assume you want markup "World Wide Web Consortium" bold:
So how would be write the necessary markup? Begin by answering to the three questions listed above. Here are the answers to each corresponding question:
- we will use the <b> tag. Think of this as turning ON the bold feature in HTML.
- we want to display "World Wide Web Consortium" as bold. Remember this text must be immediately following after the <b> tag.
- stop the instruction with </b> tag. This will turn OFF the bold feature of HTML.
So our HTML markup will become:
The <b>World Wide Web Consortium</b> (W3C) is a rule-making body for the Web.Most elements in HTML have three parts: start tag, content, and end tag. The start tag is simply the element name surrounded by the angled brackets such as <b>, <body>, and <p>. The end tag is a element name surrounded by </ and > such as </b>, </body>, and </p>. In other words, an end tag simply has the forward slash (/) before the element name. So if you open (start) a tag with <i>, you will close (end) it with </i>.
Note Not all HTML tags require a closing tag. For example, <img> tag, <br> tag, <hr> tag, etc. Also, none of these tags take any content. The <img> tag is used to display graphic files; the <br> tag is used to end a line, and the <hr> tag inserts a horizontal rule. |
As stated earlier, a start tag instructs the browser to start a particular instruction. Conversely, an end tag marks the end of that instruction. Because typically a complete web page contains many tags and sometimes nested tags (tags within other tags), it is necessary to close all opened tags even if your web page displays correctly in a particular browser. Properly closing tags not only will help you to familiarize more with HTML tags, but it also will avoid any possibility of browsers displaying your web page incorrectly.
Main points to remember:
- Every element has a name such as head, title, p, i, and b.
- A tag is the element name surrounded by the angled brackets. This refers to a start tag such as <p>, <title>, and <i>. A start tag starts a particular HTML instruction.
- An end tag is the same as a start tag except the end tag has a forward slash between the < and the element name. An end tag stops a particular HTML instruction.
- Most elements have content, which is placed between the start and the end tags. Example, this is <b>bold</b>.
- Some elements have no content. Such elements/tags are known as empty tags.
- Some elements have no end tags. These are referred to as one-sided tags. A tag that has an opening and closing tag is referred to as two-sided tag.
Understanding attributes
In HTML, elements (or tags) have attributes or properties. As an HTML writer, attributes allow you to add extra instruction to your tags. Because each tag has its own unique attributes, you have to learn which attribute(s) belongs which tag. (See the attributes reference table for details.) Any attribute cannot be just applied to any tag. Think of attributes as options. As such, options can only be applied to tags if the tags offer those options. If you incorrectly apply an option to a tag, the browser is likely to ignore that option.
An attribute has two parts: attribute name and attribute value. Because of these two-parts, they are also referred to as pairs. The attribute name identifies (or defines) what special instruction you want to add to a particular tag. The attribute value, on the other hand, indicates (usually predefined) option for that attribute. So if you are going to use an attribute, you will need to have value for that attribute. Let's go over the actual HTML.
align="right" is an example of attribute-value pair. The word align is the attribute. The value of this attribute is right. A value of an attribute is enclosed in double quotation marks. Notice the value is on the right-hand side of the equal sign and the attribute name is on the left of equal sign. As you may have understood, align="right" instructs the browser to align some text or object to the right hand side of the web page. You can apply this attribute, for example, to <p> tag to start your paragraph from the right hand side as:
This is my paragraph. Normally, text and other object on a web page are left-aligned. Because this paragraph has an extra instruction (align="right") to start this particular paragraph from the right, the paragraph is right-aligned.
The following shows the HTML code for the top paragraph:
<p align="right">This is my paragraph. Normally, text and other object on a web page are left-aligned. Because this paragraph has an extra instruction (align="right") to start this particular paragraph from the right, the paragraph is right-aligned.</p>We stated earlier that an attribute adds an extra instruction to a tag. When does this extra instruction stop executing (or finish applying value of the attribute)? This is an important question because many times you will have nested tags and it may not be clear to you when the instruction will stop. The answer is that the instruction stops once the browser encounters the corresponding ending tag for the tag that contains the attribute. In our example, any text outside of this paragraph tag will be unaffected (specifically will not be right-aligned) because we apply the attribute to just one <p> tag.
Keep the following points in mind while working with attributes:
- some attributes have predefined values. For example, for the align attribute, possible values include, left, center, justify and right. So if you use the align attribute, you should use one of these acceptable values.
- some attributes accept numerical values. For instance, for the width attribute, you can specify a numerical value such as 5 (which indicates 5 pixels), or 20% (which indicates 20% of the screen width).
Main points to remember for attributes:
- Attributes are specific to tag names. For example, for the <p> tag, you can use the align attribute but not the width attribute. The width attribute can only be used with tags such as <table>, <td>, and <img>.
- Attributes have values. Make sure to use the correct value for the correct attribute. For instance, you should not use color="20", or align="brown"; instead use, color="red", and align="justify".
- Attribute values needs to be enclosed in double quotation marks. This is true especially if the value contains one or more spaces, for example, face="Times New Roman".
- Attribute values could come from a predefined list (such as color names red, green, blue, etc.) or from you (width of a table 50% or 800 pixels.)
Displaying an HTML document
After creating or as you create your web page, you should view your page at least one browser to detect any errors. If your webpage does not look the way you expect, then, you should make the necessary changes to correct any problem.
In this section, we will display a basic web page:
 Figure 1 A simple web page with basic tags |
As the web page shows, the content of the title tag is displayed on the top of the web page in the blue bar of Internet Explorer. If you wanted to have "My First Web Page" appear in the title bar, your title tag will look like :
<title>My First Web Page</title>Next, figure 1 shows the location of the web page. The address box shows the web page is located at "C:\HTMLExamples\basic-page.htm". But why is it important to know where a web page is located? So you can view the web page in a browser. In this example, the webpage is saved to a local C drive in the HTML Examples folder. To access the web page, first you would open the c drive and then the HTML examples folder. Finally, you will click on the web page file you want to open.
Finally, the web page shows the content that is placed inside the body tag. Suppose you want to display the following text (with a white background) on a web page:
To display that text your body tag will look something like this:
<body>Before a webpage can be viewed in a browser, it must be saved.</body>In summary, the title tag contains the title information of a web page. The body tag contains the content of the web page. Once a web page is saved, it can be viewed by double-clicking on the web page file. Alternatively, you can type the location of the web page in the address box.
This tag tells the browser what to display as the page title at the top and tells search engines what the title of your site is. It goes inside <head> tags. Try and make your page titles descriptive, but not overly verbose.
Example
<title>HTML Glossary</title>Tags & Elements
Tags are basic labels that define and separate parts of your markup into elements. They are comprised of a keyword surrounded by angle brackets <>. Content goes between two tags and the closing one is prefixed with a slash (Note: there are some self-closing HTML tags, like image tags). Tags also have attributes, which are
Syntax
<tag attribute='value'>content</tag keyword>Paragraphs
<P>
One of the most common tags in HTML - it denotes a paragraph of text. It often has other elements nested inside of it, such as <img/>, <a>, <strong> and <em>.
Syntax
<p>This is paragraph text!</p>Lists
HTML supports two kinds of lists: ordered lists and unordered lists. Within lists each individual list item has its own tag.
UNORDERED LISTS
Unordered lists are just lists whose items are denoted with bullet points.
Example
Shopping list
<ul>
<li>Dish soap</li>
<li>Kitty litter</li>
<li>Tomato sauce</li>
</ul>ORDERED LISTS
Ordered lists’ items are denoted with numbers.
Example
My numbered list
<ol>
<li>First item!</li>
<li>Second item!</li>
<li>Last item!</li>
</ol>Images
The img tag embeds an image into your HTML. Always found with the ‘src’ attribute, which tells the browser where to find the image. Note that the <img/> tag is self-closing.
Syntax
<img src='mylocalimage.jpg'/>Hyperlinks
Hyperlinks (or just links) take the user to another webpage when they click on it. The most common attribute used with links is href, which tells the browser where the link goes.
Syntax
<a href="url this link goes to">Link text</a>Example
The following text is <a href="http://google.com">goes to Google</a>.Images
Head
Tag that surrounds important content that is invisible to the user, but is important to the browser. Elements within this tag contain metadata about the page and links to stylesheets, scripts, etc.
<html>
<head>
</head>
<body>
</body>
</html>Div
A block level container (or ‘division’ of the web page) for content with no semantic meaning.
Syntax
<div>This is a div element.</div>Basic Formatting
You can easily format text to be bold, italic, or underlined using simple formatting tags.
Example
This text is <b>bold</b>, <i>italicized</i>, and <u>underlined</u>.HREF
Links tell the browser where to go using an href attribute, which stores a URL.
Example
<a href="http://google.com">Google it!</a>
Comments
Post a Comment
Thanks for commenting.