Technology Kick: Web Designing

HTML Symbols

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFo7vIqpiiahLgvts8Ve6hg9__XWa93NuVzpH28DkrOf3StAJl2LwF68knDkk6xYa1GaegiaxczcOf-TQrcvZnjomvBiW0qECE0pD76iy8mlMGVpcHWkTQUL-dJREZ7k0zX18i1UPm6Tki/s1600/TechnologyKick+%25282%2529.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="0.0000000008" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFo7vIqpiiahLgvts8Ve6hg9__XWa93NuVzpH28DkrOf3StAJl2LwF68knDkk6xYa1GaegiaxczcOf-TQrcvZnjomvBiW0qECE0pD76iy8mlMGVpcHWkTQUL-dJREZ7k0zX18i1UPm6Tki/s200/TechnologyKick+%25282%2529.jpg" width="200" /></a></div>
<h2 style="background-color: white; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; font-size: 30px; font-weight: 400; margin: 10px 0px;">
</h2>
<h2 style="background-color: white; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; font-size: 30px; font-weight: 400; margin: 10px 0px;">
Some Mathematical Symbols Supported by HTML</h2>
<table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: black; font-family: Verdana, sans-serif; font-size: 15px; line-height: 22.5px; margin: 16px 0px; width: 730px;"><tbody style="box-sizing: border-box;">
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top; width: 72px;">Char</th><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top; width: 86px;">Number</th><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top; width: 109px;">Entity</th><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∀</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8704;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&forall;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">FOR ALL</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∂</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8706;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&part;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">PARTIAL DIFFERENTIAL</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∃</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8707;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&exist;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">THERE EXISTS</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∅</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8709;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&empty;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">EMPTY SETS</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∇</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8711;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&nabla;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">NABLA</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∈</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8712;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&isin;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">ELEMENT OF</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∉</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8713;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&notin;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">NOT AN ELEMENT OF</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∋</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8715;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&ni;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">CONTAINS AS MEMBER</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∏</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8719;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&prod;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">N-ARY PRODUCT</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">∑</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8721;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&sum;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">N-ARY SUMMATION</td></tr>
</tbody></table>
<h2 style="background-color: white; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; font-size: 30px; font-weight: 400; margin: 10px 0px;">
Some Greek Letters Supported by HTML</h2>
<table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: black; font-family: Verdana, sans-serif; font-size: 15px; line-height: 22.5px; margin: 16px 0px; width: 730px;"><tbody style="box-sizing: border-box;">
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top; width: 72px;">Char</th><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top; width: 83px;">Number</th><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top; width: 109px;">Entity</th><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">Α</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#913;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&Alpha;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">GREEK CAPITAL LETTER ALPHA</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">Β</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#914;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&Beta;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">GREEK CAPITAL LETTER BETA</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">Γ</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#915;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&Gamma;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">GREEK CAPITAL LETTER GAMMA</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">Δ</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#916;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&Delta;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">GREEK CAPITAL LETTER DELTA</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">Ε</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#917;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&Epsilon;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">GREEK CAPITAL LETTER EPSILON</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">Ζ</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#918;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&Zeta;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">GREEK CAPITAL LETTER ZETA</td></tr>
</tbody></table>
<h2 style="background-color: white; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; font-size: 30px; font-weight: 400; margin: 10px 0px;">
Some Other Entities Supported by HTML</h2>
<table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: black; font-family: Verdana, sans-serif; font-size: 15px; line-height: 22.5px; margin: 16px 0px; width: 730px;"><tbody style="box-sizing: border-box;">
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top; width: 72px;">Char</th><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top; width: 86px;">Number</th><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top; width: 109px;">Entity</th><th style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">©</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#169;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&copy;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">COPYRIGHT SIGN</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">®</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#174;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&reg;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">REGISTERED SIGN</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">€</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8364;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&euro;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">EURO SIGN</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">™</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8482;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&trade;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">TRADEMARK</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">←</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8592;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&larr;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">LEFTWARDS ARROW</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">↑</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8593;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&uarr;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">UPWARDS ARROW</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">→</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8594;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&rarr;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">RIGHTWARDS ARROW</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">↓</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#8595;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&darr;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">DOWNWARDS ARROW</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">♠</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#9824;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&spades;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">BLACK SPADE SUIT</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">♣</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#9827;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&clubs;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">BLACK CLUB SUIT</td></tr>
<tr style="background-color: #f1f1f1; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">♥</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#9829;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&hearts;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">BLACK HEART SUIT</td></tr>
<tr style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">♦</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&#9830;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">&diams;</td><td style="border: none; box-sizing: border-box; padding: 8px; vertical-align: top;">BLACK DIAMOND SUIT</td></tr>
</tbody></table>
</div>

