Knowledge7

The Linux and Mobile Solution Provider

You are here: Home / Archives for Noorani Bakerally

Tables and Anchors

This topic is part of our Web Design with HTML and CSS training

Table

HTML table is an element comprised of table rows and columns like part of a spreadsheet. They are container elements holding HTML elements in a tabular fashion, row by row. HTML tables are only used to display tabular information but may also sometimes help is setting up the layout of a page.

A example of a table may be the following:

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Important aspects of HTML table:

  • Table are defined within the <table> tag
  • Table rows are defined within the <tr> tag(table row)
  • <tr> may contain <td>(table data) or <th>(table header)
  • A Cell may span on several rows by setting the rowspan attribute
  • A Cell may span on several columns by setting the colspan attribute

For more information, refer to W3C documentation for table.

Anchor

Hyperlinks are how we move around on the web. In HTML, hyperlinks can be created using the <a> tag. The <a> tag can take several attributes among which href is the most important. Suppose, we want to create a link to the homepage of knowledge7.

<a href=”https://www.knowledge7.com”> Knowledge7</a>

will look like Knowledge7 when rendered on a browser.

Hyperlinks can be used to link to local web pages, external web pages or section within a page. An <a> tag can be in several states namely:

  • Link: The link has not yet been clicked
  • Active: The state which it being clicked and not yet released by the user
  • Visited: The state after it has already been visited
  • Hover: The state when the user’s cursor in on it

Check the latest rules set by W3C about anchors here

This topic is part of our Web Design with HTML and CSS training

Our forthcoming training courses

  • No training courses are scheduled.

Markup and Styling

This topic is part of our Web Design with HTML and CSS training

Learn HTML

HTML, which stands for HyperText Markup Language, is a markup language used to create web pages.HTML is not a programming language, but rather a markup language which allows you to define the layout and content of a HTML page. HTML Files are stored on Web Servers. Web Browser acts like client applications and request web pages from web servers. HTTP (Hypertext Transfer Protocol) is a protocol mostly by web browsers to request HTML files from web servers.

Basically an HTML document is a plain text file that contains text and nothing else.When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. In our case, we are going to use gEdit to create HTML files and Google Chrome to render these files.

The most basic HTML File would look like this:


<!DOCTYPE html>
<html>
<body>
</body>
</html>

  • The DOCTYPE declaration defines the document type
  • The text betweenanddescribes the web page
  • The text betweenandis the visible page content

Tags are used to describe how you want a piece of text to be interpreted by the Web Browser. <title > defines the title of your browser window. Likewise, you have lots of HTML tags.

HTML allows you to define the layout and content of an HTML page while CSS(Cascading Style Sheets) describes how to display HTML elements.

This is a CSS rule:
CSS Selector

There are 3 levels of CSS.Styles are added to HTML elements is the following ascending order.

  1. External Styles
  2. Embedded Styles
  3. Internal Styles

The internal styles overrides all other styles. With CSS, you can format HTML elements in many different ways such as changing their font-size or color etc.

This topic is part of our Web Design with HTML and CSS training

Our forthcoming training courses

  • No training courses are scheduled.

Multimedia & Advanced CSS Techniques

This topic is part of our Web Design with HTML and CSS training

Multimedia

In the past, plugins such as Adobe Flash were needed for displaying video and audio. However, HTML5 now has native support for both video and audio. Audio and video in HTML5 are now how image are supported. HTML5 specifies some Codecs which are supported for Audio and Video. A Codec is simply a compression algorithm for converting video and audio into smaller file as well as maintaining quality.

Video Codecs in HTML5

  • Ogg Theora
  • mp4
  • webm

Audio Codecs in HTML5

  • Ogg Theora
  • mp4
  • mp3
  • wav
  • aac

To add a video, simply use <video> tag with the attributes src holding the link to the video like

<video src="path/to/videofile"></video>

The tag can also take other attributes such as:

  • controls="controls" to add browser default controls
  • autoplay="autoplay" to autoplay the video
  • loop="loop" to loop the video
  • poster="path/to/picture" to display the specified picture while the video is loading

The <audio> follows the same syntax as the <video> tag with all attributes.

It is important to provide several sources for a multimedia file due to compatibility reasons. So, when defining the video or audio in HTML, instead of referencing only one file via a the src attribute, it is better to provide several sources for the same file using the <source> tag. You can specify several sources for a video like this:

<video controls="controls">
  <source src="paddle-steamer.mp4" type="video/mp4"/>
  <source src="paddle-steamer.webm" type="video/webm"/>
  <p>Sorry, your browser doesn’t support the video element</p>
</video>

Advanced CSS Techniques

A Web browsers represent a HTML page as a DOM(Document Object Model). In the DOM, there are parent and children elements. If we take an HTML Table having 5 rows, we can refer to the Table as a parent element and the rows are the child elements of the Table.

CSS allows to reference child elements using Pseudo-class. Suppose a table contains 5 rows and we want to apply a style to the first row, we can use the :first-child.

tr:first-child{
color:red;
}

Likewise, we can :last-child and nth-child(). The nth-child can take an argument. This argument is a formula that finally return an integer value. So, tr:nth-child(1) returns the first table row and tr:nth-child(even) applies for all even rows. The formula can also be in the form an+b where a is a cycle size,n is a counter starting with 0 and b is an offset.

This topic is part of our Web Design with HTML and CSS training

Our forthcoming training courses

  • No training courses are scheduled.