Basic HTML by Khairul 2001

Training 1.0By Muhammad Khairul (krulz7@yahoo.com)

Title: The Basic of HTML.

Requirement:Pentium Notepad Win32Internet Connection 14.4KbpsWin95/WinNT/WinXP

Language used: HTML 4.0

Abstract This manual main objective is to provide sufficient information on web publishing especially the usage of the Internet lingua franca, which is commonly known as Hypertext Markup Language or (HTML). This manual covers common topic such as Internet Service Provider, HTML Editors, graphics line command and the anchor reference function. Some technical terms will be used as an introduction to the high-level programming, which is the HTML. It is expected, by the end of the training, students will be able to master two basic and common features of the Internet, which is the hyperlink and image embedding. Uploading pages to the Internet will also be explained briefly in this manual.

Content1.0 Introduction2.0 Internet Service Provider (ISP) 2.1 Jaring vs Tmnet 2.2 HTTP Server3.0 First Page 3.1 Hello World - Definition 3.2 A little bit of Programming 3.3 File naming 3.4 Understanding what you have done4.0 Graphics 4.1 JPEGs vs GIFs 4.2 Adding graphics and background5.0 Linking 5.1 Hyperlinks6.0 Font 6.1 Font setting is important7.0 Uploading 7.1 Brinkster.com and so on…8.0 Conclusion9.0 Bibliography

1.0 Introduction

HTML stands for Hypertext Markup Language. It’s the language, which web sites are written and design with. HTML is actually a display language. Nothing like object oriented or structured language, may be a bit.

Should you learn HTML?It is great to know HTML but not necessarily if you’ve got the tools. If you into detail programming, ASP, C++, Perl and whatever, the answer is Yes! And if you into designing, advertising and publishing again the answer is Yes! So you should learn HTML for the sake of the knowledge itself and to have a different insight of the Internet world. HTML Editors.Fortunately, there’re some HTML editors available for free on the Internet. HTML editors could be classified into three categories; namely Text-Based, Dedicated HTML editors and What You See Is What You Get Editors (WYSISYG).

You may hear some newly developed editors such as Dreamweaver x.x, Homesite x.x, or Frontpage x.x. These are combination of the three editors mentioned. Infect, you don’t have to worry what type of editors you want to use. This is because; most of the editors are Text-Based Editors. All HTML editors should have the Text-Based Editors built in. That is why this manual is produced. The very general insight of what is HTML and the right tool for that is the ugly but powerful, Notepad Win32.

2.0 Internet Service Provider

Internet Service Provider is the company you’ve registered your computer and they provide you with internet capabilities using your modem or what ever network card there is. An Internet connection enables you to look at web pages, get email, and send your artwork and coding your sites.

2.1 Jaring vs. TmnetMalaysia has two respected ISP, Jaring and Tmnet. Both of these ISP provided sufficient access to homepages in the Internet community. In terms of cost, calculate it by your self, and providing spaces for Internet webpages, I believe Jaring is better than Tmnet. Go to their websites and check it out yourself.

http://www.jaring.com.myhttp://www.tm.net.my

(Valid since 1999)

2.2 HTTP server.

Sometimes, you may need a HTTP server to set up your website, if only your website is the dynamic kinda one. HTTP Server can be divided into many parts from Solaris to Unix and to Internet Information Server. Dynamic homepage will not be covered in this manual because it requires a lot more details in the static development of homepage. That’s why-lah the fundamentals of homepage making should be understood. Most server uses either Internet Information Server 4.0 (IIS4.0 ) and Apache, the best HTTP server ever. But in conclusion, this manual does not explain the basics of dynamic HTML.

3.0 First Page.

This part contains the fundamentals and short exercises of homepage making. Everything in this part is the concept. Once the concept is mastered then, other parts of the homepage can begin. The main goal for this part, is to introduce a simple start for high-level programming such as HTML.

3.1 Hello World

