Scribd
Upload
16 views

Unit-1 (HTML & CSS)

The document discusses web technologies related to data management on the world wide web. It focuses on communication, information sharing, interoperability, user-centered design and collaboration. It provides an introduction to HTML and common HTML tags for formatting text, adding images and links, and inserting tables. The summary highlights the document's focus on technologies for managing data on the web through communication and collaboration.

Uploaded by

rambabudugyani
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
16 views

Unit-1 (HTML & CSS)

The document discusses web technologies related to data management on the world wide web. It focuses on communication, information sharing, interoperability, user-centered design and collaboration. It provides an introduction to HTML and common HTML tags for formatting text, adding images and links, and inserting tables. The summary highlights the document's focus on technologies for managing data on the web through communication and collaboration.

Uploaded by

rambabudugyani
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 82

 Technology associated with management of data on

the world wide web.

 Management of data?
1. communication,
2. information sharing,
3. interoperability,
4. user-centered design
5. and collaboration on the World Wide Web.

2
INTRODUCTION

World wide web : It is a system of interlinked


hypertext documents accessed via internet with a
web browser. (or)

An information system on the Internet which


allows documents to be connected to other
documents by hypertext links, enabling the user to
search for information by moving from one
document to another.

Web : network consisting of a collection of


websites.

Website: collection of web pages maintained by a


single person or organization.

 3
A website has a distinct
fully qualified domain name
Ex:- www.google.com.

 Every website is made up of one or more web


pages.

4
Contents:
1. HTML Introduction
2. Common tags –List, Tables, images
3. Forms
4. Frames
5. Cascading Style sheets

5
HTML Introduction
web pages are written in
HyperText Markup Language (HTML).
Web pages contain text ,hyperlinks (links
to other web pages), tables, images.

 Less commonly, web pages may also


contain Flash animations, Java applets, or
MPEG video files.

6
7
 Markup: Markup refers to the sequence of
characters or other symbols that you insert at
certain places in a text or word processing file to
indicate how the file should look when it is printed
or displayed or to describe the document's logical
structure. The markup indicators are often called
"tags.
 Hypertext:Apart from text, hypertext is sometimes

used to describe tables, images and other


presentational content forms with hyperlinks.
 is text which contains links to other texts.

8
WEB BROWSER

Web browsers are software programs that


allow users to access the web’s content.
Ex: Internet Explorer

9
Title bar
Menu bar

Tool bar

Address bar

Status bar

10
CATEGORIES OF TEXT

Plain text- Strings of


characters of fixed font size.
Rich text -Strings of
characters of various font size.
Hypertext – Plain / Rich
text plus links to other
documents.

11
 HTML is a language used to design web pages.

 Without HTML, Web browsers take contents of web


page and put them just like a paragraph without any
line breaks, alignments etc .

 With HTML , we can specify line breaks , alignments


of text , images etc

 In
other words ,HTML is all about specifying structure
and format of web page.

12
HTML Tags
HTML tags are used to mark-up HTML elements.

The surrounding characters are called angle brackets.

HTML tags normally come in pairs like <b> and </b>.

The first tag in a pair is the start tag, the second tag is the end
tag.

 HTML element : start tag , content ,end tag

 HTML tags are not case sensitive, <b> means the same as
<B>
13
 AnHTML file is a text file containing small markup
tags.

 Themarkup tags tell the Web browser how to


display the page.

 AnHTML file must have an htm or html file


extension.

 AnHTML file can be created using a simple text


editor.

14
<html>
<head>
<title>Title of the
page
</title>
</head>

<body>

Content of the page

</body>

</html>
15
EXAMPLE
<html>
<head>
<title>This is my first web page ! </title>
</head>

<body>
<b> welcome to snist </b>
</body>

</html>

16
17
 Tag<HTML> indicates this page is written in HTML
language.

 HTML page contains two main section , HEAD and BODY.

 HEAD section includes information about the page such as


its title, page formatting instructions, scripts etc.

 The BODY section includes actual content of the page.

 Tags can be nested to create complex structures.

 All tags may not need its closing tag.


18
 Attribute : keyword that is added INSIDE another tag

 Used to add functions where that tag is in effect. For


example, the BODY tag can contain the background color,
<BODY BGCOLOR="BLUE">.

 The end tag </BODY> does not have to contain the


