HTML 4.0. A Beginner s Guide. Traci Terrill

Transcription

1 HTML 4.0 A Beginner s Guide Traci Terrill traci.terrill@netxv.net

2 Table of Contents Understanding How the Web Works... 2 Planning a Web Site... 3 HTML Rules of Syntax... 4 Starting an HTML Document... 5 Setting up the Basic Structure... 6 Viewing an HTML Document... 8 Using Basic Text Tags... 9 Changing Background Color Formatting Text Creating Lists Adding Graphics Linking it all Together! HTML 4.0 2

3 Understanding How the Web Works There are three basic components of the web: Web Server A computer that is connected to the Internet or Intranet. It runs a program that allows it to make information available when a client requests it. HTML Documents The pages on the Web server are simple text files composed in a language known as HTML (Hypertext Markup Language). This language allows Web page authors to format text, display graphics, play sounds and create links to other documents. Web Browsers The web browser running on your computer puts all the pieces together. *The most popular web browsers are Microsoft Internet Explorer and Netscape Navigator. Both interpret HTML code, but each browser loads the page slightly differently-leading to different looks on-screen. HTML was developed at CERN, the European high-energy physics center, which was also the birthplace of the World Wide Web. A technical definition of the World Wide Web is: all the resources and users on the Internet that are using the Hypertext Transfer Protocol (HTTP). HTML is a high-level document description language, meaning it specifies the structure of a document in general terms and leaves the specifics to the Web browser. This gives the individual more control on how the web page looks. As Navigator and Internet Explorer compete for the Web market each adds new features that are not supported by the other browser. The significance of these developments to Web page authors is the need for awareness that some browsers may not be able to use some features that the other browsers don t have. Authors must weigh the advantages of the new features against this disadvantage. HTML 4.0 3

4 Planning a Web Site Think of a web site as a collection of web pages linked together by a single organization and for a single purpose. When you plan a Web site, please consider the following questions: Top-level planning issues Questions include: What is your goal? Why are you creating this site? Who is your audience? What info are they looking for? What are your resources? Can you incorporate video and other items? The structure of the web site The main page you see when you visit the site is the homepage. Questions you need to consider: What is the relationship between the pages? Is it going to be in a linear plan with one page linking to another? Or a logical plan where information is presented in a tree like fashion. The directory structure If the number of pages, graphics, and other items in the website is small it is recommended to keep the entire site in a single directory. You will not have to worry about references to the directory in the links. If the website is to be large, plan on subdirectories for different types of files or pages/divisions of the website. Consider web page design issues Remember that different browsers can have an effect on your web pages. Something to consider are: inline graphics (used to enhance the appearance of the page), inline video clips (some users may not have the necessary hardware or software to play files), inline sound files (some users may not have the necessary hardware or software to play files), navigators (help users find information on website), hypermedia links (seen in the form of thumbnails), and multimedia files (some users may not have the necessary hardware or software to play files). HTML 4.0 4

5 HTML Rules of Syntax Tags and Attributes HTML is written with a series of document markers known as tags. (Capitalization of tags and attributes are not necessary!) There are two types of tags: Container <B> First Name </B> Container tags have a beginning tag and ending tag. The tag is active until you end it. The <B> tag tells a browser to bold all the text that follows until the closing </B> the slash indicates closure. Non-container <BR> A non-container tag (sometimes called an empty tag) has no closing tag. There are only a few closing tags. If you add a closing tag IE or Navigator will ignore the closing tag. Facts about attributes and tags To enhance the appearance of the web pages include attributes in your tags. Several attributes can be added to change the size, color, or alignment of items. It is not necessary to capitalize tags and attributes, but some designers capitalize tags to make them stand out from the rest of the text. Just be consistent on whatever you decide to use. If attribute values contain a space, the value must be enclosed in quotation marks: <FONT face= Times New Roman >First Name</FONT> If the attribute value doesn t contain spaces quotes are not necessary. Tags can be written all on one line, but tags can be placed on separate line-this will not interfere with the display of code-you must enter a tag to actually simulate a return. HTML 4.0 5

