SlideShare una empresa de Scribd logo
1 de 23
Based on w3 schools

HTML, DHTML
UNIT II

INT355 – Internet and Web Technology
HTML







HTML – Hyper Text Markup Language
A markup language is a modern system for
annotating a document in a way that is
syntactically distinguishable from the text.
Markup languages For the processing, definition
and presentation of text.
Specifies code for formatting, both the layout and
style
HTML





Code used to specify format are called tags.
Tags – describe content
HTML document contains – tags and plain text
HTML documents – Web pages
HTML Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Example








The Doctype defines the ‘doctype’
Webpage defined between <html></html>
Visible content between <body></body>
HTML tags normally come pairs: start tag, end
tag
<tagname> content </tagname>
Content with tagname – HTML Element
HTML Versions
<DOCTYPE>


A normal doctype consists of the following parts,
in exactly the following order:
Any case-insensitive match for the string
"<!DOCTYPE"
 One or more space characters
 Any case-insensitive match for the string "HTML"
 Optionally, one or more space characters
 A ">" character




Example: <!DOCTYPE html>
<DOCTYPE>


A deprecated doctype consists of the following parts, in exactly the following order:


Any case-insensitive match for the string "<!DOCTYPE"



One or more space characters



Any case-insensitive match for the string "HTML"



One or more space characters



Any case-insensitive match for the string "PUBLIC"



One or more space characters



A quote mark (public ID), consisting of either a """ character or a "'" character



A permitted public ID



A matching quote mark (public ID), identical to the quote mark (public ID) used earlier (either a """ character or a "'" character)



Conditionally, depending on whether it is part of a permitted-public-ID-system-ID-combination, the following parts, in exactly the following order:


One or more space characters.



A quote mark (system ID), consisting of either a """ character or a "'" character



A permitted system ID



A matching quote mark (system ID), identical to the quote mark (system ID) used earlier (either a """ character or a "'" character)





Optionally, one or more space characters.
A ">" character

Example: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<DOCTYPE>
HTML Structure
HTML Elements
Empty HTML Elements




HTML elements with no content are called
empty elements.
Tip: In XHTML, all elements must be closed.
Adding a slash inside the start tag, like <br />,
is the proper way of closing empty elements in
XHTML (and XML).
HTML Attributes






HTML elements can have attributes
Attributes provide additional information
about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like:
name="value"
Attributes example








<a href="http://www.w3schools.com">This is a
link</a>
Attribute values should always be enclosed in
quotes.
Double style quotes are the most common, but
single style quotes are also allowed.
In some rare situations, when the attribute value
itself contains quotes, it is necessary to use single
quotes: name='John "ShotGun" Nelson'
HEAD Element




The <head> element is a container for all the
head elements. Elements inside <head> can
include scripts, instruct the browser where to
find style sheets, provide meta information,
and more.
The following tags can be added to the head
section: <title>, <style>, <meta>, <link>,
<script>, <noscript>, and <base>.
Title Element





The <title> tag defines the title of the document.
The <title> element is required in all
HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar
 provides a title for the page when it is added to
favorites
 displays a title for the page in search-engine results

Example


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Base Element




The <base> tag specifies the base URL/target
for all relative URLs in a page:
Example
 <head>

 <base

href="http://www.w3schools.com/images/"
target="_blank">
 </head>
Meta Element









Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
parsable.
Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other
metadata.
The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services.
<meta> tags always go inside the <head> element.
Example


Define keywords for search engines:




Define a description of your web page:




<meta name="description" content="Free Web tutorials on HTML
and CSS">

Define the author of a page:




<meta name="keywords" content="HTML, CSS, XML, XHTML,
JavaScript">

<meta name="author" content="Hege Refsnes">

Refresh document every 30 seconds:


<meta http-equiv="refresh" content="30">
Script Element


The <script> tag is used to define a client-side
script, such as a JavaScript.
HTML Entities







Some characters are reserved in HTML.
It is not possible to use the less than (<) or greater
than (>) signs in your text, because the browser will
mix them with tags.
To actually display reserved characters, we must use
character entities in the HTML source code.
A character entity looks like this:



&entity_name; OR
&#entity_number;
For More…




http://www.w3schools.com/html/html_quick.as
p
Thank you

Más contenido relacionado

La actualidad más candente (20)

Design Tools Html Xhtml
Design Tools Html XhtmlDesign Tools Html Xhtml
Design Tools Html Xhtml
 
HTML 5 Topic 2
HTML 5 Topic 2HTML 5 Topic 2
HTML 5 Topic 2
 
The Complete HTML
The Complete HTMLThe Complete HTML
The Complete HTML
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1
 
XML Introduction
XML IntroductionXML Introduction
XML Introduction
 
HTML Basic Tags
HTML Basic Tags HTML Basic Tags
HTML Basic Tags
 
HTML - part 1
HTML - part 1HTML - part 1
HTML - part 1
 
Html
HtmlHtml
Html
 
Xhtml
XhtmlXhtml
Xhtml
 
XML
XMLXML
XML
 
Html 5
Html 5Html 5
Html 5
 
