SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt? (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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPCeline George
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfTechSoup
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxAnupkumar Sharma
 
Food processing presentation for bsc agriculture hons
Food processing presentation for bsc agriculture honsFood processing presentation for bsc agriculture hons
Food processing presentation for bsc agriculture honsManeerUddin
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfPatidar M
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxCarlos105
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxlancelewisportillo
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSJoshuaGantuangco2
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptxmary850239
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)lakshayb543
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designMIPLM
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Seán Kennedy
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPCeline George
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYKayeClaireEstoconing
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Celine George
 

Kürzlich hochgeladen (20)

How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
 
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptxMULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
MULTIDISCIPLINRY NATURE OF THE ENVIRONMENTAL STUDIES.pptx
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
Raw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptxRaw materials used in Herbal Cosmetics.pptx
Raw materials used in Herbal Cosmetics.pptx
 
Food processing presentation for bsc agriculture hons
Food processing presentation for bsc agriculture honsFood processing presentation for bsc agriculture hons
Food processing presentation for bsc agriculture hons
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdf
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
 
Keynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-designKeynote by Prof. Wurzer at Nordex about IP-design
Keynote by Prof. Wurzer at Nordex about IP-design
 
Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...Student Profile Sample - We help schools to connect the data they have, with ...
Student Profile Sample - We help schools to connect the data they have, with ...
 
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptxYOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
 
What is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERPWhat is Model Inheritance in Odoo 17 ERP
What is Model Inheritance in Odoo 17 ERP
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
 
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptxYOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
 

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;

Hinweis der Redaktion

  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;.