HTML Full Course

HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা দিয়ে আপনি যেকোনো তথ্য, ছবি এমনকি ভিডিওকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ পাবেন। আর এই কাজটি করতে হলে আপনাকে একটা ওয়েব পেজ তৈরী করতে হবে। আর একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়েই । HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।

Beginner 0(0 Ratings) 0 Students enrolled
Created by Mohammad Arifur Arif Last updated Tue, 17-Jan-2023 English
What will i learn?
  • ওয়েব পেজ তৈরি করা, ওয়েব পেজ এর বিভিন্ন কনটেন্ট ( যেমন টেক্সট, ইমেজ ইত্যাদি ) কে সুন্দরভাবে বিন্যাস করা, ডিজাইন করা এবং ওয়েব পেজ এর আউটলুক (outlook) দেওয়ার জন্যই এইচটিএমএল (html) ব্যবহার করা হয়।অর্থাৎ একটি ওয়েব পেজ তৈরি করা এবং বিভিন্ন ব্রাউজার ( যেমন মজিলা ফায়ারফক্স, ইন্টারনেট এক্সপ্লোরার ইত্যাদি ) তে প্রদর্শন করানো।

Curriculum for this course
0 Lessons 00:00:00 Hours
HTML Element
0 Lessons 00:00:00 Hours
Requirements
  • Basic Knowledge
+ View more
Description

element 
TagDescription
<!--...-->Defines a comment
<!DOCTYPE> Defines the document type
Defines a hyperlink
Defines an abbreviation or an acronym
Not supported in HTML5. Use  instead.
Defines an acronym
Defines contact information for the author/owner of a document
<applet>Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
<area>Defines an area inside an image map
Defines an article
Defines content aside from the page content
<audio>Defines embedded sound content
Defines bold text
<base>Specifies the base URL/target for all relative URLs in a document
<basefont>Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document
Isolates a part of text that might be formatted in a different direction from other text outside it
Overrides the current text direction
Not supported in HTML5. Use CSS instead.
Defines big text
Defines a section that is quoted from another source
<body>Defines the document's body

Defines a single line break
<button>Defines a clickable button
Used to draw graphics, on the fly, via scripting (usually JavaScript)
Defines a table caption
Not supported in HTML5. Use CSS instead.
Defines centered text
Defines the title of a work
Defines a piece of computer code
Specifies column properties for each column within a
Specifies a group of one or more columns in a table for formatting
Adds a machine-readable translation of a given content
Specifies a list of pre-defined options for input controls
Defines a description/value of a term in a description list
Defines text that has been deleted from a document
Defines additional details that the user can view or hide
Specifies a term that is going to be defined within the content
Defines a dialog box or window
Not supported in HTML5. Use 
     instead.
    Defines a directory list
Defines a section in a document
Defines a description list
Defines a term/name in a description list
Defines emphasized text 
<embed>Defines a container for an external application
Groups related elements in a form
Defines a caption for a
element
Specifies self-contained content
Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text
Defines a footer for a document or section
<form>Defines an HTML form for user input
<frame>Not supported in HTML5.
Defines a window (a frame) in a frameset
<frameset>Not supported in HTML5.
Defines a set of frames

to

Defines HTML headings
<head>Contains metadata/information for the document
Defines a header for a document or section

