Sidebar
Table of Contents
Brief Introduction to HTML
The use of HTML may greatly enhance the quality of your EASAP output. HTML stands for HyperText Markup Language, and it is the main Web publishing language. HTML is a set of codes that Web authors use to define how Web browsers should display their pages. Much of the content displayed in EASA on your browser, for example the reports displayed in the Results Library, is written in HTML. This section is designed to be a brief introduction to HTML to get you started. However, HTML is relatively easy to learn, and the basics can be picked up within a few hours. Typically, for a Web page, HTML will be contained within a file with an .html or .htm extension. However, in EASA, HTML may be input from files with or without the .html or .htm extensions and also can be typed directly into parameter settings. Regardless of the input method into EASA, the HTML itself will use the same syntax and layout as for generating a Web page.
HTML Tags and Tag Attributes
HTML consists of “tags” that tell Web browsers how to display the contents of a Web page. There are specific tags for different content elements such as headings, paragraphs, images, links, etc. A tag is actually a word or abbreviation enclosed within < and > symbols, for example <html>. In most cases, you’ll use tags in pairs consisting of a start tag and an end tag. An end tag looks exactly like its accompanying start tag except for an added forward slash, /, for example </html>. Tag attributes enable you to specify how Web browsers treat a particular tag. An attribute is included within the start tag i.e. between the < and > symbols. Most attributes are combined with a value to enable you to specify different options for how a Web browser treats the attribute. The syntax for a tag attribute is as follows:
attribute=”value”
For example, to specify a center-aligned paragraph, you would include the following attribute within the Paragraph <p> tag:
<p align=”center”>
Basic Page Setup
There are a few tags that all HTML files used to produce Web pages must contain, namely the HTML, Head, Title, and Body tags. Within EASA, these tags will be needed only when complete HTML files are needed, as is the case for the EASAP help files (See Document an EASAP). Where HTML is used in the generation of EASAP reports, only HTML typically found within the Body <body> tags (see below) is required.
HTML Tag
The first tag is the HTML <html> tag, which simply informs the Web browser that this is an HTML file. All remaining HTML code will be inserted between the <html> tag and its </html> end tag.
Head Tag
Next is the Head <head> tag, which contains some basic information about the Web page.
Title Tag
Within the <head> tags you will insert the Title <title> tags. The <title> tags specify the words to be displayed in the title bar of your Web browser.
Body Tag
The Body <body> tag comes after the <head> end tag and it contains all the content that will be displayed in your Web browser window. At this point, the basic structure of an HTML file has been introduced. You can now create a ‘starting’ HTML file that might look like the following:
<html>
<head>
<title> My Title </title>
</head>
<body>
</body>
</html>
Headings and Paragraphs
Next, you can start to fill in the body of your HTML document by adding text in the form of headings and paragraphs.
Heading Tags
Heading tags take the form of <h1>, <h2>, <h3>, … <h6>, where the <h1> tag is the largest heading and <h6> is the smallest. The <h1> tag is often used for the title of your page, <h2> used for the headings of the main sections of the document, and <h3> for the sub-section headings.
Paragraph Tag
Even paragraphs of text need to be tagged in HTML. The Paragraph <p> tag is used to tag paragraph text. A special tag used to cause line breaks within a paragraph is the <br> tag. The <br> is an empty tag (no end tag needed) that simply inserts a line break.
Text Formatting
HTML contains tags aimed at applying special formatting to text appearing within headings and paragraphs.
Bold Tag
The Bold <b> tag will cause any text between its start and end tags to be displayed as bold text.
Italic Tag
The Italic <i> tag will cause any text between its start and end tags to be italicized.
Superscript Tag
The superscript <sup> tag will turn any text between its start and end tags into superscript.
Subscript Tag
The subscript <sub> tag will turn any text between its start and end tags into subscript.
Unordered Lists
The Unordered List <ul> tag is used to contain a series of bullet list items, which are defined using the List Item <li> tag. An example of HTML code used to create a bullet list is as follows:
<ul>
<li>Properties Branch
<li> User Interface Branch
<li> Processes Branch
<li> Output Branch
</ul>
Numbered List
The Ordered List <ol> tag defines a sequentially numbered list of items. Again, the List Item <li> tags are used to define the individual numbered items. An example of HTML code used to create a numbered list is as follows:
<ol>
<li> Log onto your computer
<li> Open up your Web browser
<li> Link to your local EASA URL
</ol>
Hypertext Links
A very powerful feature of HTML is the ability to set up hypertext links, which allow you to link to other HTML documents or data objects, to other places in the same HTML document, or to specific places in other HTML documents.
Anchor Tag
The Anchor <a> tag is used to create hypertext links. The syntax of an Anchor <a> tag is as follows:
<a href=”address”>anchortext</a>
where the href attribute specifies an address (file name or URL), and the anchortext is the text usually colored blue and underlined that is selected to initiate the link. To link to a specific location within an HTML file, the following syntax is used:
<a href=”address#anchorname”>anchortext</a>
where #anchorname, the fragment identifier, points to a target anchor located at the desired location in the file. A target anchor has the following form:
<a name=”anchorname”></a>
and should be placed at the target location in the target file.
Inline Images
Image files, either GIF (*.gif) or JPEG (*.jpg), can be displayed inline in your HTML document text using the Image <img> tag. The <img> tag is an empty element of the form:
<img src=”imagefile” width=”w” height=”h”>
where the src attribute points to the image file and the width and height attributes are used to specify the width, w, and height, h, of the image in pixels. In general, the width and height attributes should be set to the actual size of the image file. The benefit of using the width and height attributes is that Web browsers will allocate the necessary space for the image and continue rendering text while the file may be still uploading.
For an <img> tag to display properly when used in an HTML Output object, the src attribute should point to a file with a folder place holder preceding it, such as local_dir/image.gif. Then, you should specify ‘local_dir’ in the Replace with URL parameter of the HTML Output object.**
Further Reading
The previous sections have provided a brief introduction to HTML. For more detailed information, you can find any number of references on the subject of HTML. A few books are cited below as a starting point. Choosing and reading just one should be sufficient for becoming proficient in using HTML.
Callahan, S. 2000. Learn HTML in a Weekend. 3rd Edition. Prima Publishing.
Castro, E. 1999. HTML 4 for the World Wide Web: Visual QuickStart Guide. 4th Edition. Peachpit Press.