SlideShare a Scribd company logo
It is the document type
The text between <html> and </html> describes the
 web page
The text between <body> and </body> is the visible
 page content
The text between <h1> and </h1> is displayed as a
 heading
The text between <p> and </p> is displayed as a
 paragraph
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded
  by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is
  the end tag
The end tag is written like the start tag, with a forward 
  slash before the tag name
Start and end tags are also called opening 
  tags and closing tags
<tagname>content</tagname>
"HTML tags" and "HTML elements" are often used to
 describe the same thing.
But strictly speaking, an HTML element is everything
 between the start tag and the end tag, including the
 tags:
HTML Element:
<p>This is a paragraph.</p>
Web Browsers
The purpose of a web browser (such as Google
 Chrome, Internet Explorer, Firefox, Safari) is to read
 HTML documents and display them as web pages.
 The browser does not display the HTML tags, but
 uses the tags to interpret the content of the page:
HTML Page Structure
Below is a visualization of an HTML page
structure:
<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Writing HTML Using Notepad or TextEdit



Follow the 4 steps below to create your first web page with Notepad.


Step 1: Start Notepad
To start Notepad go to:
Start
    All Programs
        Accessories
            Notepad
Step 3: Save Your HTML
Select Save as.. in Notepad's file menu.
When you save an HTML file, you can use either the .htm or the .html file extension.
There is no difference, it is entirely up to you.
Save the file in a folder that is easy to remember, like w3schools.

Step 4: Run the HTML in Your Browser
Start your web browser and open your html file from the File, Open menu, or just
browse the folder and double-click your HTML file.
The result should look much like this:
<html>
 <head>
 <title>Title of the document</title>
 </head>

 <body>
 The content of the document......
 </body>

 </html>
Attributes
Attribute Value
Alink Specifies the color of an active link in a document
background. Specifies a background image for a
 document
bgcolor Specifies the background color of a document
link. Specifies the color of unvisited links in a document
text Specifies the color of the text in a document
 vlink Specifies the color of visited links in a document
Example
<html>
<head>Line break</head>
<br>This is
<br>a para
<br>graph with line breaks
</html>
line break
This is
a para
graph with line breaks
Example
<html>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</html>

Output

This is a paragraph

This is another paragraph
Attributes
align
Left
Right
center

Specifies the alignment of the text within a paragraph
<html>
<body>

<p align="right">A right-aligned paragraph.</p>

<p><b>Note:</b> The align attribute is deprecated
in HTML 4, and is not supported in HTML5. Use CSS
instead.</p>

</body>
</html>

Out put
                         A right-aligned paragraph.

Note: The align attribute is deprecated in HTML 4,
and is not supported in HTML5. Use CSS instead.
Example

<html>
<body>

<p><font size="6">This is some text!</font></p>

<p>The size attribute was deprecated in HTML 4, and is not
  supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict
  DTD. Use CSS instead.</p>

</body>
</html>
Out put

This is some text!
The size attribute was deprecated in HTML 4, and is
Not supported in HTML 4.01 Strict DTD or in XHTML 1.0
Strict DTD. Use CSS instead.
<html>
<body background="w3s.png">

<h1>Hello world!</h1>
<p><a href="http://www.w3schools.com">Visit
  W3Schools.com!</a></p>
<p>The background attribute was deprecated in HTML 4,
  and is not supported in HTML 4.01 Strict DTD or in
  XHTML 1.0 Strict DTD. Use CSS instead.</p>

</body>
</html>
<html>
<body bgcolor="#ff0000">

<h1>Hello world!</h1>
<p><a href="http://www.w3schools.com">Visit W3Schools.com!
  </a></p>

<p><b>Tip:</b> To produce equal results in all browsers, always
  use hex code to specify colors.</p>

<p>the bgcolor atribute is used to give color to backgroung.</p>

</body>
</html>
The most common HTML lists are ordered and unordered
 lists:
HTML Lists

An ordered list:
1. The first list item
2. The second list item
3. The third list item
An unordered list:
 List item
 List item
 List item
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item
 starts with the <li> tag.
The list items are marked with bullets (typically small black
 circles).

example
<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

How the HTML code above looks in a browser:

• Coffee
• Milk
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts
  with the <li> tag.
The list items are marked with numbers.
example
<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>

How the HTML code above looks in a browser:

1. Coffee
2. Milk
Style Tags/html text formatting

 <u> for underline</u>
 <sup>for superscript</sup>
 <sub>for subscript</sub>
 <strike> for striked text</strike>
 <i> for italic text</i>
 <b> for bold text</b>
<html>
<body>
<b>This text is bold</b>
<strong>This text is strong</strong>
<i>This text is italic</i>
This is<sub> subscript</sub> and <sup>superscript</sup>
another example of subscript ans superscript is
  (a+b)<sup>2</sup>=a<sup>2</sup>+<sup>2</sup>+2ab
<br>
chlorine gas formula isCL<sub>2</sub>
<strike> This is an example of strike out text</strike>
<u>This text is underlined.HTML provides various style
  tags></u>
</body>
</html>
This text is bold
This text is strong
This text is italic
This is subscript and superscript
another example of subscript ans superscript is
  (a+b)2=a2+2+2ab
  chlorine gas formula isCL2
This is an example of strike out text
This text is underlined.HTML provides various style
 tags>
Align Specifies the alignment of a <hr> element
noshadeSpecifies that a <hr> element should render in
  one solid color (noshaded), instead of a shaded color
size Specifies the height of a <hr> element
Width Specifies the width of a <hr> element
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
<hr size=4> it is used to define the<b> thickness</b> of the
  line
<hr width= 70%> it defines the <b>width of the line(size)
  </b>70% of the page width
<hr width = 50 noshade>here the line is define in <b>pixel
  value of 50 and there is no shade</b> given to the line
</body>
</html>
<html>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit
  rock" width="304" height="228">
</body>
</html>
Alt : The required alt attribute specifies an
 alternate text for an image, if the image cannot
 be displayed.

Height : The height attribute specifies the width of
 an image, in pixels.

Width: The width attribute specifies the width of
 an image, in pixels.
<html>
<body>
<img src="C:UsersHasnath-
1Desktopsearch.jpg“

alt="goolgle image cannot be displayed" >
</body>
</html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face"
 width="50" height="400">
</body>
</html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face"
 width="450" height="100">
</body>
</html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="100"
  height="100" border="5">
<p>The border attribute give border to the image in
  HTML.you can define the border width as
  border="10" </p>
</body>
</html>
The <font> tag specifies the font face, font size, and font
 color of text.

 color: Specifies the color of text
 Size: Specifies the size of text
 Face: Specifies the font of text
 Base font tag: it is used to give default font size ,color,
  face to the en
 tire page
<html>
<body>
<font size="3" color="red">This is some text!</font>

<font size="2" color="blue">This is some text!</font>

<font face="verdana" color="green">This is some text!
  </font>

<basefont size="6" >This is some text in base font!
</body>
</html>
The comment tag is used to insert comments
 in the source code. Comments are not
 displayed in the browsers.

You can use comments to explain your code,
 which can help you when you edit the source
 code at a later date. This is especially useful if
 you have a lot of code.
<html>
<body>

<!--This is a comment. Comments are not displayed in the
  browser-->

This is a html web page with comments and these comments
 are not displayed

</body>
</html>
<html>
<body>
<pre>
<font size =8>
&#8704 &#8705 &#8706
&#8707 &#8708 &#8709
&#8710 &#8711 &#8712
&#8713 &#8714 &#8715
&#8716 &#8717 &#8718
</pre>
</body>
</html>
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces and line breaks.
<font size =3>
-------------------------------------
Sl no         Name
-------------------------------------
1            Ayesha
2           Radhika
-------------------------------------
</pre>
</body>
</html>
The href attribute specifies the URL of the page the
 link goes to.
If the href attribute is not present, the <a> tag is not a
 hyperlink.
Syntax
<a href="URL">
<html>
<body>

<p>An absolute URL: <a
 href="http://www.w3schools.com">

W3Schools</a></p>
<p>A relative URL: <a href="tag_a.asp">

The a tag</a></p>

</body>
</html>
If we select the first URL W3 Schools then
the following website will be opened
Else if the selection is
done for the second
URL then following
site will be displayed

More Related Content

What's hot

Basic HTML
Basic HTMLBasic HTML
Basic HTML
Sayan De
 
Learning Html
Learning HtmlLearning Html
Learning Html
Damian Gonz
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
Html1
Html1Html1
Html1
learnt
 
Html
HtmlHtml
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
Hameda Hurmat
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
palhaftab
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
McSoftsis
 
Intro Html
Intro HtmlIntro Html
Intro Html
Chidanand Byahatti
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
Md. Sirajus Salayhin
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
shabab shihan
 