attribute. The background color will be in effect
throughout the document.

 General form: <tagname attribute=“value”>

19
Common HTML tags:-
Understanding the following table:

 The first two columns show the opening and


closing tags . Note that just a few tags do not have a
closing tag.
 The attribute column shows list of attributes that
can be placed inside of that tag.
 The Description column tells what the tag does.

20
Document Structure

Opening Tag Closing Attribute Description


Tag

<HTML> </HTML> Identifies document


as HTML

<HEAD> </HEAD> Document Head


contains Title Tag

<TITLE> </TITLE> Title of Document

<BODY> </BODY> Contents of


Document

21
Formatting

Opening Tag Closing Tag Attribute Description


<BODY> </BODY> Contents of
Document
BGCOLOR="# Background Color
color code
Or name"
BACKGROUN Background Image
D="... .gif "
TEXT="#color Text Color
code"
<CENTER> </CENTER> Centers Text and
Images
<H1> to <H6> </H1>to</H6> Heading
ALIGN="Left, Align Text
Center,
Right"
22
<P> </P> New Paragraph
ALIGN="Left, Align Text
Center, Right"
<BR> Line Break
<HR> Horizontal Rule
ALIGN="Left, Align Text
Center, Right"
SIZE = Thickness of
"number" Horizontal Rule

WIDTH = % of Document to
"number %" Span

NOSHADE Removes
Shading
23
Character

Opening Tag Closing Tag Attribute Description

<FONT> </FONT> Section of Text


COLOR="#color Font Color
code"

SIZE="number" Font Size

FACE=“face” Font Face


<B> </B> Bold Text
<I> </I> Italic Text
<STRIKE> </STRIKE> Strike out Text
<SUB> </SUB> Subscript Text
<SUP> </SUP> Superscript Text

24
Links
Opening Tag Closing Attribute Description
Tag

<BODY> </BODY> Contents of Document

LINK="#color code" Unvisited Link Color

ALINK=“#colorcode Active link Color


”
VLINK="#color Visited Link Color
code"
<A HREF = "Item </A> Destination of Link
Location">
<A HREF=“#Label” </A>
Moves to Other Section of
<A NAME = </A> Web Page
"Label">

25
Images

Opening Tag Closing Tag Attribute Description


<IMG SRC ="Image Imports Image
Location">
ALIGN="Left, Right" Align Image
ALT Alternative Text
BORDER Puts Border around Image
WIDTH Width of Image in Pixels
HEIGHT Height of Image in Pixels

26
Tables
Opening Tag Closing Tag Attribute Description
<TABLE> </TABLE> Adds Table
BORDER="number" Border for Rows & Columns
CELLPADDING Size of Cell Wall
CELLSPACING Spacing between Border and
Cell Contents
BGCOLOR Background Color of Cells
<TR> </TR> Table Row (Start & End)
ALIGN="Left, Center, Aligns Text in Row
Right" Horizontally
VALIGN="Top, Aligns Text in Row Vertically
Middle, Bottom"
<TD> </TD> Defines Data Cell
COLSPAN="number" Spans Cells across Column
ROWSPAN="number" Spans Cells across Row
<TH> </TH> Header Cell in Table
COLSPAN="number" Spans Cells across Column
ROWSPAN="number" Spans Cells across Row
<CAPTION> </CAPTION> Text outside Table
ALIGN="Top, Bottom" Aligns Caption at Top or
Bottom 27
<!– Table Example

<body>
<center><b> <caption > Table Example </caption></b> </center>
<table border="2" align="center" bgcolor="pink" cellpadding="10"
cellspacing="2">
<tr align=“center”>
<th> RollNo </th>
<th> Name </th>
</tr>

<tr>
<td align=“right”> 1 </td>
<td> abc </td>
</tr>

<tr>
<td align=“right”> 2 </td>
<td> pqr </td>
</tr>
</table>

28
Example for colspan attribute of td tag
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>

29
Opening Tag Closing Tag Attribute Description

<OL> </OL>

Type=“1 or a/A or Defines order type


i/I “
Start= “integer Specifies starting
number” number/alphabet /
roman number
<UL> </UL>

Type=“square or Defines bullets


circle or disk “ type
<LI> </LI> List Item

