Web Design

1
Web Design

• USING HTML

2
web

• Client and Sever system
• ? ?
• A BROWSER is necessary for accessing the
  web.
• How Client and Server communicate?

Server
Client
3
Language of Web

• HTTP
• HyperText Transfer Protoclo
• All web clients and servers must be able to speak
  http in order to send and receive hypermedia
  documents.
• HTML
• HyperText Markup Language
• Web uses html for creating and recognizing
  hypermedia documents.

4
What is HTML?

• HTML Documents are standard 7-bit ASCII files
  with formatting codes that contain information
  about layout and hyperlinks.
• HTML-formatted documents allow images and
  hyperlinks to be displayed in documents.

5
HTML and displayable documents.

• An HTMl doc.
• This is a hyperlink.

• What you see on a monitor
• This is a Hyperlink.

6
World Wide Web

• WWW servers are typically named with a www at the
  beginning of the Network address.
• E.g http//www.bu.edu/picure.gif
• This will retrieve a picture.

7
In 2 ways browser Renders Text

• Semantic Based style type
• HTML tags indicate the content of the text.
• Syntactic Base style type
• Allow you to tell the browser specifically how
  you want the text to appear.

8
Examples

• Semantic
• Emphasis
• meet me to night, it is important.
• Strong
• Ich liebe Juliet, Deine, Romeo
• Syntactic
• Bold
• meet me to night
• Italic
• When I met you my life enhanced

9
Background Color and Tiling

• Two attributes to the body tag, which allow you
  to add color or image to the background of your
  webpage.
• 1) BGCOLOR
• syntax
• 2) BACKGROUND
• syntax

10
Using HTML to write a WebPages

• Tags are Sets of commands
• Tags begin with abreviation of formating, and ends with
• e.g
• Tags end with the same name as starting tag,
  preceded by slash /
• e.g

11
Document Tags

• Tags come in pair
• Example
• tells that document has html code
• defines the head section, and contains the
  pair of title tags
• provides the title for the page /title
• contains the entire content of the webpage
  

12
HTML Structure

• cs101 webpage
• All the texts and images here

13
Some HTML Tags

• heading, where x is 1 through 6.
• As the number increases the size of the text
  decreases
• e.g My name
• Displays on monitor My name
• My name
• Displays on monitor My name
• My name
• Displays on monitor My name

14
Some HTML Tags cont..

• use it to start a paragraph. This tag
  doesnt have end tag
• Or separate paragraphs. Example,
• This is one paragraph.
• - This is second paragraph.
• Output
• This is one paragraph.
• This is second paragraph.

15
Some HTML Tags cont..

• 
  Break to a new line. It has no ending tag.
• Example
• Rose are Read,
  Violets are blue,
  I enjoy
  writing HTML
  
• Output
• Roses are Red,
• Violets are blue,
• I enjoy writing HTML

16
Some HTML Tags cont..

• .. use it to Emphasize.
• He couldnt emphasize on.
• Output
• He couldnt emphasize on.
• ..
• I strongly disagree.
• Output
• I Strongly disagree.

17
Some HTML Tags cont..

• ... for italicizing text
• .. for bolding text
• Center text horizontally.
• CS101
• Output
• CS101
• Horizontal rule. This insert a separator
  line in your page.

18
Some HTML Tags cont..

• Unordered List (UL)
• • .
  • .
  • .
• LI is for list Item
• Example
• • Pick up mail.
  • Walk LingLing.
  • Feed the cat.
  • Go Shopping
• Output next slide

19
Unordered List (UL)

• Output on Monitor
• Pick up mail.
• Walk LingLing.
• Feed the cat.
• Go Shopping

20
Some HTML Tags cont..

• Ordered List (OL)
• LI is for List Item
• 1. ..
  3. ...
  4. ...
  6. call the dog
  8. Attach the leash to the dogs collar
  10. Walk the dog
  12. Return home
• Output next slide

21
Ordered List (OL)

• Output list
• 1. call the dog
• 2. Attach the leash to the dogs collar
• 3. Walk the dog
• 4. Return home

22
Definition List (DL)

• Definition List ..
• has two parts
• Definition Term
• Definition Data
• ..
• Example next slide

23
Definition List (DL)

• summer
• Hot Weather
• Winter
• Cold Weather
• Fall
• Warm and Cold Weather
• Output next slide

24
Definition List (DL)

• Output
• Summer
• Hot weather
• Winter
• Cold weather
• Fall
• Hot and Cold weather

25
Nested list

• To nest different lists within one another
  2. Cook book
  4. Wash veggies
  5. • Sun ray cause
     • 2. headache
       4. Mexican hat

26
Hyperlink states

• Hyperlink Color depends on the current state of
  the hyperlink.
• LINK Unvisited Hyperlink. The color assigned to
  LINK sets the color for all unvisited hyperlink
  in HTML.

27
Hyperlink states cont.

• VLINK visited Hyperlinks. The color value
  assigned to VLINK sets the color for all
  unvisited hyperlinks.
• ALINK Active Hyperlink, shows that the user has
  moused over the hyperlink, and depressed the
  mouse button on.

28
Example of links

• Text FF0000 //red
• LINK 808080 //gray
• VLINK FFA500 //orange
• ALINK 800080 // purple

29
HTML FONT MANIPULATION

• ..
• e.g Welcome my friend.
• Output
• Welcome my friend.
• Dog
• Output
• Dog
• Dog

30
Linking to other Pages

• You must know the URL for other webpage
• Start and end anchor tag is necessary
• The text need to be click,here
• Anchor allows you to link to other pages by
  clicking on some underlined text.
• Example
• Click on text

31
FONT combinatorial elements

• You can also put the color, size, and face
  together and make your strings or character look
  fancier.
• e.g
• 
  welcome every body.
• Output
• Welcome every body

32
Linking to other Pages

• Example
• B.U. computer
  Science
• Output
• B.U. computer Science

33
In_Line Images

• Image Tag
• Example

34
In_Line Images cont.

• img_file Height 90
  width 60
• Height and width are measured in pixels.

35
Images and Text Alignment

• For positioning an Image in a line with respect
  to the text use
• baseline or bottom this is the default.
• middle Aligns the middle of the image with the
  baseline.
• texttop aligns the top of the image with the
  highest point of the text in the line.
• Example next
  slide

36
Images and Text Alignment

• Alt My horse Height
  90 width 60

37
Images and Text Alignment

• Horse is aligned on the top

38
Images and Text Alignment

• Horse is aligned in the middle

39
HTM TABLE

• For the following situation you may need table
• Present tabular information days of a week.
• Control layout to control the layout of the
  text, position a group of images and so on
• Express relationships to express the
  relationship of a group of items

40
HTML Table Tags

• 3 important components
• ..
• Creates table
• ..
• Table row
• ..
• Table Data

41
HTML Table Tags

• Business
• B-
• Accounting
• B
• CS101
• A-
• German
• C

42
Table output

• With table border
• CELLSPACING
• CELL PADDIG

43
Table headers

• Header Tag is
• Table Header can be used in conjunction to other
  table elements.
• Table Headers are boldface and centered.
• E.g

44
Example

• Fall Spring
• Business
• B-
• Accounting
• B
• CS101
• A-
• German
• C

45
Table header Example