lesson-2-index

<!DOCTYPE html>
<html>
<head>
    <title>My Second Webpage</title>

    <!-- Internal CSS -->
    <style>
        /* Here you can write your internal CSS code. */
    </style>

    <!-- External CSS -->
    <!-- This is a link to external CSS file. this file consists only CSS code. -->
    <!-- It is common practice to use external CSS files. -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- HTML Paragraphs, lines, breaks and horizontal rule. -->
    <p>     A paragraph starts on a new line, and browsers automatically add some white space (margin) before and after paragraph.

        The browser will automatically remove any extra spaces and lines when the page is displayed so you can not edit final visual by adding extra spaces or extra lines iin your HTML code.     </p>

    <!-- To create a comment in your code, that will not be displayed in the internet browser use CTRL + / shortcut. -->
    <!-- Use ALT + Z shortcut to wrap worlds or find this tool under View -> Wrap Worlds. -->

    <br>
    <hr>

    <pre>      The text inside preserves element preserves      both spaces and breaks (but change font).     </pre>

    <!-- HTML formatting -->
    <p>
        Change a style of text can be done inside paragraph element.

        <em>The emphasized text - content inside is displayed in italic. Screen reader sill pronounce the worlds in emphasis using verbal stress.</em>

        <i>Text has voice, mood, or role that's different from that of the regular text. Content inside is displayed in italic.</i>

        <strong>Defines text with string importance. Content is typically displayed in bold.</strong>

        <b>Bold text, without any extra importance.</b>

        <mark>Defines text that should be marked or highlighted.</mark>

        <del>Text that has been deleted from document. Strike a line through.</del>

        <ins>Text that has been inserted into document. Underline inserted text.</ins>
    </p>

    <!-- HTML Links and Image -->
    <!-- External links -->
    <!-- Using Relative URL. Full web address. -->
    <a href="https://www.bbc.co.uk/">BBC news</a>

    <!-- Internal links. Local link, a link to a age within the same website. -->
    <a href="/lesson-2/elephant.jpeg">This can be internal webpage, image, pdf, etc.</a>

    <!-- src - specifies the path to image. alt - specifies an alternative text for image -->
    <!-- Fill out the alt all the time. -->
    <img src="https://www.txautism.net/assets/uploads/images/elephant.jpeg" alt="elephant">

    <!-- Basic CSS -->
    <!-- Inline CSS by using the style attribute inside HTML element (opening tag)n -->
    <h1 style="color: blue;">A Blue Heading</h1>

    <p style="  color:yellow;
                background-color: red;
                font-family: 'Courier New', Courier, monospace;
                font-size: 20px;
                text-align: center;">
        This paragraph has yellow text, red background, specific font family, size of text 20px and it is aligned to center.
    </p>
</body>
</html>