Professional Documents
Culture Documents
By Jang, Seoung-soo
Concepts of Web
Internet
Server
Client TCP/IP
USERS
NOS DBMS DB DB LAN
HTML
(Hyper Text Markup Language)
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.
<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>
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>
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>
Examples(exam10.html)
<HTML> <HEAD> <TITLE>My Homepage</TITLE> </HEAD> <BODY BACKGROUND="images/asia.gif"> </BODY> </HTML>