HTML Overview

This is a short introduction to writing HTML. You should review the page source, particularly focusing on how this HTML page is written and how it is rendered on the screen. For more information, please refer to "Programming the World Wide Web" by Robert W. Sebesta book and W3 Web Schools
(Please tell me if you find any errors or omissions in the document —Upsorn Praphamontripong, 30-January-2021)

What is HTML?

It is a special kind of text document that is used by Web browsers to present text and graphics. HTML documents are often referred to as "Web pages".

Element: container and content; a piece of a documents, including sentence, paragraph, list, table, head, body, ...

Tag: container (thus requires an opening tag and a closing tag), a command to control the format, not case sensitive

Example: <p> content </p>
where <p> is an opening tag defining a paragraph and </p> is a closing tag.

Attribute: option or parameter to a tag

Rendering: a browser formats the text to display on the screen according to the formatting rules

This page will introduce you to :

  • basic structure of HTML
  • some basic HTML tags

Note: if the web browser does not recognize any specific tags, formats, or settings, the browser will render the content based on its default styles.

Basic structure of HTML

Some HTML tags

  • headers — <h1>, <h2>, <h3> <h4>, <h5>, <h6>
  • breaks — <br />, <hr />, <p>
  • fonts — <b>, <em>, <i>, <u>, <strong>, <code>, <font size="-1">
    note: <font> is deprecated but still widely used
  • lists — <ul><li>, <ol><li>, <dl><dt>...<dd>...
  • colors — <font color="#RRGGBB"...
    color names: "green" "blue" "red" ...
  • Special chars — &lt; (<), &gt; (>), &amp; (&), &nbsp; (blank space)


Definition list

What does this look like?
term (<dt> defines a term/name)
definition1 (<dd> describes a term/name)

Ordered list

What does this look like?
To deploy and test servlet
  1. Compile your Java servlet
  2. Put a Java class under /webapps/context-name/WEB-INF/classes/package-name/
  3. Put jar files under /webapps/context-name/WEB-INF/lib/ (if applicable)
  4. Put data files under /webapps/context-name/WEB-INF/data/package-name/
  5. Set permission for all files and directories under /webapps/context-name/WEB-INF/classes/package-name/ using chmod 644
  6. Access your servlet via http://localhost:8080/context-name/package-name.servletname

Unordered list

What does this look like?
Commonly used HTML tags
  • input tags
  • form tags
  • button tags
  • a tags
  • img tags
  • table tags
  • .....


4640 class website
  • <a href="" target="_blank">target="_blank" open a new window or tab
  • <a href="#example"> — within the current file
  • <a href="" target="_blank">
    Note: Spaces in an email subject should be encoded (replaced by %20) to ensure that the browser will display the text properly.
      contact us

An absolute link: completes URL (e.g., href="")

  • Absolute links are used when linking to a location on another website, i.e., require a full path.
A relative link: points to a file or a file path (e.g., href="schedule.html")
  • Relative links are used when linking to pages or files within a website.
  • Browsers look for the location of the file relative to the screen/page where the link appears.
  • Relative links require less typing, thus less mistakes.
  • When a browser sees / (e.g., /assigns/h1-eval.html), it looks in the current folder for a subfolder (assigns) that contains the specified file (h1-eval.html)
  • When a browser sees ../ in front of the filename, it looks in the folder above the current folder.


Defines an image

<img src="../images/giphy.gif" alt="Happy face" height="50%" width="70%">
Happy face

<img src="../images/giphy.gif" alt="Happy face" height="220px" width="380px">
Happy face

Always use an alt attribute to describe the image. This increases usability -- searchable, and especially when the image cannot be loaded.

Note: try resizing the screen, observe the difference between absolute vs relative height and width

[Ref: Image from]


What does this look like?
Assignments Scores
Assignment 1 20
Assignment 2 20


What does this look like?

Note: notice text upon hovering (Login and Reset buttons)
Try autofocus attribute of an <input> element, observe where the cursor is placed

Text field

Username: <input type="text" name="username" />

What does this look like?


<textarea rows="8" cols="60">
  Homeworks must be submitted before class ...

Use a disabled attribute
<textarea rows="8" cols="60" disabled>
  Homeworks must be submitted before class ...

Use a readonly attribute
<textarea rows="8" cols="60" readonly>
  Homeworks must be submitted before class ...

Hidden input

Not rendered on the screen
Can be used to maintain state of web applications

<input type="hidden" name="login_attempt" value="0">



<input type="checkbox" name="vehicle" value="Car"> I have a car
<input type="checkbox" name="vehicle" value="Bike" checked> I have a bike

What does this look like?
I have a car
I have a bike

Drop down

Select your favorite car:
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="ford" selected>Ford</option>
  <option value="audi">Audi</option>

What does this look like?
Select your favorite car:

Radio button

Select your major:
  <input type="radio" name="major" value="CS" checked> CS
  <input type="radio" name="major" value="SWE"> SWE
  <input type="radio" name="major" value="ACS"> ACS
  <input type="radio" name="major" value="ECE"> ECE

What does this look like?
Select your major:
Note: name values must be the same


What does this look like?
User information

What does this look like?
Contact Information


button tag
  • <button> or <button type="button">
  • Defines a clickable button
  • Allows content between opening and closing tags
  • Usually used for an action (activate a JavaScript)
  • Supports three types of buttons: button, reset, and submit
  • Supports a disabled attribute
  • Note: Always specify the type attribute for a <button> tag. Different browsers use different default types for the <button> tag.
<button type="button" onclick="alert('I said, Don\'t click me!')">Don't click Me!</button>
What does this look like?

input tag with button type
  • <input type="button" ... />
  • Defines a clickable button
  • Does not allow content. That is, the button label is specified via a value attribute
  • Usually used for an action (activate a JavaScript)
  • Does not perform reset or submit operations. Note: the type attribute of an input tag can be set to reset or submit to perform reset or submit operations.
  • Supports a disabled attribute
<input type="button" onclick="alert('I said, Don\'t click me!')" value="Don't click Me!" />
What does this look like?


<form action="target_component">
  Select a file: <input type="file" name="select_file">
  <input type="submit" value="Submit" title="This button doesn't work since it doesn't submit the form to anywhere">

How does this look like?
Select a file:

Client-side redirect

<meta http-equiv="refresh" content="0; url=" />

To redirect a webpage to another page
  • Use a meta element with the http-equiv attribute set to "refresh" value
  • The content attribute specifies the time (in seconds) before the page is redirected and the destination (the URI that the browser should request)

Copyright © 2021 Upsorn Praphamontripong
Released under the Creative Commons License CC-BY-NC-SA 4.0 license.
Last updated 2022-01-30 9:52