6 Starting an HTML Document There are basically four different tools required to start creating HTML document: Text Editor Notepad, Word Pad, Word. Browser Microsoft Internet Explorer or Netscape Navigator to check your work. Graphics Software needed if you are going to create or edit graphics. Multimedia Software/Hardware needed if you plan to work with multimedia files. Things to remember while creating HTML pages: Text files are saved with an.htm or.html extension. Pick either.htm or.html do not mix the extensions. HTML document names must not contain spaces; place an underscore if you need separation in names. Test your pages in as many browsers as possible to see how they look. World Wide Web Consortium (W3C) The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential as a forum for information, commerce, communication, and collective understanding. Visit the W3C website at to view latest updates and additions to HTML 4.0 and other technologies. This is W3C's home page for HTML Here you will find specifications for HTML, guidelines on how to use HTML to the best effect, and pointers to related work at W3C. HTML 4.0 6

7 Setting up the Basic Structure Each HTML page has several tags that set up the basic structure of the web page and appear in every HTML document. Beginning/End Head Title Body Meta Information The first pair of tags defines the beginning and end of a document. All text and tags appear between these two tags. </HTML> The next tag defines the head of an HTML document, the head contains tags and text that is not displayed in the browser window-but is used to describe the page. <HEAD> </HEAD> </HTML> The main item that appears in the <HEAD> is the title. The title appears on the title bar of the browser window. <HEAD> <TITLE>Welcome to my web page!</title> </HEAD> </HTML> *If you create a bookmark or create a favorite in your browser it is the title of the web page that is displayed in the list. HTML 4.0 7

8 Basic Structure Continued The body of the HTML document contains everything you see when you view a page in a browser. <HEAD> <TITLE>Welcome to my web page!</title> </HEAD> <BODY> </BODY> </HTML> <META> tags can include information about the document. For example: name of document s author, expiration date, and list of key words. Tags are written in this format: <META attribute= value > Attributes include: Name which can include author or keyword Content dates document will expire, or list of keywords for search engines A separate <META> tag must be used for each piece of meta information you want to include in a document. <HEAD> <META name= keywords content= education, technology > <META name= author content= Joe Smith > <TITLE>Welcome to my web page!</title> </HEAD> <BODY> </BODY> </HTML> HTML 4.0 8

9 Viewing an HTML Document All it takes to view your HTML document is two steps: Save the document with an.htm or.html extension (remember pick one and stay with it). Open browser and select the File menu and Open command. Browse to the location of the document. View your page! *As you make changes to the file in the text editor you can display those changes by saving the file and then switching to the browser and clicking on either the Refresh or Reload button. Notepad file saved as.htm Displayed in browsernotice title. HTML 4.0 9

10 Using Basic Text Tags Headings HTML allows you to create structured documents by providing six heading levels. Heading levels that are larger numbers are a larger size font and might appear bold. Heading tags are container tags, which means they have to have closing tags to stop the format. A blank line will also follow each heading; this space after the style is part of the style and can t be removed. <HEAD> <TITLE>Welcome to my web page!</title> </HEAD> <BODY> <H1>This is Level 1 Heading</H1> <H2>This is Level 2 Heading</H2> <H3>This is Level 3 Heading</H3> <H4>This is Level 4 Heading</H4> <H5>This is Level 5 Heading</H5> <H6>This is Level 6 Heading</H6> </BODY> </HTML> HTML

