Sunteți pe pagina 1din 80

Introduction to Internet Programming

(INSY3081)
Wolkite University
College of Computing and Informatics
Information System

Mayet G.
Mayet.Gizachew@wku.edu.et

1
HTML
• General concepts of Web design
• Basics of HTML
• HTML tags and their attributes
• Text formatting with HTML & background changing
• Forms in HTML
• Tables in HTML
• HTML frames implementations, pros and cons

2
General concepts of Web design
what you see
• When you are looking at a website, it is most likely that your browser
will be receiving HTML and CSS from the web server that hosts the
site. The web browser interprets the HTML and CSS code to create
the page that you see.
• Most web pages also include extra content such as images, audio,
video, or animations and this book will teach you how to prepare
them for use on the web and then how to insert them into your web
pages.

3
• We come across all kinds of documents every day of our lives.
Newspapers, insurance forms, shop catalogues... the list goes on.
Many web pages act like electronic versions of these documents.
• In all kinds of documents, structure is very important in helping
readers to understand the messages you are trying to convey and to
navigate around the document.
• So, in order to learn how to write web pages, it is very important to
understand how to structure documents.

4
• Think about the stories you read in a newspaper: for each story, there
will be a headline, some text, and possibly some images. Structure
helps readers understand the stories in the newspaper.
• In the browser window you can see a web page that features exactly
the same content as the Word document you met on the news paper
page. To describe the structure of a web page, we add code to the
words we want to appear on the page.

5
HTML
• General concepts of Web design
• Basics of HTML
• HTML tags and their attributes
• Text formatting with HTML & background changing
• HTML frames implementations, pros and cons
• Tables in HTML
• Forms in HTML

6
What is HTML?
• HTML stands for Hyper Text Markup Language, is the language used
to create Web pages
• Using HTML, you can create a Web page with text, graphics, sound,
and video

7
• The HTML code is made up of characters that live inside angled
brackets — these are called HTML elements.
• Elements are usually made up of two tags: an opening tag and a
closing tag. (The closing tag has an extra forward slash in it.)
• Each HTML element tells the browser something about the
information that sits between its opening and closing tags.

8
• html uses elements to describe the structure of pages

9
10
• In the case of HTML, markup instructions found within a Web page
relay the structure of the document to the browser software.
• Therefore, an HTML document is simply a text file that contains the
information you want to publish and
• Appropriate markup instructions indicating how the browser should structure
or present the document

11
• Therefore, an HTML document is simply a text file that contains the
information you want to publish and
• Appropriate markup instructions indicating how the browser should structure
or present the document

12
HTML
• General concepts of Web design
• Basics of HTML
• HTML tags and their attributes
• Text formatting with HTML & background changing
• HTML frames implementations, pros and cons
• Tables in HTML
• Forms in HTML

13
• The essence of HTML programming is tags
• A tag is a keyword enclosed by angle brackets
• Example: <i>
• There are opening and closing tags for many but not all tags;
• The affected text is between the two tags
• The <HR> element causes the browser to display a horizontal
line (rule) in your document.
• <HR> does not use a closing tag, </HR>
• Not case sensitive
• <TITLE> = <title> = <TITLE>
14
• The opening and closing tags use the same command except the
closing tag contains and additional forward slash /
• For example, the expression <B> Warning </B> would cause the word
‘Warning’ to appear in bold face on a Web page
Nested Tags
• Whenever you have HTML tags within other HTML tags, you must
close the nearest tag first
• Example:
• <h1> <i> The Nation </i> </h1>

15
Structure of a Web Page

• All Web pages share a <HTML>


<HEAD>
common structure <TITLE> Example </TITLE>
• All Web pages should contain a </HEAD>
pair of <HTML>, <HEAD>, <BODY>
<TITLE>, and <BODY> tags This is where you would include the text and
images on your Web page.
</BODY>
</HTML>

16
<title> tag
 Choose the title of your Web page carefully;
 The title of a Web page determines its ranking in certain
search engines
 The title will also appear on Favorite lists, history
lists, and Bookmark lists to identify your page

