Scribd Logo
Upload

Welcome to Scribd!

  • Ekskul Web2

    Uploaded by

    Lutfi Atmaja
    5 views5 pages
    The document contains examples of using HTML comments, setting background and border colors, creating links within and outside pages, embedding images and setting their properties, linking images to other pages, and floating images within text. It demonstrates various HTML tags and attributes for formatting and styling text, colors, images and links on web pages.

    Original Description:

    Original Title

    ekskul web2

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains examples of using HTML comments, setting background and border colors, creating links within and outside pages, embedding images and setting their properties, linking images to other pages, and floating images within text. It demonstrates various HTML tags and attributes for formatting and styling text, colors, images and links on web pages.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    5 views5 pages

    Ekskul Web2

    Uploaded by

    Lutfi Atmaja
    The document contains examples of using HTML comments, setting background and border colors, creating links within and outside pages, embedding images and setting their properties, linking images to other pages, and floating images within text. It demonstrates various HTML tags and attributes for formatting and styling text, colors, images and links on web pages.

    Copyright:

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

    HTML Comment

    <!DOCTYPE html>

    <html>

    <body>

    <p>This is a paragraph.</p>

    <!-- <p>This is another paragraph </p> -->

    <p>This is a paragraph too.</p>

    </body>

    </html>

    Html colors

    Background color

    <!DOCTYPE html>

    <html>

    <body>

    <h1 style="background-color:DodgerBlue;">Hello World</h1>

    <p style="background-color:Tomato;">

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat.

    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper


    suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    </p>

    </body>

    </html>

    Border color

    <!DOCTYPE html>

    <html>

    <body>
    <h1 style="border: 2px solid Tomato;">Hello World</h1>

    <h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

    <h1 style="border: 2px solid Violet;">Hello World</h1>

    </body>

    </html>

    Html LINK

    <!DOCTYPE html>

    <html>

    <body>

    <h1>HTML Links</h1>

    <p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

    </body>

    </html>

    Link –blank

    <!DOCTYPE html>

    <html>

    <body>

    <h2>The target Attribute</h2>

    <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

    <p>If target="_blank", the link will open in a new browser window or tab.</p>

    </body>

    </html>

    HTML images

    <!DOCTYPE html>
    <html>

    <body>

    <h2>HTML Image</h2>

    <img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

    </body>

    </html>

    Gambar didalam folder

    <!DOCTYPE html>

    <html>

    <body>

    <h2>Images in Another Folder</h2>

    <p>It is common to store images in a sub-folder. You must then include the folder name in the src
    attribute:</p>

    <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

    </body>

    </html>

    Animasi images

    <!DOCTYPE html>

    <html>

    <body>

    <h2>Animated Images</h2>

    <p>HTML allows moving images:</p>

    <img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

    </body>
    </html>

    Images link

    <!DOCTYPE html>

    <html>

    <body>

    <h2>Image as a Link</h2>

    <p>The image is a link. You can click on it.</p>

    <a href="default.asp">

    <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">

    </a>

    </body>

    </html>

    Float images

    <!DOCTYPE html>

    <html>

    <body>

    <h2>Floating Images</h2>

    <p><strong>Float the image to the right:</strong></p>

    <p>

    <img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

    A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating
    image.
    </p>

    <p><strong>Float the image to the left:</strong></p>

    <p>

    <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

    A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating
    image.

    </p>

    </body>

    </html>

    You might also like