Lec 1

SRI KRISHNA ARTS & SCIENCE COLLEGE
Department of Computer Technology
Basics of Web Technology
Course Coordinator
Mr VJ.RAJAKUMAR
UNIT-I BASICS OF WEB TECHNOLOGIES 11

BASICS OF WEB TECHNOLOGIES
Book: HTML, XHTML, CSS & XML by EXAMPLE, A Practical

Guide, Author: Teodoru Gugoiu, Firewall Media
UNIT-I BASICS OF WEB TECHNOLOGIES 2 2

COMPONENTS
Google classroom code :fueml3g

MAP CODE : D
Test:60
Class Presentation:10
Poster Presentation:10
SSA:10
Group Mini Project: 10
3
PRESENTATION OUTLINE
❑ HTML STRUCTURE
❑ The First Web page

VIDEO
https://www.youtube.com/watch?v=v2To1tOyCbc
https://www.youtube.com/watch?
v=fG1d6Agq78o&list=PLqLNUdJt9E4cSWpo8aIJ9GQf3EgzDJMi5&i
ndex=2

INTRODUCTION TO HTML
HTML – Hypertext Markup Language

It is the basic tool for designing a web page.
It is a markup language to mark the headings, title,
table and forms.
"Hypertext" refers to the hyperlinks that an HTML page
may contain.
"Markup language" refers to the way tags are used to
define the page layout and elements within the page.
6
 HTML defines the structure and layout of a Web document by
using a variety of tags and attributes.
 The correct structure for an HTML document starts with
 <HTML><HEAD>(enter here what document is about)

 <BODY> and ends with </BODY></HTML>.
 All the information you'd like to include in your Web page
fits in between the <BODY> and </BODY> tags.
 HTML supports inclusion of audio, video, and animation
into an electronic document through helper software such
as ActiveX, Java Applets, Quick Time.

SAMPLE CODING
<!doctype html>
//what type of contents the document contains means the page is written in
HTML5
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<p>This is an example of a paragraph in HTML</p>
</body>
</html>

A BRIEF HISTORY OF HTML
 IBM wanted to set a documentation system – to mark title,

headings, paragraphs and font type selections – 1980 –
came with a set of mark-up system called it General Mark
Up Language (GML).
 In 1986, ISO (International Standardizing Organization)
took up this concept and standardized it as Standard
Generalized Mark Up Language (SGML).
 In 1989, TIM BERNERS LEE and his team in the European
Laboratory for Particle Physics designed the present form
of documentation language and called it HTML
HTML TAGS
 When a web page is to be developed, the following are to be
planned:
 Content of the page
 Appearance of the page
 The appearance of the web page is coded in HTML language
using HTML tags.

HTML TAGS & THEIR ATTRIBUTES
 An HTML tag is a word specifying the appearance of

the content.
 Salient features are:

 A tag is enclosed b/w the < and > symbols.
 Eg: <head>, <h1>, <ol>.
 Most of the tags have end tag, which begins with </.
 Eg: </h1> is the end tag for <h1>

 A tag may have some attributes
 Attributes are the properties of the tag
Eg:
 <hr> tag
 used for drawing horizontal ruling (line), which
contains following attributes:
 Size (thickness of the line)
 Width
 Alignment
 Which is represented as <hr size = 10 width =25%align

= LEFT>

HTML DOCUMENTS
 Every HTML document begins with the <html> tag and ends
with the corresponding end tag </html>
 A document has two sections:
 Head
 Body
 The head section begins with the <head> tag and ends with
</head> tag.
 In the head section title is the most important item.
 The title begins with <title> and ends with </title>

HEADER SECTION
 Every HTML document must have head section
Components are:
 TITLE
 PROLOGUE
 LINKS

HEADER SECTION
 TITLE –
 Heading appears as the title of the window
 Enclosed within <title> and </title>
 PROLOGUE
 It is only a comment which tells you abt the HTML
version – adopted for preparing document
 Eg: < ! doctype HTML 4.0>
 LINKS
 Used to inform the browser the previous document
 used to inform the browser the next document
 Used to link the banner
 Used to inform the location of the base document
location

LINKS
1. Previous and next attributes

HTML document placed in between two HTML document using LINK tag.
Eg : previous document july2016.html and jan2017.html as next
document:
<head>
<title> month documents </title>
<link rel = previous href = “july2016.html”>
<link rel = next href = “jan2017.html”>
</head>
To assign wb.html for the home button of the toolbar

<link rel = home href = “wb.html”>

2. Banner attribute
 It is a fixed part of the page that will stay on the
screen when we scroll the text of the page
 The emblem of the company, or the title of the
company as a banner.
 It must be prepared as a separate HTML
document and it must be linked as banner to the
document.
 Eg: logo.html shows the emblem of the college
 <link rel = banner href = “logo.html”>
17
THE <!DOCTYPE> DECLARATION
 The <!DOCTYPE> declaration represents the document

type, and helps the browser to display a web page
correctly.
 It must only appear once, at the top of the page (before
any HTML tags).
 There are different document types. To display a web
page correctly, the browser must know both type and
version.
 The doctype declaration is not case sensitive. All cases
are acceptable:
 <!DOCTYPE html>
 <!doctype HTML>
18
THE FIRST WEB PAGE