HTML Symbols

Some Mathematical Symbols Supported by HTML Char Number Entity Description ∀ ∀ ∀ FOR ALL ∂ ∂ &p...

Basic HTML - Heading Tags

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1XTsleyH-i4bYiulRjbLzdzouxw8tjq9lja1WpzGBwajqkhfAXGxbXKvDEpRWSt8hvdpEiiyMJWvv4Yxrx5FfyYTZz9_JERjr4485_Bc0c0UifghTvLWbgt4gGG7BArvGHMH9Ng8I1sPc/s1600/htmltag.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="0.0000000001" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1XTsleyH-i4bYiulRjbLzdzouxw8tjq9lja1WpzGBwajqkhfAXGxbXKvDEpRWSt8hvdpEiiyMJWvv4Yxrx5FfyYTZz9_JERjr4485_Bc0c0UifghTvLWbgt4gGG7BArvGHMH9Ng8I1sPc/s200/htmltag.png" width="0.000000001" /></a></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
You can have a nice big heading on your web page quite easily. This is done with the <b>H</b> tags. The biggest size heading you can have is H1. If you want smaller sized headings then you change the number after the H. You can have up to 6 different sizes. All headings need to go between the two BODY tags.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Try it out for yourself. Open up the code for your <b>firstwebpage.html</b> file, if it's not already open. (If it's not, you can now right-click and <b>Send To > Notepad</b>. If you didn't get this working then simply click <b>File > Open</b> from the menu at the top of your text editor.)</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Add the following just below your first BODY tag:</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
<b><H1></b>A Size 1 Heading<b></H1></b></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Incidentally, tags are not case sensitive. So you can have this:</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
<b><h1></b>A Size 1 Heading<b></h1></b></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Or even this:</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
<b><h1></b>A Size 1 Heading<b></H1></b></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
But using all capital letters makes your code more readable.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Once you've added the H1 tags, though, your HTML should look like this:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoK3YR_mPgkdH2zMhl0nJFQYCz_2GxoTotezZwDkM8Tbf2QlYqU4qjjs7ElaSt_EvFcnM41-oLIAxEouoIyHr3Zo_g0bF9Mref9synQ_pmsmdd0N14hfAYno5hz-gnypLFWMvDVY9HORMx/s1600/1.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
To see what it looks like, open Windows Explorer or Finder on the Mac, if it's not already open. Navigate to where you saved your web page to, and then double click to open it up. (If you already have the page open, simply press F5 to refresh the page.) You should see this in your browser:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Q3V1OW4iz8ZnirsJgcWsoNeqzhzjfXdk4cEjcY4gBNzTAVAQ2a6vpuuEoL-mv-Y0oDpc67S35xT_59UCx7yDg6oS544PKM0si6RuJhZMJfm2_vdW9jlp5loSmP6DfUULH-NsgM4kr2q-/s1600/2.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Switch back to your code and change the 1's into 3's. So your HTML heading should now be this:</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
<b><H3></b>A Size 3 Heading<b></H3></b></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Save the changes. Go back to your browser and press F5 to refresh the page. You should see this:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKXZv8uzsTKLiBrGfUVjeLRYimhnYlzIVZQI5l6pt7TR6RAyGvz1Sv9UEVlI3HYJjaTNxvB6Vip11q79VelehvNiSPm7Ij59h4wEwuLWP9qj-Ntba4wOMvb_GUwsqUu9Da1FJVpTq2r3tz/s1600/3.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Notice how much smaller the H3 heading is compared to the H1 heading. (If your headings don't look right, make sure you haven't missed any angle brackets out, or any forward-slash closing tags.)</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<b>Exercise</b><br />Try the other H numbers to see how they compare. You can only go as far as H6.</div>
</div>

Basic HTML - Heading Tags

You can have a nice big heading on your web page quite easily. This is done with the H tags. The biggest size heading you can have i...

How To Bold and Italics A Text In Website

How To Bold and Italics A Text In Website