Defines a thematic change in the content
<html>Defines the root of an HTML document
Defines a part of text in an alternate voice or mood
<iframe>Defines an inline frame
</></>< style="box-sizing: inherit; padding: 8px; vertical-align: top;">Defines an image
<input>Defines an input control
Defines a text that has been inserted into a document
Defines keyboard input
Defines a label for an <input> element
Defines a caption for a
element
  • Defines a list item
    <link>Defines the relationship between a document and an external resource (most used to link to style sheets)
    Specifies the main content of a document
    Defines an image map
    Defines marked/highlighted text
    <meta>Defines metadata about an HTML document
    Defines a scalar measurement within a known range (a gauge)
    Defines navigation links
    </a></td><td xss=removed><span xss=removed><span class="deprecated" xss=removed>Not supported in HTML5.<br xss=removed></span>Defines an alternate content for users that do not support frames</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_noscript.asp" xss=removed><noscript></a></td><td xss=removed><span xss=removed>Defines an alternate content for users that do not support client-side scripts</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_object.asp" xss=removed>&lt;object&gt;</a></td><td xss=removed><span xss=removed>Defines a container for an external application</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_ol.asp" xss=removed><ol></a></td><td xss=removed><span xss=removed>Defines an ordered list</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_optgroup.asp" xss=removed><optgroup></a></td><td xss=removed><span xss=removed>Defines a group of related options in a drop-down list</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_option.asp" xss=removed><option></a></td><td xss=removed><span xss=removed>Defines an option in a drop-down list</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_output.asp" xss=removed><output></a></td><td xss=removed><span xss=removed>Defines the result of a calculation</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_p.asp" xss=removed><p></a></td><td xss=removed><span xss=removed>Defines a paragraph</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_param.asp" xss=removed><param></a></td><td xss=removed><span xss=removed>Defines a parameter for an object</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_picture.asp" xss=removed><picture></a></td><td xss=removed><span xss=removed>Defines a container for multiple image resources</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_pre.asp" xss=removed><pre></a></td><td xss=removed><span xss=removed>Defines preformatted text</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_progress.asp" xss=removed><progress></a></td><td xss=removed><span xss=removed>Represents the progress of a task</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_q.asp" xss=removed><q></a></td><td xss=removed><span xss=removed>Defines a short quotation</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_rp.asp" xss=removed><rp></a></td><td xss=removed><span xss=removed>Defines what to show in browsers that do not support ruby annotations</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_rt.asp" xss=removed><rt></a></td><td xss=removed><span xss=removed>Defines an explanation/pronunciation of characters (for East Asian typography)</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_ruby.asp" xss=removed><ruby></a></td><td xss=removed><span xss=removed>Defines a ruby annotation (for East Asian typography)</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_s.asp" xss=removed><s></a></td><td xss=removed><span xss=removed>Defines text that is no longer correct</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_samp.asp" xss=removed><samp></a></td><td xss=removed><span xss=removed>Defines sample output from a computer program</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_script.asp" xss=removed>[removed]</a></td><td xss=removed><span xss=removed>Defines a client-side script</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_section.asp" xss=removed><section></a></td><td xss=removed><span xss=removed>Defines a section in a document</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_select.asp" xss=removed>&lt;select&gt;</a></td><td xss=removed><span xss=removed>Defines a drop-down list</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_small.asp" xss=removed><small></a></td><td xss=removed><span xss=removed>Defines smaller text</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_source.asp" xss=removed><source></a></td><td xss=removed><span xss=removed>Defines multiple media resources for media elements (&lt;video&gt; and &lt;audio&gt;)</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_span.asp" xss=removed><span></a></td><td xss=removed><span xss=removed>Defines a section in a document</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_strike.asp" class="notsupported" xss=removed><strike></a></td><td xss=removed><span xss=removed><span class="deprecated" xss=removed>Not supported in HTML5. Use <a href="https://www.w3schools.com/tags/tag_del.asp" xss=removed><del></a> or <a href="https://www.w3schools.com/tags/tag_s.asp" xss=removed><s></a> instead.<br xss=removed></span>Defines strikethrough text</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_strong.asp" xss=removed><strong></a></td><td xss=removed><span xss=removed>Defines important text</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_style.asp" xss=removed>&lt;style&gt;</a></td><td xss=removed><span xss=removed>Defines style information for a document</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_sub.asp" xss=removed><sub></a></td><td xss=removed><span xss=removed>Defines subscripted text</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_summary.asp" xss=removed><summary></a></td><td xss=removed><span xss=removed>Defines a visible heading for a <details> element</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_sup.asp" xss=removed><sup></a></td><td xss=removed><span xss=removed>Defines superscripted text</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_svg.asp" xss=removed>&lt;svg&gt;</a></td><td xss=removed><span xss=removed>Defines a container for SVG graphics</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_table.asp" xss=removed><table></a></td><td xss=removed><span xss=removed>Defines a table</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_tbody.asp" xss=removed><tbody></a></td><td xss=removed><span xss=removed>Groups the body content in a table</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_td.asp" xss=removed><td></a></td><td xss=removed><span xss=removed>Defines a cell in a table</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_template.asp" xss=removed><template></a></td><td xss=removed><span xss=removed>Defines a container for content that should be hidden when the page loads</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_textarea.asp" xss=removed>&lt;textarea&gt;</a></td><td xss=removed><span xss=removed>Defines a multiline input control (text area)</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_tfoot.asp" xss=removed><tfoot></a></td><td xss=removed><span xss=removed>Groups the footer content in a table</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_th.asp" xss=removed><th></a></td><td xss=removed><span xss=removed>Defines a header cell in a table</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_thead.asp" xss=removed><thead></a></td><td xss=removed><span xss=removed>Groups the header content in a table</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_time.asp" xss=removed><time></a></td><td xss=removed><span xss=removed>Defines a specific time (or datetime)</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_title.asp" xss=removed>&lt;title&gt;</a></td><td xss=removed><span xss=removed>Defines a title for the document</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_tr.asp" xss=removed><tr></a></td><td xss=removed><span xss=removed>Defines a row in a table</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_track.asp" xss=removed><track></a></td><td xss=removed><span xss=removed>Defines text tracks for media elements (&lt;video&gt; and &lt;audio&gt;)</span></td></tr><tr xss=removed><td xss=removed><a class="notsupported" href="https://www.w3schools.com/tags/tag_tt.asp" xss=removed><tt></a></td><td xss=removed><span xss=removed><span class="deprecated" xss=removed>Not supported in HTML5. Use CSS instead.<br xss=removed></span>Defines teletype text</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_u.asp" xss=removed><u></a></td><td xss=removed><span xss=removed>Defines some text that is unarticulated and styled differently from normal text</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_ul.asp" xss=removed><ul></a></td><td xss=removed><span xss=removed>Defines an unordered list</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_var.asp" xss=removed><var></a></td><td xss=removed><span xss=removed>Defines a variable</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_video.asp" xss=removed>&lt;video&gt;</a></td><td xss=removed><span xss=removed>Defines embedded video content</span></td></tr><tr xss=removed><td xss=removed><a href="https://www.w3schools.com/tags/tag_wbr.asp" xss=removed><wbr></a></td><td xss=removed><span xss=removed>Defines a possible line-break<br><br></span></td></tr></tbody></table></p> </div> </div> </div> <div class="compare-box view-more-parent"> <div class="view-more" onclick="viewMore(this)">+ View more</div> <div class="compare-title">Other related courses</div> <div class="compare-courses-wrap"> </div> </div> <div class="about-instructor-box"> <div class="about-instructor-title"> About the instructor </div> <div class="row"> <div class="col-lg-4"> <div class="about-instructor-image"> <img src="https://codequest.iarifbd.com/uploads/user_image/a127801e5751809f97573419f31565f4.jpg" alt="" class="img-fluid"> <ul> <!-- <li><i class="fas fa-star"></i><b>4.4</b> Average Rating</li> --> <li><i class="fas fa-comment"></i><b> 39 </b> Reviews</li> <li><i class="fas fa-user"></i><b> 7 </b> Students</li> <li><i class="fas fa-play-circle"></i><b> 7 </b> Courses</li> </ul> </div> </div> <div class="col-lg-8"> <div class="about-instructor-details view-more-parent"> <div class="view-more" onclick="viewMore(this)">+ View more</div> <div class="instructor-name"> <a href="https://codequest.iarifbd.com/home/instructor_page/8">Mohammad Arifur Arif</a> </div> <div class="instructor-title"> </div> <div class="instructor-bio"> <p xss=removed>With nearly two decades of experience in the IT industry, I have honed my expertise in IT management, operations, and ERP development and implementation, particularly within the construction sector. My extensive background equips me to deliver comprehensive and innovative solutions tailored to address the unique challenges of the construction industry.</p> <p xss=removed>As a seasoned consultant, I am dedicated to ensuring excellence in every project. I leverage my deep knowledge and skills to enhance efficiency and productivity, providing strategic insights and leveraging cutting-edge technology to drive organizational success.</p> <p xss=removed>My commitment is to support organizations in achieving their goals by offering solutions that not only meet but exceed industry standards. I am passionate about utilizing my experience to foster growth and operational excellence in the dynamic world of construction.</p> </div> </div> </div> </div> </div> <div class="student-feedback-box"> <div class="student-feedback-title"> Student feedback </div> <div class="row"> <div class="col-lg-3"> <div class="average-rating"> <div class="num"> 0 </div> <div class="rating"> <i class="fas fa-star" style="color: #abb0bb;"></i> <i class="fas fa-star" style="color: #abb0bb;"></i> <i class="fas fa-star" style="color: #abb0bb;"></i> <i class="fas fa-star" style="color: #abb0bb;"></i> <i class="fas fa-star" style="color: #abb0bb;"></i> </div> <div class="title">Average rating</div> </div> </div> <div class="col-lg-9"> <div class="individual-rating"> <ul> <li> <div class="progress"> <div class="progress-bar" style="width: 0%"></div> </div> <div> <span class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star filled"></i> </span> <span>0%</span> </div> </li> <li> <div class="progress"> <div class="progress-bar" style="width: 0%"></div> </div> <div> <span class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> </span> <span>0%</span> </div> </li> <li> <div class="progress"> <div class="progress-bar" style="width: 0%"></div> </div> <div> <span class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> </span> <span>0%</span> </div> </li> <li> <div class="progress"> <div class="progress-bar" style="width: 0%"></div> </div> <div> <span class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> </span> <span>0%</span> </div> </li> <li> <div class="progress"> <div class="progress-bar" style="width: 0%"></div> </div> <div> <span class="rating"> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> <i class="fas fa-star filled"></i> </span> <span>0%</span> </div> </li> </ul> </div> </div> </div> <div class="reviews"> <div class="reviews-title">Reviews</div> <ul> </ul> </div> </div> </div> <div class="col-lg-4"> <div class="course-sidebar natural"> <div class="course-sidebar-text-box"> <div class="price"> <span class = "current-price"><span class="current-price">TK 7360</span></span> <input type="hidden" id = "total_price_of_checking_out" value="TK 7360"> </div> <!-- WISHLIST BUTTON --> <div class="buy-btns"> <button class="btn btn-add-wishlist " type="button" id = "11" onclick="handleAddToWishlist(this)"> Add to wishlist </button> </div> <div class="buy-btns"> <a href = "javascript::" class="btn btn-buy-now" id = "course_11" onclick="handleBuyNow(this)">Buy now</a> <button class="btn btn-add-cart" type="button" id = "11" onclick="handleCartItems(this)">Add to cart</button> </div> <div class="includes"> <div class="title"><b>Includes:</b></div> <ul> <li><i class="far fa-file-video"></i> 00:00:00 Hours On demand videos </li> <li><i class="far fa-file"></i>0 Lessons</li> <li><i class="fas fa-mobile-alt"></i>Access on mobile and tv</li> <li><i class="far fa-compass"></i>Full lifetime access</li> </ul> </div> </div> </div> </div> </div> </div> </section> <!-- Modal --> <!-- Modal --> <style media="screen"> .embed-responsive-16by9::before { padding-top : 0px; } </style> <script type="text/javascript"> function handleCartItems(elem) { url1 = 'https://codequest.iarifbd.com/home/handleCartItems'; url2 = 'https://codequest.iarifbd.com/home/refreshWishList'; $.ajax({ url: url1, type : 'POST', data : {course_id : elem.id}, success: function(response) { $('#cart_items').html(response); if ($(elem).hasClass('addedToCart')) { $(elem).removeClass('addedToCart') $(elem).text("Add to cart"); }else { $(elem).addClass('addedToCart') $(elem).text("Added to cart"); } $.ajax({ url: url2, type : 'POST', success: function(response) { $('#wishlist_items').html(response); } }); } }); } function handleBuyNow(elem) { url1 = 'https://codequest.iarifbd.com/home/handleCartItemForBuyNowButton'; url2 = 'https://codequest.iarifbd.com/home/refreshWishList'; urlToRedirect = 'https://codequest.iarifbd.com/home/shopping_cart'; var explodedArray = elem.id.split("_"); var course_id = explodedArray[1]; $.ajax({ url: url1, type : 'POST', data : {course_id : course_id}, success: function(response) { $('#cart_items').html(response); $.ajax({ url: url2, type : 'POST', success: function(response) { $('#wishlist_items').html(response); toastr.warning('Please wait....'); setTimeout( function() { window.location.replace(urlToRedirect); }, 1500); } }); } }); } function handleEnrolledButton() { $.ajax({ url: 'https://codequest.iarifbd.com/home/isLoggedIn', success: function(response) { if (!response) { window.location.replace("https://codequest.iarifbd.com/login"); } } }); } function handleAddToWishlist(elem) { $.ajax({ url: 'https://codequest.iarifbd.com/home/handleWishList', type : 'POST', data : {course_id : elem.id}, success: function(response) { if (!response) { window.location.replace("https://codequest.iarifbd.com/login"); }else { if ($(elem).hasClass('active')) { $(elem).removeClass('active'); $(elem).text("Add to wishlist"); }else { $(elem).addClass('active'); $(elem).text("Added to wishlist"); } $('#wishlist_items').html(response); } } }); } function pausePreview() { player.pause(); } </script> <footer class="footer-area d-print-none"> <div class="container-xl"> <div class="row"> <div class="col-md-6"> <p class="copyright-text"> <a href=""><img src="https://codequest.iarifbd.com/uploads/system/9ed9328611fe3f45b3cce8ffe386ee97.png" alt="" class="d-inline-block" width="110"></a> <a href="https://codequest.iarifbd.com/" target="_blank">ASD (Active Software Developers) Community</a> </p> </div> <div class="col-md-6"> <ul class="nav justify-content-md-end footer-menu"> <li class="nav-item"> <a class="nav-link" href="https://codequest.iarifbd.com/home/about_us">About</a> </li> <li class="nav-item"> <a class="nav-link" href="https://codequest.iarifbd.com/home/privacy_policy">Privacy policy</a> </li> <li class="nav-item"> <a class="nav-link" href="https://codequest.iarifbd.com/home/terms_and_condition">Terms and condition</a> </li> <li class="nav-item"> <a class="nav-link" href="https://codequest.iarifbd.com/home/login"> Login </a> </li> <li> <select class="language_selector" onchange="switch_language(this.value)"> <option value="english" selected>English</option> </select> </li> </ul> </div> </div> </div> </footer> <!-- PAYMENT MODAL --> <!-- Modal --> <!-- Modal --> <div class="modal fade multi-step" id="EditRatingModal" tabindex="-1" role="dialog" aria-hidden="true" reset-on-close="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content edit-rating-modal"> <div class="modal-header"> <h5 class="modal-title step-1" data-step="1">Step 1</h5> <h5 class="modal-title step-2" data-step="2">Step 2</h5> <h5 class="m-progress-stats modal-title"> &nbsp;of&nbsp;<span class="m-progress-total"></span> </h5> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">&times;</span> </button> </div> <div class="m-progress-bar-wrapper"> <div class="m-progress-bar"> </div> </div> <div class="modal-body step step-1"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="modal-rating-box"> <h4 class="rating-title">How would you rate this course overall?</h4> <fieldset class="your-rating"> <input type="radio" id="star5" name="rating" value="5" /> <label class = "full" for="star5"></label> <!-- <input type="radio" id="star4half" name="rating" value="4 and a half" /> <label class="half" for="star4half"></label> --> <input type="radio" id="star4" name="rating" value="4" /> <label class = "full" for="star4"></label> <!-- <input type="radio" id="star3half" name="rating" value="3 and a half" /> <label class="half" for="star3half"></label> --> <input type="radio" id="star3" name="rating" value="3" /> <label class = "full" for="star3"></label> <!-- <input type="radio" id="star2half" name="rating" value="2 and a half" /> <label class="half" for="star2half"></label> --> <input type="radio" id="star2" name="rating" value="2" /> <label class = "full" for="star2"></label> <!-- <input type="radio" id="star1half" name="rating" value="1 and a half" /> <label class="half" for="star1half"></label> --> <input type="radio" id="star1" name="rating" value="1" /> <label class = "full" for="star1"></label> <!-- <input type="radio" id="starhalf" name="rating" value="half" /> <label class="half" for="starhalf"></label> --> </fieldset> </div> </div> <div class="col-md-6"> <div class="modal-course-preview-box"> <div class="card"> <img class="card-img-top img-fluid" id = "course_thumbnail_1" alt=""> <div class="card-body"> <h5 class="card-title" class = "course_title_for_rating" id = "course_title_1"></h5> <p class="card-text" id = "instructor_details"> </p> </div> </div> </div> </div> </div> </div> </div> <div class="modal-body step step-2"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="modal-rating-comment-box"> <h4 class="rating-title">Write a public review</h4> <textarea id = "review_of_a_course" name = "review_of_a_course" placeholder="Describe your experience what you got out of the course and other helpful highlights. What did the instructor do well and what could use some improvement?" maxlength="65000" class="form-control"></textarea> </div> </div> <div class="col-md-6"> <div class="modal-course-preview-box"> <div class="card"> <img class="card-img-top img-fluid" id = "course_thumbnail_2" alt=""> <div class="card-body"> <h5 class="card-title" class = "course_title_for_rating" id = "course_title_2"></h5> <p class="card-text"> - Md. Arifur Rahman Arif </p> </div> </div> </div> </div> </div> </div> </div> <input type="hidden" name="course_id" id = "course_id_for_rating" value=""> <div class="modal-footer"> <button type="button" class="btn btn-primary next step step-1" data-step="1" onclick="sendEvent(2)">Next</button> <button type="button" class="btn btn-primary previous step step-2 mr-auto" data-step="2" onclick="sendEvent(1)">Previous</button> <button type="button" class="btn btn-primary publish step step-2" onclick="publishRating($('#course_id_for_rating').val())" id = "">Publish</button> </div> </div> </div> </div><!-- Modal --> <script type="text/javascript"> function switch_language(language) { $.ajax({ url: 'https://codequest.iarifbd.com/home/site_language', type: 'post', data: {language : language}, success: function(response) { setTimeout(function(){ location.reload(); }, 500); } }); } </script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/vendor/modernizr-3.5.0.min.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/vendor/jquery-3.2.1.min.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/popper.min.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/bootstrap.min.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/slick.min.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/select2.min.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/tinymce.min.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/multi-step-modal.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/jquery.webui-popover.min.js"></script> <script src="https://content.jwplatform.com/libraries/O7BMTay5.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/main.js"></script> <script src="https://codequest.iarifbd.com/assets/global/toastr/toastr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/bootstrap-tagsinput.min.js"></script> <script src="https://codequest.iarifbd.com/assets/frontend/default/js/custom.js"></script> <!-- SHOW TOASTR NOTIFIVATION --> <script type="text/javascript"> function showAjaxModal(url) { // SHOWING AJAX PRELOADER IMAGE jQuery('#modal_ajax .modal-body').html('<div class="w-100 text-center pt-5"><img class="mt-5 mb-5" width="80px" src="https://codequest.iarifbd.com/assets/global/gif/page-loader-2.gif"></div>'); // LOADING THE AJAX MODAL jQuery('#modal_ajax').modal('show', {backdrop: 'true'}); // SHOW AJAX RESPONSE ON REQUEST SUCCESS $.ajax({ url: url, success: function(response) { jQuery('#modal_ajax .modal-body').html(response); } }); } </script> <!-- (Ajax Modal)--> <div class="modal fade" id="modal_ajax"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <div class="modal-body" style="overflow:auto;"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script type="text/javascript"> function confirm_modal(delete_url) { jQuery('#modal-4').modal('show', {backdrop: 'static'}); document.getElementById('delete_link').setAttribute('href' , delete_url); } </script> <!-- (Normal Modal)--> <div class="modal fade" id="modal-4"> <div class="modal-dialog"> <div class="modal-content" style="margin-top:100px;"> <div class="modal-header"> <h4 class="modal-title text-center">Are you sure ?</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <div class="modal-footer" style="margin:0px; border-top:0px; text-align:center;"> <a href="#" class="btn btn-danger btn-yes" id="delete_link" data-dismiss="modal">Yes</a> <button type="button" class="btn btn-info btn-cancel" data-dismiss="modal">No</button> </div> </div> </div> </div> <script type="text/javascript"> function async_modal() { const asyncModal = new Promise(function(resolve, reject){ $('#modal-4').modal('show'); $('#modal-4 .btn-yes').click(function(){ resolve(true); }); $('#modal-4 .btn-cancel').click(function(){ resolve(false); }); }); return asyncModal; } </script> <script type="text/javascript"> function toggleRatingView(course_id) { $('#course_info_view_'+course_id).toggle(); $('#course_rating_view_'+course_id).toggle(); $('#edit_rating_btn_'+course_id).toggle(); $('#cancel_rating_btn_'+course_id).toggle(); } function publishRating(course_id) { var review = $('#review_of_a_course_'+course_id).val(); var starRating = 0; starRating = $('#star_rating_of_course_'+course_id).val(); if (starRating > 0) { $.ajax({ type : 'POST', url : 'https://codequest.iarifbd.com/home/rate_course', data : {course_id : course_id, review : review, starRating : starRating}, success : function(response) { location.reload(); } }); }else{ } } </script> </body> </html>