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-December-2019)

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)

List

Definition list




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

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
  • .....

Link

4640 class website
  • <a href="http://www.cs.virginia.edu/~up3f/cs4640/syllabus.html" target="_blank">target="_blank" open a new window or tab
  • <a href="#example"> — within the current file
  • <a href="mailto:someone@virginia.edu?Subject=CS%204640" 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="http://www.cs.virginia.edu/upsorn/cs4640/schedule.html")

  • 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.

Image

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 https://giphy.com]

Table



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

Form



What does this look like?
Username:
Password:  

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?
Username:

Textarea

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

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

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

Hidden input

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

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

Selection

Checkbox


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


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:
CS
SWE
ACS
ECE
Note: name values must be the same

Fieldset



What does this look like?
User information


What does this look like?
Contact Information


Button

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?

File

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


How does this look like?
Select a file:

Client-side redirect

<meta http-equiv="refresh" content="0; url=http://www.cs.virginia.edu/~up3f/cs4640/schedule.html" />

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)