How to create lists in HTML and control the way they lookWritten by Milana Leshinsky
You make lists every day - shopping lists, "things to do" lists, people to call lists. Indeed, lists are a very important part of our lives. That's why when HTML was developed, its programmers just couldn't help it - they created a way to add a list to a web page.There are three kinds of lists that you can create: - Unordered - Ordered - Definitions Oops, another list right there! :-) 1) Here is HTML code for creating Unordered list: - Sour cream
- Spagetti
- Pancakes
The above code will simply create a list of bulleted items (bullets are small dots next to each item - sort of a check mark). 2) When it is important for you to list items in a particular order, create a numbered - or Ordered - list: - Mix batter
- Put it in oven
- Bake for 20 minutes
Obviously, order of items is important here (you don't want to bake batter that hasn't been mixed yet :-) Finally, Definition lists. They are most often used when you have a list of items to be defined or explained. Use and to start and end your list. will stand for "term" and will stand for "definition". Using previous cake baking topic, here is an example of a Definition list: - Mix batter:
- Make sure to mix it until well blended or cake will be lumpy
- Put it in oven:
- You may need to rotate it middle of baking cycle
- Bake for 20 minutes:
- Baking time may vary. Start checking in about 15 minutes.
When you're creating a complex list, with sub-items, you may use nested lists (list inside another list) and mix different kinds of lists together. Experiment with different combinations of lists to see what is best way for you to organize items on your web page. And here is frosting! Hey, I bet even experienced webmasters might have missed real flexibility of lists.
| | Showing and Hiding HTML elements using LayersWritten by Amrit Hallan
A long time back I visited a site that had a very fancy, animated navigation bar. Now, as a professional web developer, I'm not in favor of DHTML-supported, fancy navigation bars, but it was very fascinating. What they had done was, whenever you hovered your cursor over a link, a big, comics-type dialog balloon appeared to give further details of that link. I wondred how they did it, but then it slipped out of my mind.That technique uses layers and Cascading Style Sheet definitions, and I'm going to tell you here, how it is done. Nothing pyrotechnic, but it'll pay a way to more complex tasks. First, demo. I believe once you visually see it, you'll understand better what I'm trying to accomplish here. Given below is a link. If you take your cursor over link, an image appears somewhere on screen. By tweaking you can control placements. You can see demo, along with online version of this article at: http://www.bytesworth.com/learn/dhtml00001.asp I've purposely made image appear over a text area so that you don't think it is a simple rollover image effect. The image actually appears above text. Below lies code that of effect that appears above. First HTML part that defines general link and division that defines placement of image. Take note of CSS definitions required to set z-index and "hide" attributes. Before testing code, remember to remove preceding dots that I have appended so that your email software doesn't read code as some "process-able" content.
|
