Project in Computer

HTML
Web Design

Name : Justine Louise Landicho Yr. & Sec: II Deuteronomy Date: March 10, 2013 Teacher: Sir Jonathan A. Capuso

Table of Contents
I. Title II. Acknowledgement III. Table of Contents IV. History of HTML V. About Computer (Chapter 1) VI. Chapter 2 VII. Chapter 3 VIII. Chapter 4 IX. Make your own website

History of HTML

The founder of HTML was Tim Berners-Lee and his product was made attractive to the general public by Mosaic browser which was evolved at NCSA. It has become extremely popular and well-known in the 1990s when the Internet had been developing rapidly. During this period, HTML was broadened and presented in different modifications. The Internet strongly depends on vendors and page creators who share the joint conventions for HTML. The understanding that success of Web development is based on integration of the rules has helped the Web community to create united specifications for HTML. Most users and developers understand that HTML documents must work in the same way on different platforms and browsers. Compatibility of HTML is its key benefit and it saves time for developers who dont have to create several versions of a document for different users. Otherwise the Internet wouldnt be able to be so easy-to-access and the battle of formats would be a serious obstacle for the Web evolution. Each new edition of HTML tries to achieve more unanimity among industry players and to make sure that the documents of the developers wont become unreadable in a brief time interval. The vision of the HTML developers is that all devices must be able to reach the data on the Internet: computers with different platforms, browsers and characteristics, pocket devices, cell phones, devices for speech, and many others.

Chapter 1

Computer Concepts and Principles

Lesson 1 : Perspectives on Computer Concepts
We must have a little perspective about our device. It is essential to know whats inside your computer so that you will know what are the tasks that you can do to maximize the use of your computer according to specifications.

What is a computer?
A computer is an electronic device that manipulates information or data. It has the ability to store, retrieve, and process data.

Hardware Components
These are the physical parts of the computer which you can touch and feel. Input Devices These are peripherals in the computer that are used to enter the data and instruction in the computer. Output Devices There are peripherals in the computer that are used in producing results of computer operations into understandable product or result. Processing Devices These are responsible for the execution of the programs and control of its overall operation. Storage Devices These are physical equipment that can be considered as input and output device at the same time.

Software Components
Software is the set of instructions that tells the computer what to do. It is also known as program. System Software This is the backbone of all software. Examples are Operating Systems and Utility Softwares. Application Software These are the programs with specific function or use. Examples are Microsoft Office Family and Photo Editing Tools. Anti-Virus Software Antivirus is a protective software that are designed to defend your computer against malicious software. Examples are Avast, Avira and AVG.

Proper Caring of Computer

1. Place the computer in a stable place. 2. Keep the computer dry, and dont overheat it. 3. Keep the computer away from strong magnetic fields such as high capacity transformers and electric motors. 4. Shut down the computer properly and do not forget to save your work. 5. In case of malfunction, dont disassemble the computer by yourself. 6. In cleaning, do not apply cleaner directly to the computer, use a soft clean cloth. 7. Do not use a computer when you are near water. 8. Install an AntiVirus program and keep it up-to-date. 9. Be careful when opening electronic mail from sources you do not know.

Chapter 2

HTML Design and Process

Lesson 1 : THE THEORY OF HTML What is HTML?

HTML stands for HyperText Markup Language. It is the language that most web pages are written in. It also contains special tags that determine the presentation of web information in our browser. It is not a programming language, but a markup language. It also uses markup tags to describe web pages.

Basic Rules of HTML

Html uses tags to markup the text of a web page.

HTML tags SHOULD be surrounded by angle brackets like <head>. HTML tags SHOULD come in pairs like <u> and </u>. The first tag in a pair is the start tag, and the next one is the end tag. Start and end tags are also called opening tags and closing tags.

Types of Tags
<p> This is a paragraph. </p>

The <p> is the opening tag that indicates that the browser should display a paragraph. While on the other hand, a closing tag (</p>) looks similar except that it is initiated by a forward slash. Opening tags consist of a sequence of characters that indicate the meaning of the tag, of course surrounded by angle brackets. (<) (>) A closing tag indicates the end of the meaning of the tag. The pair of opening and closing tags are used to surround text that should be set aside as a separate paragraph.