30
<caption> List </caption>
<UL>
<LI>Unordered information.
<LI>Ordered information.
<LI>Definitions.
<OL>
<LI> ... Level one, number one...
<LI> ... Level one, number two...
<OL start="1" type="a">
<LI> ... Level two, number one...
</OL>
<LI> ... Level one, number three...
</OL>
<DL>
<DT><STRONG>Lower cost</STRONG>
<DD>The new version of this product costs significantly less than the
previous one!
<DT><STRONG>Easier to use</STRONG>
<DD>We've changed the product so that it's much easier to use!
</DL>

31
HTML forms

32
 <form> :- another kind of HTML tag
 used to create GUIs on Web pages
◦ Purpose: to ask the user for information
◦ The information is then sent back to the server

 Area that can contain form elements


◦ syntax <form parameters> ...form elements... </form>
◦ Form’s parameters tell JavaScript how to send the
information to the server

33
FormPage1

SERVER
Name,address,
gender, interests

SUBMIT

Form elements:
 checkboxes, text fields, radio buttons, drop-down menus, etc
 Other kinds of HTML tags can be mixed in with the form elements
 Contains a Submit button to send the information in the
form elements to the server
34
 <form parameters> ... </form> tag encloses form
elements and other HTML

 The parameters to form tell what to do with the user


input
◦ action="url" (required)
 Specifies where to send the data when the Submit button is
clicked

◦ method="get" (default)
 Form data is sent as a URL with ?form_data info appended to
the end
 Used if data is all ASCII and not more than 100 characters
35
◦ method="post"
 Form data is sent in the body of the URL request
 Cannot be bookmarked by most browsers

◦ target="target"
 Tells where to open the page sent as a result of the request
 target= _blank means open in a new window
 target= _top means use the same window
 target= <framename> means use the same window

36
 form elements use the input tag, with a type="..."
argument to tell which kind of element it is.

 Other input tag arguments :


1. name: the name of the element
2. value: the initial value of the element
3. readonly: the value cannot be changed
4. disabled: the user can’t do anything with this element
5. Other arguments are defined for the input tag but have
meaning only for certain values of type

37
A text field:
<input type="text" name="textfield" value="with an initial value">

A multi-line text field


<textarea name="textarea" cols="24" rows="2">Hello</textarea>

A password field:
<input type="password" name="textfield3" value="secret">

• Note that two of these use the input tag, but one uses textarea
38
 A checkbox:
<input type="checkbox" name="checkbox” value="checkbox"
checked>

 type: "checkbox“

 name: used to reference this form element from


JavaScript

 value: value to be returned when element is checked


 Note that there is no text associated with the
checkbox—you have to supply text in the
surrounding HTML

39
A submit button:
<input type="submit" name="Submit" value="Submit">
A reset button:
<input type="reset" name="Submit2" value="Reset">
A plain button:
<input type="button" name="Submit3" value="Push Me">

 submit: send data


 reset: restore all form
elements to their initial state
 button: take some action as
specified by JavaScript

• Note that the type is input, not “button”


40
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2"
checked> female

 If two or more radio buttons have the same name, the user can
only select one of them at a time
◦ This is how you make a radio button “group”

 If you ask for the value of that name, you will get the value
specified for the selected radio button

 As with checkboxes, radio buttons do not contain any text


41
 A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>

 Additional arguments:
◦ size: the number of items visible in the list (default is "1")

◦ multiple: if set to "true", any number of items may be selected


(default is "false")

42
 <input type="hidden" name="hiddenField" value="nyah">
&lt;-- right there, don't you see it?

 What good is this?


◦ All input fields are sent back to the server, including hidden fields

◦ This is a way to include information that the user doesn’t need to see (or
that you don’t want her to see)

◦ The value of a hidden field can be set programmatically (by JavaScript)


before the form is submitted

43
<html>
<head>
<title>Get Identity</title>
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>

44
Frames

45
 HTML frames are used to divide your browser window
into multiple sections

 where each section can load a separate HTML


document.

 A collection of frames in the browser window is


known as a frameset

 To use frames on a page we use <frameset> tag instead


of <body> tag.

 The <frameset> tag defines how to divide the window


into frames.
46
 A way to split up what is viewed in the browser into
sections
 Difference between Frame and tables :IN EACH FRAME
you can VIEW a SEPARATE HTML FILE

