HTML 101 (Programming in Python)

HTML 101

HTML-- Hypertext Markup Language

HTML is the code behind every web page.
Web editors generate HTML for you.
Server 'back-end' 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 to code in 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.

Student Worksheet, Part I

1. You'll need a text editor for this problem. On Windows, open Notepad by selecting Start | All Programs | Accessories | Notepad.

2. Paste or type in the paragraph and anchor elements above. If you type them, type them exactly.

3. Save the file as "test.html" (don't put the quotes). If you are using Notepad on Windows, do not save it as a text (.txt) file-- instead, choose 'All Files' in the save dialog. Also, be sure and provide the extension .html in the file name, and do not put spaces in the file name.

4. Open a browser and choose File | Open in the browser menu to open the file you just created. Does the page appear? Now select View | Page Source. The HTML from your file should be displayed. Congratulations, you've created a web page. The next step will be to actually get it on the web.

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.

CS Web Server
On USF CS accounts, you can put web pages in a special directory so that they are accessible on the web. On USF CS Windows machines, the special directory can be found by selecting Start | My Computer, then clicking on the W: drive. You will see numerous sub-folders, one with your user name. Click on that folder. That is your web directory, and you can copy files into it to put them on the web.

If you save a file 'test.html' to your W: directory, the file is accessible at

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

You can open a browser and enter the URL to your page to check it out.

If you are using the Linux operating system, you can access your web directory at /home/web/yourUserName.

USF Files

There are hosting services and other ways to upload something to the web. USF Information Technology (IT) provides USF Files, a place where you can upload things.

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. You can click on the page from USF files to find out what the URL to your page is.

Student Worksheet, Part II

Upload your test.html file to both the CS web server and USF files, and check to see that you can access each in a browser.

Page Structure

Here is an example of a very simple web page:

<html>

<head>
<title>My Title</title>
</head>

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

</html>

The HTML, HEAD, and BODY elements are organizational in nature. The HTML tags enclose the entire page, the HEAD tags enclose header information such as the title (the text that appears at the top of the browser). You'll also link to CSS style files and Javascript in the head area.The body encloses the main body of the web page-- this is where you'll put elements such as paragraphs and links.

Copy the html above into a file, then choose File | Open in your browser to see how the page will appear.

Common HTML Elements

Anchor (link)

   <a href="http://cs.usfca.edu/~wolber">My Home Page</a>

Paragraph
   <p> text of your paragraph </p>

Header

   <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/>

Student Worksheet, Part III
Create a personal profile page for yourself, using only HTML.Your page should have an html, head, and body element Your page should have a title that appears at the top of the browser, a picture, two paragraphs of text, both a top-level and second-level header, and a link to some URL.