Scribd
Upload
36 views

Web Technology HTML, SGML

Web Technology HTML, SGML

Uploaded by

vijayalakshmis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views

Web Technology HTML, SGML

Web Technology HTML, SGML

Uploaded by

vijayalakshmis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

WEB TECHNOLOGY

UNIT-1

Presented By
S.Vijayalakshmi B.E,
Assistant Professor,
Department of Computer Science,
Sri Sarada Niketan College for Women, Karur
HTML Introduction
HTML is the standard markup language for
creating Web pages.
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for
creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display
the content
HTML elements label pieces of content such as
"this is a heading", "this is a paragraph", "this is
a link", etc.
SGML
SGML stands for Standard generalized markup
language.
It makes use of a superset of extensively used markup
languages like HTML and XML.
It is used for marking up files and has the gain of now
no longer depending on a particular application.
It is basically derived from GML (Generalized Markup
Language), which allowed users to work on
standardized formatting styles for electronic
documents.
It was developed and standardized by
the International Organization for Standards (ISO)
in 1986.
SGML specifies the rules for tagging elements. These
tags can then be interpreted to layout factors in
specific ways.
Components of SGML:
SGML provides a way of describing the relationships
between these entities, elements, and attributes, and
tells the computer how it can recognize the component
parts of a document and it is based on the concept of a
document being composed of a series of entities (object).
It provides rules that allow the computer to recognize
where the various elements of a text entity start and end.
Document Type Definition (DTD) in SGML is used to
describe each element of the document in a form that
the computer can understand.
SGML is the simplest medium to produce files that can
be read by people and exchanged between machines and
applications in a straightforward manner.
It is easy to understand by the human as well as the
machine.
Structure of SGML:
<mainObject>
<subObject> </subObject>
</mainObject>

The extension of SGML files is:


File_Name.sgml

• Syntax:
<NAME TYPE="user"> Geeks for Geeks
</NAME>
Example 1: In this example, we will write code in SGML
Coding:
<EMAIL>
<SENDER>
<PERSON>
<FIRSTNAME>GEEKS FOR GEEKS</FIRSTNAME>
</PERSON>
</SENDER>
<BODY>
<p>A Computer Science Portal For Geeks</p>
</BODY>
</EMAIL>

Output:
GEEKS FOR GEEKS
A Computer Science Portal For Geeks
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Output:
My First Heading
My first paragraph.
HTML - The Head Element
The HTML <head> element is a container for
the following elements:

<title>, <style>, <meta>, <link>, <script>,


and <base>.
The HTML <head> Element
The <head> element is a container for
metadata (data about data) and is placed
between the <html> tag and the <body> tag.
HTML metadata is data about the HTML
document. Metadata is not displayed.
Metadata typically define the document title,
character set, styles, scripts, and other meta
information.
The HTML <title> Element
The <title> element defines the title of the
document. The title must be text-only, and it
is shown in the browser's title bar or in the
page's tab.
The <title> element is required in HTML
documents!
The content of a page title is very important
for search engine optimization (SEO)! The
page title is used by search engine algorithms
to decide the order when listing pages in
search results.
The <title> element:
It defines a title in the browser
toolbar.
It provides a title for the page
when it is added to favorites.
It displays a title for the page in
search engine-results.
Example
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

Output:
The content of the document......
The HTML <style> Element
The <style> element is used to define style information for a single HTML page:

