Posts tagged Web Design

Basics of CSS Part – #9

Feb 3rd

Posted by Dennis Thompson in CSS Basics

No comments

Today we’re going to talk about list styles. Lists are a vital commodity to web site creation. Most side-navigation menus and inline menus are actually lists that are simply listing the things we want them to. From there, we can add styles to these lists and manipulate them however we please.

Lists

In HTML there are two types of lists:

  • Ordered Lists <ol>
  • Unordered Lists

    Ordered Lists are usually marked with numbers or letters whereas Unordered Lists are usually marked with bullets or squares.

    List Type

    We can change how a list looks by using the list-style-type property. Consider the following code:

    ul {list-style-type:circle;}
ol {list-style-type:upper-roman;}

    The CSS code above will make all ul elements have a list style type of a circle and all ol elements have a list style type of upper roman numerals. The output will look like the following:

    • Item 1
    • Item 2
    1. Item 1
    2. Item 2

    Properties

    We can have a few properties for list types and those properties operate the same way as the background properties

    Property Description Values
    list-style This is the all-inclusive property where you can define all of the values list-style-type
    list-style-image
    list-style-position
    list-style-type This property will define type of list style you wish to have in the <li> element. none
    disc
    circle
    square
    decimal
    decimal-leading-zero
    armenian
    georgian
    lower-alpha
    upper-alpha
    lower-greek
    lower-latin
    upper-latin
    lower-roman
    upper-roman
    hebrew
    cjk-ideographic
    hiragana
    hiragana-iroha
    katakana
    katakana-iroha
    list-style-image This property will allow you to define an image as the list marker. url(image url)
    none
    list-style-position This property will allow you to specify whether you want the list to be inside or outside the content flow. inside
    outside

    We can also narrow down the list-style and list-style-type properties for each list element.

    Unordered Lists

    For unordered lists we can use the following values:

    • circle
    • disc
    • square
    • none

    Technically we can use any of the values listed in the table above, however, the purpose of the unordered list would cease to exist.

    Ordered Lists

    We can have many options for the ordered list. Out of the 23 values we posted for list-style-type, only three were solely for unordered lists. We can use the following values:

    1. decimal
    2. decimal-leading-zero
    3. armenian
    4. georgian
    5. lower-aplha
    6. upper-alpha
    7. lower-greek
    8. upper-greek
    9. lower-latin
    1. upper-latin
    2. lower-roman
    3. upper-roman
    4. hebrew
    5. cjk-ideographic
    6. hiragana
    7. hiragana-iroha
    8. katakana
    9. katakanap-iroha

    Using images with lists

    Using images can spice up just a standard web page by a lot. It is very easy to create your own bullet, circle, square, or a small arrow pointing toward the item you are showing in the list. We can use the all-inclusive,

    list-style:url ("image/bullet.png");
/*OR*/
list-style-image:url ("image/bullet.png");

    This will replace the default bullet in the unordered list with an image of our choice.

    To see these properties in action feel free to click on the download button below!

    lists.zip
    lists.zip
    Size: 9.76 KB

Basics of XHTML Part – #6

Jan 22nd

Posted by Dennis Thompson in HTML/XHTML Basics

No comments

Today we are going to talk about List types in HTML. There are three lists that HTML supports:

  • Unordered Lists
  • Ordered Lists
  • Definition Lists

Unordered Lists

An unordered List is a list that have bullets in front of the list item (normally little black circles). The Unordered List starts with a <ul> tag and each new item starts with an <li> tag. The syntax is as follows:

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
</ul>

The browser output will look this:

  • Item 1
  • Item 2
  • Item 3

You can put unordered lists inside paragraphs, line breaks, links, images, lists, and other non-block level elements. We would use an unordered list if we wanted to create a list that didn’t have any specific order, like a grocery shopping list.

We can also change how the bullets look without using style sheets or inline css. Within the <ul> tag we simply add an attribute called type and add the value we want. Here are the values we can put:

  1. disc
  2. circle
  3. square

Here is the syntax:

