HTML Basics and the NRAO Style

All-in-one version

Overview

HTML: the basics are (still) very simple
Makings of a simple page
Links: relative, absolute, external
Why some HTML editors are a good/bad idea
Basics of the NRAO style: how to, quickly

The Basics

At its core: simple markup language; HTML documents are plain text!
White space (space, tab, newlines, paragraphs) ignored.
Use "tags" to specify markup, e.g.   for line break,  for paragraph
Physical boldface and Logical strong: boldface and strong.
Embed images with <img src="smiley.png">:
Links via <a href="url"> to other HTML resources (pages, images, ...)

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 tag and end with a .

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

Makes something (text, image) "active"; clicking loads other page, image, whatever.
<a href="url">something</a>
Absolute: <a href="http://www.nrao.edu/privacy.shtml">privacy</a>
Relative: <a href="foo.html">foo</a> (relative to current page's location)
Rooted: <a href="/~pmurphy/">me</a>; protocol, hostname from current URL
If linking to directory, include final "/" as it saves time.
Basic protocols: http://, ftp://, mailto:, file:/// (local).
Blue border around images by default; <img border="0"> to hide:



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







  
    
The theme
        shown here is obsolete!  Reference to the template has been
        removed as the server side include infrastructure has largely
        decayed at NRAO due to the rise of content management systems. 

        
        Hi There

        Blah blah blah

        
        
          
              
              
          
            
              
              
          
            
              
              
          
            
              
              
          
          
              
              
          
           
              
              
          
          
         
        
      
      
      Modified by Pat Murphy on some date
    
  


Use template, save as
something.shtml, edit.  You get 
something like the view above, or on the right. (Replace "something", "Hi There" and
"blah blah blah" as appropriate).  NOTE: the server side includes in
the template-menu.txt file may still work but have not
been maintained in years.





  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