47
<frameset></frameset>
Replaces the <body> tag in a frames document; can
also be nested in other framesets
<frameset rows="value, value">
Defines the rows within a frameset, using number in
pixels, or percentage of width
<frameset cols="value,value">
Defines the columns within a frameset, using number in
pixels, or percentage of width
<frame>
Defines a single frame — or region — within a frameset

<noframes></noframes>
Defines what will appear on browsers that don't support
frames

48
Browser Support for Frames
 If a user is using any old browser or any browser which

does not support frames then <noframes> element should


be displayed to the user.
 So you must place a <body> element inside the

<noframes> element because the <frameset> element is


supposed to replace the <body> element, but if a browser
does not understand <frameset> element then it should
understand what is inside the <body> element which is
contained in a <noframes> element.
 You can put some nice message for your user having old

browsers. For example Sorry!! your browser does not


support frames.

49
<frame src="URL">
Specifies which HTML document should be displayed

<frame name="name">
Names the frame, or region, so it may be targeted by other frames

<frame marginwidth=#>
Defines the left and right margins for the frame; must be equal to or
greater than 1
<frame marginheight=#>
Defines the top and bottom margins for the frame; must be equal to
or greater than 1
<frame scrolling=VALUE>
Sets whether the frame has a scrollbar; value may equal "yes," "no,"
or "auto." The default, as in ordinary documents, is auto.
<frame noresize>
Prevents the user from resizing a frame

50
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

51
52
 Let’s create a page that has a left hand menu and a
right hand content area where when we click on the
menu links the content on the right hand side
changes

53
54
 4 HTML files
 Filenames are:

◦ Home.htm
◦ Content1.htm
◦ Content2.htm
◦ Content3.htm

55
 This File needs the list of links
◦ Home  Links to Home.htm
◦ Content1  Links to Content1.htm
◦ Content2  Links to Content2.htm
◦ Content3  Links to Content3.htm

 Each link should have its properties set so that:


“Target = MainContentArea”  this is where it
points to which frame the html file will be
displayed in.
 Save this file as “LeftMenu.htm”

56
 In Code view (Save file as FrameExample.htm):
Code What it does
<frameset cols="30%,*"> Splits browser into 2 vertical areas. First is a column
that is 30% of the width of the browser window,
second is rest of the browser window
This is the left frame and it is called “LeftMenu”. The
<frame name="LeftMenu" src="leftMenu.htm" default source to be displayed in this frame is
marginwidth="0" marginheight="0" scrolling="auto" “leftMenu.htm” NOTE: Any changes to “leftMenu.htm”
frameborder="1"> will appear on all pages
This is the main area for content and is a frame called
<frame name="MainContentArea" “MainContent”. The default source to be displayed in
src=“Home.htm" marginwidth="0" marginheight="0" this frame is “Home.htm”
scrolling="auto" frameborder="1">

This is the closing tag saying that there are no more


</frameset> frames in this frameset

57
 Move all the pages to your folder
◦ Home.htm
◦ Content1.htm
◦ Content2.htm
◦ Content3.htm
◦ LeftMenu.htm
◦ FrameExample.htm

 Open the file “FrameExample.htm” in your


Browser

58
 Nest a second frameset into your initial frameset as
shown below:
 Save file as “FrameExample2.htm”
<frameset cols="30%,*">
<frame name="LeftMenu" src="LeftMenu.htm“ >
<frameset rows="50,*">
<frame name="TopMenu" src="TopMenu.htm“ >
<frame name="MainContent" src="MainContent.htm“
frameborder="1">
</frameset>
</frameset>

59
 Copy the Files you created over to your folder
◦ FrameExample2.htm
◦ TopMenu.htm

60
Disadvantages of Frames
◦ There are few drawbacks with using frames, so it's never
recommended to use frames in your web pages:
 Some smaller devices cannot cope with frames often
because their screen is not big enough to be divided
up.
 Sometimes your page will be displayed differently

on different computers due to different screen


resolution.
 The browser's back button might not work as the

user hopes.
 There are still few browsers that do not support

frame technology.

61
62
 CSS
◦ Used to describe the presentation of a document
written in a mark up language.
◦ CSS is style sheet language used for describing the look
and formatting of a document.

◦ Style were added to html4.0 in 1996


◦ To define color, fonts, layout and other aspects of
document presentation.

◦ Purpose: Separate document structure from document


