All posts by Raef Kandil

Senior Technical Developer/Technical Teamleader

Front-End Tutorial 4 (Reference Tutorial) – Level 0

HTML Tags

Basic HTML

<!DOCTYPE> tag

Defines the document type

Example:-


<!DOCTYPE html>

<!DOCTYPE html> tag

  • This is a HTML5 document. HTML5 is the newest HTML version and it is the one we would be teaching in this course.

Example:-

<!DOCTYPE html>

<html> tag

  • The root of the html document.
  • All other html tags go into the <html> tag.

Example:-


<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document……
</body>

</html>

<head> tag

  • Carries information about the html document.
  • Can carry the title, scripts or links to styles.
  • Can be omitted in HTML 5.

Example:-


<head>
<title>Title of the document</title>
</head>

<title> tag

  • Defines a title tag to be used by:-
    • Search engines
    • Browser address bars
    • Added to the bookmarks

Example:-


<head>
<title>Title of the document</title>
</head>

<body> tag

  • Defines the document’s body. The whole of the html contents should lie in the body.

Example:-


<body>
The content of the document......
</body>

<h1> to <h6> tag

  • Defines the header tags helping search engines to come up with an HTML content structure.
  • Their appropriate use is essential for Google and other search engines to come up with a proper document outline.
  • We will definitely revisit them.

Example:-


<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p> tag

  • Defines a paragraph

Example:-


<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

<br> tag

  • Defines a line break.
  • Except in very special cases such as writing poems, the <br> tag should be avoided.

Example:-


To break lines<br>in a text,<br>use the br element.

<hr> tag

  • Defines a shift in subject in an HTML document.

Example:-


<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>

<!–…–> tag

  • This is a comment. Whatever goes as a text, doesn’t show on the screen, it only shows on the source of the page.
  • Do not put any sensitive information in HTML comments or hackers could see it and use it to steal your website. For example, don’t put Administrator’s password in HTML comments.

Example:-


<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

Formatting

<abbr> tag

  • The ‘a’ ‘b’ ‘b’ ‘r’ tag is used for abbreviations.

Example:-


<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<address> tag

  • The address tag is used to display the contact information of the author of the article or the document.

Example:-


<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<b>tag

  • Defines bold text
  • Try to avoid using this tag as it is always best to separate content from styling.

Example:-


<p>This is normal text - <b>and this is bold text</b>.</p>

<bdi> tag

  • Isolates the current text direction from the rest of the text.
  • Can be used to avoid browsers confusion in case of bi-directional text.

Example:-


<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

<bdo> tag

  • Used to override the current text direction

Example:-


<bdo dir="rtl">This paragraph will go right-to-left.</bdo>

<blockquote> tag

  • Used to reference another source.

Example:-


<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

<cite> tag

  • Used to define the title of work, e.g. sculpture, painting, piece of writing, etc.

Example:-

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

<code> tag

  • Defines computer code

Example:-

<code>A piece of computer code</code><br>

<del> tag

  • Used to mark a text that is no longer valid in a document and has been deleted.

Example:-

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<dfn> tag

  • Defines the defining instance of a term

Example:-

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

<em> tag

  • Defines an emphasised text

Example:-

<em>Emphasized text</em><br>

<i> tag

  • Used to signal a text in a different mood from the surrounding text.

Example:-

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

<ins> tag

  • Defines a text newly updated or inserted on the website.

Example:-

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

 <kbd> tag

  • Defines a text formatted as a keyboard input.
  • Try to avoid using this tag as it is better to separate the content from the styling.

Example:-

<kbd>Keyboard input</kbd><br>

<mark> tag

  • Used to highlight a part of the text

Example:-

<p>Do not forget to buy <mark>milk</mark> today.</p>

<meter> tag

  • Used as a scalar measurement within a given range

Example:-


<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

<pre> tag

  • Used to preserve line breaks and spaces in text.

Example:-


<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

<progress> tag

  • Used to display the progress of an ongoing task.

Example:-


<progress value="22" max="100">
</progress>

<q> tag

  • Defines a short quotation inserted between double curly braces “”.

