Beginner's Guide to HTML Tags: Learn HTML Basics Step-by-Step

How do you link a CSS file to HTML?

Use the <link> tag inside the <head> to attach an external CSS file.

Example:

This keeps your styling separate from your HTML structure.

What is HTML and what is it used for?

HTML stands for HyperText Markup Language.
It is used to create the structure of web pages and web applications.
HTML defines elements such as headings, paragraphs, links, images, and other content.

What is the difference between block-level and inline elements?

Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
Understanding this helps with layout and styling.

What is the structure of a basic HTML document?

A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
The <head> section contains metadata like the title and links to stylesheets.
The <body> section contains all the visible content of the webpage.

What is the role of the tag?

The <meta> tag provides metadata such as page description, keywords, and author.
It helps browsers and search engines understand the content of the page.
One common use is specifying the character encoding: <meta charset="UTF-8">.

How do you add a form in HTML?

Forms collect user input using the <form> tag.
Inside a form, use <input>, <textarea>, <select>, and <button>.
The action attribute specifies where to send the form data.

What is the use of the tag in forms?

The <label> tag defines a label for an input element.
It improves accessibility and allows users to click the label to focus the input.
Example: <label for="email">Email:</label><input id="email">.

How can you add comments in HTML?

Comments in HTML are written between .

Example:

.

Comments are not displayed on the webpage and are used for documentation.

What are HTML entities and when should you use them?

HTML entities are used to display reserved or special characters.

For example, < displays < and & displays &.

Use them to avoid confusion with actual HTML syntax.

