Web Technology.

Unit 1
INTRODUCTION TO WWW: 1] World Wide Web, which is also
known as a Web, is a collection of websites or web pages stored in web
servers and connected to local computers through the internet.
2] These websites contain text pages, digital images, audios, videos, etc.
3] Users can access the content of these sites from any part of the world
over the internet using their devices such as computers, laptops, cell
phones, etc.
Internet: 1] Is a worldwide network of devices that enables user to send
email to others and chat with them online.
 When you open a website for information you are using the www,
a network of servers over the internet.

FEATURES OF WEB: 1] Well Designed and Functional

2] Easy to use 3]Optimized for mobile 4]Clear calls to action
5]Optimized for search and the social web.

HTTP: 1] The Hypertext Transfer Protocol is an application protocol

for distributed, collaborative, hypermedia information systems that
allows users to communicate data on the World Wide Web.
2] HTTP was invented alongside HTML to create the first interactive,
text-based web browser: the original World Wide Web.
INTRODUCTION TO SCRIPTING LANGUAGES: 1] All scripting
languages are programming languages. The scripting language is
basically a language where instructions are written for a run time
environment.
2] A scripting language is a programming language designed for
integrating and communicating with other programming languages.

BROWSER: 1] A browser is a software program that is used to explore,

retrieve, and display the information available on the World Wide Web.
2] This information may be in the form of pictures, web pages, videos,
and other files that all are connected via hyperlinks and categorized with
the help of URLs (Uniform Resource Identifiers).
3] A browser is a client program as it runs on a user computer or mobile
device and contacts the webserver for the information requested by the
user. The web server sends the data back to the browser that displays the
results on internet supported devices. On behalf of the users, the browser
sends requests to web servers all over the internet by using HTTP.

INTEGRATED DEVELOPMENT ENVIRONMENT: 1] An

integrated development environment (IDE) is a software application that
provides comprehensive facilities to computer programmers for software
development.
2]An IDE normally consists of at least a source code editor, build
automation tools and a debugger. Some IDEs, such as NetBeans and
Eclipse, contain the necessary compiler, interpreter, or both; others, such
as SharpDevelop and Lazarus, do not.
Compiler, Interpreter and Debugger:
1] Compiler and interpreters are program that help convert the high level
language into machine code to be understood by the computers.
2] Interpreter translate just one statement of program at a time into
machine code where as compiler scans the entire program and translate
the whole of it into machine code at once.
3]Debugger is a computer program used by programmers to test and
debug a target program.

UNIT 2

HTML: ( Hypertext markup language)

 HTML is a standard markup language for web pages, with HTML
you can create your own website.
 HTML consists of series of elements; Elements tells the browser
how to display the content.
 An HTML element is defined by a starting tag , some content and
an end tag
<tagname> Content goes here... </tagname>

Basics of HTML:
1] The <!DOCTYPE> declaration represents the document type, and
helps browsers to display web pages correctly.
  <h1> to <h6>: HTML headings. <h1> defines the most imp
heading & <h6> defines the least imp heading
 <p>: To add paragraph. It has a start tag <p> and an end tag </p>
 HTML links: HTML links are defined with the anchor <a> tag.
The link's destination is specified in the href attribute.
ATTRIBUTES: Attributes are used to provide additional information
about HTML Elements.
<a href="google.com">This is a link</a>

 HTML Image: HTML images are defined with the <img> tag.

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

<img src="Nature.jpg" alt="Error" width="104" height="142">

 HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without
a closing tag.
<br>: When space is required between two lines.

The HTML <br> element defines a line break. Use <br> if you want a
line break (a new line) without starting a new paragraph
 HTML Attributes:

HTML attributes provide additional information about HTML elements.

 Attributes are always specified in the start tag

 Attributes usually come in name/value pairs like: name="value”

1] The href attribute: The <a> tag defines a hyperlink.

The href attribute specifies the URL of the page the link goes to
2] The src attribute: The <img> tag is used to embed an image in
an HTML page. The src attribute specifies the path to the image to
be displayed.

3] The width and hight attributes: The <img> tag should also
contain the width and height attributes, which specifies the width
and height of the image (in pixels)

