Scribd Logo
Upload

Welcome to Scribd!

  • 934 views

    MST 4220

    Uploaded by

    Haripriya Pandanaboina
    The documents provide code snippets and output for different HTML elements and attributes. This includes code examples for headings, paragraphs, links, lists, forms, and other common elements. Descriptions are given for each code example demonstrating the different HTML elements and features.

    Copyright:

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

    MST 4220

    Uploaded by

    Haripriya Pandanaboina
    934 views15 pages
    The documents provide code snippets and output for different HTML elements and attributes. This includes code examples for headings, paragraphs, links, lists, forms, and other common elements. Descriptions are given for each code example demonstrating the different HTML elements and features.

    Original Title

    Mst4220 (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The documents provide code snippets and output for different HTML elements and attributes. This includes code examples for headings, paragraphs, links, lists, forms, and other common elements. Descriptions are given for each code example demonstrating the different HTML elements and features.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Download as doc, pdf, or txt
    934 views15 pages

    MST 4220

    Uploaded by

    Haripriya Pandanaboina
    The documents provide code snippets and output for different HTML elements and attributes. This includes code examples for headings, paragraphs, links, lists, forms, and other common elements. Descriptions are given for each code example demonstrating the different HTML elements and features.

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Download as doc, pdf, or txt
    of 15

    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    WEEK-1A

    Module Name: Case-insensitivity, Platform-independency, DOCTYPE Declaration,Types of


    Elements, HTML Elements - Attributes, Metadata Element

    Aim: Include the Metadata element in Homepage.html for providing description as

    "IEKart's is an online shopping website that sells goods in retail. This company deals

    with various categories like Electronics, Clothing, Accessories etc.

    Description:

    The metadata means information about data.<meta> tag is used to represent the metadata about
    the HTML document. It specifies page description, keywords, copyright, language, author of the
    documents, etc.The metadata does not display on the webpage, but it is used by search engines,
    browsers and other web services which scan the site or webpage to know about the
    webpage.With the help of meta tag, you can experiment and preview that how your webpage will
    render on the browser.The <meta> tag is placed within the <head> tag, and it can be used more
    than one times in a document.
    Source code:

    <html>  

    <head>  

    <meta charset="utf-8">  

    <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">  

    <meta name="description" content="Free Online tutorials">  

    <meta name="author" content="thisauthor">  

    <meta http-equiv="refresh" content="5; url=https://www.javatpoint.com/html-tags-list">   

    <meta name="viewport" content="width=device-width, initial-scale=1.0">    

    </head>  

    <body>  

    <h2>Example of Meta tag</h2>  

    <p>This example shows the use of meta tag within an HTML document</p>  

    </body>  </html>  

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    WEEK-1E

    Module Name: Character Entities

    Aim: Add the Character Entites symbol in the Home page footer of IEKart's Shopping
    application.

    Source code:

    10 &nbsp; 20<br><br>

    10 &lt; 20<br><br>

    13 &gt; 4<br><br>

    10 &amp;&amp; 20<br><br>

    &quot; hello &quot;<br><br>

    &copy; <br><br>

    &euro;23<br><br>

    &pound;45<br><br>

    &dollar;35<br><br>

    &cent;455<br><br>

    &reg;<br><br>

    Output:

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    WEEK-1F

    Module Name: HTML5 Global Attributes

    Aim: Add the global attributes such as contenteditable, spellcheck, id etc. to enhance the

    Signup Page functionality of IEKart's Shopping application.

    Source code for contenteditable:

    <html>

    <head>

    <style>

    blockqoute{

    background: #eee;

    border-radius: 5px;

    margin: 16px 0;

    blockqoute p{

    padding: 15px;

    cite {

    margin: 16px 32px;

    font-weight: bold;

    </style>

    <body>

    <blockquote contenteditable="true">

    <p>welcome to html</p>

    </blockquote>

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    <cite contenteditable="TRUE">heloo....</cite>

    </body>

    </head>

    </html>

    Output:

    Source code for data-*:

    <html>

    <body>

    <ul>

    <li data-bird -type="peacock">Peacock

    <li data-bird -type="sparrow">sparrow

    </ul>

    </body>

    </html>

    Output:

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    WEEK-1C

    Module Name: Paragraph Element, Division and Span Elements, List Element

    Aim: Make use of appropriate grouping elements such as list items to "About Us" page of

    IEKart's Shopping Application.

    Source code for Paragraph:

    <html>

    <p>WELCOME TO THE PSCMR</p>

    </html>

    Output:

    Source code for Division:

    <html>

    <head>

    <style>

    #p1{background-color:red;}

    #p2{background-color:blue;}

    </style>

    </head>

    <body>

    <div id="p1">

    <p>hello world</p>

    </div>

    <div id="p2">

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    <p> Welcome</p>

    </div>

    </body>

    </html>

    Output:

    Source code for Span:

    <html>

    <body>

    <div>

    <p> Hello <span style='color:red;'>world</span></p>

    <p>welcome to PSCMRCET</p>

    <p>Thank <span style='color:blue;'>you</span></p>

    </div>

    </body>

    </html>

    Output:

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    Source code for Unordered list:

    <html><body>

    <ul><li>C++</li>

    <li>Java</li>

    <li>Python</li>

    </ul>

    </body></html>

    Output:

    Source code for Ordered List:

    <html><body>

    <ol>

    <li>HTML</li>

    <li>Selenium</li>

    <li>Pearl</li>

    </ol>

    </body>

    </html>

    Output:

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    WEEK-1D

    Module Name: Link Element

    Aim: Link "Login", "SignUp" and "Track order" to "Login.html", "SignUp.html" and

    "Track.html" page respectively. Bookmark each category to its details of IEKart's

    Shopping application

    Source code for login.html:


    <html>

    <form>

    <fieldset>

    <legend>LOGIN</legend>

    <label>Name:</label><input type="text"><br><br>

    <label>Passward:</label><input type="passward"><br><br>

    <button>Submit</button><br><br>

    </fieldset>

    </form>

    </html>

    Output:

    Source code for Signup.html:

    <html>

    <form>

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    <fieldset>

    <legend>SIGN UP</legend>

    <label>Name:</label><input type="text"><br><br>

    <label>Email:</label><input type="email"><br><br>

    <label>Passward:</label><input type="passward"><br><br>

    <label>Confrim Passward:</label><input type="passward"><br><br>

    <button>Submit</button><br><br>

    </fieldset>

    </form>

    </html>

    Output:

    Source code for track.html:

    <html>

    <body>

    <input type="search">

    <input type="submit">

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    </body></html>

    Output:

    Source code for home.html:

    <html>

    <body>

    <a href="Login.html">Login</a>&nbsp;&nbsp;

    <a href="Singup.html">Singup</a>&nbsp;&nbsp;

    <a href="track.html">Track</a>

    </body>

    </html>

    Output:

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    WEEK-1B

    Module Name: Sectioning Elements

    Aim:Enhance the Homepage.html of IEKart's Shopping Application by adding appropriate

    sectioning elements.

    Source code for Navigation :

    <html>

    <head>

    <style>

    nav{

    background-color:yellow;

    </style></head>

    <body>

    <nav>

    <a href="unit1.html">unit1</a>

    <a href="unit2.html">unit2</a>

    <a href="unit3.html">unit3</a>

    </nav>

    </body>

    </html>

    Output:

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    Source code for header:

    <html>

    <style>

    header{

    background-color:red;

    </style>

    <header>

    <h1>welcome</h1>

    <p>PSCMRCET</p>

    </header>

    </html>

    Output:

    Source code for footer:

    <html>

    <body>

    <h1>Footer element</h1>

    <footer>

    &copy;&nbsp;&nbsp;<a href="mailto:[email protected]">PSCMR</a>

    </footer>

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    </body>

    </html>

    Output:

    Source code for aside:

    <html>

    <head>

    <style>

    aside{

    padding-left:45px;

    width:500;

    </style>

    </head>

    <body>

    <aside>

    <h2>Hello world</h2>

    <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
    international pavilions, award-winning fireworks and seasonal special events.</p>

    </aside>

    </body>

    </html>

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    Output:

    Source code for article:

    <html>

    <body>

    <article>

    <h2>Hello World</h2>

    <h3>Welcome</h3>

    </article>

    </body>

    </html>

    Output:

    Source code for Section:

    <html>

    <section style="color:blue;">

    <h1>FRONT END</h1>

    <p>JAVASCRIPT,CSS,HTML</p>

    Submitted by:20KT1A4220 Page No:


    MST LAB PSCMR COLLEGE OF ENGINEERING AND TECHNOLOGY

    </section>

    <section style="color:red;">

    <h1>BACK END</p>

    <p>PHP,MYSQL</p>

    </section></html>

    Output:

    Submitted by:20KT1A4220 Page No:

    You might also like