HTML

Introduction

• Remark: The idea of WWW is document sharing
• Main question: How to define the structure of document?
• Text, tables, figures, link, ...
• In 1980s
• Binary formats? Useless
• Different machines, no popular graphical desktops, no such popular format such as PDF, Doc, ...

• Text format
• It is okay, everyone knows ASCII
• But how to describe structure, layout, and formatting?
• Add meaning to each part of text using special predefined markup, E.g., It is heading, It is paragraph, It is table ...

Introduction (Cont.)

• HTML Tags (Berners-Lee, 1991): very basic, limited integration of multimedia
• 1993, Mosaic added many new features (e.g., integrated images)
• HTML 2.0 (IETF, RFC 1866, 1995): tried to standardize these & other features
• 1994-96, Netscape & IE added many new, divergent features

• HTML 3.2 (W3C, Jan 1997): attempted to unify into a single standard
• HTML 4.0 (W3C, Dec 1997): attempted to map out future direction
• XHTML 1.0 (W3C, 2000): modified to conform to XML standards
• HTML5 (WHATWG + W3C, 2014): supersedes HTML 4.01 and XHTML 1.0
• Since 2019 the W3C has ceded HTML to the WHATWG, and there are no numbered versions any more — HTML is a Living Standard that changes continuously

HTML Processing: Rendering

• The processing of displaying HTML in browser
• Not all tags are to be displayed
• E.g. Tags in <head>

• For tags which should be displayed
• Tags by themselves are not displayed
• Each tag has its own default presentation

• If tag has content, the presentation is applied to content

<em>I am important</em>
      

I am important
• If tag has no content, the presentation is displayed (if it is needed)

I am a <br /> break
      

I am a
break

HTML Processing: Rendering (Cont.)

• Web browsers by default start placing elements from left-top corner
• In-line elements are placed from left to right
• A new line is created for each block-level element
• With dir="rtl" (e.g., Persian) the browser starts from the right-top corner

• Web browsers ignore
• Comments

<!-- ... -->
        

• Tags they do not recognize — but the content of an unknown tag is still shown

<blink>still visible</blink>
        

• More than single whitespaces
• E.g., Multiple newlines + tabs + spaces → single space

The “Hello World” Example

<!-- This is the “Hello World” Example -->
<html>
  <head>
    <title>First Example</title>
  </head>
  <body>
    <p> Hello World! </p>
  </body>
</html>
    

XHTML Rules (vs. HTML)

• All tags have ending (closing) tags
• Some tags are self-closing

<br />
        

• Tags cannot be overlapped

<strong><em>test</strong></em>
        

• Who is parent? Who is child?
• All tags are lowercase
• Attribute values must be quoted
• Attributes cannot be minimized: checked="checked", not checked
• An XML parser stops at the first error; an HTML parser recovers and continues

• Layout (styles) are separated from markup
• Markup is used for meaning & structure
• The obsolete HTML Big Element (<big>) renders the enclosed text at a font size one level larger than the surrounding text.
• The obsolete HTML Center Element (<center>) is a block-level element that displays its block-level or inline contents centered horizontally within its containing element.

Anatomy of an HTML document (Cont.)

<!DOCTYPE html> the doctype

• It is required preamble.
• In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things.
• However these days, they don't do much, and are basically just needed to make sure your document behaves correctly.
• That's all you need to know for now.

<html></html>

• This element wraps all the content on the entire page and is sometimes known as the root element.

<head></head>

• This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers.
• keywords and a page description that you want to appear in search results
• CSS to style our content
• character set declarations
• and more

<meta />

• This element sets the character set your document should use to UTF-8.
• It is a void element: no content, and no closing tag

<title></title>

• This sets the title of your page, which is the title that appears in the browser tab the page is loaded in.

<body></body>

• This contains all the content that you want to show to web users when they visit your page.

HTML elements

• Main root
• Document metadata
• Sectioning root
• Content sectioning
• Text content
• Inline text semantics
• Image and multimedia
• Embedded content
• Scripting

• Table content
• Forms
• Interactive elements
• Web Components

Content sectioning

• Content sectioning elements allow you to organize the document content into logical pieces.

• The HTML <h1>–<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
• The HTML <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document.
• Content you are sectioning must have a natural heading within it (for example h1-h6).

• The HTML <footer> element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
• The HTML <header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

• The HTML <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.

• The HTML <main> element represents the dominant content of the body. A page has only one visible <main>.
• The HTML <article> element represents a self-contained composition that makes sense on its own: a blog post, a news story, a comment, a product card.
• The HTML <aside> element represents content only indirectly related to the main content, often shown as a sidebar.

Text content

• Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags.
• The HTML <p> element represents a paragraph.
• The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file.

• The HTML <ol> element represents an ordered list of items — typically rendered as a numbered list.
• The ordered list uses a specific attribute to define a custom start number. The attribute syntax is start="X", where the X value is the list custom starting number.
• The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.
• The HTML <li> element is used to represent an item in a list.
• The HTML <dl> element represents a description list.
• The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements).

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>
<dl>
  <dt>Hello</dt>
  <dd>Means salam</dd>
