|
|
HTML Overview
HTML programs are stored in normal text files with the extension .htm or .html. You can use any text editor that you choose but be warned you cannot use programs like Microsoft Word to create pure HTML documents. Although, it is possible to create a document in Word and save it as HTML. This is different than just writing HTML tags in a text editor yourself.
HTML Documents are nothing more than a series of tags. The tags look something like this:
< >
You place text in between the brackets that describe the tag. for instance:
<html>
This tag says that this is the beginning of an HTML document. You should also note that their are two types of tags, opening tags, and closing tags. The closing tag for the above is
</html>
The only difference is that there is a slash before the text. Now, to meet the new xhtml standard all tags have closing tags. One other point to make about tags is that they are NOT case sensitive. Although, the xhtml standard says that all tags should be in lower case.
So what we can say from the above is that the first tag that needs to be in an HTML file is the <html> tag. It tells the browser that this is the beginning of an html file. The browser will then interpret the rest of the file as html. That is until it reaches the closing </html> tag. As you have probably guessed, the last line of an HTML file must be the closing </html> tag.
HTML Files Consist of Two Sections:
Within the opening and closing html tags, you need to define two sections. They are the head and the body. The head gets defined like so:
<head>
</head>
And the body gets defined:
<body>
</body>
We can create a simple html file like so:
If you were to run this in a web browser, it would simply be a blank page!
Document Head
The head of the HTML is typically reserved for one thing, the title of the document. If you move on and do JavaScript, you will find that there is a lot of things that will get placed in the head of the document. You will also find that if you are creating Cascading Style Sheets (CSS) that the head of the document is also a useful place (more about CSS later on).
Let's look at creating a title for the web page:
If you were to run this code in a web browser you might think that adding the title tag really didn't do anything. Notice the title bar at the top of the web browser window. It should have "My First Page" displayed in it:
Headings
Headings are a way for you to place a title above a subject. They come is 6 sizes ranging from the <h1></h1> tag all the way down to the smallest <h6></h6> tag. This allows you to create a heading / sub-heading relationship. Lets take a look. Click on the code to watch it run:
Heading 1  Heading Level 1 Tag |  Headings Levels 1 to 6 | | |
Paragraphs:
When you write documents of any length, the time is going to come when you are going to have to organize your writing into paragraphs. The same holds true for html. You create paragraphs using the
<p> and </p> tags.
All of the information pertaining to the paragraph goes between the tags. I should note that some people believe that you don't need to use the </p> ending paragraph tag in your html documents, and that actually is true. Whenever a new paragraph is started using the <p> tag, the browser will know that the last paragraph has ended and a new one is beginning. It is my opinion that you should get used to placing the end paragraph </p> tag when you conclude your paragraph. Remember, that XML and XHTML are on upon us and in these languages, each opening tag must have a closing tag.
When you create a paragraph, like the one above and this one, the browser will place a space between the two. Lets look at a piece of code:
|
Lists:
HTML has 3 different lists; ordered, unordered, and definition lists. An ordered list is a list who's items are numbered. An unordered list is one who's items have bullets. The definition list is a list that has a term followed by a definition.
Unordered Lists:
It uses the <ul> and </ul> tags
For each item that you want in the list, you would add the tags
<li> and </li> The information for the item of the list goes in between the tags.
Lets take a look at a couple of examples. The first simply uses the default bullet for the list. The second changes the bulled to a square. This is accomplished by setting the type attribute in the ul tag.
Bullets can be changed to the following:
Click on the code to see it run
|
Ordered Lists
An ordered list is simply a list that has a number instead of a bullet. This gets created using the <ol> </ol> tags
As with Unordered List, you can set the type to change the way the list is ordered. For instance you can set the type so that the list items are numbered with Roman Numerals, or Alphabetic. Here is a chart that shows the options:
| I |
Capital Roman Numerals
|
| i |
Lower Case Roman Numerals |
| A |
Capital Letters |
| a |
Lower Case Letters |
Setting the Starting Number:
So what if you want to change the starting number from 1 to something else like 5? You can simply use the start attribute as part of the opening <ol> tag.
Let's look at some code samples. Click on them to see them run
|
Simple Ordered List  Simple Ordered List | Ordered Lists Upper Case Alpha  Ordered List that Uses Upper Case Letters | | |
|
Definition Lists
A definition list is a list of terms and their corresponding definitions. The terms are placed using the
<dt> tag
and the corresponding defintion is place using the
<dd> tag
Definition lists are typically formatted with the term on the left and the definition following to the right or on the next line. The definition text is typically indented with respect to the term. Below is an example of a definition list. Also note that the list starts with an <lh> tag which is the optional list header:
|
Tables
Tables are a way for you to organize data in a row and column fashion. Below is an example of a table that has 4 rows by 3 columns:
| Dorothy |
Judy Garland |
| Scarecrow |
Ray Bolger |
| Tin Man |
Jack Haley |
| Cowardly Lion |
Bert Lahr |
The rows of a table are defined by the <tr> tag
The columns of a table are defined by the <td> tag.
As you have probably guessed you will typically have one or more <td> tags nested inside a <tr> tag. This is because most rows have many columns (not always though).
Let's take a look to see how the above example was created:
The above table uses the basic three tags that all tables consist of
- <table...>
- <table ...> creates the table. Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color.
- <tr ...>
- <tr ...> (Table Row) defines each row of the table.
- <td ...>
- <td ...> (Table Data) defines each cell (column) of the table.
We can add properties to the table tag to change the appearance of the table. Lets add a property to the table tag above to give the table a border:
|
|
An upgrade has been detected. Please login as a Super User (host) to upgrade!
|
Table Headings
There may be times when you want to put a heading above a row or a column. The example so far just seems like a list, it doesn't tell us anything about the data. We can fix this by adding a header. This can be accomplished using the <TH> tag.
Table Headings can be applied to rows or the columns or both. Let's look at a couple of examples. The first shows both row and column headings.
|
Heading Row  |  | | |
|
Cell Padding and Cell Spacing
By default, table cells tend to be squeezed close to each other. To give your table cells a little more breathing room, use CELLPADDING and CELLSPACING:
 |
