Home COMPUTER STUDIES TOPIC 2: WEB DEVELOPMENT | ICS FORM 3

TOPIC 2: WEB DEVELOPMENT | ICS FORM 3

163
0
IMPACT OF INFORMATION AND COMMUNICATION TECHNOLOGY (ICT) ON THE SOCIETY TOPIC: 3 DATABASE AS INFORMATION SYSTEM | ICS FORM 3 COMPUTER STUDY NOTES ICS FORM THREE

TOPIC 2: WEB DEVELOPMENT | ICS FORM 3

A web page is a document commonly written in Hypertext Markup Language (HTML) that is accessible through the Internet or other network using an Internet browser. A web page is accessed by entering a URL address and may contain text, graphics and hyperlinks to other web pages and files. The page you are reading now is an example of a web page.

Website a set of related web pages located under a single domain name. or this is is a collection of related web pages, including multimedia content, typically identified with a common domain name, and published on at least one web server

A connected group of pages on the World Wide Web regarded as a single entity, usually maintained by one person or organization and devoted to a single topic or several closely related topics.

The software used to create website are:

  • Text editors e.g. Notepad and WordPad etc.
  • Macromedia Dreamweaver
  • HTML Kit
  • Microsoft Home page
  • Microsoft FrontPage etc.

If you want to master this topic, you should be able to use the following terms correctly in your assignments and exams:

If you want to master this topic, you should be able to use the following terms correctly in your assignments and exams:

HTML: Stand for Hypertext Markup Language, a simple scripting language to create a webpage

Hypertext: Simply a piece of text that works as a link

Markup Language: is a way of writing information within documents

Tag: is a markup for telling the browser.Make sure you know who your audience is. For example customers, Employees, Students, Friends, Family. If you making a site for your company, make sure the goal is specific and quantitative.

Keep your goal simple. A couple of sentences or a short paragraph is enough. If your goal is too long, your site will end up looking like it’s trying to do too much.

Script : A list of commands that can be executed without user interaction

Script language: A simple programming language which you can write scripts

Perl: Script programming language that is similar in syntax to C language

APS: Server side scripting language that can be included inside HTML file.

The Webpage Structure

Web “sites” are complete abstractions—they don’t exist, except in our heads. When we identify a site as such, what we’re really describing is a collection of individual linked pages that share a common graphic and navigational look and feel. What creates the illusion of continuity across a cohesive “site” is the design features that pages share. Individual html pages and how they are designed and linked are the atomic unit of web sites, and everything that characterizes site structure must appear in the page templates.

As the web has matured over the past decade, the structure of web pages in text-driven information sites has become more uniform and predictable. Although not all web pages share the exact layout and features described here, most web pages incorporate some or all of these basic components, in page locations that have become familiar to web users

Header

Usually a big strip across the top with a big heading and/or logo. This is where the main common information about a website usually stays from one web page to another.

Navigation bar

Links to the site’s main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having an inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than an individual component, but that’s not a requirement; in fact some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.

Main content

A big area in the center that contains most of the unique content of a given webpage, for example the video you want to watch, or the main story you’re reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page!

Sidebar

Some peripheral info, links, quotes, ads, etc. Usually this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author’s bio, or links to related articles) but there are also cases where you’ll find some recurring elements like a secondary navigation system.

Footer

A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It’s a place to put common information (like the header) but usually that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.

Create a Webpage

Write HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML. Follow the four steps below to create your first web page with Notepad or TextEdit.

1. Open Notepad (PC)

Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier: Open Start > Programs > Accessories > Notepad Open TextEdit

Mac: Open Finder > Applications > TextEditor Also change some preferences to get the application to save files correctly.In Preferences > Format > choose “Plain Text”Then under “Open and Save”, check the box that says “Ignore rich text commands in HTML files”.Then open a new document to place the code.

2.Write Some HTML

3. Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.Name the file “index.htm” and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

