Scribd
Upload
2 views

HTML UNIT 1

The document provides a comprehensive overview of HTML, detailing its background, history, structure, and various tags used for creating web pages. It explains the significance of elements like <html>, <head>, <title>, and <body>, as well as formatting tags and lists. Additionally, it covers multimedia embedding and attributes for video and embed tags.

Uploaded by

ndlovuivynm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
2 views

HTML UNIT 1

The document provides a comprehensive overview of HTML, detailing its background, history, structure, and various tags used for creating web pages. It explains the significance of elements like <html>, <head>, <title>, and <body>, as well as formatting tags and lists. Additionally, it covers multimedia embedding and attributes for video and embed tags.

Uploaded by

ndlovuivynm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 33

HYPER TEXT MARKUP

LANGUAGE
HTML
BACK GROUND OF HTML
• Used to write to HTML documents knows as web
pages. .HTML OR .HTM
• 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.
STRUCTURE OF HTML DOCUMENT
• It has 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 a 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.
• <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
– 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.
<figure>
<img src=“file name.jpg" alt=“any alternate name"
style="width:100%">
<figcaption>Fig.1 – Figure name.</figcaption>
</figure>
<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>
dl tag is known as description list
dt tag is known as data term
dd tag is know as data definition
<dl>
<dt> HTML </dt>
<dd> is a markup language </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>
Example
• <html>
• <body>

• <embed type="video/webm or image/jpg or


text/html " src="movie.mp4" width="400"
height="300">

• </body>
• </html>
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