Html
HtmlHtml
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
veena parihar
 
Html basics
Html basicsHtml basics
Html basics
mcatahir947
 
Html introduction
Html introductionHtml introduction
Html introduction
Dalia Elbadry
 
Html
HtmlHtml
Html project
Html projectHtml project
Html projectarsh7511
 
Html basic
Html basicHtml basic
Html basic
Nital Shingala
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
Hinopak Motors Limited
 

What's hot (20)

Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Learning Html
Learning HtmlLearning Html
Learning Html
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Html1
Html1Html1
Html1
 
Html
HtmlHtml
Html
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Tags in html
Tags in htmlTags in html
Tags in html
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
Html
HtmlHtml
Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html basics
Html basicsHtml basics
Html basics
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Html
HtmlHtml
Html
 
Html project
Html projectHtml project
Html project
 
Html basic
Html basicHtml basic
Html basic
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 

Viewers also liked

Html 5 and CSS - Image Element
Html 5 and CSS - Image ElementHtml 5 and CSS - Image Element
Html 5 and CSS - Image Element
Kempy7000
 
Hyperlink
HyperlinkHyperlink
Hyperlink
Bhavesh Solanki
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
Nimish Gupta
 
Web design - Working with Links and Images
Web design - Working with Links and ImagesWeb design - Working with Links and Images
Web design - Working with Links and Images
Mustafa Kamel Mohammadi
 
Html creating page link or hyperlink
Html creating page link or hyperlinkHtml creating page link or hyperlink
Html creating page link or hyperlink
argusacademy
 
Lecture: Regular Expressions and Regular Languages
Lecture: Regular Expressions and Regular LanguagesLecture: Regular Expressions and Regular Languages
Lecture: Regular Expressions and Regular Languages
Marina Santini
 

Viewers also liked (6)

Html 5 and CSS - Image Element
Html 5 and CSS - Image ElementHtml 5 and CSS - Image Element
Html 5 and CSS - Image Element
 
Hyperlink
HyperlinkHyperlink
Hyperlink
 
Anchor tag HTML Presentation
Anchor tag HTML PresentationAnchor tag HTML Presentation
Anchor tag HTML Presentation
 
Web design - Working with Links and Images
Web design - Working with Links and ImagesWeb design - Working with Links and Images
Web design - Working with Links and Images
 
Html creating page link or hyperlink
Html creating page link or hyperlinkHtml creating page link or hyperlink
Html creating page link or hyperlink
 
Lecture: Regular Expressions and Regular Languages
Lecture: Regular Expressions and Regular LanguagesLecture: Regular Expressions and Regular Languages
Lecture: Regular Expressions and Regular Languages
 

Similar to Html ppt by Fathima faculty Hasanath college for women bangalore

Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
vethics
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
vardanyan99
 
Chapter 6 html
Chapter 6 htmlChapter 6 html
Chapter 6 html
home
 
Html notes
Html notesHtml notes
Html notes
Ismail Mukiibi
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
NextGenr
 
HTML Presentation
HTML Presentation HTML Presentation
HTML Presentation
pradeepthakur87
 
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvddhtmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
hemanthkalyan25
 
htmlnotes Which tells about all the basic
htmlnotes Which tells about all the basichtmlnotes Which tells about all the basic
htmlnotes Which tells about all the basic
hemanthkalyan25
 
Html basics 1
Html basics 1Html basics 1
Html basics 1
google
 
Html basics
Html basicsHtml basics
Html basics
Adityaroy110
 
Html basics
Html basicsHtml basics
Html basics
Vivek Khandelwal
 
HTML_Basics.pdf
HTML_Basics.pdfHTML_Basics.pdf
HTML_Basics.pdf
Bhavani Testone
 
Html BASICS
Html BASICSHtml BASICS
Html basics
Html basicsHtml basics
Html basics
Adityaroy110
 
Html basics
Html basicsHtml basics
Html basic file
Html basic fileHtml basic file
Html basic file
Md Mozaddidul Karim
 

Similar to Html ppt by Fathima faculty Hasanath college for women bangalore (20)

Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
 
Html basics NOTE
Html basics NOTEHtml basics NOTE
Html basics NOTE
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Chapter 6 html
Chapter 6 htmlChapter 6 html
Chapter 6 html
 
Html notes
Html notesHtml notes
Html notes
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
HTML Presentation
HTML Presentation HTML Presentation
HTML Presentation
 
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvddhtmlnotes-180924151434.pdf dafdkzndsvkdvdd
htmlnotes-180924151434.pdf dafdkzndsvkdvdd
 
