JMJ Training - HTML part 1 : JMJ Training - HTML part 1 Learn Web Page Design Step by Step
Create Your Own Web Site
Help Others
Understand How HTML Works
Discover HTML Limitations
About HTML : About HTML Since 1997, the current HTML Version has been 4.01. For many years, there were no plans to go beyond that version. Recently though, a version 5 has been in the works, but is still under development by the W3C.
The W3C is the World Wide Web Consortium, a group that maintains standards of web design, programming and markup. Their website at http://www.w3.org/ has useful tools for the web site programmer to ensure that all errors have been eliminated from the web page before uploading to a web server on the internet and making the page “live”.
The HTML Validator can show where you need to make changes in your page. It can be found at http://validator.w3.org/. It is the most useful tool right now to you as an HTML language coder. You can also find a CSS Validator there.
HTML is actually a Markup Language, as it's name implies, and NOT a Programming Language.
About HTML - continued : About HTML - continued The main difference between programming and markup is that HTML can not actively make something happen.
HTML gives the page proper form and layout, such as positioning of elements on the page, the font and the size and color of the font used. It can also be used to place and position different elements on the page, like images.
Luckily there are other programming languages that play well together with HTML, and by careful use of these other languages, HTML can be manipulated and displayed according to whatever conditions the web programmer desires.
So, first let's learn HTML, then we can learn other languages that will help interpret what we want and then display the correct HTML according to the conditions we specify. This way, we can get the results we need to make the web site owner (or ourselves) happy.
Technically, we are going to learn XHTML, which has become the standard.
XHTML tags : XHTML tags XHTML markup uses Tags to define areas and elements for position, style and design on the web page. In XHTML, ALL tags MUST have a closing tag (example: Bold Text). Closing tags are identical to Opening tags except for the addition of a slash before the tag name. There are a few “Singleton” tags like
(line break) that have no separate closing tag. XHTML REQUIRES all singleton tags to be closed, like this:
.
What is an HTML File?
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html(preferred) file extension
An HTML file can be created using a simple text editor like Notepad
What is an XHTML File?
XHTML stands for eXtensible HTML, and is the new web standard
The XHTML standard requires well-formed code (i.e.; without mistakes)
My First Web Page : My First Web Page Type (or Copy/Paste) the following in a new Notepad window:
Title of page
This is my first homepage.
Create a new folder on your Desktop named training and save the new Notepad text file as index.html. Make sure you change the .txt to .html when saving the file. Click on your new file to open it in your web browser.
My First Web Page explained1 : My First Web Page explained1 The first line DOCTYPE is required by the W3C specification, we'll ignore that for now, just know that it should appear in every HTML file you create. I believe it’s better to get into using good practices now than learn it later.
All web pages must have the following tags:
,
,
,<body>
<html> defines the page as a web page so the browser will display it properly. The html tags must surround all content with very few exceptions.
The content between the <head> tags has instructions for the browser, search engines like Yahoo and Google, and can load some initialization scripts from other web programming languages.
The <title> tags must fall completely between the <head> tags.
The text between the <title> tags define what is shown at the top of your browser when your page loads.</p><p><strong>My First Web Page explained2 : </strong>My First Web Page explained2 Everything between the <body> tags is what will be displayed on your web page. This is your actual web page content. Everything that you want displayed on your page goes within the <body> tags.
Go ahead, take some time to experiment, and change the title text and the text between the body tags. Just refresh your browser to see the effect of your changes.
Surround your text with the paragraph tag <p></p>.
Also try using these Header tags around some text <h1></h1>. They are used for Headings on your web page and are useful tool for Google and other search engines to find your page. Header tags are h1 through h6.
You are now on your way to becoming an HTML expert!</p><p><strong>Do it with Style : </strong>Do it with Style HTML tags have Attributes that further define the content in between, such as <body bgcolor='#AACCAA'>. Try the bgcolor attribute in your test file.
Web Colors are in RGB format and begin with the # character. The first pair of numbers are the RED value, the second pair represent GREEN, and the third pair is the BLUE value. The numbers are in Hexadecimal(base16) format, 0-15, using letters to represent 10-15. So you have 0-9, then A-F as possible values. You can find charts of web colors on the internet, or experiment by changing the numbers and refreshing your page.
Now with that said, there is a better way to do attributes than define each attribute within each tag, called CSS(Cascading Style Sheets). It is worth learning right alongside with HTML, as it can help keep your coding practices more disciplined from the start.
One more way to use CSS is “inline” styles: <p style=”color:#9999CC;”>.</p><p><strong>CSS (Cascading Style Sheets)? : </strong>CSS (Cascading Style Sheets)? With CSS, the style for each tag can be defined once for the whole page, then the same style sheet can be used for every page on your web site so they are consistent, saving you a lot of time coding.
Example: set your <p>(paragragh) tag to have an indent on the first line, use a certain font family, font size, and font color. Then, each time you use <p> tags in your page, it will automatically define the content to match the CSS.
There are three ways to use Style Sheets. The first is to use the <style> tag in between the <head> tags of each page, but you still would have to repeat the same information on each individual web page. The second way is “inline”.
The third method, which is far superior to the others, is to create all your CSS in another file, then link to that file in the <head> of each page as follows:
<link rel="stylesheet" href="myfile.css" type="text/css"> Add this to test1.html</p><p><strong>CSS continued1 : </strong>CSS continued1 You can create your CSS file in Notepad as well, but I use a CSS editor that helps by showing all the possible attributes, so you don't have to remember every possibility, just get right to the options you want. You must save your CSS file in the same folder or directory as the HTML file that calls it. If you decide to put it in another folder, you must change the “href=” attribute to point to the css file's directory, such as href=”css/myfile.css” with “css”being the name of a folder in the same directory as your html file.
There is a great free CSS editor called Topstyle Lite available from http://www.newsgator.com/Individuals/TopStyle/Default.aspx - scroll to the bottom of the page and click on the Download Topstyle Lite link. I highly recommend you get it now and use it side by side with these lessons. CSS is quickly becoming part of the W3C standard due to its great flexibility. The more you learn about it now, the less will be your learning curve when it will be required.</p><p><strong>CSS continued2 : </strong>CSS continued2 Using either Notepad or Topstyle Lite, create a CSS file using the following info and save it as my.css in the same folder as your HTML file.
body {
background: #AAFFAA;
}
p {
text-indent: 10px;
color: #FF0000;
font: bold 16pt Verdana;
}
Make sure you remove the “bgcolor” attribute in your test file, surround some text with <p> tags and refresh the browser to see the result. Then change the attributes in your CSS file, resave it and refresh your browser.</p><p><strong>Back to HTML : </strong>Back to HTML So much for CSS for now, but at least when I mention it now, you will understand what I'm talking about. At this point, review any previous portion of these lessons that you don't fully understand. Play around with your test file. Add more text, with and without <p> tags to see the effects, like the following:
<p>This is the first paragraph</p>
This is text in-between.
This is more text in between.
And even more text.
<p>Another very interesting paragraph, blah blah blah...</p>
Did you notice something? Without the <p> tag, all of your text will string together on the same line, even when you put it on separate lines. There are times when you want to force a “line break” which moves the next line down.</p><p><strong><br />eaking up is easy to do : </strong><br />eaking up is easy to do The <br /> tag is a Singleton tag - there is no corresponding ending tag. Just put it anywhere you want your text to go to the next line. Try the lines below in your test file.
How<br />many<br />times<br /><br />
do you think I will use it?<br />
There's not much else to say about the break tag, except that all Singleton tags must be closed (<br /> instead of <br>) in XHTML and probably in the new HTML 5 specification as well. BUT, make sure your DOCTYPE declaration at the top of your coded page reflects how you actually code the page. Deprecated attributes are attributes that will be (or are) dropped from future specifications. By using a Transitional Doctype declaration, you would force the browser to be okay with using them in our web page. If we use a deprecated attribute with a Doctype declaration that doesn't support it, the web page may display differently. That’s why I thought it best to begin with a Strict Doctype declaraction. We will learn best practices from day 1.</p><p><strong><hr /> : </strong><hr /> Before I go any further, I will take a minute to speak on capitalization. You may see sites with ALL tags in CAPS. This is for human use only. Actually, in the XHTML, lower case tags are REQUIRED, so it is another habit that is best to start getting used to before you get into a routine that becomes Deprecated, ALWAYS USE LOWER CASE FOR ALL HTML TAGS. Thank you.
Sometimes you will want to separate one section of a page from another. Here's where the Horizontal Rule tag comes in. It is our second Singleton tag.
Test out the <hr /> tag in your test HTML file - remember to save the file before refreshing your browser to see the effect of your changes. There are two attributes that I find most useful for <hr />. They are color and width. We will add all attributes either in our CSS file or “inline”. I mentioned inline styles briefly earlier. So <hr /> using an inline style looks like this:
<hr style=”width:80%;color:#0000FF;” />. Width can be a percentage or a set amount in pixels. The percentage will change with the browser window size.</p><p><strong>More About CSS : </strong>More About CSS Aside from consistency between different pages on your web site, I think you can see how much cleaner your HTML code will be if you stick with using the CSS file for most attributes. CSS becomes even more powerful when you use the CLASS or ID tag attributes. We will focus on the CLASS tag attribute for now. You can put the <hr /> code in the previous example in your CSS file to style all hrs, BUT maybe you want to use another <hr /> tag with different attributes later on your page. You will then add the class attribute to your HTML tag, and create a corresponding class in your CSS file.
To create a class in your CSS file, use a dot before the class name, which can be just about anything except another tag name. Make it make sense to the web site. Example: in your CSS file, add the following lines:
.rule1 {
width:200px;color:#993333; Then in your HTML:
} <hr class=‘rule1'></p><p><strong><div> vs <table> : </strong><div> vs <table> <div>s can be used to divide your web page into sections. With the advent of the popularity CSS and XHTML, I now whole-heartedly recommend that divs should be used for page layout instead of tables due to problems with the way older browsers sometimes display tables differently. There are times, however, when a table comes in very handy to display data in a formatted way, which was the table’s original purpose anyway.
Each area of your site can use a div combined with a CSS class to make it unique to that portion of your site. Use a div to assign a certain attribute to a section of a web site, and group everything within that div to have a certain font size or color, like a navigation area, for example.
The <table> tag is a little more complicated, and is for formatting sections into rows and columns. The <table> tag requires other tags within it. See the next page for a typical table layout.</p><p><strong><table> manners : </strong><table> manners <table>
<tr>
<td></td>
</tr>
</table>
These are the minimal tags you need to create a table. There are table rows <tr> within every table. Within each row you find table data <td>.
There can be many rows within a table, and multiple data columns within each row.
Within a table, every row must contain the same amount of <td> columns. That being said, you can override this with a colspan or rowspan attribute.
Copy the code on the next page to your test HTML page to see how it works.</p><p><strong><table> manners continued : </strong><table> manners continued <table style=“border:1px solid #000000;width:600px;background:#00FF00;”>
<tr>
<td rowspan=“2” style=“background:#FFFF00;”>data here<br />is 2 rows</td>
<td style=“background:#00FFFF;”>data 1</td>
<td style=“background:#0000FF;”>data 2</td>
</tr>
<tr>
<td colspan=“2” style=“background:#0000FF;”>data 3:2 columns</td>
</tr>
</table>
Note that there is only one <td> in the second <tr>. This is accounted for by the first <td> from the first <tr> covering the first <td> in the second <tr> by using the rowspan attribute, then the single <td> covers the second and third <td>s in the second <tr> by using the colspan attribute.</p><p><strong>Check out Lesson 2 for More! : </strong>Check out Lesson 2 for More! More about Tables
More HTML tags
Advanced CSS Styling
Linking separate CSS files
Learn More Now!!!</p></div>
</div>
</div>
<!-- Right -->
<div id="rightcontent_s" class="margintop">
<div class="contenthomerighttop" style="margin-bottom: 15px; float: left;width:260px">
<h2>
<a href="http://www.wiziq.com/Sign_In.aspx?ReturnUrl=Content/upload_Content.aspx" id="HrefUploadContent" rel="nofollow">Upload Content</a>
</h2>
<span class="link_sep">|</span>
<h2>
<a href="http://www.wiziq.com/Content/EmbedContent.aspx" rel="nofollow">Embed Content</a>
</h2>
</div>
<div id="dvCourseWidgetSignUp" style="float: left; margin-bottom: 20px;">
<style type="text/css">
.txtbx-disable{border: 1px solid #B8CBD9;float: left;padding: 4px 3px 4px 13px;width: 40px;}
.countrybx{border: solid 1px #b8cbd9;padding: 4px 3px;width: 50px;font-family: Tahoma, Geneva, sans-serif;font-size: 12px;}
.countrybx-errbdr{border: solid 1px #CD5250;padding: 4px 3px;width: 50px;font-family: Tahoma, Geneva, sans-serif;font-size: 12px;}
.error_bdr{border: solid 1px #CD5250;}
</style>
<div class="formouter">
<p class="heading">
Want to learn?</p>
<p class="fnt14">
Sign up and browse through relevant courses.</p>
<div class="form2">
<div class="error_msgdv" style="margin-top: 0px;">
<span class="left-form1"></span><span id="ucRegistrationWidget_spnAlert" class="errmsg" style="display: none;"></span>
</div>
<div class="mzero">
<span class="left-form1">
Name:</span><br />
<span>
<input name="ucRegistrationWidget$txtName" type="text" maxlength="50" id="ucRegistrationWidget_txtName" tabindex="1" class="laninput1" onblur="ValidateName(false);" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { if(ValidateSignUpForm() == true){__doPostBack('ucRegistrationWidget$btnAction',''); } return false; }} else {return true}; " />
</span>
</div>
<div>
<span class="left-form1">
Your Email:</span><br />
<span>
<input name="ucRegistrationWidget$txtEmail" type="text" maxlength="50" id="ucRegistrationWidget_txtEmail" tabindex="2" class="laninput1" onblur="ValidateEmail(false);" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { if(ValidateSignUpForm() == true){__doPostBack('ucRegistrationWidget$btnAction',''); } return false; }} else {return true}; " />
</span>
</div>
<div>
<span class="left-form1">
Password:</span><br />
<span>
<input name="ucRegistrationWidget$txtPassword" type="password" maxlength="15" id="ucRegistrationWidget_txtPassword" tabindex="3" class="laninput1" onblur="ValidatePassword(false);" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { if(ValidateSignUpForm() == true){__doPostBack('ucRegistrationWidget$btnAction',''); } return false; }} else {return true}; " />
</span>
</div>
<div>
<span class="left-form1">
Country:</span><br />
<span>
<select name="ucRegistrationWidget$ddlCountry" id="ucRegistrationWidget_ddlCountry" tabindex="4" class="landrop1" onChange="changeCountryCode();" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { if(ValidateSignUpForm() == true){__doPostBack('ucRegistrationWidget$btnAction',''); } return false; }} else {return true}; ">
<option value="-1">[Select]</option>
<option selected="selected" value="176">United States</option>
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">Angola</option>
<option value="5">Antigua and Barbuda</option>
<option value="6">Argentina</option>
<option value="7">Armenia</option>
<option value="8">Australia</option>
<option value="9">Austria</option>
<option value="10">Azerbaijan</option>
<option value="11">Bahamas</option>
<option value="12">Bahrain</option>
<option value="13">Bangladesh</option>
<option value="14">Barbados</option>
<option value="15">Belarus</option>
<option value="16">Belgium</option>
<option value="17">Belize</option>
<option value="190">Benin</option>
<option value="200">Bermuda</option>
<option value="18">Bhutan</option>
<option value="19">Bolivia</option>
<option value="207">Bosnia and Herzegovina</option>
<option value="21">Botswana</option>
<option value="22">Brazil</option>
<option value="23">Brunei</option>
<option value="24">Bulgaria</option>
<option value="210">Burkina Faso</option>
<option value="25">Burundi</option>
<option value="26">Cambodia</option>
<option value="27">Cameroon</option>
<option value="28">Canada</option>
<option value="212">Cape verde</option>
<option value="204">Caribbean Nations</option>
<option value="29">Central African Republic</option>
<option value="30">Chad</option>
<option value="31">Chile</option>
<option value="32">China</option>
<option value="33">Colombia</option>
<option value="34">Congo (Brazzaville)</option>
<option value="35">Congo, Democratic Republic of</option>
<option value="196">Cook Islands</option>
<option value="36">Costa Rica</option>
<option value="37">Croatia</option>
<option value="38">Cuba</option>
<option value="39">Cyprus</option>
<option value="40">Czech Republic</option>
<option value="41">Denmark</option>
<option value="42">Djibouti</option>
<option value="43">Dominica</option>
<option value="44">Dominican Republic</option>
<option value="45">Ecuador</option>
<option value="46">Egypt</option>
<option value="47">El Salvador</option>
<option value="48">Equatorial Guinea</option>
<option value="49">Eritrea</option>
<option value="50">Estonia</option>
<option value="51">Ethiopia</option>
<option value="201">Faroe Islands</option>
<option value="202">Federated States of Micronesia</option>
<option value="52">Fiji</option>
<option value="53">Finland</option>
<option value="54">France</option>
<option value="197">French Polynesia</option>
<option value="55">Gabon</option>
<option value="56">Gambia</option>
<option value="57">Georgia</option>
<option value="58">Germany</option>
<option value="59">Ghana</option>
<option value="193">Gibraltar</option>
<option value="60">Greece</option>
<option value="206">Greenland</option>
<option value="61">Grenada</option>
<option value="62">Guatemala</option>
<option value="63">Guinea</option>
<option value="64">Guinea-Bissau</option>
<option value="65">Guyana</option>
<option value="66">Haiti</option>
<option value="67">Honduras</option>
<option value="191">Hong Kong</option>
<option value="68">Hungary</option>
<option value="69">Iceland</option>
<option value="70">India</option>
<option value="71">Indonesia</option>
<option value="72">Iran</option>
<option value="73">Iraq</option>
<option value="74">Ireland</option>
<option value="75">Israel</option>
<option value="76">Italy</option>
<option value="209">Ivory Coast</option>
<option value="77">Jamaica</option>
<option value="78">Japan</option>
<option value="79">Jordan</option>
<option value="80">Kazakhstan</option>
<option value="81">Kenya</option>
<option value="82">Kiribati</option>
<option value="83">Korea - North</option>
<option value="84">Korea - South</option>
<option value="85">Kuwait</option>
<option value="86">Kyrgyzstan</option>
<option value="87">Laos</option>
<option value="88">Latvia</option>
<option value="89">Lebanon</option>
<option value="90">Lesotho</option>
<option value="91">Liberia</option>
<option value="92">Libya</option>
<option value="93">Liechtenstein</option>
<option value="94">Lithuania</option>
<option value="95">Luxembourg</option>
<option value="96">Macedonia</option>
<option value="97">Madagascar</option>
<option value="98">Malawi</option>
<option value="99">Malaysia</option>
<option value="100">Maldives</option>
<option value="101">Mali</option>
<option value="102">Malta</option>
<option value="103">Marshall Islands</option>
<option value="104">Mauritania</option>
<option value="105">Mauritius</option>
<option value="106">Mexico</option>
<option value="107">Micronesia, Federated States of</option>
<option value="108">Moldova</option>
<option value="109">Monaco</option>
<option value="110">Mongolia</option>
<option value="185">Montenegro</option>
<option value="111">Morocco</option>
<option value="112">Mozambique</option>
<option value="113">Myanmar</option>
<option value="114">Namibia</option>
<option value="115">Nauru</option>
<option value="116">Nepal</option>
<option value="117">Netherlands</option>
<option value="188">Netherlands Antilles</option>
<option value="118">New Zealand</option>
<option value="119">Nicaragua</option>
<option value="120">Niger</option>
<option value="121">Nigeria</option>
<option value="122">Norway</option>
<option value="123">Oman</option>
<option value="124">Pakistan</option>
<option value="125">Palau</option>
<option value="126">Panama</option>
<option value="127">Papua New Guinea</option>
<option value="128">Paraguay</option>
<option value="129">Peru</option>
<option value="130">Philippines</option>
<option value="131">Poland</option>
<option value="132">Portugal</option>
<option value="208">Puerto Rico</option>
<option value="133">Qatar</option>
<option value="134">Romania</option>
<option value="135">Russia</option>
<option value="205">Russian Federation</option>
<option value="136">Rwanda</option>
<option value="137">Saint Kitts and Nevis</option>
<option value="138">Saint Lucia</option>
<option value="139">Saint Vincent and the Grenadines</option>
<option value="140">Samoa</option>
<option value="141">San Marino</option>
<option value="142">Sao Tome and Principe</option>
<option value="143">Saudi Arabia</option>
<option value="211">Scotland</option>
<option value="144">Senegal</option>
<option value="199">Serbia</option>
<option value="145">Seychelles</option>
<option value="146">Sierra Leone</option>
<option value="147">Singapore</option>
<option value="192">Slovak Republic</option>
<option value="148">Slovakia</option>
<option value="149">Slovenia</option>
<option value="150">Solomon Islands</option>
<option value="151">Somalia</option>
<option value="152">South Africa</option>
<option value="153">Spain</option>
<option value="154">Sri Lanka</option>
<option value="155">Sudan</option>
<option value="195">Sultanate of Oman</option>
<option value="156">Suriname</option>
<option value="157">Swaziland</option>
<option value="158">Sweden</option>
<option value="159">Switzerland</option>
<option value="160">Syria</option>
<option value="161">Taiwan</option>
<option value="162">Tajikistan</option>
<option value="163">Tanzania</option>
<option value="164">Thailand</option>
<option value="198">Timor-Leste</option>
<option value="165">Togo</option>
<option value="166">Tonga</option>
<option value="167">Trinidad and Tobago</option>
<option value="168">Tunisia</option>
<option value="169">Turkey</option>
<option value="170">Turkmenistan</option>
<option value="171">Tuvalu</option>
<option value="172">Uganda</option>
<option value="173">Ukraine</option>
<option value="174">United Arab Emirates</option>
<option value="175">United Kingdom</option>
<option value="177">Uruguay</option>
<option value="178">Uzbekistan</option>
<option value="179">Vanuatu</option>
<option value="180">Vatican City</option>
<option value="181">Venezuela</option>
<option value="189">Viet Nam</option>
<option value="183">Western Sahara</option>
<option value="184">Yemen</option>
<option value="186">Zambia</option>
<option value="187">Zimbabwe</option>
</select>
</span>
</div>
<div>
<span class="left-form1">
Contact no:</span><br>
<span>
<label for="mobile">
<input id="ucRegistrationWidget_rdMobile" type="radio" name="ucRegistrationWidget$ContactNo" value="rdMobile" checked="checked" onclick="SetMobileCountryCode();" tabindex="5" />
Mobile
</label>
<label for="landline" style="margin-left: 10px">
<input id="ucRegistrationWidget_rdLandline" type="radio" name="ucRegistrationWidget$ContactNo" value="rdLandline" checked="checked" onclick="SetLandlineCountryCode();" tabindex="6" />
Landline
</label>
<br>
<span class="mt5"><span>
<input name="ucRegistrationWidget$txtMobCountry" type="text" maxlength="5" id="ucRegistrationWidget_txtMobCountry" tabindex="7" class="countrybx" onblur="ValidateMobileCountry(false);" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { if(ValidateSignUpForm() == true){__doPostBack('ucRegistrationWidget$btnAction',''); } return false; }} else {return true}; " />
<input type="hidden" name="ucRegistrationWidget$hdnCountryCode" id="ucRegistrationWidget_hdnCountryCode" value="1" />
</span><span class="ml10">
<input name="ucRegistrationWidget$txtMobileNo" type="text" maxlength="15" id="ucRegistrationWidget_txtMobileNo" tabindex="8" class="laninput1" onblur="ValidateMobileNumber(false);" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { if(ValidateSignUpForm() == true){__doPostBack('ucRegistrationWidget$btnAction',''); } return false; }} else {return true}; " />
</span></span>
<br>
<span><span id="ucRegistrationWidget_spnCountryCodeTxt" class="txtland" style="width: 70px;">Area code</span><span class="txtland">
Number</span></span></span></div>
<div>
<span class="left-form1">
Subjects you are interested in:</span><br />
<span><span id="spnTxtOtherSubjects" style="display: none;">
<input name="ucRegistrationWidget$txtSubjects" type="text" maxlength="100" id="ucRegistrationWidget_txtSubjects" tabindex="9" class="laninput1" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { if(ValidateSignUpForm() == true){__doPostBack('ucRegistrationWidget$btnAction',''); } return false; }} else {return true}; " />
<br />
<a href="javascript:ShowSubjectsDropdown();" class="link11" rel="nofollow">
Back to select subject
</a></span><span id="spnSubjectsInterested">
<select name="ucRegistrationWidget$ddlSubjectsInterested" id="ucRegistrationWidget_ddlSubjectsInterested" tabindex="9" class="landrop1" onchange="SelectSubject();" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { if(ValidateSignUpForm() == true){__doPostBack('ucRegistrationWidget$btnAction',''); } return false; }} else {return true}; ">
<option value="-1">[Select]</option>
<option value="4">GRE</option>
<option value="5">GMAT</option>
<option value="6">SAT/CAT</option>
<option value="7">Programming/Internet</option>
<option value="8">Spoken English</option>
<option value="9">Spanish Language</option>
<option value="10">Others</option>
</select>
</span>
<input name="ucRegistrationWidget$hdnSubjectType" type="hidden" id="ucRegistrationWidget_hdnSubjectType" value="1" />
</span>
</div>
<div>
<span class="left-form1">
Word verification:</span> <span><span style="width: 132px; float: left">
<input name="ucRegistrationWidget$txtCaptcha" type="text" maxlength="4" id="ucRegistrationWidget_txtCaptcha" tabindex="10" class="laninput1" onblur="ValidateCaptchaCode(false);" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) { if(ValidateSignUpForm() == true){__doPostBack('ucRegistrationWidget$btnAction',''); } return false; }} else {return true}; " style="width: 125px;" />
<span class="txtland">(Enter the text as in image)</span> </span>
<span style="float: left; margin-top: -15px">
<div><span style='margin:5px;float:left;'><img src="CaptchaImage.aspx?guid=5314a3ea-af5c-4aa4-a52c-c884ce2676ee&cc=GAH8" border='0' width=80 height=31></span><br clear='all'></div>
</span>
<br />
</span>
</div>
<div>
<span class="left-form1"></span><span>
<a onclick="return ValidateSignUpForm();" id="ucRegistrationWidget_btnAction" tabindex="10" class="signbutton" href="javascript:__doPostBack('ucRegistrationWidget$btnAction','')">Sign Up</a>
</span><span style="margin: 7px 0 0 5px">
Already a member? <a href="http://www.wiziq.com/Sign_In.aspx" class="ulink">
Sign In</a></span>
</div>
<div class="lighttxt11" style="border-top: dashed 1px #ccc; padding-top: 7px;">
I agree to WizIQ's
<a href="http://www.wiziq.com/UserAgreement.aspx" target="_blank">
User Agreement</a> & <a href="http://www.wiziq.com/PrivacyPolicy.aspx"
target="_blank">
Privacy Policy</a>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var spnAlert = document.getElementById("ucRegistrationWidget_spnAlert");
var ddlCountry = document.getElementById("ucRegistrationWidget_ddlCountry");
var spnCountryCodeTxt = document.getElementById("ucRegistrationWidget_spnCountryCodeTxt");
var txtCountryCode = document.getElementById("ucRegistrationWidget_txtMobCountry");
var txtMobileNo = document.getElementById("ucRegistrationWidget_txtMobileNo");
var spnSubjectsInterested = document.getElementById('spnSubjectsInterested');
var spnTxtOtherSubjects = document.getElementById('spnTxtOtherSubjects');
var hdnSubjectType = document.getElementById("ucRegistrationWidget_hdnSubjectType");
var ddlSubject = document.getElementById("ucRegistrationWidget_ddlSubjectsInterested");
var countryCode = "1"
var isMoileChecked = IsMobileSelected();
var alertMsg = "";
var classtxtbox = "laninput1";
if (countryCode == "") // get countrycode from hidden var in case of page post back
countryCode = document.getElementById("ucRegistrationWidget_hdnCountryCode").value;
function ValidateSignUpForm()
{
var isValidInfo = false;
var isfocus = true;
var isValidCaptcha = ValidateCaptchaCode(isfocus);
var isValidMobile = ValidateMobileNumber(isfocus);
var isValidMobileCountry = ValidateMobileCountry(isfocus);
var isValidCountry = validateCountry(isfocus);
var isValidPassword = ValidatePassword(isfocus);
var isValidEmail = ValidateEmail(isfocus);
var isValidName = ValidateName(isfocus);
if (isValidCaptcha && isValidMobile && isValidMobileCountry && isValidCountry && isValidPassword && isValidEmail && isValidName)
isValidInfo = true;
return isValidInfo;
}
//Set Object //alert
function SetObjectAlert(obj, alertMsg, isfocus) {
if (isfocus) {
obj.focus();
obj.blur();
obj.focus();
}
spnAlert.style.display = "none";
obj.className = classtxtbox + " error_bdr";
if (trimString(alertMsg) != "") {
spnAlert.style.display = "block";
spnAlert.innerHTML = alertMsg;
}
}
//Validate User Name
function ValidateName(isfocus) {
var isValidName = true;
alertMsg = "none";
var txtName = document.getElementById('ucRegistrationWidget_txtName');
txtName.className = classtxtbox;
if (trimString(txtName.value) != "") {
var iChars = "~#$%^&*()+=[]\';,/{}|\":<>?";
for (var i = 0; i < txtName.value.length; i++) {
if (iChars.indexOf(txtName.value.charAt(i)) != -1) {
isValidName = false;
alertMsg = "Special characters not allowed."
}
}
}
else {
alertMsg = "Please enter your name.";
isValidName = false;
}
if (isValidName) {
if (!isfocus)
spnAlert.innerHTML = "";
}
else
SetObjectAlert(txtName, alertMsg, isfocus);
return isValidName;
}
//Validate User Email
function ValidateEmail(isfocus) {
var isValidEmail = true;
var txtEmail = document.getElementById('ucRegistrationWidget_txtEmail');
txtEmail.className = classtxtbox;
if (trimString(txtEmail.value) != "")
isValidEmail = IsValidEmail(trimString(txtEmail.value));
else
isValidEmail = false;
if (!isValidEmail) {
alertMsg = "Please enter a valid email address.";
SetObjectAlert(txtEmail, alertMsg, isfocus);
}
else {
if(CheckEmailExists(txtEmail, isfocus))
isValidEmail = false;
if (!isValidEmail && !isfocus)
spnAlert.innerHTML = "";
}
return isValidEmail;
}
//Check Regex for User Email
function IsValidEmail(src) {
var emailReg = /^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)+$/;
var regex = new RegExp(emailReg);
return regex.test(src);
}
//Validate User Password
function ValidatePassword(isfocus) {
var isValidPass = true;
var txtPass = document.getElementById("ucRegistrationWidget_txtPassword");
txtPass.className = classtxtbox;
if (trimString(txtPass.value) != "") {
if (txtPass.value.length < 6) {
isValidPass = false;
alertMsg = "Password should be 6 or more characters.";
}
}
else {
alertMsg = "Please enter your password.";
isValidPass = false;
}
if (isValidPass == false)
SetObjectAlert(txtPass, alertMsg, isfocus);
else {
if (!isfocus)
spnAlert.innerHTML = "";
}
return isValidPass;
}
//Validate User Mobile Number
function ValidateMobileNumber(isfocus)
{
var isValidMob = true;
var lengthLimit = 8;
txtMobileNo.className = classtxtbox;
isMoileChecked = IsMobileSelected();
if(!isMoileChecked)
lengthLimit = 6;
//Validate Mobile Number if Mobile Number filled or Area Code filled in case of Landline Selected
if (trimString(txtMobileNo.value) != "" || (trimString(txtCountryCode.value) != "" && !isMoileChecked))
{
if (IsPhoneValid(txtMobileNo.value) == false || (txtMobileNo.value.length < lengthLimit))
isValidMob = false;
}
if (!isValidMob)
{
if (isMoileChecked)
alertMsg = "Please enter a valid mobile number.";
else
alertMsg = "Please enter a valid landline number.";
SetObjectAlert(txtMobileNo, alertMsg, isfocus);
}
else if (!isfocus)
spnAlert.innerHTML = "";
return isValidMob;
}
//Validate Country
function validateCountry(isfocus)
{
var isValidCountry = true;
ddlCountry.className = "landrop1";
if (ddlCountry.value == -1)
{
isValidCountry = false;
alertMsg = "Please select your country.";
SetObjectAlert(ddlCountry, alertMsg, isfocus);
ddlCountry.className = "landrop1 error_bdr";
}
else {
if (!isfocus)
spnAlert.innerHTML = "";
}
return isValidCountry;
}
//Validate Mobile Country
function ValidateMobileCountry(isfocus)
{
var isValidMobCountry = true;
var className = "countrybx";
isMoileChecked = IsMobileSelected();
if(isMoileChecked)
className = "txtbx-disable form-plus-disable";
txtCountryCode.className = className
if (trimString(txtMobileNo.value) != "" || trimString(txtCountryCode.value) != "")
{
if (trimString(txtCountryCode.value) != "")
isValidMobCountry = IsValidMobileCountry(trimString(txtCountryCode.value), isMoileChecked);
else
isValidMobCountry = false;
if (!isValidMobCountry)
{
if (isMoileChecked)
{
alertMsg = "Please enter a valid mobile number.";
className = "txtbx-disable form-plus-disable error_bdr";
}
else
{
alertMsg = "Please enter a valid landline number.";
className = "countrybx-errbdr";
}
SetObjectAlertNew(txtCountryCode, alertMsg, isfocus,className);
}
else if (!isfocus)
spnAlert.innerHTML = "";
}
return isValidMobCountry;
}
//Check Regex for Mobile number
function IsPhoneValid(Number) {
var MobileReg = "^[-+.0-9 ][-+.0-9\-(\s?), ]+[ -+.0-9]$";
var regex = new RegExp(MobileReg);
return regex.test(Number);
}
function IsValidMobileCountry(Code, isMobile)
{
var isValidCountryCode = true;
if(isMobile)
{
var MobileCodeReg = "^[0-9]{1,4}\-?[0-9]{0,4}$";
var regex = new RegExp(MobileCodeReg);
isValidCountryCode = regex.test(trimString(Code));
}
else if(isNaN(Code))
isValidCountryCode = false;
return isValidCountryCode;
}
function ShowSubjectsDropdown()
{
hdnSubjectType.value = "1";
spnSubjectsInterested.style.display = "block";
spnTxtOtherSubjects.style.display = "none";
ddlSubject.value = -1 ;
ddlSubject.focus();
}
function SelectSubject()
{
var ddlSubjectVal = ddlSubject.options[ddlSubject.selectedIndex].text;
if (ddlSubjectVal.toLowerCase() == "others")
{
hdnSubjectType.value = "2";
spnSubjectsInterested.style.display = "none";
spnTxtOtherSubjects.style.display = "block";
document.getElementById('ucRegistrationWidget_txtSubjects').focus();
}
}
function ValidateCaptchaCode(isfocus) {
var txtCaptcha = document.getElementById('ucRegistrationWidget_txtCaptcha');
txtCaptcha.className = classtxtbox;
var isValidCaptcha = true;
if (txtCaptcha && trimString(txtCaptcha.value) == "")
isValidCaptcha = false
if (!isValidCaptcha) {
alertMsg = "Type the characters you see in the image.";
SetObjectAlert(txtCaptcha, alertMsg, isfocus);
}
else {
if (!isfocus)
spnAlert.innerHTML = "";
}
return isValidCaptcha;
}
//have to remove this function bcoz this exists in jquery
function trimString(str) {
str = this != window ? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}
function CheckEmailExists(txtEmail, isfocus) {
var isEmailExists = false;
var j = jQuery.noConflict();
j.ajax({
url: 'http://www.wiziq.com' + '/Action/CheckEmail.aspx',
type: 'GET',
data: 'userid=' + txtEmail.value,
success: function (msg) {
var arrEmail = msg.split("~");
var status = arrEmail[0];
if (status == "False") {
isEmailExists = true;
}
else
SetObjectAlert(txtEmail, arrEmail[1], isfocus);
}
});
return isEmailExists;
}
function SetLandlineCountryCode()
{
txtMobileNo.value = "";
txtCountryCode.value = "";
txtCountryCode.className = "countrybx";
spnCountryCodeTxt.innerHTML = "Area code";
txtCountryCode.disabled = false;
txtCountryCode.focus();
var isValid = ValidateMobileNumber(false);
}
function SetMobileCountryCode()
{
txtMobileNo.value = "";
txtCountryCode.className = "txtbx-disable form-plus-disable" ;
spnCountryCodeTxt.innerHTML= "Country code";
txtCountryCode.value = countryCode;
document.getElementById("ucRegistrationWidget_hdnCountryCode").value = countryCode;
txtCountryCode.disabled = true;
txtMobileNo.focus();
var isValid = ValidateMobileNumber(false);
}
function changeCountryCode()
{
if(validateCountry(false))
{
isMobileChecked = IsMobileSelected();
GetAndSetCountryCode(ddlCountry.options[ddlCountry.selectedIndex].text,isMobileChecked);
}
else
{
txtCountryCode.value = "";
txtCountryCode.className = "countrybx";
}
}
function GetAndSetCountryCode(countryName,isMobileChecked)
{
var t = jQuery.noConflict();
t.ajax({
url: 'http://www.wiziq.com' + '/Action/country-code.aspx',
type: 'POST',
data: 'cname=' + countryName,
success: function (response)
{
countryCode = response;
if(countryCode != "" && isMobileChecked == true)//Set Mobile Country Code
SetMobileCountryCode();
}
});
}
//Set Object //alert
function SetObjectAlertNew(obj, alertMsg, isfocus, className)
{
if (isfocus)
{
obj.focus();
obj.blur();
obj.focus();
}
spnAlert.style.display = "none";
obj.className = className;
if (trimString(alertMsg) != "")
{
spnAlert.style.display = "block";
spnAlert.innerHTML = alertMsg;
}
}
function IsMobileSelected()
{
return document.getElementById("ucRegistrationWidget_rdMobile").checked;
}
switch (parseInt(1))
{
case 1://Focus Action Button
document.getElementById('ucRegistrationWidget_btnAction').focus();
break;
case 2://Focus captcha box
document.getElementById('ucRegistrationWidget_txtCaptcha').focus();
break;
case 3: //Focus Name box
document.getElementById('ucRegistrationWidget_txtName').focus();
break;
default: //Focus email box
document.getElementById('ucRegistrationWidget_btnAction').focus();
break;
}
</script>
</div>
<div class="leftheadingboxextand">
<div class="usercontrol bluedv">
<div class="uploaderimg mimgdv">
<div class="fleft"style="width:185px;">
<strong><a id="MemberControl1_hlnkBy" href="http://www.wiziq.com/markei">Mark Isherwood</a></strong><br /><span id="MemberControl1_spanSubject" style="padding-top: 3px;"></span>
</div>
<div class="fright" style="padding:3px 5px 5px 0px">
</div>
</div>
<div id="MemberControl1_dvStats" class="fleft mcontentdiv" style=" font-size:12px; padding:4px 0px;">
<div id="MemberControl1_dvContent" class="bluetxt11 fleft">
<span class="fleft" style="padding-right:5px; padding-left:10px;"><a href="http://www.wiziq.com/markei/tutorials" id="MemberControl1_HrefContent" title="Public Tutorials by Mark Isherwood">Tutorial</a>:</span>
<span class="fleft"><a href="http://www.wiziq.com/markei/tutorials" id="MemberControl1_HrefContentCount" style="text-decoration:none" title="Public Tutorials by Mark Isherwood"><span id="MemberControl1_lblContent">1</span></a></span>
</div>
<span></span>
</div>
</div>
<div id="MemberControl1_divInvite" class="fnt12 contentdv" style="width:252px; padding:5px 4px;background-color:#DAEDFB; border-top: 1px solid #D2E4F2;">
<div class="fleft">
<div id="MemberControl1_divSend">
<div class="sendmessageicon fleft">
<a href="http://www.wiziq.com/Action/GenericSignUp.aspx?&SetDomain=true&redirecturl=/Content/view_content.aspx?ContentID=53005-Complete-HTML-Training-part-1~sm=y&ModuleObjectId=53005&moduleid=2&keepThis=true&TB_iframe=true&height=410&width=640" id="MemberControl1_hrefSendMessage" rel="nofollow" class="thickbox" style="font-size:11px;">Send message</a>
</div>
<div class="fleft">
<span class="fleft padleft5"><div id="MemberControl1_ucFollow_dvmain" style="display:block; ">
<span id="MemberControl1_ucFollow_spfollow" class="icon_followteacher fleft">
<a href="http://www.wiziq.com/Action/LCSignUp.aspx?method=FollowMemberAction&mval=false&sparams=sVcdujT6kMpUpaa0VSATyO%2bCF7jk3YIDUOtGc3x5BJlN4DjclOGKp9jTSaMcIEEl1mfElehlJpimxZ49STmiF2qh0OSgshEGRZfjEKERa5PzaHOtD4OgFgbm%2fcnDpQMePWbyLh0ZUcLMEJ3aQeLzxpG7igmzl%2fl3MMIUmrhO43GaCviHzoQoNOEIykErqZFJe%2fk5lhyZCLU5U8S4c6M7efl89MpeF%2fLlvPWVXrVHcbiX1o6ka1%2fLww%3d%3d&SetDomain=true&moduleid=54&tId=ioUrEwcdPaKitBgGKC4kE97B7DJZvUiBd2uVvK%2fJjV7peLx5vkdg9ySr5eMxUZYcQpmHt4HAu9qjb00FdZU%2bzg%3d%3d&keepThis=true&TB_iframe=true&height=420&width=410" id="MemberControl1_ucFollow_hrfFollow" class="thickbox " rel="nofollow" style="font-weight:bold;font-size:11px;">Follow this Member</a>
</span>
<span id="spFollowing" class="icon_followteacher fleft" style="display:none;">
<span id="spFollowingText" class="lighttxt11 fleft" style="font-weight:bold;font-size:11px;" >Following (</span>
<span class="fleft"> <a href="javascript:void(0);" id="MemberControl1_ucFollow_hrfUnfollow" class="ulink" style="padding-left:0px; float:left;" rel="nofollow">Unfollow</a></span>
<span id="Span3" class="lighttxt11 fleft" style="font-weight:bold;font-size:11px;padding-left: 0px;">)</span>
</span>
</div>
<script type="text/javascript" >
if ("false" == "true") {
document.getElementById('MemberControl1_ucFollow_spfollow').style.display="none";
document.getElementById('spFollowing').style.display="inline";
}
else {
document.getElementById('MemberControl1_ucFollow_spfollow').style.display="block";
document.getElementById('spFollowing').style.display="none";
}
function followMember(Qstring)
{
try {
var spFollowing = document.getElementById('spFollowing');
document.getElementById('MemberControl1_ucFollow_spfollow').style.display="none";
spFollowing.style.display="inline";
if(parseInt("217172") > 0)
{
j.ajax
( { url:'http://www.wiziq.com/Contacts/Ajax/follow-member.aspx',
type: 'POST',
data: 'Qstring=' + Qstring,
error: function(){ //alert('ACTIVITY ERROR');
},
success: function(msg)
{
// alert("ajax call succeess");
}}
);
}
}catch(ex){alert(ex);}
}
function callfw() {
if ('' != "") {
try {
HTMLElement.prototype.click = function () {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}
}
catch (e) {
}
document.getElementById('MemberControl1_ucFollow_hrfFollow').click();
}
}
</script> </span>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
function callsm()
{
if ('' != "")
{
try
{
HTMLElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);}
}
catch(e)
{
}
document.getElementById('MemberControl1_hrefSendMessage').click();
}
}
</script>
</div>
<div id="fbActivity">
<div class="leftheadingbox" style="margin-top: 20px;">
<h3>
Your Facebook Friends on WizIQ</h3>
</div>
<div id="fbactivity">
<fb:activity header="false" width="260" height="275" font="arial">
</fb:activity>
</div>
</div>
<div id="divRelatedContent" style="display:block;">
<div class="leftheadingbox" style="margin-top: 20px;">
<h3>
Related Content</h3>
</div>
<div id="divRelatedContentListing" class="leftheadingboxextand">
<div class="rightfeaturedbox">
<div class="featuredclasss">
<div class="featuredleftimg" style="border:solid 1px #ddd; text-align:center">
<img id="rptRelatedContent_ctl00_imgThumbnail" title="Web Programming (HTML, CSS, JavaScript) Tips and Tricks" src="http://m.wqimg.com/156818_634470115405155000-slide1_67,87.jpg" alt="Web Programming (HTML, CSS, JavaScript) Tips and Tricks" border="0" />
</div>
<div class="featuredtxtdiv" style="width: 160px">
<a id="rptRelatedContent_ctl00_HlnkTitle" href="http://www.wiziq.com/tutorial/156818-Web-Programming-HTML-CSS-JavaScript-Tips-and-Tricks">
<strong>
<span id="rptRelatedContent_ctl00_lblTitle" title="Web Programming (HTML, CSS, JavaScript) Tips and Tricks" nowrap="nowrap">Web Programming (HTML, CSS, JavaScript) Tips and Tricks</span></strong></a>
by
<a id="rptRelatedContent_ctl00_hlnkFname" title="IT Funda " href="http://www.wiziq.com/itfunda">IT Funda</a>
<br />
<div class='iconpdfps'>
<span class="lighttext11">
512
Views</span>
</div>
</div>
</div>
<div class="featuredclasss">
<div class="featuredleftimg" style="border:solid 1px #ddd; text-align:center">
<img id="rptRelatedContent_ctl01_imgThumbnail" title="HTML/CSS Made Easy - The XHTML Element" src="http://m.wqimg.com/137163_634390157119042500-slide1_67,51.jpg" alt="HTML/CSS Made Easy - The XHTML Element" border="0" />
</div>
<div class="featuredtxtdiv" style="width: 160px">
<a id="rptRelatedContent_ctl01_HlnkTitle" href="http://www.wiziq.com/tutorial/137163-HTML-CSS-Made-Easy-The-XHTML-Element">
<strong>
<span id="rptRelatedContent_ctl01_lblTitle" title="HTML/CSS Made Easy - The XHTML Element" nowrap="nowrap">HTML/CSS Made Easy - The XHTML Element</span></strong></a>
by
<a id="rptRelatedContent_ctl01_hlnkFname" title="Tanja P" href="http://www.wiziq.com/tanjap">Tanja</a>
<br />
<div class='iconppt'>
<span class="lighttext11">
3767
Views</span>
</div>
</div>
</div>
<div class="featuredclasss">
<div class="featuredleftimg" style="border:solid 1px #ddd; text-align:center">
<img id="rptRelatedContent_ctl02_imgThumbnail" title="HTML/CSS Made Easy - The Basic Basics" src="http://m.wqimg.com/132510_634371245746113750-slide1_67,51.jpg" alt="HTML/CSS Made Easy - The Basic Basics" border="0" />
</div>
<div class="featuredtxtdiv" style="width: 160px">
<a id="rptRelatedContent_ctl02_HlnkTitle" href="http://www.wiziq.com/tutorial/132510-HTML-CSS-Made-Easy-The-Basic-Basics">
<strong>
<span id="rptRelatedContent_ctl02_lblTitle" title="HTML/CSS Made Easy - The Basic Basics" nowrap="nowrap">HTML/CSS Made Easy - The Basic Basics</span></strong></a>
by
<a id="rptRelatedContent_ctl02_hlnkFname" title="Tanja P" href="http://www.wiziq.com/tanjap">Tanja</a>
<br />
<div class='iconppt'>
<span class="lighttext11">
677
Views</span>
</div>
</div>
</div>
<div class="featuredclasss">
<div class="featuredleftimg" style="border:solid 1px #ddd; text-align:center">
<img id="rptRelatedContent_ctl03_imgThumbnail" title="HTML/CSS Made Easy - The Basic Basics PDF" src="http://m.wqimg.com/132574_634371540013457500-slide1_67,87.jpg" alt="HTML/CSS Made Easy - The Basic Basics PDF" border="0" />
</div>
<div class="featuredtxtdiv" style="width: 160px">
<a id="rptRelatedContent_ctl03_HlnkTitle" href="http://www.wiziq.com/tutorial/132574-HTML-CSS-Made-Easy-The-Basic-Basics-PDF">
<strong>
<span id="rptRelatedContent_ctl03_lblTitle" title="HTML/CSS Made Easy - The Basic Basics PDF" nowrap="nowrap">HTML/CSS Made Easy - The Basic Basics PDF</span></strong></a>
by
<a id="rptRelatedContent_ctl03_hlnkFname" title="Tanja P" href="http://www.wiziq.com/tanjap">Tanja</a>
<br />
<div class='iconpdfps'>
<span class="lighttext11">
1477
Views</span>
</div>
</div>
</div>
<div class="featuredclasss">
<div class="featuredleftimg" style="border:solid 1px #ddd; text-align:center">
<img id="rptRelatedContent_ctl04_imgThumbnail" title="HTML tags" src="http://s3.amazonaws.com//wcmeta/youtube_default.gif" alt="HTML tags" border="0" />
</div>
<div class="featuredtxtdiv" style="width: 160px">
<a id="rptRelatedContent_ctl04_HlnkTitle" href="http://www.wiziq.com/tutorial/160569-HTML-tags">
<strong>
<span id="rptRelatedContent_ctl04_lblTitle" title="HTML tags" nowrap="nowrap">HTML tags</span></strong></a>
by
<a id="rptRelatedContent_ctl04_hlnkFname" title="Dr. Mark Winegar" href="http://www.wiziq.com/DrMark">Dr. Mark</a>
<br />
<div class='iconyoutube '>
<span class="lighttext11">
227
Views</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div id="ucRelatedCourse_dvCourseTitle" class="leftheadingbox martop10"><h3>Explore Similar Courses</h3></div>
<div class="feature-courses">
<div class="imgdv">
<img src="http://wqimg.com/data/ci/f/1135_small.jpg" title="JavaScript Prep Course for W3C Professional Certification" /></div>
<div class="rightpanel">
<p>
<strong><a href="http://www.wiziq.com/course/1135-javascript-prep-course-for-w3c-professional-certification" title="JavaScript Prep Course for W3C Professional Certification">
JavaScript Prep Course for W3C Professional Certification</a></strong></p>
<p id="ucRelatedCourse_rptrPopularCourse_ctl00_pPrice"><span class='pricedv text11'>Price:</span><span class='fleft'><span class='txt_green fnt12'>$295</span></span></p>
<p class="lightxt11">Avail Opening Special Price</p>
</div>
</div>
</div>
</div>
</div>
<!-- -->
</div>
</div>
<style type="text/css">
article, section, header, footer, nav, aside{display: block;}
</style>
<script type="text/javascript">
document.createElement('aside');
document.createElement('article');
document.createElement('section');
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('hgroup');
</script>
<section class="inquerydiv">
<article class="centerdv">
<div class="footer_leftdv">
<p class="txt11 m_bot5">For sales enquiry, call us at </p>
<div class="contactdiv" style="padding-left:0px;"><p ><strong>USA</strong><br />+1<span style="display:none;">NoSkype</span>-919-647-4727</p></div>
<div class="contactdiv"><p ><strong>Europe</strong><br />+44<span style="display:none;">NoSkype</span>-(0)-20-7193-6503</p></div>
<div class="contactdiv"><p ><strong>Asia</strong><br />+91<span style="display:none;">NoSkype</span>-988-500-3232</p></div>
<div class="contactdiv"style="border:0"><p ><strong>or</strong><br /><a class="thickbox ulink" rel="nofollow" href="http://www.wiziq.com/contact/Action/ContactFrame.aspx?mval=true&keepThis=true&TB_iframe=true&height=470&width=400">Let us call you</a></p></div>
</div>
<div class="fright">
<div class="whitebg" style="width:214px">
<div class="lighttxt11 dv100">Give live classes, create & sell online courses</div>
<p class="martop5">
<span class="green_button fleft" style="padding:4px 10px">
<a href="http://www.wiziq.com/trial/?pageid=33" class="green_link">Try it free</a>
</span>
<span class="green_button fleft10 fleft" style="padding:4px 10px">
<a href="http://www.wiziq.com/premium/?pageid=33" class="green_link">Plans & Pricing</a>
</span>
</p>
</div>
<div class="whitebg fleft10" style="width:53px;">
<p class="lighttxt11">Connect</p>
<p class="martop5">
<span>
<a href="http://www.facebook.com/wiziq" class="nf_fbicon" target="_blank"></a>
<a href="http://twitter.com/wiziq" target="_blank" class="nf_twiticon marleft" ></a>
</span>
</p>
</div>
</div>
</article>
</section>
<footer class="dv100">
<section id="footer" style="margin-top: 0px">
<section id="footer980">
<article class="dv980">
<nav class="footer_listing">
<ul>
<li class="linktitle">Information </li>
<li><a href="http://www.wiziq.com/help/">Help</a></li>
<li><a href="http://e-teaching.wiziq.com/" target="_blank">e-Teaching Community</a></li>
<li><a href="http://www.wiziq.com/contact/">Contact Support</a></li>
<li><a href="http://www.wiziq.com/forum/" target="_blank">Support Forum</a></li>
<li><a href="http://www.wiziq.com/blog/" target="_blank">Blog</a></li>
<li><a href="http://www.wiziq.com/resources/">Whitepapers & E-books</a></li>
<li><a href="http://www.wiziq.com/history/">About Us</a></li>
</ul>
</nav>
<nav class="footer_listing">
<ul>
<li class="linktitle">Product</li>
<li><a href="http://www.wiziq.com/features/">Complete Feature Set</a></li>
<li><a href="http://www.wiziq.com/Virtual_Classroom.aspx">Virtual Classroom</a></li>
<li><a href="http://www.wiziq.com/courses/create/">Create a Course</a></li>
<li><a href="http://www.wiziq.com/tests/Create-free/">Create Tests</a></li>
<li><a href="http://www.wiziq.com/content/upload-documents/">Upload Content</a></li>
<li><a href="http://www.wiziq.com/how/">Request a Demo</a></li>
</ul>
</nav>
<nav class="footer_listing">
<ul>
<li class="linktitle">Integrations</li>
<li><a href="http://www.wiziq.com/api/">Developer API</a></li>
<li><a href="http://org.wiziq.com/moodle/">Virtual Classroom for Moodle</a></li>
<li><a href="http://www.wiziq.com/vcplugin/">Blackboard Learn™ Building Block</a></li>
</ul>
</nav>
<nav class="footer_listing">
<ul>
<li class="linktitle">Learn</li>
<li><a href="http://www.wiziq.com/courses/">Enroll in Online Courses</a></li>
<li><a href="http://www.wiziq.com/classes/">Learn in live, Online Classes</a></li>
<li><a href="http://www.wiziq.com/content/">View Online Tutorials</a></li>
<li><a href="http://www.wiziq.com/tests/">Practice Online Tests</a></li>
<li><a href="http://www.wiziq.com/public/">Public Updates</a></li>
</ul>
</nav>
<nav class="footer_listing">
<ul>
<li class="linktitle">Popular Courses </li>
<li><a href="http://www.wiziq.com/courses/english">The English Language</a></li>
<li><a href="http://www.wiziq.com/courses/languages">Other Languages</a></li>
<li><a href="http://www.wiziq.com/courses/bank-jobs-exams">Bank Jobs Exams</a></li>
<li><a href="http://www.wiziq.com/courses/technology">Internet & Technology</a></li>
</ul>
</nav>
</article>
</section>
</section>
<section id="copyright">
<article class="inrdv">
<div style="width: 400px; margin: 0 auto">
<span class="fleft">© 2012 WizIQ Inc. All rights reserved.</span>
<span><a rel="nofollow" href="http://www.wiziq.com/PrivacyPolicy.aspx">Privacy Policy</a></span>
<span style="color: #ddd">|</span>
<span><a rel="nofollow" href="http://www.wiziq.com/UserAgreement.aspx">Terms and conditions</a></span>
</div>
</article>
</section>
</footer>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-211915-3");
pageTracker._setDomainName(".wiziq.com");
pageTracker._trackPageview();
} catch(err) {}</script>
<script type="text/javascript"> document.write(unescape('%3Cscript type="text/javascript" src="' + document.location.protocol + '//dnn506yrbagrg.cloudfront.net/pages/scripts/0005/7768.js"%3E%3C%2Fscript%3E'))</script>
<script type="text/javascript" src="http://wqimg.com/wiziqcss/js/jquery_new8.js" language="javascript"></script>
<script type="text/javascript">
var page_url = document.location.href;
if (page_url.indexOf('#') != -1) {
var tracking_uri = page_url.split("#")[1];
var ckVal = "utm_tracking=" + tracking_uri;
ckVal += ";path=/";
ckVal += ";domain=.wiziq.com";
document.cookie = ckVal;
}
</script>
</form>
<script type="text/javascript">function fbs_click(ele){u='http://www.wiziq.com/tutorial/53005-Complete-HTML-Training-part-1';t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent('http://go.wiziq.com/107t')+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');ele.href='#';ele.target='';return false}</script>
<script language="javascript" type="text/javascript">var varContentID='IxCmcrL%252bjW8aLDt3f0fcCIFvkPqAwilRrhiLyddhc4ojKV2RPyKLLl0l0m%252bo%252bgf7%252b94Pa8AEVhc%253d';var PostUrl='http://www.wiziq.com';</script>
<script type="text/javascript">document.getElementById('divtopPlayerLink').style.display="block";</script>
<script language="javascript" type="text/javascript">function toggleDiv(divToShow,imgID){var help=document.getElementById(divToShow);if(help.style.display!="block"){if(imgID)document.getElementById(imgID).setAttribute('src','http://www.wiziq.com/Images/close_minus.gif');document.getElementById(divToShow).style.display="block"}else{if(imgID)document.getElementById(imgID).setAttribute('src','http://www.wiziq.com/Images/icon_plus_presentation.gif');document.getElementById(divToShow).style.display="none"}}</script>
<div id="fb-root">
</div>
<script type="text/javascript">
function addtoFavourite(Qstring)
{
try{
var spInFavourate = document.getElementById("spInFav");
document.getElementById("spFav").style.display="none";
var spFavContent = document.getElementById("spFavContent") ;
spInFavourate.style.display="inline";
spFavContent.className = "faviconright";
if(parseInt("53005") > 0)
{
j.ajax
( { url:'http://www.wiziq.com/Home/Action/AddtoFav.aspx',
type: 'POST',
data: 'Qstring=' + Qstring,
error: function(){ //alert('ACTIVITY ERROR');
},
success: function(msg)
{
//alert("ajax call succeess");
}}
);
}
}catch(ex){alert(ex);}
}
function OpenUrl()
{
// location.href = 'http://s3.amazonaws.com/wcsourcepre/12299_633968898161263845.doc?AWSAccessKeyId=0WATX2TYP6SVTPNM1W82&Expires=1279020076&Signature=m9y9WOqmRS%2FgXyPuW5SmNGddRQw%3D';
// var UserUrl = 'http://www.wiziq.com/Content/DownloadContent.aspx?IxCmcrL%252bjW8aLDt3f0fcCIFvkPqAwilRrhiLyddhc4ojKV2RPyKLLl0l0m%252bo%252bgf7%252b94Pa8AEVhc%253d';
// var scheight='50px';
// var scwidth='50px';
// var newWin=window.open(UserUrl, 'mywindow', "left=0,top=0,resize=0, height="+scheight+", width="+scwidth);
}
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '123813937646536', status: true, cookie: true,xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>