How does the web work?Many people are confused the distinction between the World Wide Web and the Internet. The WWW is actually a subset of the Internet. They’re other things, than WWW, such as Gopher, Wais, File Transfer Protocol and many unrelevant things to this chapter. WWW is then woven and knits into one large network where accessible files could be shared. Any documents that have a link, is part of the Internet, and that’s why it is called a ‘web’.

DefinitionsSome terms that will be used later on.

Hypertext:Text that is linked to documents on the web

Hyperlink:Linked text, images, or media

Document:Any individual object in the internet

Element:An object in an HTML file

Object:Any distinct component, such as tag, attribute, image, text file etc

Tag:An HTML directive, enclosed in <example>

Attribute:A modifier to the tag <example file=”1”>

Container: An element that encloses other objects, for example <example> This is an example </example>

3.2 A little bit of Programming. A step by step guide of a html file.1. Open your Notepad at Start>Programs>Accessories>Notepad 2. The difficult part is understanding this; key in these;

<HTML><HEAD><TITLE> My Profile </TITLE></HEAD><BODY><H1> Welcome to My Homepage </H1><BR><H1>Feel free to browse around</H1></BODY></HTML>

Explanations:

1. <HTML> is a directive tag saying that this homepage is a Hypertext Markup Language page.2. <HEAD> is the element in which some information to the server is submitted. Among the object that is submitted is <TITLE> 3. <TITLE> contains some information, which is the title of the homepage. My Profile is

the title of the homepage. Provide a title for the homepage.4. </TITLE> Closing tag for <TITLE>5. </HEAD> Closing tag for <HEAD>6. <BODY> Container for document body7. <H1> Level of headings, it can be <H2>,<H3>,<H4>,<H5> and <H6>8. </H1> Closing tag for <H1>9. <BR> Force a line break. Moves point of text to the beginning if the next available

line.10. <H1> Same explanation in 711. </BODY> Closing tag for <BODY>12. </HTML> Closing tag for <HTML> continue.3. After finishing key in the html script save the file as index.htm in My Document folder,

File>Save As>index.htm – take note that the file extension htm can be made by changing the file type as All files. Refer Figure 1.

4. View the index.htm by double clicking on the icon in the My Document. You may view something like this. Refer figure 2.

Figure 1

Figure 2

So this is your first homepage. Congrats.!!

3.3 File Naming

Because of most server that available (explain later) are based on a 16-bit or 32-bit profile naming, the name of htm file should not cause a bad reference to the server. Name such as index of page 1.htm would then be translated in the server such as index%20of%20page%201.htm which is very bad for a beginner level programmer. Same to my-document.htm and my_document.htm, it wont work!. This little part of homepage should be recognized otherwise, once it comes to hyperlinks and hypertext it would cause great trouble.

3.4 Understanding what you have done

This is the very basic of structure language in the Internet. The tags are read by the server or browser, in this case one by one until the end. So tags should be clear so that it could be replaced and read by some one else. Case-sensitive aren’t that important in HTML tags. <HTML> equals to <html>,<Html>,<HTml> and so on. This is another advantage for the html because of the easily understood tags.

4.0 GraphicsThere are three formats, which the browser recognized as image file. GIFs (Graphic Image File), JPEGs (Joint something Expert Group) and rarely found PNGs (Portable Network Graphic).

4.1 JPEGs versus GIFs

Easily stated, GIF’s files are used when:-1. Artwork that has horizontal regularity2. Nothing with “noize effect.”3. Large areas of flat colors.

JPEG’s files are suitable only with high-quality photographs and anything that have noize and blur effects.

Why?This is because the compression in gif files are made they way of LZW –Lempel Ziv Welch are. This part will not be explained because it is too complex. The only thing that is important, use lower kilobytes of graphics on a homepage. Otherwise, it will cause lagging and everybody hates lagging. Refer figure 3 for a 500kb file to be downloaded.

Figure 3

4.2 Adding Graphics and Background

One of the key features of HTML 4.0 is the opensource mode, which allows the source code to be edited. However, HTML 4.0 has its very own advantage; it is able to recognize tags by the delimiters. <>. Therefore to add image to a website could be perform by adding some tags into the HTML scripts.

