Scribd Logo
Upload

Welcome to Scribd!

  • 850 views

    Lab Manual 1.1 Intro To HTML

    Uploaded by

    Mehwish Pervaiz
    This document provides an introduction to HTML and outlines its basic structure and elements. It discusses what HTML is, common tags like headings, paragraphs, links and images. It also covers HTML page structure, elements, forms and inputs. The objective is to give students a practical implementation of HTML during a lab session.

    Copyright:

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

    Lab Manual 1.1 Intro To HTML

    Uploaded by

    Mehwish Pervaiz
    850 views8 pages
    This document provides an introduction to HTML and outlines its basic structure and elements. It discusses what HTML is, common tags like headings, paragraphs, links and images. It also covers HTML page structure, elements, forms and inputs. The objective is to give students a practical implementation of HTML during a lab session.

    Original Description:

    Intro to HTML

    Original Title

    Lab Manual 1.1 Intro to HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an introduction to HTML and outlines its basic structure and elements. It discusses what HTML is, common tags like headings, paragraphs, links and images. It also covers HTML page structure, elements, forms and inputs. The objective is to give students a practical implementation of HTML during a lab session.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    850 views8 pages

    Lab Manual 1.1 Intro To HTML

    Uploaded by

    Mehwish Pervaiz
    This document provides an introduction to HTML and outlines its basic structure and elements. It discusses what HTML is, common tags like headings, paragraphs, links and images. It also covers HTML page structure, elements, forms and inputs. The objective is to give students a practical implementation of HTML during a lab session.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 8

    COMSATS University Islamabad

    Lab Manual 1.1


    “Introduction to HTML”

    WEB TECHNOLOGIES

    Department of Computer Science


    COMSATS University Islamabad, Lahore Web Technologies

    1 Objective
    The purpose of this document is to give a practical implementation of HTML, the
    whole overview of HTML tags and element, with example and live implementation
    during lab.

    2 HTML

    2.1 What is HTML?


    HTML is a language for describing web pages.

    • HTML stands for Hyper Text Markup Language


    • HTML is not a programming language, it is a markup language
    • The purpose of the tags are to describe page content

    2.2 HTML Tags


    HTML markup tags are usually called HTML tags

    • HTML tags are keywords (tag names) surrounded by angle brackets like
    <html>
    • HTML tags normally come in pairs like <b> and </b>
    • The end tag is written like the start tag, with a forward slash before the tag
    name
    • Start and end tags are also called opening tags and closing tags

    2.3 Web Browsers

    The purpose of a web browser (Chrome, Internet Explorer, and Firefox) is to read
    HTML documents and display them as web pages. The browser does not display the
    HTML tags, but uses the tags to interpret the content of the page.

    Page 1
    COMSATS University Islamabad, Lahore Web Technologies

    2.4 HTML Page Structure

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

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

    </body>
    </html>

    2.5 HTML ELEMENTS

    • An HTML element starts with a start tag / opening tag


    • An HTML element ends with an end tag / closing tag
    • The element content is everything between the start and the end tag
    • Some HTML elements have empty content
    • Most HTML elements can have attributes

    2.6 HTML Headings

    <h1>Check this out</h1>


    <h2>What you think of it now</h2>
    <h3>And what about now</h3>

    Page 2
    COMSATS University Islamabad, Lahore Web Technologies

    HTML Paragraphs
    The HTML <p> element defines a paragraph:

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

    HTML Comment Tags


    <!-- Write your comments here -->

    HTML Links - Syntax


    Hyperlinks are defined with the HTML <a> tag:

    <a href="url">link text</a>

    Page 3
    COMSATS University Islamabad, Lahore Web Technologies

    HTML Images

    <img src="img_girl.jpg" alt="Girl in a


    jacket" width="500" height="600">

    HTML Forms
    HTML Input Types
     <input type="button">
     <input type="checkbox">
     <input type="color">
     <input type="date">
     <input type="datetime-local">
     <input type="email">
     <input type="file">
     <input type="hidden">
     <input type="image">
     <input type="month">
     <input type="number">
     <input type="password">
     <input type="radio">
     <input type="range">
     <input type="reset">
     <input type="search">
     <input type="submit">
     <input type="tel">
     <input type="text">
     <input type="time">
     <input type="url">
     <input type="week">

    Page 4
    COMSATS University Islamabad, Lahore Web Technologies

    <!DOCTYPE html>
    <html>
    <body>

    <h2>Text field</h2>
    <p>The <strong>input type="text"</strong> defines a one-line
    text input field:</p>

    <form action="/action_page.php">
    First name:<br>
    <input type="text" name="firstname">
    <br>
    Last name:<br>
    <input type="text" name="lastname">
    <br><br>
    <input type="submit">
    </form>

    <p>Note that the form itself is not visible.</p>


    <p>Also note that the default width of a text field is 20
    characters.</p>

    </body>
    </html>

    Page 5
    COMSATS University Islamabad, Lahore Web Technologies

    3 Exercise
    Create sample page like given below.

    Page 6
    COMSATS University Islamabad, Lahore Web Technologies

    Note: The link for instagram logo is :


    http://osnas.org/athletics_camps/basketball/boys_varsity/files/large_17605.p ng

    Page 7

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy