Introduction to HTML 1999 Asian Women's Network Training Workshop
<ul><li>Contents </li></ul><ul><li>Getting Started.. </li></ul><ul><li>What is HTML? </li></ul><ul><li>How to create and V...
<ul><li>What the following term mean : </li></ul><ul><ul><li>Web server:  a system on the internet containg one or more we...
<ul><li>What is HTML? </li></ul><ul><ul><li>Telling the browser what to do, and what props to use. </li></ul></ul><ul><ul>...
<ul><li>The second tag(off switch)  starts with a forward slash.  </li></ul><ul><ul><ul><li>For example ,<B> text </B>  </...
<ul><ul><li>Basic HTML Document Format </li></ul></ul>1999 Asian Women's Network Training Workshop <HTML> <HEAD> <TITLE>WE...
<ul><li>How to Create and View an HTML document? </li></ul><ul><ul><li>1.Use an text editor such as Editpad to write the d...
<ul><ul><li>7.You may now switch back and forth between the Source and the HTML Document  </li></ul></ul><ul><ul><ul><li>s...
<ul><ul><li>Tags in head   </li></ul></ul><ul><li><HEAD>...</HEAD>--  contains information about the document </li></ul><u...
<ul><ul><li>Tags in Body </li></ul></ul><ul><li>Let's talk Text   </li></ul><ul><ul><li>Heading: <H1> </H1> </li></ul></ul...
<ul><li>Add Images </li></ul><ul><ul><li>Use <IMG SRC=imagefilename> tags </li></ul></ul><ul><ul><li>How to specify  Relat...
<ul><li>Add some Link   </li></ul><ul><ul><li>Use <A href=filename|URL></a>tags </li></ul></ul><ul><ul><li>How to specify ...
<ul><li>How to make colors changes?   </li></ul><ul><ul><li>Hexadecimal number  :  </li></ul></ul><ul><ul><li>Color names ...
<ul><li>The current HTML document is my.html and the current directory is  Iam </li></ul><ul><li>C:-   Iam   -my.html </l...
<ul><li>How to specify Relative pathnames </li></ul><ul><li>The HTML document is my.html and the image file is  dragonfly....
Upcoming SlideShare
Loading in...5
×

Html

1,089

Published on

