revision:
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas>tag is transparent, and is only a container for graphics. You must use a script to actually draw the graphics. Any text inside the <canvas>element will be displayed in browsers with JavaScript disabled and in browsers that do not support <canvas>.
It can render lines, circles, rectangles, polygons, bitmap images, text, and more.
height ; value: pixels; specifies the height of the canvas. Default value is 150.
width ; value: pixels; specifies the width of the canvas. Default value is 300.
id ; value: identifier; defines a unique identifier for the canvas.
code:
<canvas class="spec" id="Canvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.</canvas>
code:
<canvas class="spec" id="Canvas-1">Your browser does not support the canvas tag.</canvas>
<script>
var c = document.getElementById("Canvas-1");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 180, 100);
</script>
coding:
<canvas class="spec" id="Canvas-2">Your browser does not support the canvas tag.</canvas>
<script>
var c1 = document.getElementById("Canvas-2");
var ctx = c1.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
coding:
<canvas class="spec" id="Canvas-3" width="200" height="100" style="border:1px solid green;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c2= document.getElementById("Canvas-3");
var ctx = c2.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
P.S. See also the HTML tutorials (37 and 38), JavaScript tutorials - more in particular tutorial 29 -, as well as the topics on the coding page.
The <caption> HTML element specifies the caption (or title) of a table. The caption tag, which defines the title of a table in the HTML document, is the first tag to appear after the table tag. Only one caption can be specified for one table. The caption element should be the first child of its parent table element. When the "table" element that contains the "caption" is the only descendant of a "figure" element, the "figcaption" element should be used instead of "caption".
A background-color on the table will not include the caption. Add a background-color to the "caption" element as well if you want the same color to be behind both.
| login | |
|---|---|
| user1 | user1@sample.com |
| user2 | user2@sample.com |
code:
<div class="spec">
<table >
<caption>Example caption</caption>
<tr<>
<th>login</th>
<th>email</th>
</tr>
<tr>
<td>user1</td>
<td class="space">user1@sample.com</td>
</tr>
<tr>
<td>user2</td>
<td class="space">user2@sample.com</td>
</tr>
</table>
</div>
| Firstname | Lastname | Age |
|---|---|---|
| Lionel | Devries | 24 |
| Christine | Delrue | 32 |
| Thomas | Winters | 41 |
code:
<div class="spec">
<table>
<caption>Students</caption>
<tr>
<th>Firstname</th>
<th class="space">Lastname</th>
<th class="space">Age</th>
</tr>
<tr>
<td>Lionel</td>
<td class="space">Devries</td>
<td class="space">24</td>
</tr>
<tr>
<td>Christine</td>
<td class="space">Delrue</td>
<td class="space">32</td>
</tr>
<tr>
<td>Thomas</td>
<td class="space">Winters</td>
<td class="space">41</td>
</tr>
</table>
</div>
| name | favorite fruit |
|---|---|
| Rudy | Apple |
| Nicole | Plum |
code:
<div class="spec">
<table>
<caption>favorite fruits</caption>
<tr>
<th>name</th>
<th>favorite fruit</th>
</tr>
<tr>
<td>Rudy</td>
<td class="space">Apple</td>
</tr>
<tr>
<td>Nicole</td>
<td class="space">Plum</td>
</tr>
</table>
</div>
The figure and figcaption element
coded:
<div class=spec>
<figure>
<img src="../pics/5.jpg" alt="on the beach" style="width:30%">
<figcaption class="example">Fig.1 - Holidays, picture one</figcaption>
</figure>
</div>
The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). The text in the <cite> element usually renders in italic.
The <cite> HTML element is used to describe a reference to a cited creative work, and must include the title of that work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.
It was a bright cold day in April, and the clocks were striking thirteen.
Codes:
<figure style="margin-left:4vw;">
<blockquote>
<p class="spec">It was a bright cold day in April, and the clocks were striking thirteen.</p>
</blockquote>
<figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.
html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
</figure>
Any inaccuracies in this index may be explained by the fact that it has been sorted with the help of a computer.
— from The Art of Computer Programming by Donald Knuth
Codes:
<blockquote> Any inaccuracies in this index may be explained by the fact that it has been
sorted with the help of a computer.<br> — from <cite>The Art of Computer
Programming</cite> by Donald Knuth </blockquote>
The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code By default, the content text is displayed using the browser's default monospace font.
To represent multiple lines of code, wrap the <code> element within a <pre> element. The <code> element by itself only represents a single phrase of code or line of code.
The <code> tag is not depreciated. However, a CSS rule can be defined for the code selector to override the browser's default font face. Preferences set by the user might take precedence over the specified CSS.
The push() method adds one or more elements to the end of an array and returns the new length of the array.
The HTML button tag defines a clickable button.
The CSS background-color property defines the background color of an element.
code:
<div>
<p class="example">The <code>push()</code> method adds one or more
elements to the end of an array and returns the new length of the array.</p>
<p class="example">The HTML <code>button</code> tag defines a clickable
button.</p>
<p class="example">The CSS <code>background-color</code> property defines
the background color of an element.</p>
</div>
example
body {
color: yellow;
font-size: 16px;
line-height: 1.5;
}
example: # Display the sumprogram adds two numbers
nu1 = 2.5
nu2 = 5.3
sum = float(nu1) + float(nu2)
print('The sum of two num {0} and {1} is {2}'.format(nu1, nu2, sum))
without the <pre> tag
Here's the basic code for creating a table in HTML:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
with the <pre> tag
Here's the basic code for creating a table in HTML:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
The <colgroup> tag specifies a group of one or more columns in a table for formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements. To define different properties to a column within a <colgroup>, the <col> tag can be used within the <colgroup> tag.
The <col> tag specifies column properties for each column within a <colgroup> element. >The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
span : value:"number"; specifies the number of columns a column group or <col> element should span.
| order number | product | price |
|---|---|---|
| 3476896 | mobile phone | $53 |
| 5869207 | electric fan | $49 |
code:
<div class="spec">
<table class="example">
<colgroup>
<col span="2" style="background-color:dodgerblue"/>
<col style="background-color:lightgreen"/>
</colgroup>
<tr>
<th>order number</th>
<th>product</th>
<th>price</th>
</tr>
<tr>
<td>3476896</td>
<td>mobile phone</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>electric fan</td>
<td>$49</td>
</tr>
</table>
</div>
| Item | Qty. | Price | Cost |
|---|---|---|---|
| Bananas | 5 | 0.50 | 2.50 |
| Apples | 2 | 0.25 | 0.50 |
| Oranges | 3 | 0.75 | 2.25 |
| TOTAL | 5.25 | ||
code:
<div class="spec">
<table class="example">
<colgroup>
<col span="3">
<col class="total">
</colgroup>
<tr>
<th>Item</th>
<th>Qty.</th>
<th>Price</th>
<th>Cost</th>
</tr>
<tr>
<tr>
<td>Bananas</td>
<td>5</td>
<td>0.50</td>
<td>2.50</td>
</tr>
<tr>
<td>Apples</td>
<td>2</td>
<td>0.25</td>
<td>0.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>3</td>
<td>0.75</td>
<td>2.25</td>
</tr>
<tr>
<td colspan="3">TOTAL</td>
<td>5.25</td>
</tr>
</table>
</div>
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
|---|---|---|---|---|
| Cell | Cell | Cell | Cell | Cell |
| Cell | Cell | Cell | Cell | Cell |
<div class="spec">
<table class="example">
<colgroup>
<col style="background:#AEF642;">
<col span="3" style="background:#F4FBEA;">
<col style="background:orange;">
</colgroup>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
</div>
| name | age | branch |
|---|---|---|
| Nelson | 22 | CSE |
| Trevor | 21 | ECE |
code:
<div class="spec">
<table class="example">
<colgroup>
<col span="1" style="background-color: lightgreen" />
<col span="1" style="background-color: lightblue" />
<col span="1" style="background-color: none" />
</colgroup>
<tr>
<th>name</th>
<th>age</th>
<th>branch</th>
</tr>
<tr>
<td>Nelson</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>Trevor</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</div>