1.Introduction

(1)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist.,

WEB TECHNOLOGIES

UNIT

UNIT –

–

– I HTML Basics

–

I HTML Basics

Chapters:

1. Introduction

2. HTML

(2)

1. Introduction

What is Browser?

“A piece of software used to view HTML documents.”

Ex: Internet Explorer, Netscape Navigator, Google Chrome etc.,

What is HTML?

HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language

• HTML is a markup language

• A markup language is a set of markup tags

• The tags describe document content

• HTML documents contain HTML tags and plain text

• HTML documents are also called web pages

What is XML?

• XML stands for EXtensible Markup Language

• XML is a markup language much like HTML

• XML was designed to carry data, not to display data

• XML tags are not predefined. We must define our own tags

• XML is designed to be self-descriptive

• XML is a W3C Recommendation

The Difference Between XML and HTML

XML is not a replacement for HTML.

XML and HTML were designed with different goals:

(3)

• HTML was designed to display data, with focus on how data looks

HTML is about displaying information, while XML is about carrying information.

Ex:

HTML XML

<p>Ford Mustang</p>

<h2>Seats</h2>

<p>5

<h2>Top Speed</h2>

<p>70 m.p.h

<make>Ford Mustang</make>

What is XHTML?

• XHTML stands for EXtensible HyperText Markup Language

• XHTML is almost identical to HTML 4.01

• XHTML is a stricter and cleaner version of HTML 4.01

• XHTML is HTML defined as an XML application

• XHTML is supported by all major browsers.

What is WWW?

The World Wide Web (abbreviated as WWW or W3, commonly known as the

web), is a system of interlinked hypertext documents accessed via the Internet. With a web

browser, one can view web pages that may contain text, images, videos, and other

multimedia, and navigate between them via hyperlinks.

What is W3C?

• W3C Stands for the World Wide Web Consortium

• W3C was created in October 1994

(4)

• W3C was created by the Inventor of the Web

• W3C is organized as a Member Organization

• W3C is working to Standardize the Web

• W3C creates and maintains WWW Standards

• W3C Standards are called W3C Recommendations

What is HYPERTEXT?

• Hypertext is text which is not constrained to be linear.

• Hypertext is text which contains links to other texts. The term was coined by Ted

Nelson around 1965.

• Hypermedia is a term used for hypertext which is not constrained to be text: it can

include graphics, video and sound , for example. Apparently Ted Nelson was the first

to use this term too.

• Hypertext and Hypermedia are concepts, not products.

Styles versus Formatting:

“A STYLE is a set of formatting commands which can be applied to any text.”

For example, in a word processor, the style might be:

• Font 10 point Arial

• Text fully justified

• Indent left 2cm

• Line-spacing 1.5 lines

• 12 point space after paragraph

HTML is providing different types of tags for formatting purpose.

What is DHTML?

Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies

used together to create interactive and animated web sites by using a combination of a static

markup language (such as HTML), a client-side scripting language (such as JavaScript), a

presentation definition language (such as CSS), and the Document Object Model (DOM).

DHTML allows scripting languages to change variables in a web page's definition

(5)

content, after the page has been fully loaded and during the viewing process. Thus the

dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its

ability to generate a unique page with each page load.

What is CGI scripting?

“A CGI script is a program that is stored on the remote web server and executed on

the web server in response to a request from a user.”

A CGI script file is written in a programming language, which can be either:

• Compiled to run on the server.

• Interpreted by an interpreter on the server.

Examples, of languages used to write CGI scripts include:

• Compiled languages

C, C++, Ada

• Interpreted languages

Perl, JCL(Job Control Language) (e.g. The UNIX sh command language)

What is PHP?

“PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open

source general-purpose scripting language that is especially suited for web development and

can be embedded into HTML.”

Ex:

<html>

<head>

<title>Example</title>

</head>

<body>

<?php

echo "Hi, I'm a PHP script!";

?>

</body>

(6)

What is Perl?

“

Perl is a programming language which is most commonly used for systems

administration and web scripting.”

What is Client?

“A system usually running on a desktop PC which access services and data from other machines on a network.”

What is Server?

“A system which provides services to other machines on a network.”

