Course HTML Tutorial

Course HTML Tutorial

Course
Materials

HTML is the standard markup language for creating Web pages.


What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.

A Simple HTML Document

Example Explained
The declaration defines that this document is an HTML5 document
The element is the root element of an HTML page
The element contains meta information about the HTML page
The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)<br /> The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.<br /> The </p> <h1> element defines a large heading<br /> The </p> <p> element defines a paragraph<br /> What is an HTML Element?<br /> An HTML element is defined by a start tag, some content, and an end tag:</p> <p><tagname>Content goes here...</tagname><br /> The HTML element is everything from the start tag to the end tag:</p> <h1>My First Heading</h1> <p>My first paragraph.</p> </div> </div> <!--/.ld-tabs-content--> </div> <!--/.ld-tabs--> <div class="ld-item-list ld-lesson-list"> <div class="ld-section-heading"> <h2> Course Content </h2> <div class="ld-item-list-actions" data-ld-expand-list="true"> <div class="ld-expand-button ld-primary-background" id="ld-expand-button-1118" data-ld-expands="ld-item-list-1118" data-ld-expand-text="Expand All" data-ld-collapse-text="Collapse All"> <span class="ld-icon-arrow-down ld-icon"></span> <span class="ld-text">Expand All</span> </div> <!--/.ld-expand-button--> </div> <!--/.ld-item-list-actions--> </div> <!--/.ld-section-heading--> <div class="ld-item-list-items " id="ld-item-list-1118" data-ld-expand-list="true"> <div class="ld-item-list-item ld-expandable ld-item-lesson-item ld-lesson-item-1123 is_not_sample learndash-incomplete" id="ld-expand-1123" > <div class="ld-item-list-item-preview"> <a class="ld-item-name ld-primary-color-hover" href="https://tuf.org.pk/lessons/html-formatting/"> <div class="ld-status-icon ld-status-incomplete"></div> <div class="ld-item-title"> HTML Formatting <span class="ld-item-components"> <span class="ld-item-component"> 3 Topics </span> </span> <!--/.ld-item-components--> </div> <!--/.ld-item-title--> </a> <div class="ld-item-details"> <div class="ld-expand-button ld-button-alternate" data-ld-expands="ld-expand-1123" data-ld-expand-text="Expand" data-ld-collapse-text="Collapse"> <span class="ld-icon-arrow-down ld-icon ld-primary-background"></span> <span class="ld-text ld-primary-color">Expand</span> </div> <!--/.ld-expand-button--> </div> <!--/.ld-item-details--> </div> <!--/.ld-item-list-item-preview--> <div class="ld-item-list-item-expanded"> <div class="ld-table-list ld-topic-list ld-no-pagination" id="ld-expand-1123"> <div class="ld-table-list-header ld-primary-background"> <div class="ld-table-list-title"> <span class="ld-item-icon"> <span class="ld-icon ld-icon-content"></span> </span> <span class="ld-text"> Lesson Content </span> </div> <!--/.ld-tablet-list-title--> <div class="ld-table-list-lesson-details"> <span class="ld-lesson-list-progress"> 0% Complete </span> <span class="ld-lesson-list-steps"> 0/3 Steps </span> </div> <!--/.ld-table-list-lesson-details--> </div> <!--/.ld-table-list-header--> <div class="ld-table-list-items" id="ld-topic-list-1123" data-ld-expand-list> <div class="ld-table-list-item" id="ld-table-list-item-1144"> <a class="ld-table-list-item-preview ld-primary-color-hover ld-topic-row learndash-incomplete " href="https://tuf.org.pk/topic/html-basic/"> <div class="ld-status-icon ld-status-incomplete"></div> <span class="ld-topic-title">html basic</span> </a> </div> <!--/.ld-table-list-item--> <div class="ld-table-list-item" id="ld-table-list-item-1146"> <a class="ld-table-list-item-preview ld-primary-color-hover ld-topic-row learndash-incomplete " href="https://tuf.org.pk/topic/html-headings-2/"> <div class="ld-status-icon ld-status-incomplete"></div> <span class="ld-topic-title">html headings</span> </a> </div> <!--/.ld-table-list-item--> <div class="ld-table-list-item" id="ld-table-list-item-1148"> <a class="ld-table-list-item-preview ld-primary-color-hover ld-topic-row learndash-incomplete " href="https://tuf.org.pk/topic/html-paragraph-2/"> <div class="ld-status-icon ld-status-incomplete"></div> <span class="ld-topic-title">html paragraph</span> </a> </div> <!--/.ld-table-list-item--> </div> <!--/.ld-table-list-items--> <div class="ld-table-list-footer"> </div> <!--/.ld-table-list-footer--> </div> <!--/.ld-table-list--> </div> <!--/.ld-item-list-item-expanded--> </div> <!--/.ld-item-list-item--> <div class="ld-item-list-item ld-expandable ld-item-lesson-item ld-lesson-item-1121 is_not_sample learndash-incomplete" id="ld-expand-1121" > <div class="ld-item-list-item-preview"> <a class="ld-item-name ld-primary-color-hover" href="https://tuf.org.pk/lessons/html-basic-concept/"> <div class="ld-status-icon ld-status-incomplete"></div> <div class="ld-item-title"> HTML Basic Concept </div> <!--/.ld-item-title--> </a> <div class="ld-item-details"> </div> <!--/.ld-item-details--> </div> <!--/.ld-item-list-item-preview--> </div> <!--/.ld-item-list-item--> <div class="ld-item-list-item ld-expandable ld-item-lesson-item ld-lesson-item-1119 is_not_sample learndash-incomplete" id="ld-expand-1119" > <div class="ld-item-list-item-preview"> <a class="ld-item-name ld-primary-color-hover" href="https://tuf.org.pk/lessons/html-introduction/"> <div class="ld-status-icon ld-status-incomplete"></div> <div class="ld-item-title"> HTML Introduction </div> <!--/.ld-item-title--> </a> <div class="ld-item-details"> </div> <!--/.ld-item-details--> </div> <!--/.ld-item-list-item-preview--> </div> <!--/.ld-item-list-item--> </div> <!--/.ld-item-list-items--> </div> <!--/.ld-item-list--> </div> </div> </div><!-- .entry --> <div class="post-tags clr"> </div> </article> </div><!-- #content --> </div><!-- #primary --> <aside id="right-sidebar" class="sidebar-container widget-area sidebar-primary" itemscope="itemscope" itemtype="https://schema.org/WPSideBar" role="complementary" aria-label="Primary Sidebar"> <div id="right-sidebar-inner" class="clr"> <div id="search-2" class="sidebar-box widget_search clr"> <form role="search" method="get" class="searchform" action="https://tuf.org.pk/"> <label for="ocean-search-form-2"> <span class="screen-reader-text">Search for:</span> <input type="search" id="ocean-search-form-2" class="field" autocomplete="off" placeholder="Search" name="s"> </label> </form> </div><div id="recent-comments-2" class="sidebar-box widget_recent_comments clr"><h4 class="widget-title">Recent Comments</h4><ul id="recentcomments"></ul></div><div id="archives-2" class="sidebar-box widget_archive clr"><h4 class="widget-title">Archives</h4> <ul> </ul> </div><div id="categories-2" class="sidebar-box widget_categories clr"><h4 class="widget-title">Categories</h4> <ul> <li class="cat-item-none">No categories</li> </ul> </div><div id="meta-2" class="sidebar-box widget_meta clr"><h4 class="widget-title">Meta</h4> <ul> <li><a href="https://tuf.org.pk/wp-login.php">Log in</a></li> <li><a href="https://tuf.org.pk/feed/">Entries feed</a></li> <li><a href="https://tuf.org.pk/comments/feed/">Comments feed</a></li> <li><a href="https://wordpress.org/">WordPress.org</a></li> </ul> </div> </div><!-- #sidebar-inner --> </aside><!-- #right-sidebar --> </div><!-- #content-wrap --> </main><!-- #main --> <footer id="footer" class="site-footer" itemscope="itemscope" itemtype="https://schema.org/WPFooter" role="contentinfo"> <div id="footer-inner" class="clr"> <div id="footer-widgets" class="oceanwp-row clr"> <div class="footer-widgets-inner container"> <div class="footer-box span_1_of_4 col col-1"> <div id="text-3" class="footer-widget widget_text clr"><h3 class="widget-title">OUR PROJECTS</h3> <div class="textwidget"><p>The Tasuwwar Umeed Foundation<br /> is proud to initiate some<br /> landmarks projects as under:<br /> My Schools<br /> Allied Schools<br /> PGS Montessori House<br /> OPSM Karachi<br /> SIMT Technical College<br /> Orangi Gymkhana<br /> Adult literacy programs<br /> Legal & Medical Aids<br /> Various Vocational Training Programs</p> </div> </div> </div><!-- .footer-one-box --> <div class="footer-box span_1_of_4 col col-2"> <div id="nav_menu-4" class="footer-widget widget_nav_menu clr"><h3 class="widget-title">QUICK LINKS</h3><div class="menu-main-manu-container"><ul id="menu-main-manu-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1187"><a href="http://tuf.org.pk/">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1188"><a href="https://tuf.org.pk/about/">About</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1194"><a href="https://tuf.org.pk/what-we-do/">What We Do</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1653"><a href="https://tuf.org.pk/future-plans/">Future Plans</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1192"><a href="https://tuf.org.pk/our-projects/">Our Projects</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1193"><a href="https://tuf.org.pk/our-team/">Our Team</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1190"><a href="https://tuf.org.pk/get-involved/">Get Involved</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1189"><a href="https://tuf.org.pk/contact/">Contact</a></li> </ul></div></div> </div><!-- .footer-one-box --> <div class="footer-box span_1_of_4 col col-3 "> <div id="media_gallery-3" class="footer-widget widget_media_gallery clr"><h3 class="widget-title">GALLERY</h3><div id='gallery-1' class='gallery galleryid-1118 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'> <div class='gallery-icon landscape'> <a href='https://tuf.org.pk/charity/bg/'><img width="150" height="150" src="https://tuf.org.pk/wp-content/uploads/2021/03/bg-150x150.png" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy" /></a> </div></figure> </div> </div> </div><!-- .footer-one-box --> <div class="footer-box span_1_of_4 col col-4"> <div id="text-5" class="footer-widget widget_text clr"><h3 class="widget-title">CONTACT US</h3> <div class="textwidget"><p>Head Office<br /> 116 Bangalore Town<br /> Karachi, Pakistan. 7400</p> <p>Phone Number<br /> +123 456 7890</p> <p>Email<br /> contact.tuf@gmail.com<br /> www.tuf.org.pk</p> </div> </div> </div><!-- .footer-box --> </div><!-- .container --> </div><!-- #footer-widgets --> </div><!-- #footer-inner --> </footer><!-- #footer --> </div><!-- #wrap --> </div><!-- #outer-wrap --> <a id="scroll-top" class="scroll-top-right" href="#"><span class="fa fa-angle-up" aria-label="Scroll to the top of the page"></span></a> <div id="mobile-fullscreen" class="clr" > <div id="mobile-fullscreen-inner" class="clr"> <a href="javascript:void(0)" class="close" aria-label="Close Menu" > <div class="close-icon-wrap"> <div class="close-icon-inner"></div> </div> </a> <nav class="clr has-social" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" role="navigation"> <ul id="menu-main-manu-2" class="fs-dropdown-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1187"><a href="http://tuf.org.pk/">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1188"><a href="https://tuf.org.pk/about/">About</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1194"><a href="https://tuf.org.pk/what-we-do/">What We Do</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1653"><a href="https://tuf.org.pk/future-plans/">Future Plans</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1192"><a href="https://tuf.org.pk/our-projects/">Our Projects</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1193"><a href="https://tuf.org.pk/our-team/">Our Team</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1190"><a href="https://tuf.org.pk/get-involved/">Get Involved</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1189"><a href="https://tuf.org.pk/contact/">Contact</a></li> <li class="search-toggle-li" ><a href="javascript:void(0)" class="site-search-toggle search-dropdown-toggle" aria-label="Search website"><span class="icon-magnifier" aria-hidden="true"></span></a></li></ul> <div id="mobile-search" class="clr"> <form method="get" action="https://tuf.org.pk/" class="header-searchform" role="search" aria-label="Mobile Search"> <input type="search" name="s" value="" autocomplete="off" /> <label>Type your search<span><i></i><i></i><i></i></span></label> </form> </div> <div class="oceanwp-social-menu clr social-with-style"> <div class="social-menu-inner clr minimal"> <ul aria-label="Social links"> <li class="oceanwp-twitter"><a href="#" aria-label="Twitter (opens in a new tab)" target="_blank" rel="noopener noreferrer"><span class="fab fa-twitter" aria-hidden="true"></span></a></li><li class="oceanwp-facebook"><a href="#" aria-label="Facebook (opens in a new tab)" target="_blank" rel="noopener noreferrer"><span class="fab fa-facebook" aria-hidden="true"></span></a></li><li class="oceanwp-vk"><a href="#" aria-label="VK (opens in a new tab)" target="_blank" rel="noopener noreferrer"><span class="fab fa-vk" aria-hidden="true"></span></a></li><li class="oceanwp-instagram"><a href="#" aria-label="Instagram (opens in a new tab)" target="_blank" rel="noopener noreferrer"><span class="fab fa-instagram" aria-hidden="true"></span></a></li><li class="oceanwp-linkedin"><a href="#" aria-label="LinkedIn (opens in a new tab)" target="_blank" rel="noopener noreferrer"><span class="fab fa-linkedin" aria-hidden="true"></span></a></li><li class="oceanwp-vine"><a href="#" aria-label="Vine (opens in a new tab)" target="_blank" rel="noopener noreferrer"><span class="fab fa-vine" aria-hidden="true"></span></a></li> </ul> </div> </div> </nav> </div> </div> <script type="text/javascript"> jQuery( document ).ready( function() { var ajaxurl = 'https://tuf.org.pk/wp-admin/admin-ajax.php'; if ( 0 < jQuery( '.fusion-login-nonce' ).length ) { jQuery.get( ajaxurl, { 'action': 'fusion_login_nonce' }, function( response ) { jQuery( '.fusion-login-nonce' ).html( response ); }); } }); </script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/plugins/mystickymenu/js/detectmobilebrowser.js?ver=2.5.3' id='detectmobilebrowser-js'></script> <script type='text/javascript' id='mystickymenu-js-extra'> /* <![CDATA[ */ var option = {"mystickyClass":"header#site-header","activationHeight":"0","disableWidth":"0","disableLargeWidth":"0","adminBar":"false","device_desktop":"1","device_mobile":"1","mystickyTransition":"slide","mysticky_disable_down":"false"}; /* ]]> */ </script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/plugins/mystickymenu/js/mystickymenu.min.js?ver=2.5.3' id='mystickymenu-js'></script> <script type='text/javascript' src='//tuf.org.pk/wp-content/plugins/sfwd-lms/themes/legacy/templates/learndash_pager.min.js?ver=3.1.7' id='learndash_pager_js-js'></script> <script type='text/javascript' id='learndash_template_script_js-js-extra'> /* <![CDATA[ */ var sfwd_data = {"json":"{\"ajaxurl\":\"https:\\\/\\\/tuf.org.pk\\\/wp-admin\\\/admin-ajax.php\"}"}; /* ]]> */ </script> <script type='text/javascript' src='//tuf.org.pk/wp-content/plugins/sfwd-lms/themes/legacy/templates/learndash_template_script.min.js?ver=3.1.7' id='learndash_template_script_js-js'></script> <script type='text/javascript' id='learndash-front-js-extra'> /* <![CDATA[ */ var ajaxurl = "https:\/\/tuf.org.pk\/wp-admin\/admin-ajax.php"; var ldVars = {"postID":"1118","videoReqMsg":"You must watch the video before accessing this content"}; /* ]]> */ </script> <script type='text/javascript' src='//tuf.org.pk/wp-content/plugins/sfwd-lms/themes/ld30/assets/js/learndash.js?ver=3.1.7' id='learndash-front-js'></script> <script type='text/javascript' id='superpwa-register-sw-js-extra'> /* <![CDATA[ */ var superpwa_sw = {"url":"\/superpwa-sw.js","disable_addtohome":"0","enableOnDesktop":""}; /* ]]> */ </script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/plugins/super-progressive-web-apps/public/js/register-sw.js' id='superpwa-register-sw-js'></script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/plugins/ht-mega-for-elementor/assets/js/popper.min.js?ver=1.5.9' id='htmega-popper-js'></script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/plugins/ht-mega-for-elementor/assets/js/htbbootstrap.js?ver=1.5.9' id='htbbootstrap-js'></script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/plugins/ht-mega-for-elementor/assets/js/waypoints.js?ver=1.5.9' id='waypoints-js'></script> <script type='text/javascript' src='https://tuf.org.pk/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js'></script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/plugins/ht-mega-for-elementor/assets/js/jquery.magnific-popup.min.js?ver=1.5.9' id='magnific-popup-js'></script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/themes/oceanwp/assets/js/third/lightbox.min.js?ver=2.0.3' id='oceanwp-lightbox-js'></script> <script type='text/javascript' id='oceanwp-main-js-extra'> /* <![CDATA[ */ var oceanwpLocalize = {"isRTL":"","menuSearchStyle":"drop_down","sidrSource":null,"sidrDisplace":"1","sidrSide":"left","sidrDropdownTarget":"link","verticalHeaderTarget":"link","customSelects":".woocommerce-ordering .orderby, #dropdown_product_cat, .widget_categories select, .widget_archive select, .single-product .variations_form .variations select","ajax_url":"https:\/\/tuf.org.pk\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/themes/oceanwp/assets/js/main.min.js?ver=2.0.3' id='oceanwp-main-js'></script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/plugins/ocean-extra/includes/widgets/js/mailchimp.min.js?ver=5.7.2' id='oe-mailchimp-script-js'></script> <script type='text/javascript' src='https://tuf.org.pk/wp-content/uploads/fusion-scripts/9eace83246f69db3fa6b816f5daafb0b.min.js' id='fusion-scripts-js'></script> <script type='text/javascript' src='https://tuf.org.pk/wp-includes/js/wp-embed.min.js?ver=5.7.2' id='wp-embed-js'></script> <!--[if lt IE 9]> <script type='text/javascript' src='https://tuf.org.pk/wp-content/themes/oceanwp/assets/js/third/html5.min.js?ver=2.0.3' id='html5shiv-js'></script> <![endif]--> </body> </html> <!-- Page generated by LiteSpeed Cache 3.6.4 on 2021-08-04 11:20:58 -->