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

Contenu connexe

Tendances (20)

Html example
Html exampleHtml example
Html example
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Html ppt
Html pptHtml ppt
Html ppt
 
Learn HTML Step By Step
Learn HTML Step By StepLearn HTML Step By Step
Learn HTML Step By Step
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html basics
Html basicsHtml basics
Html basics
 
Crash Course Web - HTML Presentation
Crash Course Web - HTML PresentationCrash Course Web - HTML Presentation
Crash Course Web - HTML Presentation
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Getting into HTML
Getting into HTMLGetting into HTML
Getting into HTML
 

Similaire à Introduction to HTML for 1999 Asian Women's Network Training Workshop

Similaire à Introduction to HTML for 1999 Asian Women's Network Training Workshop (20)

Web1
Web1Web1
Web1
 
Web1
Web1Web1
Web1
 
Web1
Web1Web1
Web1
 
Web1
Web1Web1
Web1
 
Rd.Html
Rd.HtmlRd.Html
Rd.Html
 
Basics tags for HTML
Basics tags for HTMLBasics tags for HTML
Basics tags for HTML
 
Web 101 intro to html
Web 101  intro to htmlWeb 101  intro to html
Web 101 intro to html
 
Html
HtmlHtml
Html
 
html1.ppt
html1.ppthtml1.ppt
html1.ppt
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
html1.ppt
html1.ppthtml1.ppt
html1.ppt
 
html1.ppt
html1.ppthtml1.ppt
html1.ppt
 
html1.ppt
html1.ppthtml1.ppt
html1.ppt
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
Html
HtmlHtml
Html
 
Web design and Development
Web design and DevelopmentWeb design and Development
Web design and Development
 
Html week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandourHtml week8 2019 2020 for g10 by eng.osama ghandour
Html week8 2019 2020 for g10 by eng.osama ghandour
 
HTML Coding #01 : Don't Fear the Code
HTML Coding #01 : Don't Fear the CodeHTML Coding #01 : Don't Fear the Code
HTML Coding #01 : Don't Fear the Code
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Advance HTML
Advance HTMLAdvance HTML
Advance HTML
 

Plus de Anmol Pant

Periodic classification of elements
Periodic classification of elementsPeriodic classification of elements
Periodic classification of elementsAnmol Pant
 
दुख का अधिकार
दुख का अधिकारदुख का अधिकार
दुख का अधिकारAnmol Pant
 
History of japan
History of japanHistory of japan
History of japanAnmol Pant
 
History of cricket
History of cricketHistory of cricket
History of cricketAnmol Pant
 
Quadrilaterals & their properties(anmol)
Quadrilaterals & their properties(anmol)Quadrilaterals & their properties(anmol)
Quadrilaterals & their properties(anmol)Anmol Pant
 
Direct and inverse variations
Direct and inverse variationsDirect and inverse variations
Direct and inverse variationsAnmol Pant
 
Combustion and flame
Combustion and flameCombustion and flame
Combustion and flameAnmol Pant
 

Plus de Anmol Pant (8)

Periodic classification of elements
Periodic classification of elementsPeriodic classification of elements
Periodic classification of elements
 
दुख का अधिकार
दुख का अधिकारदुख का अधिकार
दुख का अधिकार
 
History of japan
History of japanHistory of japan
History of japan
 
History of cricket
History of cricketHistory of cricket
History of cricket
 
Quadrilaterals & their properties(anmol)
Quadrilaterals & their properties(anmol)Quadrilaterals & their properties(anmol)
Quadrilaterals & their properties(anmol)
 
Direct and inverse variations
Direct and inverse variationsDirect and inverse variations
Direct and inverse variations
 
Combustion and flame
Combustion and flameCombustion and flame
Combustion and flame
 
Kriya hindi
Kriya hindiKriya hindi
Kriya hindi
 

Dernier

1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfchloefrazer622
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingTeacherCyreneCayanan
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room servicediscovermytutordmt
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpinRaunakKeshri1
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Disha Kariya
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 

Dernier (20)

1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 

Introduction to HTML for 1999 Asian Women's Network Training Workshop

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