Unit 2 - HTML 1

HTML Basics
HTML stands for HyperText Markup Language. HTML is not a programming language like Pascal, C, or Basic. It is used to format a document and is a widely used standard for data on the World Wide Web. HTML is relatively simple to use. It does not require a compiler, but it does require an HTML reader. HTML readers are typically called web browsers. For example Internet Explorer, and Netscape Navigator are web browsers that read HTML and interpret it appropriately. The browser receives the HTML document, and then reads the HTML mark-up "commands" in the document, known as tags, to format the document. So, when you look at an HTML document in a browser, you don't see the HTML tags, you just see the formatting that the tags have specified. There are some real advantages to this. The HTML document can be read on any platform that has a web browser. For example, you can read the same document on a PC, a Mac, a Unix or a mainframe.
Read the section called "HTML Overview" on page 67 and "HTML Editing Tools" on pages 68-70 of "Web Design in a Nutshell".
HTML Marking Up
The way you use HTML is to take the textual information and add HTML tags to it. Tags appear inside the angle brackets < and >. An example HTML tag is <B> for bold. This tag marks the beginning of the text to be emboldened. There is also another tag </B> that marks the end of the emboldening. An end tag is specified by the name of the tag preceded by the character / So, to create the text: Internet Commerce is great! you would mark up the text as:. <B>Internet Commerce is great!</B> Another HTML tag is <I> to mark up the text to appear in italics. To create the text: Internet Commerce is great! you would mark up the text as: <I>Internet Commerce is great!</I>
Note, that tags are not case-sensitive. So you can use <B> or <b> for bold. Although, the end tag has to have the same name as the beginning tag, once again the case doesn't matter.
Nesting HTML tags
BIS4226-2
What if you want to make text both bold and italicised? Of course, you would need to use both a <B> tag and an <I> tag around the text. But it is important to remember that you cannot overlap HTML tags. In other words: <B><I>Internet Commerce is great!</I></B> is correct, but <B><I>Internet Commerce is great!</B></I> is wrong. Overlapping tags is a common mistake. Although the browser is usually smart enough to work out what you want, it can lead to problems. Furthermore, overlapping tags is not valid HTML.
Read the section marked "HTML Tags" on pages 71-72 of "Web Design in a Nutshell".
Now carry out Activity 1 - Getting started with Notepad Now carry out Activity 2 - Getting started with HTML
Standard HTML Document format

Although a number of HTML tags have been introduced that mark up the way the text should be displayed in a browser, a correct HTML document must include a few special structural tags. These tags are <HTML>, <HEAD>, <BODY> and <TITLE>. The <HTML> tag should be placed around the whole contents of the document to tell the browser that the whole document is written in HTML. Like a person, all HTML documents have one head and one body. Everything, that is all the text, should be inside either the head or the body. Roughly, the <HEAD> holds information about the document itself, and the <BODY> holds information that appears in the main window. The <TITLE> of the document is actually part of the document <HEAD> and holds the information that appears at the very top of the browser (i.e. in the title bar) not in the browser window itself.
BIS4226-2
The standard structure of an HTML document is: <HTML> <HEAD> <TITLE>Text to appear in the title bar of the browser</TITLE> </HEAD > <BODY> The text to appear in the main browser window. </BODY> </HTML> When you write an HTML document in future, you should always use this format. Note: students are often confused about the use of the <BODY> tag and they often include multiple body tags. This can lead to some problems later on, so make sure you only use one <BODY> tag.
Read the section marked "Document Structure" on page 70 of "Web Design in a Nutshell".
Now carry out Activity 3 - Structuring your HTML document
HTML Formatting
The browser as formatter
As you will recall, it is the browser that actually formats the HTML document. But when it displays text, where does it put the line breaks? It has to work this out for itself. It tries to fit all of your text into the current window so that the user does not need to do any horizontal scrolling. If the browser window changes size, the browser will reformat the document once again. It also ignores extra spaces. If you put two spaces between words it will display the text in exactly the same way as if you put one space or a hundred spaces between the words. If you put blank lines in your document, the browser will ignore these too. The browser will also try to correct your errors when you write incorrect HTML. So it's obviously better to write correct HTML to avoid the browser making mistakes when trying to rectify your errors. Sometimes it can be difficult to get the browser to format things the way you would like. You will learn more tricks on how to do this as you work through the HTML units. Read "Information Browsers Ignore" on page 73 of "Web Design in a Nutshell".
BIS4226-2
Paragraphs and line breaks

