HTML for Programmers (Programming in Python)

HTML for Programmers

HTML-- Hypertext Markup Language

HTML is the code behind every web page.
Web editors generate HTML for you.
Server 'back-end' code (e.g., App Engine Python code) generates HTML.
You use HTML to define the content of the page. Another language, CSS, is used to define the styling of the page.

Why learn HTML?

When the higher level tool doesn't provide the flexibility to create the visual look you want. For instance, Google Sites doesn't allow complex layouts unless you use HTML directly.
When you are working on a dynamic web page and your WYSIWYG tool can't read the scripting code. In this case, HTML must be coded directly.
Blog comment boxes and other mini-editors allow HTML but often don't have WYSIWYG. So if you want to bold a word, for instance, you must write some HTML: <em>hello</em>
Sometimes you need to understand the plumbing.

Here's an excellent tutorial from W3C. You can try HTML code and see how a page looks.

HTML Page Structure

A page consists of "tagged" elements.

The start tag defines the type of each element. An end tag marks the end of the element. For instance, here's a paragraph element:

<p> The text of the paragraph. This might be a number of lines </p>

Here is an "anchor" tag, which defines a link to a resource (url):

In the anchor sample

'a' defines the element as an anchor
the href attribute defines the resource that is linked to,
the value ('My Home Page') is the text that will appear on the page,
the </a> is the end tag for the element definition.

Uploading your Page to the Web

The next step is getting the file onto the web. Generally, this means you need to upload the file into a directory that some web server knows about. This is not difficult, but its a step that keeps a lot of people from creating web pages.

On USF computer science accounts, you can put web pages in a special folder so that they are accessible on the web. If you are using Linux, you can access that folder by clicking on the public_html folder in your home directory.

This is actually a symbolic link to the folder at /home/web/yourUserName, but you can treat public_html as any other sub-folder.

If you put a file 'test.html' there, it is almost publicly accessible. You'll need to first modify the permissions of the file and allow others to read it:

        Open the public_html folder In the the File Manager, and find the file.
        Right-click the file and select properties.
        Click on the Permissions tab.
        For "others", allow read access to the file.

After this, the file is accessible on the web. The mapping from web folder to URL is a bit strange, but the URL for files in your public_html will be:

http://cs.usfca.edu/~yourUserName/test.html.

USF Information Technology (IT) also provides a hosting service, USF Files, where you can upload web pages. Here's how to use it:

1. Go to usfconnect and login
2. Choose USFFiles from the top-right menu
3. Upload your html file into your public folder
4. The page is now public and accessible on the web. Professor Wolber's files would be accessible at:

https://usffiles.usfca.edu/FacStaff/wolberd/public/helloworld.html

Google's App Engine lets you store web pages on Google's servers-- in the "cloud". You can put both static web pages (HTML and CSS) and dynamic web pages which also have program code.

HTML Page Structure

To create an HTML file from scratch, you'll need the following basic structure:

<html>

<head>
<title>Title of Page </title>
</head>

<body>
this is the stuff that will appear on the page.
</body>

</html>

Within the head tags, you'll put a title, as shown. The text will display in the top of the browser when your page loads. You'll also put links to CSS style files and javascript files within the head tags.

Common HTML Elements

The contents for the page appear within the body tags shown above. Here, you'll put paragraphs, links, section headers, images, and end-lines (breaks). Each item in the page is called an element. Here are the most common ones:

Element                                   Example
Anchor (link)                           <a href="http://cs.usfca.edu/~wolber">My Home Page</a>
Paragraph                                <p> text of your paragraph </p>
Headers                                  <h1>this is a top level heading for your page </h1>
                                                 <h2> this is a second-level heading </h2>
Image                                       <img src="http://someimage" />
Break                                        <br/>

Absolute vs. Relative URLS

The anchor and image components described above refer to other resources. Those resources can be absolute or relative. An absolute URL is one you can type in the browser. A relative URL is one from the same server and the path provided is in relation to the current page's location on the server. For instance, suppose the following component is in index.html, which is at the root of a site:

<img src="images/mypic.jpg"/>

This tag refers to an image stored on the server in the images directory which is relative to where index.html is, that is, the root of the server.

Your Turn:

1. Open a text editor and create a web page of your choice, but make sure it has an example of each of the components described (image, anchor, paragraph, etc). First save the file in your home directory. Then open a browser and File | Open the file you just created. Does it appear? Now select View | Page Source. The HTML from your file should be displayed. Note that your file is not yet on the web.

2. Upload the file you created in (1) to the CS web server. You can do this by dragging the file from your home folder into the public_html folder.

3. Set the permissions so the file is readable by everyone. Right-click the file in the file manager, select Properties and then Permissions, and set others to be able to read.

4. Open a browser and access the page. My username is 'wolber', so I can access a file test.html at:

http://cs.usfca.edu/~wolber/test.html