Computer IX Chapter#7 Online Sindh Education

Computer IX Chapter#7: Web Development 

6.1: Database

7.2: Basic Components of DBMS

Basic Components of DBMS

7.3: Data Modeling

Entity
Relationship
Referential Keys
Entity Relationship or ER Model

Chapter6 Web Development

6.1 BASIC TERMINOLOGY OF WEB DEVELOPMENT

Development of web sites and online applications is called web development. This is done by coding in different languages and by using several web development tools and frameworks. A complete web application may consist of a User Interface, Back-End Server Codes and a Database.

6.1.1 Denition of Terms

(i) World Wide Web (WWW)

The word world wide web (www) is commonly known as the web. The Web is a collection of computers connected through a network to provide publicly accessible information.

(ii) Web Page A webpage is a document commonly written in HTML that is accessible through internet by using internet browser.

(iii) Website A website is a collection of web pages containing text, images, and all types of multimedia related to a specic set of information. A website can be accessed through a Uniform Resource Locator (URL).

Web Browser
A web browser is a software application for accessing websites on the world wide web. Most common web browsers include Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, and Safari.

Chapter6 Web Development

v) Uniform Resource Locator (URL)
It is the address of a resource on the internet (e.g. https://www.google.com). It includes the following two components. The protocol used to access the resource (https://). The location of the server. (www.google.com)

(vi) Search Engine
A Search Engine is a web-based tool that enables a user to locate information on the web. Most popular search engines are Google, Yahoo, and Bing.

(vii) Home Page
A home page (also known as landing page) is a web page that serves as the starting point of the website.

(vii) Web Hosting
Web Hosting is a service that allows a web developer to make a website publicly accessible through the internet.

(viii) Web Server
A web server is the computer that is responsible for serving a website and all of its content including text and media to a user.

6.1.2 Types Of Website

Portal: A web portal is a website that provides a single access point of information for all of its users. It collects information from different sources like emails, forums, search engines and presents it to the user in a uniform way. Yahoo and MSN are common examples of web portal.

News: A news website is the modern-day alternative for newspapers. Such websites contain everyday information related to current affairs, sports, politics, weather, health, technology, entertainment, etc.

Informational: Informational websites provide detailed information of any eld. There are many dedicated informational websites for science, arts, sports, online trainings, research, etc.

Educational: Educational websites are purely designed to deliver educational material for both, teachers and students such as sabaq.pk, khan academy.org, etc.

Personal: A person can share about his or her biography or achievements in a custom developed website.

Business: A business website is the best way for any organization to market their products and services. It also tells about the teams, policies and procedures of that business. For instance, www.psx.com.pk is the website of Pakistan Stock Exchange.

Blogs: A blog is a special type of website that is composed of articles and posts. These articles are organized into categories and sorted by the time when they were published. WordPress is a popular blog site.

Forums: A forum is an online place where different users can discuss about any topic. These topics can be categorized so that users can easily locate topics of their interest.

Entertainment: An entertainment website serves content like videos or games purely for the purpose of entertainment. Youtube is widely used for entertainment.

Social: Social website is a platform where different people get together and socialize with each other. They can also share their ideas, opinions and media. Facebook and Twitter are instances of social networking websites.

Chapter6 Web Development

6.2 INTRODUCTION TO HTML

HTML stands for Hypertext Markup Language. HTML is used to create web pages that are displayed by web browsers mainly on internet.

6.2.1 Hypertext Markup Language (HTML)

It is standard markup language for text documents. It allows the user to create structured content by adding headings, paragraphs, links, blockquotes and other media. It takes advantage of simple code structures called tags and attributes to achieve formatting, graphic and navigation effects on web pages.

6.2.2 Steps Involved In Creating Web Page In HTML Creating a simple web page using HTML is very easy. It requires a text editor, a le with .html extension and a web browser to view that page.

Step 1: Text Editor Start by simply creating a new blank le in a text editor of your choice. A simple text editor like notepad can be used to start coding HTML for a web page.

Step 2: Write HTML code in Text Editor Example: Teacher Note Teachers should demonstrate several websites to familiarize students with different types of websites.

Step 3: Save HTML Page Go to File menu and click on Save. Make sure to provide .htm or .html extension for the le being saved. This will save the document as a web page instead of a plain text le.

Step 4: View HTML Page in Browser Open the saved HTML le in your default web browser. The web browser will automatically translate HTML codes to correctly display the web page.

6.2.3 HTML Tags

HTML elements are the building blocks of HTML pages. These elements are dened by placing HTML tags in our document. These tags are placed inside angular brackets (<>). Some tags also allow further customization by adding attributes to them. An HTML tag has the following structure: Simple Tag: content Tag with Attribute: content The above syntaxes show the structure of opening a tag, dening attribute values, placing content inside the element represented by that tag and its closing structure. Most of HTML tags always require a closing tag while some HTML tags.

6.3 DESIGNING AND FORMATTING

Some HTML tags introduce content directly into the web page while others enhance the design and format of that content. Some most commonly used HTML tags which change the looks of the web page are explained here.

6.4 CREATING LISTS

Lists are very useful in displaying point by point information such as to-do list, list of ingredients for a recipe, list of categories, etc. HTML provides three different types of list elements namely Unordered Lists, Ordered Lists and Description Lists. The web browsers automatically add indents, spaces and markers to HTML lists. 6.4.1 Unordered List An unordered list is a list of related items in which the order of items is irrelevant. It is dened by

tag. The web browser will display these list items as bullet points.

6.4.2 Ordered List

An ordered list also displays a list of related items. It is used where the order of the list is important e.g. names of students in order of their exam ranks. It is dened by

The web browser will display these list items with numbers starting from 1 instead of bullet points.

Ordered lists can also be dened with two of its attributes: start and reversed. Start attribute denes the starting number of rst list item. Reversed attribute is used to display the list in descending order. The list items for ordered list can also be dened with a value attribute which is used to place that item at a specic position or number in the list.

6.4.3 Description List

Description lists are used to display different terms and their descriptions just like in a dictionary or glossary. It is dened by

tag and each of its list items is composed of two elements: term and description. Term is dened by

tag and its description is dened by: tag. In description lists, a term can have one or more descriptions and a description can have one or more terms

6.4.4 Nested Lists

A very powerful feature of HTML lists is their ability to nest one into another. Any of the list type can contain any other list type as its list item. It is dened by placing the new list tag inside the tag of previous list. Web browsers automatically indent nested lists and assign appropriate marker to those nested list items as well.

6.5 IMAGE AND BACKGROUND

Images and backgrounds give a visual appeal to the websites. Sometimes images can present a better understanding than long and uninteresting texts. 6.5.1 Images Images can be inserted in an HTML document by using tag. This does not create a copy of image. Instead, it only creates a reference to original image placed somewhere in the computer’s storage

6.6 HYPERLINKS

Hyperlinks allow a user to navigate from one web page to another. It also enables users to navigate to different sections within the same web page. Hyperlinks convert text or other media into clickable objects.

6.6.1 Denition
A hyperlink in HTML is dened by tag and its href attribute.
The value of href is the reference of another web page or a different section within the same page. Links to external document: To send a user to any other web page, use the URL of that page as the value for href attribute. e.g.Goto Google

Links within the same document: Setting the link within the same page
requires two steps:
1. Use id attribute of any HTML tag to give a name to the section of the page, where a user should reach after clicking on the link.
2. Create a hyperlink and set the above name as href attribute of this link, starting with hash (#) symbol.

6.7 TABLES

Tables allow displaying the content (like text, image, links) in the form of rows and columns. The coordinating place of a row with a column is called a cell. These cells contain some content of the webpage. In HTML, a table is dened by tag. 6.7.1 Rows and Columns A row is the collection of all horizontal cells of a table. A table can contain any number of rows. All the rows in a table have an equal number of cells. It is dened by tag which is placed inside the

tag. A column is the collection of all vertical cells of a table. A table can contain any number of columns as well. It is dened by row tag. 6.7.2 Table Heading HTML table allows dening a header for the columns of our table. A header cell is dened by row tag. It is used to differentiate from the content placed inside normal row tag of any

tag and is placed inside a
tag which is placed inside the
data cells. To make the entire header row stand out from rest of the table contents, dened	tags for all columns of the rst

tag.

Computer IX Chapter#7