11 Plain Text If you insert text that does not have tags, the text is treated like plain text. The browser determines the actual font and size. It is also good to remember that HTML ignores multiple spaces and paragraph returns. Line and Paragraph Breaks You must use HTML tags to create line and paragraph breaks to control the location of your text. If you want to break the current line and start a new line immediately after it with no extra spacing us the break tag <BR>. This is a non-container tag so no tag is needed to start and stop the tag. If you want to break the current line and start a new paragraph, an extra space is needed between lines, then use the paragraph tag <P>. This is a non-container tag so no tag is needed to start and stop the tag. Plain text plain text plain text plain text. Plain text with line break.<br> Plain text plain text plain text plain text. Plain text plain text plain text plain text. Plain text plain text plain text plain text. Plain text with paragraph break. <P> Plain text plain text plain text plain text. Plain text plain text plain text plain text. Line break Paragraph break Preformatted Text Tag that allows you to include spaces, tabs, and paragraph breaks in HTML without adding the tags for those formats. Just include the formatted text inside the preformatted text tags <PRE> </PRE>. <PRE> Notepad Browser Window </PRE> HTML

12 Changing Background Color To change the background color of the web page, put the background color attribute inside the <BODY> body tag using the bgcolor attribute. The color can come from a hexadecimal value or use the color name itself. A very good color chart is located at: or <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 red> Note: Using the name of the color is supported in IE and Netscape but may not be supported in other browsers. </BODY> </HTML> Background Images Background images can be added to web pages instead of solid color background. To add a background image use the background attribute in the <BODY> body tag. Note: background images can slow down the loading of a web page and make text difficult to read. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY background= filename> </BODY> </HTML> Note: It is a very good idea to keep all images, buttons, etc in the same folder as the HTML files. This will make it much easier for the browser to find the added features in the HTML pages. One good place to find free backgrounds: HTML

13 Formatting Text Default Text and Link Colors Define the color of the default text and the link text on your web page. Add the attributes in the <BODY> body tag. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <H1>Welcome to my Webpage!</H1> </BODY> </HTML> Text sets default for all text on page. Link sets color of text that contains links not visited yet. Vlink sets color of text that contains a link you have already visited. Alink sets the color of text on a link you are clicking on. Selected Text Colors To change the colors of selected text enclose the text in the <FONT> container. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <H1>Welcome to <FONT color= fffff >my</font> Webpage!</H1> </BODY> </HTML> HTML

14 Basefont Size The basefont tag <BASEFONT> allows you to change the size of all text on the page. The basefont tag goes in the <BODY> tag. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <basefont size=4> <H1>Welcome to <FONT color= fffff >my</font> Webpage!</H1> This is the area where you add the text in your webpage. Type everything you want to right here! </BODY> </HTML> Basefont tag sizes range from 1 to 7 with seven the largest. If you do not specify a basefont tag the size will default to 3, which is equal to 12-point font. Text affected by the Basefont tag. Text affected by the Heading tag and font color tag. HTML

15 Font Size of Selected Text If you only want to change the size of selected text use the Font container <FONT> and size attribute. Sizes range from 1 to 7 with seven the largest. You can change the size of the selected text relative to the basefont size by using a plus or minus sign and a number. Size = -1 is one size smaller than the basefont size. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <basefont size=4> <H1>Welcome to <FONT color= fffff >my</font> Webpage!</H1> This is the area where you <FONT size=6>add the text </FONT>in your webpage. Type everything you want to right here! </BODY> </HTML> <FONT size=6> is added to enhance a portion of the text. HTML

16 Font Face Use the face attribute with the <FONT> container to change the font of your text. You can also use the face attribute with the <BASEFONT> tag. Types of fonts that you can use and have a good idea that the person looking at the page will be able to see are Arial, Times New Roman, and Comic Sans MS. If you use a font that consists of several words like Times New Roman, you must enclose the text in quotes. If you designate a font that people do not have on their machines it will default to whatever the browser uses. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=ff0000 text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <basefont size=4> <H1>Welcome to <FONT color= fffff >my</font> Webpage!</H1> This is the area where you <FONT size=6>add the text </FONT>in your webpage. Type everything you want to right here! <FONT face=arial>this is Arial text </FONT> <FONT face= Comic Sans MS >This is Comic Sans MS</FONT> <FONT face= Times New Roman > This is Times New Roman</FONT> </BODY> </HTML> Notice the different font faces of the last three sentences. HTML

17 Aligning Text By default text is left aligned in HTML. If you want to center text add the <CENTER> tags around the selected text. This is a container tag so you will need to close it with </CENTER>. To align a paragraph use the following tags: <P align=left right center> paragraph information </P> You can also define a division in the document and determine the alignment for information in that division. <DIV align = left right center> data data data </DIV> Special Effects Tags There are two special effects tags that can be added to your HTLML document. Both tags are not supported by the HTML standard and not all browsers support them. Most web designers have agreed not to use these tags. But they are fun for students to work with. Marquee is supported only by Internet Explorer, and when used the selected text scrolls across the screen. <MARQUEE>This is scrolling text. </MARQUEE> Blink is supported only by Netscape Navigator, and when used the selected text flashes on and off the screen. <BLINK> This is blinking text. </BLINK> Special Characters Characters such as and & require a special type of HTML code to make these symbols appear in a webpage. & & " HTML

18 Comments If comments need to be added to your web page, but you don t want anyone to see the comments enclose them in the <!-- -- > tag. Anything that is enclosed in these tags will not appear to the user in the browser, the only way to see the comments is to look at the source code. Comments! HTML

19 Creating Lists Unordered Lists An unordered list allows you to present information in bulleted form. There are two different tags that are required to make an unordered list. First, a tag that will identify the beginning and end of the bullet and indent each bullet item, <UL> </UL>, then a tag that will identify each bulleted item <LI> will be used. Indenting is not necessary; it just makes it easier to read the code. <UL> Notepad <LI> item <LI> item <LI> item <LI> item </UL> Browser Window Type in the name of the bullet you want to use in the beginning <UL> tag. <UL type= square circle disk > <LI> item <LI> item <LI> item <LI> item </UL> Use one of the bullet shapes not all in one line of code! HTML

20 Ordered Lists An ordered list allows you to present information that needs to be in a numbered list. Like the unordered list, there are two different tags that are required to make an unordered list. First, a tag that will identify the beginning and end of the bullet and indent each bullet item, <OL> </OL>, then a tag that will identify each bulleted item <LI> will be used. Indenting is not necessary; it just makes it easier to read the code. <OL> <LI> first item <LI> second item <LI> third item <LI> fourth item </OL> <OL type= I > <LI> first item <LI> second item <LI> third item <LI> fourth item </OL> Numerical Types Roman Numerals: I Lower Case: i Alphabetical: A Lower Case: a HTML

21 Definition Lists Use the definition list to present a list of terms and their definitions, as in a glossary. It is similar to the lists already mentioned in this handout. Like the other lists already described; there are three different tags that are required to make a definition list. First, a tag that will identify the beginning and end of the definition, <DL> </DL>, then a tag that will identify the term <DT> will be used; finally the definition itself is represented with <DD>. Indenting is not necessary; it just makes it easier to read the code. <DL> <DT>term <DD>definition <DT>term <DD>definition </DT> HTML

22 Adding Graphics Graphics can be added to web pages to add color and design to a website. Just be aware that the more graphics you add the slower the page could download for some viewers. Horizontal Rule The simplest graphic device that can be added to a web page is the horizontal rule <HR>. A horizontal rule is a line that the browser displays in a certain location. It is a non-container tag, so it requires no ending tag. <HEAD> <TITLE>Welcome to my web page! </TITLE> </HEAD> <BODY bgcolor=yellow text=0000ff link=ffffff vlink=af2faf alink=bc8f8f> <basefont size=2> <H1>Welcome to <FONT color="ffffff">my </FONT>Webpage!</H1> <HR> </BODY> Horizontal Rule HTML