The tag <BR> is used to start a new line. <BR> is a standalone tag, that means there is no </BR> tag. Note that <BR> does not place a line space between the two lines. To do that you need to use the <P> paragraph tag.
Read "Paragraphs and Line Breaks" on page 113 of "Web Design in a Nutshell".
Now carry out Activity 4 - Paragraphs and line breaks
Headings
Another set of HTML tags are the headings tags. These are <H1>, <H2>, <H3>, <H4>, <H5> and <H6>. The text surrounded by the <H1> tag is displayed in a very large font size. Text surrounded by the <H2> tag is displayed in a slightly smaller font size, and so on down to the <H6> heading tag. You can use these tags to provide your page with a standard outline format. For example, the page heading might be displayed using the <H1> tag, a section heading using <H2> and a sub-section heading using <H3> and so on. Note Earlier we noted that web browsers are HTML readers. Each browser is free to interpret HTML any way it likes. Consequently, a document read in one browser might look a little different to one read in another browser. Although, the HTML standard states that <H1> tags should be as big as or bigger than <H2> tags, and <H2> tags should be as big as or bigger than <H3> tags and so on, one browser might display the <H3> tag with the same font size as the <H2> tag, while another browser might display it in a smaller font size. Hence the difference in displaying the same text. In practice, these implementation questions will become an issue when you are using more complex tags. For now you can ignore this problem while writing HTML. Read the sections marked "Headings" on page 114 of "Web Design in a Nutshell".
Now carry out Activity 5 - Headings
Lists
BIS4226-2
Apples Oranges Bananas
1. 2. 3.
Apples Oranges Bananas
The two examples above are lists. The list on the left uses bullets to mark the list elements, and is known as an unordered list. The list on the right uses numbers to mark the list elements and is known as an ordered list. HTML lists consist of a list tag and list element tags. In an unordered list, the list tag is <UL> and the list element tag is <LI>. Note, that although the list element end tag </LI> was optional in earlier versions of HTML, the list end tag </UL> is not optional. If this is omitted, all the rest of the text will be indented to the same level as the list elements. To create the unordered list in the example above, the following HTML is used. <UL> <LI>Apples</LI> <LI>Oranges</LI> <LI>Bananas</LI> </UL> Note that it is useful to indent the <LI> tags on the page to keep track of the level of indentation. If you want to add more list elements, just add an extra list element tag <LI> </LI> within the <UL> tags. Ordered lists are almost exactly the same as unordered lists, except that you use the <OL> tag instead of the <UL> tag. The definition list, however, is a bit different: it has no bullets or numbers. The definition list tag is <DL> and the list elements consist of a term and its definition. The term is marked by the <DT> tag and the definition by the <DD> tag. An example of the use of the definition list is the glossary definition that appears below. HTML Hypertext Markup Language; the format of web documents This was created using the following HTML: <DL> <DT>HTML <DD> Hypertext Markup Language; the format of web documents </DL> Note, if you want to create a list within a list, list tags can be nested. Read the main section "Lists" on pages 118-122. You should study the sub-sections "Unordered (Bulleted) Lists", "Ordered (Numbered) Lists", "Definition Lists" and "Nesting Lists" Now carry out Activity 6 - Lists
Preformatted text
If you want to include extra spacing or tabs in the text, you can achieve this using the <PRE> tag. But note that text inside the <PRE> </PRE> tags will be displayed in a non-proportional spaced font like Courier.
BIS4226-2
In a later unit, you will find out how to format text using HTML tables, which is a much better formatting feature of HTML Read the definition of the <pre> tag on page 123-5 of "Web Design in a Nutshell".
HTML Comments
If you want to write a note to yourself in a page, for example, to explain how you did something or if you want to write a note to another developer who will be looking at your code, you could use the HTML comment tag. Developers use comments all the time, and you will see lots of comments in really good pages on the web. An HTML comment would look like this:  .
Review the section on "Text in comments" on page 73 of "Web Design in a Nutshell".
Now carry out Activity 7 - Preformatted text and comments
Anchors
The heart of HTML is the hyperlink. This section will describe how to create links to other HTML files and links to other sections of the same HTML file. To do this you use the anchor tag: <A>. The parameters added to the <A> tag direct the user of the computer and the browser software to display new content when the link is clicked.
Simple hypertext links