htmlnotes Which tells about all the basic
htmlnotes Which tells about all the basichtmlnotes Which tells about all the basic
htmlnotes Which tells about all the basic
 
Html
HtmlHtml
Html
 
Html basics 1
Html basics 1Html basics 1
Html basics 1
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
HTML_Basics.pdf
HTML_Basics.pdfHTML_Basics.pdf
HTML_Basics.pdf
 
Html BASICS
Html BASICSHtml BASICS
Html BASICS
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html basic file
Html basic fileHtml basic file
Html basic file
 

Recently uploaded

BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
Nguyen Thanh Tu Collection
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
Delapenabediema
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
Jheel Barad
 
Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345
beazzy04
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
Balvir Singh
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
Vivekanand Anglo Vedic Academy
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
MIRIAMSALINAS13
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
RaedMohamed3
 
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdfAdversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Po-Chuan Chen
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
Anna Sz.
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
Tamralipta Mahavidyalaya
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
GeoBlogs
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
Peter Windle
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
TechSoup
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
TechSoup
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
JosvitaDsouza2
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
MysoreMuleSoftMeetup
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
DeeptiGupta154
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
Jisc
 

Recently uploaded (20)

BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
 
Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345Sha'Carri Richardson Presentation 202345
Sha'Carri Richardson Presentation 202345
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
 
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdfAdversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
Adversarial Attention Modeling for Multi-dimensional Emotion Regression.pdf
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
 
Supporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptxSupporting (UKRI) OA monographs at Salford.pptx
Supporting (UKRI) OA monographs at Salford.pptx
 