4] The alt attributes: The required alt attribute for the <img> tag
specifies an alternate text for an image, if the image for some
reason cannot be displayed. This can be due to slow connection, or
an error in the src attribute, or if the user uses a screen reader.

5] The style attribute: The style attribute is used to add styles to an

element, such as color, font, size, and more.

 The <hr> tag defines a thematic break in an HTML page, and is

most often displayed as a horizontal rule. The <hr> element is used
to separate content (or define a change) in an HTML page
<font>: To change color, style, font face and size. The text can be
applied as bold, italic, underline.

 HTML Formating:

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
 The HTML <mark> element defines text that should be marked or
highlighted

HTML Comments: You can add comments to your HTML source by

using the following syntax

<!-- Write your comments here -->

HTML Tables:

<Table>: To create table and provide info in table format

 Table cell is defined by a <td> and a </td> tag. td stands for table
data. Everything between <td> and </td> are the content of the
table cell.
  Each table row starts with a <tr> and end with a </tr> tag. You can
have as many rows as you like in a table, just make sure that the
number of cells are the same in each row.

 Sometimes you want your cells to be headers, in those cases use

the <th> tag instead of the <td> tag

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup>

element
<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

 Cell Padding: Cell padding is the space between the cell edges and
the cell content. By default the padding is set to 0.

 Cell Spacing: Cell spacing is the space between each cell. By

default the space is set to 2 pixels.

 Colspan: To make a cell span over multiple columns, use

the colspan attribute. The value of the colspan attribute represents
the number of columns to span.

 Rowspan: To make a cell span over multiple rows, use

the rowspan attribute. The value of the rowspan attribute represents
the number of rows to span
 HTML LIST

HTML lists allow web developers to group a set of related items in

lists

 Unordred List: An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.The list items will be marked with
bullets (small black circles) by default

 Ordered List: An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.The list items will be marked with
numbers by default

Block Elements:

1] A block-level element always starts on a new line, and the browsers

automatically add some space (a margin) before and after the element.

2] A block-level element always takes up the full width available

(stretches out to the left and right as far as it can).

3] Two commonly used block elements are: <p> and <div>.

Inline Elements:

1] An inline element does not start on a new line.

2] An inline element only takes up as much width as necessary

3] Commonly used inline elements are: <span> , <a> , <br>

 HTML Forms

An HTML form is used to collect user input. The user input is most
often sent to a server for processing.

 The HTML <form> element is used to create an HTML form for

user input
 The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on
the type attribute

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many

choices)

<input Displays a checkbox (for selecting zero or more of many

type="checkbox"> choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

<input type = “resret”> To clear the info entered by the user and to pu
the page in default mode.
<Frame>: To combine two or more different web pages intp a single
browser.

HTML Video: The HTML <video> element is used to show a video on

a web page.

HTML Audio: To play an audio file in HTML, use

the <audio> element

Marquee Tag <marquee>

 This tag makes the text moves from one direction to other applying
the properties specified in this tag

 Default direction is from R to L

 It can be apply to images

 Bgcolor specifies the background color for the marquee.

 When marquee tag is specified the text moves from one end o
browser window to other other disappearing and other appearing.

 Direction: specifies the way in which the text will move or scroll.
Values= Left, Right and Up

 Behaviour: Specifies how the text scroll on the page.

1]Scroll: normal marquee where text scroll from one direction to

other.

2]Slide: Text scrolls from on end to other but stops scrolling when
reaches the other end .
 3] Alternate: text scrolls from one end to other but bounces back
when text reaches other end , dosent disappear.

 Scroll amount: number of spaces skipped between each successive

position while moving

 Scroll delay: Time taken between each successive postion.

Meta Tag

 Meta tag that is data about data. Information about web page will
be given by meta tag

 It is written in head section

 Meta tags can be used to include name/value pairs describing

properties of an html document

 It does not have a closing tag but it carries info within its attributes

 It does not impact physical appearance on computer/body

<meta name= “author” content= “SSB” />

Name= “keyword” content = main content of the web page

Name = “ revised” content = date when the web is revised last time

<meta http-equi= “refresh” content= “5; url…..>