To link to another file use the tag <A HREF="URL">link</A> In this context, the term URL means the location of the file you want to link to. It could be on your hard or floppy disk, as in a:\filename.htm or c:\my documents\week01\filename.htm or it could be on the same webserver as in filename.htm or it could be on another web server, as in http://www.fortunecity.com/ username/filename.htm
Read pages 133-134 in "Web Design in a Nutshell". This covers the main topic "Simple Hypertext Links"
Now carry out Activity 8 - Simple hypertext links
Linking to email addresses and other non-web links

Up to now you have been using the http protocol to inform the browser to load a web page when you click a hyperlink.
BIS4226-2
To create a link to an email address you will use the mailto work because it depends on the user's email program being configured. However, this feature is commonly used on the Web to contact the webmasters or to get more information from sites. The following anchor tag should be used to create a mail link: <A HREF="mailto:username@domainname</A> You can also suggest a topic in the subject line of the email message using: <A HREF="mailto:username@address.com?SUBJECT=e-mail from a friend"></A> You can also use the protocols: ftp://, news://, telnet:// and gopher:// to fire up another program on the t work.
Read the section on "Non-Web Links and Protocols" on pages 143-145 in "Web Design in a Nutshell". (Suggested study time: 15 minutes)
Linking to sections within documents

You can use the anchor tag to create a hyperlink to a specific location within the same or another HTML file. Firstly, you need to define the location using the tag: name given to the specified location. <A NAME="xxxx"></A> where xxx is the
You then create the link to the location using the tag <A HREF="#xxx">link</A>. location is in another document you need to include its file name too, i.e. <A HREF="URL#***">link</A>
If the
Read the section "Linking Within a Document" on pages 134-135 in "Web Design in a Nutshell".
Now carry out Activity 9 - Linking to sections within a document
Targeting windows
For version 4 web browsers, you can use the target window attribute of the anchor tag: <A HREF="URL" TARGET="New_Window"></A> This lets you specify where to display the contents of a selected hyperlink. It is commonly used with frames (see Unit 8) or multiple browser windows. It lets you open the link in a specified window or a new browser window. character of any target you define in your documents. There are four reserved target names for special document redirection actions:
BIS4226-2
_blank _self
_parent _top
The browser always loads a target="_blank" linked document in a newly opened, unnamed window This target value is the default for all <A> tags that do not specify a target. It causes the target document to be loaded and displayed in the same frame window as the source document This one is useful for framed sites to create navigation links back to the parent window. _top is used by web designers to force a break out of a framed site, or to take over the browser window. That means for example, if your site has be referenced in a list from a framed site, clicking on your links only brings up yo web site. The _top target attribute forces your link to take over the entire browser window.
Read the section on "Targeting Windows" on page 137 in "Web Design in a Nutshell".
Now carry out Activity 10 - Targeting windows
Link appearance
It is possible to change the colour of hyperlinks to coordinate with your web site colour scheme. You can also remove the underlining of hyperlinks.
Read the section "Affecting the Appearance of Links" on pages 135-136 in "Web Design in a Nutshell".
Now carry out Activity 11 - Changing the appearance of links
BIS4226-2
Images
Horizontal rules
A horizontal rule is a line that extends across the full width of the page. It is created by the tag <HR> There are a number of attributes that allow you to change the appearance of a horizontal rule. These are shown below: Thickness Width Width percentage Alignment Solid line (without 3D cutout look) <HR <HR <HR <HR <HR SIZE=x> (where x is the number of pixels) WIDTH=x> (where x is the number of pixels) WIDTH="x%"> (where x is the percentage of the page width) ALIGN=LEFT|RIGHT|CENTER> NOSHADE>
Horizontal rules are also called dividers since they are often used to divide a document into sections. However, the current graphical fashion frowns on their use as dividers, so you are recommended not to make heavy use of them.
Read the section "Horizontal Rules" on pages 154-156 in "Web Design in a Nutshell".
Graphics
In-line images give the Web much of its visual appeal. They can also cause people on the end of a slow link to give up and go elsewhere; so unless large in-line images are vital, try to avoid them or offer smaller versions or alternate pages for those who prefer to avoid them. Small icons, however, have almost negligible transfer cost and can greatly enhance the appearance of your pages. Use GIF or JPG files for graphics as appropriate: Scanned images look better as JPG files. The JPG picture format allows variable compression to make the file size smaller, but too much compression makes the picture lose detail. As a guideline, use between 60 and 75 percent compression level for JPG if you have a choice. JPG is always 24 bit or 8 bit grey scale (such as in a black and white photograph). GIF is useful for special effects such as transparent artwork (background transparency), animation, and is 8 bit graphics or less.
Another format called PNG combines the features of 24 bit JPG and GIF features, but is only partially supported by browsers. The <IMG> tag is used to embed a graphic image in a document in the following way: <IMG SRC="URL" ALT="Alternate Text"> The URL is the location of the image file and the ALT attribute lets you specify some text that will be displayed if the browser does not display the image.
In-line images are often placed inside anchors. The HTML code to create an image as a hyperlink is: <A HREF="URL"><IMG SRC="URL" ALT="text"></A>
BIS4226-2
When an in-line image is a hyperlink, a border will be, by default, placed around the image. This can be removed using BORDER=0. However, a border, of any size, can be placed around a graphic using BORDER=x where x is the width of the border in pixels. You should make full use of the WIDTH and HEIGHT attributes in the IMG tag. This allows the browser to layout the page before all the graphics have downloaded. The width and height can be specified either in pixels or as a percentage: <IMG SRC="URL" WIDTH=x HEIGHT=x> (in pixels) <IMG SRC="URL" WIDTH=x% HEIGHT=x%> (as a percentage) You can also specify how the graphic is to be placed on the page in relation to the rest of the text using the ALIGN attibute By default the bottom of the image is aligned with the bottom of the text. However, this can be specified as ALIGN=left|right|top|middle| bottom. If you want to include a large graphic which will take a long time to load, you can load another (smaller) image first whilst the second larger one loads. Use LOWSRC="URL" to specify the location of the initial image. Read pages 157-164 in "Web Design in a Nutshell". This covers the sections on "Image Basics", "The <img> Tag and Its Attributes" and "Tips for Placing Graphics".
Now carry out Activity 12 - Graphics
Objects
In this section we look at how you can incorporate other objects, i.e. multimedia and Java applets into your web pages: Internet Explorer lets you display avi files in your browser using <IMG DYNSRC="filename.avi" > The <EMBED SRC="URL"> tag is used to embed other media like background sound. For example <EMBED SRC="music.avi" WIDTH=320 HEIGHT=200 autostart=true loop=3> inserts an avi movie object into page, scales it to 320 x 200, starts it and plays three times You can include a Java applet using the <APPLET> tag. For example, <APPLET CODE=clock.class codebase=http://www.server.com/classes/ height=100 width=100> </APPLET> loads a Java applet residing on a remote web server without the web designer even looking at any Java code The <OBJECT> tag is used by multimedia software publishers like Macromedia and Digital Workshop (among others) to play their programs in browsers. Originally used by Microsoft for its Active-X technology, Netscape has adapted it to some degree. You probably won't be writing code using this tag. Programs, like Flash and Director, generate the code for you to copy and paste into your HTML files. Some programs, like Dreamweaver, which is a web authoring tool, produce sophisticated code snippets based upon the designer's input parameters. The following is an example that Macromedia Director produced for a Shockwave movie. Notice how the EMBED tag is inside the OBJECT tag.
10
BIS4226-2
<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/direct or/sw.cab#version=7,0,0,0" width="150" height="100"> <param name="src" value="welcome.dcr"> <embed src="welcome.dcr" pluginspage="http://www.macromedia.com/shockwave/download/" width="150" height="100"> </embed> </object>
Read pages 164-167 in "Web Design in a Nutshell". This covers the sections on "Adding Java Applets to the Page", "Adding Plug-In Media with <embed>" and "Adding Media Files with <object>".
Imagemaps
An imagemap is a graphic that has certain areas on it defined to "do something" when the user clicks on each of the area. These areas can do whatever normal HTML links do - email, ftp, gopher, etc. Two very popular uses for image maps are navigation bars and thumbnail sheets. There are two types of imagemaps: client-side imagemaps and server-side imagemaps A server-side imagemap requires the imagemap information to be saved within a separate file stored on a server and accessed by a CGI script. This type of imagemap is far more complicated to set up, and is not supported by all servers. Server-side imagemap behaviour varies from system to system, even among different systems using the same server. A server-side imagemap shows mouse co-ordinates at the bottom of the screen. A client-side imagemap (CSIM) requires the imagemap information to be stored within the HTML document. A client-side image map shows the actual URL in the status bar message at the bottom of the browser window. Client-side image maps store the hyperlink information in the HTML document, not in a separate map file as do server-side image maps. When the user clicks a hotspot in the image, the associated URL is sent directly to the server. This makes client-side image maps faster than server-side image maps because the server does not need to interpret where the user clicked. Client-side image maps are supported by Netscape Navigator 2.0 and later, and all versions of Microsoft Internet Explorer.
Read pages 137-143 in "Web Design in a Nutshell". This covers the sections on "Imagemaps".
11
BIS4226-2
Writing good HTML

