Scribd
Upload
86 views

Basic Web Development

Uploaded by

lorena
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
86 views

Basic Web Development

Uploaded by

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

Basic web developmen

t
CONTENTS
Getting Started..

What is HTML?
How to create and View an HTML document?
Basic HTML Document Format
The HTML Basic tags
HTML Tags Attributes
Creating sample website

2
IMPORTANT TERMS:

 Web Server: a system on the internet containi


ng one or more web site
 Website: a collection of one or more web page
s
 Web pages: single disk file with a single file na
me
 Homepage: first page in website
GUIDELINES IN CREATING WEBSITE
1. Think about the sort of information(content) y
ou want to put on the Web.
2. Set the goals for the Website.
3. Organize your content into main topics.
4. Come up with a general structure for pages a
nd topics.

4
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
It tells the browser what to do, and what properties
to use.
A series of tags that are integrated into a text docu
ment.

5
HTML Tags
Tags are ;
 surrounded with angle brackets like this
 <B> or <I>.

 Most tags come in pairs (paired tags)


 exceptions: <hr>, <br>, <li> tags … (empty tags)

 The first tag turns the action on, and the second turns
it off.

6
 The second tag(off switch) starts with a forward slash.
 For example ,<B> text </B>
 It is not case sensitive.
 <html> or <HTML> or <hTmL>
 Many tags have attributes. Attributes are additional informatio
n used to modify or enhance an element.
 For example, <P ALIGN=“CENTER”> centers the parag
raph following it.
 Note: The value assigned to an attribute may be enclos
ed in either single quotes or double quotes.
 It follows the “first in, last out” rule
 <HEAD><TITLE> Your text </HEAD></TITLE> it won't
work.
 The correct order is <HEAD><TITLE> Your text </TITL
E></HEAD>
 Some browsers don't support some tags and some attributes.
7
Basic HTML Document Format

<HTML>
<HTML> See what it
<HEAD>
<HEAD> looks like:
<TITLE>WENT'99</TITLE>
<TITLE>WENT'99</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
Went'99
Went'99
</BODY>
</BODY>
</HTML>
</HTML>

8
How to Create and View an HTML document?

1.Use any text editor such as Notepad to write the docu


ment.
2.Save the file as filename.html on a PC. This is called t
he Document Source.
3.Open IE (or any browser) Off-Line
4.Click on File, Open File and select the filename.html d
ocument that you just created.
5.Your HTML page should now appear just like any other
Web page in your browser.

9
7.You may now switch back and forth between the S
ource and the HTML Document
 switch to Notepad with the Document Source
 make changes
 save the document again
 switch back to your browser
 click on RELOAD and view the new HTML Document
 switch to Notepad with the Document Source......

10
TAGS IN HEAD

<HTML>...</HTML> is used to indicate that th


e document is an html file. It is placed at the b
eginning and at the end of the file.
<HEAD>...</HEAD> contains information abo
ut the document.
 <TITLE>...</TITLE> puts text on the browse
r's title bar.
<BODY>...</BODY> delimits the beginning a
nd end of the body section of the document. It
contains the document to be displayed on the
screen.
11
HTML Document Structure
<html>
<head>
<title> Page Title Goes Here </title>
</head>

<body>
content goes here
</body>
</html>
BODY ATTRIBUTES
 Bgcolor  Background
 Specifies a background-col  Specifies a background-im
or for a HTML page. age for a HTML page
<body bgcolor="#000000"> <body background="clouds
<body bgcolor="rgb(0,0, .gif">
0)"> <body bgcolor="blac <body background="http:/
k"> /www.w3schools.com/clou
ds.gif">
ENHANCING 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 excit
ed!
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
ENHANCING TEXT
Put text in bold
 <b>Hello</b>
 Output: Hello
Put text in italics
 <i>Hello</i>
 Output: Hello
Put text in underlined
 <u>Hello</u>
 Output: Hello
Font Attributes
 To change text size
 <font size=“+3”>Hello</font>
 Output: Hello
Tag attribute
 To change text color
 <font color=“red”>Hello</font>
 Output: Hello

 To change font face


 <font face=“arial”>Hello</font>
 Output: Hello

 Using all
 <font size=“+3” color=“red” face=“arial”> >Hello</font>
 Output: Hello
 To insert line break
 <br>

 To mark a block of text as a paragraph


 <p> sentences </p>

 To enclosed text to be displayed in a predetermined width


 <pre> sentences </pre>

 To draw a horizontal line across the screen


 <hr>

 To create a scrolling text message within a document


 <marquee> word </marquee>
 <marquee behavior=“scroll,slide,alternate”>
 <marquee direction=“up,down,left,right”>
 <marquee bgcolor=“red> 17
Commonly Used Character Entities
Result Description Entity Name
Non-breaking space &nbsp;
< Less than &lt;
> Greater than &gt;
& Ampersand &amp;
“ Quotation mark &quot;
© Copyright &copy;
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>


Listing Items
Unordered list  Ordered list
 Code:  Code:
<ul> <ol>
<li>Coffee</li> <li> <li>Coffee</li> <l
Milk</li> i>Milk</li>
</ul> </ol>
 Output:  Output:
Coffee 1. Coffee
Milk 2. Milk
List Elements
TYPE Numbering Styles
1 Arabic numbers 1,2,3, ……
a Lower alpha a, b, c, ……
A Upper alpha A, B, C, ……
i Lower roman i, ii, iii, ……
I Upper roman I, II, III, ……
 <STRIKE> strike-through text</STRIKE>

 <BIG> places text in a big font</BIG>

 <SMALL> places text in a small font</SMALL>

 <SUB> places text in subscript position </SUB>

 <SUP> places text in superscript style </SUP>


Images
 <IMG>This element defines a graphic image on th
e page.

 Image File (SRC:source): This value will be a UR


L (location of the image) E.g. http://www.domain.
com/dir/file.jpg or /dir/file.jpg

 Alternate Text (ALT): This is a text field that desc


ribes an image or acts as a label. It is displayed whe
n they position the cursor over a graphic image.
Images
 Alignment (ALIGN): This allows you to align the image on
your page.

 Width (WIDTH): is the width of the image in pixels.

 Height (HEIGHT): is the height of the image in pixel


s.

 Border (BORDER): is for a border around the image,


specified in pixels.
HOW TO MAKE A LINK
The tags used to produce links are the <A> and </
A>.

The <A> tells where the link should start and the </
A> indicates where the link ends. Everything bet
ween these two will work as a link.

<A HREF="http://www.yahoo.com">Yahoo!/A>
Internal Links
Internal Links : Links can also be created inside large documents to si
mplify navigation. Today’s world wants to be able to get the info
rmation quickly. Internal links can help you meet these goals.
Select some text at a place in the document that you would like to cre
ate a link to, then add an anchor to link to like this:
<A NAME=“bookmark_name”></A>
The Name attribute of an anchor element specifies a location in
the document that we link to shortly. All NAME attributes in a d
ocument must be unique.
Next select the text that you would like to create as a link to the locati
on created above.
<A HREF=“#bookmark_name”>Go To Book Mark</A>
E-Mail (Electronic Mail)
mailto:kmf@yahoo.com

 The type of service is identified as the mail client p


rogram. This type of link will launch the users mail
client.

 The recipient of the message is kmf@yahoo.com


<A HREF=“mailto:kmf@yahoo.com”> Contact Us </
A>

You might also like