Web Technology-I

on

 

Chapter 6: Web technology - I
Introduction to HTML
HTML stands for Hyper Text Markup Language which are used to create web pages that are used in internet to exchange data and information. HTML file itself is a text file which contains several tags and attributes. HTML was develop by Tim Berner Lee that was based on SGML (Standard Generalized Markup Language). The tags and attributes used to create HTML file are displayed using web browser. Web browser helps to understand all the tags and attributes given by the user and generate the contain of the page. The different version of HTML are: HTML, HTML+, HTML 1.0, HTML2.0, HTML3.2, HTML 4.01 and now HTML 5.0.

Use of HTML:
  1. It is used to create a basic layout or design of web page.
  2. Without HTML worldwide web wouldn't exist.
  3. It allows features like embedding images, videos, audio etc.
  4. It allows user to customize and format characters such as bold, italic, underline etc.
  5. It helps to create link and list.
Advantages of HTML:
  1. It is easy to use, flexible and user friendly.
  2. It can be supported by all the web browser and operating system such as Macintosh, windows, unix etc
  3. It is easier to obtain and modify any of the content.
  4. It is compatible with all the search engine.
  5. There are several new and advance features in HTML 5.0.
  6. HTML file takes short period of time to load.
  7. Several tutorial can be easily accessed regarding HTML.
Disadvantage of HTML:
  1. It is difficult to create attractive and interactive webpages only using HTML. [php, javascript, sql etc]
  2. It cannot be used to create dynamic webpages.
  3. It is only a scripting language and cannot be used as programming language.
  4. There are many incompatibilities of HTML.
  5. There is no any complete acceptable standard of HTML.
  6. Tags

HTML tag are the instructions or command given to the web browser in order to organize text image and any other components of web pages. This HTML tags are executed by web browser respectively. Like any programming language this HTML tags also helps to perform some specific actions. HTML tags are written inside angular brackets <> . There are two types of  HTML tag. 

Note: HTML tags and attributes are not case sensitive.

a. Pair tag:  Those tags which have both opening and closing tags are known as pair tag. They are also known as container tags. If a tag is written only within the angular brackets <> then it is known as opening tag. Whereas, same tag is written within a angular bracket preceded by slash / then it is known as closing tag.

b. Singular tag: Those tag which have only opening tag but no closing tag are known as singular tag. They are also known as empty tag.

     For eg, 

Attributes

They are the descriptive properties of a HTML tags written within respective tag. Attributes helps to add some extra feature, which allows designer to customize and modify several components of webpages according to requirement.

Eg, If is the tag then its attributes are:

bgcolor = It helps to add background colour.

text = It helps to change the colour of the text written in webpages.

background = It helps to add image in background of webpages.

Which are written as:

Steps to write and execute HTML document.

a. Write all the HTML tags, attributes and related information in a notepad.

b. Save your document by using desired name followed by .HTML extension. Eg, sample.html

c. Execute the html file by using any web browser.

Some common terminologies of web designing.
a. Webpage: It is generally a HTML document or written in any other scripting language that help to execute information in the form of text, image, or any other component through internet is called webpage.

b. Website: The collection of interrelated webpages is known as website. It may contain any piece of information or may have information that are interrelated with several webpages that are connected through hyperlink. All website has two part

Domain name: The name use to access website.

Web server: It is a storage location where every piece of information associated with website are stored.

c. Home page: The introductory page which is executed at first when we access the website.

d. Web browser: It is an application program which help to access any content of webpages that may be in any form using HTTP (Hyper Text Transfer Protocol). This protocol helps to make communication between web browser and web server. For e.g., Google chrome, Internet explorer (Microsoft Edge), Safari, Mozilla fire fox, Netscape navigator etc.

e. URL: It stands for Uniform Research Locator. It is a standard way of referencing a protocol, host and a directory. For e.g. https://readersnepal.com

DBMS (Database Management System)
Data: Data are the raw facts and figures. Data are isolated, uninterpreted and doesn't give any sense unless and until they are processed. Simply, they are the entities collected from the random world which under goes for processing. For e.g., Ram,19,12,Pokhara

Information: Information are the meaningful result which are obtain after processing and gives some meaning and sense. Generally, It is a processed version of data. For eg, Ram is a student whose age is 19, he lives in Pokhara-12.

As we know, information are obtain after processing data. Hence, we need data processing for converting data into information. Therefor, systematic and scientific arrangement and organization of data so that, we can retrieve it whenever require quickly and easily is called database. Database is organized collection of data for converting data and information so that it can give some meaningful result. For e.g., Dictionary, Mark ledger, Census, Telephone directory etc.

Since, manual collection and organization of data is time consuming, unsecured and complex, there is an application program which helps to maintain database i.e. systematic and scientific organization and collection of data. so, we can retrieve any piece of information within a fraction of time without any effort. Hence, the software or system built to fulfil the above requirement is known as database management system. In other word, it is a collection of software that manages data stored in database. The main purpose of DBMS is to store data, process them and obtain desired information. For E.g., Ms-Access, My-SQL, Oracle, Fox pro, dBase.

Advantages/features/importance of DBMS

  1. It allows user to search quickly and easily.
  2. It helps to reduce data redundancy(repetition)
  3. It allows user to share data over a network.
  4. It helps in data security and privacy,
  5. It improves data inconsistency(variance).
  6. It provides an organized way of storing data.
  7. Disadvantages
  8. Installation and operating cost is higher.
  9. It requires more disk space.
  10. It may sometime have security and privacy issue.
  11. Technical manpower (DBA) required to maintain and operate.

CSS (Cascading Style Sheets )

CSS stands for Cascading Style Sheets which consists of various styles that defines how to display HTML elements. It is used to make the design of the Website dynamic and attractive. Styles are normally stored in Style Sheets.  Since, every tags cannot design the Web site in very fascinating way we use CSS to solve that problem.

Advantages of using CSS

  • Web pages will load faster.
  • It helps to maintain design consistency across all the pages of the Web site. 
  • CSS allows for customizing elements such as  font, font size, font color and many other
  • CSS can help to make Web pages available for different media (desktop PC, mobile phones). i.e. device responsive
  • It makes web page compatible with almost all the browsers.
Inline CSS
This types of CSS are written inside the HTML tag. 

<HTML>
<HEAD><TITLE>Inline CSS</TITLE></HEAD>
<BODY style = “background-color: red;”>


</BODY>
</HTML>
In above HTML file we have added style inside BODY tag. Similarly, we can add any number of CSS inside HTML tag.

Internal CSS
This types of CSS are written inside <STYLE> tag, which is placed in -between HEAD tag of an HTML document. 

<HTML>
<HEAD><TITLE>Internal CSS</TITLE>
<STYLE>
body{
background-color: red;
}
</STYLE>
</HEAD>
<BODY>


</BODY>
</HTML>
In above HTML file we have added STYLE tag inside HEAD. CSS is written directly selecting body tag.

Note: We can select id as well as class of any HTML tag. # is used to access id of the tag whereas, . is used to access class of the tag.

External CSS
In this type we have to prepare HTML file and CSS file separately. These two file are linked by following statement.

<link rel=“stylesheet” href=“name.css”>
Consider the following HTML document.

<HTML>
<HEAD><TITLE>External CSS</TITLE>
<link rel=“stylesheet” href=“mero.css”>
</HEAD>
<BODY>


</BODY>
</HTML>
Since we have linked “mero.css” in HTML file we have to create a separate CSS file named “mero.css”. We can directly right CSS without STYLE tag in CSS document.

body{
background-color: red;
}
In above HTML file we have a created separate HTML and CSS file which are linked together.

Comments

Post a Comment