Html5 attributes
Html5  attributesHtml5  attributes
Html5 attributes
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
 
web designing blogger html codes
web designing blogger html codesweb designing blogger html codes
web designing blogger html codes
 
XML
XMLXML
XML
 
IPW HTML course
IPW HTML courseIPW HTML course
IPW HTML course
 
Lectuer html1
Lectuer  html1Lectuer  html1
Lectuer html1
 
XML
XMLXML
XML
 

Similar a HTML Introduction (20)

Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
Uta005 lecture2
Uta005 lecture2Uta005 lecture2
Uta005 lecture2
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Html 1
Html 1Html 1
Html 1
 
Html full
Html fullHtml full
Html full
 
Html
HtmlHtml
Html
 
HTML and CSS Basics
HTML and CSS BasicsHTML and CSS Basics
HTML and CSS Basics
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html basics
Html basicsHtml basics
Html basics
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Tm 1st quarter - 1st meeting
Tm   1st quarter - 1st meetingTm   1st quarter - 1st meeting
Tm 1st quarter - 1st meeting
 
Html basics
Html basicsHtml basics
Html basics
 
html complete notes
html complete noteshtml complete notes
html complete notes
 
html compete notes basic to advanced
html compete notes basic to advancedhtml compete notes basic to advanced
html compete notes basic to advanced
 
Html tags
Html tagsHtml tags
Html tags
 

Último

Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
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
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3JemimahLaneBuaron
 
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
 
“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
 
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
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991RKavithamani
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
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
 

Último (20)

Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
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
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
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
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
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
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
“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...
 
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
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
Industrial Policy - 1948, 1956, 1973, 1977, 1980, 1991
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
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
 

HTML Introduction

  • 1. Based on w3 schools HTML, DHTML UNIT II INT355 – Internet and Web Technology
  • 2. HTML     HTML – Hyper Text Markup Language A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. Markup languages For the processing, definition and presentation of text. Specifies code for formatting, both the layout and style
  • 3. HTML     Code used to specify format are called tags. Tags – describe content HTML document contains – tags and plain text HTML documents – Web pages
  • 4. HTML Example <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 5. HTML Example       The Doctype defines the ‘doctype’ Webpage defined between <html></html> Visible content between <body></body> HTML tags normally come pairs: start tag, end tag <tagname> content </tagname> Content with tagname – HTML Element
  • 7. <DOCTYPE>  A normal doctype consists of the following parts, in exactly the following order: Any case-insensitive match for the string "<!DOCTYPE"  One or more space characters  Any case-insensitive match for the string "HTML"  Optionally, one or more space characters  A ">" character   Example: <!DOCTYPE html>
  • 8. <DOCTYPE>  A deprecated doctype consists of the following parts, in exactly the following order:  Any case-insensitive match for the string "<!DOCTYPE"  One or more space characters  Any case-insensitive match for the string "HTML"  One or more space characters  Any case-insensitive match for the string "PUBLIC"  One or more space characters  A quote mark (public ID), consisting of either a """ character or a "'" character  A permitted public ID  A matching quote mark (public ID), identical to the quote mark (public ID) used earlier (either a """ character or a "'" character)  Conditionally, depending on whether it is part of a permitted-public-ID-system-ID-combination, the following parts, in exactly the following order:  One or more space characters.  A quote mark (system ID), consisting of either a """ character or a "'" character  A permitted system ID  A matching quote mark (system ID), identical to the quote mark (system ID) used earlier (either a """ character or a "'" character)    Optionally, one or more space characters. A ">" character Example: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 12. Empty HTML Elements   HTML elements with no content are called empty elements. Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).
  • 13. HTML Attributes     HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
  • 14. Attributes example     <a href="http://www.w3schools.com">This is a link</a> Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed. In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name='John "ShotGun" Nelson'
  • 15. HEAD Element   The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
  • 16. Title Element    The <title> tag defines the title of the document. The <title> element is required in all HTML/XHTML documents. The <title> element: defines a title in the browser toolbar  provides a title for the page when it is added to favorites  displays a title for the page in search-engine results 
  • 17. Example  <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 18. Base Element   The <base> tag specifies the base URL/target for all relative URLs in a page: Example  <head>  <base href="http://www.w3schools.com/images/" target="_blank">  </head>
  • 19. Meta Element      Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. <meta> tags always go inside the <head> element.
  • 20. Example  Define keywords for search engines:   Define a description of your web page:   <meta name="description" content="Free Web tutorials on HTML and CSS"> Define the author of a page:   <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <meta name="author" content="Hege Refsnes"> Refresh document every 30 seconds:  <meta http-equiv="refresh" content="30">
  • 21. Script Element  The <script> tag is used to define a client-side script, such as a JavaScript.
  • 22. HTML Entities     Some characters are reserved in HTML. It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags. To actually display reserved characters, we must use character entities in the HTML source code. A character entity looks like this:   &entity_name; OR &#entity_number;

Notas del editor

  1. An annotation is metadata (e.g. a comment, explanation, presentational markup) attached to text, image, or other data.Metadata is &quot;data about data&quot;.