You can use either .html or .html as file extension. There is no difference, it is up to you.

4.View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with”).

The result will look much like this:

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

HTML Links

HTML links are defined with the <a> tag:

The link’s destination is specified in the href attribute. Attributes are used to provide additional information about HTML elements.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

HTML Elements

An HTML element usually consists of a start tag and end tag, with the content inserted in between:<tagname>Content goes here…</tagname>

The HTML element is everything from the start tag to the end tag:<p>My first paragraph.</p>

HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).

Nested HTML Elements

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

Example Explained

The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

The element content is another HTML element (the <body> element).

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

The element content is two other HTML elements (<h1> and <p>).

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.The element content is: My First Heading.

The Webpage Preview

The preview view shows an approximate view of what the page would look like in a Web browser. Things like dashed lines for tables won’t appear in the view

The Concepts of Publishing Webpage

Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. 
Publishing Web Pages is the process of copying all the files to a remote location on a server.

The Importance of Publishing Webpage

The webpages become available to other people either in World Wide Web (internet) or in local Area (internet). This will enable targeted audience to access information from website. People may download the pages they need, plus all of its associated files like forms, pictures and so on.

The Procedure of transferring Webpages to the webserver

PROCEDURE OF TRANSFERRING WEBPAGE TO THE WEB SERVER