</dl>
    

• Item 1
• Item 2

1. Item 1
2. Item 2

Hello

Means salam

• The HTML Content Division element (<div>) is the generic container for flow content.

Inline text semantics

• Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
• The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything.
• The HTML <q> element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks.
• The HTML Citation element (<cite>) is used to describe a reference to a cited creative work, and must include the title of that work.

• The HTML <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses (mailto), locations in the same page (fragment), or anything else a URL can address.
• When the scheme is not given in the URL, the browser resolves it against the address of the current page (or the <base> in <head>, if set)

• For paths in current domain, similar to filesystem, paths can be
• Root-relative (/x): Path starts from web server root directory
• Relative (x, ../x): Path starts from current directory
• Scheme can be every supported protocol
• E.g. mailto for sending email
• E.g. javascript to run code — avoid it, use a <button>
• By default links are opened in the same window, to open link in new window
• Attribute target="_blank" (modern browsers also apply rel="noopener" to it)
• Everything between <a> </a> is considered as link name
• Avoid spaces after <a> and before </a>

• #frag part in URL is used to jump middle of a large document
• Step one: assign an id to the part

<!-- either of these, not both: an id must be unique -->
<a id="section-result">Results</a>
<h2 id="section-result">Results</h2>
        

• The id is case sensitive
• Step two: create link using #frag feature

To see result <a href="xyz#section-result">click here</a>
        

• The HTML <br> element produces a line break in text (carriage-return).
• The HTML <code> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.
• The HTML <em> element marks text that has stress emphasis.
• The HTML Strong Importance Element (<strong>) indicates that its contents have strong importance, seriousness, or urgency.

Image and multimedia

• The HTML <img> element embeds an image into the document.
• src: address of file (local or remote)
• alt: alternative text, shown if the image cannot be displayed and read aloud by screen readers
• align: alignment of image with respect to text line (deprecated, is controlled by CSS)
• <img> is an inline element and has no caption of its own
• To caption one, wrap it: <figure> + <figcaption>

<figure>
  <img src="gopher.png" alt="the Go gopher" />
  <figcaption>The Go gopher, by Renée French</figcaption>
</figure>
      

• The HTML <video> and <audio> elements embed media; no plugin (Flash) is needed any more
• controls: show the play/pause/volume bar of the browser
• Several <source> children: the browser plays the first format it supports

<video controls width="480">
  <source src="lecture.webm" type="video/webm" />
  <source src="lecture.mp4" type="video/mp4" />
  Your browser cannot play this video.
</video>
    

Table content

• Tables are created by <table> </table>
• Each row is created by <tr> </tr>
• Each cell inside a row is created by <td> </td>
• A header cell is created by <th> </th>
• A cell can span: colspan, rowspan
• Block-level element

<table>
  <caption>I am a lonely table</caption>
  <thead>
    <tr>
      <th>Head Col 0</th>
      <th>Head Col 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 0 Col 0</td>
      <td>Row 0 Col 1</td>
    </tr>
    <tr>
      <td>Row 1 Col 0</td>
      <td>Row 1 Col 1</td>
    </tr>
  </tbody>
</table>
    

Forms

• Forms are used to get information from user
• HTML is only responsible to gather the information
• It does not responsible to process
• Data are processed by server side scripts
• However, some preprocessing can also be performed in client side
• As we are going to see, with Javascript we can even use forms' data without any server side processing
• drawio

• Major form components
• The form element
• Inputs
• Text, Checkboxes, radio buttons, select boxes, etc.
• Buttons
• Submit, cancel, etc.

• Forms are created by form
• Each form should have action and method attributes
• action is a URL
• Server side script that process the data
• If omitted, the form is sent to the URL of the current page
• method is a HTTP method used to send data
• get: User input data is sent through the query part of URL by HTTP GET method
• post: User input data is sent as the body of HTTP message by HTTP POST method
• If omitted, the method is get

• A form is composed of input elements
• Each component has type, name, and value attributes
• type specifies the type of component
• name is the name of the component
• value (except buttons)
• If not empty, is the default value
• On submission, name=value (user input or default) of the components in the form are sent to server (using the action and method: POST, GET)
• Server processes the values according to the names
• It must know the names

• Single-line text
• type="text"
• Password (instead of real input, other character is shown)
• type="password"
• Multi-line text
• Instead of <input>, we use <textarea> </textarea>
• cols & rows specifies # of columns & rows
• name=value of component is sent to server
• Password in plain text format 😱 — with get it is even in the URL
• Use post + HTTPS for a password

<form action="https://httpbin.org/get" method="get">
  Search:
  <input type="text" name="txtSearch" value="" size="20" maxlength="64" />
  <br />
  Password:
  <input type="password" name="pass" value="" size="20" maxlength="64" />
  <br />
  Text:
  <textarea name="inputtext" cols="30" rows="3">
Please enter your message</textarea>
</form>
    

