Web Programming Studio Notes

3.1: Tables

Creating a table

A Table is a HTML structure created within the <table> element. They consist of primarily:

• The <tr> element creates a table row, which contains all the row's cells.

• The <th> element creates a table cell containing table header information about the data. Usually, the browser displays table headers centered with a bold font.

• The <td> element creates a table cell containing table data.

A table caption defines a short descriptive text for a table and is created with the <caption> element. The caption element must immediately follow the opening <table> tag. A web browser typically renders the table caption centered above the table.

To add borders to your table you can do that using CSS

<style>
    table, th, td 
    {
        border: 2px solid gray;
    }
</style>

Accessible Tables

People that use screen readers to hear table content benefit from the proper use of elements for table headings. Complex or long tables may use the scope attribute to improve accessibility. The scope attribute is commonly assigned "col" or "row" to indicate if the table header applies to a column or row of data. Ex:

Spanning multiple columns and rows

You can add the attribute colspan="" or rowspan="" just after your <td>s in order to make the cell span multiple rows or columns NOTE: DO NOT APPLY THESE ATTRIBUTES TO THE <tr> TAGS

Header, body, and footer

Three optional table tags specify each part of a table:

• The <thead> element specifies the table header.

• The <tbody> element specifies the table body.

• The <tfoot> element specifies the table footer.

The <thead>, <tbody>, and <tfoot> elements do not affect the layout of the table, but browsers may use the elements to enable the table body to scroll independently of the header and footer or to print the header and footer on each page of a multi-page table printout.

3.2: Images

The <img> is a void element that requires one attribute to function and two in order to comply with the standards

• src="" which specifies what image to display

• alt="" which states the alt text for screen readers and accessability or in the case of the image failing to load

The width="" and height="" attribute tells the browser what size to display the image as, if only one parameter is set the image aspect ratio is maintained

Favicon

A favicon is the icon that appears in the task bar, you can change it by using a <link> in the head of your page

<link rel="icon" href="image link">

3.3: Links

The <a> Tag indicates whatever it is wrapped around is a hyperlink, this tells the browser where to go when interacting with it, for example it could open another website, open a file that is linked or navigate to another part of the website. An email can be requested to be made by writing mailto:EMAIL.Email@website.gov. Code such as:

<a href="ftp://example.com/index.html"></a>

Allow for the browser to request to download a file when over the internet

Absolute and Relative URLs

When a webpage links to web resources on the same website, a relative URL may be specified in the href attribute instead of an absolute URL.

• An absolute URL is a complete URL. Ex:

  <a href="http://example.com/test.html">test</a>

  is a hyperlink using the absolute URL http://example.com/test.html.

• A relative URL specifies the relative path to the web resource with no scheme or hostname. Ex:

  <a href="test.html">test</a>

  uses the relative URL test.html to refer to an HTML document on the same website and with the same path as the current HTML document.

When writing relative URLs you can utalise this trick to navigate backwards through your file structure. Using './file.html' will get you to the same folder your file is in, this is the same as just typing 'file.html' assuming file.html is located in the same folder. You can use '../file.png' to navigate back one folder relative to your current file, allowing you to access other things such as saved images or css files in another area of your directory. If you need to navigate further back in the file system you can stack these, '../../file.png' will take you back two levels in your file system

Sections

A URL can point to a section, or fragment, of a document by adding a hash tag (#) and a fragment identifier at the end of the URL. Ex: https://en.wikipedia.org/wiki/Computer_science#History refers to the "History" section of the "Computer_science" page on Wikipedia.

Adding the id attribute to any element creates a fragment identifier, permitting URLs to link directly to the id's location in the document. Several rules exist for an id value:

• May be composed of any characters except whitespace characters. Ex: "history 123" is invalid because of the space.

• Cannot start with a number. Ex: "3section" is invalid.

• Is case sensitive. Ex: "History" and "history" are different ids.

• Must be unique in the document. Ex: Two elements both using "history" is invalid.

Opening links in new tabs

Within an <a> tag, adding 'target="_blank"' will make the link open in a new tab. Adding 'target="_self"' will not change anything typically as this is the default value.

3.4: Special Characters

Non Breaking Characters

Non breaking characters allow for the browser to display a gap such as a space or a hyphen without having the word split such as when writing 2‑2.5". It is highly suggested to add a non‑breaking space to things like blank cells in tables in order to guarantee that the browser will behave correctly and render the cell.

3.5: HTML Containers

Containers and parent containers

A container is any element in a web document body that has opening and closing tags. Web developers typically create many containers as a convenience to assist in organizing and formatting content. Ex: Containers can be formatted by applying styles to adjust margins, padding, horizontal and vertical alignment, and other visual presentation attributes.
A parent container is the container in which another element resides.

Block elements

HTML elements can be categorized as either block or inline. A block element (sometimes called a block-level element) fills the width of the element's parent container and can contain other block elements, inline elements, and text. Block elements include <h1>, <table>, and <p>.
Some block elements cannot be contained within certain other block elements when the semantics are unclear. Ex: The <p> element cannot contain another <p> element.
A block element is typically displayed starting and ending on new lines. Ex: The <ol> element is a block element, and each ordered list starts on a new line separate from previous and following blocks.
The <div> element is a generic element for creating block containers. Unlike other block elements, such as <p> and <table>, <div> is the only block element with no semantic meaning.

Inline elements

An inline element fills the minimum space possible in the element's parent container and can only contain text or other inline elements. Ex: The <a> element is an inline element that creates a hyperlink container as big as the link's internal content; a hyperlink does not fill the width or height of the link's parent paragraph.
The <span> element is a generic inline element. Unlike other inline elements, such as <a> and <em>, the <span> element has no semantic meaning.
Since <div> and <span> do not have semantic meaning, <div> and <span> are used primarily for presentation and interaction purposes. Good practice is to use elements like <address> and <article> that convey semantic meaning when creating containers, and use <div> and <span> only when no other elements are appropriate.