Example:-


<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

<rp> tag

  • Used to define what is to be displayed in browsers that do not support the Ruby annotations.
  • Ruby annotations are used to provide pronunciation or short annotations typically for East Asian languages.

Example:-


<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

<rt> tag

  • Defines an optional annotation or explanation typically for Eastern Asian languages.

Example:-


<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

<ruby> tag

  • Defines ruby annotations which provides extra explanations or pronunciations typically used in Japanese publications

Example:-


<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>

<s> tag

  • Used to represent a text that is no longer valid or has been replaced.
  • Difference between <s> tag and <del> tag is that <s> tag is used to indicate a text that is no longer valid and has been replaced by a newer text whereas a <del> tag represents a text that has been deleted from the document.

Example:-


<p><s>My car is blue.</s></p>

<samp> tag

  • Used to define a sample output of a computer program

Example:-


<samp>Sample output from a computer program</samp><br>

<small> tag

  • Defines small text and other side comments
  • Try to avoid using this tag as it is always best to separate content from style.

Example:-


<p><small>Copyright 1999-2050 by Refsnes Data.</small></p>

<strong> tag

  • Defines an important text

Example:-


<strong>Strong text</strong><br>

<sub> tag

  • Defines a subscripted text

Example:-


<p>This text contains <sub>subscript</sub> text.</p>

 <sup> tag

  • Defines a superscripted text

Example:-

<p>This text contains <sup>superscript</sup> text.</p>

<template> tag

  • Used to hold html content without displaying it.
  • JavaScript can be used to manipulate it later on to get it displayed.

Example:-


<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>

<time> tag

  • Defines a date/time object.
  • Useful for search engines and user agents to provide calendar reminders.

Example:-

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime=”2008-02-14 20:00″>Valentines day</time>.</p>

<u> tag

  • Represents text that is stylistically different such as misspelled words.
  • Should not be used if another tag is more appropriate to be used.
  • Should not be used is is going to get confused with hyperlink.

Example:-


<p>This is a <u>parragraph</u>.</p>

<var> tag

  • Used to display a variable in a mathematical formula or a computer program.

Example:-


<var>Variable</var>

<wbr> tag

  • Defines a work-break opportunity for browsers.
  • Used when you are afraid for the browser to break the word in the wrong place.

Example:-


<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>

Forms and Input

<form> tag

  • Defines a form in an HTML document.
  • Can contain buttons, input fields, submit buttons, option selection, field sets and other form elements.

Example:-


<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

<input> tag

  • Defines a point of user-interaction in an html document.
  • Typically used inside a form

Example:-


<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form

<textarea> tag

  • Defines a multiline input control.

Example:-


<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

<button> tag

  • Defines a clickable button.

Example:-


<button type="button">Click Me!</button>

<select> tag

  • Used to give the user a set of options to choose from.
  • The difference between a select tag and input with a datalist tag is that a select tag forces the user to pick one of the options where as an input with a datalist tag gives the user a choice whether he wants to choose one of the options or enter his own choices.

Example:-


<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

<datalist> tag

  • Defines a list of pre-defined options for the input control

Example:-


<input list="browsers">

<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>

<label> tag

  • Defines a label for an input element

Example:-


<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>

<option> tag

  • Defines an option in a combo selection box.

Example:-


<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<optgroup> tag

  • Used to group of set of options in a selection box together.

Example:-


<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

<fieldset> tag

  • Defines a group of related items in a form surrounded by bordered box.

Example:-


<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>

<legend> tag

  • Defines a caption for a set of fields in a form.

Example:-


<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

<output> tag

  • Defines the result of calculation

Example:-


<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

Frames

<iframe> tag

  • Used to include a part of the website referencing a different URL and display it inline with the rest of the document.

Example:-


<iframe src="https://www.w3schools.com"></iframe>

Images

<img> tag

  • Used to display an image on the website.

Example:-


<img src="smiley.gif" alt="Smiley face" height="42" width="42">

<map> tag

  • Defines the image into a set of clickable areas.