HTML Documents = Web Pages

HTML documents describe web pages. HTML documents contain HTML tags and plain text. HTML documents are also called web pages.

A web browser is created to read HTML documents and display them as web pages. The browser doesnt display the HTML tags, but uses the tags to interpret the content of the page.

HTML Basic Pattern

Editing HTML
In editing HTML, a program like Notepad is used. It is also believed to be the best editor to learn HTML. However, if youre a professional web developer, it is advised to use programs like FrontPage or Dreamweaver instead of settling for Notepad.

Saving and Opening the Document

In saving HTML documents, you have to save them twice. First, as a text file (.txt) and finally, as an HTML file (.html). It is important to save your site documents in a designated folder so you know where to find them. It is also advisable to use simple names, like file1.html or web.htm for easier access. The filename extensions that can be used in saving your file as an HTML one are .html and .htm. To open the document, make sure to use the All Files in the file type box. Remember that if youre using a word processor for your hand coding, be sure to Save As Text or you will end up with word document and may not be recognized by your browser.

Concepts of Web
There are a few words interlinked with web that sometimes get confusing for us. Let us see the differences below.

The internet is the network of the several different computers which are connected through the linkage of accessories like copper wires, fiber optics and wireless connections. It is also known as the network of networks. While the World Wide Web (WWW) consists of the interlinked connections of information and documents which are taken as the resource by the general public. This is how millions of pages over the world display their document over the Internet. Most of these documents are using special type of protocol like the HTTP or the Hyper Text Transfer Protocol.

What is a Web Page?

A Web Page is an interactive electronic document where text, graphics, and sounds are posted.

What is a Web Site?

A Web Site is a collection of related web pages. Its like a compilation of web pages that is interrelated with each other and contains the needed information. It can be viewed through its address known as Uniform Resource Locator (URL).

How the Web works?

First, a web page is requested when a URL is typed into the address bar of a users browser. This request is sent to the server where the information is held. Then the server finds the page that the user has

requested, and responds by sending the page back to the client. This is sometimes called the request/response model.

Browsers
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource in identified by a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece of information. Examples are Internet Explorer, Opera, Google Chrome and Safari.

Chapter 3

Advanced Markup
Lesson 2 : Traditional Page Layout Tables and Layout
Tables are used to display data on web sites. But there is an alternative use for them. Tables make it possible to divide text into columns, and to separate blocks of text and graphics into either columns of a specified pixel-width or a percentage width relative to the other columns in the table. They are also used to lay out sections of text and graphics in imitation of how this is done in printed media.

More Complex Tables

Definitions of row and column widths and heights can make an interesting combination of cell shapes and sizes to be used to

construct a layout using a table. The rowspan and colspan attribute of the <td> element direct cells to span more than one row or column.

<html> <title> Complex Table </title> <table width=400 border=1> <tr> <td colspan=4> This cell has a colspan of 4 </td> </tr> <tr> <td rowspan=3> This cell has a rowspan of 3 </td> <td> &nbsp; </td> <td> &nbsp; </td> <td> &nbsp; </td> <td> &nbsp; </td>

</tr> <tr> <td> &nbsp; </td> <td> &nbsp; </td> <td> &nbsp; </td> </tr>

The values for the width attribute can either be given as percentage or a fixed number of pixels. The values for align attribute are left, center, or right. The values for valign attribute are top, middle, bottom, or baseline.

Tables for Layout and Accessibility

When working with tables for layout, it is important to consider what happens to that table when it is read by a browser that does not support tables. Linearization is when the browser reads the text from the top left hand cell, moving along the cells to the right and then starting on the next line.

Frames and Frame Building

Frames allow a web page to be splitted into two or more independent documents within the browser window. The <frame> tag defines a particular window within a <frameset>. Therefore, we use the <frame> and <frameset> elements instead of the <body> element.

