Scribd Logo
Upload

Welcome to Scribd!

  • 11 views

    Assignment01 CC

    Uploaded by

    Cali Castro
    The document describes an exercise to create an HTML document describing a book and style it using CSS. Students will learn about meta tags and how CSS is rendered across browsers. They will create an HTML file with book details, add meta tags and CSS rules to style the page. The exercise tests the students' understanding of HTML structure, CSS selectors, and how specificity impacts which styles are applied.

    Copyright:

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

    You might also like

    Assignment01 CC

    Uploaded by

    Cali Castro
    11 views2 pages
    The document describes an exercise to create an HTML document describing a book and style it using CSS. Students will learn about meta tags and how CSS is rendered across browsers. They will create an HTML file with book details, add meta tags and CSS rules to style the page. The exercise tests the students' understanding of HTML structure, CSS selectors, and how specificity impacts which styles are applied.

    Original Description:

    HTML e CSS

    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
    The document describes an exercise to create an HTML document describing a book and style it using CSS. Students will learn about meta tags and how CSS is rendered across browsers. They will create an HTML file with book details, add meta tags and CSS rules to style the page. The exercise tests the students' understanding of HTML structure, CSS selectors, and how specificity impacts which styles are applied.

    Copyright:

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

    Assignment01 CC

    Uploaded by

    Cali Castro
    The document describes an exercise to create an HTML document describing a book and style it using CSS. Students will learn about meta tags and how CSS is rendered across browsers. They will create an HTML file with book details, add meta tags and CSS rules to style the page. The exercise tests the students' understanding of HTML structure, CSS selectors, and how specificity impacts which styles are applied.

    Copyright:

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

    Internet Applications – laboratory Points: 1

    HTML, CSS Deadline: 17(21).10.22

    HTML, CSS
    The goal of this exercise is to create an HTML document and defining its appearance using CSS.
    Additionally, students will learn the meaning of the <meta> tag and verify how CSS works across
    different browsers. To complete this exercise, you’ll need a text editor (I highly recommend VS Code)
    and a web browser.

    1. Create a new file book.html according to the following template and fill it with content describing
    your favorite book. Make sure that the description of the book spans across at least 3 paragraphs.

    <html>
    <head>
    <title>book title and author</title>
    <meta name="author" content="John Doe">
    <meta name="description" content="book description">
    </head>
    <body>
    <h1>book title</h1>
    <h2>book author</h2>
    <table>
    <tr>
    <td>
    <img src="front cover url" alt="front cover">
    </td>
    <td>
    <ul>
    <li><b>publisher</b>: <u>the publisher</u>
    <li><b>numer of pages</b>: number of pages
    <li><b>cover</b>: cover type
    <li><b>price</b>: price
    </ul>
    </td>
    </tr>
    <tr>
    <td colspan="2">description
    <p>description first paragraph</p>
    <p>description second paragraph </p>
    <p>description third paragraph </p>
    <p>description fourth paragraph </p>
    </td>
    </tr>
    </table>
    </body>
    </html>

    2. Insert some Polish symbols into the text and check if the browser correctly displays then and
    guesses the encoding. Add a <meta> tag in the head section of the page informing about the
    encoding and set it to utf-8, like below.
    <meta charset="utf-8">

    Refresh the document in the browser. Change the actual encoding of the file to iso88592 (without
    changing the meta tag). Refresh the page. Make sure you understand what’s going on and change
    it back to normal.

    3. In the head section of the document, add additional meta tags informing the search engines
    about the contents of the page.

    <meta name="description" content="internet applications, exercise, html, css">


    Internet Applications – laboratory Points: 1
    HTML, CSS Deadline: 17(21).10.22
    4. Inform the browser about the html version (5) by adding the document type declaration.

    5. Validate your document using the online validator available here: http://validator.w3.org/. If the
    document isn’t valid – fix it.

    6. In the head section of the document, add the 3 following CSS rules and check the effect in the
    browser.

    <style>
    * { font-family: Tahoma }
    body { margin: 5em 10em 5em 10em }
    p { text-align: justify }
    </style>

    7. Now, we will add an external stylesheet. Paste the following code in the head section of your
    page.

    <link rel="stylesheet" type="text/css" href="style.css" title="Stylesheet">

    8. Create a new file style.css and place it in the same directory as your document book.html. Pase
    the following line inside and inspect its effect on the document.

    li { list-style-type: square }

    9. Using some CSS selector reference (e.g., https://www.w3schools.com/cssref/css_selectors.asp),


    complete the following exercises.

    10. The price of the book should be clearly highlighted. Surround the prices with a <span> element
    with id price and compose a CSS rule which will make it red (color) and bold (font-weight).

    11. The first paragraph should be displayed with an italic font (font-style). Use a class attribute to
    achieve this.

    12. The boarder of the image of the image should be blue (border-color) and turn red on hover. Use
    an ancestor selector looking for img inside td.

    13. Set letter-spacing: 5px on all h2 elements appearing directly after h1.

    14. Set font-size: small in all paragraphs directly nested in table cells with colspan set to 2.

    15. Set a gray color in every paragraphs appearing directly after any other paragraph.

    16. Apply the following style to the body element of the document.

    background-image: url(books.png); background-repeat: repeat-y

    17. Play around with rule importance. Try to figure out what impacts which rules are more important
    than others if they concert the same element. Take rule order, source, placement, and selector
    composition into consideration. Add the !important clause in one of the conflicting rules and see
    how it influences its priority. Place one of the conflicting rules directly in the style attribute.

    18. Cleanup the document by removing all presentational tags, closing all unclosed tags, etc..

    You might also like