Two more tags that come in useful are the Bold and Italic tags. They are quite easy to use. Here are the Bold tags: <B> </B...

How To Create a Basic HTML Template

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYdcyY3NYFGTJZqTmtJTWemJ0ZJcZjwM0_IjgCeO4ll0zYfhkdnHK9bPuxGPufQhZU4nTiuWDzO4-S4fgD4QfghogL0nYVuRxM078ZC5wW4FNRPcuLf2ZXiNZsM7IjvLoxpm3OUv703pt/s1600/logo_256.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="0.00000001" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzYdcyY3NYFGTJZqTmtJTWemJ0ZJcZjwM0_IjgCeO4ll0zYfhkdnHK9bPuxGPufQhZU4nTiuWDzO4-S4fgD4QfghogL0nYVuRxM078ZC5wW4FNRPcuLf2ZXiNZsM7IjvLoxpm3OUv703pt/s200/logo_256.png" width="0.0000001" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
While you have the Windows Explorer or Finder screen open, you can save your current HTML skeleton as a template. That way, you don't have to type it all out every time you want a new web page.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
In your text editor, delete any text between your two TITLE tags. Now click <b>File > Save As</b>. From the Save As dialogue box change the name of your web page to <b>template.txt</b>:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-aKAKSIhVRGgdQ0fqMI34PEUvSTrd_mC2M4reWrCULBOnTYDfKRCDLiStt71Pxkr1a5WXrOnLYhH8wzNlP2wTaPqjW1im35S4zW1IUUEe2njf63n8mzrjpl57cdxBk4iyY5xQ2pqZrnpL/s1600/1.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Click <b>Save</b> to save the code as a text file. You will be returned to your text editor. Click <b>File > Save As</b> again. Now change the name of the file to <b>newpage.html</b>. In the <b>Save As Type</b> box in Windows, change it to <b>All Files</b>:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7K-87fTkKJ5yjjCT0AndCCiUYlHQ4pvbpREgCznwArzY7CqU9YOTSzVFHUuIKjrkxLa8Tjpnm2u2wZgX1WsoBMni9QYU5_PIKXPxT_3L3ZzkePtCgPO58DtY23b7FurD8-kVQc710Cy0h/s1600/2.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Save the file and switch to Windows Explorer or Finder. You should now see three pages:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxQR6cLi4T0tTcKtW6VSv0umN4mAWcDKzL_Q8_BObJkbj9qdR4vuFHS21ADwoxewYA292WYrHFjU1MZDm2YYGkf0NypWILmXoXTaCwHZ4X6_doTUsH-az_KU_jBlx7OkO6SpVOGarwWIB/s1600/3.gif" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px; text-align: left;">One of these, the template is a text file rather than a HTML file. From now on, you can open the template text file, and repeat the process above: Click</span><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px; text-align: left;"> </span><b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: left;">File > Save As</b><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px; text-align: left;">, change the</span><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px; text-align: left;"> </span><b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: left;">Save As Type</b><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px; text-align: left;">box to</span><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px; text-align: left;"> </span><b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: left;">All Files</b><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px; text-align: left;">, then type a new name for your web page, not forgetting the html ending.</span></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
There is a problem, however. If you were to double click your <b>newpage.html</b> file it would open up in your browser. But you will want to open it up in Notepad so that you can edit the file and make changes.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
To solve the problem, you can add an item to the <b>Send to</b> menu in Windows (Macs will have an<b>Open With</b> right-click menu. Your text editor should be on there). This appears when your right-click the file:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBzYnODbMPUslyzSq4Uzw83aNnrZaxj-meTf4CT4I_kiigcaSHOwdfW7g06ZB4a0zw-vjqhCaww3AJZa368iwfNygiuL6y-aoEB281V3Cqx6eyPrzyU83-B0WUXogDA5oP1xwMcGkiq8xg/s1600/4.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
In the image above, we have Notepad on the <b>Send to</b> menu. Selecting this item means that we can quickly open up the code in Notepad.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
To add an item to the Send to menu, switch back to your Explorer window. In the address bar at the top, enter the following:</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
%APPDATA%\Microsoft\Windows\SendTo</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Press the Enter key on your keyboard and you will be taken to the Send to folder:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1PAa6GMPwBycD03G829rRxnPbdlgcneirTHnSgzGtkNUVtjoo4xTquo40-P8qdkuRvSHYPvlCBz4WtrjJsDeRB9Jea-tL4lD3hPZTL_OuYuyZxg7PmXQJtdSg3jHoa8T3Jn5PMWXQC8ef/s1600/5.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
You can now drag and drop items from your Start menu to this folder. (Make sure Windows Explorer doesn't fill the whole of your screen by clicking the Restore Down icon just to the left of the Red X.)</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Click your Windows Start button. From the <b>All Programs > Accessories</b> menu, locate Notepad again. Hold down your left mouse button on Notepad. Keep it held down and drag across to your Windows Explorer and your Send To folder:/</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndfaRcvNXAf9ffLK-58NGaI9bHz-MyaOJ5Abh2gHx-ttUD8xSie2LdyKSh1KgPhlORQYVez4U7Y3kQQfI31amf_QYIox383AnYhNIAXxZdyDQ4VcDvkA2IfnW5GEbjB4KzyH24MrHjCLQ/s1600/6.gif" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Let go of your left mouse button and Notepad will be on your Send To menu when you right-click a file in Windows Explorer.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Now you can quickly open up your HTML code in Notepad and makes changes to it.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
To recap this section, here are the important points again:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
</div>
<div class="TextAlignment" style="text-align: center;">
<ins id="aswift_0_expand" style="border: none; display: inline-table; height: 280px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 336px;"></ins></div>
<br />
<ul style="-webkit-text-stroke-width: 0px; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<li>The HTML skeleton is the foundation on which most internet pages are based</li>
<li>HTML is written in Tags</li>
<li>Tags usually come in pairs</li>
<li>A Tag is a word surrounded by angle brackets, e.g.: <HTML> </HTML>, <HEAD> </HEAD>, <TITLE> </TITLE></li>
<li>A pair of tags has as a starting Tag and an end Tag. The end Tag is preceded by a forward slash</li>
<li>Add <!DOCTYPE HTML> to the top of all your HTML pages.</li>
</ul>
</div>

How To Create a Basic HTML Template

While you have the Windows Explorer or Finder screen open, you can save your current HTML skeleton as a template. That way, you don...

Viewing Your Web Pages In a Browser

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-JZwpRc3qd6PBmEavw551yE6XY9sjAMGq-iT9ti7aHz5w_L1VxaI1CjJuHnXk9mv5iy-lF9Jxf695pgcLoredKx9o04ptmkoAf7XaapZrAJvAEAF6cDr5Vmz3ho0aWtA_WuWGh5sLD9OQ/s1600/firefox-on-chrome.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="0.0001" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-JZwpRc3qd6PBmEavw551yE6XY9sjAMGq-iT9ti7aHz5w_L1VxaI1CjJuHnXk9mv5iy-lF9Jxf695pgcLoredKx9o04ptmkoAf7XaapZrAJvAEAF6cDr5Vmz3ho0aWtA_WuWGh5sLD9OQ/s320/firefox-on-chrome.png" width="0.0001" /></a></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
To view the results, open up an explorer window. In Windows, this is done by holding down the Windows keys and then pressing the letter E on your keyboard. Or click your <b>Start</b> menu in the bottom left, and then click on <b>Computer</b>. On a Mac, click the <b>Finder</b> icon in the Dock.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Navigate to where you saved your HTML page. In our case, this was a folder we created called HTML, which is on our network:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBSsurkiH2uYiO5l6yUfQBP0OeNHeBuD55S1guAU7rp_wys8cqO-vNasDC_TLcEsu_1JZm_FW_fL5TqLiaODrg0M2DEHp_s4si-8eeEHwqHNrFd5E7A8gBRYHk5jkV2sTqSx4pqtaVQ7sb/s1600/1.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
In the image above we have a file called <b>firstwebpage.html</b>. If yours has <b>.txt</b> on the end instead of<b>.html</b> then try again because it's not a web page but a text document.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Double click your HTML file and it will launch in your default browser. For us, this is Firefox. Yours might be Internet Explorer or Safari. You should see a blank white page with your TITLE at the top. Here's the Firefox version:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY1UY3bpNY5qHrq01kdKNJM9ruDN_Eqt3BH8xBOXogkZ2y6xHJkU5fWMZJyIMG_-fJHpeaRSP35zjaD689EJnQQ1ZVZjdKtM08JPq9Z4MbSMw_3i2xvdTk1df0sGJObv0GlhX9qkZ9NCVm/s1600/2.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
And here's the same page in Internet Explorer:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCdCZNXESAcYCuyGiVl7cyyQX0k0Y0UulbHDNnpG33bZInOR2IlvXjJ9IkI4dn7ENvjtLCpBKcV_CosFMGh2S8B3Hqf1ytCZ6MZnDf_V4LaIg5yIFyqbwqvzrVjRUvcLcW9TgcYbjHfdQP/s1600/3.gif" /></div>
<div>
<br /></div>
<div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Notice that in both versions the TITLE we added is at the very top of the screen ' 'My First Page'. The same TITLE can be seen further down, at the top of each browser tab.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">Exercise</b><br style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;" /><span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">Change the TITLE tag to something other than 'My First Page'. Click </span><b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">File > Save</b><span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;"> in your text editor. Switch back to your browser and press F5 to refresh the page. Your new TITLE should appear at the top of the screen and at the top of the browser tab.</span></div>

Viewing Your Web Pages In a Browser

To view the results, open up an explorer window. In Windows, this is done by holding down the Windows keys and then pressing the letter...

What Is HTML And HTML 5?

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Zgrn3-yyZ-sTTgFzJPnpLZ6_-698bAbPY8hJBVwft2-tGlkpbLFN7do7IaBh3Yg99WIItfFnvBzruY57aN8r_Tmcg00BJtzcO_SaLqwGvzGP9GfcTC1lvZa5ARenMCZDC6V9wJmdaPX1/s1600/HTML5_logo_and_wordmark.svg.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="0.0001" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Zgrn3-yyZ-sTTgFzJPnpLZ6_-698bAbPY8hJBVwft2-tGlkpbLFN7do7IaBh3Yg99WIItfFnvBzruY57aN8r_Tmcg00BJtzcO_SaLqwGvzGP9GfcTC1lvZa5ARenMCZDC6V9wJmdaPX1/s320/HTML5_logo_and_wordmark.svg.png" width="0.0001" /></a></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
In this section, you're going to learn just what a web page is and how it can be read by a browser like Internet Explorer or Firefox. You'll also construct your very first web page. Let's make a start.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Files on your computer come with extensions. If you wrote a letter using Microsoft Word and saved it with the name 'MyLetter', the software would add four letters to the file name (three in older versions). Because it was typed using Word, the four letters that get added to your filename are<b>.docx</b>. So your file name will be 'MyLetter.docx' and not just 'MyLetter'. If you created a spreadsheet in Microsoft Excel and called it 'Accounts' the Excel software will add its own four letter extension to your file name. It will add <b>.xlsx</b>. So you file name will be 'Accounts.xlsx' and not just 'Accounts'. So you get a different four letter extension depending on the software you used.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
These extensions are very important to computers. They are used to identify the type of file it is. With a file extension, Word can recognise its own documents. It sees the letters <b>docx</b> and says 'Ah yes, that's one of mine. I can open it.' If it sees a different extension, <b>xlsx</b> for example, it says 'What the heck is that?' You may then get an error message telling you that the file type is not recognised.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Web pages have their own file extensions. Oddly there are two different extensions, a three letter file extension and a four letter extension. Web pages come with the extension <b>.htm</b> or <b>.html</b>. A browser can recognise either extension.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
When you open up a web page with your browser, Internet Explorer for example, the browser software checks the file extension, the same check that Word and Excel make. If it sees the <b>.htm</b>or <b>.html</b> extension it knows it's a web page and then tries to open it. (Modern browsers, though, can open up other types of files. Internet Explorer can open up your Word documents and PDF files.)</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Behind the scenes, however, the thing that Internet Explorer is trying to open is really a text file that has had its extension changed from <b>.txt</b> to <b>.htm</b>. The text file though will have special symbols and words, called Tags. When the browser sees these Tags it goes to work, displaying whatever you typed and hiding the Tags from your viewers.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Most web pages on the internet are written in code called HTML. HTML stands for HyperText Markup Language, and is fairly easy to get the hang of. That's because HTML is not a programming language: it is a language designed to improve the presentation of text. For example, in Microsoft Word, if you want a nice big heading, you can select a font size from a menu. HTML has an easy way to change the size of text of headings, too, which you'll see in a moment. But that's basically all you are doing with HTML ' presenting text and images on a page. The way you do this is with things called TAGS.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<h3 style="font-family: Arial, Helvetica, sans-serif;">
What is HTML 5?</h3>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
HTML comes in different versions. When people talk about HTML 5 they are talking about the updates to the mark up language. These updates were agreed (mostly) by a whole host of different parties, all members of an organisation called W3C. W3C was founded in 1994 by Tim Berners-Lee, who also created the first version of HTML and invented the World Wide Web. They now oversee the defining of new Web technologies. Comapnies who make browser like Microsoft (Internet Explorer), Mozilla (FireFox), and Apple (Safari) can then decide which of the new Web technoligies they wish to implement.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Most of the big names in browser technology decided to implement quite a lot of the new suggested updates (specifications) put forward by the W3C. These specifications are commonly known as HTML 5. In practice, this means implementing features like HTML Video and audio directly into the browser, as opposed to needing a 3rd party plugin like Adobe's Flash. Another exciting update is something called the Canvas tag. This allows you to create quite sophisticated animations and graphics using Javascipt, again without needing a 3rd-party plugin.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
There are a whole lot of new HTML tags that take browser technology forward into the 21st century. Throughout this course, we'll introduce you to the essential HTML 5 tags that you need in order to create a modern web page.</div>

What Is HTML And HTML 5?

In this section, you're going to learn just what a web page is and how it can be read by a browser like Internet Explorer or Firefo...

How To Save Web Page

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnLzSMc8Hcs9lhNUPUfKPiFQCnKjwmHMCZdC_9SZM4CqvXV33uRpaR3QAJ6hH3ARUA2fsrFp6vukKjEtOew7p5JjkxzxBRtBT-gz3Tx0_y7lkTGeZwlXV8KMPAFZNDnfCRlT6vJVolCLL/s1600/web_page_T.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="0.0001" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnLzSMc8Hcs9lhNUPUfKPiFQCnKjwmHMCZdC_9SZM4CqvXV33uRpaR3QAJ6hH3ARUA2fsrFp6vukKjEtOew7p5JjkxzxBRtBT-gz3Tx0_y7lkTGeZwlXV8KMPAFZNDnfCRlT6vJVolCLL/s200/web_page_T.png" width="0.0001" /></a></div>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">To save your code as a web page, click the File menu at the top of Notepad (or whatever Text Editor you are using.) From the File menu, select </span><b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">Save As</b><span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">. The Save As dialogue box appears (We created a new folder to store all our web pages in, and called the folder HTML)..</span><br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQio6KZgPeKMSPXKPhW9VVpINLrFvcdgH7AlwJZxBecItEsE2GsC9eHrNPmcJ93XlcI9dh86EQ7-Bc4218UqQQ5vQcOouZZXsqfOKYGiO7flj97tfb-cQiNcWnsEJWsyaL4Leaw8evFOB/s1600/TechnologyKick.gif" /></div>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">Note the default extension at the bottom, under 'Save as type' It says, </span><b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">Text Documents (*.txt)</b><span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">. If you leave it on that then you won't have web page, you'll have a text file. Click on the drop down list and change it to 'All files'. (You don't need to do this if you're using TextEdit on a Mac. Just type</span><b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">firstwebpage.html</b><span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;"> in the Save As box.)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><br /></span>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDcCCsRJS4r_imNblvnfYYPRsmH7RTIF3i721dQSiJ0zQHb9c1rc9x6ElVO5uXG5Ds0-lhk7FVjDyOHwgStMUkNu2lbZTlHsMDFgiHyAu4l2hGwlt_fubee6izWpUgF559sjAj9kUKeFSh/s1600/22.gif" /></div>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">In the File Name box, type </span><b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">firstwebpage.html</b><br />
<b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><br /></b>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ee1bnR5570_OGOKsFBmFOi8M-auJPhVM0CLsWVsaYgHAMusd7QvBTeIj1ghAata448CgRBJwIYjpPuZ4e8L-PjVZzZNEHtRhRYvxrQGng6YFObmbq0FyI2lib2sRsSinetr6XAoimW2r/s1600/33.gif" /></div>
<b style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;"><br /></b>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Note that we've used all lowercase letters. This is not strictly necessary, but is recommended. Also, try not to add spaces to web page names as this can cause problems. You can use underscores or hyphens, though. So these two are OK:</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
first_web_page.html</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
first-web-page.html</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
But these two should be avoided:</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
first web page.html</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
FirstWebPage.html</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Click on <b>Save</b> and you'll have a HTML page that can be displayed in a browser.</div>

How To Save Web Page

To save your code as a web page, click the File menu at the top of Notepad (or whatever Text Editor you are using.) From the File menu, s...

Learn HTML Tags

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9VKHeNtnX6PQ8EY0d5TUQd_rOPD9kEpNwBZcdUB1LUyknSqmLoVw6Bb3FvLRaXcBeRskF94Uh9zBHZNPs8TjAjqiYkYfMI9rRRCWetOcBhx63jZToLX7Q7H3jWQcPvWALUUgtNHgZoFGB/s1600/htmltag.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="0.0001" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9VKHeNtnX6PQ8EY0d5TUQd_rOPD9kEpNwBZcdUB1LUyknSqmLoVw6Bb3FvLRaXcBeRskF94Uh9zBHZNPs8TjAjqiYkYfMI9rRRCWetOcBhx63jZToLX7Q7H3jWQcPvWALUUgtNHgZoFGB/s200/htmltag.png" width="0.0001" /></a></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write are the HTML tags themselves. You put one HTML tag at the top, and one at the bottom:</div>
<div class="indent_small" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; margin-left: 4em;">
<HTML></div>
<div class="indent_small" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; margin-left: 4em;">
</HTML></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Two things to notice here. One, that the word HTML is surrounded by angle brackets (the Less Than and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it can really mess up your web page.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
So add those two tags to your text editor and it will look like this:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtw7vMkGWi69z77IS8p_oaAagql_Tr3KDzPak180Xd17qFRYLTq2sDekntelOmqICIjgh6AQtNBGCR0GERVL3hTTOxiwlgWGxDGDAzYAQxcvtuV2Cfa-Vf301m7QTNNHuHJJVa-IkkBvO/s1600/1.gif" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The stop symbol is that forward slash. So miss that out and, again, your web page can really be messed up.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
The next pair of tags are the HEAD tags: They go between the two HTML ones:</div>
<div class="indent_small" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; margin-left: 4em;">
<HTML></div>
<div class="indent_big" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; margin-left: 8em;">
<HEAD></div>
<div class="indent_big" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; margin-left: 8em;">
</HEAD></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="indent_small" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; margin-left: 4em;">
</HTML></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before the final one </HEAD>.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
The HEAD section of HTML page is where you put special instructions for the browser. Your browser will not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted to display the words 'Hello World' on your page, and you typed them in between the two HEAD tags, then the Browser would just ignore them. That's because 'Hello World' is direct text, and not a special instruction that the browser can understand.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
A special instruction your browser can understand is the TITLE tag:</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
<TITLE> </TITLE></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
The Title tag always goes in the HEAD section of the HTML skeleton.</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVM4uqbmWQt6jLneGr-PsJRiGTwSNkEub_sNcGNkES-tcjG7XrHj1xqJmTqlIsgATWVutY1CNs4Wqb1cEcyD2ipf8JoTIFq_AnAgPKPPGBlSbaY-sScnVwfdHX-NQ9v7dHHt_L4LBuxJZ/s1600/after+1.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
he TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web page. If you saved your web page as <b>MyFamily.html</b> then that would have no bearing on or relationship with the TITLE tag. Whatever you type between the two TITLE tags is what appears at the very top of your browser window. And that's it, that's all it does. (You'll see what it looks like in a moment.)</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
The final, and most important part, of the HTML skeleton is the BODY section.</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPOgW4HX1Z2Gaq4Y73LwYxhfQxT6KiTLzojavtdnuhY_s2sRyV0eqtpU2qGg2VnBMmzjGC8H5QdArj-ljSV6MQg4PAA8phPqGrCv1NfJrbAb_ORxOP0MAbrb7J1e5eOu6fRAw6ryReV6dM/s1600/html_basic_tags_full.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
In your text editor, then, add the following:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7u6dWjZL5x8cwxhHROdp9kx85S8p4p6Mmy3p9IWcql0eUWLmoe7kvgywvj2_67VtQRcNsD37ZwfAxA7gBtVK7ZA9xktGM_NOTFrZRPO8s_i3FA4SZlo2cTuk63vArGOQHL57FELZND_R/s1600/2.gif" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
Notice that we've added some text between the two TITLE tags: <b>My First Page</b>. We've also used indenting, but this is only for readability: the indenting doesn't have any effect on the results.</div>
<h3 style="font-family: Arial, Helvetica, sans-serif;">
DOCTYPE</h3>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
One special tag is DOCTYPE. It's not really a HTML tag, but an instruction to the browser about which version of HTML is allowed. In version of HTML prior to HTML 5 the DOCTYPE could be very messy. In HTML 5, however, it's just this:</div>
<div class="TextAlignment" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-align: center;">
<!DOCTYPE HTML></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
DOCTYPE needs to go at the very top of the page. There is no end tag for DOCTYPE. Note the exclamation mark after the first angle bracket, and the space between DOCTYPE and HTML.</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
So add a DOCTYPE to the top of your page. Your text editor will look something like this:</div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1BUCuj1hyS1aY1eHTDyEWIFtWwN5nBxHWISWUU45KpP5cXIlHAw20QeWs_5IAYG1nMtqssZXoNKiIF52hZg4FONNM-BtVQAmDq49t_9LVddCwQyoCKArZHaykOMBTx46BnqJ_ora2t69D/s1600/3.gif" /></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<br /></div>

Learn HTML Tags

HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write ...

Introduction To Web Designing Course

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhGqM1g18S7JALkNLxG9VgbJBwVVtsi0M0gOMXmFa3oKUcLvHP1l7FeQOvjzxKDfgIzKXbTwTCCE2mTb1yBQaXxjNbrmhDkp9g7khkIEc8Aenl4qicuxS86qqQruIyeRkCyqz6H2M9RjH/s1600/j0424389.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="color: black;"><b><img border="0" height="0.0001" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhGqM1g18S7JALkNLxG9VgbJBwVVtsi0M0gOMXmFa3oKUcLvHP1l7FeQOvjzxKDfgIzKXbTwTCCE2mTb1yBQaXxjNbrmhDkp9g7khkIEc8Aenl4qicuxS86qqQruIyeRkCyqz6H2M9RjH/s200/j0424389.jpg" width="0.0001" /></b></span></a></div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px;"><b><br /></b></span><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px;"><b>A very warm welcome to the Technology Kick computer course for Web Design. The software you need is set out below. We assume that you have absolutely no knowledge of designing web pages. Throughout the course of this book you will learn the fundamentals of Web Design. And, of course, you will start creating your own pages. By the end of the book, you will have acquired a good understanding of what web design is all about, and have the ability to take it further, if you so wish.</b></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-large;"><b><br /></b></span>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: x-large;"><b>What you will learn</b></span><br />
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<b>The aim of this course is to get you started designing web pages. It is assumed that you have little or no experience of the subject. During our time together, you'll learn some new concepts and ideas, most of which will not be difficult. After all, there are billions of pages on the internet, designed by the whole spectrum of humanity: children, adults, pensioners, people from all walks of life have sites out there. And if they can do it, so can you. In fact, follow the lessons carefully and you WILL do it. Before long, you'll have your own pages designed and ready to be uploaded, there for all the world to see.</b></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<b>The technologies you will learn are HTML, HTML5, and Cascading Style Sheets. (HTML5 is the newest version of the of the language.)</b></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<b>At the heart of every web page is something called HTML. You will learn what this is, and how to code it. You will also learn the newest version of HTML, which is called HTML5. Both versions are included in this course. As well as HTML, you will learn about Cascading Style Sheets, and will be able to improve the look of your web pages by adding CSS to enhance them.</b></div>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px;"><b>At the end of most chapters in this book you will see a summary table of what you have learnt. The summary tables are also included in a separate document, called quick_reference.pdf. This is one of the files that come with this book. All the files you should have are detailed below.</b></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px;"><span style="font-size: x-large;"><b><br /></b></span></span>
<span style="font-family: "arial" , "helvetica" , sans-serif; font-size: 16px;"><span style="font-size: x-large;"><b>What you need to do the course</b></span></span><br />
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<b>The only thing you really need to do the course is a simple text editor. We explain all about this in the first chapter, Anatomy of a Web Page, in the section Software for Writing Web Pages. But the operating system you have is not important. So you can do this course on a PC or an Apple Mac.</b></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<b><br /></b></div>
<div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">
<b>Good luck!</b></div>

Introduction To Web Designing Course

A very warm welcome to the Technology Kick computer course for Web Design. The software you need is set out below. We assume that you have...