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 — `< (<), > (>), & (&),   (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 Compile your Java servlet Put a Java class under /webapps/context-name/WEB-INF/classes/package-name/ Put jar files under /webapps/context-name/WEB-INF/lib/ (if applicable) Put data files under /webapps/context-name/WEB-INF/data/package-name/ Set permission for all files and directories under /webapps/context-name/WEB-INF/classes/package-name/ using chmod 644 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%">` `<img src="../images/giphy.gif" alt="Happy face" height="220px" width="380px">` 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>` Homeworks must be submitted before class on the day they are due. Assignments will be checked immediately after the due date; if you finish an assignment late, you must inform the TA and me by email when it is ready to be graded. Changing an assignment after the due date without prior permission will be treated as a late submission. Use a `disabled` attribute `<textarea rows="8" cols="60" disabled> Homeworks must be submitted before class ... </textarea>` Homeworks must be submitted before class on the day they are due. Assignments will be checked immediately after the due date; if you finish an assignment late, you must inform the TA and me by email when it is ready to be graded. Changing an assignment after the due date without prior permission will be treated as a late submission. Use a `readonly` attribute `<textarea rows="8" cols="60" readonly> Homeworks must be submitted before class ... </textarea>` Homeworks must be submitted before class on the day they are due. Assignments will be checked immediately after the due date; if you finish an assignment late, you must inform the TA and me by email when it is ready to be graded. Changing an assignment after the due date without prior permission will be treated as a late submission.

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

Name:

Address:

Phone:

What does this look like?

Contact Information
Name:
Email:
Phone:

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)

HTML Overview

What is HTML?

Basic structure of HTML

Some HTML tags

List

Definition list

Ordered list

Unordered list

Link

Image

Table

Form

Text field

Textarea

Hidden input

Selection

Checkbox

Drop down

Radio button

Fieldset

Button

File

Client-side redirect