Markup Language - List_HTML/Xhtml_Web Page Production

Standardized Design Solutions - Markup Language and Style Manual

Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup Let’s start with markup syntax
Chapter 1 Checklist
Checklists can be found on almost every page on the web. A list of hyperlinks; a list of shopping cart items; a list of your favorite movies...even a navigation list for the entire website. It may seem to some people that building a list is arbitrary, but what we are going to explore is exactly how There are advantages and disadvantages to several common methods of creating lists and collections. Later, we will list a few examples of how to embellish a common list with their advantages and disadvantages.
Let’s go shopping
Initially, I planned to use a laundry list as an example for this chapter, but I soon realized that I had no idea what items should be included in such a list. , so...for the sake of examples, let’s use food as an example!
Let’s imagine that you need to put a food list on your website. You may be confused as to why you should put a food list on your website. Well, this may be off topic. We just need to Just a reason to start thinking about lists...
On the page, let's say we want the list to look like... well, like a list — a long vertical list with each item on its own line:
Apples
Spaghetti
Green Beans
Milk
Looks very simple, doesn’t it? Similar to many aspects of page design and development, we can achieve the same (or similar) effect through many different methods .As with all examples later in this book, I will use eXtensilble Show all examples from a HyperText Markup Language (XHTML) perspective — and make sure that the chosen methods use correct markup syntax, as per World Wild Various standards developed by the Web Consortium (W3C).
We can easily add a
Tags are done, or you can use various list item tags to complete the job. Now let’s look at 3 completely different methods and the characteristics of each method.

---

Question Time
Which of the following methods is best for building a grocery list?
Method A: Use
Line break
Apples

Spaghetti

Green Beans

Milk

Method A is indeed a widely used method, and may be used by millions of pages. In fact I'm sure all of us are guilty of using this method once in a while, right? We want each item in the list to be on its own line and include a newline tag (in this case using xhtml-compliant Standard self-closing tag
) will generate a line break after each item. This is all its effects. It seems to be quite useful.
But what if we want to add a different style to this food list than other page elements? For example: if we want the color of all links in the list to be red instead of the default blue What should we do if we want to change the color, or want to change the font size? Really we can't do anything, we are limited by the font style (if it is set) for the entire html document. At the same time, if Without any tags surrounding the list, we can't create a unique css rule for the list.
Wrap
If we add a line like "Five Foot Loaf of Anthony's Italian" to the list "Bread". Depending on the position of this list on the page, if there is insufficient horizontal space or the viewer's browser window is narrow, items that are too long will run the risk of being folded to the next line.
At the same time, we also need to consider that users with poor vision may change the default font size to increase readability. We believe that items can be easily arranged in narrow columns as shown in Figure 1-1, but Most likely it will be like Figure 1 - 2 In this way, line breaks occur in unexpected places. When readers increase the font size, the design style will completely change.

Hmm... Now, I think I should buy bread, but in pictures 1-2, the two lines of words on the bread are really confusing.
When using a small screen device such as a mobile phone or PDA to read long lines, similar line wrapping problems will show its ugly face. Hardcore technology enthusiasts may carry around a Palm to record shopping lists. Pilot (rather than paper and pen in the traditional sense) was wandering around the supermarket when he ended up looking for something called "Anthony's Italian" on the shelves.
Here I want to make a point in essence - using method A does not take into account the variables that designers cannot control when reading web pages.

---

Method B: Biting dots

Apples

Spaghetti

Green Beans

Milk

Most mature browsers will add a dot symbol to the left of the list item when parsing the

tag. You can use the method B to achieve this effect, add the

tag when a dot symbol is required. However, if the

tag is not included in an appropriate parent tag, some browsers will not display the dot symbol. The parent tags include the powerful