Example:-

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”>
<area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”>
<area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”>
</map>

<area> tag

  • The area tag defines a clickable part in an image map.

Untitled

Example:-


<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”>
<area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”>
<area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”>
</map>

<canvas> tag

  • Used to draw graphics on the fly via scripting, usually Javascript.

Example:-


<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0, 0, 80, 80);
</script>

<figcaption> tag

  • Defines the caption of a photo in a <figure> tag.

Example:-


<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

<figure> tag

  • Defines illustrations or diagrams in a document.

Example:-


<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

<picture> tag

  • Defines an image container for images and displaying any of them based on a selection criteria.
  • Used to build responsive images. Responsive images are images that are displayed equally well on a desktop computer and a mobile device.

Example:-


<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<svg> tag

  • Defines SVG graphics.
  • Examples:-
    •  Define line
    • Define circle
    • Fill color

Example:-


<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Audio / Video

<audio> tag

  • The audio tag defines sound content on the site.

Untitled

Example:-


<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

<source> tag

  • Used inside a picture, video or audio tag
  • To be displayed if matched by media query, media support or codec support

Example:-


<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<track> tag

  • Defines text subtitle tracks for video and audio.

Example:-


<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

 <video> tag

  • Defines a video, movie clip or an other video stream.

Example:-


<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Links

<a>tag

  • Anchor tag defines a hyperlink. Link to another website or an internal link to the current website.

Example:-


<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

<link> tag

  • Used to link style sheets to html documents.

Example:-


<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

<nav> tag

  • Contains Navigation links

Example:-


<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Lists

<ul> tag

  • Defines an unordered list.

Example:-


<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ol> tag

  • Defines an ordered list

Example:-


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol start=”50″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<li> tag

  • Defines a list item

Example:-


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<dl> tag

  • Description list contains a list of terms and definitions for these terms.

Example:-


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

<dt> tag

  • It defines a term in a description list

Example:-


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

<dd> tag

  • Defines the definition of a term in a definition list.

Example:-


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Tables

<table> tag

  • Defines a table
  • Not recommended to use it except for emails.

Example:-


<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<caption> tag

  • Defines a table caption

Example:-


<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<th> tag

  • Defines a header cell in a table.

Example:-


<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<tr> tag

  • Defines a row in an HTML table

Example:-


<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

<td> tag

  • Defines a table’s cell.

Example:-


<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

<thead> tag

  • Groups the header cells in a table.

Example:-


<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

<tbody> tag

  • Defines a table’s body

Example:-


<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

<tfoot> tag

  • Defines the footer content of a table.

Example:-


<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

<col> tag

  • Useful for applying styles for entire table columns.

Example:-


<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>

<colgroup> tag

  • Container for one or more columns for formatting of tables.

Example:-


<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>

Styles and Semantics

<style> tag

  • Used to provide styling information in HTML documents

Example:-


<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

<div> tag

  • A commonly used generic container for other HTML tags.

Example:-


<div style="background-color:lightblue">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>

<span> tag

  • Displays a generic inline container
  • Can be used for styling or JavaScript manipulation

Example:-


<p>My mother has <span style="color:blue">blue</span> eyes.</p>

<header> tag

  • Defines the head of a section in the document.
  • Not to be confused with the head tag as the head tag contents are not displayed by browsers.
  • Can contain <h1> to <h6> tags or navigation links.

Example:-


<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>

<footer> tag

  • Defines the footer of a section in a document.
  • It could contain address information, copy right, etc.

Example:-


<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>

<main> tag

  • Defines the main content of an HTML document.

Example:-

<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,
released in 2008.</p>
</article>

<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>

<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>

<section> tag

  • Defines a section in the document

Example:-


<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

<article> tag

  • The article tag defines an independent self-content, distributable on its own. Examples: news, events, comments.

Example:-


<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

<aside> tag

  • The aside tag defines side notes on the surrounding contents.

Example:-


<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<details> tag

  • Defines a collapsible section in a document that is hidden by default.

Example:-


<details>
<summary>Copyright 1999-2018.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<dialog> tag

  • Defines a dialog box on the screen.

