Hypertext Markup Language (HTML) is a fundamental tag-based Internet presentation programming language that must be mastered by the majority of information technology professionals. This article explores HTML concepts as well as common tags of the language, though it is emphasized that this article is a supplementary (rather than primary) information source. The intended audience of this article is beginner HTML designers, and continued research is recommended.
HTML Layout
Tags encapsulate everything in HTML. Tags start with <something> and end with </something>, and they affect elements they encompass. In the last sentence, “and end with” would hypothetically be in the <something> tag. The basic structure of an HTML page includes a head with inner title (as well as meta tags, links, and scripts) and a body that contains elements visible on client computers:
<html>
<head>
<title>This shows at the top of the window </title>
</head>
<body>
<p>This text displays to the client.</p>
</body>
</html>
Links
The <a> tag can create HTML links that direct clients across pages in a site. The text inside of the <a></a> tags is displayed to the client, the href attribute indicates the destination, and the target attribute indicates to the browser that the link should be opened in a new tab or window:
<a href=”http://mysite.com/” target=”_blank”>Go to mySite</a>
Images as links
Images can have links applied to them as well. Links are applied to images by nesting the image inside of a link. Alternate text can be added for viewers who do not use browsers with image rendering. Alternate text can also be used to strengthen word density, which can raise listings with search engines. The code below demonstrates how to link images:
<a href=”http://mysite.com/”>
<img src=”myimage.gif” alt=”Alternate Text”>
</a>
E-mail links are created with the “mailto:” inclusion in the <a> tag. These links (when clicked) will open the viewer’s default E-mail client and enter in the supplied address, subject, and even body of an E-mail. The code below demonstrates how to add an HTML E-mail link:
<a href=”mailto:myAddress@mySite.com”>Contact</a>
Anchors/Bookmarks
Anchors, or Bookmarks, are a special type of link that can be used to navigate within a page. Anchors activate when the client clicks on the underlined text, similar to an external link. It should be noted that the anchor destination must be created before an anchor link will work properly. The first line of code below shows how to name an anchor (destination), and the second line of code below shows how to call an anchor with a link:
<a name=”myanchor”>My Anchor</a>
<href=”#myanchor”>Find My Anchor</a>
HTML Tags
Below is a descriptive list of common HTML tags. Many tags can be nested, and opening tags can contain content properties and event handlers.
<p>This is a paragraph, and it will (in effect) create a double-break </p>
<br> (1 line break)
<hr> (horizontal rule)
<pre>This is preformatted</pre>
<em>This is emphasized, which is like italicize but has semantic meaning</em>
<strong>This is strong, which is like bold but has semantic meaning</strong>
<b>This is bold</b>
<i>This is italic</i>
<u>This is underlined</u>
Meta Tags
<meta name=”keywords” content=”these, are, the, desired, search, phrases” />
Headings
<h1>Biggest heading</h1>
<h2>Little smaller</h2>
<h3>Little smaller still</h3>
<h4>Keeps getting smaller</h4>
<h5>Almost the smallest</h5>
<h6>Smallest heading</h6>
Lists
(Definition)
<dl>
<dt>Paradox</dt>
<dd>Two physicians</dd>
<dt>Well</dt>
<dd>Deep thought for shallow minds </dd>
</dl>
(Ordered)
<ol>
<li>List Element 1</li>
<li>List Element 2</li>
</ol>
(Unordered)
<ul>
<li>List Element 1 </li>
<li>List Element 2</li>
</ul>
HTML Tables
<table>
<tr>
<th>myheader</th>
<th>anotherheader</th>
</tr>
<tr>
<td>mytext</td>
<td>moretext</td>
</tr>
</table>
Frames
<frameset cols=”25%,75%”>
<frame src=”myframe1.htm”>
<frame src=”myframe2.htm”>
</frameset>
Forms
<form name=”input” action=”myexample.asp” method=”get”>
Send me newsletters:
<input type=”checkbox” name=”newsletters” checked=”checked” />
<br />
Send me emails:
<input type=”checkbox” name=”emails” />
<br>
<input type=”submit” value=”Submit” />
</form>
HTML Properties and Scripts
Many tag-specific properties can be applied in individual tag openings. A common CSS attribute with multiple dimensions is the style property. In the code below, target is an attribute of the <a> tag that indicates to the browser how the destination page will open (i.e., new window, parent frameset, self frameset, and top):
<a href=”http://mysite.com” target=”blank_”>mySite</a>
Scripts can also be included in tags (event handlers, specifically), though scripts are most often included in the head section of a page or an external document. The script tag can be used to insert active script directly:
<script type=”text/javascript”>
document.write(“Visible Text”)
</script>
To call a script on the occurrence of an event, a link that calls the function located in the head can be created:
<html>
<head>
<script type=”text/JavaScript”>
function myProcess() {}
</script>
</head>
<body>
<a href=”javascript:myProcess()”>Bookmark</a>
</body>
</html>
Conclusion
HTML is an essential skill for information technology professionals. All of HTML is tag-based, and each HTML tag can have properties that affect inner contents as well as scripts that respond to events. Scripts can be added in an external document, in the head of the page, or in tags of the body.
0 comments:
Post a Comment