Scribd Logo
Upload

Welcome to Scribd!

  • Web Engineering: (Lecture 2) by Tufail Khattak

    Uploaded by

    Muhammad Yasir Imam
    11 views16 pages

    Original Title

    lecture 2

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, 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 PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views16 pages

    Web Engineering: (Lecture 2) by Tufail Khattak

    Uploaded by

    Muhammad Yasir Imam

    Copyright:

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

    Web Engineering

    (Lecture 2)

    By
    Tufail Khattak
    Main Topics

     Paragraph

     Links

     Internal Links

     Images

     Formatting

     Comments
    Paragraph
    • Publishing any kind of written work requires the use of a paragraph.
    • The paragraph tag is very simple and basic tag.
    • The <p> tag defines a paragraph.
    • Using this tag places a blank line above and below the text of the
    paragraph.
    • Starting tag: <p>
    • Ending tag: </p>
    • Syntax:
    <p> This is a Paragraph </p>
    • Example:
    <html>
    <body>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    </body>
    </html>
    Paragraph Align Property
    <html>
    <body>

    <p align="left">This paragraph is aligned left.</p>


    <p align="center">This paragraph is aligned center.</p>
    <p align="right">This paragraph is aligned right.</p>

    <p align="justify">
    This is a justified paragraph. This is a justified paragraph. This is a
    justified paragraph. This is a justified paragraph. This is a justified
    paragraph. This is a justified paragraph.
    </p>

    </body>
    </html>
    Line break in Paragraph
    <html>
    <body>

    <p>
    The Bank of Khyber<br />
    University Road, Peshawar<br />
    Office Phone: +92 91 9216951<br />
    </p>

    </body>
    </html>
    Links
    • The HTML anchor tags <a> tag defines a hyperlink/link.
    • An element in a web page that links to another place in the
    same page or to an entirely different webpage.
    • A hyperlink (or link) is a word, group of words, or image
    that you can click on to jump to another document.
    • When you move the cursor over a link in a Web page, the
    arrow will turn into a little hand.
    • The most important attribute of the <a> element is the href
    attribute, which indicates the link’s destination.
    • hyperlinks appear as images or as underlined
    words/phrase.
    • When you click on a link, the hyperlink commands your
    web browser to load the target web page,
    Links Cont..
    Link Syntax
    • The HTML code for a link is simple.
    • <a href="url">This is a link</a>
    • The href (Hypertext Reference) attribute specifies the
    destination of a link.
    • <a href="http://www.google.com">Visit Google Site</a>
    • which will display like this: Visit Google Site
    • Clicking on this hyperlink will send the user to Google
    homepage.
    The target Attribute
    • The target attribute defines how each link will open when
    clicked.
    • Will each one open in a new window, or will each one
    open in the current browser window?
    Links Cont..
    Target Description
    _blank Opens new page in a new browser window
    _self Loads the new page in the current window
    _parent Loads new page into a parent frame
    _top Loads new page into the current browser window, cancelling all frames

    • The two most important values are the top two,


    (target="_blank" and target="_self").
    • The _self value is generally the default.
    • It loads each new page in the current browser window, while
    _blank opens up a new web browser window with each click
    of the text link.
    • <a href="http://www.google.com" target="_blank">Google</a>
    • <a href="http://www.google.com" target="_self">Google</a>
    Links Cont..
    Email Links
    • Creating an email link is simple.
    • If you want people to mail you about your site, a good way to do it is
    add an email link.

    <html>
    <body>
    <p>
    Send your suggestions to:
    <a href="mailto:suggestions@gmail.com">suggestions@gmail.com</a>
    </p>
    </body>
    </html>

    • An email link with a subject line already filled out.


    <a href="mailto:suggestions@gmail.com?subject=Feedback">
    suggestions@gmail.com</a>
    Internal Links
    • There are different types of URLs
    Global - href="http://www.cnn.com" Links to other domains outside your website
    domain.
    Local - href="../internal/mypage2.html" Links to other pages within your
    website domain.
    Internal - href="#anchorname" Links to anchors embedded in the current web
    page.
    The id Attribute
    • The id attribute can be used to create a link inside a webpage.
    <h2>Chapter 3</h2>
    <html> <p>This chapter 3</p>
    <body>
    <h2>Chapter 4</a></h2>
    <a id="top"> <p>This chapter 4</p>

    <h2>Chapter 5</h2>
    <h2>Chapter 1</h2>
    <p>This chapter 5</p>
    <p>This chapter 1</p>
    <a href="#top">top</a>
    <h2>Chapter 2</h2>
    <p>This chapter 2</p> </body>
    </html>
    •
    Images
    The <img /> tag is used to place an image on your webpage.
    • Like the <br /> tag, <img /> tag does not require a formal ending
    tag.
    • To close this tag a slash (/) is placed inside the ending bracket (/>).
    The src attribute.
    • Src stands for "source". The value of the src attribute is the URL of
    the image you want to display.
    <img src="url" >
    Alt Attribute.
    • The alt attribute specifies an alternate text for an image, if the
    image cannot be displayed.
    <img src=“cat.jpeg" alt="Big cat">
    Height and Width of an Image
    • The height and width attributes are used to specify the height and
    width of an image.
    <img src=“cat.jpeg" alt=" Big cat " width=“200%" height="220pxs">
    Image Insertion
    • <img> tag is used to add images to webpages.
    • Place all images in the same folder where your webpages
    are.
    Example

    <html>
    <head>
    <title>Image in a Web Page</title>
    </head>
    <body>
    <img src= "imagename.jpeg" alt= "image not available"
    width="50" height= "50“ />
    </body>
    </html>
    Image Insertion from a folder
    • In case the image is inside a folder e.g. images
    • Then the full path of the image should be given.
    Example
    <html>
    <head>
    <title>Image from a folder</title>
    </head>

    <body bgcolor="pink">
    <img src=“web/images/cartoon.jpg" alt= "image not
    available" width="400" height= "300" />

    </body>
    </html>
    Images as Hyperlinks
    • Images can be used for linking web pages.
    Example
    <html>
    <head>
    <title>Image as hyperlink</title>
    </head>
    <body bgcolor="pink">
    <a href="page2.html">
    <img src="web/images/cat.jpg" alt= "image not
    available" width=“200" height= “200" /></a>
    </body>
    </html>
    HTML Formatting Elements
    HTML also defines special elements for defining text with a
    special meaning.
    HTML uses elements like <b> and <i> for formatting output,
    like bold or italic text.
    Formatting elements were designed to display special types of text:
    •<b> - Bold text
    •<strong> - Important text
    •<i> - Italic text
    •<em> - Emphasized text
    •<mark> - Marked text
    •<small> - Small text
    •<del> - Deleted text
    •<ins> - Inserted text
    •<sub> - Subscript text
    HTML Comments
    Comment tags are used to insert comments in the HTML
    source code.

    HTML Comment Tags


    You can add comments to your HTML source by using the
    following syntax:
    <!-- Write your comments here -->
    Example:
    <!-- This is a comment -->

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

    <!-- Remember to add more information here -->

    You might also like