Example:-


<table>
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>

<summary> tag

  • Defines a collapsible text in a details tag.

Example:-


<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<data> tag

  • Gives a machine-intelligible version for a human-readable data.

Example:-


<ul>
<li><data value="21053">Cherry Tomato</data></li>
<li><data value="21054">Beef Tomato</data></li>
<li><data value="21055">Snack Tomato</data></li>
</ul>

Meta Info

<head> tag

  • Carries information about the html document.
  • Can carry the title, scripts or links to styles.
  • Can be omitted in HTML 5.

Example:-


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document……
</body>

</html>

<meta> tag

  • Defines meta information about a document to be parsed by machines.

Example:-


<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<base> tag

  • Defines the base url for all relative urls on the source of the page.

Example:-


<head>
<base href="https://www.w3schools.com/images/" target="_blank">
</head>

<body>
<img src=”stickman.gif” width=”24″ height=”39″ alt=”Stickman”>
<a href=”https://www.w3schools.com”>W3Schools</a>
</body>

Programming

<script> tag

  • Used to define scripting elements using JavaScript.
  • JavaScript is a client-side code used for such things as manipulating HTML elements and form validations.
  • Script can be either be to an internal or external file.

Example:-


<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript> tag

  • Gets displayed to users with no support for JavaScript or who disabled JavaScript in their browsers.

Example:-


<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

<embed> tag

  • Used as a container for non-html components.

Example:-


<embed src="helloworld.swf">

<object> tag

  • Defines an embedded object

Example:-


<object width="400" height="400" data="helloworld.swf"></object>

<param> tag

  • Defines parameter of an object

Example:-


<object data="horse.wav">
<param name="autoplay" value="true">
</object>

References

https://www.w3schools.com/

https://developer.mozilla.org/

https://stackoverflow.com/

Front-End Tutorial 3 – Level 0

 This tutorial is going to be the first one in developing the BoxiBall game described in details in the previous tutorial. If you are a total beginner in front-end programming, this tutorial has two pre-requisite tutorials necessary for you to watch. Please, search for them on our Facebook page, Google Plus page, LinkedIn page, my own personal page or YouTube Channel. You would be able to find links to all of these here.

 1) Type in the following in a blank text document using your favourite text editor:-

 <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

2) Save the file as BoxyBall.html. Open it using Google Chrome’s latest version.

3) Change the title to: Ball Game.

4) Save the file, refresh the browser and note the effect.

5) Change the body’s content to:

<div>

<div></div>

</div>

6) Save the file.

For more information for the html tags, watch next tutorial which comes as an optional tutorial although it is highly recommended.

Front-end Tutorial 1 – Level 5

The next series of tutorials we will be spending to create the famous snakes games.

These are the functional requirements:-

  • The snake goes on devouring new blocks that increase his size.
  • The more blocks that he devours, the more score that the user will get and the more difficult it would become to manoeuvre on the screen.
  • If the snake hits the side of the screen, game will be over and the snake would be dead.
  •  There are three difficulty levels: Easy, Medium and Hard: the difference being the speed the snake moves.
  • The initial high score is 1000 and as the user plays, the score gets altered with the highest score achieved.

snakes game

New words for you:-

Functional Requirements: These are the requirements that specify how the program/website is supposed to behave. These specify the normal interactions with the website and how the program will respond.

Non-functional Requirements: These are the requirements that the user will not directly see, however, it affects his overall satisfaction in the website. Examples including performance and security.

Front-end Tutorial 1 – Level 0

Build an html document.

  • Open a text editor like notepad, text edit or vi.
  • Copy and paste the following code into it.

<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

  • Name the file: HelloWhatsapp.html. If you are using windows, make sure that it doesn’t rename the file to HelloWhatsapp.html.txt. Make sure that you unhide file extensions in the folder options.

Technical Background: This is HTML 5 syntax

This is HTML structure

Structured as tags. <start-tag></start-tag>. If you don’t end the start tag with the same end tag, browsers will interrogate you!

