Skip to content

Basic HTML

Jump to bottom
Professor F edited this page Jan 20, 2017 · 1 revision

Week 2, Part 1. Lecture Notes on Basic HTML for User Interfaces

These lecture notes are intended to be viewed after you watch the videos. I am trying to keep them as separate as possible from any specific software tool—thus the lack of pictures and the need to watch the videos first to see how they apply to specific tools like Microsoft’s Visual Studio or Intel’s XDK. Anyway, let’s begin.

Programming consists of developing two big pieces:

  1. The User Interface (UI):
  • This is what the user sees and interacts with. When you see a page with labels, textboxes, checkboxes, radiobuttons, dropdowns, etc. along with instructions for using that page, you’re looking at the user interface.
  • You create a user interface using a user-interface language.
  • Popular examples of user-interface languages are: HTML, XAML, MXML, ZUML
  1. The Code:
  • This is what takes the information that the user enters via the user-interface, processes the information, and then displays a result.
  • The write code using a programming language.
  • Popular examples of programming languages include: Javascript, C#, ActionScript, Java, C, C++, etc.
  • Your code consists of three distinct section: input, processing, and output

Let’s look at how to create a user-interface with HTML—Hyper-Text Markup Language.

About HTML Files and HTML Commands (Tags)

An HTML file is just a normal text file — you can create it in notepad, if you want! — that ends with an .html extension. Every page in your app is a separate .html file. For example, you could have a file named index.html as the first page that users see, or a file named about.html as a page containing information about your app. The file names are up to you. Just make sure that your file ends in .html.

Inside your HTML file are HTML commands, or “tags” that mostly change the look—the format—of text. But in addition to formatting, there are tags for adding images, adding video, and sound, as well as tags for linking to other pages, and tags for user-interface controls like textboxes, radio buttons, push buttons, and list boxes, to name a few.

An Example of a Tag to Make Words Bold

Here’s an example of a tag that makes the words “hello world” bold if you viewed inside of a web browser (or a web app):

<b>Hello World</b> this is interesting

Starting and Ending Tags

The <b> is known as a starting tag, and the </b> is known as the ending tag. If you did not surround Hello World with those tags it would not be bold. Think of the <b> as turning on the bold effect, and the </b> as turning it off. The words “this is interesting” would not appear bold in a browser (yes, I know they look bold in this document but in a browser they would not!).

The following sections will examine how to create a user-interface in html. It assumes you have created a text file ending in .html, e.g., test.html.

Step 1. Add the Seven Skeleton Tags

Every HTML file has the following 7 tags in this order.

<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>

About the Tags

