From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Web Design.ppt
1. What the following term mean:
1. Web server: a system on the
internet containing one or more
web site
2. Web site: a collection of one or
more web pages
3. Web pages: single disk file with a
single file name
4 .Home pages: first page in
website
2. WEB DESIGN
Dr.R.SUGANYA
Head & Assistant Professor
Department of Information Technology
Bon Secours College for Women
Thanjavur-613 006.
3. History of HTML
• HTML is a method where ordinary text can be
converted into hypertext.
• HTML is not a Programming Language.
• It combines instructions within data to tell a
display program called browser.
• Html is the character based method for
describing and expressing the content like
pictures, text, sound and video clips.
4. • It delivers the contents to multiple platforms.
• It links documents or components together to
compose compound documents.
• Tim Berners-Lee developed HTML in early
1990 @ CERN.
• HTML is a public domain and not owned by
anybody.
5. HTML Generations
• HTML 1.0 was first introduced in 1989 by Tim Berners-Lee.
• In November 1995 the first draft of HTML 2.0 was published.
• January 1997: HTML 3.2 was published as a W3C (World Wide
Web Consortium) recommendation.
• May 2000: HTML 4.0 was published as a W3C
Recommendation.
• January 2008: HTML 5.0 is published as a Working Draft by
W3C.
6. Creating a HTML File
1. Open Notepad
2. Click on File -> Save as…
3. In the File name pull-down box, type in
webpage.html
4. Click on Save
5. Type in content for your file
6. Once you finished the content, click on
File -> Save
7. What is HTML?
• Hyper Text Markup Language
• A markup language designed for the creation
of web pages and other information viewable
in a browser
• The basic language used to write web pages
• File extension: .htm, .html
8. What is HTML?
Telling the browser what to do, and what props to use.
A series of tags that are integrated into a text document.
• HTML files
– Text files
– Contain mark-up tags
– Tags direct how page is to be displayed by browser
– Can be created from a simple text editor
– File extension “.htm” or “.html”
9. Creating an HTML file
• Notepad or Wordpad (PC) or SimpleText (Mac)
• First tag: <html>
– Indicates that you are starting an HTML document
• Last tag: </html>
– Indicates that you are ending an HTML document
– *Note* the open & close structure to HTML
– Fictional example: <sleep> and </sleep>
• Save file as “index.html”
– This is a typical default title for home pages
– Windows may seem to prefer “.htm” but “.html” will also
work just fine.
12. Creating an HTML file (cont.)
• Header information
– <head> to begin, and </head> to end
– Gives information about the page
• Page Title
– <title> to begin, and </title> to end
– Example: <title>Transcriptions Studio</title>
13. Creating Text in HTML
• Body Tags
– <body> and </body>
– *Note* that all text that appears on the page must be
encapsulated within the body tags
• Text headings
– <h1> and </h1>
– There are six defined heading sizes
– <h1> (largest) through <h6> (smallest)
• Paragraphs
– <p> and </p>
15. Text Example (cont.)
This is a big heading!
This is a smaller heading!
This is an example of a paragraph.
16. Prologue
• A Prologue is only a comment for preparing
the document.
Syntax : <! Doctype HTML 3.0>
17. HTML Organization
• Spacing
– Spacing organizes your work!
– Spacing makes your files easy to read!
– Spacing makes no functional difference to your web
browser
• Comments
– Comments are notes in your HTML file
– The Comment will not appear in the web page.
– Comments make no functional difference to your
web browser
– “<!--” begins a comment, and “ -->” ends it
19. HTML Tags
• For example: <b>, <font>,<title>, <p> etc.
• Tag usually goes with pair: an open tag (<b>) and
an end tag (<b>)
• Single tag: <hr>,<br>
• Tags are NOT case sensitive
Effect Code Code Used What It Does
Bold B <B>Bold</B> Bold
Italic I <I>Italic</I> Italic
20. HTML Tags
• Banner:
- A Banner is a fixed part of the page that will
stay on the screen when we scroll the text on the
page.
Ex: College logo
<link REL=Banner href=“logo.html”>
• Base Element:
-A Base element in the head section informs
the browser the location where all the base
documents are available.
Ex: http://www.bonsecourscollege.org
21. Anchor Tag
A source anchor is created in an HTML document (webpage)
by adding an anchor element <a> with a hypertext
reference href containing a uniform resource identifier
(URI)
Hyperlink Element Destination anchor
code
Source anchor code
Page top <a> <a
name="pagetop"></
a>
<a href="#pagetop">
Page top </a>
Content <a> <a
name="content"></a
>
<a href="#content">
Content </a>
Destination anchors <h2> <h2
id="destination">
Destination anchors
</h2>
<a
href="#destination"
> Destination
anchors </a>
22. Eg : <a href=“”>
<li><a href="a001">Jump to a001</a></li>
<li><a href="#a002">Jump to a002</a></li>
<li><a href="#a003">Jump to a003</a></li>
23. COLORFUL WEB PAGE
• A Web page can also be made colorful by
using three attributes in the <body> tag.
They are,
1. background design
2. background color
3. text color
24. • Bgcolor
• Specifies a background-color
for a HTML page.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
• Background
• Specifies a background-image for
a HTML page
<body background="clouds.gif">
<body
background="http://www.w3scho
ols.com/clouds.gif">
<body src=“hills.bmp">
In HTML, each colors has a degree from
00 to FF in the hexadecimal forms.
So each permits 256 colors (0 to 255)
25. Text
• Put text on a webpage
– <p>Today is my first day at my new job, I’m so excited!</p>
– Output: Today is my first day at my new job, I’m so excited!
• Put text in center of a page
– <center>Hello</center>
– Output: Hello
• Put text on the right of a page
– <p align=“right”>Hello</p>
– Output: Hello
26. Font color
• To change text size
– <font size=“3”>Hello</font>
– Output: Hello
• To change text color
– <font color=“red”>Hello</font>
– Output: Hello
• Using both
– <font size=“3” color=“red”>Hello</font>
– Output: Hello
Base font: The default font size in entire page
<basefont face=“Arial” size=“16”>
Tag attribute
27. The Link color
• The link will appear in a different color. When we open a web
page several links may appear in a page.
• Ex:
<body bgcolor=“#FF0000” text=“#00FF00” link=“#AAAA00”
vlink=“#AA00AA” alink=“#FF0000”>
Contains:
The background color is # FF0000
The Text color is #00FF00
The link color is #AAAA00
The visited link color is #AA00AA
The active link is #FF0000
29. Headings
• There are 6 heading commands.
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<H4>This is Heading 4</H4>
<H5>This is Heading 5</H5>
<H6>This is Heading 6</H6>
30. Aligning the Headings
• There are four types of Alignments.
1. Left
2. Right
3. Center
4. Justified
31. Text Formatting Tags
• <b> Defines bold text
• <big> Defines big text
• <em> Defines emphasized text
• <i> Defines italic text
• <small> Defines small text
• <strong> Defines strong text
• <sub> Defines subscripted text
• <sup> Defines superscripted text
• <ins> Defines inserted text
• <del> Defines deleted text
33. Horizontal Ruler
• A Horizontal Rule can be created using the
<hr> tag.
Example
<h1> Department of CA<h1>
<hr>
Output
Department of CA
___________________________
34. • There are four attributes to the <hr> tag, all of
which are optional. They are:
• Size
• Width
• Alignment
• Source
1. Size
• The size attribute has an integer value. If size=1,
a thin line is drawn horizontally, If size=5, The
line is thicker. <hr size=1>
35. 2. Width
• The width attribute tells the width of the
window in which the horizontal line has to be
drawn. The default value of the width will be
100 percent. <hr width=50%>
3. Alignment
The default alignment is always LEFT.
There are three options for the align tag;
1. Left 2. right 3. center
<hr size=5 width=25% align=right>
36. 4. Source
• When we filled with any design, available in a
graphics file in GIF format.
• <a href=“http://www.bdu.ac.in”>
<img src=“image.gif”></a>
37. Binding Spaces
• HTML automatically adjusts the intermediate
spaces and aligns the test as per the given
format. Such spaces are called soft spaces.
• soft spaces may go realigning the text.
• The space inserted by the user are called
hard spaces
38. Example of Binding spaces
• <h1> Bon secours   college   for
  women</h1>
