You are on page 1of 36

Web Programming

By Jang, Seoung-soo

HTML 8h FLASH.. 8h DATABASE(MS-SQL SERVER 2000) 8h ASP PROGRAMMING 8h

Concepts of Web
Internet
Server
Client TCP/IP

USERS
NOS DBMS DB DB LAN

HTML
(Hyper Text Markup Language)

Chungbuk Human Resources Development Institute


The Korea Chamber of Commerce and Industry By Jang, Seoung-soo

What HTML Is ?
HTML (Hyper Text Markup Language) is a computer language. Like other computer languages, it is used to create something. HTML has been designed to create one thing though, and that is web pages. HTML is relatively easy, compared to some other computer languages Also, anybody is able to create web pages using HTML, as long as they have internet access.

What HTML Does ?


The main purpose of HTML is to create web pages. Through a series of commands, known as HTML Tags, the writer creates their web site just by typing in text.

How HTML Works ?


HTML is made up of a series of tags, which are simallar to commands, telling the web browser what to do. These tags can be typed into any normal text editor such as Notepad or Edit-plus. when in the right order, form a web page. Writing HTML then is simply, writing tags.

What Tags Are ?


Tags are what makes up every HTML document. A tag has two symbols around it. The less than (<) and greater than (>) symbols. Then, between these two symbols are one or more words defining the tag. <TAGNAME> Hello World! </TAGNAME>

<HTML> Tag
The <HTML> tag goes at the very beginning and very end of the document. At the beginning is the starting HTML Tag <HTML>, and at the end is the closing HTML tag </HTML>. These tags tell the web browser which views the page, that this is an HTML document. Everything in your HTML document goes between these two tags. So far, your HTML document should look like this.

<HEAD> Tag
The <HEAD> tag goes right after the starting HTML tag. Both starting and ending <HEAD> tags are right after the starting HTML tag. Later, you will be putting information about your page between these two tags

<TITLE> Tag
The <TITLE> tag goes between the <HEAD> tags. Between the starting and ending <TITLE> tag, goes the name of your web page which will appear on Title bar on the top of the window.

<BODY> Tag
The starting <BODY> tag goes right after the closing <HEAD> tag, and the closing is right before the closing <BODY> tag goes right before the closing <HTML> tag. All the information displayed on your web page will be put between the <BODY> tags.

Text Headers
There are six types of headers. The tag for a header is <H#>. The starting tag is <H#> and the closing tag is </H#>. Replace # with the number for the type of header you want.

Examples(exam01.html)
<HTML> <HEAD> Homepage</TITLE> </HEAD> <BODY> <H2> Hello World! </H2> </BODY> </HTML>
<TITLE>My

Font Tag
To change the font, you need to put in the Font tag which looks like <FONT FACE="fontname">. The starting tag is <FONT FACE="fontname"> and the closing tag is </FONT>.

Text Color
There are two ways to set the color of the text. One way, is simply put the tags around the text. The other way is to set the default color of the text. <FONT COLOR="#xxxxxx">. <BODY TEXT="#xxxxxx">

Link Color
There are two ways to set the color of the links. One way, is simply put the tags around the text that is withen the link tags. The other way is to set the default link color <A HREF="file.html">
<FONT COLOR="#0000FF"> Click Here! </FONT>

</A>

Visited Link Color


A visited link color is the color a link is if you have previously visited it. The tag to set the color for the visited link is <BODY VLINK="#xxxxxx">. This tag replaces the normal <BODY> tag.

Examples(exam02.html)
<HTML> <HEAD> <TITLE>My Homepage</TITLE> </HEAD> <BODY TEXT="#000000" LINK="#0000FF" VLINK="#0000FF" ALINK="#0000FF"> Normal Text <P> <A HREF="file.html"> Link </A> </BODY> </HTML>

Text Link
This tag allows you to make text into a link. The tag looks like <A HREF="url">. The starting tag is <A HREF="url"> and the closing tag is </A>. The text between these two tags is what is the link. The text "url" needs to be replaced with the address you are linking to.