presentation.
63
Selector

h1 {
color: #0000FF;
font-size: 24pt; Declarations
}
Value
Property

64
 CSS rule set consists of Selector and a declaration
block.

 The Selector points to the HTML Element you want


to style.

 Declaration block contain more than one declaration


seperated by semicolon

 Each declaration include a property name and a


value, seperated by colon

65
 Inline Styles
◦ coded in the body of the web page as an attribute of an
HTML tag.
◦ Applies to the specific element that contains it as an
attribute

 Embedded Styles/Internal Style sheet


◦ Defined in the header of a web page.
◦ Apply to the entire web page document.

 Linked / External Styles


◦ coded in a separate text file.
◦ This text file is linked to the web page by using a <link>
tag in the header section.
66
<html>
<head>
</head>
<body>
<h1 style="background-color:#23fff0">This is heading 1</h1>
<p style="background-color:rgb(5,0,255);
color:white; font-size:150%">
This is a paragraph.</p>
</body>
</html>

67
<html>
<style type="text/css">
body {background-color: yellow; color:red}
p {color:green; font-size=60%}
p.change { color:rgb(0,0,255); font-size:195%}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p> color is green. font size=60%.</p>
<p class="change">This is a paragraph with class="change". font-
size=90%.</p>
</body>
68
<html>
<head>
<link rel="stylesheet“
type="text/css“
href="style.css“ />
</head>
<body>
 An external style sheet can be written in any text

editor. The file should not contain any html tags. The
style sheet file must be saved with a .css extension.

69
 Instead of this…
CSS: H1 { color: #FFFF00; }
H2 { color: #FFFF00; }

 You can do this…


CSS: H1, H2 { color: #FFFF00; }

70
 The class selector selects elements with a specific
class attribute.
 To select elements with a specific class, write a

period (.) character, followed by the name of the


class.
 In the example below, all HTML elements with

class="center" will be red and center-aligned:

71
<html>
<head>
<style> o/p:
p.center {
text-align: center; This heading will not be affected
color: red; This paragraph will be red and center-aligned
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>


<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>

72
 Classes
◦ Allow styles for groups of elements
CSS: .warning { color: red; }
HTML: <h3 class=“warning”>
File not found.
</h3>

73
CSS: p.black {color: #000000;}
p.blue {color: #000080;}

HTML: <p class=“black”>


This sentence is black.
</p>
<p class=“blue”>
This sentence is blue.
</p>

74
 background-color
 color
 font-family
 font-size
 padding
 margin
 text-decoration
 line-height
 text-align
 background-image

75
 font-family
◦ Ordered list of font names
◦ Quote names with spaces: ex. “Arial Black”
CSS: p.arial {
font-family: Arial, Helvetica, sans-serif;
}

 font-size
◦ larger, smaller, or specific height
CSS: p.big { font-size: 60px; }

76
 color:
◦ Named Colors: red, blue, green
◦ Hex: #FFCC00, #FC0
◦ RGB values: rgb(123, 123, 123)
CSS: p.green { color: #00FF00; }

 background-color:
◦ color or transparent
CSS: p.highlight { background-color: #FFCC00; }

77
Text Text Text Text Text Text
Text Text Text Text Text Text
margin padding Text Text Text Text Text Text
padding margin
Text Text Text Text Text Text

 Margin
◦ The space between this and other elements
◦ margin-top, margin-right, margin-bottom, margin-left

◦ margin: 5px 10px 5px 10px;


◦ Values are in clockwise order

78
Text Text Text Text Text Text
Text Text Text Text Text Text
margin padding Text Text Text Text Text Text
padding margin
Text Text Text Text Text Text

 Padding
◦ The CSS padding properties define the white space
between the element content and the element border.
◦ The space between the margin and the element
◦ padding-top, padding-right, padding-bottom, padding-left
(can use same shortcut as with margins)
◦ Comparable to TABLE’s cell-padding

79
 This “cascade” applies the styles in order from outermost
(External / Linked Styles) to innermost (actual XHTML code
on the page).
 This way site-wide styles can be configured but overridden
when needed by more granular (or page specific) styles.

80
 CSS was a revolution in the world of web design.
 control layout of many documents from one
single style sheet;
 more precise control of layout;
 apply different layout to different media-types
(screen, print, etc.)

81
END

82

You might also like