Like the previous source code, it can be edited simply by using notepad and some new tags.

For an image to appear to a homepage a source of the image must be defined. The tag is <img src=”source_file”></img> . Only three formats will be recognized by the server or the browser.

<HTML><HEAD><TITLE> My Profile </TITLE></HEAD><BODY><H1> Welcome to My Homepage </H1><BR><IMG SRC=”welcome.jpg”></IMG>

<H1>Feel free to browse around</H1></BODY>

</HTML>

Upon finishing this simple script something like this should come out. Refer figure 4. Take note the <IMG SRC=”welcome.jpg”></IMG>; this tag should able to ‘embed’ a picture onto the index.htm page.

Figure 4

One more important thing that you must be aware of is the directory in which the graphic file, welcome.jpg is in held in. Wrong directory would result in no pics. Refer Figure 5

Figure 5

Therefore it is advised, that a folder hold all the image files and the source of the image in the <img src=”../image/file_name.jpg”></img>, in a single folder only.

BackgroundConcerning background, actually background is the attribute of the body tag. For example; <body background=”file_name.jpg” bgcolor=”orange”></body> . A 800 X 600 have the maximum width in a browser about 750 pixels. This 750 pixels would cover even in fullcsreen mode. Example below Figure 6

Figure 6

5.0 LinkingHyperlinking in the website would be the best feature of a htm page. Without any other tags, the <A HREF= “file_name.htm”>Object</A> would link between two pages provided the object is defined. Automatically, a thumbnail would appear, if the object is defined.

5.1 HyperlinksNote that, the directory of the source file should be properly define in the directive. For example <A HREF=”http://www.yahoo.com> YAHOO!!</A>, would link to www.yahoo.com page. The directory should also determine carefully, for example <A HREF=”../files/index.htm”>INDEX</A> is not the same as <A HREF=”index.htm”>INDEX</A>.

An example is below;

And the output product would be something like this; next page Figure 8

Figure 8

6.0 Fonts

Fonts or typography plays a major part of web design. Verdana would be the conservative look, Arial would be the nerd-ish sorta look and Times Roman the lawful sinister sorta look. So this part the explanation about the fonts and typography will be explained.

The command line for fonts directive is;

<FONT FACE=”Verdana” SIZE=”2” COLOR=”ORANGE”>My name is Khairul</A>

If added to the previous script it would look something like this, Figure 9

Figure 9

And the output is;Figure10

Figure 10

And that just about it,

Explanation:

<FONT FACE=”Verdana” SIZE=”2” COLOR=”ORANGE”>My name is Khairul</A>

And that’s all, the value can be Verdana, Arial, Helvetica, Times New Roman and etc,It is safe to defined the value something that is usable or otherwise, the font will be set to Times New Roman (This happened if the specified font isn’t in the system of the server or browser).

7.0 Uploading

The critical part of the web is when the user upload some data to the internet. Usually pages like www.geocities.com, www.tripod.com, and www.yahoo.personal.com and others have their very own File Manager on the Internet. So beginner webmaster would send their pages using their very own file manager. But the problem with this kind of FTP is that the pages sent up is limited and is check one by one by the server. So user have to wait for several minutes for the file to be uploaded.

The advantage using a third-party programs of FTP is that they are more reliable and effective( coz ussually they include a report check to your website) .They provide sufficient function for a FTP interface. Some FTP program you may want to review is CuteFTP, WS_FTP and any FTP browser.

7.1 Brinkster.com and so on..

www.brinkster.com would be the best host right now, 1997 would be www.xoom.com but the company bankrupt. Some limitation to www.brinkster.com is the fact that they only give you their nice set of File Manager in the Internet, and the most important is that it works!! 8.0 Conclusion What we have covered in this beginner manual are; the concepts of the web documents, image command line, hyperlinks essentials, fonts specification and uploads through the net. These five elements would be the necessary knowledge to build a basic and static homepage.

9.0 BibliographyWeinman,L & Weinman, W. (1998) <creative html design>; New Riders Publishing, USA

Directive Tag

Attribute=”Value”Object