HTML/CSS Made Easy - The XHTML Element

Add to Favourites
Post to:

Description
This presentation describes the various components of an XHTML element. XHTML tags and their construction are examined. An exploration of the XHTML element follows. Finally, the XHTML attribute is examined. The features of each are fully discussed, along with the rules that govern the use of each.

Comments
Presentation Transcript Presentation Transcript

HTML/CSSMade Easy : HTML/CSSMade Easy The Element, Doc Type & Rule

The XHTML Element : Tags Elements Attributes The XHTML Element 2 Tanja Petrova

Slide 3 : Tanja Petrova 3 The XHTML Tag A tags is: a coded symbol that separates 1 piece of content from another tells the browser the type of content it’s dealing with has a name that describes exactly what it does Tags represent headings, paragraphs, images, quotations, lists, images etc.

The XHTML Tag : The XHTML Tag Tanja Petrova 4 Tags in XHTML are surrounded by angle brackets The 1st bracket < marks the beginning of the tag It is immediately followed by the tag name The tag ends with a closing angle bracket > These are all HTML tags -

,

  • , ,
      , , , ,
  • ,
      , , , </tfoot>, <span></p><p><strong>The XHTML Tag : </strong>The XHTML Tag Tanja Petrova 5 Most tags come in matched pairs – 1 opening/start tag <p> that marks the beginning of a piece of content; and 1 closing/end tag </p> that marks the end A paragraph would look like this: <p>This is a short paragraph to show start and end tags in XHTML.</p></p><p><strong>The XHTML Element : </strong>The XHTML Element Tanja Petrova 6 The opening and closing tags, along with the content between them, form a complete element. In XHTML, all elements MUST have a closing tag…well, almost all.</p><p><strong>The XHTML Element : </strong>The XHTML Element Tanja Petrova 7 Some tags represent empty elements that cannot hold content. Empty elements are self-closed – they need only one tag that is the entire element e.g. <br /> This tag represents a line break – any text that follows it will be forced by the browser to wrap to a new line.</p><p><strong>The XHTML Attribute : </strong>The XHTML Attribute Tanja Petrova 8 An element’s opening tag can contain attributes that provide more information about the element. An attribute is made up of an attribute name and an attribute value: <p class=“greeting”>Welcome to our class on XHTML!</p> Attribute name = class Attribute value = greeting</p><p><strong>The XHTML Attribute : </strong>The XHTML Attribute Tanja Petrova 9 An attribute’s name and value are connected by an equal sign, and the value must be enclosed in quotation marks “attribute value” All attribute names MUST be lowercase in XHTML. Several attributes can be included in the same opening tag: <p class=“hi” id=“name” title=“greet”>My name is Tanja. What’s yours?</p></p><p><strong>The XHTML Element cont’d : </strong>The XHTML Element cont’d Tanja Petrova 10 Element Opening Tag Closing Tag <p class=“greeting”>Welcome to our class!</p> Name Value Content Attribute</p><p><strong>The XHTML Element : </strong>The XHTML Element Tanja Petrova 11 Types of Elements: Block-level – these contains a block of content that needs its own line, to break apart long text into more manageable portions e.g. lists <ul> & <ol>; paragraphs <p>; and headings <h1></p><p><strong>The XHTML Element : </strong>The XHTML Element Tanja Petrova 12 Types of Elements: Inline – these contain shorter strings of text and are rendered adjacent to other text on the same line e.g. emphasis <em> & <strong>; computer code <code>; and abbreviations <abbr></p><p><strong>The XHTML Element : </strong>The XHTML Element Tanja Petrova 13 Types of Elements: All block-level elements can contain inline elements <p><em>Hi</em><p/> Many block-level elements can contain other block-level elements <p><h1>Hi</h1></p> Inline elements cannot contain block-level elements <em><p>Hi</p></em> Inline elements can only contain other inline elements <em><abbr>USSR</abbr></em></p><p><strong>The XHTML Element : </strong>The XHTML Element Tanja Petrova 14 Nesting: When elements are nested, closing tags MUST appear in the correct order. A nested element must be closed BEFORE its containing element <p><strong>This is WRONG</p></strong> <p><strong>This is CORRECT</strong></p></p><p><strong>The XHTML Element : </strong>The XHTML Element Tanja Petrova 15 White Space: Browsers ignore line breaks and carriage returns so: <p> Plenty of empty white space!</p> will look like this in your browser: Plenty of empty white space!</p><p><strong>The XHTML Attribute cont’d : </strong>The XHTML Attribute cont’d Tanja Petrova 16 Core Attributes: class – elements that belong to the same class can have similar presentation. A class name is made up of letters, numbers, hyphens and underscores. Infinite elements may belong to the same class. A single element may belong to more than one class. <p class=“big-4” class=“words” class=“green”>Just some text.</p> <p class=“green” class=“hug” class=“hi-lo”>More text here!</p> <p class=“words” class=“big-four” class=“hug”>Even more text.</p></p><p><strong>The XHTML Attribute : </strong>The XHTML Attribute Tanja Petrova 17 Core Attributes: id – a unique identifier for an element. More than one element CANNOT share the same id within 1 document. A id name can contain letters, numbers, hyphens and underscores. An id name MUST start with a letter. <p id=“first”>This will not work.</p> <p id=“1st”>Neither will this.</p> <p id=“first”>This will also fail.</p></p><p><strong>The XHTML Attribute : </strong>The XHTML Attribute Tanja Petrova 18 Core Attributes: title – gives a title to the element. Many browsers display the value of a title attribute in a tooltip, a small floating window that shows when a cursor hovers over the element <p title=“My Hobbies”>I love playing tennis and volleyball in my spare time. I also collect rubber ducks and used spoons.</p></p><p><strong>The XHTML Attribute : </strong>The XHTML Attribute Tanja Petrova 19 Core Attributes: style – specifies CSS properties for an element. This is also known as inline styling. Although valid, this attribute should be avoided as it mixes structure with presentation. <p style=“color: pink; font: Ariel; border: 1px dashed blue;”>Don’t use the style attribute in your XHTML, as it mixes your structure (HTML) with your presentation (CSS). That’s a bad mix!</p></p><p><strong>The XHTML Attribute : </strong>The XHTML Attribute Tanja Petrova 20 Internationalization Attributes: dir – sets the direction in which text must be read. The values are ltr (left to right) or rtl (right to left). This is usually unnecessary lang – sets the language of the content. Some values are en, es, jp xml:lang – also sets the language of the content. Same values as the attribute above</p><p><strong>XHTML Comments : </strong>XHTML Comments Tanja Petrova 21 It can be helpful to add comments to your documents. A comment starts with <!-- and ends with -->. A browser will not display any content between these markers. <h3>This will be visible. Everyone will see what’s written here.</h3><!-- These are comments. None of this will be seen in your browser. Hide what you want here! --><p>This will also be visible in your browser.</p></p><p><strong>Slide 22 : </strong>Hope you enjoyed this presentation. Please come back again! 22 Tanja Petrova</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=6a3badae-2d15-4b6b-b4a1-a77c89bf4f47&cc=TP6K" 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/tanjap">Tanja P</a></strong><br /><span id="MemberControl1_spanSubject" style="padding-top: 3px;">An open mind opens doors.</span> </div> <div class="fright" style="padding:3px 5px 5px 0px"> <img id="MemberControl1_imgUser" alt="User" src="http://wqimg.s3.amazonaws.com/ut/ust/Tanja-Petrova-994476.jpg" border="0" /> </div> </div> <div id="MemberControl1_divRecFollow" class="mcontentdiv text11"> <div id="MemberControl1_divRecommendation" class="fleft" style="padding: 5px 0px 3px 0px;margin:0px;"> <div class="fleft" style="width: 16px;padding-left:10px;"><span class="recommend_icon" style="height:15px; float:left"></span></div> <div class="fleft" style="padding-left: 4px;" ><span id="MemberControl1_lblRecommendation">22 Members Recommend</span></div> </div> <div id="MemberControl1_divFollowers" class="fleft text11" style="width:250px;padding:3px 0px 5px 10px;margin:0px;"> <span class="icon_followteacher fleft" style="padding-left:15px;"><span class="fleft" style="padding-left:5px;"><span id="MemberControl1_lblFollowers">129 Followers</span></span></span> </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/tanjap/tutorials" id="MemberControl1_HrefContent" title="Public Tutorials by Tanja P">Tutorials</a>:</span> <span class="fleft"><a href="http://www.wiziq.com/tanjap/tutorials" id="MemberControl1_HrefContentCount" style="text-decoration:none" title="Public Tutorials by Tanja P"><span id="MemberControl1_lblContent">3</span></a></span> </div> <div id="MemberControl1_dvTest" class="bluetxt11 fleft" style="padding-left:10px"> <span class="fleft" style="padding-right:5px; padding-left:2px;"><a href="http://www.wiziq.com/tanjap/tests" id="MemberControl1_HrefTest" title="Online Public Practice Tests by Tanja P">Test</a>:</span> <span class="fleft"><a href="http://www.wiziq.com/tanjap/tests" id="MemberControl1_HrefTestCount" style="text-decoration:none" title="Online Public Practice Tests by Tanja P"><span id="MemberControl1_lblTest">1</span></a></span> </div> <div id="MemberControl1_dvSession" class="bluetxt11 fleft" style="padding-left:10px;height:20px"> <span class="fleft" style="padding-right:5px;padding-left:2px;"><a href="http://www.wiziq.com/tanjap/classes" id="MemberControl1_HrefSession" title="Online Public Classes by Tanja P">Classes</a>: </span> <span class="fleft"><a href="http://www.wiziq.com/tanjap/classes" id="MemberControl1_HrefSessionCount" style="text-decoration:none" title="Online Public Classes by Tanja P"><span id="MemberControl1_lblSession">27</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=137163-HTML-CSS-Made-Easy-The-XHTML-Element~sm=y&ModuleObjectId=137163&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=sVcdujT6kMrk%2bWwsUyHfSj01qkd6j099b1KZzTTqK1eO1flNJ3yg8uKwmzDp528G3xdS7xlunv54OlSN%2fo7zqO21eGFyySWpGc5Jy8fy5FHeHrvFQ8j1zKHSbhKuwM0nmsGkjjX%2f0HcgCzvcH7SoOLe3QUgBtKAeTVrYOxegNoFpIMhof3sKSGXFpj6pHijQhg6T%2b1tE6E%2bSKMSWC%2f73%2fzp0pN7Gfg3alTFDMjsSWWOmfxtUyIXAq1Wqk11Gz1YX&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("994476") > 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="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_ctl00_HlnkTitle" href="http://www.wiziq.com/tutorial/132510-HTML-CSS-Made-Easy-The-Basic-Basics"> <strong> <span id="rptRelatedContent_ctl00_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_ctl00_hlnkFname" title="Tanja P" href="http://www.wiziq.com/tanjap">Tanja</a> <br /> <div class='iconppt'> <span class="lighttext11"> 675 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 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_ctl01_HlnkTitle" href="http://www.wiziq.com/tutorial/132574-HTML-CSS-Made-Easy-The-Basic-Basics-PDF"> <strong> <span id="rptRelatedContent_ctl01_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_ctl01_hlnkFname" title="Tanja P" href="http://www.wiziq.com/tanjap">Tanja</a> <br /> <div class='iconpdfps'> <span class="lighttext11"> 1476 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="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_ctl02_HlnkTitle" href="http://www.wiziq.com/tutorial/156818-Web-Programming-HTML-CSS-JavaScript-Tips-and-Tricks"> <strong> <span id="rptRelatedContent_ctl02_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_ctl02_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_ctl03_imgThumbnail" title="Complete HTML Training - part 1" src="http://m.wqimg.com/53005_633992385401541250_slide1_67,51.jpg" alt="Complete HTML Training - part 1" border="0" /> </div> <div class="featuredtxtdiv" style="width: 160px"> <a id="rptRelatedContent_ctl03_HlnkTitle" href="http://www.wiziq.com/tutorial/53005-Complete-HTML-Training-part-1"> <strong> <span id="rptRelatedContent_ctl03_lblTitle" title="Complete HTML Training - part 1" nowrap="nowrap">Complete HTML Training - part 1</span></strong></a> by <a id="rptRelatedContent_ctl03_hlnkFname" title="Mark Isherwood" href="http://www.wiziq.com/markei">Mark</a> <br /> <div class='iconppt'> <span class="lighttext11"> 7990 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="CSS in Web Design" src="http://m.wqimg.com/178225_634554845010748750-slide1_67,51.jpg" alt="CSS in Web Design" border="0" /> </div> <div class="featuredtxtdiv" style="width: 160px"> <a id="rptRelatedContent_ctl04_HlnkTitle" href="http://www.wiziq.com/tutorial/178225-CSS-in-Web-Design"> <strong> <span id="rptRelatedContent_ctl04_lblTitle" title="CSS in Web Design" nowrap="nowrap">CSS in Web Design</span></strong></a> by <a id="rptRelatedContent_ctl04_hlnkFname" title="Muhammad Fiaz" href="http://www.wiziq.com/fiaz1606146">Muhammad</a> <br /> <div class='iconppt'> <span class="lighttext11"> 198 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/1526_small.jpg" title="Basic Website Create-along" /></div> <div class="rightpanel"> <p> <strong><a href="http://www.wiziq.com/course/1526-basic-website-create-along" title="Basic Website Create-along"> Basic Website Create-along</a></strong></p> <p id="ucRelatedCourse_rptrPopularCourse_ctl00_pPrice"><span class='pricedv text11'>Price:</span><span class='fleft'><span class='txt_green fnt12'>$50</span></span></p> <p class="lightxt11"></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/137163-HTML-CSS-Made-Easy-The-XHTML-Element';t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent('http://go.wiziq.com/20pv')+'&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%252bjW%252fZWxHVt1W7PFq%252fnEClq4kZc8Y%252fxxemj1k2E8%252fUit28j2F3u9jU5T0zfqt%252fl50dgss%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("137163") > 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%252bjW%252fZWxHVt1W7PFq%252fnEClq4kZc8Y%252fxxemj1k2E8%252fUit28j2F3u9jU5T0zfqt%252fl50dgss%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>