Tuesday, August 30, 2016

How to show tables and lists

HTML BASICS
HTML LISTS AND TABLES

Lab Objective: extending web pages by adding few more tags, various types of lists and tables

HTML (Hyper Text Markup Language):

HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser's interpretation of HTML. You use it to create web pages.
HTML is not a programming language, it is a markup language. A markup language is a set of markup tags. HTML uses markup tags to describe web pages. HTML markup tags are usually called HTML tags. HTML tags are keywords surrounded by angle brackets like <html>. HTML tags normally come in pairs like <b> and </b>. The first tag in a pair is the start tag; the second tag is the end tag. Start and end tags are also called opening tags and closing tags.
HTML documents describe web pages. HTML documents contain HTML tags and plain text. HTML documents are also called web pages. The purpose of a web browser (like Internet Explorer or Fire-fox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
More about HTML tags:
Single tag
<tag name>
e.g <BR>

Creating Lists:
                                                
To create unordered list you have two tags in HTML, which are <UL> for “unordered list” and <LI> for Line item


  • Code for creating UL is as given below:
                                                   <html>
                                                <ul>My favourite friend</ul>
                                                </html> 

  • In addition to unordered lists, HTML also provides two other types. They are “Ordered List” and “Definition List”.

  • If want to start numbering other than “1” then write <OL start=”25”>
  • If you want to number instead of bullets than write <ul="any number"></ul>
Table Creation:

Table provides more customizable way of displaying ordered data on web pages.
Tables are created by table border first <table border="5"> 5 width of table border is traditional.
 <tr> means table rows and <td> means table data.
Adding list and table to your own website:

Following code will be added for list and table if we want to add content for grading criteria:

·         <h2><b> Grading Criteria List:</h2>
·          
·         <OL >
·         <LI > Quizzes=10</LI>
·         <LI> Assignments=10</LI>
·         <LI> Lab Work=20</LI>
·         <LI> Midterm=20  </LI>
·         <LI> Final Exam=40  </LI>
·         </OL>
·          
·         <h3><b> Grading Criteria Table:</h3>
·          
·         <TABLE border="5">
·         <TR>
·         <TH> Grading Criteria</TH>
·         <TH> Marks</TH>
·         </TR>
·         <TR>
·         <TD>  Quizzes </TD>
·         <TD>10 </TD>
·         </TR>
·         <TR>
·         <TD> Assignments</TD>
·         <TD>10</TD>
·         </TR>
·         <TR>
·         <TD>Lab Work</TD>
·         <TD> 20</TD>
·         </TR>
·         <TR>
·         <TD>Midterm</TD>
·         <TD>20</TD>
·         </TR>
·         <TR>
·         <TD> Final Exam</TD>
·         <TD> 40</TD>
·         </TR>

·         </TABLE>
Put this and if any problem send me snapshot of your code and web page and I will try to make through it.

No comments:

Post a Comment