DESIGN CYCLE FOR A WEB PAGE
 Edit using Text Editor(Notepad)

 Save the file (.Html or .htm)
 Hyper text markup language(Html)
 View the page using browser (Example-Internet
explorer, Mozilla, Chrome)
 We mostly use IE

THE FIRST PAGE
 Open the text editor type the first page

 Save it as (.html or .htm)
 Run in your browser

SAVED HTML DOCUMENT

MY FIRST WEB PAGE OUTPUT

STANDARD WEB PAGE
 Starting tag<>
 Ending Tag</>
 Both referred as rendering your document
 Nested tag are
 Head
 Body
 Html, Head, body are the reserved words.
 No spaces between <…> </…>
 Incorrect format < Html> </Html >
 Case insensitive

SAMPLE EXAMPLE(EXAMPLE1.HTML)
<Html>
<head> </head>
<body> HAI</body>
</Html>

OUTPUT
26
WEB PAGE TITLE
 You can attach title to a web page
 It will appear on the title bar of the web page
 Insert a <title> and </title> tags inside the head section
 EX: <html><head>
 <title>This is the title</title></head>
 <body> This is the Content</body></html>

OUTPUT

LINE BREAKS
 To tell the browser to render an element from the

beginning of the next line , use <br> tag
 It is an empty tag there is no ending tag
 In XHTML this tag is replaced by </br>
 If you want to render text on a single line, include the

text inside <nobr>…</nobr>

EXAMPLE
<body>
First line<br>
Second line<br>
<nobr>
Firstline
Secondline
</nobr>
</body>
30
PRE TAG
Normally browser replaces any white space characters

To preserve the formatting you used in editing the source document, use
<pre> tag
<PRE>
*****
*
*
*
*****
*******
*
*******
*
*******
**** ****
* * * *
* *
* *
</PRE> * *
31
TRAIN YOUR BRAIN
https://docs.google.com/forms/d/e/1FAIpQLSfRCiFkxFzgCgH1HKk
0RhZRRgEmJsjHZfzo2XqRvbyygFjTw/viewform


Lec 1

Uploaded by

Copyright:

Available Formats

You might also like

Lec 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec 1

Uploaded by

Copyright:

Available Formats

SRI KRISHNA ARTS & SCIENCE COLLEGE

Department of Computer Technology

Basics of Web Technology

UNIT-I BASICS OF WEB TECHNOLOGIES 11

Book: HTML, XHTML, CSS & XML by EXAMPLE, A Practical

UNIT-I BASICS OF WEB TECHNOLOGIES 2 2

Google classroom code :fueml3g

UNIT-I BASICS OF WEB TECHNOLOGIES 4 4

UNIT-I BASICS OF WEB TECHNOLOGIES 5 5

HTML – Hypertext Markup Language

 The correct structure for an HTML document starts with

 <HTML><HEAD>(enter here what document is about)

UNIT-I BASICS OF WEB TECHNOLOGIES 7 7

UNIT-I BASICS OF WEB TECHNOLOGIES 8 8

 IBM wanted to set a documentation system – to mark title,

 When a web page is to be developed, the following are to be

 Content of the page

 Appearance of the page

 The appearance of the web page is coded in HTML language

using HTML tags.

UNIT-I BASICS OF WEB TECHNOLOGIES 10 10

 An HTML tag is a word specifying the appearance of

 Salient features are:

UNIT-I BASICS OF WEB TECHNOLOGIES 11 11

 Which is represented as <hr size = 10 width =25%align

UNIT-I BASICS OF WEB TECHNOLOGIES 1212

 The title begins with <title> and ends with </title>

 Every HTML document must have head section

UNIT-I BASICS OF WEB TECHNOLOGIES 14 14

UNIT-I BASICS OF WEB TECHNOLOGIES 15 15

1. Previous and next attributes

To assign wb.html for the home button of the toolbar

UNIT-I BASICS OF WEB TECHNOLOGIES 16 16

 <link rel = banner href = “logo.html”>

 The <!DOCTYPE> declaration represents the document

UNIT-I BASICS OF WEB TECHNOLOGIES 19 19

 Edit using Text Editor(Notepad)

UNIT-I BASICS OF WEB TECHNOLOGIES 20 20

 Open the text editor type the first page

UNIT-I BASICS OF WEB TECHNOLOGIES 21 21

UNIT-I BASICS OF WEB TECHNOLOGIES 22 22

UNIT-I BASICS OF WEB TECHNOLOGIES 23 23

UNIT-I BASICS OF WEB TECHNOLOGIES 24 24

UNIT-I BASICS OF WEB TECHNOLOGIES 25 25

 You can attach title to a web page

 It will appear on the title bar of the web page

 Insert a <title> and </title> tags inside the head section

 <title>This is the title</title></head>

 <body> This is the Content</body></html>

UNIT-I BASICS OF WEB TECHNOLOGIES 27 27

UNIT-I BASICS OF WEB TECHNOLOGIES 28 28

 To tell the browser to render an element from the

 It is an empty tag there is no ending tag

 In XHTML this tag is replaced by </br>

 If you want to render text on a single line, include the

UNIT-I BASICS OF WEB TECHNOLOGIES 29 29

Normally browser replaces any white space characters

UNIT-I BASICS OF WEB TECHNOLOGIES 33 33