Html ppt by Fathima faculty Hasanath college for women bangalore

  • 1.
  • 2. It is the document type The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph
  • 3. HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages
  • 4. HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward  slash before the tag name Start and end tags are also called opening  tags and closing tags <tagname>content</tagname>
  • 5. "HTML tags" and "HTML elements" are often used to describe the same thing. But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags: HTML Element: <p>This is a paragraph.</p>
  • 6. Web Browsers The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
  • 7. HTML Page Structure Below is a visualization of an HTML page structure: <html> <body> <h1>This a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
  • 8. Writing HTML Using Notepad or TextEdit Follow the 4 steps below to create your first web page with Notepad. Step 1: Start Notepad To start Notepad go to: Start     All Programs         Accessories             Notepad
  • 9.
  • 10. Step 3: Save Your HTML Select Save as.. in Notepad's file menu. When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you. Save the file in a folder that is easy to remember, like w3schools. Step 4: Run the HTML in Your Browser Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file. The result should look much like this:
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18. <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 19. Attributes Attribute Value Alink Specifies the color of an active link in a document background. Specifies a background image for a document bgcolor Specifies the background color of a document link. Specifies the color of unvisited links in a document text Specifies the color of the text in a document  vlink Specifies the color of visited links in a document
  • 20. Example <html> <head>Line break</head> <br>This is <br>a para <br>graph with line breaks </html>
  • 21. line break This is a para graph with line breaks
  • 22. Example <html> <p>This is a paragraph</p> <p>This is another paragraph</p> </html> Output This is a paragraph This is another paragraph
  • 24. <html> <body> <p align="right">A right-aligned paragraph.</p> <p><b>Note:</b> The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p> </body> </html> Out put A right-aligned paragraph. Note: The align attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.
  • 25. Example <html> <body> <p><font size="6">This is some text!</font></p> <p>The size attribute was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p> </body> </html>
  • 26. Out put This is some text! The size attribute was deprecated in HTML 4, and is Not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.
  • 27. <html> <body background="w3s.png"> <h1>Hello world!</h1> <p><a href="http://www.w3schools.com">Visit W3Schools.com!</a></p> <p>The background attribute was deprecated in HTML 4, and is not supported in HTML 4.01 Strict DTD or in XHTML 1.0 Strict DTD. Use CSS instead.</p> </body> </html>
  • 28.
  • 29. <html> <body bgcolor="#ff0000"> <h1>Hello world!</h1> <p><a href="http://www.w3schools.com">Visit W3Schools.com! </a></p> <p><b>Tip:</b> To produce equal results in all browsers, always use hex code to specify colors.</p> <p>the bgcolor atribute is used to give color to backgroung.</p> </body> </html>
  • 30.
  • 31.
  • 32.
  • 33. The most common HTML lists are ordered and unordered lists: HTML Lists An ordered list: 1. The first list item 2. The second list item 3. The third list item An unordered list:  List item  List item  List item
  • 34. HTML Unordered Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). example <ul> <li>Coffee</li> <li>Milk</li> </ul> How the HTML code above looks in a browser: • Coffee • Milk
  • 35. HTML Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers. example <ol> <li>Coffee</li> <li>Milk</li> </ol> How the HTML code above looks in a browser: 1. Coffee 2. Milk
  • 36. Style Tags/html text formatting  <u> for underline</u>  <sup>for superscript</sup>  <sub>for subscript</sub>  <strike> for striked text</strike>  <i> for italic text</i>  <b> for bold text</b>
  • 37. <html> <body> <b>This text is bold</b> <strong>This text is strong</strong> <i>This text is italic</i> This is<sub> subscript</sub> and <sup>superscript</sup> another example of subscript ans superscript is (a+b)<sup>2</sup>=a<sup>2</sup>+<sup>2</sup>+2ab <br> chlorine gas formula isCL<sub>2</sub> <strike> This is an example of strike out text</strike> <u>This text is underlined.HTML provides various style tags></u> </body> </html>
  • 38. This text is bold This text is strong This text is italic This is subscript and superscript another example of subscript ans superscript is (a+b)2=a2+2+2ab chlorine gas formula isCL2 This is an example of strike out text This text is underlined.HTML provides various style tags>
  • 39. Align Specifies the alignment of a <hr> element noshadeSpecifies that a <hr> element should render in one solid color (noshaded), instead of a shaded color size Specifies the height of a <hr> element Width Specifies the width of a <hr> element
  • 40. <html> <body> <h1>HTML</h1> <p>HTML is a language for describing web pages.</p> <hr> <h1>CSS</h1> <p>CSS defines how to display HTML elements.</p> <hr size=4> it is used to define the<b> thickness</b> of the line <hr width= 70%> it defines the <b>width of the line(size) </b>70% of the page width <hr width = 50 noshade>here the line is define in <b>pixel value of 50 and there is no shade</b> given to the line </body> </html>
  • 41.
  • 42. <html> <body> <h2>Norwegian Mountain Trip</h2> <img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228"> </body> </html>
  • 43.
  • 44. Alt : The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. Height : The height attribute specifies the width of an image, in pixels. Width: The width attribute specifies the width of an image, in pixels.
  • 46. <html> <body> <img src="smiley.gif" alt="Smiley face" width="50" height="400"> </body> </html>
  • 47. <html> <body> <img src="smiley.gif" alt="Smiley face" width="450" height="100"> </body> </html>
  • 48. <html> <body> <img src="smiley.gif" alt="Smiley face" width="100" height="100" border="5"> <p>The border attribute give border to the image in HTML.you can define the border width as border="10" </p> </body> </html>
  • 49.
  • 50. The <font> tag specifies the font face, font size, and font color of text.  color: Specifies the color of text  Size: Specifies the size of text  Face: Specifies the font of text  Base font tag: it is used to give default font size ,color, face to the en  tire page
  • 51. <html> <body> <font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text! </font> <basefont size="6" >This is some text in base font! </body> </html>
  • 52.
  • 53. The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
  • 54. <html> <body> <!--This is a comment. Comments are not displayed in the browser--> This is a html web page with comments and these comments are not displayed </body> </html>
  • 55.
  • 56. <html> <body> <pre> <font size =8> &#8704 &#8705 &#8706 &#8707 &#8708 &#8709 &#8710 &#8711 &#8712 &#8713 &#8714 &#8715 &#8716 &#8717 &#8718 </pre> </body> </html>
  • 57. <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. <font size =3> ------------------------------------- Sl no Name ------------------------------------- 1 Ayesha 2 Radhika ------------------------------------- </pre> </body> </html>
  • 58.
  • 59. The href attribute specifies the URL of the page the link goes to. If the href attribute is not present, the <a> tag is not a hyperlink. Syntax <a href="URL">
  • 60. <html> <body> <p>An absolute URL: <a href="http://www.w3schools.com"> W3Schools</a></p> <p>A relative URL: <a href="tag_a.asp"> The a tag</a></p> </body> </html>
  • 61. If we select the first URL W3 Schools then the following website will be opened
  • 62. Else if the selection is done for the second URL then following site will be displayed

Editor's Notes

  1. If