Scribd Logo
Upload

Welcome to Scribd!

  • 4 - HTML Text Formatting and Styles

    Uploaded by

    Aman Sikarwar
    26 views17 pages
    This document outlines a lecture on HTML text formatting and styles, describing various HTML tags for formatting text like bold, italics, and subscript. It discusses core HTML attributes like ID, title, class, and style that can be used on most elements and provides examples of using the style attribute to specify CSS rules for properties like colors, fonts, sizes, and alignment. The learning objectives are to understand HTML text formatting and attributes.

    Original Description:

    Original Title

    4_HTML Text Formatting and Styles

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document outlines a lecture on HTML text formatting and styles, describing various HTML tags for formatting text like bold, italics, and subscript. It discusses core HTML attributes like ID, title, class, and style that can be used on most elements and provides examples of using the style attribute to specify CSS rules for properties like colors, fonts, sizes, and alignment. The learning objectives are to understand HTML text formatting and attributes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    26 views17 pages

    4 - HTML Text Formatting and Styles

    Uploaded by

    Aman Sikarwar
    This document outlines a lecture on HTML text formatting and styles, describing various HTML tags for formatting text like bold, italics, and subscript. It discusses core HTML attributes like ID, title, class, and style that can be used on most elements and provides examples of using the style attribute to specify CSS rules for properties like colors, fonts, sizes, and alignment. The learning objectives are to understand HTML text formatting and attributes.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 17

    Program: B.

    tech, Semester-2, First Year


    CSL0202: Web Architecture and Design
    Unit No. 2
    HTML Text Formatting and Styles

    Lecture No. 4

    Neha Garg
    Assistant Professor, CSA/SOET
    Outlines
    • Prerequisite of topic
    • Problem Objective
    • HTML Text Formatting
    • HTML Attributes
    • Assignment
    • Learning Outcomes
    • Course Outcome (CO)
    • Program Outcome (PO)
    • References
    Prerequisite of topic
    • Students should have knowledge about the basics of HTML.
    Problem Objective
    • The objective of this lecture is to give knowledge about the HTML
    Text formatting and Text styling.
    HTML Text Formatting
    • Tags for the text styles add the distinction to certain characters of the
    text. HTML also defines special elements for defining text with a special
    meaning.
     <b> - Bold text
     <strong> - Important text
     <i> - Italic text
     <em> - Emphasized text
     <mark> - Marked text
     <small> - Smaller text
     <del> - Deleted text
     <ins> - Inserted text
     <sub> - Subscript text
     <sup> - Superscript text
    Reference No.: R1, R2
    Core Attributes
    • The four core attributes that can be used on the majority of HTML
    elements (although not all) are −
     Id
     Title
     Class
     Style

    Reference No.: R1, R2, R3


    The Id Attribute
    • The id attribute of an HTML tag can be used to uniquely identify any
    element within an HTML page.
    • Example:
    <p id = "html">This para explains what is HTML</p>

    <p id = "css">This para explains what is Cascading Style Sheet</p>

    Reference No.: R1, R2, R3


    The title Attribute
    • The title attribute gives a suggested title for the element. They syntax for
    the title attribute is similar as explained for id attribute.
    • Example:
    <!DOCTYPE html>
    <html>
    <head>
    <title>The title Attribute Example</title>
    </head>
    <body>
    <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
    </body>
    </html>
    Reference No.: R1, R2, R3
    The style Attribute
    • The style attribute allows you to specify Cascading Style Sheet (CSS)
    rules within the element.
    • The HTML style attribute has the following syntax:

    <tagname style="property:value;">

    • Use the style attribute for styling HTML elements


    • Use background-color for background color
    • Use color for text colors
    • Use font-family for text fonts
    • Use font-size for text sizes
    • Use text-align for text alignment

    Reference No.: R1, R2, R3


    The style Attribute
    • Background Color:
    <body style="background-color:powderblue;">

    <body>
    <h1 style="background-color:powderblue;">This is a heading</h1>
    <p style="background-color:tomato;">This is a paragraph.</p>
    </body>

    • Text Color:
    <h1 style="color:blue;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

    Reference No.: R1, R2, R3


    The style Attribute
    • Fonts:
    <h1 style="font-family:verdana;">This is a heading</h1>
    <p style="font-family:courier;">This is a paragraph.</p>

    • Text Size:
    <h1 style="font-size:300%;">This is a heading</h1>
    <p style="font-size:160%;">This is a paragraph.</p>

    • Text Alignment:
    <h1 style="text-align:center;">Centered Heading</h1>
    <p style="text-align:center;">Centered paragraph.</p>

    Reference No.: R1, R2, R3


    Assignment
    Q-1 Which of the following element is responsible for making the text bold
    in HTML?
    a) <pre>
    b) <a>
    c) <b>
    d) <br>

    Q-2 Which of the following property sets the size of the font?
    a) font-size
    b) font-variant
    c) font-style
    d) font-weight
    Learning Outcomes
    Students learn the following outcomes:

    • Understand the HTML Text Formatting.

    • Understand the HTML Attributes.


    Course Outcomes (CO)
    CO.1 Understanding: The basics of web architecture, Types of
    architecture, knowledge about web protocols and web development tools.
    CO.2: Applying: HTML, CSS, Javascript and XML web designing
    language to create Web pages.
    Program Outcome (PO)
    PO1. Engineering knowledge: Apply the knowledge of mathematics,
    science, engineering fundamentals, and an engineering specialization to the
    solution of complex engineering problems.

    PO2. Problem analysis: Identify, formulate, review research literature, and


    analyze complex engineering problems reaching substantiated conclusions
    using first principles of mathematics, natural sciences, and engineering
    sciences.

    PO12. Life-long learning: Recognize the need for, and have the
    preparation and ability to engage in independent and life-long learning in
    the broadest context of technological change.
    References
    1. John Duckett; Beginning HTML, XHTML, CSS, and JavaScript; Wrox
    (Wiley).
    2. N.P. Gopalan, J. Akilandeswari; Web Technology: A Developer’s
    Perspective; Prentice Hall of India.
    3. Ivan Bayross; Web Enabled Commercial Applications Development
    using HTML, DHTML, JavaScript, Perl CGI; BPB Publication.

    You might also like