23 Formatting the Horizontal Rule You can control several attributes of the <HR> with the following tags additions: Tag HTML Explanation Align <HR align=center> Aligns the position of the line. Size <HR size=10> Change the size of the line-defaults to a 2-pixel line if no size is specified. Width <HR width = 50%> Specify the width of the line across the page-defaults to 100% if no size is Color <HR color=red> <HR color=ffff00> specified. Specify the color of the line-only works in Internet Explorer. Inline Objects Inline objects are objects you place directly on a page and the browser displays them along with the text on the page. Graphics Two types of objects that are inserted into web pages are.gif and.jpg. GIF CompuServe Graphics interchange format JPG Joint Photographic Experts Group GIF files contain 256 colors (8-bit color) and are compressed and are suggested as the best choice for online graphics. JPG files contain up to 16.7 million colors (24-bit color) and are compressed even more than GIF files. Because of the high compression rate, browsers take awhile to download these images. They are not used very often for online images, but are sometimes used for graphics you can display in a separate window. Use the <IMG> tag to include an image on the web page. <IMG src= image.gif > If the image is in the same directory as the HTML document only put the name of the image. It is so much easier to keep up with your graphics and successful links if all images and HTML documents are in the same folder. HTML

24 Video Files An inline video file plays when the web page loads. Internet Explorer supports inline video, Netscape Navigator does not. You will have to embed the video file (inserts a video player applet) on the page to see it in Netscape. The basic code for entering an.avi file in Internet Explorer: <IMG dynsrc= video.avi > If the video clip includes sound, Internet Explorer will play the sound as well. One thing you might consider is creating a separate link to the video so it doesn t play every time some one opens your page. If you want the video to look include the loop attribute within the <IMG dynsrc> code. <IMG dynsrc= video.avi loop=3> The video will play three times. *********************************** The basic code for entering an.avi file in Netscape Navigator: <EMBED src= video.avi > Netscape adds a small video window on the web page that must be clicked by the user to see the video in action. Another thing to remember is the <EMBED> tag doesn t work consistently with Netscape. Sound Files Use the <BGSOUND> tag to insert an inline sound into your web page. When the page loads in Internet Explorer the sound will play. One thing to consider, the browser loads the sound file first before any other HTML data, even if the use doesn t have a sound card. This will increase the loading time of the page. <BGSOUND src= sound.wav loop=3 volume=5000> This tag features a looping ability like the video and a volume (10,000 to 0) with 0 representing full volume. Sound works the same way in Netscape as the video files, use the <EMBED> tag and click on the applet that appears on the web page. HTML

25 Alt Tags Alternative text is text that identifies the graphic or video file displayed on the web page. As you hover your mouse above the image a screen tip will display with text for the user to read. Add the ALT attribute within the image source line of code. <IMG src= image.gif alt= Name of Image > Aligning an Image Use the align attribute to position an image on the screen. The align tag is placed in the <IMG src> tag. If one is not specified the text will align with the bottom of the image. <IMG src= image.gif align= right left> Image is left aligned. Aligning Text with Images When an image is aligned on a web page the text typed in next to is wrapped next to the image. Even if a break tag <BR> is inserted the text still wraps. To break the text clear of the image use the clear attribute with the <BR> break tag. <BR clear= left right all> Image is left aligned with a <BR clear = left> command. See entire code on next page! HTML

26 Code for the images on the previous page. Code without a break. Code with a clear break. HTML

27 Linking it all Together! Linking to your Pages Use a relative URL to link other pages you have created to each other. By saving all the HTML pages in one location you can easily add a link to reference the page. A link is created using the <A> tag, the text that is in the tag appears underlined in the browser and is the clickable link. The href attribute allows you to point to the reference. <A href= vacation.html > Click here to book your vacation! </A> Name of the file Clickable text Linking to other Websites To link to a page that doesn t reside on your server you must use the entire (absolute) URL to create the link. <A href = > Region XV Education Service Center </A> Linking to other Documents/Information You can create links to other kinds of documents on your HTML web page. Use the same tags as above. When the link is clicked the browser opens an application so you can view the document. <A href = registration.doc > ESC XV registration form </A> Word will open to view this document. <A href= mailto:traci.evans@netxv.net > Click here to me! </A> Allows you to the author-opens your default application. Linking with Images You can create a link using a graphic. Use the <A> tag and the <IMG> tag. <A href= vacation.html ><IMG src= computersummer.gif ></A> HTML