Scribd Logo
Upload

Welcome to Scribd!

  • 137 views

    Apollo Institute of Engineering and Technology: Branch: CE Diploma Semester 2 Subject: Static Web Page Design (4311603)

    Uploaded by

    Richa Bhadauria
    The document provides information on using various HTML tags to create webpages. It explains key HTML tags like <html>, <head>, <title>, <body> that provide the basic structure of an HTML page. It also describes tags for text formatting (<b>, <i>, <u> etc.), links (<a>), and images (<img>). Examples are given to demonstrate how to use these tags to display formatted text, links, and an image on a simple HTML page.

    Copyright:

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

    You might also like

    Apollo Institute of Engineering and Technology: Branch: CE Diploma Semester 2 Subject: Static Web Page Design (4311603)

    Uploaded by

    Richa Bhadauria
    137 views12 pages
    The document provides information on using various HTML tags to create webpages. It explains key HTML tags like <html>, <head>, <title>, <body> that provide the basic structure of an HTML page. It also describes tags for text formatting (<b>, <i>, <u> etc.), links (<a>), and images (<img>). Examples are given to demonstrate how to use these tags to display formatted text, links, and an image on a simple HTML page.

    Original Description:

    Original Title

    SWPD Practicals

    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
    The document provides information on using various HTML tags to create webpages. It explains key HTML tags like <html>, <head>, <title>, <body> that provide the basic structure of an HTML page. It also describes tags for text formatting (<b>, <i>, <u> etc.), links (<a>), and images (<img>). Examples are given to demonstrate how to use these tags to display formatted text, links, and an image on a simple HTML page.

    Copyright:

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

    Apollo Institute of Engineering and Technology: Branch: CE Diploma Semester 2 Subject: Static Web Page Design (4311603)

    Uploaded by

    Richa Bhadauria
    The document provides information on using various HTML tags to create webpages. It explains key HTML tags like <html>, <head>, <title>, <body> that provide the basic structure of an HTML page. It also describes tags for text formatting (<b>, <i>, <u> etc.), links (<a>), and images (<img>). Examples are given to demonstrate how to use these tags to display formatted text, links, and an image on a simple HTML page.

    Copyright:

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

    Apollo Institute of Engineering and Technology

    Branch: CE Diploma Semester 2


    Subject: Static Web Page Design (4311603)

    Practical - 1

    Aim: Use HTML Text Formatting Tags to Create Webpage.

    HTML:

    HTML stands for Hyper Text Markup Language.

    HyperText - A text which is connected via a link which redirects users to that text related
    document, page or piece of information.

    HyperLink - A link to which “Hypertext” is connected, means when we click on the Hypertext
    and it goes on a specific url that is called Hyperlink.

    Markup - Markup means to structure in a specific format.

    Markup Language - It is a text formatting language designed to transform raw text into
    structured documents.

    HTML is structuring of contents into specific formats.

    HTML is the standard markup language for creating Web pages.

    HTML describes the structure of a Web page.

    HTML consists of a series of elements.

    HTML elements tell the browser how to display the content.

    Tag - Used to specify regions of HTML documents for the web browser to interpret. Tags look
    like this: <tag>.
    Element - A complete tag, having an opening <tag> and closing </tag>.

    Attribute - Used to modify the value of the HTML element. Elements will often have multiple
    attributes.

    Structure of HTML Page:

    <html>

    <head>

    <title> Page Title </title>

    </head>

    <body>

    This is a Body.

    </body>

    </html>

    HTML Editors:

    Write HTML using Notepad or TextEdit.

    1. Open Notepad.
    2. Write some HTML.
    3. Save the HTML page.

    Save the file, File > Save.

    Name the file “index.html” or any other name ending with html or htm.

    View HTML page in your browser.


    Basic HTML tags:

    <html> - Defines an HTML document.

    <head> - The <head> element is a container for metadata (data about data) and is placed between
    the <html> tag and the <body> tag.

    <title> - Placed within the <head> tag and defines the title of the document.

    <body> - Defines the document’s body.

    <h1> to <h6> - Defines header 1 to header 6

    <p> - Defines a paragraph.

    <br> - Inserts a single line break.

    <hr> - Defines a horizontal rule.

    <!-- --> - Defines a comment.

    <b> - Defines bold text.

    <big> - Defines big text.

    <em> - Defines emphasized text.

    <i> - Defines italic text.

    <small> - Defines small text.

    <strong> - Defines strong text.

    <sub> - Defines subscripted text.

    <sup> - Defines superscripted text.

    <ins> - Defines inserted text.

    <del> - Defines deleted text.

    <u> - Defines underlined text.

    <nobr> - Creates a text with non-breaking lines.

    <tt> - Defines teletype text.

    <blink> - Create a blinking text that flashes slowly.


    <font> - Used to specify the font face, font size, and color of text.

    Program that describes all the basic HTML tags.

    <html>

    <head>

    <title>HTML Tags</title>

    </head>

    <body bgcolor="#fed8b1">

    <!-- Basic HTML Tags -->

    <h1>Heading 1</h1>

    <h2>Heading 2</h2>

    <h3>Heading 3</h3>

    <h4>Heading 4</h4>

    <h5>Heading 5</h5>

    <h6>Heading 6</h6>

    <p>A text which is connected via a link which redirects users to that text related document, page
    or piece of information is known as HyperText.

    A link to which “Hypertext” is connected is called Hyperlink.

    </p>

    <hr>

    <p>This is<br>a paragraph<br>with line breaks.</p><br>

    <b>This is a bold text.</b><br>

    <big>This is a big text.</big><br>

    <em>This is a emphasized text.</em><br>


    <i>This is a italic text.</i><br>

    <small>This is a small text.</small><br>

    <strong>This is a strong text.</strong><br>

    This is a<sub>subscripted text.</sub><br>

    This is a <sup>superscripted text.</sup><br>

    <ins>This is a inserted text.</ins><br>

    <del>This is a deleted text.</del><br>

    <u>This is a underlined text.</u><br>

    <nobr>Creates a text

    with non-breaking lines.</nobr><br>

    <tt>This is a teletype text.</tt><br>

    <blink>Create a blinking text that flashes slowly.</blink><br>

    <font color ="#FF00FF">Hello World!!!!</font><br>

    </body>

    </html>
    Output:
    Practical - 2

    Aim: Use HyperLink Tag to Navigate through different Web Pages.

    HTML uses <a> (anchor) tag to create a link to another document.

    The <a> tag defines a hyperlink, which is used to link from one page to another.

    The most important attribute of the <a> element is the href attribute, which indicates the link's
    destination.

    An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a
    movie, etc.

    By default, links will appear as follows in all browsers:

    ● An unvisited link is underlined and blue


    ● A visited link is underlined and purple
    ● An active link is underlined and red

    The target attribute specifies where to open the linked document.

    _blank - Opens the linked document in a new window or tab

    _self - Opens the linked document in the same frame as it was clicked (this is default)

    _parent - Opens the linked document in the parent frame

    _top - Opens the linked document in the full body of the window

    The name attribute is used to create a named anchor. The name of the anchor can be any text.
    Program:

    <html>

    <head>

    <title>Navigations through HyperLink Tag</title>

    </head>

    <body>

    <a name = "gtu" href="https://www.gtu.ac.in/" target="_blank">Click here to visit GTU


    website</a>

    </body>

    </html>

    Output :
    Practical - 3
    Aim: Use Image Tags to Create Webpage.

    HTML img tag is used to display images on the web page. It is typically used for inline images.

    The <img> tag has following attributes:

    ● src - Specifies the path to the image.


    ● alt - Specifies an alternate text for the image, if the image for some reason cannot be
    displayed.
    ● width - Specifies the width of an image in pixels.
    ● height - Specifies the height of an image in pixels.
    ● alignment(align) - This allows you to align the image on the page. The options include
    bottom, middle, top, left, right, baseline.
    ● border - This is for a border around the image, specified in pixels.
    ● hspace - This is for Horizontal Space on both sides of the image specified in pixels.
    ● vspace - This is for Vertical Space on both sides of the image specified in pixels.

    Program:

    <html>

    <head>

    <title>Image Tag in HTML</title>

    </head>

    <body>

    <img src="html.jpg" alt="HTML Tutorial" width="300" height="300" hspace="100"


    vspace="100" border="1">

    </body>

    </html>
    Output:

    You might also like