Scribd Logo
Upload

Welcome to Scribd!

  • Web s3-1-1

    Uploaded by

    minecrafthometours
    7 views11 pages

    Original Title

    web s3-1-1

    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

    Copyright:

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

    Web s3-1-1

    Uploaded by

    minecrafthometours

    Copyright:

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

    PROGRAM 1

    AIM: To create a Web Page that Displays Welcome to HTML

    CODE
    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    <h1>Welcome to HTML</h1>
    <p>Hello,This is My first paragraph.</p>
    </body>
    </html>

    OUTPUT
    PROGRAM 2
    AIM: Study HTML Headings

    CODE

    <!DOCTYPE html>
    <html>
    <body>

    <h1>This is heading 1</h1>


    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>

    </body>
    </html>

    OUTPUT
    PROGRAM 4

    AIM

    • Use the style attribute for styling HTML elements


    • Use background-color for background color
    • Use color for text colors
    • Use font-family for text fonts
    • Use font-size for text sizes
    • Use text-align for text alignment

    Set the background color for a page

    CODE

    <!DOCTYPE html>
    <html>
    <body style="background-color:powderblue;">

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

    </body>
    </html>

    Set background color for two different elements

    CODE

    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="background-color:powderblue;">This is a heading</h1>


    <p style="background-color:tomato;">This is a paragraph.</p>
    </body>
    </html>

    OUTPUT
    Set text color for an HTML element

    CODE

    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="color:blue;">This is a heading</h1>


    <p style="color:red;">This is a paragraph.</p>

    </body>
    </html>

    OUTPUT

    Set font-family property for an HTML element

    CODE

    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="font-family:verdana;">This is a heading</h1>


    <p style="font-family:courier;">This is a paragraph.</p>

    </body>
    </html>

    OUTPUT
    Set font-size property for an HTML element

    CODE

    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="font-size:300%;">This is a heading</h1>


    <p style="font-size:160%;">This is a paragraph.</p>

    </body>
    </html>

    OUTPUT

    Set text-align property for an HTML element

    CODE

    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="text-align:center;">Centered Heading</h1>


    <p style="text-align:center;">Centered paragraph.</p>

    </body>
    </html>

    OUTPUT
    PROGRAM 5

    AIM : Study HTML Text Formatting

    CODE

    <!DOCTYPE html>
    <html>
    <body>

    <p>This text is normal.</p>

    <p><b>This text is bold.</b></p>


    <p><strong>This text is important!</strong></p>
    <i>This text is italic</i> <br>
    <em>This text is emphasized</em> <br>
    <small>This is some smaller text.</small>
    <p>Do not forget to buy <mark>milk</mark> today.</p>
    <p>My favorite color is <del>blue</del> red.</p>
    <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
    <p>This is <sub>subscripted</sub> text.</p>
    <p>This is <sup>superscripted</sup> text.</p>

    </body>
    </html>

    OUTPUT
    PROGRAM 6
    AIM: Study HTML Lists
    CODE
    <!DOCTYPE html>
    <html>
    <body>
    <h2>An Unordered HTML List</h2>
    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>
    <h2>An Ordered HTML List</h2>
    <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>
    </body>
    </html>
    OUTPUT

    j
    HTML Links - Hyperlinks
    HTML links are hyperlinks.You can click on a link and jump to another document.When
    you move the mouse over a link, the mouse arrow will turn into a little hand.

    HTML Links - Syntax


    The HTML <a> tag defines a hyperlink. It has the following syntax:
    <a href="url">link text</a>

    The most important attribute of the <a> element is the href attribute, which indicates the link's
    destination.The link text is the part that will be visible to the reader.Clicking on the link text, will
    send the reader to the specified URL address.

    PROGRAM 7
    <!DOCTYPE html>
    <html>
    <body>
    <h1>HTML Links</h1>
    <p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
    </body>
    </html>

    OUTPUT
    HTML Images
    The HTML <img> tag is used to embed an image in a web page.

    Images are not technically inserted into a web page; images are linked to web pages. The <img>
    tag creates a holding space for the referenced image.
    The <img> tag is empty, it contains attributes only, and does not have a closing tag.
    The <img> tag has two required attributes:
    • src - Specifies the path to the image
    • alt - Specifies an alternate text for the image
    <img src="url" alt="alternatetext">

    PROGRAM 8
    AIM : Insert an Image to the HTML Document

    CODE

    <!DOCTYPE html>
    <html>
    <body>

    <h2>HTML Image</h2>
    <img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

    </body>
    </html>

    OUTPUT
    OUTPUT
    Experiment 4
    PROGRAM 11
    AIM : Develop a Web Page with Frorms and Its Controls

    CODE

    <!DOCTYPE html>
    <html>
    <body>
    <h2>HTML Forms</h2>
    <form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
    </form>

    </body>
    </html>

    OUTPUT

    You might also like