Example
<style>
body {background-
color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
HTML head Elements
<head> - Defines information about the document
<title> - Defines the title of a document
<base> - Defines a default address or a default
target for all links on a page
<link> - Defines the relationship between a
document and an external resource
<meta> - Defines metadata about an HTML
document
<script> - Defines a client-side script
<style> - Defines style information for a document
HTML Body Section
Definition
HTML body section is a main contain section
of web page all contain that will be seen
when the user loads the webpage.
HTML body section supported all the
contains such as text, hyper-links, images,
Special Character, lists, tables, frames, forms
etc.
It's most powerful section and important
section to display web page.
Body Section
<html>
<head>
<link rel="stylesheet" type="text/css"
href="styles.css"> <title>Example for Body section
elements</title>
</head>
<body>
<p> This is Body Section </p>
<a href="../html_tutorial.php"> goto HTML Index Page
</a>
</body>
</html>
Basic Body Section Tags
Tag Description
<a> Defines the internal link, external link.
<br /> Defines the single line break.
<code> Defines the computer code on text base.
<div> Defines the division section in a document.
<form> Defines the HTML form for use in input documents.
<frame> Defines the many individual part
<hr /> Defines the horizontal line.
<p> Defines the paragraph in web documents.
<pre> Defines the preformatted text.
<span> Defines a section in a web document.
<table> Defines the table.
<textarea>Defines the multiline text.
HTML <a> tag
HTML <a> tag defines an anchor link.
An anchor to create or set link either internally or
externally. A link is a connection from one Web resource
to another. Another way link is primary concept to drive
one page to another page into a web.
User linked from text file, image file or any other
resource files to current document using HREF attribute.
and TITLE attribute use for provide a description of that
location file, which are linked to current document.
The most required attribute of the <a> tag is the href
attribute, which are indicates the link's destination.
HREF link will appear below:
 Unvisited link is blue with underline.
 Visited link is maroon with underline.
 Active link is green with underline.
HTML <a> tag
<html>
<head>
<title>HTML a tag</title>
</head>
<body> Click Here to open
<a href="http://www.way2tutorial.com/"
target="_blank"> Way2Tutorial Web
Development Tutorials </a>
</body>
</html>
HTML <br/> tag
HTML <br/> tag is use for break single
line.
<br/> tag use for break the current
line than after next text display on next
line.
<br/> tag self-closing and does not
support any specific attributes.
<br/> tag
Coding:
<html>
<head>
<title>HTML br tag</title>
</head>
<body>
<p>I am writing first line. <br />
I am still write on first line.</p>
</body>
</html>

Output:
I am writing first line.
I am still write on first line.
HTML <div> tag
HTML <div> tag defines a section or
division in web document. It is used to
group of large section of HTML elements
are together and apply CSS styles to all
elements at once.
HTML <div> tag is container tag. Which
is used to encapsulate many elements and
divides HTML document into number of
sections.
Coding:
<div> tag
<html>
<head>
<title>HTML div tag</title>
</head>
<body>
<div style="font-size:20px; border: 1px solid #999999; color: #F9864D;">

<p>This is a Paragraph text.</p>


<h2>This is a h2 Heading tag.</h2> </div>
</body>
</html>

Output:
This is a Paragraph text.
This is a h2 Heading tag.
The <frame> tag
The <frame> tag defines frame window.
The <frameset> tag holds one or more
<frame> elements.
HTML <frameset> tag used to split the
browser window in several individual
frames that can contain a separate HTML
web document. The <frame> tag used
improve appearance and usability of a site.
HTML <frame> tag remove in HTML5
specification.
The <frame> tag
<html>
<body style="background-color:#ff9900;">
<h2 align="center">First frame (frame_1.html)</h2>
</body>
</html>

<html>
<body style="background-color:#ffcc00;">
<h2 align="center">Second frame (frame_2.html)</h2>
</body>
</html>
The <frame> tag
<html>
<head>
<title>Frameset Example 1<title>
</head>
<frameset rows="35%, 65%">
<frame src ="frame_1.html" />
<frame src ="frame_2.html" />
</frameset>
</html>
HTML <hr> tag
HTML <hr> tag represent
a thematic break between
paragraph-level tags. It is typically
draw horizontal line.

The <hr> tag self-closing tag.


HTML <hr> tag
Coding:
<html>
<head>
<title>HTML hr tag</title>
</head>
<body> <p>Article paragraph 1</p>
<hr /> <p>Article paragraph 2</p>
</body>
</html>

Output:
Article paragraph 1
_________________________________
Article paragraph 2
HTML Forms
Definition
HTML Forms is most important future in
HTML. HTML Forms use to get a users
information.
It is user interactive. HTML Forms is a
information tools to get information from the
web surfer, such as: name, email address,
address, phone number etc.
A form use to get information about user and
information store that data into a web server.
HTML Form Tag
<form> Defines a form for user input.
<input> Defines an input field data.
<button> Defines a push button
<textarea> Defines a text-area(a multi-line text input
box).
<label> Defines a label to the description.
<fieldset> Defines a border to the input data.
<legend> Defines a caption name write into fieldset.
<select> Defines a drop-down select list box.
<option> Defines an option value in the drop-down
box.
Textbox
<html>
field
<body>
<form action="form_submit.php" method="post">
First name:
<input type="text" name="FirstName:" size="10" maxlength="15" />
<br />
Last name:
<input type="text" name="LastName:" size="10" maxlength="15" />
</form>
</body>
</html>

Output:
First Name :
Last Name :
Password field
<html>
<body>
<form action="form_submit.php" method="post">
Password:
<input type="password" name="Password"
size="15" maxlength="15"/>
</form>
</body>
</html>
Output:
Password :
<html>
Radio field
<body>
<form action="form_submit.php" method="post">
Que. What is your favourites Web browser.
<input type="radio" name="browser" value="IE8" /> Internet Explorer 8 <br />
<input type="radio" name="browser" value="GC" /> Google Crome <br />
<input type="radio" name="browser" value="FX" /> Mozila Firefox
</form>
</body>
</html>

Output:

Que. What is your favourites Web browser

Internet Explorer 8
Google Crome
Mozila Firefox
<html>
<body>
Checkbox field
<form action="form_submit.php" method="post">
Que. Select your hobby.
<input type="checkbox" name="cricket" value="cricket" /> Cricket <br />
<input type="checkbox" name="watchtv" value="watchtv" /> Watch Tv <br />
<input type="checkbox" name="playgame" value="playgame" /> Play Game
</form>
</body>
</html>

Output:
Que. Select your hobby

Cricket
Watch TV
Play Game
THANK YOU
WEB TECHNOLOGY
UNIT-2

You might also like