[NRAO]

HTML Basics and the NRAO Style

All-in-one version

(Regular [individual slides] version)


Overview




The Basics




A Simple Page



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<html><head>
<title>Your title here</title>
<!-- this is a comment. meta tags go here too -->
</head>

<body>

<!-- the real stuff begins here -->
 
<h1>A Heading</h1>
 
<p>
This is a paragraph. You've seen
them before. They begin with a &lt;p&gt; tag
and end with a &lt;/p&gt;.</p>

<table align="right" width="100%" border="2">
  <tr>
    <th>
Type of bribe</th>
    <th>
Attendance</th>
  </tr>
  <tr>
    <td>
Donuts</td>
    <td>
35</td>
  </tr>
  <tr>
    <td>
Anchovies</td>
    <td>
3</td>
  </tr>
</table>

<p>
That table is aligned to the right,
and has a border width of 2 (pixels).
Images can be aligned too.
Tables with zero border (default) are used
to place things (text, images) on the page.</p>
<br clear="all">
<hr>
<div align="right"><em>
Pat Murphy</em></div>
</body> </html>

The markup on the right results in this page. When you follow that link, use the "view source" option of your browser, and you'll see it's identical to what appears in the table here.

Comparing the "source" to the results is probably the best way to learn HTML, if you can find decently crafted pages!



Your title here

A Heading

This is a paragraph. You've seen them before. They begin with a <p> tag and end with a </p>.

Type of bribe Attendance
Donuts 35
Anchovies 3

That table is aligned to the right, and has a border width of 2 (pixels). Images can be aligned too. Tables with zero border (default) are used to place things (text, images) on the page.



Pat Murphy

(the above code renders what is in the box on the right here).



Links




HTML Editors



  • Bottom Line: Avoid if possible.

  • Unnecessary markup "bloat"; document translation creates it (can be extreme)

  • What you see is usually NOT what you get (esp. w/other browsers)

  • Best: text editor (emacs with html-helper-mode; vi; textpad)

  • Next best: netscape composer, WordPerfect Internet Publisher

  • Also good: any package that lets you see (and fix) the markup

  • Avoid: Microsoft (too vendor specific, pages only look right in IE)


NRAO Style



NRAO

Hi There

Blah blah blah

Home Contact Us Directories HELP Search NRAO Site Map

Modified by Pat Murphy on some date

Use template, save as something.shtml, edit. You get something like the view on the right. (Replace "something", "Hi There" and "blah blah blah" as appropriate).

  • See style guide (updated soon) for more info.

  • Avoid expanding the included files!

  • Appearance is not the issue: separation of form and content is!


Conclusions



  • HTML file creation ("markup") is not rocket science!

  • With few basics, you can create impressive pages.

  • Be wary of HTML editors (the computer variety)

  • NRAO Style => standard appearance; change in one place, every page gets new style.

  • This just scratches the surface; there's a lot more!

  • Further reading in the NRAO Intranet WEB area, especially the DOC/FAQ section.



Pat Murphy