Scribd
Upload
23 views

Hyper Text Markup Language

HTML is a markup language used to structure and present content on the World Wide Web. It was developed by Tim Berners-Lee in the early 1990s and standardized by the W3C. Key points from the document: - HTML uses tags to define headings, paragraphs, lists, and other elements. It tells web browsers how to display web pages. - Important HTML tags include <html>, <head>, <title>, <body>, <h1>-<h6> for headings, <p> for paragraphs, <ul> and <ol> for unordered and ordered lists, and <img> for images. - HTML documents must include a <DOCTYPE> declaration specifying which version of

Uploaded by

නවියා Naviya
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views

Hyper Text Markup Language

HTML is a markup language used to structure and present content on the World Wide Web. It was developed by Tim Berners-Lee in the early 1990s and standardized by the W3C. Key points from the document: - HTML uses tags to define headings, paragraphs, lists, and other elements. It tells web browsers how to display web pages. - Important HTML tags include <html>, <head>, <title>, <body>, <h1>-<h6> for headings, <p> for paragraphs, <ul> and <ol> for unordered and ordered lists, and <img> for images. - HTML documents must include a <DOCTYPE> declaration specifying which version of

Uploaded by

නවියා Naviya
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

HYPER TEXT MARKUP LANGUAGE

HTML
BACK GROUND OF HTML
• Used to write to HTML documents knows as web
pages.
• Its output can be viewed in any browser.
• Once pages are created we can upload these
pages using any FTP software.
• The web depends upon three things -
– URL (uniform naming scheme for locating resources
over the web.
– Name/ ID of the machine hosting the resources.
– Name/ ID of the resource itself.
HISTORY OF HTML
• A method where ordinary text can be converted
into hypertext.
• Set of special codes included to control the
layout and appearance of the text.
• HTML is not a programming language.
• Tells the browser, how to display the contents.
• Tim Berners Lee developed HTML in early 1990’s.
• W3C is the body which controls the HTML
standards.
• HTML is subset of SGML, originated in 1960
DOCUMENT TYPES IN HTML

• The <!DOCTYPE> declaration must be the very


statement in your HTML document, before the
<html> tag.

• The <!DOCTYPE> declaration is not an HTML tag; it


is an instruction to the web browser about what
version of HTML the page is written in.
 In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD
(DOCTYPE Declaration), because HTML 4.01 was based on SGML
(Standard Generalized Markup Language).

 The DTD specifies the rules for the markup language, so that the
browsers render the content correctly.

 HTML5 is not based on SGML, and therefore does not require a


reference to a DTD.
WHAT DOES THE DOCTYPE DECLARATION (DTD) DO?
• The DOCTYPE Declaration (DTD or Document Type Declaration) does a
couple of things:

• When performing HTML validation testing on a web page, it tells the


HTML validator which version of HTML standard the web page coding is
supposed to comply with.

• When you validate your web page the HTML validator checks the coding
against the applicable standard then reports which portions of the
coding do not pass HTML validation.
WHAT HAPPENS IF THE DOCTYPE DECLARATION (DTD) IS
NOT INCLUDED OR IS INCORRECT?
 You will not be able to use a HTML validator to check the
page coding. HTML validation requires the DOCTYPE
declaration.

 The browser rending the web page will process the coding in
Quirks Mode.

 The style sheet may not be implemented as planned.

Note: Quirks mode refers to a technique used by some web


browsers for the sake of maintaining backward compatibility
with web pages designed for older browsers.
STRUCTURE OF HTML DOCUMENT
• It have two parts on-code and an off-code. They are
called as tags.
• Working with HTML document
– Write source code using any text editor.
– Save file with HTML extension.
– View it in any web browser i.e internet explorer or
netscape navigator.
• TAG = refers to the HTML codes that define the
element in an HTML file.
– Container tag = consists of two tags, a start tag and an
end tag which enclose the text they effect.
– Empty tag= standalone tag, a start tag and no end tag.
– Attribute = included with actual tag, either within start
tag or an empty tag. End tag don’t have attribute.
• Any HTML page have
– The HTML tag
– The Title tag
– The Head tag
– The Body tag.
<HTML> ….</HTML>
• The <html> tag tells the browser that this is an
HTML document.
• The <html> tag represents the root of an HTML
document.
• The <html> tag is the container for all other HTML
elements.
<HEAD>….</HEAD>
• The <head> element is a container for all the head
elements.
• The following elements can go inside the <head>
element:
• <title> (this element is required in the head section)
• <style>
• <base>
• <link>
• <meta>
• <script>
• <noscript>
<TITLE>….</TITLE>
• The <title> tag is required in all HTML documents
and it defines the title of the document.
• 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
<BODY>….</BODY>
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML
document, such as text, hyperlinks, images, tables, lists, etc.
• Its major attributes
– Alink = color (Specifies the color of an active link in a
document)
– Background = url (Specifies a background image for a
document)
– Bgcolor=color (Specifies the background color of a document)
– Link = color (Specifies the color of unvisited links in a
document)
– Text = color (Specifies the color of the text in a document)
– Vlink = color (Specifies the color of visited links in a document)
<P>
• The <p> tag defines a paragraph.
• Browsers automatically add some space (margin)
before and after each <p> element.
• The margins can be modified with CSS (with the
margin properties).
• Major attributes
– Align = right, left, center, justify (Specifies the alignment
of the text within a paragraph)
TEXT FORMATTING
• <b>…</b>
– The <b> tag specifies bold text.
• <i>…..</i>
– The content of the <i> tag is usually displayed in italic.
• <u>….</u>
– The <u> tag represents some text that should be stylistically
different from normal text.
• <big>….</big>
– Make text bigger than normal
• <small>…</small>
– The <small> tag defines smaller text.
• <em>…..</em>
– The <em> tag is a phrase tag. It renders as emphasized text.
• <samp>….</samp>
– Defines sample output from a computer program
• <kbd>….</kbd>
– Defines keyboard input

• <del>….</del>
– The <del> tag defines text that has been deleted from a
document.
• <strike>….</strike>
– The text will be displayed with single strike through line.
• <strong>....</strong>
– Used to emphasize text more, which usually appears in
bold, but can vary according to your browser.
• <sub>….</sub>
– Defines subscripted text below the normal text.
• <sup>….</sup>
– Defines superscripted text above the normal text.
• <ins>….</ins>
– Defines inserted text.
• <mark>….</mark>
– Defines marked/highlighted text.
• <pre> ….</pre>
– Any text, including spaces, carriage returns and punctuation,
will appear in the browser as it would in a text editor
(normally browsers ignore multiple spaces).
– Its attribute is width which specifies the number of
characters per line
• <code>….</code>
– Commonly used to show source code.
• <tt>…. </tt>
– The text appears to have been typed by a typewriter.
• <blockquote>…. </blockquote>
– Defines a long quotation, and the quote is displayed with
an extra wide margin on the left hand side of the block
quote.
• <center>….</center>
– It makes everything in between the tags centered (in the
middle of the page).
<H1> TO <H6>
• The <h1> to <h6> tags are used to define HTML
headings.
• <h1> defines the most important heading.
• <h6> defines the least important heading.
• Its major attributes –
– Align = left, center, right and justify
<FONT>…..</FONT>
• The <font> tag specifies the font face, font size, and
font color of text.
• Its major attributes
– Color = specifies the color of text
– Face = specifies the font style of text
– Size = specifies the size of the text
<HR>
• The <hr> tag defines a thematic break in an HTML
page (e.g. a shift of topic).
• The <hr> element is used to separate content (or
define a change) in an HTML page.
• Its major attributes
– Align = left, right, center
– Noshade = Specifies that a <hr> element should render
in one solid color (noshaded), instead of a shaded color
– Size = Specifies the height of a <hr> element in pixels
– Width = Specifies the width of a <hr> element in %pixels.
<BR>
• The <br> tag inserts a single line break.
• It don’t have any attributes
<Q>
• The <q> tag defines a short quotation.
• Browsers normally insert quotation marks around
the quotation
<FIGURE>…..</FIGURE>
• The <figure> tag specifies self-contained content,
like illustrations, diagrams, photos, code listings,
etc.
<IMG>
• The <img> tag defines an image in an HTML page.
• Its attributes are –
– Src = Specifies the URL of an image.
– Align = Specifies the alignment of an image according to
surrounding elements (top, bottom, middle, left and right)
– Height= Specifies the height of an image in pixels
– Width = specified the width of an image in pixels
– Hspace = Specifies the whitespace on left and right side of an
image in pixels
– Vspace = Specifies the whitespace on top and bottom of an
image in pixels
– Border = Specifies the width of the border around an image
in pixels
– Alt = Specifies an alternate text for an image
USING LIST IN HTML
PURPOSE OF USING LIST
• Can be used to show sequence of data
• Can be used to show data without any sequence
• Can be used to show sequences and
unsequenced data together.
• Can be used to describe the facts also.
TYPES OF LISTS
• Ordered List
• Unordered List
• Nested List
• Definition List
ORDERED LIST
• Used to display sequenced or arranged data.
• Implemented with tags like
• <ol>
<li>……</li>
<li>……</li>
</ol>
• Attributes of <ol>
– Type = “A”,”a”,”1”,”I”,”i”
– Start = when we have to start listing from other than default
starting point
• Attributes of <li>
– Value = when we have to give particular value to the current list
item rest will continue
UNORDERED LIST
• Used when no sequenced or arranged data is to be displayed.
• Implemented with tags like
• <ul>
<li>……</li>
<li>……</li>
</ul>
• Attributes of <ul>
– Type = “Square”, ”Circle”, ”Disk”
NESTED LIST
• Used when we have to place ordered list within an unordered
list and vise versa.
• Implemented with tags like
• <ul>
<li>……</li>
<ol>
<li>….</li>
<li>….</i>
</ol>
</ul>
DEFINITION LIST
• Used when we have to discuss terms and their definitions
• Implemented with tags like
• <dl>
<dt>……</dt>
<dd>……</dd>
</dl>
USING EMBED TAG
• The HTML <embed> tag is used to embed
multimedia in an HTML document.
• We can use <noembed> tag along with this tag to
handle browsers who do not support embed tag.
• <embed src="yourfile.mid" autostart="true"
hidden="false" loop="false">
• <noembed><bgsound src="yourfile.mid"
loop="1"></noembed>
ATTRIBUTES OF EMBED TAG
• Src = used to define the source to be embeded.
• Align = Left, Right, Center
• Autostart = “1” or “0”. Indicates if sound start automatically
or not.
• Controls = used to display controls
• Loop = specifies the number of times the sound would be
played continuously.
• Height = Height of the object in pixels or en.
• Width = Width of the object in pixels or en.
<VIDEO>….</VIDEO>
• <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
• Autoplay = Specifies that the video will start playing as soon as
it is ready.
• Controls = Specifies that the video will start playing as soon as it
is ready.
• Loop = Specifies that the video will start over again, every time
it is finished.
• Muted = Specifies that the audio output of the video should be
muted.
• Src = Specifies the URL of the video file.
• Height = Sets the height of the video player.
• Width = Sets the width of the video player.
THANKS

You might also like