Examples(exam03.html)
<HTML> <HEAD> <TITLE>My Homepage</TITLE> </HEAD> <BODY> <A HREF="http://www.kccicb.or.kr"> KCCICB Home Page </A> </BODY> </HTML>

Line Break
One way to fix this problem, is to add in a Line Break which looks like <BR>. This tag will move the text down one line. So, following the example we did above, here is the same HTML document and result, using the <BR> tag.

Examples(exam04.html)
<HTML> <HEAD> <TITLE>My Homepage</TITLE> </HEAD> <BODY> Hello World! <BR> Welcome To My Site </BODY> </HTML>

Paragraph
Another way of avoiding this problem, is to use the Paragraph which looks like <P>. The <P> tag moves the text down two lines, similar to starting a new paragraph. Keeping with the previous example, here is the HTML, using the <P> tag.

Text Styles
Text can be a lot more than just words. You can make text into many different shapes and forms, which may appear more attractive on your web site and improve the overall look of your site. In this section, you will learn how to use all the different styles of text.

Examples(exam05.html)
<HTML> <HEAD> <TITLE> </HEAD> <BODY> <B>Hello World!</B> <I>Hello World!</I> <U>Hello World!</U> <S>Hello World!</S> <TT>Hello World!</TT> </BODY> </HTML>
Homepage </TITLE>

Text Size
Making your text different sizes allows you to create different parts of your page that stand out with bigger or smaller text. In this step, you will learn how to change the size of your text. To change the size, you need to put in the size tag which looks like <FONT SIZE="#">. The starting tag is <FONT SIZE="#"> and the closing tag is </FONT>. The # symbol is replaced by the size of text you want, which ranges 1 through 7

Examples(exam06.html)
<HTML> <HEAD> <TITLE>My Homepage</TITLE> </HEAD> <BODY> <FONT SIZE=1"> Hello World! </FONT> <FONT SIZE=7"> Hello World! </FONT> </BODY> </HTML>

Align Text
Being able to align your text, can really help your organize and space out your site, so it's easy to read for your visitors. In this section, you will learn how to align your text in a variety of different ways.

Examples(exam07.html)
<HTML> <HEAD> <TITLE> Homepage </HEAD> <BODY> <P ALIGN="LEFT"> Hello World! <P ALIGN="RIGHT"> Hello World! <P ALIGN=" CENTER "> Hello World! <CENTER> Hello World! </CENTER> </BODY> </HTML>
</TITLE>

Picture Tag
This is the tag that will add a picture to your web page. The tag looks like <IMG SRC="url">. This is the only tag, there is no closing tag. The text "url" needs to be replaced with the address of your picture.

Examples(exam08.html)
<HTML> <HEAD> <TITLE>Homepage</TITLE> </HEAD> <BODY>
<IMG SRC="http://www.kccicb.or.kr/images/junkung3.gif"> </BODY> </HTML>

Cym. virescens Lindley

Alternative Name
This tag will allow you to add the alternative name to your pictures. The tag for the alternative name looks like ALT="xxxx". This adds onto the picture tag, so the end result looks like <IMG SRC="url" ALT="xxxx"> The xxxx, is replaced with the text you want the Alternative Name to be. You can choose whatever you want for this, although it should describe the picture.

Examples(exam09.html)
<HTML> <HEAD> <TITLE>My Homepage</TITLE> </HEAD> <BODY> <IMG SRC="images/wrong.gif" ALT="My Picture"> </BODY> </HTML>

Normal Picture Background


Here, you will learn how to set a picture as the background of your web page. The tag for the background picture looks like BACKGROUND=. This is added onto the body tag so the end result looks like <BODY BACKGROUND="url">. The text "url" is replaced by the internet address leading to the picture you want on the background.

Examples(exam10.html)
<HTML> <HEAD> <TITLE>My Homepage</TITLE> </HEAD> <BODY BACKGROUND="images/asia.gif"> </BODY> </HTML>

You might also like