SlideShare a Scribd company logo
1 of 35
Session No 1

Developed by: Saif Ullah Dar

12/17/2013

1
1)
2)

3)
4)
5)
6)
7)
8)
9)

Getting Started With HTML
Introducing HTML
How Web pages work
Introduction to Tags.
Structure of HTML page
Creating a Web Page
Introduction table, tr, td tags.
Paragraphs
Preformatted Paragraphs

Developed by: Saif Ullah Dar

12/17/2013

2
 The

World Wide Web (Web) is a network of
information resources. The Web relies on
three mechanisms to make these resources
readily available to the widest possible
audience:




A uniform naming scheme for locating resources
on the Web (e.g., URIs).
Protocols, for access to named resources over
the Web (e.g., HTTP).
Hypertext, for easy navigation among resources
(e.g., HTML).

Developed by: Saif Ullah Dar

12/17/2013

3
To publish information for global distribution, one
needs a universally understood language, a kind of
publishing mother tongue that all computers may
potentially understand. The publishing language used
by the World Wide Web is HTML (from Hypertext
Markup Language).

Developed by: Saif Ullah Dar

12/17/2013

4
A. HTML contains special markers, or tags, which
B.

define the style and structure of the page
Tags are also referred to as elements.

Developed by: Saif Ullah Dar

12/17/2013

5
 Publish

online documents with headings,
texts, tables, lists, photos, etc.
 Retrieve online information via hypertexts
links.
 Design forms for conducting transactions
with remote services, for use in searching for
information, making reservations, ordering
products, etc.
 Include spread-sheets, video clips, sound
clips, and other applications directly in their
documents.
Developed by: Saif Ullah Dar

12/17/2013

6
Click To
Proceed With
The Steps

Developed by: Saif Ullah Dar

12/17/2013

7
Double Click
on the
Internet
Explorer
button

Developed by: Saif Ullah Dar

12/17/2013

8
Browser
Window
Opens

Developed by: Saif Ullah Dar

12/17/2013

9
http://www.google.com

Type the url
address &
Press Enter
Key

Developed by: Saif Ullah Dar

12/17/2013

10
Internet

Web Server

Request
Request

http://www.google.com

User makes a request
www.google.com

HTML files

Developed by: Saif Ullah Dar

12/17/2013

11
Internet

Web Server

Web Page
Web Page

HTML files
Google page is returned from the Web Server

Developed by: Saif Ullah Dar

12/17/2013

12
Developed by: Saif Ullah Dar

12/17/2013

13
 A tag is a reference in an HTML document which
describes the style and structure of the document.

 All tag start with < (less than symbol) and end with

> (greater than symbol)

 Tags which mark a beginning have no / (front
slash).
 Tags which mark an ending have a / immediately
after <, as in </.

Developed by: Saif Ullah Dar

12/17/2013

14
 <HTML>,

<BODY>,
<TITLE>
 </HTML>,
</BODY>,
</TITLE>

Developed by: Saif Ullah Dar

 STARTING

TAGS /

ELEMENTS
 ENDING

TAGS /
ELEMENTS

12/17/2013

15
<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<!-- Written by Manas K Sahoo -->
<!-- Created: 30-May-2007 -->
<!-- Organization: IBM -->
<BODY>This is where the text goes.
</BODY>
</HTML>
Developed by: Saif Ullah Dar

12/17/2013

16
Start of an HTML document.

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<!-- Written by Manas K Sahoo -->
<!-- Created: 30-May-2007 -->
<!-- Organization: IBM -->
<BODY>This is where the text goes.
</BODY>
</HTML>
Developed by: Saif Ullah Dar

12/17/2013

17
Indicates to the browser that this is an HTML
document.

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<!-- Written by Manas K Sahoo -->
<!-- Created: 30-May-2007 -->
<!-- Organization: IBM -->
<BODY>This is where the text goes.
</BODY>
</HTML>
Developed by: Saif Ullah Dar

12/17/2013

18
HTML document is divided into two sections.
1. <HEAD> …. </HEAD>

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<!-- Written by Manas K Sahoo -->
<!-- Created: 30-May-2007 -->
<!-- Organization: IBM -->
<BODY>This is where the text goes.
</BODY>
</HTML>
Developed by: Saif Ullah Dar

