Scribd Logo
Upload

Welcome to Scribd!

  • 452 - WD1 - Lectures - 03

    Uploaded by

    M A
    1 views18 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1 views18 pages

    452 - WD1 - Lectures - 03

    Uploaded by

    M A

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 18

    Web Development 1

    Lecture 03: Lists, Entity Characters & Styling

    Dr. Majdah Alsharif © 2023


    HTML Lists

    1) Unordered List
    2) Ordered list
    3) Description list
    HTML Lists: Unordered List
    <ul> , <li> tags

    • It starts with the <ul> tag


    • Each list item starts with the <li> tag
    • Syntax
    <ul>
    <li>item#1</li>
    .
    <li>item#n</li>
    </ul>
    • See Example 8
    Example 8
    HTML Lists: Ordered List
    <ol> , <li> tags

    • It starts with the <ol> tag


    • Each list item starts with the <li> tag
    • Syntax
    <ol>
    <li>item#1</li>
    .
    <li>item#n</li>
    </ol>
    • See Example 9
    Example 9
    HTML Lists: Description List
    <dl> , <dt> , <dd> tags

    • It is a list of terms, with a description of each term


    • The <dl> tag defines a description list, <dt> tag defines the term, <dd> tag defines the data
    • Syntax
    <dl>
    <dt>item#1</dt>
    <dd>item#1 description</dd>
    .
    <dt>item#n</dt>
    <dd>item#n description</dd>
    </dl>
    • See Example 10
    Example 10
    HTML Character Entities

    • They are used to replace the following:


    1) HTML reserved characters (like <)
    2) characters which are not present on the keyboard like mathematical, and currency symbols (like ©)
    • Character Entities are added to the code using names (case sensitive ) or numbers
    • The advantage of using an entity name, is that its easier to remember. The disadvantage is that
    browsers may not support all entity names, but the support for numbers is better
    • Syntax (1)
    &entity_name;
    • Syntax (2)
    &#entity_number;
    • See Example 11
    HTML Character Entities

    List of the most used Character Entities


    Example 11
    HTML Styling

    • Formatting elements were designed to display special types of text, like important text,
    subscripts, and superscripts, etc
    • HTML styling is about changing or adding the style of existing HTML elements
    • Every HTML element has a default style (background color is white, text color is black ...)
    • Changing the default style of an HTML element, can be done in 3 ways. For the time being, we’ll
    use the method with the <style> element
    • the <style> element must be defined inside the HTML <head> element
    • Inside the <style> element, one or more attributes exist alongside their values to control the
    styling process
    HTML Styling
    background-color property

    • Every HTML element has a default style (background color is white)


    • It sets the background color of an element
    • Syntax
    background-color: colourname;
    • Click here to see a table of HTML color names
    • See Example 12

    List of the most used color names


    Example 12
    HTML Styling
    color property

    • Every HTML element has a default style (text color is black)


    • The color property sets the text-color for different elements
    • The default color for a page is defined in the body selector
    • Syntax
    color: colourname;
    • Click here to see a table of HTML color names
    • See Example 13

    List of the most used color names


    Example 13
    HTML Styling
    background-image property

    • It sets the background-image for any element


    • By default, a background-image is placed at the top-left corner of an element and repeated both
    vertically and horizontally
    • Syntax
    background-image: url ('image url');
    • See Example 14 (sets the background image for the page using the body element)
    Example 14

    You might also like