Scribd
Upload
43 views

WEB Development PDF

Uploaded by

Marck
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
43 views

WEB Development PDF

Uploaded by

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

• In 1989, Tim Berners-

Lee (at the Right side)


and Robert Calliau (at
the Left side)
conducted a research
to progress their
process for handling
hundreds of research
documents
• Over the next two years, Berners-Lee
developed a compilation of tags that
describe how a document should look
when displayed in a browser.
• In 1994, Tim Berners-Lee founded the World
Wide Web Consortium in an effort to
encourage the universality and
interoperability of HTML and to promote an
open forum for discussion among Web
developers.
<html>

<Head>
<title>
Head tag Title of the page Title tag
</title>

HTML tag <Head>

<body>

Content of the page


Body tag
</body>
</HTML>
• THE <HTML> ELEMENT . . . </HTML>
• <html> begins and ends each and every
web page.
• To do this:
1. Open up Notepad or Crimson Editor and
have a new blank document. Copy the
following HTML code into the text editor.
 Syntax:
3. Save the file by selecting Menu and then
Save. Click on the "Save as Type" drop-
down box and select the option "All Files".
4. Name the file "index.html" (without the
quotes).
5. Double check everything is encoded
correctly and then press save.
6. Open the file in a new web browser to see
the output. The user will now have the
ability to refresh the page so as to see the
changes.
• Note: Upon opening the index.html
document, the very first blank (white) web
page is expected to appear!
• The <head> element is placed within the
html tags before the body element (to be
discussed on the latter part of this lesson).
• THE <Title> ELEMENT
1. Place the <title> tag within the <head>
element to include title on the page. The
words written between the opening and
closing <title></title> tags will be
displayed at the top of a viewer's browser
• output
2. Save the file and open it in the browser.
“The Ultimate Web Page!" in the upper-
left, as the window title will be displayed.
3. Name the created webpage as desired.
Users just have to keep in mind that the
best titles are brief and descriptive.
• THE <Body> ELEMENT
• The <body> element is the “meat” of the
HTML program because this is where all
website contents are placed (paragraphs,
pictures, tables, etc
1. Sections must be separated with spaces.
2. Titles must be meaningful.
3. Content and presentation must be
separate.
4. Heading elements must be used wisely.
5. Suitable HTML tag is a must.
6. Tags must be closed except n few (i.e.
images).
7. Though not case sensitive, lower case
markup is the industry standard.
8. Code validation is important.
9. Formatted code should be consistent.
10. Excessive comments are strongly
discouraged
• To write an HTML code, the user does not
need a high-powered program at all. In fact,
a Microsoft Windows user can utilize
Notepad to write the HTML script. For
LINUX, it can turn to Vi or Pico.
1. Open a text Editor. For this exercise,
Notepad will be used.
2. Copy the following text. Take note of the
HTML, HEAD and BODY container tags.
3. Save the file as webdev.html.
• NOTE: When saving a HTML file, always
change the file type to : All files before
pressing the save button.
4. Open the testpage.html document in a
browser (in this case, Google Chrome is used).
• These are the three important container tags in an
HTML document.

1. HTML TAG identifies the file as HTML code


so that it could be made known by other
applications across the Internet.
2. HEAD TAG provides information about the
URL of a webpage. Under the head section
is the TITLE TAG wherein the user can
declare the desired label to appear on the
title bar of the webpage.
3. BODY SECTION contains the bulk of
content of the web page, including all
texts, graphics, links, forms, tables, and
formatting.
<HTML>
<head>

HEAD <title> </title>

</head>

HTML
<body>

BODY

</body
</HTML>
• HTML Tags hold certain characteristics that
when declared can improve the look of the
web page.
• Background is an attribute that supports
the visual impact of the web page contents.
It can be a color or an image. The attribute
background is for the background image
while bgcolor is for background color.
• For background image:

or

• The default alignment of the images is at the


top left corner of the web page where the
background is applied.
• bgcolor– specifies the background color of the
page
• Learning Point
• GIF images are more commonly used image
format in web pages than JPEG (Joint
Photographic Experts Group) format
because of its smaller size.
• In adding background color, the text
content must complement by the
background color so viewers will not get
annoyed when browsing on webpage.
• Background images and colors are used just
to give excitement to the viewer, content of
the page is the most important thing to
consider.
• Web Browsers supports a wide range of
colors that can be used as background.
Web Colors are discussed at Lesson 7 of this
unit.
Attribute Description Example
Text specifies the color of the text in a <body text=”white”>
document
Link specifies the default color of unvisited <body link=”red”>
links in a document

Vlink specifies the color of visited links in a <body vlink=”cyan”>


document

Alink specifies the color of an active link in a <body


document (a link is activated when it is alink=”magenta”>
clicked)
KEEP IN MIND

HTML scripts are not case sensitive. <HTML>


is the same as <html> and <HTML> …
</html> is allowed. It is best to use only one
format so as not to create confusion. But the
W3 consortium uses lowercase as a standard.
• White space in HTML is handled differently
than it's handled in word processors. Web
browsers "condense" white space in HTML.
This means that when a Web page
interprets HTML it will display one space ("
") exactly the same as multiple spaces (" ").
• Sample output
Headings
• There are six levels of headings and
browsers generally show a different font
size for each level. With these, varied
heading sizes create a hierarchy of
information.
Attributes Definition Possible Values

Specifies the alignment of the text


Align Left, right, center, justify
inside the heading.

Is a text that appears when the


Title Any text
mouse passes over the heading
• Sample Output
IN MIND!
The smaller the heading level
number, the larger is the print size.
• Paragraphs
• Paragraphs are divided whether by an
explicit paragraph break tag <p> or by
paragraph style command. The paragraph
style determines both the font used by the
paragraph and any special indention.
• Paragraph tag format: <p> . . . </p>
Attributes Definition Possible Values

Specifies the alignment of


Align Left, right, center, justify
the text inside the heading.

Assigns the format of the


Title paragraph: background, (later chapter)
color, font

class, id, style For CSS (later chapter) (later chapter)


• Sample Output

• Note: All white spaces are ignored by the


browser.
• Line Break
– If Line Breaks (new line) are significant, as in the
case of postal addresses or poetry, in HTML, it
uses the <br> command to place a line break
(sort of pressing Enter). Subsequent texts will
be displayed one line down, starting on the left
margin.
• Break Tag Format: <br>
– The extended form of the <br> tag allows you
to control how text is wrapped.
– The <br> command causes a line break within a
paragraph.
• Sample Output
• Comments
• Comments can be placed in HTML documents
using a special tag as shown:
• Everything between the “<>” will be
ignored by a browser when the document is
displayed
Note: Comments are not displayed in
the browser but in the HTML code,
they still exist. Comments are useful
when making notes in HTML
document.
• Horizontal Rule
– The <hr> tag is an empty tag and does
not require a closing element for
functioning. Horizontal rules insert a
paragraph break before and after the
line.
Attributes Definition Possible Values
Specifies the alignment of the text
Align Left, right, center
inside the paragraph
Size
Assigns the size, in pixels of the line Pixels

Is the width or span of the line in


Width Pixels
pixels or % width of the browser
Removes the default shading in the
Noshade line which the browsers adds by (none)
default
Color name (RGB or
Color Specifies the color of the line Hexadecimal color value
i.e. 000000)
class, id, style For CSS (later chapter) (later chapter)
• size = "pixels" ~ Using the size
attribute in the <hr> tag, HTML
encoder can specify the height of the
horizontal rule in pixels. The number of
pixels desired for the height is used as
the value. Hence a size = "5" attribute-
value pair will draw a horizontal rule 5
pixels in height. The default height is 2
pixels.
• width= "pixels or percentage" ~ Using the
width attribute allows encoders to explicitly
set the width of the horizontal rule.
• align="left, center or right" ~ Assuming that
the horizontal rule does not span or outsize
the available space on web page (see
above), encoders can use the align attribute
to position it to the left, in the center or to
the right on the web page.
• color="color definition" ~ Although
officially not listed in the HTML 4.01
Specification as an attribute-value pair to
be used with the hr element, you can
actually define the color of your horizontal
rule using the color attribute and any legal
color definition as the value.
• Noshade. They just simply place noshade in
your <hr> tag to draw rules as one solid
gray color (unless otherwise defined by the
color attribute), e.g. <hr noshade>.
• Sample Output
• Text Formatting
• Computer Output Tags
• Citations, Quotations and Definition Tags
• Image Tag and Attributes
• HTML uses tags such as <b> and <i> for
formatting output, like bold or italic text. These
HTML tags are called formatting tags.
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
• Nesting Tags
• To combine the effects of one type of tag
with another, simply enclose the container
tag in another container tag.
Strong Strong

This contains <i> <strong> italic and strong </strong> </i> text

Italic Italic

• Output: This contains italics and strong text.


Attributes Definition Possible Values
name gives an image file a name Any string
URL(Uniform Resource Locator) or
src specific location of the image file
absolute path
displays an alternate text if the image
alt Any string
doesn’t load

defines the image width; if the image is


width scaled to fit the actual image width will Integer value in percent (%)
not be shown

right – right align image.


left – left align image.
left and right –image wrap, text
align defines text alignment
around the image.
top, middle, bottom, baseline –
vertical alignment of the image.
default value is 0, set the width of the
border border that surrounds the image; link Any integer
images have borders that surround them

defines the vertical space between the


vspace edge of the image to the items above and Integer of pixels (px)
below it
defines the horizontal space between the
hspace edges of the image to the items on right Integer or pixels (px)
or left side of it
sets the height of the image; if the height
height specified is not the actual height, the Integer Value in percent (%)
image is scaled to fit

loads a low resolution image before the URL, relative or absolute path of the
lowsrc
image specified by the src attribute low resolution image
• Image Formats and Sources
• JPEG (Joint
Photographic Experts
Group) - primarily
intentional for
photographic images
with its support for
16.7 million colors.
• GIF (Graphics Interchange
Format) - supports a
maximum of 256 colors,
which makes them
convenient for almost all
graphics except
photographs. It is also the
only choice for putting
animation online.
• PNG (Portable Network
Graphics) - designed to
present the main features
of the GIF format
including streaming and
progressive file formats.
It also supplies greater
depth of color, catering
to images up to 24 bit in
color.
• BMP (Bitmap Image) - In
computer graphics, a
bitmap or pixmap is a type
of memory organization or
image file format used to
stockpile digital images.
• These image formats have different file
sizes depending on their resolution
and compression type. Therefore one
must consider the connection speed of
the user because the more images, the
more it take much time downloading
the web page.
Note: Alt cannot be displayed in the
web browser; it will only become visible
when the image is broken. It only shows
the name of the image typed in the alt
attribute.
• Where to Get Images for Webpage?
• If you have seen something on someone's
page that you really like, the users have to
ask permission to use it.
• As IT students, it is a must to determine if
the available pictures are for free or with a
fee. This is a must to avoid violations
against the copyright laws
• Review the Code:
• In HTML, images are defined with the <img>
tag. The <img> tag is empty, which means that
it contains attributes only and it has no closing
tag.
• Src stands for "source". To display an image on
a page, the encoder needs to type in the src
attribute. The value of the src attribute is the
URL of the image desired to be displayed on
the page.
• Alt attribute is used to define an "alternate
text" for an image. The "alt" attribute tells the
reader what he or she is missing on a page if
the browser can not load images. The browser
will then display the alternate text instead of
the image.
• It is a good practice to include the "alt"
attribute for each image on a page, to improve
the display and usefulness of your document
for people who have text-only browsers.
• List Tags and Its Attributes
• Table Tags
• Table Attributes
• HTML also features tags used for itemizing
or giving details with the use of list tags.
Two types of these tags are actually
equivalent of bullets and numberings in MS
Office
• Ordered List – is equivalent to the
numbering feature of MS Office. Its list
items are marked with numbers or
letters. This is appropriate list type in
itemizing anything that has something
to do with sequences, steps,
chronology or hierarchy.
<ol> - Designates the start of an ordered list.
<li> - Designates an item in the list.
</li> - Closing tag for every list item.
</ol> - Designates the end of an ordered list.
Attributes Description Value
1 – use for the regular
numbering
A – use for uppercase
alphabet
sets the type of numbering to label
type a - use for lowercase alphabet
item
I – use for uppercase Roman
Numeral
i – use for lower case Roman
Numeral
deprecated: use styles instead
specifies the starting point in a list
Any numbers, letters or
start Ex:: <ol type=”I” start=”III”>
Roman Numerals
Will start numbering from III instead
of I.
• Sample Program
• Unordered List Tag - is equivalent to
the bullets feature of MS Office. Its list
items are marked with special symbols.
• <ul> - Designates the start of an
unordered list.
• <li> - Designates an item in the list.
• </li> - Closing tag for every list item.
• </ul> - Designates the end of an
unordered list.
Attributes Description Value

disc – solid-shaded
Deprecated. Use styles bullets
instead.
circle – circular/hole
type Specifies the style of
bullets
the bullet points of the
list items square – dark square
bullets
• Sample Program
• Output
• Definition List Tag - a definition list is
not a list of single items. It is a list of
items with a description of each item
(term).
• <dl> - designates the start of definition list.
• </dl> - designates the end of definition list.
• <dt> - This specifies the term to be defined,
and has no closing tag (definition term).
• <dd> - This specifies the definition and has
no closing tag (definition description).
• Sample program
• Output
• The TABLE element characterizes a grid for
multi-dimensional data arranged in rows
and columns.
• The TABLE may contain a number of
optional elements to provide a rich
structure to the table. Here as follows:
• The optional caption element provides a
caption for the table and is followed by
optional col and colgroup elements that
specify column widths and groupings.
• The thead, tfoot, and tbody elements then
follow with groups of rows. The optional
thead and tfoot elements include header
and footer rows, respectively; and
• tbody elements supply the table's main row
groups. A row group contains tr elements
for individual rows, and each tr contains th
or td elements for header cells or data cells,
respectively.
• The process of creating an HTML table is
similar to the process that you used to
create your web page and any elements
that you may have already included in your
page such as links or frames. Coding HTML
tables into your web page is fairly easy
since you need only understand a few basic
table codes.
• Tables are defined with the <table> tag. A
table is separated into rows (with the <tr>
tag), and each row is divided into data cells
(with the <td> tag). The letters td stands for
"table data," which is the content of a data
cell. A data cell can contain text, images,
lists, paragraphs, forms, horizontal rules,
tables, etc
• Sample Output
1. Table tag
Attributes Description Value

Alignment of caption in a table.


There are only four acceptable values:
1. ALIGN=TOP puts the caption on top of the table
Align Top, left, right, center
2. ALIGN=BOTTOM put it below.
3. ALIGN=LEFT puts the caption on top to the left.
4. ALIGN=RIGHT puts it on top to the right.

Creates an image background within the table area.


background Small images are automatically tiled to cover the URL of the image
whole table area.
#RRGGBB color value
bgcolor Sets the background color of the table. or common color
name
Any positive
Borders are set with an unintuitive set of integer or, 0 if you
border
attributes. want your table to
have no border
#FFFFFF color
Sets the color of the borders around the
bordercolor value or common
frame.
color name
Sets the amount of space (both horizontal and
cellpadding vertical) between the cell borders and the Number of pixels
contents.
Sets the amount of spaces between the cells
cellspacing Number of pixels
of a table.
This attribute explicitly specifies the width of
Width Positive integers
this block element in pixels.
2. Caption Tag
• The caption element is an optional table
component which displays a caption/title
for the table directly above, below or to
either side of the table. The caption
element is contained within the TABLE
element, but is used at the same level as the
table row element [TR] is.
<caption align = ”value” > - start tag
</caption> - end tag

Attributes Definition Possible Values

Specifies the alignment of the bottom, left, right,


align
caption relative to the table. top, center, middle
• Table Row Tag
• The <table> tag defines an HTML table.
• A simple HTML table is comprised of the
table element and one or more tr, th and td
elements.
• The tr element defines a table row, the th
element defines a table header, and the td
element defines a table cell.
Attributes Description Values

Specifies the alignment of a table


Align left, right, center
according to surrounding text
Specifies the background color for a
Bgcolor top, middle, bottom
table

% relative to the table


width Specifies the width of a table
width or number of pixels

Sets the vertical alignment of the row


rgb(x,x,x)
valign contents
#xxxxxx, Colorname
• Table Header Tag

• The contents in the table are made visible


in these cells.
Attributes Description Values

specifies the position of the table


align with respect to the document; this left, right, center
works the same as the ALIGN
parameter for images

sets the vertical alignment of the


valign contents of the cell; overrides top, middle, bottom
previously set vertical alignment

background specifies
the cell
the background image of URL of the image

colors the table background just as #RRGGBB color value or


bgcolor it would when used with the common color name
<BODY> tag
height specifies the cell height Number of pixels

nowrap % - relative to the table


avoids word wrapping within a cell width or number of
pixels

specifies the width of the table in % relative to the table


width absolute pixels or as a percentage of width or number of
the available space pixels

Number of columns
colspan merge multiple columns from the cell, to the
right

rowspan Merges multiple rows Number of columns


from the cell, down
• Table Border’s Attribute
• Without specifying a border attribute, the
table will be displayed without any borders.
Though this is acceptable, most users prefer
to show the borders. To display a table with
borders, the HTML encoder will have to use
the border attribute:
• Sample Output
• Headings in a Table
• Headings in a table are defined with the
<th> tag.
• Headings in a Table
• Headings in a table are defined with the
<th> tag.
• Empty Cells in a Table
• Table cells with no content are not
displayed very well in most browsers.
Note: Borders around the empty table cell
are missing (NB! Mozilla Firefox displays the
border). To avoid this, add a non-breaking
space (&nbsp;) to empty data cells, to make
the borders visible:
• Sample Output

You might also like