12/17/2013

19
HTML document is divided into two sections.
2. <BODY> …. </BODY>

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<!-- Written by Manas K Sahoo -->
<!-- Created: 30-May-2007 -->
<!-- Organization: IBM -->
<BODY>This is where the text goes.
</BODY>
</HTML>
Developed by: Saif Ullah Dar

12/17/2013

20
Shows the contents in the browser title bar.
Generally placed inside Head tag.

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<!-- Written by Manas K Sahoo -->
<!-- Created: 30-May-2007 -->
<!-- Organization: IBM -->
<BODY>This is where the text goes.
</BODY>
</HTML>
Developed by: Saif Ullah Dar

12/17/2013

21
Indicates comment tag. Can be placed anywhere
in the document.

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<!-- Written by Manas K Sahoo -->
<!-- Created: 30-May-2007 -->
<!-- Organization: IBM -->
<BODY>This is where the text goes.
</BODY>
</HTML>
Developed by: Saif Ullah Dar

12/17/2013

22
Signal the end of HTML document.

<HTML>
<HEAD>
<TITLE> My Home Page </TITLE>
</HEAD>
<!-- Written by Manas K Sahoo -->
<!-- Created: 30-May-2007 -->
<!-- Organization: IBM -->
<BODY>This is where the text goes.
</BODY>
</HTML>
Developed by: Saif Ullah Dar

12/17/2013

23
Range / Container tags

They are called so because they cover a range of text.
Example : <HTML>, <HEAD>, <BODY>, <TITLE>

Standalone / Point tags
Those tags which do not need an ending.
Example: <HR>, <BR>

Developed by: Saif Ullah Dar

12/17/2013

24
Developed by: Saif Ullah Dar

12/17/2013

25


Tags used for separating one line with other can be
classifies as follows:1.

<P> tag

2.

<PRE> tag

3.

<BR> tag

4.

<HR> tag

Developed by: Saif Ullah Dar

12/17/2013

26
 Normally

all text in an HTML document is
treated like one long paragraph. Indented or
blank lines which normally indicate start of
paragraphs in text are ignored.
 To separate your text into paragraphs use the
 The <P> tag forces an end of line and forces
a blank line before the next paragraph.

Developed by: Saif Ullah Dar

12/17/2013

27

<P>
tag.
Developed by: Saif Ullah Dar

12/17/2013

28
Code Snippet To Fulfill the Requirement

<p>This is should be the end of my first
paragraph in HTML.</p>
<p>This should be the start of my second
paragraph in
HTML.</p>
<p>And this is should be my third paragraph in
HTML.</p>

Developed by: Saif Ullah Dar

12/17/2013

29
<p> tag forces an end of line and forces a blank line before the next paragraph.

<p>This is should be the end of my first
paragraph in HTML.</p>
<p>This should be the start of my second
paragraph in
HTML.</p>
<p>And this is should be my third paragraph in
HTML.</p>

Developed by: Saif Ullah Dar

12/17/2013

30
<p> tag forces an end of line and forces a blank line before the next paragraph.

<p>This is should be the end of my first
paragraph in HTML.</p>
<p>This should be the start of my second
paragraph in
HTML.</p>
<p>And this is should be my third paragraph in
HTML.</p>
Ends the paragraph tag.
Developed by: Saif Ullah Dar

12/17/2013

31
 Preformatted

tag is used to display the data
in the explorer as written in the Program.
 To use the tabs in the paragraphs
 This tag is used to place the data according
to your own style.
 The font size of this tag is different from the
font size of the <P> Tag
 Do not forget to close this Tag.

Developed by: Saif Ullah Dar

12/17/2013

32

<PRE>
tag.
Code Snippet To Fulfill the Requirement

<pre>This is should be the end of my first
Paragraph
in HTML Using the
PRE FORMATTED TAG.</pre>
<pre>This should be the start of my second
paragraph in
HTML.</pre>
<p>And this is should be my third paragraph in
HTML.</p>

Developed by: Saif Ullah Dar

12/17/2013

33
Developed by: Saif Ullah Dar