<html> <head> <title> A document containing frames </title> </head> <frameset cols=130,*> <frame src=menupage.html> <frame src=contentpage.html> </frameset> <noframes> <body> This is what will appear on the screen if the person viewing the site isnt using a browser that supports frames. </body> </html>

The <noframes> element contains content that will display if the page is viewed using a browser that doesnt support frames.

The <frameset> element takes a cols attribute, which indicates that the frames contained will act as columns within the main browser window. The value of the cols attribute is a comma-delimited list of the widths and columns will each take. A width can be specified as an integer value for the number of pixels, a percentage value, or a mathematical value.

Nested Framesets
It is possible to nest framesets inside one another. It means to close the tag by pair starting from the middle up to the side.

<p> <u> <i> <b> This is a paragraph. </b> </i> </u> </p>

In the example above, we closed the <b> tag because it came last from the set of opening tags, followed by the <i> tag, <u> tag and finally the <p> tag, which came first from the set of opening tags.

Slicing
It is another old-fashioned way of creating a page layout. The aim was to optimize the various elements of the page layout as either GIF or JPEG files, depending on what works best for that part of the page.

Chapter 4 Modern Scripting

Basic JavaScript
JavaScript is a vital addition to any web developers toolkit. It is the most widely used programming language in the web browser, and also the first language to be introduced to build upon HTMLs that lacks interactive features. It also enables web developers to respond to events, such as mouse button is being pressed or the mouse being moved.

What is JavaScript?
JavaScript is related with HTML pages. In short, JavaScript is also a programming language. It allows us to create programs that tell the computer exactly what to do. Programs are made up of lines of instructions, which are processed sequentially. It is also a particular type of programming language known as scripting language. These are languages that can be embedded into applications. Programs in scripting languages are usually known as scripts.

JavaScript and HTML Script Tags

The <script> Tag

It has two purposes; to identify a block of script in the page and to load a script file. It is closed by the </script> close tag.
<script language=JavaScript1.2 fptype=dynamicanimation src=file.animate.js> </script>

The example above has the following attributes.

src=url
This attribute is optional. Its value is a url that identifies a .js file.

language=javascript
It is used to select other programming languages and specific versions of JavaScript.

type=text/javascript
It is also optional, because the default programming language in all browsers has been JavaScript. In HTML, it is better to leave it out. The browser knows what to do.

Dynamic Menu

Sample Code:
<html> <head> <title> Javascript-Hypertext menu example </title> <!--//document.window.location = go_to_value --> <script language=javascript type="text/javascript"> <!--

function go_to_menu(go_to_value) {

alert(go_to_value) return true } --> </script>

</head>

<body>

<body> <p> Press the 'go to' page button this will take you to example 1 or example 2. <br> Where you go depends on what's displayed in the drop down list. </p>

<form name='myForm'> <select name='mySelect'>

<option value="jseg01.html"> Example page 1 <option value="jseg02.html"> Example page 2

</select>

<input type="button" value="Go to Page" onClick="go_to_menu('hello')"> <!-- (document.myForm.mySelect.options[selectedIndex].value --> </form>

</body> </html>

Sample Output:

Dialog Box

Sample Output:

Sample Code:
<html> <head> <title> Javascript - Dialog box example </title> </head> <body> <p> Click on the image </p>

Calculator

Sample Output:

Sample Code:

<html> <head> <title> Javascript - Calculator </title>

<script language=javascript type="text/javascript">

var plus,minus,divide,times

function initialise(){ plus=document.calc.operator.options[0] minus=document.calc.operator.options[1] divide=document.calc.operator.options[2] times=document.calc.operator.options[3] } function calculate(){ x = parselnt(document.calc.val1.value) y = parselnt(document.calc.val2.value) if (plus.selected) document.calc.answer.value=x + y if (minus.selected) document.calc.answer.value=x - y if (divide.selected) </script> document.calc.answer.value=x / y if (times.selected) </head> document.calc.answer.value=x * y } <body onLoad="initialise()"> <h2> Calculator </h2> </script>