Span and Div tags in HTML

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    1 Favorite

    Span and Div tags in HTML - Presentation Transcript

    1. SPAN and DIV By Biswadip Goswami (C) Biswadip Goswami, [email_address]
    2. Introduction
      • The <span> and <div> tags are very useful when dealing with Cascading Style Sheets. People tend to use the two tags in a similar fashion, but they serve different purposes.
      (C) Biswadip Goswami, [email_address]
    3. <DIV>
      • The <div> tag defines logical divisions (defined) in your Web page. It acts a lot like a paragraph tag, but it divides the page up into larger sections.
      • <div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text.
      (C) Biswadip Goswami, [email_address]
    4. More about <Div>
      • The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.
      • One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can't have a <div> inside a paragraph.
      (C) Biswadip Goswami, [email_address]
    5. Attributes in <div>
      • Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using <div style=&quot;text-align: center;&quot;> to center the content inside your div.
      • The primary attributes of the <div> tag are:
      • style
      • class
      • id
      • <div id=&quot;scissors&quot;> <p>This is <strong class=&quot;paper&quot;>crazy</strong></p> </div>
      (C) Biswadip Goswami, [email_address]
    6. SPAN
      • The <span> tag has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag won't change the enclosed items at all.
      • <div id=&quot;scissors&quot;> <p>This is <span class=&quot;paper&quot;>crazy</span></p> </div>
      (C) Biswadip Goswami, [email_address]
    7. The difference
      • The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>.
      • a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
      (C) Biswadip Goswami, [email_address]
    8. Example
      • <span style=&quot;color : #f00;&quot;>2ndWord</span>
      • Span tag - syntax <SPAN Attribute=value> * text OR tags span applies to * </SPAN> Allowed Attributes: ID = string CLASS = string STYLE = string TITLE = string LANG = Language (i.e. RU - Russian) DIR = ltr|rtl; specifies if text reads left to right or right to left. SCRIPTING EVENTS = string
      (C) Biswadip Goswami, [email_address]
    9. Thank You !
      • For assistance with your ASP.Net requirements contact:
      • Biswadip Goswami
      • Primary e-mail: [email_address]
      • Alt e-mail: [email_address]
      • Webpage: http://people.cognobytes.com/biswadip
      (C) Biswadip Goswami, [email_address]
    SlideShare Zeitgeist 2009

    + Biswadip GoswamiBiswadip Goswami Nominate

    custom

    1666 views, 1 favs, 1 embeds more stats

    This slide guides through the differences of the Sp more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1666
      • 1665 on SlideShare
      • 1 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 21
    Most viewed embeds
    • 1 views on http://b-rocks-domain.blogspot.com

    more

    All embeds
    • 1 views on http://b-rocks-domain.blogspot.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories