HTML Lists and Tables: Lesson 6

Here is a conversion of the provided text into a structured markdown format. ## LESSON 6 Using Lists and Tables in HTML5 **LEARNING IN THIS CHAPTER** * Lists * Unordered List * Ordered List * List Properties * Nested List * Description List * Tables * Table Properties In the previous class, you were introduced to the basic formatting tags used for designing web pages in HTML. You have also learnt about the usage of CSS to spruce up the appearance of these elements. In this class, we will deal with embedding objects like lists, links, images, and tables in our web page to make it look more appealing and professional. ## LISTS Whether it is the minutes of a meeting or a laundry list of items, or the table of contents of a document, you will find the use of a list in all walks of life. A list, therefore, presents important points in a concise and efficient way so that the points stand out more clearly, thereby grabbing a visitor's attention. HTML supports different elements of list for displaying items in a specific order. A list can be defined in different styles. The types of lists that HTML provides are: * Unordered List * Ordered List * Description List ## UNORDERED LIST An unordered list is used when the items are not to be displayed in any particular sequence. The list begins and ends with `<ul>` and `</ul>` tags, respectively. It indents each item in the list and adds a bullet against each of them. It is also known as the Bulleted list. For example, a list of stationery items: * Pen * Eraser * Pencil * Stencil * Clipboard `<LI>` Tag To display the list of items contained in any of the two list types i.e., unordered and ordered list, `<li>` tag is used. --- *Let's Know More*: We can alter list marker styles using various CSS attributes, to make them more visually nice and discernible. Pleasant off padding. Padding. Hipa joartotong stype. **We ran ater st peaks Cubus, to make the mure tonicealde offion booncol, Peachtoff stype** ```html <html> <head> <title>Using lists</title> <style type="text/css"> body{background color: RGB(255,251,214) h1{color:red} li{color:green} </style> </head> <body> <h1> Benefits of Positive Attitude</h1> <ul> <li> Increases Productivity <li> Improves Quality <li> Efficient Team work <li> Breeds Loyalty </ul> </body> </html> ``` **Benefits of Positive Attitude** * Increases Productivity * Improves Quality * Efficient Team work * Breeds Loyalty ## ORDERED LIST *Let's Know More*: The `<menu>` tag is used to creat a menu list. `<menu>` denote the start of the menu and `</menu>` denotes the end of the menu The ordered list is used to display the list of items in a specific order and indents and gives a number to each item in the list, that is why it is also known as the **Numbered list**. The list begins and ends with `<ol>` and `</ol>` tags, respectively. Ordered lists are mostly used in situations where the order of the items is significant or where it is required to keep a count of the number of items. For example, in a recipe, if the steps are not demonstrated orderly, the end result would not be as desired. ```html <html> <head> <title>ordered list</title> <style type="text/css"> body{background-repeat:no-repeat;background-image:url(pancake.jpg); color:Blue;font-size:20px} h1{color:Red} </style> </head> <body> <h1> Recipe for PanCake: </h1> <ol> <li> In a large bowl, mix flour, sugar, baking powder and salt. <li> Make a well in the center, and pour in milk, egg and oil. Mix until smooth. <li> Heat a lightly oiled griddle or frying pan over medium high heat. <li> Pour or scoop the batter onto the griddle, using approximately 1/4 cup for each pancake. <li> Brown on both sides and serve hot. </ol> </body> </html> ``` **Recipe for PanCake:** 1. In a large bowl, mix flour, sugar, baking powder and salt. 2. Make a well in the center, and pour in milk, egg and oil. Mix until smooth.. 3. Heat a lightly oiled griddle or frying pan over medium high heat. 4. Pour or scoop the batter onto the griddle, using approximately 1/4 cup for each pancake. 5. Brown on both sides and serve hot. --- *NOTE*: When an ordered list of list used, the orix element, will be renderer number. Once control the apperance with an <TYPE> attribute of appeeling CSS Property LIST-STYLE-TYPE ### ATTRIBUTES OF `<OL>` TAG **Start Attributes** An ordered list automatically starts with number 1, but you can also start the list with a different number with the help of the Start attribute. For example, if we write START = 101. The ordered list numbering will start from 101. **Reversed Attribute** The attribute that specifies list order should be discending. For example, `<il start = 101 reverse>` ```html <html> <head> <title>Character</title> <style type="text/css"> body{background-color:RGB(255,251,214)} h1{color:red} li{color:green} </style> </head> <body> <h1> Character is a combination of: </h1> <ol start=3 reversed> <li> Integrity <li> Unselfishness <li> Understanding </ol> </body> </html> ``` Character is a combination of: 1. Integrity 2. Unselfishness 3. Understanding --- li: Integrity li:Unselfishness i: Understanding. Style-Syntax: list-type where valueurl["oath of the image SYNTAX: list-style PositionValue Where volue inside outside List-Style This the Shortand property whatem syntax: list-style-style: the Note: one the volves the the in mess the value * number number * type type * <ul> "A" A B,C Uppercase, letter * <ul> "a" a, b, c Lowercase letter * <ul> type -"I", Upper case Roman members * <ul> type *"I", lower chase Roman members * Sequance of Numbers ( default ) ## LIST PROPERTIES List-Style Type This property specifies the bullet style thout will be used as the type of the item marker Syntax: list-style-value where, values for unordered list-name dise Gicle square (disc-default value) and volves for order decimal decimal leoding-zerd lower-rancin i lower-alpha upper alpha/ decimal is the default value list-style image With this properts, You can Specify en image as the test item marker Here is a conversion of the provided text into a structured markdown format. ```html <li> Integrity <li> Unselfishness <li> Understanding </ol> </body> <html> ``` Syntax: list-style-image:value where, value=url("path of the image") SYNTAX: list-style-position:value where, value = inside | outside *Note*: If one of the values is missing it in the above shorthand property, the default value for missing property will be inserted, if any. Here is an example of using list properties: ```html <html> <head> <title>unordered list properties</title> <style type="text/css"> body{background-color:RGB(255,251,214)} ul{list-style-image:url("check.jpg")} li{font-size:30px;color:purple;text-align:top} h1{color:red} </style> </head> <body> <h1>Parts of Speech</h1> <ul style=list-style-position:outside> <li>noun <li>pronoun <li>adjective </ul> <h1>Parts of Noun</h1> <ul style=list-style-position:inside> <li>Common Nouns <li>Proper Nouns Abstract Nouns </ul> </body> </html> ``` --- Here is a summary of the details presented in the provided images: * Unordered List result Disk Circle A filled circle *Square* A filled square *ol> a Result Uppercase lotters atbc * Lowercase Roman Member * Result The Sequance a. numbers default It is important to note that this is a simplified transcription, and further effort may be needed to refine the structure and ensure perfect accuracy Here is the transcription of the images into a structured Markdown format: **Syntax:** list-style-image: value where, value=url("path of the image") | none LIST-STYLE-POSITION You can specify the position of the list item markers with the help of this property i.e, to make them appear inside or outside the content flow. Syntax: list-style-position: value where, value = inside I outside LIST-STYLE This is the shorthand property wherein all the list properties can be specified in one declaration. Syntax: list-style: value where, value = value for list-style-type/value for list-style-position value for list-style image NOTE: If one of the values is missing in the above shorthand property, the default value for the missing property will be inserted, if any. ```html <html> <head> Create Table Qile:///Users/User/Desktop/2nd_test.html Parts of Speech noun pronoun adjective Parts of Noun Common Nouns Proper Nouns Abstract Nouns <title>unordered list properties</title> <style type="text/css"> body{background-color:RGB(255,251,214)} ul{list-style-image:url("check.jpg")} li{font-size:30px;color:purple;text-align:top} h1{color:red} </style> </head> <body> <h1>Parts of Speech</h1> <ul style=list-style-position:outside> <li>noun <li>pronoun <li>adjective </ul> <h1>Parts of Noun</h1> <ul style=list-style-position:inside> <li>Common Nouns <li>Proper Nouns Abstract Nouns </ul> </body> </html> ``` It appears that each of these code segments demonstrate different ways to style lists within HTML, from simple unordered lists with various bullet styles, to more complex examples including image bullets and specific positioning values. There are also examples of altering the colours using h1 class with a variety of styles. Here is the transcribed, corrected, and improved structured markdown format: Caption: This provides a short description of the table. Let us have a look at the various terms to define a table: * Headings These are the special cells which act as labels depicting the type of information in each column. * Cell: It is the intersection of a column and a row. * Columns: A column in a table is the set of facts that we keep track about that type of object. It is also called Field. * Rows: A row represents one instance of the type of object described in a table. It is also called a Record. Table describing student information. | S.No. | Name | Grades | | ----- | ------ | ------ | | 1 | Neha | A+ | | 2 | Shikha | A | | 3 | Riya | B | How to create a table in HTML? To create a table in HTML, `<table>` tag is used. Each table begins with a `<table>` tag and ends with `</table>` tag. The columns contain cells, each of which begins with the `<td>` table data tag and ends with `</td>`. The `<td>` tag must always be present inside the row tags `<tr>`. To specify a column heading, we use the `<th>` tag and ends with `</th>` tag. It makes the text bold. The `<caption>` tag is used to specify the title for the table. Let us create the above-given table in HTML using these tags: ```html <html> <head> <title> Creating a Table </title> <style type="text/css"> body{background-color:rgb(255,251,214)} th{color:blue} </style> </head> <body> <table> <caption style= color:red> Student Information </caption> <tr> <th>S.No.</th><th>Name</th><th>Grades</th> </tr><tr> <td>1</td><td>Bindu</td><td>A</td> </tr><tr> <td>2</td> <td>Yogesh</td><td>A+</td> </tr><tr> <td>3</td> <td>Sakshi</td><td>A</td> </tr> </table> </body> </html> ``` Note: This is a basic structure and it does not give a detailed appearance of a table, to enhance its appearance, table properties can be used. These steps will help you specify a column heading for tables This property helps to enhance how well the number with syntex value where value equals to height. You let us see how we can create a simple form in HTML ```html <title>Creating a Table</titl <style type-text(os) bodybackground-color:B(gs 253143;

HTML Lists and Tables: Lesson 6

Document Details

Tags

Related

Summary

Full Transcript