• type="checkbox"
• If checked, its name=value is sent to server
• User cannot change/enter value
• The value attribute is needed in some cases
• If not given, it is assumed “on”
• To be checked by default
• checked="checked"
• To draw border around a group of components
• <fieldset> </fieldset>
• To assign name to the group
• <legend> </legend>

<form action="https://httpbin.org/get" method="get">
  <fieldset>
    <legend><em>Web Development Skills</em></legend>
    <input type="checkbox" name="skill_1" value="html" />
    HTML<br />
    <input type="checkbox" name="skill_2" value="xhtml" checked="checked" />
    XHTML<br />
    <input type="checkbox" name="skill_3" value="css" /> CSS<br />
    <input type="checkbox" name="skill_4" value="JavaScript" />
    JavaScript<br />
    <input type="checkbox" name="skill_5" value="aspnet" />ASP.Net<br />
    <input type="checkbox" name="skill_6" />
    PHP <br />
    <input type="submit" value="Submit" />
  </fieldset>
</form>
    

• type="radio"
• Only one of button can be selected in a group of buttons with the same name
• name=value of the selected button is sent
• Again, user cannot change/enter the value
• If the value attribute is missing, the default value is “on”
• The value attribute is (almost always) needed
• The name is the same for all choices

<form action="https://httpbin.org/get" method="get">
  <fieldset>
    <legend>University Grade</legend>
    <input type="radio" name="grade" value="B" /> BS <br />
    <input type="radio" name="grade" value="M" /> MS <br />
    <input type="radio" name="grade" value="P" /> PhD <br />
    <input type="radio" name="grade" value="PD" /> Post Doc <br />
    <input type="submit" value="Submit" />
  </fieldset>
</form>
    

• Select Boxes has the same functionality of radio buttons
• Created by:
• <select name="selname"></select>
• Options are given by <option value="val"> text </option>
• selname=val of the selected item is sent to server
• User cannot enter value
• If value attribute is omitted, the value is taken from the text content of the option element.

<form action="https://httpbin.org/get" method="get">
  Select color:
  <select name="selColor">
    <option value="r">Red</option>
    <option value="g">Green</option>
    <option value="b">Blue</option>
  </select>
  <input type="submit" value="Submit" />
</form>
    

• File Input
• In <input>
• type="file"
• accept= A MIME type to specify default acceptable file format
• In <form>
• method="post"
• enctype="multipart/form-data"
• The type that allows file <input> element(s) to upload file data.

<form
  action="https://httpbin.org/post"
  method="post"
  enctype="multipart/form-data"
>
  <input type="file" name="fileUpload" accept="image/*" />
  <input type="submit" value="Submit" />
</form>
    

• Buttons: <button> label </button>
• type The default behavior of the button. Possible values are:
• "submit": To submit data to server.
• "reset": To reset all inputs to default values.
• "button": To run client side script.
• Inside a form the default is "submit" — a <button> without a type submits the form
• The name of the button, submitted as a pair with the button’s value as part of the form data.
• Defines the value associated with the button’s name when it’s submitted with the form data.

<form action="https://httpbin.org/get" method="get">
  <input type="text" name="input" value="Default Value" /> <br />
  <button type="submit">Submit Me</button><br />
  <button type="reset">Reset</button> <br />
  <button type="button">Click Me</button> <br />
</form>
    

• The HTML <label> element gives an input its caption
• Click on the label → the input gets the focus
• Screen readers read the label with the input
• Connect them with for = id of the input, or put the input inside the label

<label for="email">Email</label>
<input type="email" id="email" name="email" required />

<label><input type="checkbox" name="news" /> Send me news</label>
    

• More type values: the browser gives a suitable keyboard or picker
• email, url, tel, number, range, date, color, search
• Validation in the browser, before the form is sent
• required, min / max, maxlength, pattern
• Only for the user experience — the server must validate again, because a client can send any request

• The HTML <meta> element represents metadata that cannot be represented by other HTML meta-related elements

• If the name attribute is set, the meta element provides document-level metadata, applying to the whole page.
• author: the name of the document's author.
• description: a short and accurate summary of the content of the page. Search engines often show it under the link in the results.
• generator: the identifier of the software that generated the page.
• keywords: words relevant to the page's content separated by commas. Google search ignores it (since 2009).

<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
        

• If the http-equiv attribute is set, the meta element is a pragma directive, providing information equivalent to what can be given by a similarly-named HTTP header.
• Usually is not processed by web-server
• Browser simulates the behavior of the effect of the header

<!-- The number of seconds until the page should redirect to another  -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
        

• If the charset attribute is set, the meta element is a charset declaration, giving the character encoding in which the document is encoded.

<meta charset="UTF-8">
        

• If the itemprop attribute is set, the meta element provides user-defined metadata.

<meta itemprop="description" content="my description">
        

• The viewport meta: put it in every page
• Without it, a mobile browser draws the page about 980px wide and zooms out — the text becomes very small
• With it, the page width is the width of the device; CSS can then adapt the layout (lecture 4)

<meta name="viewport" content="width=device-width, initial-scale=1">