received_557986761304381

  • Open the file using your favourite internet browser.
  • Change the title to “Hello Whatsapp” and save the file.
  • Note the title change in the browser after you refresh the browser.
  • In the body type in the following:-

<article>

<h1>HTML is boring</h1>

<p> HTML is capable of doing very little on it’s own, without Javascript and CSS</p>

</aricle>

  • Refresh the browser and note the results.

Making a speech bubble with pure CSS

I wanted to make a chat bubble and found many tutorials on how to do it. However, I haven’t found a step by step tutorial to clearly explain the logic behind it. It has taken me a while to figure it out and as Einstein said, “If you can’t explain it to a six year old, you don’t understand it yourself.” The purpose of this tutorial is not to make you through the same pains in order to figure out how a chat bubble is done using pure CSS and HTML.

How to make a triangle

Let us make a square using four borders with different colors:-

This is the code:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
border-width: 20px;
border-bottom-color: orange;
border-top-color: red;
border-left-color: green;
border-right-color: yellow;
min-width: 20px;
min-height: 20px;
border-style: solid;
max-width: 20px;
max-height: 20px;

}
</style>
</head>

<body>
<div class=”square”></div>
</body>

</html>

This is the output:-

border-colors

Note how borders interlace. You could almost spot a triangle or a polygon. There is a red polygon, green polygon, yellow polygon and an orange polygon.

Now, let us try to turn width into 0. This is the code:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
border-width: 20px;
border-bottom-color: orange;
border-top-color: red;
border-left-color: green;
border-right-color: yellow;

border-style: solid;
width: 0;

}
</style>
</head>

<body>
<div class=”square”></div>
</body>

</html>

And this is the output:-

Untitled

And you can see four triangles: red triangle, green triangle, yellow triangle and an orange triangle.

Now we will only keep the red triangle:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
border-width: 20px;
border-bottom-color: transparent;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;

border-style: solid;
width: 0;

}
</style>
</head>

<body>
<div class=”square”></div>
</body>

</html>

And this is the output:-

red-triangle

Now, let us create a square and put our triangle code in the after. Our code would look like this:-

<!DOCTYPE html>
<html>
<head>
<style>
.square {
background-color: red;
color: white;
font-size: 22;
width: 400px;
}
.square:after {
content:””;
border-width: 20px;
border-bottom-color: transparent;
border-top-color: red;
border-left-color: transparent;
border-right-color: transparent;

border-style: solid;
width: 0;

}
</style>
</head>

<body>
<div class=”square”>Hello Bubble Box World!</div>
</body>

</html>

And our output would look like this:-

Bubble Box

 

Thanks for reading. Please, do not bother to create comments that contain advertisements. I am not going to publish them.  Cheers :)

Twenty First world

Google find new websites in a matter of few hours after their creation sometimes. Google then makes a list of all popular keywords that people search for in Google Adwords so that people are encouraged to buy dot coms’. Sites like GoDaddy sell domain names at a very cheap price. WordPress can make websites within few  minutes without the need of designer or developer. One can lean on web hosting so he doesn’t have to own his own hardware resources at a very cheap price. Sites like Stack Overflow encourage very rough competition for answering questions that one can find sound answers within few minutes after a question was posted sometimes. It seams like an option whether or not you want to get engaged in an online community but it is not an option nowadays. The gap between you and the internet world is increasing every moment you don’t engage yourself in it. The whole world is getting digitized and you must engage yourself in an online community because your very survival depends on it. No matter how old or young you are, you cannot turn your back to the internet world.

Youtube world have made an enormous wealth of information available to all kinds of people with all amounts of knowledge and information and one has only to catch this change. These people who are broadcasting information on Youtube are people wanting to get famous, rich or get hired. Being famous is no longer tied to the selected and lucky few who can get themselves on TV. Nowadays, one doesn’t have to be on TV to get known and famous. This even affected the Movie and TV market adversely. All one wants to get visible is to have an internet cable,  PC and a digital video camera. One would tend to think that getting visible had became easier this way. On the contrary, it had became harder as the competition had become much fiercer than ever it was  before.