Before adding your actual content, add these 7 tags. The doctype indicates to a web browser that the file contains version 5 of HTML. The html indicates the start of the html file. The head section is where the code for your app goes (it's "intelligence"). The body is where the user-interface for your app goes.

Step 2. Add Your Content in the Body Section

The content, vs. the code, is what the user sees on your page when he or she views it in a browser. Add your content in the body section, i.e., between the <body> </body> tags. Here’s an example:

<!doctype html>
<html>
<head>
</head>
<body>
This is the Title of My Cool App**`

Here is one paragraph: the quick brown fox jumped over the lazy dog.

Here is another paragraph: now is the time for all good men to come to the aid of their country.
</body>
</html>

In a browser, this looks like:

Notice that the content is ugly, i.e., not formatted; everything is scrunched together. The reason is that we need to add HTML tags to format this page.

Step 3. Add Basic Formatting Tags (b, i, br, h1)

<!doctype html>
<html>
<head>
</head>
<body>
<h1>This is the Title of My Cool App</h1>
<br>
<b>Here is one paragraph</b>: the quick brown fox jumped over the lazy dog.<br>
<br>
<i>Here is another paragraph</i>: now is the time for all good men to come to the aid of their country.
</body>
</html>

In a browser, this looks as follows:

The tag h1 is a first-level heading tag; b is bold, as mentioned earlier; i is italics, and br adds a line break. Use two br’s in a row for a blank line.

Step 4. Use Span & Inline Styles for Font and Color Changes (span, style=”…”)

Use the span tag anytime you want to change the font style, size, or color. The span tag by itself does nothing, you must add an in-line style inside of the tag, as follows:

<!doctype html>
<html>
<head>
</head>
<body>
<h1>This is the Title of My Cool App</h1>
<br>
<b>Here is one paragraph</b>: the <span style=”font-family:comic sans ms;font-size:12pt;color:red”> quick brown </span> fox jumped over the lazy dog.<br>
<br>
<i>Here is another paragraph</i>: now is the time for all <span style=”font-family:tahoma;font-size:12pt;color:blue”>good men</span> to come to the aid of their country.
</body>
</html>

Inside a browser this looks as follows:

Some notes about the example above:

  • style=”” is known as a tag attribute. Attributes go after the tag name, e.g., after <span as in <span style=”…”>
  • Properties go inside of the quotes of the style attribute. Examples of properties are: font-family, font-size, and color.
  • To specify a value for a property, use :value. For example: font-family: comic sans ms
  • Use a semi-colon (;) to separate more than one property:value
  • The font-family: can be any font on your system. For example, any font that you use in Word can be used in your web page. But make sure your users have that font on their computers as well. Best to stick with standard fonts like Arial, or Times New Roman. In the example above, we used comic sans ms, font-family: comic sans ms; as well as Tahoma, font-family:Tahoma;
  • Don’t forget the pt when you specify the font-size: We used font-size:12pt; in the examples above.
  • The color: value can actually be an RGB, which allows for 24-million colors. But for now, just use basic colors like red, green, blue, orange, yellow, etc, as well as their light & dark variants, e.g., lightred, darkgreen, etc.

It turns out that you can put a style attribute in any tag—not just the span. For example, if you don’t like the default black, the font-size, or the font-family of the h1 tag, you can change it by adding a style attribute inside the h1.

Step 5. Add Links to Other Pages (a tag)

Suppose we had two other pages that we wanted to link to from our test page above? You would first create the pages using steps 1-4 above. Let us pretend that we have created two other pages using steps 1-4 above, and those pages are named fred.html and wilma.html. You would use the anchor tag, a, to link to those pages as follows:

<!doctype html>
<html>
<head>
</head>
<body>
<h1>This is the Title of My Cool App</h1>
<br>
<b>Here is one paragraph</b>: the <span style=”font-family:comic sans ms;font-size:12pt;color:red”> quick brown </span> fox jumped over the lazy dog.<br>
<br>
<i>Here is another paragraph</i>: now is the time for all <span style=”font-family:tahoma;font-size:12pt;color:blue”>good men</span> to come to the aid of their country.
<br>
<a href=”fred.html”>This links to the Fred Page</a><br>
<a href=”Wilma.html”>And this links to the Wilma page</a>
</body>
</html>

In a browser, this looks as follows:

Some notes:

  • In between the <a> and </a> you can put any label you want. It doesn’t have to be “this links to…”!
  • If you don’t like the blue and underlined look of a link, us the style attribute inside of the a tag to change the font-family, font-size, and color.
  • To link to a website or a page on another website, use the full URL as the value for the href= attribute. For example, to link to the full UNM website: <a href=”http://www.unm.edu”>UNM’s Website</a>

Bonus. Adding Images to Your Page (img tag)

We’ve discussed how to use HTML to add content to your page and to format that content. We have also looked at how to link to other pages. Conspicuously absent are images. How do you add an image to your page? You do using the img tag. The most important thing to remember when using the img tag is that your picture MUST be copied to the same folder as your page. If your picture is on another website, you must use the full url to the picture on that website. Otherwise, the img tag is straightforward. I will demonstrate with a picture of me and the famous singer Kesha.

<!doctype html>
<html>
<head>
</head>
<body>
<h1>This is the Title of My Cool App</h1>
<br>
<b>Here is one paragraph</b>: the <span style=”font-family:comic sans ms;font-size:12pt;color:red”> quick brown </span> fox jumped over the lazy dog.<br>
<br>
<i>Here is another paragraph</i>: now is the time for all <span style=”font-family:tahoma;font-size:12pt;color:blue”>good men</span> to come to the aid of their country.
<br>
<a href=”fred.html”>This links to the Fred Page</a><br>
<a href=”Wilma.html”>And this links to the Wilma page</a><br>
<img src=”florkesha.jpg” />
</body>
</html>

In a browser this looks as follows, and you are probably thinking: “I don’t see Kesha anywhere.”

And the reason you don’t see Kesha is that most pictures taken with modern cameras have a huge resolution in the several thousands of pixels, and most screens are at most 1920 pixels wide. To fix this problem, use the style attribute in combination with the width or height properties. Use either width or height and not both, otherwise you run the risk of your picture being stretched.

<!doctype html>
<html>
<head>
</head>
<body>
<h1>This is the Title of My Cool App</h1>
<br>
<b>Here is one paragraph</b>: the <span style=”font-family:comic sans ms;font-size:12pt;color:red”> quick brown </span> fox jumped over the lazy dog.<br>
<br>
<i>Here is another paragraph</i>: now is the time for all <span style=”font-family:tahoma;font-size:12pt;color:blue”>good men</span> to come to the aid of their country.
<br>
<a href=”fred.html”>This links to the Fred Page</a><br>
<a href=”Wilma.html”>And this links to the Wilma page</a><br>
<img style=”width:200px” src=”florkesha.jpg” />
</body>
</html>

The image is now 200 pixels wide and fits within the browser:

Yes, I’m short.

Clone this wiki locally