12/17/2013

34
SAIF ULLAH DAR

Developed by: Saif Ullah Dar

12/17/2013

35

More Related Content

What's hot (20)

Bangla html
Bangla htmlBangla html
Bangla html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html css java script
Html css java script Html css java script
Html css java script
 
WEB DESIGNING MODULE
WEB DESIGNING MODULEWEB DESIGNING MODULE
WEB DESIGNING MODULE
 
Artdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group ProjectsArtdm171 Week3 Tags Group Projects
Artdm171 Week3 Tags Group Projects
 
HTML & XHTML Basics
HTML & XHTML BasicsHTML & XHTML Basics
HTML & XHTML Basics
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html project report12
Html project report12Html project report12
Html project report12
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
 
Html basic
Html basicHtml basic
Html basic
 
Css by tanbircox
Css by tanbircoxCss by tanbircox
Css by tanbircox
 
Html basics
Html basicsHtml basics
Html basics
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
 
Getting into HTML
Getting into HTMLGetting into HTML
Getting into HTML
 
Html tags describe in bangla
Html tags describe in banglaHtml tags describe in bangla
Html tags describe in bangla
 
Critical Rendering Path
Critical Rendering PathCritical Rendering Path
Critical Rendering Path
 
HTML
HTMLHTML
HTML
 
Learn CSS From Scratch
Learn CSS From ScratchLearn CSS From Scratch
Learn CSS From Scratch
 

Viewers also liked (8)

Session no 3
Session no 3Session no 3
Session no 3
 
Java script session 4
Java script session 4Java script session 4
Java script session 4
 
Session no 2
Session no 2Session no 2
Session no 2
 
Session no 4
Session no 4Session no 4
Session no 4
 
Session no 3 bzu
Session no 3 bzuSession no 3 bzu
Session no 3 bzu
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
HTML: Tables and Forms
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and Forms
 
HTML practicals
HTML practicals HTML practicals
HTML practicals
 

Similar to Session no 1 html

HTML (Basic to Advance)
HTML (Basic to Advance)HTML (Basic to Advance)
HTML (Basic to Advance)Coder Tech
 
HyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.pptHyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.pptDrShamikTiwari
 
Web design and Development
Web design and DevelopmentWeb design and Development
Web design and DevelopmentShagor Ahmed
 
Updated html programs
Updated html programsUpdated html programs
Updated html programsDeepali54
 
Comp 111chp iv vi
Comp 111chp iv viComp 111chp iv vi
Comp 111chp iv viBala Ganesh
 
INTRODUCTION FOR HTML
INTRODUCTION  FOR HTML INTRODUCTION  FOR HTML
INTRODUCTION FOR HTML Rahul Bathri
 
If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!Dr Sukhpal Singh Gill
 
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdfHSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdfAAFREEN SHAIKH
 
Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3bluejayjunior
 
HTML Notes for new begginers for HTML CSS
HTML Notes for new begginers for HTML CSSHTML Notes for new begginers for HTML CSS
HTML Notes for new begginers for HTML CSSRajChauhan226834
 
Web Design Basics: HTML Essentials for begginer
Web Design Basics: HTML Essentials for begginerWeb Design Basics: HTML Essentials for begginer
Web Design Basics: HTML Essentials for begginerRajChauhan226834
 
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_languageIshaq Shinwari
 
SDP_HTML.pptx
SDP_HTML.pptxSDP_HTML.pptx
SDP_HTML.pptxVani011
 
HTML and ASP.NET
HTML and ASP.NETHTML and ASP.NET
HTML and ASP.NETPadma Metta
 

Similar to Session no 1 html (20)

HTML (Basic to Advance)
HTML (Basic to Advance)HTML (Basic to Advance)
HTML (Basic to Advance)
 
Advance HTML
Advance HTMLAdvance HTML
Advance HTML
 
HyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.pptHyperTextMarkupLanguage.ppt
HyperTextMarkupLanguage.ppt
 
Web design and Development
Web design and DevelopmentWeb design and Development
Web design and Development
 
Updated html programs
Updated html programsUpdated html programs
Updated html programs
 
Html 5
Html 5Html 5
Html 5
 
