Scribd Logo
Upload

Welcome to Scribd!

  • 26 views

    Lesson 5 HTML Fundamentals Part 4

    Uploaded by

    Royette Alaro
    Here are the steps to create a styled HTML table displaying information about favorite animals: 1. Create an HTML file with the basic table structure - <table>, <tr>, <th>, <td> tags. 2. Link an external CSS file to style the table. Add CSS rules for things like background colors, borders, padding. 3. Populate each <td> with information about 5 animals - name, image, 1-2 sentences about why it's a favorite. 4. Include an <img> tag in each <td> to display an image of each animal. 5. Add additional CSS styles like zebra striping, hover effects, captions. This allows you to

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Lesson 5 HTML Fundamentals Part 4

    Uploaded by

    Royette Alaro
    26 views72 pages
    Here are the steps to create a styled HTML table displaying information about favorite animals: 1. Create an HTML file with the basic table structure - <table>, <tr>, <th>, <td> tags. 2. Link an external CSS file to style the table. Add CSS rules for things like background colors, borders, padding. 3. Populate each <td> with information about 5 animals - name, image, 1-2 sentences about why it's a favorite. 4. Include an <img> tag in each <td> to display an image of each animal. 5. Add additional CSS styles like zebra striping, hover effects, captions. This allows you to

    Original Title

    Lesson-5-HTML-Fundamentals-Part-4

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Here are the steps to create a styled HTML table displaying information about favorite animals: 1. Create an HTML file with the basic table structure - <table>, <tr>, <th>, <td> tags. 2. Link an external CSS file to style the table. Add CSS rules for things like background colors, borders, padding. 3. Populate each <td> with information about 5 animals - name, image, 1-2 sentences about why it's a favorite. 4. Include an <img> tag in each <td> to display an image of each animal. 5. Add additional CSS styles like zebra striping, hover effects, captions. This allows you to

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    26 views72 pages

    Lesson 5 HTML Fundamentals Part 4

    Uploaded by

    Royette Alaro
    Here are the steps to create a styled HTML table displaying information about favorite animals: 1. Create an HTML file with the basic table structure - <table>, <tr>, <th>, <td> tags. 2. Link an external CSS file to style the table. Add CSS rules for things like background colors, borders, padding. 3. Populate each <td> with information about 5 animals - name, image, 1-2 sentences about why it's a favorite. 4. Include an <img> tag in each <td> to display an image of each animal. 5. Add additional CSS styles like zebra striping, hover effects, captions. This allows you to

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 72

    HTML

    FUNDAMENTALS
    PART 4
    HTML FAVICON
    HTML Favicon
    A favicon is a small image displayed next to the
    page title in the browser tab.
    How To Add a Favicon in HTML
    You can use any image you like as your favicon. You
    can also create your own favicon on sites like
    https://www.favicon.cc.

    Favicon images are small in size, only 16 pixels in


    height by 16 pixels in width, so there is not much
    space for complex designs.
    How To Add a Favicon in HTML
    Tip: A favicon is a small image, so it should be a
    simple image with high contrast.
    A favicon image is displayed to the left of the page
    title in the browser tab, like this:
    How To Add a Favicon in HTML
    To add a favicon to your website, either save your
    favicon image to the root directory of your
    webserver, or create a folder in the root directory
    called images, and save your favicon image in this
    folder.

    A common name for a favicon image is "favicon.ico".


    How To Add a Favicon in HTML
    Next, add a <link> element to your "index.html" file, after
    the <title> element, like this:

    Now, save the “Lesson 5.html" file and reload it in your


    browser. Your browser tab should now display your
    favicon image to the left of the page title.
    HTML Tables
    HTML Tables
    HTML tables allow web developers to arrange data
    into rows and columns.
    Define an HTML Table
    A table in HTML consists of table cells inside rows
    and columns.
    Table Cells
    Each table cell is defined by a <td> and a </td>
    tag.

    td stands for table data.

    Everything between <td> and </td> are the content


    of the table cell.
    Table Cells
    • Each table cell is defined by a <td> and a </td> tag.
    • td stands for table data.
    • Everything between <td> and </td> are the content
    of the table cell.
    • Note: A table cell can contain all sorts of HTML
    elements: text, images, lists, links, other tables, etc.
    Table Rows
    • Each table row starts with a <tr> and ends with a
    </tr> tag.
    • tr stands for table row.
    • You can have as many rows as you like in a table; just
    make sure that the number of cells are the same in
    each row.
    • Note: There are times when a row can have less or
    more cells than another.
    Table Headers
    • Sometimes you want your cells to be table
    header cells. In those cases use the <th> tag
    instead of the <td> tag:
    • th stands for table header.
    • By default, the text in <th> elements are bold
    and centered, but you can change that with CSS.
    HTML Table Borders
    HTML Table Borders
    HTML tables can have borders of different styles
    and shapes.
    How To Add a Border
    To add a border, use the CSS border property on
    table, th, and td elements:
    Collapsed Table Borders
    To avoid having double borders like in the example
    above, set the CSS border-collapse property to
    collapse.
    This will make the borders collapse into a single
    border:
    Style Table Borders
    If you set a background color of each cell, and give
    the border a white color (the same as the document
    background), you get the impression of an invisible
    border:
    Round Table Borders
    With the border-radius property, the borders get
    rounded corners:
    Round Table Borders
    Skip the border around the table by leaving out
    table from the css selector:
    Dotted Table Borders
    With the border-style property, you can set the
    appearance of the border.
    Border Visuals
    The following values are allowed:
    Border Color
    With the border-color property, you can set the color
    of the border.
    HTML Table Sizes
    HTML Table Sizes
    HTML tables can have different sizes for each
    column, row or the entire table.

    Use the style attribute with the width or height


    properties to specify the size of a table, row or
    column.
    HTML Table Width
    To set the width of a table, add the style attribute to
    the <table> element:
    HTML Table Width
    Note: Using a percentage as the size unit for a
    width means how wide will this element be
    compared to its parent element, which in this case
    is the <body> element.
    HTML Table Column Width
    To set the size of a specific column, add the style
    attribute on a <th> or <td> element:
    HTML Table Row Height
    To set the height of a specific row, add the style
    attribute on a table row element:
    HTML Table Headers
    HTML Table Headers
    HTML tables can have headers for each column or
    row, or for many columns/rows.
    HTML Table Headers
    Table headers are defined with th elements. Each
    th element represents a table cell.
    Vertical Table Headers
    To use the first column as table headers, define the
    first cell in each row as a <th> element:
    Align Table Headers
    By default, table headers are bold and centered:

    To left-align the table headers, use the CSS text-


    align property:
    Header for Multiple Columns
    You can have a header that spans over two or more
    columns.
    Header for Multiple Columns
    To do this, use the colspan attribute on the <th>
    element:
    Table Caption
    You can add a caption that serves as a heading for
    the entire table.

    To add a caption to a table, use the <caption> tag:


    Table Caption
    You can add a caption that serves as a heading for
    the entire table.

    To add a caption to a table, use the <caption> tag:


    HTML Table Padding
    & Spacing
    HTML Table Padding & Spacing
    HTML tables can adjust the padding inside the
    cells, and also the space between the cells.
    HTML Table - Cell Padding
    Cell padding is the space between the cell edges
    and the cell content.
    By default the padding is set to 0.
    To add padding on table cells, use the CSS padding
    property:
    HTML Table - Cell Padding
    To add padding only above the content, use the
    padding-top property.
    And the others sides with the padding-bottom,
    padding-left, and padding-right properties:
    HTML Table - Cell Spacing
    Cell spacing is the space between each cell.
    By default the space is set to 2 pixels.
    To change the space between table cells, use the
    CSS border-spacing property on the table element:
    HTML Table - Cell Spacing
    Cell spacing is the space between each cell.
    By default the space is set to 2 pixels.
    To change the space between table cells, use the
    CSS border-spacing property on the table element:
    HTML Table Colspan
    & Rowspan
    HTML Table Colspan & Rowspan
    HTML tables can have cells that span over multiple
    rows and/or columns.
    HTML Table - Colspan
    To make a cell span over multiple columns, use the
    colspan attribute:
    HTML Table - Rowspan
    To make a cell span over multiple rows, use the
    rowspan attribute:
    HTML Table Styling
    HTML Table Styling
    Use CSS to make your tables look better.
    HTML Table - Zebra Stripes
    If you add a background color on every other table
    row, you will get a nice zebra stripes effect.
    HTML Table - Zebra Stripes
    To style every other table row element, use the :nth-
    child(even) selector like this:
    HTML Table - Vertical Zebra Stripes
    To make vertical zebra stripes, style every other
    column, instead of every other row.
    HTML Table - Vertical Zebra Stripes
    Set the :nth-child(even) for table data elements like
    this:
    Combine Vertical and Horizontal
    Zebra Stripes
    You can combine the styling from the two examples
    above and you will have stripes on every other row
    and every other column.
    If you use a transparent color you will get an
    overlapping effect.
    Combine Vertical and Horizontal
    Zebra Stripes
    Use an rgba() color to specify the transparency of
    the color:
    Horizontal Dividers
    If you specify borders only at the bottom of each
    table row, you will have a table with horizontal
    dividers.
    Horizontal Dividers
    Add the border-bottom property to all tr elements to
    get horizontal dividers:
    Hoverable Table
    Use the :hover selector on tr to highlight table rows
    on mouse over:
    Activity!
    Activity
    Objective: Create a webpage that displays information
    about your favorite animals using an HTML table and
    apply some basic styling using CSS.
    1. Create the HTML Structure – 10 pts.
    2. Create a CSS File – 10 pts.
    3. Populate the Table (5 animals) – 10 pts.
    4. Images – 10 pts.
    5. Enhancements – 10 pts.
    Example Output
    My Favorite Animals
    Lion Elephant Dog Bird Horse
    I like horses
    I like lion because I like dogs I like birds
    I like elephants because they are
    it is strong and because it is a because they can
    because its BIG! fast and has BIG…
    brave mans best friend fly
    muscles!

    You might also like