HTML Table
A table is a structured set of data made up of rows and columns. A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age.
The <table> tag defines an HTML table. Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Folau</td>
<td>Kaveinga</td>
<td>33</td>
</tr>
<tr>
<td>Lisa</td>
<td>Kaveinga</td>
<td>33</td>
</tr>
</table>
Colspan
To make a cell span more than one column, use the colspan attribute.
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Folau</td>
<td>3101212123</td>
<td>3101212124</td>
</tr>
</table>
Rowspan
To make a cell span more than one row, use the rowspan attribute.
<table style="width:100%">
<tr>
<th>Name</th>
<td>Folau</td>
</tr>
<tr>
<th rowspan="2">Telephone</th>
<td>3101212123</td>
</tr>
<tr>
<td>3101212124</td>
</tr>
</table>
Table with css
borderdefine a borderborder-collapsecollapse cell borderspaddingadd padding to cellstext-alignalign cell textborder-spacingset the spacing between cells
<style>
table {
border-spacing: 5px;
}
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
th {
text-align: left;
}
tr:nth-child(even) {
background-color: #eee;
}
tr:nth-child(odd) {
background-color: #fff;
}
</style>
HTML Graphics
Canvas
<canvas> is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
<div class="row">
<div class="col-3">
<h3>Canvas</h3>
</div>
<div class="col-9">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
</div>
</div>
<div class="row">
<div class="col-3">
<h3>Canvas</h3>
</div>
<div class="col-9">
<canvas id="wordCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
</div>
</div>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
var word = document.getElementById("wordCanvas");
var wCtx = word.getContext("2d");
wCtx.font = "30px Arial";
wCtx.fillText("Hello World",10,50);
</script>
SVG
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
CANVAS
|
SVG
|
HTML Media
Multimedia on the web is sound, music, videos, movies, and animations.
Audio
<!-- controls attribute specifies that audio controls should be displayed (such as a play/pause button etc) -->
<!-- loop attribute specifies that the audio will start over again, every time it is finished. -->
<!-- autoplay attribute specifies that the audio will start playing as soon as it is ready -->
<audio controls loop>
<source src="assets/amanaki.ogg" type="audio/ogg">
<source src="assets/amanaki.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Video
<video width="650" height="500" controls>
<source src="assets/lion_king.mp4" type="video/mp4">
<source src="assets/lion_king.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<div class="row">
<div class="col-3">
<h3>Media Video</h3>
</div>
<div class="col-9">
<div class="btn-group" role="group" aria-label="">
<button onclick="playVideo()" type="button" class="btn btn-secondary">Play</button>
<button onclick="pauseVideo()" type="button" class="btn btn-secondary">Pause</button>
<button onclick="stopVideo()" type="button" class="btn btn-secondary">Stop</button>
</div>
<video id="lionKingVideo" width="650" height="500" controls>
<source src="assets/lion_king.mp4" type="video/mp4">
<!-- <source src="assets/lion_king.ogg" type="video/ogg"> -->
Your browser does not support the video tag.
</video>
</div>
</div>
<script>
var lionKing = document.getElementById("lionKingVideo");
function playVideo() {
console.log("paused: "+lionKing.paused);
if (lionKing.paused)
lionKing.play();
else
lionKing.pause();
}
function pauseVideo() {
if (lionKing.paused)
lionKing.play();
else
lionKing.pause();
}
function stopVideo() {
lionKing.load();
}
</script>
HTML Lists
Ordered List
<div class="row">
<div class="col-3">
<h3>Ordered List</h3>
</div>
<div class="col-9">
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ol>
</div>
</div>
Unordered List
<div class="row">
<div class="col-3">
<h3>Unordered List</h3>
</div>
<div class="col-9">
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
</ul>
</div>
</div>
Description List
<div class="row">
<div class="col-3">
<h3>Description List</h3>
</div>
<div class="col-9">
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
</div>
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag. An HTML element is defined by a start tag, some content, and an end tag:
Note that some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag. For the tags that require end tags you must not forget their end tags or else elements will not display correctly.
HTML elements can be nested which means that elements can contain other elements. HTML tags are not case sensitive: <P> means the same as <p>.
Headings
HTML headings are titles or subtitles that you want to display on a webpage. HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Browsers automatically add some white space (a margin) before and after a heading.
Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on. Use HTML headings for headings only. Don’t use headings to make text BIG or bold.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property
<h1 style="font-size:160px;">Heading 1</h1>
Paragraph
The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.
<p>My name is Folau.</p>
Link
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.
Features:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
- If the
<a>tag has no href attribute, it is only a placeholder for a hyperlink. - A linked page is normally displayed in the current browser window, unless you specify another target.
- Links can be styled to look like buttons.
<a href="index.html" target="_self">Go Home</a>
Image
The <img> tag is used to display an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
- src – Specifies the path to the image
- alt – Specifies an alternate text for the image, if the image for some reason cannot be displayed
You need to always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
To link an image to another document, simply nest the <img> tag inside an <a> tag.
<img src="superman.jpg" alt="superman" width="500" height="600">
Block-Level Elements
A block-level element always starts on a new line and takes up the full width available. These are block-level elements:
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>
Inline Elements
An inline element does not start on a new line and it only takes up as much width as necessary. Note that an inline element cannot contain a block-level element.
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
Button
The <button> tag defines a clickable button. Inside a <button> element you can put text (and tags like <i>, <strong>, <br>, <img>, etc.). This is not possible with a button created with the <input> element.
You must always specify the type attribute for a <button> element, to tell browsers what type of button it is. You can easily style buttons to look like a link.
<button name="hello" type="button">Hello</button>
Footer
The <footer> tag defines a footer for a document or section.
A <footer> tag contains:
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
You can have several <footer> elements in one document.
<footer>
<p>Author: Folau</p>
<p><a href="mailto:folau@gmail.com">folau@gmail.com</a></p>
</footer>