There had been a drastic change in Today’s world when compared to the world twenty or thirty years ago. This change had left many people clueless and jobless. Primary change had been on internet and information sharing. This totally changed the form of media and how to expose yourself to the employment market and to the world in general. Bachelor degree in any field is meaningless nowadays, because anyone can get the same amount of information and more if he engages himself in online discussions and forums.

 

Team Leadership – Basic Guidelines

I had been a good technical developer for a good portion of my career until I became a technical team leader and a senior team member. This transition was not a smooth one for me for the fact that leadership was a new concept to me. It is like the transition that one has to undertake first time he drives a car and he realizes that everything that he took for granted doesn’t exist anymore. He does not know for instance that his decisions on the road determines whether or not he and the rest of the car passengers arrive safely home. This blog entry is based on my experience because when you are a senior team member of team-leader, you need some basic “driving skills” that determines the safety of your team members and sometimes, the future of your company. So, you can imagine what kind of responsibility falls on your shoulders. This is why you have to be more proactive, more alert and I will convey you some basic guidelines that I learned the hard way.

1) Defend your team members. Your team members need your support and protection. Convey a positive image for them in front of the customer and do not fight against them. You want to build a team and you have to lead by example. Otherwise, your team gets broken and once you don’t have a team, you can forget about the success of the project.

2) Be honest in conveying problems to the project manager and the rest of your team. Don’t be brutally honest, but state facts as you are. Don’t convey personal comments and make it a habit to disturb everybody’s sweet dreams. There are so many projects that failed because the team-leader failed raise the red alert. Raise as many red alerts as you want but not to the point as to make people discouraged to work. Give people around you hope that this can work if only we can do this even if you are not so sure!

3) Stay focused on technical problems. Scope issues should be covered by project manager. You do your work, and let the project manager do his work. Don’t try to over-discuss with the customer or with the project manager whether this is in scope or should we do this or not? It reflects that you are not able to do it. As a technical team-leader, you get judged on whether or not you are able to solve technical problems.

4) Take ownership. Be in charge. Don’t try to hide away when it feels like the ship is sinking. If you hide, everybody in your team starts hiding and you lose your fighting edge. Customers like it when they can see that you are in charge and it feels to them that you are able to solve the problem. If they have this hope, they would be willing to extend the deadline and co-operate with you. If you are escaping they start attacking you.

5) Customers are the ones who pay money and they like to feel this way. Customers would like to feel that they are special, do not treat them as if they are a part of your team. Give them this extra respect and show them that you are there to make their wishes come true. Of course, real life is different, but they like to feel this way.

6) Stay focused. Be focused and don’t scatter your and your team’s efforts. Have this laser-focus on whatever you want to accomplish and never leave behind loose ends. Loose ends are going to hunt you later on. Have this determination to get rid of problems and pains.

7) Keep a friendly attitude. Don’t be bossy. Don’t make your team members that you don’t listen to your ideas and that you have the upper hand over them. Be nice to them and accept their ideas and then put your final touches. Don’t make everybody constrained and incapable to put his input in the project. Take two steps back and accept everybody’s faults and never expose their downfalls. Encourage them to talk, speak and have some say in the project.

8) Appreciate the efforts of good team members. Be sure to promote the superior team members, this gives them always the incentive to put more efforts into the project. Don’t be afraid to disturb the team members that are not performing as well. They would be encouraged when they see the rewards.

9) Don’t expect the perfect atmosphere. This is real life, so don’t follow theories. When you are working as a technical team leader, your position is based not just on your technical skills, it is based also on your political skills. Try to be creative in solving the problems without expecting the perfect work environment. Don’t make it a habit to dictate to the customer how they are supposed to think and what they are supposed to do. Don’t criticize the customers because they are not knowledgeable technically.

10) Always, defend your company. You can have so many internal problems with your company, but you are coming to the customer as a company’s representative and your customer is looking at you as if you are the company. Do not convey the internal problems that you have in your company to the customer.

Date Conversion from Arabic to English in IBM WCM

