subscribe to receive this blog per email :: unsubscribe from the mailing list

Showing posts with label text formatting. Show all posts
Showing posts with label text formatting. Show all posts

Thursday, September 9, 2010

HTML Basics 5: Lists

In previous blog posts, I have introduced some of the basic HTML tags that format a web page: paragraphs, headers, the tags that make up the page <head>, links, and images: HTML Basics 1*** HTML Basics 2: The Head Tag *** HTML Basics 3: Links *** HTML Basics 4: Images


The next most important tag is the List tag - which comes in three different flavours: Unordered lists, Ordered lists, and Definition lists.


An unordered list is a list of items in no particular order. Unordered lists can have bullet points or various other symbols that mark each new list item, or no particular list symbol at all. The default formatting for lists is to have them indented from the main text, and list items separated by a line break - this is called a block list. But with a Style Sheet (CSS), a list can be formatted whichever way you want! Lists offer a lot of flexibility in that respect. This is because for each type of list, there are at least two different tags. All the more opportunity to define a variety of styles.


One of the main uses for unordered lists are navigation menu. In this blog, all three main navigation menus are unordered lists - the navigation at the top which says "Home - Shop - Look - Listen - Read - Interact - Join", the one on the right side linking to the various subdomains and main sections of the site, and the subnavigation menu on the left, which allows you to navigate to the other parts of the "webdesign.asni.net" subdomain. (Remind me that I should write a blog about domains and subdomains sometime soon!) As you can see, they all look completely different, even though they are built using exactly the same tags.


The tags for an unordered list are <ul></ul> which encloses the entire list and marks it as an unordered list, and <li> </li>, which encloses each separate list item. So the code for the navigation bar at the top looks more or less like this:



  • <ul>

  • <li>Home</li>

  • <li>Shop</li>

  • <li>Look</li>

  • <li>Listen</li>

  • <li>Read</li>

  • <li>Interact</li>

  • <li>Join</li>

  • </ul>


As you can see, even though the code is written as a block list, with line breaks between each list item, the navigation menu is displayed as an inline list. This has been defined in the style sheet - if you view the page without the style sheet (if you're browsing with Firefox, go to "View" "Page Style", then choose "No Style" - or equivalent in other browsers) you can see thebare bones of the page navigation, without all the fancy formatting.


Ordered lists are lists where items are listed in a particular order - they are typically preceded by numbers, or letters of the alphabet. A list of the days of the week might look like this:



  1. Monday

  2. Tuesday

  3. Wednesday

  4. Thursday

  5. Friday

  6. Saturday

  7. Sunday


(unless you prefer to count Sunday as 1)


The tags for an ordered list are very similar to the unordered list - the main list tag is <ol> </ol> (instead of <ul> </ul>), and the individual list items are enclosed by the same <li> </li> tags as the unordered list - this makes it easy to convert an ordered list into an unordered one, or vice versa, if you change your mind - it is only the main list tag that needs to be changed, not every individual list item. The list tag automatically inserts a bullet point or the correct number for the item, and if you need to insert a new item in the middle of a numbered list, the numbers of the following items will automatically increase by one. Handy, eh?


The third kind of list, the Definition list, is a little bit different in that it consists of three parts. A definition list is a list such as can be found in a dictionary, consisting of a word or expression, and a definition of the meaning of that word or expression. For instance:



Monday:
The first day of the week

Tuesday:
the second day of the week

Wednesday:
the third day of the week


etc, would be a definition list.


By default, the word or expression to be explained (the "definition topic") is formatted differently from the explanaition, for instance it could be bold, or a different colour. The tags for the definition list are <dl></dl> as the main list tag, <dt></dt> for the definition topic, and <dd></dd> for the definition. In code, the list above would read as follows:



<dl>

<dt>Monday:</dt>
<dd>The first day of the week</dd>

<dt>Tuesday:</dt>
<dd>the second day of the week</dd>
<dt>Wednesday</dt>
<dd>the third day of the week</dd>

</dl>


Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

Posted by Asni at 3:15 AM 0 comments
Labels: , , , , ,

Thursday, March 25, 2010

HTML Basics

This week, I had the pleasure to teach my first class "Online Promotion for Everyone" at our very own Featherston Community Centre - the classes are scheduled to take place once a month, on the last Wednesday of the month, from 7.30 pm to 8.30 pm. The next class will take place on 28 April. The cost is $ 12 per person per session - and they're definitely not only open to Featherstonians! So if you want to get some hands on introduction to web technologies, and how to use them to promote your business and career, do come along. More information here: webdesign.asni.net


As is often the case, the first class turned out a bit different from what I had expected to cover. The participants were very keen to get their hands on to actually building a simple website, so instead of dwelling on the theory, we got very hand-on right away. Participants had written their very own web page by the end of the class!


HTML is all about structure. The code consists of a number of tags which indicate the function and level of importance of each part of the page, and each bit of text or other information within it. At first sight, it might seem as if HTML is just a means to format text - different sizes of text for headlines, sub-headers and paragraphs, bulleted or numbered lists, indented block quotes, and tables. These tags make up a good part of the html we use day by day.


Browsers render these tags in a particular fashion - however, this is different depending on what browser is used. A site written in simple HTML gives the author very little control about the details of the graphic representation, such as what fonts are being used, or the precise size of text and headlines. But the beauty of the language is that if the tags are used correctly, the *structure* of the information will be comprehensible no matter how precisely each browser is programmed to format the tags.


The structure of a basic HTML document is very simple, really. The page opens and closes with the <html> </html> tags - usually this tag includes some information as to which version of HTML is being used, the language, and character set, but it can be used on its own, to tell the browser that this is an HTML document.


The rest of the page consists of two sections - the <head> </head>, and <body> </body>. Inside the <head> tag, there is information as to the content of the following page: keywords and/or a short description inside the <meta> tag, styles used, and script languages, if any. Most of the information inside the <head> does not get displayed - but it is an important section for your search engine optimization.


The only tag inside the <head> which is actually visible in your browser is the <title></title> tag. This is the short line of text which is displayed on top of your browser window when you view a web page. It is also one of the first places search engines look to find out what a web page is about - therefore it pays to pay some attention to finding a good title for each of your web pages.


The <body> </body> tag contains all the information which is actually displayed on your web page. This will be mainly text, as well as images, links to other pages, and other media files such as audio, video or flash animations. The most commonly used tags for text are <p> </p> for paragraph - the main body of text on your page - and the varying levels of headlines: <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4> and <h5> </h5>. These tags ensure that text is displayed in a comprehensible fashion, with appropriate breaks and whitespace, as well as varying sizes for the headers and sub-headers, even if no other styling information is supplied.


The idea of the different levels of header tags is not so much to give different options for size, but again, to make the function of each headline clear. The <h1> tag should only be used once in each page and contains the main title or headline that is displayed inside your page (this is different from the <title> tag inside the <head> section of the HTML document, which appears on top of your browser window - though it may well contain the same line of text).


<h2> is the first level of section header, which can then be subdivided further into sub-sections with the <h3>, <h4> and <h5> tags. Of course, not all header tags need to be used in every page! Often a <h1> and a few <h2>'s will provide all the structure you need for your page.


(to be continued)


Asni: Multimedia Art & Design:: webdesign.asni.net :: www.asni.net

Posted by Asni at 8:11 PM 0 comments
Labels: , , , ,
Subscribe to: Posts (Atom)