39. Lists
Presentation is an art. It is very effective when the
concerned information is presented in the form of LIST.
Two types of list available.
1. Ordered List (OL) 2. UnOrdered List (UL)
Ordered List defines a sequentially numbered list of items.
It is used in conjunction with the LI (List Item) tag,
which is used to tag the individual list items in a list.
UnOrdered List defines a bullet list of items. The LI tag is
nested inside the UL tag and defines each item within
the list.
41. Ordered List
• <ol type=B>
<li>This is item one.
<li>This is item two.
<li>This is item three.
</ol>
• <ol start=“5”>
<li>This is item one.
<li>This is item two.
<li>This is item three.
</ol>
42. Unordered List
• <ul type=“circle”>
<li>This is item one.
<li>This is item two.
<li>This is item three.
</ul>
Plain attribute:
if we do not have any
bullets, we can use the
plain attribute in the
<ul> tag
• <ul type=“square”>
<li>This is item one.
<li>This is item two.
<li>This is item three.
</ul>
Ex: <ul plain>
43. Definition Lists
• The DL (definition list) tag allows you to create
glossaries or list of terms and definitions.
• It consists of three tag elements – a tag to
define the list (DL), a tag to define the term
(DT), and a tag to define the definitions (DD).
44. Definition Lists
• Example
<html>
<head> <title>Definitions Lists</title> </head>
<body>
<dl>
<dt>Hardware
<dd>Is defined as physical or tangible equipments associated with
computer systems. Examples of hardware are CPU,I/O devices and
Secondary Storage Devices.
<dt>Software
<dd>Is a set of Programs.
<dt>Peripherals
<dd>Equipments connected around the CPU.
</body>
</html>
45. Nested List
A List within another type of list is called
nested list.
Example:
<ol>
<li> BCA
<li>MCA
</ol>
<ul>
<li> This courses are the best and first course is IT Field.
</ul>
46. Tables
Tables are very efficient means of displaying
information in a correct form.
• The TABLE tag needs to bracket your table. All
other tags or text included in your table
should nest inside the TABLE tag.
• <html>
<head>
<title>Tables</title>
</head>
<body>
<table>
…………
</table></body></html>
47. Creating Columns and Rows
There are three following components in a table
1. Table caption
2. table Heading row
3. Rows and columns
• The TR (table row) and TD (table data)tags are used to create a grid of rows and columns.
• <table>
<tr>
<td>1</td>
<td>Aarthi</td>
<td>Thanjai</td>
</tr>
<tr>
<td>2</td>
<td>Anandhi</td>
<td>Thanjai</td>
</tr>
</table>
48. Adding a Border
• By default , the table does not contain a border, To include a border to the
table, specify a BORDER attribute inside the Table tag.
• <table border=“3”>
<tr>
<td>1</td>
<td>Aarthi</td>
<td>Thanjai</td>
</tr>
<tr>
<td>2</td>
<td>Anandhi</td>
<td>Thanjai</td>
</tr>
</table>
49. Adding Column Headings
• The TH(table heading) tag is used to define a
“cell” as a heading cell rather than as an
ordinary data cell.
• To create the column headings at the top of
the table, first create a row using the TR tag
and then, use the TH tag to define the cells
instead of using the TD tags.
51. Adding Spacing , Padding and Caption
• The Cellspacing attribute adds space between the
cells, whereas the Cellpadding attribute adds
space within each cell.
• <Table border=“1” cellspacing=“6”
cellpadding=“6”> The cellspacing attribute
increases the thickness of the border of each cell.
• The Caption tag is used to insert a caption for the
table.
• <Table border=“1” cellspacing=“6”
cellpadding=“6”>
<caption>Student Table</caption>
52. Setting the table height and width
• It can be used to specify the size of your table.
You can use either absolute value(number of
pixels) or relative values (Percentages).
• <Table border=“1” cellspacing=“6”
cellpadding=“6” width=“80%”>
54. Create Links
• A Hypertext link
– < a href=“http://www.iusb.edu”>IUSB Home</a>
– Output: IUSB Home
• A Email link
– <a href=“mailto:vkwong@iusb.edu”>
Email me</a>
– Output: Email me
55. Image Formats
Image can be stored in any one these formats
• .gif
– Graphics Interchange Format
• .jpeg or .jpg
– Joint Photographic Experts Group
• .bmp
– bitmap
56. Inserting Image
• Place all images in the same directory/folder
where you web pages are
• <img src> is a single tag
• <img src=“image.gif”>
– Output:
• Turn an image into a hyerlink
– <a href=“http://www.iusb.edu”><img
src=“image.gif”></a>
– Output:
57. Image Size
• Computer images are made up of “pixels”
• <IMG HEIGHT=“100" WIDTH=“150"
SRC=“flag.gif">
Width
Height