<ul type="disc">
     <li>Item 1</li>
     <li>Item 2</li>
</ul>
<ul type="circle">
     <li>Item 1</li>
     <li>Item 2</li>
</ul>
<ul type="square">
     <li>Item 1</li>
     <li>Item 2</li>
</ul>

The browser output is like this:

  • Item 1
  • Item 2
  • Item 1
  • Item 2
  • Item 1
  • Item 2

Ordered List

An ordered list is a list that is marked with numbers instead of bullets. The ordered list starts with an <ol> tag and then each list item (like the unordered list) has the <li> tag around the item. The syntax is as follows:

<ol>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
</ol>

The browser output will look this:

  1. Item 1
  2. Item 2
  3. Item 3

You can put unordered lists inside paragraphs, line breaks, links, images, lists, and other non-block level elements. We would use an ordered list if we wanted to create a list thathas a specific order. A good example would be if you were creating a step by step guide.

Like the unordered list, there is a way to change the list type without using styles or inline css to an ordered list. Here is the syntax:

<ol type="A"> <!--Upper Alpha-->
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ol type="a"> <!--Lower Alpha-->
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ol type="I"> <!--Upper Roman-->
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ol type="i"> <!--Lower Roman-->
<li>Item 1</li>
<li>Item 2</li>
</ol>

The browser output will look like this:

  1. Item 1
  2. Item 2
  1. Item 1
  2. Item 2
  1. Item 1
  2. Item 2
  1. Item 1
  2. Item 2

Definition List

A definition list isn’t really a list but rather a list of items (terms) and each item (term) has a description.

The definition list begins with an <dl> (definition list) tag.

Each term starts with a <dt> (definition term) tag.

Each term description starts with a <dd> (definition description) tag.

The browser output will look like this:

Item 1
Description 1
Item 2
Description 2
Item 3
Description 3

Basics of XHTML Part – #5

Jan 20th

Posted by Dennis Thompson in HTML/XHTML Basics

1 comment

Today we’re going to talk about HTML Tables! Tables were created in May of 1996 as in update to HTML 2.0. Since then, tables were a way for us to layout our websites and/or information in a document. Frames became popular with HTML 3.0, HTML 3.2, and especially HTML 4.0. After Framesets fizzled out tables became the preferred method of website creation.

Now, websites are being created with intricate server side programs and CSS that will write HTML for you. Despite these improvements for website creation, if you just do a simple google search for a website, you’ll see that some are still made using tables. You can read all about the History of HTML by reading the wiki article on it.

Tables is a good starting point to understanding site layout and the flow of the page, so it’s still good to know!

Tables

Tables are defined by creating a <table> tag and then a <tr> and then a <td> So the order is as follows:

  1. table
  2. tr (table row)
  3. td (table cell)

The general syntax for tables is as follows:

<html>
<head>
</head>
<body>
<table>
     <tr>
          <td>table cell</td>
          <td>table cell</td>
     </tr>
</table>
row 1 cell 1 row 1 cell 2
row 2 cell 1 row 2 cell 2

The example above in the form of HTML would be like the following:

<table border="1">
     <tr>
          <td>row 1 cell 1</td>
          <td>row 1 cell 2</td>
     </tr>
     <tr>
          <td>row 2 cell 1</td>
          <td>row 2 cell 2</td>
     </tr>
</table>

Border Attribute

The border attribute is an attribute that will display (or not display) a border around the <table>, <tr>, and <td> tags – basically around all elements of a table. If, for example, you wanted to create a table with no border then you would do the following:

<table border="0">
     <tr>
          <td></td>
          <td></td>
     </tr>
</table>

You can substitute the 0 for any integer that is wanted. Consider the table example we made before the Border Attribute title. That has a border=”1″.

row 1 cell 1 row 1 cell 2
row 2 cell 1 row 2 cell 2

This is the same table but with a border of 5.

Table Headings

Table Headings are defined by the use of <th> tags. These are usually used to title rows/columns in the table and are used in place of <td> to define the cell. Consider the following:

<table border="0">
     <tr> <!--Table headings-->
          <th>Table Heading</th>
          <th>Table Heading</th>
     </tr>
     <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
     </tr>
     <tr>
          <td>This is an example</td>
          <td>This is an example</td>
     </tr>
</table>

The code above would look like this:

Table Heading Table Heading
Table Cell Table Cell
This is an example This is an example

Cell Spanning

Sometimes you may need a single cell to span more than 1 column or row. For this we use the colspan and rowspan attributes on the td or th tags.

<table>
     <tr>
          <th rowspan="2">Name</th>
          <th colspan="2">Phone Number</th>
     </tr>
     <tr>
          <th>Home</th>
          <th>Mobile</th>
     <tr>
     <tr>
          <td>John Smith</td>
          <td>555-1234</td>
          <td>555-4321</td>
     </tr>
     <tr>
          <td>Bob Jones</td>
          <td>555-2943</td>
          <td>555-4929</td>
     </tr>
</table>

The above code would look like this:

Name Phone Number
Home Mobile
John Smith 555-1234 555-4321
Bob Jones 555-2943 555-4929

Cell Spacing and Cell Padding

Cell Spacing is used to create space between cells.
Cell Padding is used to create space between the cell content and the border of the cell.

Both cellspacing and cellpadding are attributes for the table tag. Here is an example of a table with a cellspacing=”10″:

Table Heading Table Heading
Table Cell Table Cell
This is an example This is an example

and here is a table with cellpadding=”10″:

Table Heading Table Heading
Table Cell Table Cell
This is an example This is an example

Alignment

The align attribute for td and th tags can be used with the values left, right, center or justify, to specify how the contents of the cell should be aligned. Justify spaces the words in the cell so that each line is an equal width. If an align attribute is not used, the default alignment is left, unless otherwise specified by the CSS.

Basics of XHTML Part – #4

Jan 18th

Posted by Dennis Thompson in HTML/XHTML Basics

No comments

Basics of HTML Part #3 is good to know before continuing on with this tutorial!

Today we’re going to talk about the img tag and the src attribute. This very important because this element allows us to input images in our web page and also input images from another web server or folder on our web server.

The Image Tag

There is something different about this <img> tag is that the closing tag is not </img>. This is known as a self-closing element or an empty element. These empty elements contain attributes only and no closing tag.

The “src” attribute

To properly display an image on a web page, we need the src attribute (which stands for source) which contains the relative or absolute link to the image you wish to attach. Without this attribute we would not be able to display an image because there would be no source.

Standard Hosting

The syntax for the img element is as follows:

<img src="url" />
<!--The image above-->
<img src="http://www.atomicpages.net/images/standard.jpg" />

Se have our basic syntax for the image element and the example provided is points toward the image location which has an image name of “standard.jpg” which is in the folder “images” on “http://www.atomicpages.net”
that has the URL of “http://www.atomicpages.net/images/standard.jpg”.

The image element will place the image where ever the <img> is place. If that happens to be in the middle of a paragraph or in some arbitrary place on your web page, then it will be placed where ever the element is placed in your source code.

The “alt” Attribute

The alt attribute is important to have for a few reasons.

First, this alt attribute will display the text if a visitor on your web site has images turned off or they are using a text-only browser. This will accurately tell the user what they are missing if the page cannot load the images. Note: the alt attribute is not used as an image description or a summary of what the image is or what it is about.

Second, the alt attribute is good to have for Search Engine Optimization (SEO). Web bots that crawl your web site cannot see the images.

Third, the addition of the alt attribute will make your web page W3C compliant and your web page will validate when checked by the W3C HTML Validator.

Here is an example of useage for the alt attribute:

<img src="url" alt="Alternative text" />
<!--Example-->
<img src="http://www.atomicpages.net/images/standard.jpg"
alt="Standard Hosting" />

“height” and “width” attributes

Height and Width attributes can be used in the place of inline css or css in general. These attributes specify the dimensions of the image. These attributes will usually come after the src attribute. The syntax is as follows:

<img src="url" height="in px" width="in px" alt="" />
<!--Example-->
<img src="http://www.atomicpages.net/images/standard.jpg"
height="148" width="300" alt="Standard Hosting" />

The height and width attributes define the image size in terms of pixels (px) without you having to write px after the integer.

Alliteratively, you can use inline css to define an images dimensions like so:

<img src="http://www.atomicpages.net/images/standard.jpg"
style="height:148px; width:300px; alt="Standard Hosting" />

Images and Links

In Basics of HTML Part #3 we discussed links and anchors. We can actually combine links and images to make clickable images that will take us to a larger image or another place on our web page.

Consider the following code:

<img src="http://www.atomicpages.net/images/standard.jpg"
height="148" width="300" alt="Standard Hosting" />

This will correctly display the image we want; however, if we wanted to make this image one that was clickable then we would do the following:

<a href="http://www.atomicpages.net/hosting.php">
<img src="http://www.atomicpages.net/images/standard.jpg"
height="148" width="300" alt="Standard Hosting" />
</a>



This would make the image clickable and once you clicked on the image it would take you to http://www.atomicpages.net/hosting.php If we wanted to use an image that would link to another image or a larger image then we would do the following:

<a href="url to different/larger image">
<img src="url to image you want to display" height="" width="" alt="" />
</a>
<!--Example-->
<a href="http://www.atomicpages.net/images/standard.jpg">
<img src="http://www.atomicpages.net/images/standard-small.jpg"
height="74" width="150" alt="Standard Hosting" />
</a>

Click

Advanced CSS Part -#7

Jan 10th

Posted by Dennis Thompson in CSS Advanced

No comments

Today we’re going to create a top navigation menu and side menu in CSS. This is like any website menu that we would see on most websites.

Inline Menu

This is an example of a website menu:

Menu

We can see that the menu is entirely inline and is actually really just an unordered list. Consider the following code:

#menu {
     background-color:#4c4c4c;
     height:30px;
     font-size:30px;
     font-weight:700;
     padding:5px 0px;
}
#menu ul {list-style:none;}
#menu li {
     display:inline;
     padding:0px 10px;
}

<div id="menu">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
     </ul>
</div>

The CSS is setting the styles for the navigation menu… We have our ID selector #menu that is creating a background of #4c4c4c (grey), a height of 30px, a font size of 30px, a font weight of 700 (in other words, bold), and a padding of 5px that applies to the top and bottom ONLY.

#menu ul is basically saying that all <ul> elements inside of the ID #menu will have a list-style of none.

#menu li is saying that all <li> elements within the ID #menu will be displayed as inline elements (no breaks before or after the element, refer to the Display Property for more information) and will apply a 10px padding to the left and right sides ONLY.

Vertical Menu

A vertical menu is a menu that is, well, vertical.

Side Navigation

Side Menus are easier to make than inline menus. Consider the following code:

#side-nav {
     background-color:#4c4c4c;
     display:block;
     width:150px;
}
#side-nav ul {
     list-style-image:url("images/bullet.png");
     margin:10px;
}
#side-nav li {
     padding:5px 0px;
     border-bottom:1px solid #3b3b3b;
}
#side-nav.no-border {border:none;}

<div id="side-nav">
     <ul>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li><a href="url">Link</a></li>
          <li class="no-border"><a href="url">Link</a></li>
     </ul>
</div>

So we have our ID selector side-nav that is creating the background color of #4c4c4c (grey), displaying the selector as a block element and a width of 150px. Note: since only the width is defined, we can have an unlimited height.

Next, we have our selector that is saying that all <ul> elements within the side-nav selector will have a list style image of “bullet.png” and will have a 10px margin around all sides.

Finally, we have our selector that is saying all <li> elements within the side-nav selector will have a top and bottom padding of 5px ONLY and a bottom border that is 1px wide, solid, and the color #3b3b3b. There is something interesting, however; there is an additional selector defined that states a border is none which we used on the last <li> element of our vertical menu. This will make the menu look better, or at least more symmetrical.

menu.zip
menu.zip
Size: 4.46 KB
« Older Entries
Newer Entries »