Comp 111chp iv vi
Comp 111chp iv viComp 111chp iv vi
Comp 111chp iv vi
 
INTRODUCTION FOR HTML
INTRODUCTION  FOR HTML INTRODUCTION  FOR HTML
INTRODUCTION FOR HTML
 
If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!If you know nothing about HTML, this is where you can start !!
If you know nothing about HTML, this is where you can start !!
 
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdfHSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
HSC INFORMATION TECHNOLOGY CHAPTER 1 ADVANCED WEB DESIGNING PART I.pdf
 
Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3
 
Learn HTML Easier
Learn HTML EasierLearn HTML Easier
Learn HTML Easier
 
HTML Notes for new begginers for HTML CSS
HTML Notes for new begginers for HTML CSSHTML Notes for new begginers for HTML CSS
HTML Notes for new begginers for HTML CSS
 
Web Design Basics: HTML Essentials for begginer
Web Design Basics: HTML Essentials for begginerWeb Design Basics: HTML Essentials for begginer
Web Design Basics: HTML Essentials for begginer
 
Htmlppt
Htmlppt Htmlppt
Htmlppt
 
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_language
 
SDP_HTML.pptx
SDP_HTML.pptxSDP_HTML.pptx
SDP_HTML.pptx
 
Html1
Html1Html1
Html1
 
Html
HtmlHtml
Html
 
HTML and ASP.NET
HTML and ASP.NETHTML and ASP.NET
HTML and ASP.NET
 

Recently uploaded

microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
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
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting DataJhengPantaleon
 
PSYCHIATRIC History collection FORMAT.pptx
PSYCHIATRIC   History collection FORMAT.pptxPSYCHIATRIC   History collection FORMAT.pptx
PSYCHIATRIC History collection FORMAT.pptxPoojaSen20
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Celine George
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
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
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 

Recently uploaded (20)

TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
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
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
 
PSYCHIATRIC History collection FORMAT.pptx
PSYCHIATRIC   History collection FORMAT.pptxPSYCHIATRIC   History collection FORMAT.pptx
PSYCHIATRIC History collection FORMAT.pptx
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
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
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 