What is Relative Positioning?

“A relative positioned element is positioned relative to its normal position.”

The CSS (Cascading Style Sheets) positioning properties in HTML allow positioning

an element. It can also place an element behind another, and specify what should happen

when an element's content is too big.

Elements can be positioned using the top, bottom, left, and right properties. However,

these properties will not work unless the position property is set first. They also work

differently depending on the positioning method.

The CSS also provides three more positioning methods:

Static Positioning:

HTML elements are positioned static by default. A static positioned element is always

positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and right

properties.

Fixed Positioning:

“An element with fixed position is positioned relative to the browser window.”

It will not move even if the window is scrolled.

Absolute Positioning:

“An absolute position element is positioned relative to the first parent element that has

(7)

What are HTML authoring tools?

HTML authoring tools can help us design and maintain a Web site. They do so by

helping us to write HTML, to create and modify Web pages, and to publish our finished

content to our Web directory.

HTML authoring tools such as Adobe Dreamweaver, Microsoft Expression Web, and

Seamonkey Composer help us to write HTML, often without having to learn it. Most HTML

authoring tools are:

• WYSIWYG (what you see is what you get) editing

• Optional source code editors to edit HTML directly

• Web page previewing with our Web browser

• Saving Web pages on our hard drive

• File transfer tools to help move our pages to a Web server

• A price tag

Using an HTML authoring tool goes something like this:

1. Start our HTML authoring tool.

2. Open our Web page(s) from our hard drive.

3. Create/edit as needed.

4. Preview our work.

5. Save our work to our hard drive.

6. When ready, move pages to our Web directory.

What are MIME Types and Multimedia Content in HTML?

MIME (Multipurpose Internet Mail Extensions) is an internet standard that is used to

describe the contents of various files. While the name MIME says “Mail”, it is also used for

web pages.

The MIME type for HTML is:

text/html

MIME types are defined in HTML by the type attribute on links, objects, and script

(8)

List of Some MIME Types by File Extension:

File Extension MIME Type

323 text/h323

* application/octet-stream

Acx application/internet-property-stream

Ai application/postscript

Aif audio/x-aiff

Aifc audio/x-aiff

What are Helper Applications to Web Browser?

“A helper application is an external viewer program launched to display content

retrieved using a web browser.”

Plug-ins are small applications which handle specific data types and which may either

run stand-alone applications or embedded within the browser.

List of Important Plug-ins:

• Adobe Acrobat Reader View and print PDF files.

• Adobe Flash Player Browser plug-in.

• Adobe Shockwave Player Browser plug-in which displays Web content that has

been created by Adobe Director.

• Google Docs Online documents, spreadsheets, presentations and more.

• Microsoft Office Compatibility Pack Open, edit, and save documents,

workbooks, and presentations in the file formats new to Microsoft Office Word,

Excel, and PowerPoint 2007.

• Microsoft PowerPoint Viewer View presentations created in PowerPoint 97 and

later versions.

• Microsoft Windows Media Player Digital Media Player.

• Apple QuickTime Player Digital Media Player. Choose the free player.

(9)

What is LATEX?

LaTeX (formatted as LATEX), is a document markup language and document

preparation system for the TeX typesetting program.

Acronyms:

ANSI American National Standard Institute

AU Audio

CAD Computer-Aided Design

CGI Common Gateway Interface

CSS Cascading Style Sheets

DHTML Dynamic HTML

DOD Department of Defense

FTP File Transfer Protocol

GIF Graphic Interchange Format

HTML Hyper Text Markup Language

HTTP Hyper-Text Markup Language

IIS Internet Information Services

JCL Job Control Language

MIDI Musical Instrument Digital Interface

MPEG Moving Picture Experts Group

NNTP Network News Transfer Protocol

PDF Portable Document Format

PHP Hypertext Preprocessor

PKZIP Standard DOS compression utility

SGML Standardized General Markup Language

SH Shell

SMTP Simple Mail Transfer Protocol

W3C World Wide Web Consortium

WAV Windows wAVe

WYSIWYG What You see Is What you Get

XHTML eXtensible HyperText Markup Language

XML Extensible Markup Language

ZIP Compress