17
HTML
• General concepts of Web design
• Basics of HTML
• HTML tags and their attributes
• Text formatting with HTML & background changing
• HTML frames implementations, pros and cons
• Tables in HTML
• Forms in HTML

18
Text Formatting Tags
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line

19
Changing Font
 The expression <FONT FACE = “fontname”> …
</FONT> can be used to change the font of the
enclosed text
 To change the size of text use the expression <FONT
SIZE=n> …. </FONT> where n is a number between
1 and 7

20
Changing Font
 To change the color, use <FONT COLOR=“red”>….
</FONT>; The color can also be defined using
hexadecimal representation ( Example: #ffffff )
 These attributes can be combined to change the
font, size, and color of the text all at once; For
example, <FONT SIZE=4 FACE=“Courier”
COLOR=“red”> …. </FONT>

21
Headings
 Web pages are typically organized into sections with
headings;
 To create a heading use the expression <Hn>….</Hn> where
n is a number between 1 and 7
 In this case, 1 corresponds to the largest size heading
while 7 corresponds to the smallest size

22
Aligning Text
 The ALIGN attribute can be inserted in the <P> and
<Hn> tags to right justify, center, or left justify the text
 For example, <H1 ALIGN=CENTER> The New York
Times </H1> would create a centered heading of the
largest size

23
Comment Statements
 Comment statements are notes in the HTML code that
explain the important features of the code
 The comments do not appear on the Web page itself but
are a useful reference to the author of the page and
other programmers
 To create a comment statement use the
 <!-- …. --> tags

24
Page Formatting
 To define the background color, use the BGCOLOR
attribute in the <BODY> tag
 To define the text color, use the TEXT attribute in the
<BODY> tag
 To define the size of the text, type <BASEFONT
SIZE=n>

25
Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and images on your Web page.
</BODY>
</HTML>

26
Inserting Images
 Type <IMG SRC = “image.ext”>, where image.ext
indicates the location of the image file
 The WIDTH=n and HEIGHT=n attributes can be used
to adjust the size of an image
 The attribute BORDER=n can be used to add a border n
pixels thick around the image

27
Alternate Text
 Some browsers don’t support images.
• In this case, the ALT attribute can be used to create text that
appears instead of the image.
 Example:
<IMG SRC=“satellite.jpg” ALT = “Picture of
satellite”>

28
Links
 A link lets you move from one page to another, play
movies and sound, send email, download files, and
more
 A link has three parts: a destination, a label, and a
target
 Targets allow you to specify the browser window where the
link destinations are to be displayed.
 To create a link type
<A HREF=“page.html”> label </A>

29
Anatomy of a Link
<A HREF=“page.html”> label </A>
 In the above link, “page.html” is the destination.
 The destination specifies the address of the Web page or file
the user will access when he/she clicks on the link.
 The label is the text that will appear underlined or
highlighted on the page

30
Example: Links
 To create a link to CNN, I would type:
<A HREF=“http://www.cnn.com”>CNN</A>
 To create a link to Wku, I would type:
<A HREF=“http://www.wku.edu.et”>Wku</A>

31
Changing Color of Links
 The LINK, VLINK, and ALINK attributes can be
inserted in the <BODY> tag to define the color of a
link
• LINK defines the color of links that have not been visited
• VLINK defines the color of links that have already been
visited
• ALINK defines the color of a link when a user clicks on it

32
Using Links to Send Email
 To create a link to an email address, type <A
HREF=“mailto:email_address”> Label</A>
 For example, to create a link to send email, we would
type: <A HREF=“mailto: ktdunn@mit.edu”>email
KtDunn</A>

33
Anchors
 Anchors enable a user to jump to a specific place on a
Web site
 Two steps are necessary to create an anchor.
 First you must create the anchor itself.
 Then you must create a link to the anchor from another point
in the document.

34
Anchors
 To create the anchor itself, type <A NAME=“anchor
name”>label</A> at the point in the Web page where
you want the user to jump to
• To create the link, type <A HREF=“#anchor
name”>label</A> at the point in the text where you
want the link to appear

35
Example: Anchor

<A HREF="#chap2">Chapter Two</A><BR>


Link

<A NAME="chap2">Chapter 2 </A> Anchor

36
Lists
Ordered lists :
• are lists where each item in the list is numbered. For example, the list
might be a set of steps for a recipe that must be performed in order, or a
legal contract where each point needs to be identified by a section number.
Unordered lists:
• are lists that begin with a bullet point (rather than characters that indicate
order).
Definition lists :
• are made up of a set of terms along with the definitions for each of those
terms.
37
Ordered Lists
 Ordered lists are a list
of numbered items.  Here’s how it would look on
 To create an ordered the Web:
list, type:
<OL>
<LI> This is step one.
<LI> This is step two.
<LI> This is step three.
</OL>

38
More Ordered Lists…
 The TYPE=x attribute allows you to change the type
of symbol that appears in the list.
 A is for capital letters
 a is for lowercase letters
 I is for capital roman numerals
 i is for lowercase roman numerals

39
Unordered Lists
 An unordered list is a list of
bulleted items  Here’s how it would look
 To create an unordered list, on the Web:
type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>

40
More Unordered Lists...
 The TYPE=shape attribute allows you to change the
type of bullet that appears
 circle- corresponds to an empty round bullet
 square- corresponds to a square bullet
 disc- corresponds to a solid round bullet; this is the default
value

41
Definition Lists
<dl>
• The definition list is created with the <dl> element and usually
consists of a series of terms and their definitions.
• Inside the <dl> element you will usually see pairs of <dt> and <dd>
elements.
<dt>
• This is used to contain the term being defined (the definition term).
<dd>
• This is used to contain the definition.
42
43
• Try nested Lists ?

44
HTML
• General concepts of Web design
• Basics of HTML
• HTML tags and their attributes
• Text formatting with HTML & background changing
• Forms in HTML
• HTML frames implementations, pros and cons
• Tables in HTML

45
Forms
Traditionally, the term 'form' has referred to a printed document
that contains spaces for you to fill in information.
HTML borrows the concept of a form to refer to different
elements that allow you to collect information from visitors to
your site.
Whether you are adding a simple search box to your website or
you need to create more complicated insurance applications,
HTML forms give you a set of elements to collect data from your
users. In this chapter you will learn:

46
Forms…
Form Controls
• There are several types of form controls that you can use to collect
information from visitors to your site.

ADDING TEXT:
• Text Input :Used for a single line of text such as email addresses and
names.

• Password input: Like a single line text box but it masks the characters
entered.
47
Forms…
• Text area (multi-line): For longer areas of text, such as messages and
comments.

MAKING CHOICES:
• Radio buttons: For use when a user must select one of a number of
options.

• Checkboxes: When a user can select and unselect one or more


options.

48
Forms…
• Drop-down boxes: When a user must pick one of a number of options
from a list.

SUBMITTING FORMS:
• Submit buttons To submit data from your form to another web page.

• Image buttons: Similar to submit buttons but they allow you to use an
image.

49
Forms…
• UPLOADING FILES:
File upload: Allows users to upload files (e.g. images) to a website.

50
Forms…
HOW FORMS WORK
• A user fills in a form and then presses a button to submit the
information to the server.
• The name of each form control is sent to the server along with the
value the user enters or selects.
• The server processes the information using a programming language
such as PHP, C#, VB.net, or Java. It may also store the information in a
database.
• The server creates a new page to send back to the browser based on
the information received.
51
Forms…

• There are two basic components of a Web form:


• Shell-the part that the user fills out, and
• The script which processes the information
• HTML tags are used to create the form shell.
• Using HTML you can create text boxes, radio buttons,
checkboxes, drop-down menus, and etc.

52
Example: Form

Text Box

Drop-down Menu
Radio Buttons
Checkboxes

Text Area

Reset Button
Submit Button
53
Form Shell

• A form shell has three important parts:


• the <FORM> tag, which includes the address of the
script which will process the form
• the form elements, like text boxes and radio buttons
• the submit button which triggers the script to send
the entered information to the server

54
Creating Shell
• To create a form shell, type <FORM METHOD=POST
ACTION=“script_url”> where “script_url” is the address of the
script
• Create the form elements then
• End with a closing </FORM> tag

55
Forms…
Text Box
• To create a text box, type <INPUT TYPE=“text” NAME=“name”
VALUE=“value” SIZE=n MAXLENGTH=n>
• The NAME, VALUE, SIZE, and MAXLENGTH attributes are
optional.
• NAME: used to identify the text box .
• VALUE: used to specify the text that will initially appear in the
text box.
• SIZE: used to define the size of the box in characters
• MAXLENGTH: used to define the maximum number of
characters that can be typed in the box
56
Forms…
Text Areas
• To create larger text areas, type <TEXTAREA NAME=“name”
ROWS=n1 COLS=n2 WRAP> Default Text </TEXTAREA>,
• where n1 is the height of the text box in rows and n2 is the
width of the text box in characters.
• The WRAP attribute causes the cursor to move automatically
to the next line as the user types

57
Forms…
Radio Buttons
• To create a radio button, type
<INPUT TYPE=“radio” NAME=“name”
VALUE=“data”>Label
• where “data” is the text that will be sent to the server if the
button is checked and “Label” is the text that identifies the
button to the user

58
Forms…
Checkboxes
• To create a checkbox, type
<INPUT TYPE=“checkbox” NAME=“name” VALUE=“value”>Label
• If you give a group of radio buttons or checkboxes the same
name, the user will only be able to select one button or box at
a time

59
Forms…
Drop-down Menus
• To create a drop-down menu, type
<SELECT NAME=“name” SIZE=n MULTIPLE>
<OPTION VALUE= “value”>Label
• In this case the SIZE attribute specifies the height of the menu
in lines and MULTIPLE allows users to select more than one
menu option

60
Forms…
Submit Button
• To create a submit button, type
<INPUT TYPE=“submit” NAME=“name”>
• If you would like the button to say something other than
submit, use the VALUE attribute
• For example,
<INPUT TYPE=“submit” VALUE=“Buy Now!”>

61
Forms…
Reset Button
• To create a reset button, type
<INPUT TYPE=“reset”>
• The VALUE attribute can be used in the same way to change
the text that appears on the button

62
HTML
• General concepts of Web design
• Basics of HTML
• HTML tags and their attributes
• Text formatting with HTML & background changing
• Forms in HTML
• Tables in HTML
• HTML frames implementations, pros and cons

63
Tables in HTML
How to create tables
When representing information in a table, you need to think in terms of
a grid made up of rows and columns (a bit like a spreadsheet).
A table represents information in a grid format. Examples of tables
include financial reports, TV schedules, and sports results.

64
Table structure
<table>: element is used to create a table. The contents of the table are
written out row by row.
<tr>: You indicate the start of each row using the opening <tr> tag. (The
tr stands for table row.)
• It is followed by one or more <td> elements (one for each cell in that
row).
• At the end of the row you use a closing </tr> tag.
<td>: Each cell of a table is represented using a <td> element. (The td
stands for table data.). At the end of each cell you use a closing </td>
tag.

65
Structure…
Table heading
<th>
• The <th> element is used just like the <td> element but its
purpose is to represent the heading for either a column or a
row. (The th stands for table heading.)
• Even if a cell has no content, you should still use a <td> or
<th> element to represent the presence of an empty cell
otherwise the table will not render correctly.

66
Spanning Columns
Sometimes you may need the entries in a table to stretch
across more than one column.
The colspan attribute can be used on a <th> or <td> element
and indicates how many columns that cell should run across.
<td colspan="2">element</td>

67
Spanning Rows
• You may also need entries in a table to stretch down across more
than one row.
• The rowspan attribute can be used on a <th> or <td> element to
indicate how many rows a cell should span down the table.
• <td rowspan="2">element</td>
Long Tables
• There are three elements that help distinguish between the main
content of the table and the first and last rows (which can contain
different content).
• These elements help people who use screen readers and also allow
you to style these sections in a different manner than the rest of the
table (as you will see when you learn about CSS).
68
Structure of Long Tables
<thead>
• The headings of the table should sit inside the <thead> element.
<tbody>
• The body should sit inside the <tbody> element.
<tfoot>
• The footer belongs inside the <tfoot> element.
• Reading assignment
• Width & spacing
• border & background

69
HTML
• General concepts of Web design
• Basics of HTML
• HTML tags and their attributes
• Text formatting with HTML & background changing
• Forms in HTML
• Tables in HTML
• HTML frames implementations, pros and cons

70
FRAMES…
• Frames divide a browser window into two or more document
windows, each displaying a different document, or a different part of
the same document.
• Frames in an HTML document can cause a web page to appear to be
divided into multiple, scrollable regions.
• For each frame, you can assign a name, a source document locator,
dimensions, border alignment and decorations, scroll and resize
behaviors, loading and unloading behavior, file and topic maps, and
style sheets.

71
Frame Document Structure
• Frames in HTML documents are created and controlled through the
structure of three element types: FRAMESET, FRAME and NOFRAMES.
• The structure of a frame-enabling HTML document type is similar to
usual HTML structure.
• The key difference in an HTML document type is that the BODY
container element is basically replaced by a FRAMESET container
element.
• A frame document contains a set of frames, each of which likely uses
the BODY element.
• Elements that might normally be placed in the BODY element should
not appear before the first FRAMESET element, or the FRAMESET will
be ignored. The FRAMESET tag has a matching end tag.
72
Frame Document Syntax
• Frame syntax is similar in scope and complexity to that used by tables, and has been designed to be
quickly processed by Internet client layout engines.
<HTML>
<HEAD>
</HEAD>
<FRAMESET rows="33%,33%,33%">
<FRAMESET cols="50%,50%">
<FRAME name="frame1">
<FRAME name="frame2">
</FRAMESET>
FRAME name="frame3">
<FRAME name="frame4">
</FRAMESET>
<BODY>
...contents to display in non-frame-capable user agent...
</BODY>
73
</HTML>
Frames…
FRAMESET Element
• A frameset divides the browser window into rectangular regions. Each
such region can be:
• A frame, which displays one document.
• Another frame set.
The rows and cols attributes
• These attributes may be blank, or may consist of a list of one or more
values separated by commas or spaces.
• Each such value determines the width (for columns) and height (for
rows) of the regions.

74
Frames…
Syntax of Value List
• Value: A simple numeric value is assumed to be a fixed size in pixels.
• Value%: This is a simple percentage value between 1 and 100. If the
total is greater than 100, all percentages are scaled down.
• value*: The value on this field is optional. A single '*' character is a
"relative-sized" frame and is interpreted as a request to give the
frame all remaining space.
• "2*,*" would give 2/3 of the space to the first frame, and 1/3 to the
second.
75
Frames…
The FRAME Element

• The FRAME element defines a single frame in a frameset. It has 7


possible attributes:
• SRC ="address", NAME="window_name", FRAMEBORDER="1|0",
• MARGINWIDTH="value", MARGINHEIGHT="value",
• SCROLLING="yes|no|auto", and NORESIZE.
• The FRAME tag is not a container so it has no matching end tag.

76
Reading assignment
• TARGET usage on an A or LINK element

77
Frames…
• The IFRAME element is very similar to the FRAME element but is
designed to be used in a BODY element instead of a FRAMESET. It
defines a frame which takes place in the document flow.
• IFRAME is a text level element, it does not cause a paragraph break.
Just like a FRAME, an IFRAME can be targeted, and navigated
independent of the parent document.
• The IFRAME element is a container. The end-tag is required.
• IFRAME does not have the attribute NORESIZE; an inline frame is not
resizable.

78
IFRAME Example
<BODY>
<P>This document contains an inline frame here <IFRAME
src="foo.html" width=400 height=500> that unfortunately your
user
agent doesn't support. Alternatively you can get the related
document
<a href="foo.html">here</a>.</IFRAME> That's all folks!
</BODY>

79
Reading assignment
• block elements
• inline elements
• grouping text & elements in a block
• grouping text & elements in elements
• information about your pages(<meta>)

80

S-ar putea să vă placă și