When you display the dates, it get displayed according to the locales. For example, 8/7/2005 06:15:33 will be ٨/٧/٢٠٠٥   ٠٦:١٥:٣٣ for Arabic locale.  This is usually not a problem except when you use the date in a script like an event calendar that only understands English numbers. In this case, it becomes an issue since you want the date to be in English. I ran into this problem several times, so I expect that you could face it too. To counteract this problem in IBM WCM 7.0, 8.0 and 8.5, you can use the below code

[Plugin:Matches pattern=”en(.*)” text=”[Plugin:Locale]”][Element context=”autofill” type=”content” key=”End” format=”MM/dd/yyyy hh:mm:ss”][/Plugin:Matches][Plugin:Matches pattern=”ar(.*)” text=”[Plugin:Locale]”][Plugin:Matches pattern=”(.)(.)/(.)(.)/(.)(.)(.)(.) (.)(.):(.)(.):(.)(.)” text=”[Element context=’autofill’ type=’content’ key=’End’ format=’MM/dd/yyyy hh:mm:ss’]”][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’1′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’1′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’1′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’1′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’1′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’1′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’1′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’1′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’1′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’1′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’2′]”]0/[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’2′]”]1/[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’2′]”]2/[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’2′]”]3/[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’2′]”]4/[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’2′]”]5/[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’2′]”]6/[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’2′]”]7/[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’2′]”]8/[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’2′]”]9/[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’3′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’3′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’3′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’3′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’3′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’3′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’3′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’3′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’3′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’3′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’4′]”]0/[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’4′]”]1/[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’4′]”]2/[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’4′]”]3/[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’4′]”]4/[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’4′]”]5/[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’4′]”]6/[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’4′]”]7/[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’4′]”]8/[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’4′]”]9/[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’5′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’5′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’5′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’5′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’5′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’5′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’5′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’5′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’5′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’5′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’6′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’6′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’6′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’6′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’6′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’6′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’6′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’6′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’6′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’6′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’7′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’7′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’7′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’7′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’7′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’7′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’7′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’7′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’7′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’7′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’8′]”]0 [/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’8′]”]1 [/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’8′]”]2 [/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’8′]”]3 [/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’8′]”]4 [/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’8′]”]5 [/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’8′]”]6 [/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’8′]”]7 [/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’8′]”]8 [/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’8′]”]9 [/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’9′]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’9′]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’9′]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’9′]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’9′]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’9′]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’9′]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’9′]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’9′]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’9′]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’10’]”]0:[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’10’]”]1:[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’10’]”]2:[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’10’]”]3:[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’10’]”]4:[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’10’]”]5:[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’10’]”]6:[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’10’]”]7:[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’10’]”]8:[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’10’]”]9:[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’11’]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’11’]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’11’]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’11’]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’11’]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’11’]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’11’]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’11’]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’11’]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’11’]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’12’]”]0:[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’12’]”]1:[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’12’]”]2:[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’12’]”]3:[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’12’]”]4:[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’12’]”]5:[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’12’]”]6:[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’12’]”]7:[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’12’]”]8:[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’12’]”]9:[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’13’]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’13’]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’13’]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’13’]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’13’]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’13’]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’13’]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’13’]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’13’]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’13’]”]9[/Plugin:Equals][Plugin:Equals text2=”٠” text1=”[Plugin:MatchedGroup group=’14’]”]0[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’14’]”]1[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’14’]”]2[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’14’]”]3[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’14’]”]4[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’14’]”]5[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’14’]”]6[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’14’]”]7[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’14’]”]8[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’14’]”]9[/Plugin:Equals][/Plugin:Matches]

This code looks complicated, but it is quite easy to understand. Once you follow the logic, it becomes very simple. You take as the input, the date field and you match it against the pattern which is the same pattern as the date field. (.) in a regular expression means a single character. Then, each character you check the number in Arabic and you put it’s equivalent in English.

As this code is painful to look at and painful to rewrite, put it in an HTML component and reuse it when you want.

One thing to note that for certain matched groups, you are going to have to add slashes or spaces or you will get only numbers. Something like: 872005061533 which is not what you want.  This is why if you notice, for example for matchedGroup 2 there is a slash after the number.

[Plugin:MatchedGroup group=’2′]”]0/[/Plugin:Equals][Plugin:Equals text2=”١” text1=”[Plugin:MatchedGroup group=’2′]”]1/[/Plugin:Equals][Plugin:Equals text2=”٢” text1=”[Plugin:MatchedGroup group=’2′]”]2/[/Plugin:Equals][Plugin:Equals text2=”٣” text1=”[Plugin:MatchedGroup group=’2′]”]3/[/Plugin:Equals][Plugin:Equals text2=”٤” text1=”[Plugin:MatchedGroup group=’2′]”]4/[/Plugin:Equals][Plugin:Equals text2=”٥” text1=”[Plugin:MatchedGroup group=’2′]”]5/[/Plugin:Equals][Plugin:Equals text2=”٦” text1=”[Plugin:MatchedGroup group=’2′]”]6/[/Plugin:Equals][Plugin:Equals text2=”٧” text1=”[Plugin:MatchedGroup group=’2′]”]7/[/Plugin:Equals][Plugin:Equals text2=”٨” text1=”[Plugin:MatchedGroup group=’2′]”]8/[/Plugin:Equals][Plugin:Equals text2=”٩” text1=”[Plugin:MatchedGroup group=’2′]”]9/[/Plugin:Equals]

This will not work for all formats. It would work only for this format: MM/dd/yyyy hh:mm:ss.

Make sure that your code is in a single line. Multiple lines will cause you a problem in your output as dates are expected to be a single line.

SEO – Technical Details

How do you raise your search ranking? This question often is very important to all businesses as more clicks means more publicity means more money. There are number of factors to consider like the quality of your output which is out of the scope of this blog. This blog focuses mainly on the Technical Aspects of the Search Engine Optimization:-

1) Use a descriptive page title

8-10-2015 7-59-18 PM

 

A descriptive title is very important as user is more inclined to click on a descriptive title rather than a non-descriptive one. This would not increase page ranking directly, but it would help increase the click rate which in turn can increase the page ranking as more users decide to visit and share your website.

2) Use description meta tag:-

<meta name=”descriptioncontent=”A very good description that would show in the search engines”/>

If we don’t have a description, the SEO would take snippets from the page as the description. The user is unlikely to click on it. This would not increase the page ranking directly, but it would help increase the click rate which in turn can increase the page ranking if more users decide to visit and share your website.

3) Use canonical url’s:-

<link rel=”canonicalhref=”http://[your domain name]/page/canonical/url” />

The advantage of canonical urls’ is to make sure that as search engines crawl over the internet, your page ranking is going to increase rather than be divided. Suppose, for example, the search crawler finds http://[your domain name] and in another http://[your domain name]/1. Even if they point to the same page, for the search engines, these are two separate pages and the page ranking is going to be divided and the search engine is going to have multiple copies of the same page. However, if you use canonical urls’, the page ranking is going to go up rather than be divided across multiple urls. So, canonical url’s in this case is very important.

4) Do not use javascript or ajax to write contents to pages. Search Engines are not able to execute these, so, if you use ajax or javascript to write contents to pages, the Search Engines would not be able to read them when they are crawling over the internet.

5) Have a facility to share your contents to social media pages. The more your contents are shared to social media pages. Although there is no evidence that the number of comments and likes increase page rankings, but they help increase publicity and the more your site becomes public, the more likely that your page ranking is going to increase.

6) Make social media pages to advertise your website. Pay special attention to Google Plus.

7) Use Open Graph meta tags. Open Graph meta tags are good tools to customize your social media experience. It tells the social media pages which picture, description and title to use and therefore, makes sharing content to social media pages, better and offer a better publicity. Which translates in turn to a higher pages ranking.

8) If you can afford it, use paid advertisements. Paid advertisements clicks do not increase the page ranking, but they can help make your website in top of the search results. This increases the number of visitors which in turn leads to higher page ranking as more users decide to share your website.

From a technical perspective, these are the most important factors to increase your page ranking.