Introduction to HTML

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,089
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
96
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html

  1. 1. Introduction to HTML 1999 Asian Women's Network Training Workshop
  2. 2. <ul><li>Contents </li></ul><ul><li>Getting Started.. </li></ul><ul><li>What is HTML? </li></ul><ul><li>How to create and View an HTML document? </li></ul><ul><li>Basic HTML Document Format </li></ul><ul><li>The HTML Basic tags </li></ul>
  3. 3. <ul><li>What the following term mean : </li></ul><ul><ul><li>Web server: a system on the internet containg one or more web site </li></ul></ul><ul><ul><li>Web site: a collection of one or more web pages </li></ul></ul><ul><ul><li>Web pages: single disk file with a single file name </li></ul></ul><ul><ul><li>Home pages: first page in website </li></ul></ul><ul><li>Think about the followings before working your Web pages. </li></ul><ul><ul><li>Think about the sort of information(content) you want to put on the Web. </li></ul></ul><ul><ul><li>Set the goals for the Web site. </li></ul></ul><ul><ul><li>Organize your content into main topics. </li></ul></ul><ul><ul><li>Come up with a general structure for pages and topics. </li></ul></ul>
  4. 4. <ul><li>What is HTML? </li></ul><ul><ul><li>Telling the browser what to do, and what props to use. </li></ul></ul><ul><ul><li>A serises of tags that are integrated into a text document. </li></ul></ul><ul><ul><li>Tags are ; </li></ul></ul><ul><ul><li>surrounded with angle brackets like this </li></ul></ul><ul><ul><ul><ul><li><B> or <I>. </li></ul></ul></ul></ul><ul><ul><li>Most tags come in pairs </li></ul></ul><ul><ul><ul><ul><li>exceptions: <P>, <br>, <li> tags … </li></ul></ul></ul></ul><ul><ul><li>The first tag turns the action on, and the second turns it off </li></ul></ul>
  5. 5. <ul><li>The second tag(off switch) starts with a forward slash. </li></ul><ul><ul><ul><li>For example ,<B> text </B> </li></ul></ul></ul><ul><li>can embedded, for instance, to do this: </li></ul><ul><ul><ul><li><HEAD><TITLE> Your text </HEAD></TITLE> it won't work. </li></ul></ul></ul><ul><ul><ul><li>The correct order is <HEAD><TITLE> Your text </TITLE></HEAD> </li></ul></ul></ul><ul><li>not case sensitivity. </li></ul><ul><li>Many tags have attributes. </li></ul><ul><ul><ul><li>For example, <P ALIGN=CENTER> centers the paragraph following it. </li></ul></ul></ul><ul><li>Some browsers don't support the some tags and some attributes. </li></ul>1999 Asian Women's Network Training Workshop
  6. 6. <ul><ul><li>Basic HTML Document Format </li></ul></ul>1999 Asian Women's Network Training Workshop <HTML> <HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML> See what it looks like:
  7. 7. <ul><li>How to Create and View an HTML document? </li></ul><ul><ul><li>1.Use an text editor such as Editpad to write the document. </li></ul></ul><ul><ul><li>2.Save the file as filename.html on a PC. This is called the Document Source. </li></ul></ul><ul><ul><li>3.Open Netscape (or any browser) Off-Line </li></ul></ul><ul><ul><li>4.Switch to Netscape </li></ul></ul><ul><ul><li>5.Click on File, Open File and select the filename.html document that you just created. </li></ul></ul><ul><ul><li>6.Your HTML page should now appear just like any other Web page in Netscape. </li></ul></ul>1999 Asian Women's Network Training Workshop
  8. 8. <ul><ul><li>7.You may now switch back and forth between the Source and the HTML Document </li></ul></ul><ul><ul><ul><li>switch to Notepad with the Document Source </li></ul></ul></ul><ul><ul><ul><li>make changes </li></ul></ul></ul><ul><ul><ul><li>save the document again </li></ul></ul></ul><ul><ul><ul><li>switch back to Netscape </li></ul></ul></ul><ul><ul><ul><li>click on RELOAD and view the new HTML Document </li></ul></ul></ul><ul><ul><ul><li>switch to Notepad with the Document Source...... </li></ul></ul></ul>1999 Asian Women's Network Training Workshop
  9. 9. <ul><ul><li>Tags in head </li></ul></ul><ul><li><HEAD>...</HEAD>-- contains information about the document </li></ul><ul><li><TITLE>...</TITLE>-- puts text on the browser's title bar. </li></ul>1999 Asian Women's Network Training Workshop
  10. 10. <ul><ul><li>Tags in Body </li></ul></ul><ul><li>Let's talk Text </li></ul><ul><ul><li>Heading: <H1> </H1> </li></ul></ul><ul><ul><li>Center:<Center> </Center> </li></ul></ul><ul><ul><li>Line Break <P> ,<Br> </li></ul></ul><ul><ul><li>Phrase Markups: <I></I> ,<B></B> </li></ul></ul><ul><li>Create a List </li></ul><ul><ul><li>Unordered list : <UL><li> </li></ul></ul><ul><ul><li>Ordered list: <OL><li> </li></ul></ul><ul><ul><li>Nested </li></ul></ul>1999 Asian Women's Network Training Workshop
  11. 11. <ul><li>Add Images </li></ul><ul><ul><li>Use <IMG SRC=imagefilename> tags </li></ul></ul><ul><ul><li>How to specify Relative pathnames </li></ul></ul><ul><ul><li>Attributes of IMG tag </li></ul></ul><ul><ul><ul><li>-width,height </li></ul></ul></ul><ul><ul><ul><li>-Alt </li></ul></ul></ul><ul><ul><ul><li>-Align </li></ul></ul></ul><ul><ul><ul><li>-<Img src=my.gif width=50 height=50 align=right </li></ul></ul></ul><ul><ul><ul><li>alt=“My image”> </li></ul></ul></ul>1999 Asian Women's Network Training Workshop
  12. 12. <ul><li>Add some Link </li></ul><ul><ul><li>Use <A href=filename|URL></a>tags </li></ul></ul><ul><ul><li>How to specify Relative pathnames </li></ul></ul><ul><ul><li>Kinds of URLs </li></ul></ul><ul><ul><ul><li>-http://www.women.or.kr </li></ul></ul></ul><ul><ul><ul><li>- ftp://ftp.foo.com/home/foo </li></ul></ul></ul><ul><ul><ul><li>- gopher://gopher.myhost.com/ </li></ul></ul></ul><ul><ul><ul><li>- news://news.nuri.net </li></ul></ul></ul><ul><ul><ul><li>- mailto:skrhee@women.or.kr </li></ul></ul></ul>1999 Asian Women's Network Training Workshop
  13. 13. <ul><li>How to make colors changes? </li></ul><ul><ul><li>Hexadecimal number : </li></ul></ul><ul><ul><li>Color names : <Font color=white> </li></ul></ul><ul><ul><li>Changing the Background color </li></ul></ul><ul><ul><ul><li><BODY BGCOLOR=#19378a> </li></ul></ul></ul><ul><ul><li>Changing Text color </li></ul></ul><ul><li><BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 VLINK=#66ffff> </li></ul><ul><ul><li>Spot color </li></ul></ul><ul><li><FONT COLOR=#66ffcc>WENT'99</FONT> </li></ul><ul><ul><li>Image Background </li></ul></ul><ul><li>< BODY BACKGROUND=bgimg.gif > </li></ul>1999 Asian Women's Network Training Workshop
  14. 14. <ul><li>The current HTML document is my.html and the current directory is Iam </li></ul><ul><li>C:-  Iam -my.html </li></ul><ul><ul><ul><li>-your.html </li></ul></ul></ul><ul><li> Type this ; <A href=your.html>Your link </A> </li></ul><ul><li>C:-  Iam -my.html </li></ul><ul><li> Child -your.html </li></ul><ul><li> Type this ; <A href=Child/your.html>Your link </A> </li></ul><ul><li>C:-  Iam -my.html </li></ul><ul><li> Sister -your.html </li></ul><ul><li> Type this ; <A href=../Sister/your.html>Your link </A> </li></ul><ul><li>C:-  Mother -your.html </li></ul><ul><ul><ul><li> Iam -my.html </li></ul></ul></ul><ul><li> Type this ; <A href=../your.html>Your link </A>  Go to Back </li></ul>1999 Asian Women's Network Training Workshop How to specify Relative pathnames
  15. 15. <ul><li>How to specify Relative pathnames </li></ul><ul><li>The HTML document is my.html and the image file is dragonfly.gif </li></ul><ul><li>C:-  Iam -my.html ☞ Type this ; <IMG SRC=dragonfly.gif> </li></ul><ul><li>-dragonfly.gif </li></ul><ul><li>C:-  Iam -my.html ☞ Type this ; <IMG SRC=Image/dragonfly.gif> </li></ul><ul><li> Image </li></ul><ul><li>-dragonfly.gif </li></ul><ul><li>C:-  Iam -my.html ☞ Type this ; <IMG SRC=../Image/dragonfly.gif> </li></ul><ul><li> Image </li></ul><ul><li>-dragonfly.gif </li></ul><ul><li>C:-  Image -dragonfly.gif ☞ Type this ; <IMG SRC=../dragonfly.gif> </li></ul><ul><li> Iam </li></ul><ul><li>-my.html </li></ul><ul><li>Go to Back </li></ul>1999 Asian Women's Network Training Workshop
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×