Web server is a computer that runs special serving software. That software “serves” HTML pages and associated files when requested by a client, such as Web browser.
When you use your browser to visit a site, you typically make your request by entering a URL (for example: http://example.microsoft.com). A URL is a uniform Resource Locator. It’s simply an address for a file on the web.
When the server receives your request, it serves or downloads the page you need, plus all of its associated files like pictures and so on.

WEB SERVER DETAILS

The URL for your site may be determined by your hosting company, but you can also register your own unique URL.
The correct file name for your home page: home pages can be named index.html, default.html, or default.html depending on the kind of server your site will reside on.
User name and password: these are often needed to publish pages to a remote server.
Server restrictions: the total file size of your site’s files may not be able to exceed a certain size or other restrictions to use certain
Different between webpage and websites
THE DIFFERENCE BETWEEN WEBPAGE AND WEBSITE
WEBSITE WEBPAGE
A website is a collection of webpages that are under 1 domain (such as mywebsite.com). Forexample if there is a company that owns abccompany.com then this website will have several Webpages like Home, About Us, Contact Us, Testimonials, Products, Services, FAQ’s, and others. All of these pages together make up a Website. A webpage is an independent page of a Website. For example a webpage would bethe testimonials page. A web page can be accessed by typically one URL in a browser and that page can be copied and or send to a friend for review whereas websites are collections of multiple page that must be navigated to view other content.

 

The web page is a smaller part of a larger website usually containing more specific information. If a website were a book, then a webpage would be a chapter in that book. Whether you cite a site or a page for a paper or project depends on what information you used.

Access information on a website
Information access is the freedom or ability to identify, obtain and make use of data or information effectively. For most people nowadays, using the internet involves accessing information or entertainment, viewing products and services, or using social media platforms to keep in touch with friends and acquaintances.
The easiest way to access a website is to write the desired address into the address bar located in the browser. This address is known as a Uniform Resource Locator (URL), and every webpage can be reached with its own individual URL (web address). A URL is made up of several sections; all of which have their own functions. Here is a generic example of a webpage URL:

Web development (Web Page design)

This topic is all about creating a Multi-media World Wide Web (WWW) site that informs and entertains. It is an evolving course and focuses on the production of multi-media content (WWW) using web design software (e.g. Java HTML script, FrontPage). The goal of this topic is for you to create a media enriched WWW site.

The software used to create websites are:

Text editors e.g. Notepad and WordPad etc

Macromedia Dreamweaver

HTML Kit

Microsoft Home page

Microsoft FrontPage etc

In this chapter, you will be using Simple Text editors and FrontPage to create and maintain your WWW site, which will be stored on a secure server / hard disk.

Introduction to web pages design

If you have mastered this topic, you should be able to use the following terms correctly in your assignments and exams:

HTML: Stand for Hypertext Markup Language, a simple scripting language to create a webpage

Hypertext: Simply a piece of text that works as a link

Markup Language: is a way of writing layout information within documents

Tag: is a markup for telling the browser

Make sure you know who your audience is. For example customers, Employees, Students, Friends, Family.

If you are making a site for your company, make sure the goal is specific and quantitative.

Keep your goal simple. A couple of sentences or a short paragraph is enough. If your goal is too long, your site will end up looking like it’s trying to do too much.

Script: A list of commands that can be executed without user interaction

Script language: A simple programming language which you can write scripts

Perl: Script programming language that is similar in syntax to C language

 

ASP: Server side scripting language that can be included inside HTML file.

Microsoft FrontPage

A program you can use to create and manage Internet and intranet sites without programming; FrontPage is available as part of one of the Microsoft Office suites or as a stand-alone product.

What is a FrontPage Website?

A FrontPage Web site is a site created in FrontPage. It contains Web pages, graphics, documents, multimedia almost any kind of file you want.

More importantly, a FrontPage Web site also contains hidden folders and files that support FrontPage specific functionality. These hidden items are the FrontPage metadata for your site. Don’t let this term intimidate you; as you’ll see in a second, FrontPage metadata is really quite simple.

Two kinds of FrontPage Web sites

Now that you know what a FrontPage Web site is, it’s important to know that there are two kinds: disk-based and server-based.

In short, a disk-based site is a FrontPage Web site you create on your local hard disk and then later publish to a Web server. A server-based site is one you create and work with directly on a Web server, without the extra step of publishing.

Prepare webpage structure

Once your site’s goal is defined, we recommend sketching out the structure of your site beforehand.

Use a pencil and paper (or a diagramming tool, like Microsoft® Visio®) to draw boxes for pages and arrows for links. Remember to keep your goal in mind as you do this.

 

This is essentially the process of creating a visual outline. And it will save you a lot of time to do this on paper before your site is constructed. Just think: It’s easier to erase a few boxes and start over than it is to delete and rebuild pages in an already-built Web site.

Sketch a common layout

After you’ve sketched a map of your site, it’s time to start sketching a common layout for each of your pages.

Some of the things you will want to consider as you are sketching the layout are:

Should your site have a header and footer that are common to each page?

Should your site have a consistent method of navigation on each page?

Do you have any marketing requirements that must be fulfilled? For example, should you stick to certain fonts and color schemes?

Does your site need any legal requirements, like a copyright notice?

Later, when you’re ready

Using your sketches as a model, you’ll eventually use FrontPage to design Web pages in HTML. You might use a table for the skeletal structure, or layout, of the page.

Once the layout is defined, you can fill it with content. For example, you’ll want to add text, hyperlinks, pictures, and interactive buttons.

Create a webpage using HTML

INTRODUCTION

HTML pages are used for specifying web page content. They contain information and instructions to web browsers that inform them of what to display, and how it should be displayed. It is a simple format, easily learned, and can support a number of media devices, such as sound, graphic images, and video.

HTML documents are ASCII files, and are created using a simple text editor (or an editor like Front Page). With a text editor, you cannot see what the code looks like in the browser, unless you save the page and then load it into the browser for viewing. WYSIWYG (What you see is what you get) editors like Front Page allow you to view the page as it is constructed in the editor window.

One advantage of using a simple text editor is that you have more control over the HTML code; the disadvantage is you must know the code and have a picture in your mind as to what it looks like. Another disadvantage is since HTML is becoming more complex, it is harder to write, and sophisticated editors like Front Page support the advanced features making it easier for you to implement them.

HTML is a series of tags enclosed in <and> brackets. For instance, is an HTML tag that defines a head section of an HTML document. Certain characters are reserved, such & <> which are interpreted as HTML codes.

 

Each HTML page adheres to a basic structure. This looks like

When viewed in the browser, this page looks like,









All normal WebPages consist of a head and a body.

Head
Body

The head is used for text and tags that do not show directly on the page.

The body is used for text and tags that are shown directly on the page.






 Webpage Preview

The Preview view shows an approximate view of what the page would look like in a Web browser. Things like dashed lines for tables won’t appear in this view.

Publishing WebPages

Publishing WebPages is the process of copying all of the files to a remote location on a server.

The importance of publishing the webpage

The WebPages become available to other people either in World Wide Web (internet) or in Local Area (Intranet). This will enable the targeted audience to access information from the website. People may download the pages they need, plus all of its associated files like forms, pictures, and so on.

Procedure of transferring webpage to the web saver

A Web server is a computer that runs special serving software. That software “serves” HTML pages and associated files when requested by a client, such as a Web browser.

When you use your browser to visit a site, you typically make your request by entering a URL (for example: http://example.microsoft.com). A URL is a Uniform Resource Locator. It’s simply an address for a file on the Web.

When the server receives your request, it serves or downloads the page you need, plus all of its associated files like pictures, and so on.

Web server details

The URL for your site may be determined by your hosting company, but you can also register your own unique URL.

The correct file name for your home page; home pages can be named index.htm, index.html, default.htm, or default.html depending on the kind of server your site will reside on.

Username and password; these are often needed to publish pages to a remote server.

Server restrictions; the total file size of your site’s files may not be able to exceed a certain size or other restrictions to use certain

The difference between webpage and website

A Webpage is a document on the World Wide Web. A Webpage consists of an HTML file, with associated files for graphics and scripts, in a particular directory on a particular machine (and thus identifiable by a URL).

Usually a Web page contains links to other Web pages.A Website is a group of related HTML documents and associated files, scripts, and databases that are served up by an HTTP server on the World Wide Web.

The HTML documents in a Web site generally cover one or more related topics and are interconnected through hyperlinks. Most Web sites have a home page as their starting point, which frequently functions as a table of contents for the site. Many large organizations, such as corporations, will have one or more HTTP servers dedicated to a single Web site.

However, an HTTP server can also serve several small Web sites, such as those owned by individuals. Users need a Web browser and an Internet connection to access a Web site.

Typically, you can create a Web site on your local computer. However, the site will not be available to other people until it is eventually published — or copied — to a Web server.

Access information on a website

Where to find a Web server

Where do you find a Web server? That depends on how widely available you want your site to be.

– World Wide Web If you want your site to be available on the World Wide Web, you need to find a company that offers space on their server. Companies like these are typically called Web site hosting companies. To find a Web site hosting company, search the Internet using your favorite search engine or use the URL. This will be done in the practice session at the end of this lesson.

– Intranet If you want your site to be available only to your company’s intranet, then your IT department may have a server that you can use. It is also possible that your very own computer may be able to be configured as a Web server.

How to put your Website on a Web server

To put your site on a Web server, you publish it. Publishing generally means copying all of the files to a remote location on a server. In most cases, the remote location is either an HTTP path or an FTP path. The path you use depends on what technologies your server supports.

FTP (the File Transfer Protocol) is a popular way to upload files to a remote server. If your server supports FTP, you would publish to an FTP location. For example, ftp://ftp.MyServer.com/myFolder. (Please note that even though you publish to an FTP path, you would still visit the site using an HTTP path in your browser.)

FORM THREE COMPUTER STUDIES TOPICS

TOPIC 1: IMPACT OF INFORMATION AND COMMUNICATION TTECHNOLOGY (ICT) ON THE SOCIETY
TOPIC 2: WEB DEVELOPMENT
TOPIC 3: DATABASE AS INFORMATION SYSTEM

LEAVE A REPLY

Please enter your comment!
Please enter your name here