Session no 1 html

  • 1. Session No 1 Developed by: Saif Ullah Dar 12/17/2013 1
  • 2. 1) 2) 3) 4) 5) 6) 7) 8) 9) Getting Started With HTML Introducing HTML How Web pages work Introduction to Tags. Structure of HTML page Creating a Web Page Introduction table, tr, td tags. Paragraphs Preformatted Paragraphs Developed by: Saif Ullah Dar 12/17/2013 2
  • 3.  The World Wide Web (Web) is a network of information resources. The Web relies on three mechanisms to make these resources readily available to the widest possible audience:    A uniform naming scheme for locating resources on the Web (e.g., URIs). Protocols, for access to named resources over the Web (e.g., HTTP). Hypertext, for easy navigation among resources (e.g., HTML). Developed by: Saif Ullah Dar 12/17/2013 3
  • 4. To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from Hypertext Markup Language). Developed by: Saif Ullah Dar 12/17/2013 4
  • 5. A. HTML contains special markers, or tags, which B. define the style and structure of the page Tags are also referred to as elements. Developed by: Saif Ullah Dar 12/17/2013 5
  • 6.  Publish online documents with headings, texts, tables, lists, photos, etc.  Retrieve online information via hypertexts links.  Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.  Include spread-sheets, video clips, sound clips, and other applications directly in their documents. Developed by: Saif Ullah Dar 12/17/2013 6
  • 7. Click To Proceed With The Steps Developed by: Saif Ullah Dar 12/17/2013 7
  • 10. http://www.google.com Type the url address & Press Enter Key Developed by: Saif Ullah Dar 12/17/2013 10
  • 11. Internet Web Server Request Request http://www.google.com User makes a request www.google.com HTML files Developed by: Saif Ullah Dar 12/17/2013 11
  • 12. Internet Web Server Web Page Web Page HTML files Google page is returned from the Web Server Developed by: Saif Ullah Dar 12/17/2013 12
  • 13. Developed by: Saif Ullah Dar 12/17/2013 13
  • 14.  A tag is a reference in an HTML document which describes the style and structure of the document.  All tag start with < (less than symbol) and end with > (greater than symbol)  Tags which mark a beginning have no / (front slash).  Tags which mark an ending have a / immediately after <, as in </. Developed by: Saif Ullah Dar 12/17/2013 14
  • 15.  <HTML>, <BODY>, <TITLE>  </HTML>, </BODY>, </TITLE> Developed by: Saif Ullah Dar  STARTING TAGS / ELEMENTS  ENDING TAGS / ELEMENTS 12/17/2013 15
  • 16. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 16
  • 17. Start of an HTML document. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 17
  • 18. Indicates to the browser that this is an HTML document. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 18
  • 19. HTML document is divided into two sections. 1. <HEAD> …. </HEAD> <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 19
  • 20. HTML document is divided into two sections. 2. <BODY> …. </BODY> <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 20
  • 21. Shows the contents in the browser title bar. Generally placed inside Head tag. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 21
  • 22. Indicates comment tag. Can be placed anywhere in the document. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 22
  • 23. Signal the end of HTML document. <HTML> <HEAD> <TITLE> My Home Page </TITLE> </HEAD> <!-- Written by Manas K Sahoo --> <!-- Created: 30-May-2007 --> <!-- Organization: IBM --> <BODY>This is where the text goes. </BODY> </HTML> Developed by: Saif Ullah Dar 12/17/2013 23
  • 24. Range / Container tags They are called so because they cover a range of text. Example : <HTML>, <HEAD>, <BODY>, <TITLE> Standalone / Point tags Those tags which do not need an ending. Example: <HR>, <BR> Developed by: Saif Ullah Dar 12/17/2013 24
  • 25. Developed by: Saif Ullah Dar 12/17/2013 25
  • 26.  Tags used for separating one line with other can be classifies as follows:1. <P> tag 2. <PRE> tag 3. <BR> tag 4. <HR> tag Developed by: Saif Ullah Dar 12/17/2013 26
  • 27.  Normally all text in an HTML document is treated like one long paragraph. Indented or blank lines which normally indicate start of paragraphs in text are ignored.  To separate your text into paragraphs use the  The <P> tag forces an end of line and forces a blank line before the next paragraph. Developed by: Saif Ullah Dar 12/17/2013 27 <P> tag.
  • 28. Developed by: Saif Ullah Dar 12/17/2013 28
  • 29. Code Snippet To Fulfill the Requirement <p>This is should be the end of my first paragraph in HTML.</p> <p>This should be the start of my second paragraph in HTML.</p> <p>And this is should be my third paragraph in HTML.</p> Developed by: Saif Ullah Dar 12/17/2013 29
  • 30. <p> tag forces an end of line and forces a blank line before the next paragraph. <p>This is should be the end of my first paragraph in HTML.</p> <p>This should be the start of my second paragraph in HTML.</p> <p>And this is should be my third paragraph in HTML.</p> Developed by: Saif Ullah Dar 12/17/2013 30
  • 31. <p> tag forces an end of line and forces a blank line before the next paragraph. <p>This is should be the end of my first paragraph in HTML.</p> <p>This should be the start of my second paragraph in HTML.</p> <p>And this is should be my third paragraph in HTML.</p> Ends the paragraph tag. Developed by: Saif Ullah Dar 12/17/2013 31
  • 32.  Preformatted tag is used to display the data in the explorer as written in the Program.  To use the tabs in the paragraphs  This tag is used to place the data according to your own style.  The font size of this tag is different from the font size of the <P> Tag  Do not forget to close this Tag. Developed by: Saif Ullah Dar 12/17/2013 32 <PRE> tag.
  • 33. Code Snippet To Fulfill the Requirement <pre>This is should be the end of my first Paragraph in HTML Using the PRE FORMATTED TAG.</pre> <pre>This should be the start of my second paragraph in HTML.</pre> <p>And this is should be my third paragraph in HTML.</p> Developed by: Saif Ullah Dar 12/17/2013 33
  • 34. Developed by: Saif Ullah Dar 12/17/2013 34
  • 35. SAIF ULLAH DAR Developed by: Saif Ullah Dar 12/17/2013 35