CELLSPACING controls the space between table cells. Although there is no official default, browsers usually use a default of 2. |
 |
CELLPADDING sets the amount of space between the contents of the cell and the cell wall. The default is 1. CELLPADDING is usually more effective than CELLSPACING for spreading out the contents of the table. |
Let's see both of these in action. The first example shows cell spacing, the second shows cell padding.
|
 Cellspacing | cellpadding  cellpadding | | |
|
Finally, Let's put the two together and see how they look:
|
Colspan & Rowspan
Table cells can span across more than one column or row. The attributes colspan ("how many across") and rowspan("how many down") indicate how many columns or rows a cell should take up.
For example, suppose you want to put a title across your table. This could easily be accomplished with the colspan attribute. In the following example the <th> tag is used so that the text will center across the column. The colspan attribute could be added directly to the <tr> tag if that is what you need to do:
|
 Table Title With Colspan | | | |
|
Rowspan sets how many rows a cell spans. Rowspan can get a little confusing because it requires you to think through how the cell affects the rows after the row it starts in. It's particularly useful in this situation to add borders to the table during the design process, even if the table won't ultimately use borders.
|
 Rowspan example | | | |
|
Ok, one more example that puts rowspan and colspan together:
|
Cascading Style Sheets
With every HTML page we need styling, otherwise the website pages look plain and dull. After all, we do not just write code, we also design a web page that looks interesting, catchy, appealing. At the beginning, in the time of static web sites the HTML files incorporated tags to style the page. Some examples are italics <i>, bold <b> and <font> to change the appearance of the text. As the websites increased in size, it became obvious that such an approach became impractical to maintain or change.
Suppose you develop a large website for a company, and one day a manager asks you to change the font of a particular section to bold - blue. Not only you would have to go through each website page to change the font, but you would also have to make sure you did not make any typo error, or you did not miss any page. Imagine what happens if, after you go through all that for a few days, the manager comes back and says that he thought that it would look better but it does not, so he wants you to change it back. Not fun at all.
Another problem is that, if the HTML formatting is embedded in each file, the user has no chance to change the font at runtime, to help him read better. Moreover, all that formatting coding adds to the page size, increasing the download time for each page.
To solve all these issues, enters Cascading Style Sheets (CSS).
With CSS the formatting information is defined in external files, so it overcomes the issues we saw when we mix content with formatting styles. The formatting of a page and even whole websites can now be easily changed by changing the CSS files. We can show to management different styles without too much work and we can port the same styles to different website subdomains for a consistent look.
CS is a language. It has an easy syntax but not all the browsers see this language the same way. The CSS standard is maintained by World Wide Web Consortium (W3C) which is the same organization that maintains the HTML standard. If we take care to follow the standard in our designs, we can be sure that the webpage will display in the user browser the same way in most modern browsers. There are a few exceptions, but this subject is not part of our discussion here.
OK, let’s see CSS in action.
There are three types of styles:
1. Styles written within the head of the HTML file.
2. Styles written in line of the HTML code.
3. Styles written in an external file.
Let’s talk about each type and see how to use them.
Styles written within the head of the HTML file
These styles are easy to use but they are limited for that particular page. One writes these styles between the <head> tags and surrounds them by the <style> tag as in the following code:
In the following example, we will define the <h1> title tag as being red, 22 pixels, then <h2> title tag as being blue and 18 pixels, and the paragraph black, 10 pixels. As already shown earlier, the html page will have a head and body.
|
CSSexample2  | | | |
|
Click the code to see the result. In this example we created 3 styles for the h1 title, the h2 title, and the paragraph p. Once these styles are created, we can start writing the content of the page in the file body. Anytime we enclose some text between paragraph tags, the text formatting will be exactly as described in the style section. Now you can see the advantage of using styles. Write the style once in the style section for one item, and then use it as many times as you want in the body part of the page. Now, if you need to make a formatting change, change it in the style section and you can be sure that the entire text formatting will follow your change.
Styles Written in Line of the HTML Code
Styles can also be written in line of the HTML code. Each HTML tag can be assigned a style by using style= . It is impractical to build a whole website with inline styles, for the reasons already mentioned when we talked about HTML formatting with tags. One of the reasons is maintainability. However, inline styles can be very useful if we need to create an exception from the general formatting already defined in the page head.
In the following example, one of the paragraphs has to be made bold. Instead of defining a different paragraph style, we can make an exception, with an inline style, as follows:
|
CSSexample3  | | | |
|
In the second paragraph, all styles were preserved from the definition of the paragraph style in the page head. This is called inheritance. All we need to do is to add extra styles, or modify the existing ones, as the page design requires.
External Style Sheets
External style sheets are the most used in modern websites. From simple to complex, websites use one or more files dedicated to styles, so that the formatting of a website is all in one place.
The CSS elements you saw in previous paragraphs can be written in a separate file, called the style sheet. You only need a text program for this, like Notepad. Just make sure you save your file with the suffix css. However, it is best to use a program that understands CSS, so that the styles become more readable for you and easily to debug. Visual Web Developer or Visual Studio 2008 (or 2010) can handle style with ease. Your productivity increases if you use this website developer environment, where all elements are in one place.
Selectors
We already used selectors in the previous paragraphs; h1, h2, p, these are selectors which pinpoint to their corresponding elements on the website page. Since they are written in an external style sheet, they apply to the entire website, wherever these selectors are used. There are several groups of selectors, as follows:
The Type Selector
The Type selector pinpoints to a specific HTML element, like h1 and h2. When we wrote the following element
|
In this example we rewrote the previous illustration by declaring that all text is black. The we commented out the red declaration in the h1 title. The result is that all text and h1 title are black, with the exception of h2 title, where the color was redeclared as blue.
The ID Selector
The ID selector has a hash (#) symbol in front of the selector name. This selector allows the user to have a style declaration for any number of elements in his/her page or website. This selector greatly increases the website formatting, because it goes beyond the limited number of HTML elements. With the ID selector the user can name his/her own regions in the website and style them according to the design.
For example, if we want to have a Description text on each page, so that the user can quickly decide if he/she is interested in the content of the page, we can do the following:
|
Every section of the page, which is tagged Description, will be formatted as italic and color black.
The Class Selector
With this selector you can style multiple HTML elements. Use a dot in front of the class name to let the browser know that your declaration is class. When using this selector you need to call the class in the HTML element. In the following example, we want to underline some text inside a paragraph.
|
Combining Selectors
Selectors can be combined in a single declaration. This is a great shortcut. One can easily reduce the size of the style sheet by combining selectors. In the following example we want all the titles to be magenta. So, instead of writing the magenta color property in each h1, h2, h3 titles, we can combine them, as in the following example.
|
Grouping can be done hierarchically as well. In a previous example, we saw how the Description selector was formatted to make the text italic. We can also say that, if a paragraph selector appears inside the Description id, it should be bold and italic. Here is how to do this.
|
In this example the selector “Description p” tells the browser that, whenever it encounters a paragraph tag in the Description id, the text should be underlined and the font size made 12 px. All other formatting for Description and paragraphs, taken separately, are unchanged.
Properties
What we saw in the previous examples were style properties defined by CSS specification. Elements like color, font-size and others are properties which are enclosed in curly brackets. The list of properties is extensive and it would be too long to be shown here. You can find it at w3.org website at the following link:
http://www.w3.org/TR/CSS2/propidx.html
Values
Properties use values to define dimensions, colors, lengths, percentages, URLs, counters and so on. In the previous examples we saw values in action when we defined font size as 12 pixels, or the text color as blue. However, colors can be many more than just blue, red, green, etc. Because of this, CSS uses the standard 24-bit color values which are written as hex numbers. For example #000000 defines black, while #000080 defines navy blue. Therefore, when we defined the h1 title as being red, we could have written the selector properties and values as follows:
There are many other values that you can use. For more info, read the CSS specification about values on the w3.org website:
http://www.w3.org/TR/CSS2/syndata.html#values
|
Layout With CSS
Long ago in a land not so far away people were forced to use tables to layout their web pages. Well the W3C came to the rescue and standardized how pages should be laid out. It is now all about the <div> tag along with CSS. For some this was not good news but others realized that using CSS and div's gave them better control over positions and dimensions of all the elements put on the page.
The div element works great as a layout tool because it is a block-level element that you can use to divide your pages into as many logical sections as you see fit. You can even lay these blocks on top of each other. This is probably the main reason the name layers was applied.
The div tag has only a few attributes that you can apply. Most of the formatting of divs is done through the use of style sheets.
Let's take a look at a simple example that applies a style to a div element. Here the background of the div is changed to silver, the width to 200 pixels, and a padding of 10 pixels:
|
Div tags by nature are block-level. This means that they will default to 100% of the screen width and place themselves one right after the other in the order in which they appear in the html code. In order to do anything interesting with them they must be positioned. Perhaps the easiest way to accomplish this is by floating them.
Divs can be floated left or right. If you float one left it will appear to the left of object that succeeds it. Below is an example of how this works. In this example a div is floated to the left of a paragraph:
|
You may want to arrange things in columns. In this instace you are best to float everything left. Below is two examples. The first is a simple two column layout. The second is a little more complex in that it creates two columns with the column to the right having two rows. This involved nesting two div tags inside one. The outer div tag floats left and the inner divs use no floats to align them one on top of the other. This is kind of a typical layout:
|
Visible and Hidden Layers
The use of styles can also give you the ability to make the layer visible or invisible. You may ask why anyone would want to make a layer invisible but think about the possibilities there are for popup menus.
Making layers visible and invisible is done through the use of the visibility style. You set it to hidden to have the layer disappear and to visible to have it appear.
Below is a piece of code that demonstrates this. When you roll over the top button a second button appears. Roll off the button and it disappears. This was done through the use of some JavaScript.
|
Visible  | | | |
|
Here is a video that hopefully will put it all together. It shows how to use div's, styles, and images to create a page layout.
|
Page Layout With CSS  Using CSS to Layout a Home Page | | | |
|
So What Does HTML Have To Do With ASP.NET?
This is the question that some of you are probably asking yourself. As it turns out, and if you read the intro on asp.net, what gets rendered in the end is HTML code. At least that is what shows up at your browser. You see, your ASP.NET code gets converted into HTML that can be displayed on the client browser.
This means that you can simply intermingle the two. You can put ASP.NET web controls right in line with html code. As a matter of fact the ASP.NET code that gets added to your form looks a lot like html.
So, when we want to lay out an asp.net page we can simply do it the same way we do an html page. Of course later on we will see master pages that allow us to keep a consistent look and feel across our entire web site.
Lets Take a look at a simple ASP.NET Web page. If you are not sure how to create a project using VisualStudio, please go back to the home page and review the video at the bottom of the page:
|
|
|