Formatting and Listing
Subject: Introduction to HTML and Web Technology
Let us look at these triplet (BOLD, UNDERLINE and ITALICS) and use them in our previous exercise.
Open to your website folder and edit your web page e.g home.html in notepad or your prefered code editor as you did in the previous exercise.
<br /><html> <br /> <head> <br /> <title> TEA Learn Learning Management System </title> <br /> </head> <br /> <body> <br /> <b>WELCOME</b> <br /> <p align="center"> <br /> <u>TEA Learn</u> <i>empowers you with</i> technology skills, expand your knowledge with quality education and enable you explore your curiosity with creative art. <br /> <p/> <br /> .... <br /> <br /></body> <br /></html> <br /><pre><xmp> <br />The new line of text "WELCOME" will appear in bold because the <pre><xmp><b>...</b><pre><xmp> tag <br /> <br />The line "TEA Learn" wrapped in <u>...</u> will be underlined.... <br /> <br /> <br /> And "empowers you with" is in italics <i>.....</i> <br /> <br /> <br /> <br /> <br /> <br />BOLD AND ITALICS A TEXT <br /> <br /> <br /><b><i>WELCOME</i></b> <br /> <br /> <br /> <br /> <br />WHAT ABOUT FONT <br />To make a text appear bigger, change its color or font style (face) using HTML you will need to use the <font>....</font> tag. <br /> <br /> <br />Example 1 <br /> <br /> <br /><b><font size=6>WELCOME</font></b> <br /> <br /> <br /> <br />Increases the font size to 6 <br /> <br />Example 2 <br /> <br /> <br /><font color="red">technology skills</font> <br /> <br /> <br /> <br />Change the colour to red (note: no U in american color spelling ) <br /> <br />Example 3 <br /> <br /> <br /><font face="Arial">technology skills</font> <br /> <br /> <br /> <br />Change the font style to Arial <br /> <br />Example 4 <br /> <br /> <br /><font face="Arial" size=6 color="blue">technology skills</font> <br /> <br />Change text font, increase size and change color. <br /> <br />LISTING ITEMS <br /> <br /> <br /><h4>WHY TEA LEARN?</h4> <br /><ul> <br /> <li>Personalized learning </li> <br /> <li>Quality Content </li> <br /> <li>Empower Educators </li> <br /></ul> <br /> <br /><ul>...</ul> meaning Unordered List, this is a listing that use bullets symbols. <br /> <br /> <br />To use numbering list change the tag to <ol>....</ol> Ordered List. <br /> <br /> <br /><li>.....</li> meaning List Item. Either you use Unordered List or Ordered List the List Item tag <li> remains thesame. <br /> <br /> <br /> <br /> <br /> <br />ASSIGNMENT <br /> <br /> <br />Drop your code in the comment box and upload the picture of the screenshot with it. <br /> <br /> <br /> <br /> <br /> <br />If you have come this far, I said congratulations and happy coding!!! <br /> <br /><br/><br/>By: <b>Benjamin Onuorah</b> <!-----------------------------------------------------------------------------------------------------------------------------------------------------------> <div class="col-sm-12"> <hr/> <h3>Comments</h3> <p align='center'>No Comment yet!</p></div> <h4 align='center'><a href='user/learner_login.php'>Login</a> to comment or ask question on this topic</h4> <hr/> <!-------------------------------------------------------------------------------------------------------------------------------------------------------------> <a href="read_lesson.php?move=3&cid=2" class='btn btn-success'>Previous Topic</a> <a href="read_lesson.php?move=5&cid=2" class='btn btn-success'>Next Topic</a> </div> <div class="col-lg-4"> <br/><br/> <ul> <li>1 <a href="read_lesson.php?cid=2&move=1" >Introduction to Web Technology</a></li> <br/> <li>2 <a href="read_lesson.php?cid=2&move=2" >Getting Started with HTML</a></li> <br/> <li>3 <a href="read_lesson.php?cid=2&move=3" >Break Line, paragraph, Align and Headings</a></li> <br/> <li>4 <b>Formatting and Listing</b></li> <br/> <li>5 <a href="read_lesson.php?cid=2&move=5" >Add Image to web page</a></li> <br/> <li>6 <a href="read_lesson.php?cid=2&move=6" >HTML Table</a></li> <br/> <li>7 <a href="read_lesson.php?cid=2&move=7" >HTML Forms</a></li> <br/> <li>8 <a href="read_lesson.php?cid=2&move=8" >HTML Links </a></li> <br/> </ul> </div> </div> </div> </div> </section> <!-- ***** End 1 ***** --> <p align='center'> <b>Supported by</b> <br/> <a href='https://lasu.edu.ng' target='_blank'><img src="images/LASU.jpg" width='200'></a> <a href='http://www.aceitsee.lasu.edu.ng/' target='_blank'><img src="images/ace-lasu.png" width='200'></a> </p> <!-- ***** Footer Start ***** --> <footer> <div class="container"> <div class="row"> <div class="col-lg-3"> <h4><font color='green'>Main</font></h4> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About Us</a></li> <li><a href="contact.php">Contact Us</a></li> </ul> </div> <div class="col-lg-3"> <h4><font color='green'>Learn</font></h4> <ul> <li><a href="blog.php">TEA Blog</a></li> <li><a href="lesson.php">Courses</a></li> <li><a href="all_quiz.php">Quiz</a></li> <li><a href="_visual_art">Visual Art</a></li> <li><a href="_computer_science">Computer Science</a></li> <li><a href="_kids_learn">KidsLearn</a></li> <li><a href="https://benonuorah.com/tea/research/" target="_blank">Research</a></li> </ul> </div> <div class="col-lg-3"> <ul> <h4><font color='green'>Solutions</font></h4> <li><a href="school/">NEMS SchMgtSystem</a></li> <li><a href="_solutions">Desktop App CBT</a></li> </ul> </div> <div class="col-lg-3"> <h4><font color='green'>Services</font></h4> <ul> <li><a href="dev.php#web">Website Design Development</a></li> <li><a href="dev.php#software">Software Development</a></li> <li><a href="dev.php#training">Programming Training</a></li> </ul> </div> <div class="col-lg-12"> <div class="under-footer"> <p>Copyright © 2024 Technology. Education. Art (TEA) TEAlearn.org. All Rights Reserved. </p> <p>by <a href="https://benonuorah.com" target='_blank'><b>Ben Onuorah</b></a></p> </div> </div> </div> </div> </footer> <!-- jQuery --> <script src="assets/js/jquery-2.1.0.min.js"></script> <!-- Bootstrap --> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.min.js"></script> <!-- Plugins --> <script src="assets/js/owl-carousel.js"></script> <script src="assets/js/accordions.js"></script> <script src="assets/js/datepicker.js"></script> <script src="assets/js/scrollreveal.min.js"></script> <script src="assets/js/waypoints.min.js"></script> <script src="assets/js/jquery.counterup.min.js"></script> <script src="assets/js/imgfix.min.js"></script> <script src="assets/js/slick.js"></script> <script src="assets/js/lightbox.js"></script> <script src="assets/js/isotope.js"></script> <!-- Global Init --> <script src="assets/js/custom.js"></script> <!-- ALL XTRA --> <script src="js/jquery.superslides.min.js"></script> <script src="js/images-loded.min.js"></script> <script src="js/custom.js"></script> <script src="js/isotope.min.js"></script> <script src="js/baguetteBox.min.js"></script> <script> $(function() { var selectedClass = ""; $("p").click(function(){ selectedClass = $(this).attr("data-rel"); $("#portfolio").fadeTo(50, 0.1); $("#portfolio div").not("."+selectedClass).fadeOut(); setTimeout(function() { $("."+selectedClass).fadeIn(); $("#portfolio").fadeTo(50, 1); }, 500); }); }); </script> </body> <script type="text/javascript"> (function(d, m){ var kommunicateSettings = {"appId":"284a056a0505b1107e9a379de67136f2f","popupWidget":true,"automaticChatOpenOnNavigation":true}; var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "https://widget.kommunicate.io/v2/kommunicate.app"; var h = document.getElementsByTagName("head")[0]; h.appendChild(s); window.kommunicate = m; m._globals = kommunicateSettings; })(document, window.kommunicate || {}); /* NOTE : Use web server to view HTML files as real-time update will not work if you directly open the HTML file in the browser. */ </script> </html>