and the other parent tag of
• is the
  (ordered list), which will be discussed more later.
  The appearance of the dot symbol can indeed help solve the line wrapping problem to a certain extent. Each food item will have a small dot symbol on the left. If an item is too long to wrap, there should be no small dot symbol next to it. It is obvious that this is not a new project, but method B still has the problem of unexpected results: it does not meet the standards.
  Please check it
  According to W3C’s XHTML 1.0 specification, all tags must be closed at the end — It would be a shame if we continued to use the above example and left all
  1. open!
     Use
     tag to simulate the correct display effect of an unordered list with word wrapping, but in fact we have a better way.
     It has always been very important to develop the habit of writing correct tag syntax. By writing tag syntax correctly, we will not have to worry about problems caused by no closing tags or incorrect nested elements in the future. If anyone reads These source codes can also enable them to have a deeper understanding of the effects that the source code wants to achieve.
     Remember to make good use of online detection tools to check the URI you submit or the document you upload. In the end, you will feel that it is worth it.
     

     ---

     Method C: Close
     

  2. Apples
  
  
  3. Spaghetti
  
  
  4. Green Beans
  
  
  5. Milk
  
  Method C is closer to the perfect solution, but it still fails miserably, and the reason is still very obvious: it still does not meet the standard markup grammar.
  We have closed the
  6. tag because
  7. is a block-level element, so it can be removed from use
     tag, so that each item occupies its own line, but we missed its outer structure and lacked an element that means "this group of items is a list!"
     From a semantic point of view This issue is also very important — A list is a group of items that belong together, so we should add such tags to them. In addition, using the correct list tag can clearly tell the browser, software or display device "This group of items is a list!", which is a semantic tag. The meaning is to structure the content according to the categories to which they belong.
     Block-level and inline: HTML elements can be divided into two types: block-level and inline. Block-level elements will start on a new line and end with a line break, while inline elements will be displayed on the same line as other inline elements. Block-level elements can include other block-level elements. and inline elements, and inline elements cannot contain block-level elements.
     Block-level elements include:
     ,

     -

     ,

     , etc. Inline elements include:,,,< ;q>Wait.
     If we look at our grocery list from a pure XML perspective, maybe we would annotate it in this way:
     
     Apples
     
     Green Beans
     Milk
     
     The entire list has a container element , and all food items are included in it. This way of categorizing projects allows XML-based applications to easily extract all projects from the list.
     For example, a developer needs to write an XSLT style sheet and convert the list into xhtml, plain text, or even a pdf file. Because the structure of the list items is very clear, the program can easily obtain the information. and do some useful processing.
     Although I do not deal directly with XML in this book, these principles also apply to the XHTML world. If the document uses a very semantic tag structure, it will improve the flexibility of the document in the future, whether it is for a clear structure. Is it better to add a css style sheet to the document or modify it to make it easier to understand? — As long as the correct structure is provided, a lot of time that may be wasted in future maintenance can be saved.
     Next, let’s take a closer look at method D to see how these are combined — A document that can be recognized and displayed by most browsers and screen readers, while allowing us to style the document in a variety of different ways.

     ---

     Method D: Pleasant Packaging Beans

     Milk

     
     
     What makes method D so special? First of all, its syntax is completely correct and correctly unordered The list has the

     container element, and each item has been closed by the
     • element. At this point you may want to ask, have we spent so much effort just to demonstrate that it is correct for the sake of being correct? Let’s take a look at this Benefits of doing so:
       Since we marked up our grocery list correctly, each item will be on its own line (due to the block-level
     • element), and most browsers will add a small dot to the left of each item symbol, and perform correct inline indentation and line breaks. (See figure 1 - 3)
       
       
       
       Figure 1 - 3
       Users of PDAs, mobile phones, or other small-screen devices can also see a clear, clearly related organization, because we tell these devices the type of data (in this example, a list), so these The device can decide how to display according to its own capabilities to achieve the best effect.
       If a line break occurs due to reasons such as enlarging the font size or reducing the width of the browser window, the wrapped text will be indented in line to align with the first line of text, so each line can be easily identified regardless of the browser environment. list items.

       ---

       Summary
       Now that we’ve discussed every possible approach, let’s quickly review what we just discussed: Method A:
       Unable to add unique styles to the list
       In narrow columns or on small screen devices, longer content may be misunderstood due to line wrapping
       Lack of semantics Method B:
       Add a small dot symbol to help identify each item, but some browsers may not display the small dot symbol when the parent tag

       is missing
       is not placed in
       , the lack of closing tag
     means it is difficult to add styles
     is not standard Method C:
     After adding the closing tag , the
     tag is no longer needed
     The omission of the
     element makes it difficult to add specific styles to this list
     Non-standard Method D:
     Conforms to the standard!
     Make the document semantic and structural
     Most browsers will display a small dot symbol to the left of each item
     On most browsers, the line will be indented after a line break
     It is easy to define specific css styles
     As you can see, you can gain a lot of knowledge from a seemingly simple problem. Even if you have used method D on all your pages, it is still better to ask why you are doing this, We will continue to explore the "why" question in this book, allowing you to choose the most appropriate method in various situations.

     ---

     Extension of skills
     Let us Let's use the food list we constructed to try out a few ways to define CSS styles. We will abandon the default styles, add custom dot symbols, and then convert it to landscape orientation to turn it into a navigation bar.
     Throw away the polka dots
     "I really don’t like those little polka dots in the grocery list, I think I’ll just go back to
     ."
     No need to fall back into old habits — We can still use our structured unordered list, and then use CSS to turn off the dot symbols and inline indentation. The key is that we retain the structure of the list and then present it specifically in CSS.
     First, add a css rule to remove the dot symbol:
     ul{
     list-style:none;
     }
     The results displayed are shown in Figure 1 - 4
     

     Figure 1 - 4 Remove the small dot symbol
     Then let’s remove the indentation. According to the default value, there will be some padding on the left side of all unordered lists, but don’t worry, we can cut it off as we like:
     ul{
     list-style:none;
     padding-left:0;
     }
     The display result can be seen in Figure 1 - 5
     

     Figures 1 - 5
     Although Figures 1 - 5 look and use several
     tag is almost the same, but it is still a standards-compliant, structured unordered list — Regardless of the browser, the device can display normally. If necessary, you only need to update a few css rules to change to a different style.

     ---

     Use custom dot symbols to complete Your own imagination
     Maybe you want to keep the dot symbols in the list, but you don’t want to use the browser’s boring default settings, but rather use your own dot pattern. There are two ways to achieve what you want. Want— And I prefer the second method because it can be better compatible between various browsers.
     The first method is to use the list-style-image attribute to specify the image to replace the default small dots Name.
     ul{
     list-style-image:url(i_hot.gif)
     }
     This is the simplest method, but it will have differences in the vertical alignment of images between different browsers The difference is that some browsers will align the image with the center line of the item text, and some will place the image slightly higher. There is a little inconsistency between them.
     In order to avoid the alignment problems caused by list-style-image across several popular browsers, I prefer to use an alternative method: use an image as the background of each

     • element.
       First, we need to remove the default dots, and then add our own background image:
       ul{
       list-style:none;
       }
       li{
       background -image:url(i_hot.gif) no-repeat 0 50%;
       padding-left:25px;
       }
       no-repeat will tell the browser not to tile the background image (it will be tiled by default), and 0 50% will tell the browser to place the background image 0 pixels from the left and 50% from the top, so that the background image i_hot.gif is aligned according to the center line. We can also specify the position with precise pixels. For example, 0 6px will place the image 0 pixels from the left and 6 pixels from the top.
       We also need to add a 17-pixel padding to the left side of the list item so that we can fully display the image with a width of 20 pixels and a height of 11 pixels, while leaving a little white space without interfering with the text. There is overlap. The data should be adjusted according to the image size you are using

       ---

       Navigation List
       On my personal website I share several ways to convert an unordered list into a horizontal navigation bar, using ordinary, structured XHTML like Create a tab-like effect like our grocery list example.
       We converted the food list into a navigation bar for an online supermarket (this supermarket only sells a few things...).
       We want this navigation bar to be presented in a horizontal manner, and to have some emphasis when the mouse is moved over it and selected, so that we can simulate the effect of paging tabs.
       First, we add an id to the list so we can define css styles for it individually, and we will also convert each food item into a link.
       
     • Apples
     
     
     • Spaghetti
     
     
     • Green Beans
     
     
     • Milk
     
     
     
     Now, start adding some auxiliary css:
     #minitabs{
     margin :0;
     padding:0 0 20px 10px;
     border-bottom:1px solid #696;
     }
     #minitabs li{
     margin:0;
     padding:0;
     display:inline;
     list-style:none;
     }
     Here we have completed removing the default dot symbol and inline indentation work, we also put The display is set to inline, which is the first step towards converting the vertical list into a horizontal list. At the same time, we also add a bottom border to distinguish the entire link group.
     The second step to convert the list into a horizontal navigation bar is to float all our links to the left. We also add simple styles to all hyperlinks: define the size of the margins and inner patches:
     #minitabs {
     margin: 0;
     padding: 0 0 20px 10px;
     border-bottom: 1px solid #696;
     }
     #minitabs li {
     margin: 0;
     padding: 0;
     display: inline;
     list-style-type: none;
     }
     #minitabs a {
     float: left;
     line-height: 14px;
     font-weight: bold;
     margin: 0 10px 4px 10px;
     text-decoration: none;
     color: #9c9;
     }
     Here we define float:left for all elements in the list so that they can be displayed horizontally in one line, and we also add Added some colors, made the links bold, and removed the underline at the bottom of the links.
     Then, create a margin that simulates a paging label for the link that is moused over or selected:
     #minitabs {
     margin: 0;
     padding: 0 0 20px 10px;
     border-bottom: 1px solid #696;
     }
     #minitabs li {
     margin: 0;
     padding: 0;
     display: inline;
     list-style-type: none;
     }
     #minitabs a {
     float: left;
     line-height: 14px;
     font-weight: bold;
     margin: 0 10px 4px 10px;
     text-decoration: none;
     color: #9c9;
     }
     #minitabs a.active, #minitabs a:hover {
     border-bottom: 4px solid #696;
     padding-bottom: 2px;
     color: #363;
     }
     #minitabs a:hover {
     color: #696;
     }
     In order to emphasize the link, we move the mouse over or select it Adding a 4-pixel-high bottom border, we can also keep the selected tag highlighted by adding class="active":
     
     • spaghetti
     
     This active category is related to a:hover share the same css style. (Figure 1 - 7)
     

     Figure 1 - 7
     I have used this technique on my own website and in my July 2003 refactoring. If you need more sample code, feel free to visit both websites and view their source code.
     You only need to add some inner patches and borders to achieve various effects similar to paging tags. So far, we have not even used a picture or a sentence of javascript, but only basic xhtml Structure makes up our grocery list, which is awesome!
     Appearance of mini pagination tags
     If you want a different effect from the usual, square CSS border, you only need to make a few small modifications and we can use images to create interesting navigation That’s it.
     We use the exact same unordered list as before, and very similar css:
     #minitabs {
     margin: 0;
     padding: 0 0 20px 10px;
     border-bottom: 1px solid #9FB1BC;
     }
     #minitabs li {
     margin: 0;
     padding: 0;
     display: inline;
     list-style-type: none;
     }
     #minitabs a {
     float: left;
     line-height: 14px;
     font-weight: bold;
     padding: 0 12px 6px 12px;
     text-decoration: none;
     color: #708491;
     }
     #minitabs a.active, #minitabs a:hover {
     color: #000;
     background: url(tab_pyra.gif) no-repeat bottom center;
     }
     This css probably looks almost the same as the one in the previous example. The main difference is that we use background-image defines the image displayed in the bottom middle of the link when the mouse is moved over or selected to replace the original 4-pixel-high bottom border. (Figure 1 - 8)
     

     Figure 1 - 8: Mini-tab navigation using background images
     The trick here is to choose an image that is narrow enough to fit under the shortest navigation bar item, so that we only need one image to emphasize the navigation link without having to prepare different images for different widths. Of course, you can choose a variety of images to use in your own projects (picture 1 - 9):
     

     Figure 1 - 9: Examples of using other images