This final section is concerned with the production of good HTML and the importance of testing your materials before going "live". There are a number of online validation services, where you can submit your web pages for checking. The World Wide Web Consortium's HTML Validator , for instance, checks HTML documents for compliance with W3C HTML Recommendations and other HTML standards. TML errors. If you have made mistakes, you will get a list of problems, but if it is correct, you will get this message:
Valid HTML 4.0 No errors found! Congratulations, this document validates as HTML 4.0 Transitional!
Certain HTML editors or authoring tools have built-in HTML checkers or validators, which are sometimes useful but sometimes not. These built-in validation tools do not always get it right. Sometimes help, particularly if you produce complex web pages with lots of HTML code. The more sophisticated tools also let you adjust the level of target browser as well as fine tune options like noting a missing ALT inside the IMG tags.
Read the section on "Writing Good HTML" on pages 11-12 , "Knowing Your Audience", "Considering your Site's Purpose" and "Test! Test! Test!" on pages 12-13 of "Web Design in a Nutshell" and"Tips on Good HTML Style" on pages 74-75.
Now carry out Activity 13 - Validating HTML
Now work through the Discussion Topic
12
BIS4226-2

Unit 2 - HTML 1

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Unit 2 - HTML 1

Hochgeladen von

Copyright:

Verfügbare Formate

HTML Basics

Nesting HTML tags

Standard HTML Document format

Now carry out Activity 3 - Structuring your HTML document

Paragraphs and line breaks

Now carry out Activity 4 - Paragraphs and line breaks

Now carry out Activity 5 - Headings

Apples Oranges Bananas

Apples Oranges Bananas

Review the section on "Text in comments" on page 73 of "Web Design in a Nutshell".

Now carry out Activity 7 - Preformatted text and comments

Simple hypertext links

Now carry out Activity 8 - Simple hypertext links

Linking to email addresses and other non-web links

Linking to sections within documents

Now carry out Activity 9 - Linking to sections within a document

Now carry out Activity 10 - Targeting windows

Now carry out Activity 11 - Changing the appearance of links

Now carry out Activity 12 - Graphics

Writing good HTML

Now carry out Activity 13 - Validating HTML

Now work through the Discussion Topic

Das könnte Ihnen auch gefallen