What is the tag used for? </h5> <div class="collapse" id="what-is-the-iframe-tag-used-for"> <div class="faq_para"> <p>The <iframe> tag embeds another webpage within the current page.<div>It’s commonly used to include videos, maps, or other web content.</div><div><b>Example: </b></div><div><iframe src="https://example.com"></iframe>.</div></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#can-html-be-used-alone-to-build-a-website" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> Can HTML be used alone to build a website? </h5> <div class="collapse" id="can-html-be-used-alone-to-build-a-website"> <div class="faq_para"> <p><ul><li>Yes, HTML can build the structure of a website.</li><li>However, for styling and interactivity, CSS and JavaScript are needed.</li><li>Together, these three technologies form the foundation of web development.</li></ul></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#what-are-self-closing-tags-in-html" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> What are self-closing tags in HTML? </h5> <div class="collapse" id="what-are-self-closing-tags-in-html"> <div class="faq_para"> <p><ul><li>Self-closing tags don’t need an end tag because they don’t wrap content.</li><li>Examples include <br>, <img>, <hr>, and <input>.</li><li>These tags are written in a single line.</li></ul></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#what-is-the-purpose-of-the-id-and-class-attributes" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> What is the purpose of the id and class attributes? </h5> <div class="collapse" id="what-is-the-purpose-of-the-id-and-class-attributes"> <div class="faq_para"> <p>The id attribute uniquely identifies a single HTML element.<div>The class attribute groups multiple elements for styling or scripting.</div><div><b>Example: </b></div><div><div id="main" class="container">.</div></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#how-do-you-add-a-hyperlink-in-html" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> How do you add a hyperlink in HTML? </h5> <div class="collapse" id="how-do-you-add-a-hyperlink-in-html"> <div class="faq_para"> <p>Hyperlinks are created using the <a> tag with an href attribute.<div><b>Example: </b></div><div><a href="https://example.com">Click here</a>.</div><div>This creates a clickable link that navigates to another page or site.</div></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#what-are-html-tags-and-how-are-they-used" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> What are HTML tags and how are they used? </h5> <div class="collapse" id="what-are-html-tags-and-how-are-they-used"> <div class="faq_para"> <p><ul><li>HTML tags are code elements that describe the structure and content of a webpage.</li><li>They are enclosed within angle brackets, for example, <p> for a paragraph.</li><li>Most tags come in pairs, with an opening and a closing tag like <div></div>.</li></ul></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#how-can-you-include-images-in-an-html-page" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> How can you include images in an HTML page? </h5> <div class="collapse" id="how-can-you-include-images-in-an-html-page"> <div class="faq_para"> <p>Use the <img> tag and specify the image source with the src attribute.<div><b>Example: </b></div><div><img src="photo.jpg" alt="A photo">.</div><div>The alt attribute provides alternative text if the image doesn't load.</div></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#how-do-you-open-a-link-in-a-new-browser-tab" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> How do you open a link in a new browser tab? </h5> <div class="collapse" id="how-do-you-open-a-link-in-a-new-browser-tab"> <div class="faq_para"> <p>Use the target="_blank" attribute inside the <a> tag.<div><br></div></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#how-does-the-script-tag-work-in-html" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> How does the <script> tag work in HTML? </h5> <div class="collapse" id="how-does-the-script-tag-work-in-html"> <div class="faq_para"> <p>The <script> tag is used to include JavaScript in an HTML document.<div>It can be placed in the <head> or at the end of the <body>.</div><div>External scripts are linked using the src attribute.</div></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#what-are-semantic-html-elements-and-why-are-they-important" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> What are semantic HTML elements and why are they important? </h5> <div class="collapse" id="what-are-semantic-html-elements-and-why-are-they-important"> <div class="faq_para"> <p><ul><li>Semantic elements clearly describe their meaning to both the browser and the developer.</li><li>Examples include <article>, <section>, <nav>, and <footer>.</li><li>They improve accessibility and SEO by giving content meaningful structure.</li></ul></p> </div> </div> </div> <div class="faq_text"> <h5 data-bs-toggle="collapse" href="#is-html-case-sensitive-should-i-use-uppercase-or-lowercase" role="button" aria-expanded="false"> <i class="fa-solid fa-plus"></i> Is HTML case-sensitive? Should I use uppercase or lowercase? </h5> <div class="collapse" id="is-html-case-sensitive-should-i-use-uppercase-or-lowercase"> <div class="faq_para"> <p><ul><li>HTML is not case-sensitive, so <DIV> is the same as <div>.</li><li>However, lowercase is preferred and recommended for readability and HTML5 compliance.</li><li>Following consistent casing makes code easier to maintain.</li></ul></p> </div> </div> </div> </div> </div> </div> </div> <script src="https://www.letsupdateskills.com/assets/datatable/js/jquery-3.4.1.min.js"></script> <script src="https://www.letsupdateskills.com/assets/datatable/js/sweetalert2@11.js"></script> <link href="https://www.letsupdateskills.com/assets/summernote/summernote-lite.min.css" rel="stylesheet"> <script src="https://www.letsupdateskills.com/assets/summernote/summernote-lite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/xml.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script> <script> document.addEventListener('DOMContentLoaded', (event) => { hljs.highlightAll(); let language = $('#language_name').text(); // Use .text() to get the inner content $('.hljs').prepend('<div><p style="color: red;">' + language + '</p></div>'); }); document.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('.copy-btn').forEach(button => { button.addEventListener('click', function() { var codeBlock = this.parentElement.nextElementSibling; if (codeBlock) { var textToCopy = codeBlock.textContent; var tempTextArea = document.createElement('textarea'); tempTextArea.value = textToCopy; document.body.appendChild(tempTextArea); tempTextArea.select(); document.execCommand('copy'); document.body.removeChild(tempTextArea); this.textContent = 'Copied!'; setTimeout(() => { this.textContent = '📄'; }, 1500); } }); }); }); </script> <script type="text/javascript"> function to_maintopic(slug, type_id) { if (type_id == 2) { // Use '==' for comparison window.location.href = 'https://www.letsupdateskills.com/tutorial/' + slug; } else { window.location.href = 'https://www.letsupdateskills.com/interview/' + slug; } } let current_time; // Define current_time as a global variable // window.onload = function() { // // current_time = new Date().getTime(); // // console.log("1"); // // console.log(current_time); // let current_time = new Date().toLocaleString('sv-SE', { timeZoneName: 'short' }).replace(',', '').replace('GMT', '').trim(); // console.log(current_time); // }; function nextpage() { window.location.href = 'https://www.letsupdateskills.com/tutorials/learn-html-beginner/elements'; } function previouspage() { window.location.href = 'https://www.letsupdateskills.com/tutorials/learn-html-beginner/importance-of-doctype'; } // function nextpage($topic_id,$section_id) { // // let current_time = new Date().toISOString().slice(0, 19).replace('T', ' '); // // console.log(current_time); // $.ajax({ // type: 'POST', // url: 'https://www.letsupdateskills.com/api/v1/users/topic-duration', // data: { // 'topic_id' : topic_id, // 'section_id' : section_id, // 'current_time': current_time, // }, // success: function(data) { // console.log(data); // if (data.status === "SUCCESS") { // window.location.href = "https://www.letsupdateskills.com"; // //location.reload(); // } else { // $("#error").show(); // $("#errormessage").text(data.message); // } // }, // error: function(xhr, status, error) { // console.error("AJAX error:", status, error); // } // }); // window.location.href = 'https://www.letsupdateskills.com/tutorials/learn-html-beginner/elements'; // } // function bookmark(main_topic_id){ // } // function previouspage(topic_id,section_id) { // let current_time = new Date().toISOString().slice(0, 19).replace('T', ' '); // $.ajax({ // type: 'POST', // url: 'https://www.letsupdateskills.com/api/v1/topic-duration', // data: { // 'topic_id' : topic_id, // 'section_id' : section_id, // 'current_time': current_time, // }, // success: function(data) { // console.log(data); // if (data.status === "SUCCESS") { // window.location.href = "https://www.letsupdateskills.com"; // //location.reload(); // } else { // $("#error").show(); // $("#errormessage").text(data.message); // } // }, // error: function(xhr, status, error) { // console.error("AJAX error:", status, error); // } // }); // window.location.href = 'https://www.letsupdateskills.com/tutorials/learn-html-beginner/importance-of-doctype'; // } </script> <script> // var menuOpen=true; // function toggleMenu() { // var element = document.getElementById("supportedContentOne"); // if(menuOpen==true){ // element.classList.add("active"); // } // else{ // element.classList.remove("active"); // } // menuOpen =!menuOpen; // console.log(menuOpen); // return menuOpen; // // console.log("Add Class Name"); // } function toggleMenu() { var element = document.getElementById("supportedContentOne"); var isVisible = element.getAttribute("data-visible") === "true"; element.setAttribute("data-visible", !isVisible); } // function to_maintopic(slug, type_id) { // // console.log("1"); // if (type_id == 2) { // Use '==' for comparison // window.location.href = 'https://www.letsupdateskills.com/tutorial/' + slug; // } else { // window.location.href = 'https://www.letsupdateskills.com/interview/' + slug; // } // } </script> <div class="container-fluid"> <div class="row"> <div class="col-md-12 p-0"> <img src="https://www.letsupdateskills.com/assets/images/new_images/footer_line.png" alt="line" width="100%"> </div> </div> </div> <div class="footer-1 pt-5 pb-2"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-3"> <div class="footer_wrap"> <div class="footer_logo"> <img src="https://www.letsupdateskills.com/assets/images/new_images/new-logo.png" alt="logo"> </div> <div class="footer_link"> <h4><i class="fa-regular fa-envelope"></i> Mail us :</h4> <ul> <li><a href="#">support@letsupdateskills.com</a></li> <li><a href="#">submit@letsupdateskills.com</a></li> <li><a href="#">admin@letsupdateskills.com</a></li> </ul> </div> <div class="footer_link"> <h4 style="display:inline;"><i class="fa-solid fa-location-dot"></i> Address : </h4> <span> India</span> </div> <div class="footer_social_media"> <ul> <li><a href="#"><img src="https://www.letsupdateskills.com/assets/images/new_images/social_media/fb.png" alt="Facebook_logo"></a></li> <li><a href="https://www.instagram.com/letsupdateskillsnow/" target="_blank"><img src="https://www.letsupdateskills.com/assets/images/new_images/social_media/instagram.png" alt="Instagram_logo"></a></li> <li><a href="https://www.linkedin.com/company/letsupdateskills/" target="_blank"><img src="https://www.letsupdateskills.com/assets/images/new_images/social_media/linkedin.png" alt="Linkedin_logo"></a></li> <li><a href="https://twitter.com/letsupdatenow" target="_blank"><img src="https://www.letsupdateskills.com/assets/images/new_images/social_media/x-twitter.png" alt="X-twitter_logo"></a></li> <li><a href="#"><img src="https://www.letsupdateskills.com/assets/images/new_images/social_media/youtube.png" alt="Youtube_logo"></a> </li> <li><a href="#"><img src="https://www.letsupdateskills.com/assets/images/new_images/social_media/pinterest.png" alt="Pinterest_logo"></a> </li> </ul> </div> </div> </div> <div class="col-md-7 offset-md-2"> <div class="footer_link"> <div class="footer_link"> <h4 class="border-bottom pb-2">Sub Categories</h4> <ul id="subcategoryDtone" style="column-count: 4;"> </ul> </div> </div> </div> </div> <div class="row justify-content-center mt-3"> <div class="col-md-10"> <div class="footer_link"> <ul class="d-flex justify-content-center align-items-center flex-wrap"> <li><a href="https://www.letsupdateskills.com/about-us">About Us</a></li> <li><a href="https://www.letsupdateskills.com/contact-us">Contact Us</a></li> <li><a href="https://www.letsupdateskills.com/our-contributors">Our Contributors</a></li> <li><a href="https://www.letsupdateskills.com/become-contributor">Become a Contributor</a></li> <li><a href="https://www.letsupdateskills.com/privacy-policy">Privacy Policy</a></li> <li><a href="https://www.letsupdateskills.com/cookie-policy">Cookie notice</a></li> <li><a onclick="openPopup('signInPopup')">Register</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="copyRights"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-md-5"> <p class="m-0">Copyrights © 2024 letsupdateskills <i class="fa-solid fa-circle m-1"></i> All rights reserved</p> </div> </div> </div> </div>  <div id="signInPopup" class="popup"> <div class="popup-content"> <div class="model-header"> <span class="close" onclick="closePopup('signInPopup')">×</span> </div>  <div id="loginForm" class="model-body"> <h2>Login</h2> <form method="post" action="" class="" id="login" error.message="inline"> <input type="hidden" name="_token" value="eTFJRSf4b7EHk8DKnTYyiSBDxkzOVKXM6Y0s18QR"> <div> <p id="err_message_login" class="message error-message d-none"></p> <p id="info_message_login" class="message info-message d-none"></p> </div> <div class="col-lg-12 col-md-12 form-group"> <label for="validationDefault01" class="form-label">Username / Email</label> <input type="text" class="form-control" id="username" name="username" required> </div> <div class="col-lg-12 col-md-12 form-group"> <label for="validationDefault02" class="form-label d-flex justify-content-between">Password <span><a href="https://www.letsupdateskills.com/forgot_password" style="color: var(--color_orange);text-decoration: underline">Forgot Password</a></span> </label> <input type="password" class="form-control" id="password" name="password" required> </div> <div class="col-lg-12 col-md-12 form-group"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck2"> <label class="form-check-label" for="invalidCheck2">Remember Me</label> </div> </div> <div class="col-lg-12 col-md-12 form-group"> <div class="d-flex justify-content-center"> <button class="btn btn-primary log-btn" type="submit" onclick="signin()">Sign in</button> </div> <br> <div id="otp_submit_login" class="d-none"> <div class="col-lg-12 col-md-12 form-group"> <input type="hidden" id="otp_email_login"> <label for="otp" class="form-label">Enter OTP</label> <input type="text" class="form-control" id="otp_number_login" name="otp_number" required> </div> <div class="col-lg-12 col-md-12 form-group"> <div class="text-center"> <button class="btn btn-primary log-btn" onclick="verify_otp_login()" type="button">Verify OTP</button> </div> </div> </div> <div class="text-center"> <p>Don't have an account?<a onclick="showSignUp()" class="popup-link"> Register</a></p> </div> </div> </form> </div>  <div id="signUpForm" class="model-body" style="display: none;"> <h2>Sign Up</h2> <form method="post" action="" class="" id="register" error.message="inline"> <input type="hidden" name="_token" value="eTFJRSf4b7EHk8DKnTYyiSBDxkzOVKXM6Y0s18QR"> <div> <p id="err_message" class="message error-message d-none"></p> <p id="otp_message" class="message info-message d-none"></p> </div> <div class="col-lg-12 col-md-12 form-group"> <label for="email" class="form-label">Email Address</label> <input type="email" class="form-control" id="reg_email" name="email" required> </div> <div class="col-lg-12 col-md-12 form-group"> <label for="first_name" class="form-label">First Name</label> <input type="text" class="form-control" id="first_name" name="first_name" required> </div> <div class="col-lg-12 col-md-12 form-group"> <label for="last_name" class="form-label">Last Name</label> <input type="text" class="form-control" id="last_name" name="last_name" required> </div> <div class="col-lg-12 col-md-12 form-group"> <label for="password" class="form-label d-flex justify-content-between">Password</label> <input type="password" class="form-control" id="reg_password" name="password" required> </div> <div class="col-lg-12 col-md-12 form-group"> <div class="text-center"> <button class="btn btn-primary log-btn" onclick="new_register(event)" type="submit">Register</button> </div> </div> <div class="text-center"> <p>Do you have an account?<a onclick="showLogin()" class="popup-link"> Login</a></p> </div> </form> <div class = "d-none" id="otp_submit"> <div class="col-lg-12 col-md-12 form-group"> <input type="hidden" id="otp_user_id"> <label for="otp" class="form-label">Enter OTP</label> <input type="text" class="form-control" id="otp_number" name="otp_number" required> </div> <div class="col-lg-12 col-md-12 form-group"> <div class="text-center"> <button class="btn btn-primary log-btn" onclick="verify_otp(event)" type="submit">Verify OTP</button> </div> </div> </div> </div> </div> </div> <script> function showSignUp() { document.getElementById('loginForm').style.display = 'none'; document.getElementById('signUpForm').style.display = 'block'; } function showLogin() { document.getElementById('signUpForm').style.display = 'none'; document.getElementById('loginForm').style.display = 'block'; } </script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script src="https://www.letsupdateskills.com/assets/datatable/js/sweetalert2@11.js"></script> <script> //mySwiperTwo var swiper = new Swiper(".mySwiperThree", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, slidesPerView: 1, spaceBetween: 5, pagination: { el: ".swiper-pagination", clickable: true, }, autoplay: { delay: 8000, }, breakpoints: { // when window width is <= 499px 1000: { slidesPerView: 4, spaceBetweenSlides: 20 }, 750: { slidesPerView: 2, spaceBetweenSlides: 20 }, } }); //mySwiperTwo var swiper = new Swiper(".mySwiperPopular", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, slidesPerView: 1, spaceBetween: 30, pagination: { el: ".swiper-pagination", clickable: true, }, autoplay: { delay: 5000, }, breakpoints: { // when window width is <= 499px 1000: { slidesPerView: 2, spaceBetweenSlides: 20 }, 750: { slidesPerView: 1, spaceBetweenSlides: 20 }, } }); document.addEventListener('DOMContentLoaded', function() { const testimonials = document.querySelectorAll('.testimonial-silder'); let currentSlide = 0; function showSlide(index) { testimonials.forEach((testimonial, i) => { testimonial.classList.remove('active'); if (i === index) { testimonial.classList.add('active'); } }); } function nextSlide() { currentSlide = (currentSlide + 1) % testimonials.length; showSlide(currentSlide); } function prevSlide() { currentSlide = (currentSlide - 1 + testimonials.length) % testimonials.length; showSlide(currentSlide); } // Initial slide display showSlide(currentSlide); setInterval(nextSlide, 5000); }); // Function to open the popup function openPopup(popupId) { document.getElementById(popupId).style.display = 'flex'; } // Function to close the popup function closePopup(popupId) { document.getElementById(popupId).style.display = 'none'; } </script> </body> <script src="https://www.letsupdateskills.com/assets/js/drak-light.js"></script> <script> function toggleMenu() { var element = document.getElementById("supportedContentOne"); var isVisible = element.getAttribute("data-visible") === "true"; element.setAttribute("data-visible", !isVisible); } function handleFormSubmit(event) { event.preventDefault(); var form = $(event.target).closest('form'); var formData = form.serialize(); $.ajax({ url: form.attr('action'), method: form.attr('method'), data: formData, success: function(response) { console.log(response); $('#otp_email').val(response.email); if (response.otp_status == 1) { // window.location.href = "https://www.letsupdateskills.com/dashboard/"; window.location.href = response.redirect; } else if (response.otp_status == 0 && response.status == "SUCCESS") { $('#otp_submit').removeClass('d-none').addClass('d-block'); } else { Swal.fire({ title: 'Error', text: response.message, icon: 'error', confirmButtonColor: '#3085d6', confirmButtonText: 'Ok' }); } }, error: function() { console.error('Error processing form'); } }); } $('#login').on('submit', function(e) { e.preventDefault(); signin(); }); function signin() { var username = $('#username').val(); var password = $('#password').val(); $.ajax({ type: 'POST', url: 'https://www.letsupdateskills.com/api/v1/login', data: { "username": username, "password": password }, success: function(data) { $('#err_message_login').addClass('d-none').text(''); $('#info_message_login').addClass('d-none').text(''); if (data.status == "SUCCESS") { if (data.otp_status == 0) { $('#otp_email_login').val(data.email); $('#otp_submit_login').removeClass('d-none'); $('#info_message_login').removeClass('d-none').text( "OTP has been sent to your email, please verify."); } else { location.reload(); } } else if (data.status === "FAILED") { $('#err_message_login').removeClass('d-none').text(data.message); } }, error: function(xhr, status, error) { $('#err_message_login').removeClass('d-none').text('Login failed. Please try again.'); } }); } function verify_otp_login() { var otp_email = $('#otp_email_login').val(); var otp_number = $('#otp_number_login').val(); $.ajax({ type: 'POST', url: 'https://www.letsupdateskills.com/api/v1/verify-signin-otp', data: { "otp_email": otp_email, "otp_number": otp_number }, success: function(data) { if (data.status === "SUCCESS") { // window.location.href = "https://www.letsupdateskills.com/" + data.redirect; location.reload(); } else { $('#err_message_login').removeClass('d-none').text(data.error || 'Something went wrong'); $('#info_message_login').addClass('d-none').text(''); } }, error: function(xhr, status, error) { $('#err_message_login').removeClass('d-none').text( 'Failed to verify OTP. Please try again.'); } }); } // $('#register').on('submit', function(e) { // e.preventDefault(); // new_register(e); // }); function new_register(event) { event.preventDefault(); var email = $('#reg_email').val(); var password = $('#reg_password').val(); var first_name = $('#first_name').val(); var last_name = $('#last_name').val(); $.ajax({ type: 'POST', url: 'https://www.letsupdateskills.com/api/v1/register', data: { "email": email, "password": password, "first_name": first_name, "last_name": last_name }, success: function(data) { if (data.status == "SUCCESS") { $('#otp_user_id').val(data.user_id); $('#otp_submit').removeClass('d-none'); $('#otp_message').removeClass('d-none'); $('#err_message').addClass('d-none').text(data.error); $('#otp_message').text(data.message); } else if (data.status === "FAILED") { // Show error message $('#err_message').removeClass('d-none').text(data.error); } else { $('#err_message').removeClass('d-none'); $('#err_message').text(data.message); } }, error: function(xhr, status, error) { $('#err_message_login').removeClass('d-none').text('Sigin failed. Please try again.'); } }); } $('#otp_submit').on('submit', function(e) { e.preventDefault(); verify_otp(); }); function verify_otp(event) { var otp_user_id = $('#otp_user_id').val(); var otp_number = $('#otp_number').val(); $.ajax({ type: 'POST', url: 'https://www.letsupdateskills.com/api/v1/verify-otp', data: { "otp_user_id": otp_user_id, "otp_number": otp_number }, success: function(data) { if (data.status === "SUCCESS") { location.reload(); } else if (data.status === "FAILED") { // $('#err_message').removeClass('d-none').text(data.error || 'Something went wrong'); $('#otp_message').addClass('d-none'); $('#err_message').removeClass('d-none').text(data.error); } }, error: function(xhr, status, error) { $('#err_message').removeClass('d-none').text('Failed to verify OTP. Please try again.'); } }); } // $('.ajaxForm_Signup').on('submit', function(e) { // e.preventDefault(); // var radioButtons = document.getElementsByName("option");; // console.log(radioButtons); // for (var i = 0; i < radioButtons.length; i++) { // if (radioButtons[i].checked) { // var selectedValue = radioButtons[i].value; // console.log("Selected Value: " + selectedValue); // break; // } // } // var $this = $(this); // var action = $this.attr('action'); // var method = $this.attr('method'); // if ($this.valid()) { // $this.ajaxSubmit({ // dataType: 'JSON', // type: method, // headers: { // 'Auth': localStorage.getItem('auth_token') // }, // url: action, // /data: function(data){ // data.push({name: 'media', value: JSON.stringify(myFiles), type: 'text', required: true}); // },/ // beforeSubmit: function(arr, $form, options) { // $this.find('button[type=submit]').attr('data-hash', $this.find( // 'button[type=submit]').text()); // $this.find('button[type=submit]').prop("disabled", true); // $this.find('button[type=submit]').html( // '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...' // ); // }, // success: function(response) { // if (response.status == 'SUCCESS') { // console.log(response); // localStorage.setItem("auth_token", response.auth_token); // // $('#otp_submit').show(); // // localStorage.setItem("user_id", data.user_id); // $('#otp_user_id').val(response.user_id); // $('#otp_submit').removeClass('d-none'); // // document.getElementsById('otp_user_id').value = response.user_id; // // Swal.fire({ // // title: 'User Created Successfully', // // icon: 'success', // // confirmButtonColor: '#3085d6', // // confirmButtonText: 'Ok' // // }).then((result) => { // // if (result.isConfirmed) { // // // $('#otp_submit').show(); // // if (selectedValue == 'contributor') { // // console.log(selectedValue); // // window.location.href = // // "https://www.letsupdateskills.com/register-as-contributor"; // // return; // // } else { // // console.log("1"); // // window.location.href = "https://www.letsupdateskills.com"; // // return; // // } // // } // // }) // //if(response.redirect){ // //window.location.href=base_url+"/login"; // //} // } // var errorMessageType = $this.attr('error.message'); // if (errorMessageType == 'popup') { // $("#alertPopup").remove(); // if ($this.prepend(popupAlerts)) { // if (response.status == 'FAILED') { // $("#alertPopup .modal-body").removeClass('alert alert-success'); // $("#alertPopup .modal-body").addClass('alert alert-danger'); // } else { // $("#alertPopup .modal-body").removeClass('alert alert-danger'); // $("#alertPopup .modal-body").addClass('alert alert-success'); // } // $("#alertPopup .modal-body").text(response.message); // $('#alertPopup').modal('show'); // } // } else { // $(".alert").remove(); // if ($this.prepend(inlineAlerts)) { // if (response.status == 'FAILED') { // $this.find('.alert').removeClass('alert-success'); // $this.find('.alert').addClass('alert-danger'); // } else { // $this.find('.alert').addClass('alert-success'); // $this.find('.alert').removeClass('alert-danger'); // } // if ($this.find('.alert .text').text(response.message)) { // $this.find('.alert').removeClass('d-none'); // $this.find('.alert').addClass('show'); // } // } // } // $this.find('button[type=submit]').prop("disabled", false); // $this.find('button[type=submit] .spinner-border').remove(); // $this.find('button[type=submit]').html($this.find('button[type=submit]').attr( // 'data-hash')); // }, // error: function(xhr, status, err) { // $this.find('button[type=submit]').prop("disabled", false); // $this.find('button[type=submit] .spinner-border').remove(); // $this.find('button[type=submit]').html($this.find('button[type=submit]').attr( // 'data-hash')); // /if (xhr.status == '401'){ // window.location.href=base_url+'access-denied' // } // if (xhr.status == '404'){ // window.location.href=base_url+'not-found' // }/ // } // }) // } // return false; // }); </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2527847629969514" crossorigin="anonymous"></script> </html>

HTML Tutorials

HTML - Tags

Tags in HTML

HTML

HTML Introduction

HTML Text Fundamentals

HTML Lists & Links

HTML Add Images and Media

HTML Forms and Input Types

HTML Tables

HTML Semantic

HTML Advanced Attributes

HTML Document Head

HTML Build a Simple Webpage

Beginner 5 Hours