This document was uploaded by user and they confirmed that they have the permission to share
it. If you are author or own the copyright of this book, please report to us by using this DMCA
report form. Report DMCA
Overview
Download & View Introduction To Html as PDF for free.
Building Web Pages with HTML and CSS This tutorial presents an introduction to building web pages using HTML 4 and CSS. It is not meant to be a complete guide or reference, but rather it serves as a basic introduction to creating web pages. The Biomedical Informatics Technical Support team (BITS) put this tutorial together to assist new students.
A Very Brief History of the World Wide Web and HTML We will not spend too much time going over the history of the Internet or the World Wide Web, however, it may be useful to trace a quick history and describe the original intent behind this Internet service. The history of the World Wide Web or the Web begins with the work of Tim Berners-Lee. The Web grew out of work that Berners-Lee was doing while at CERN during the 1980s. One of his early achievements was the creation of a notebook program ENQUIRE, which allowed for links between arbitrary nodes. Building upon this work, in March of 1989, Berners-Lee submitted the original proposal for an Information Management system. The goal was to build a linked information system to preserve and easily retreive information. To make this new system work, Berners-Lee proposed that this new system would make extensive use of Hypertext to link information across a web of information. The original proposal noted the importance of working within heterogeneous environments, emphasizing shared information by users of various systems using different browsers. In his conclusion to the original proposal, Berners-Lee noted “We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.” In a short period of time, the Web as an information and commerce tool has exploded to what one author describes as the Gutenberg press of our time. HTML: The Language of the Web HTML is the language that allows the web to work. HTML works because it does exactly what Berners-Lee argued for. It is platform independent and will work on any system that can read a text file. The support for links via the use of hypertext means that you can connect a visitor to any web page or other supported information on the Internet. Not all is perfect however. Heterogeneous environments mean that platforms are still unique, not everything will display in the same way on every system. Some of this is by design; your computer monitor can display much more detail than the small screen of a PDA or cell phone. Some of this is due to the choices made by various vendors looking to control how the World Wide Web works. Dealing with these imperfections over the past few years has been quite difficult. Complex pages usually have to be tested on many browsers to ensure proper compatibility. Standards exist, but vendor support is sometimes sketchy at best, particularly if you are stuck with an older browser. The choices you make in your design can minimize headaches by allowing older browsers to handle new features gracefully. The key is to balance the cutting edge technology with enough sound design choices to produce a page that is more than a simple set of compromises.
The goal of this tutorial is to help you design a transitional web page. A transitional page will make use of enough standards to make development simple across multiple web pages on your site, while taking into consideration the existence older browsers that do not properly support the latest standards. We will focus on using HTML 4 over XHTML and using Cascading Style Sheets to handle certain aspects of design, aspects that stop short of page layouts. We encourage you to use styles for layouts; it is a better choice in the long run. However, our goal here, in keeping with the original intent of the Web, is to link information and allow users to access that information.
Tutorial Part 1: Site Design and Page Layout Lets start by not building a Hello World page. Rather, lets get right into designing your personal DBMI web site. Before we start writing any HTML, we will step back for a moment and sketch out our site on paper.
The site design is very simple, four pages that link to each other and depending on the content may link to various sites in the department or around the world. We are not spending much time on the details of proper site design that is for another course. But is important to keep such things in mind, if simply to help organize your thoughts. The next step is to conceptualize some type of page layout design. The goal here is to provide a consistent interface between the end-user and the information contained on your website. For the tutorial, the page layout will be a very simple design with a menu on the left side and the content on the right. Menu
Content
The menu page will be repeated throughout the four pages providing navigation to all pages in your site.
2
Tutorial Part 2: Your Home Page With your site design and the page layout complete, we can turn to authoring your home page. The home page will be the anchor for the rest of the site and will be the default page when someone visits your site. In addition, since you will use the same layout throughout your website, creating the three other pages will simply involve copying the home page and updating the content accordingly. When creating a web page, you can use various tools to aid in authoring your page. Tools can be as simple as a basic text editor (notepad.exe, emacs, vi, text-edit) or as complex as a fullfeature html editor (HomeSite, Dreamweaver, Front Page). The key requirement is that the editor must save the files in a text format. Note: Microsoft Word has the ability to save files in HTML format. However, there are some problems with using Word to author your web pages. One, any HTML markup that you put into your document will be converted to plain text using special symbols, as a result, the formatting won’t be rendered as you want. Second, when saving as HTML in Word, an incredible amount of really bad code is put into your page. A simple page will converted in to a large amount of extra text that will be extremely difficult to edit. Creating your Home Page In an editor of your choice, we want to create a new page, the file name for this page will be “index.html”. In your text editor, enter the following information without the line numbers: 1: 2: 3: 4: My Home Page 5: 6: 7:
8:
9: 10:
11:
Menu
12: About 13: My Vitae 14: Hobbies 15:
16: 17: 18:
19: 20: 21:
22:
My Home Page
3
23: Put content here... 24:
25: 26:
27:
28: 29: The resulting page is not that spectacular, but this serves as the foundation for our site.
In the next section we will introduce Cascading Style Sheets to add a style treatments to our page. For now, we will look a little closer at some of the tags. Line 1: The DOCTYPE tag lets the browser know what to expect and instructs validators on the rules to judge your code. HTML is fairly loose in requiring the DOCTYPE tag. It is a good habit to get into using (if you use an HTML editor, most include the tag automatically), particularly if you want to move to using XHTML. Line 2: All web pages will begin and end with the opening and closing tags. Line 3: Directly after the tag is the tag. The is also closed by the tag. Line 4: The tag sets the page title. Line 6: The indicates the start of the body of your page. This is where your content will be located. The tag is closed later in the page with the tag. Line 7: Here begins a
, we are using the table for layout purposes. Though this is no longer considered best practices, Style Sheets do a better job of layout and will result in pages that load and render faster. However, Style Sheet layouts are not supported in all browsers. For full compatibility, we will stick with using tables for now. Some tags that are associated with tables include: •
: table row •
: table cell •
: table header cells •
: identifies the body of the table Line 9: Comments tags start with . Comments can extend over a number of lines. 4
Line 10: The
tag is the first example of the use of an attribute/value pair to modify the behavior of the tag. Other tags: Tag
Description Start and end a paragraph Line break Space
Tip: 1: HTML is fairly loose with respect to the case of your tags. In this tutorial, we use lower case for all text and quote all the tag attributes. 2: Though the use of tables for layout purposes has been replaced by the use of Style Sheets, not all browsers support this feature. However, you can anticipate this and design your pages to gracefully handle such instances. 3: With tags that provide attribute/value support, double-quote the values. Though HTML is fairly flexible with quoting values, it is a good habit to get into and fewer problems will arise when you decide to switch over to XHTML.
Tutorial Part 3: Cascading Style Sheets With the basic structure of your page in place, it is time to format your document and improve the overall look of your page. To accomplish this we will use a separate Cascading Style Sheet that contains format information. You can apply styles in-line, however by doing so, the formatting is localized to the page. Using a separate sheet allows you to link to the formatting information from a number of pages. To create a CSS for this tutorial project, you will need to use a text or web editor to create a the appropriate file. As with HTML pages, the same rules apply, the file must be saved as a plain vanilla text file. In your style sheet, you will add various style rules that are made up of two parts, the selector and the declaration. The selector determines with element or tag will be affected and the declaration specifies what should be done. We will use the following rules: 1: body {background-color:#ffffff; font-family:Verdana,Arial,sansserif} 2: p {font-size: 10pt; font-family:Verdana,Arial,Helvetica,sans-serif} 3: tr {font-size: 10pt; font-family:Verdana,Arial,Helvetica,sans-serif} 4: td {font-size: 09pt; font-family:Verdana,Arial,Helvetica,sans-serif} 5: th {font-size: 09pt; font-family:Verdana,Arial,Helvetica,sans-serif} The first five lines of our page, provides format rules for some major tags. Line 1: This rule will apply to the tag and declares the background color and the default font. Line 2: This rule specifies how the
tag should be rendered.
5
We can add more rules to our style sheet. The rules can apply to the element or tag, or can be customized and applied to other elements. Some additional rules we will add to our style sheet a:link a:visited a:active a:hover
Save the file as “tutorial.css” and then open the default home page “index.html” and we will update our page to use the style sheet. We want to link our default page to our newly created style sheet. You will use the tag on line 4 and paste in the following tag. Note the href attribute, the style sheet should be located in the same directory as your default page. Now we will add a little formatting to our Menu title. On line 12, change the element to look like the following:
Menu
The tag as modified will change look of the word Menu on the page. Home Page” down below
Repeat this for the “My
My Home Page
Now reload the page, you should get something that looks like the following:
6
The benefit of using the style sheet is how it allows you to change the formatting of a page or set of pages without having to edit the actual page. By editing the style sheet, you can change the pages default font, the title font with very little effort.
Tutorial Part 4: Putting Things Together We have created our initial web page, added in some styles to make things look nice. Now we want to begin to create the rest of our pages and complete our site. Before we start creating copies of our first page, we want to make our menu active with links to our other pages. Realize this may seem like we are putting the cart before the horse, but there is a method to our madness. Open up your default home page in your text editor and scroll down to the menu section. We will update our default menu by wrapping our menu entries with link or anchor tags. Edit the Menu entries by wrapping each of them with anchor tags. The finished HTML should match the following:
href=”index.html” rel="nofollow">Home href=”about.html”>About href=”vitae.html”>My Vitae href=”hobbies.html”>Hobbies