Scribd Logo
Upload

Welcome to Scribd!

  • WTL Assignment No.2

    Uploaded by

    Sujit Khandare
    344 views7 pages
    WTL-Assignment No.2

    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
    WTL-Assignment No.2

    Copyright:

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

    WTL Assignment No.2

    Uploaded by

    Sujit Khandare
    WTL-Assignment No.2

    Copyright:

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

    Department of Computer Engineering Subject: Web Technology Laboratory

    Expected Date of Completion:…………………………………

    Actual Date of Completion:…………………………………….

    Assignment No: 2
    Title: Design and develop any suitable client website using HTML and CSS.
    Objective:

    1. Understand the basic concept of HTML and HTML tags.


    2. Understand the concepts of CSS and it‟s different way to implement CSS in web page.
    Problem Statement:
    Implement a web page index.html for any client website (e.g., a restaurant website project) using
    following:
    a. HTML syntax: heading tags, basic tags and attributes, frames, tables, images, lists, links for
    text and images, forms etc.
    b. Use of Internal CSS, Inline CSS, External CSS.

    Outcomes:

    Student will be able to,


    1. Design a static webpage using HTML.
    2. Apply CSS to HTML pages.

    Software and Hardware requirement:


    Notepad, Browser

    Theory
    a. HTML: HTML is standard markup language for creating web pages.
    • HTML stands for Hyper Text Markup Language.
    • HTML describes the structure of web pages.
    • HTML elements are the building block of HTML pages
    • HTML elements are represented by tags
    • Browser do not display the HTML tags but use them to render the content of page.
    • HTML tag label pieces of content such as “heading”, “paragraph”, “table” and so on.
    • HTML tags are surrounded by the two characters < and > The surrounding characters are
    called angle brackets.
    • HTML tags normally come in pairs like <b> and </b>
    • The first tag in a pair is the start tag, the second tag is the end tag
    • The text between the start and end tags is the element content
    • HTML tags are not case sensitive, <b> means the same as <B>

    HTML versions:
    HTML 1991
    HTML 2.0 1995
    HTML 3.2 1997
    HTML 4.01 1999
    XHTML 2000
    HTML 5 2014

    HTM OR HTML EXTENSION?


    When you save an HTML file, you can use either the .htm or the .html extension. We have used
    .html in our example.

    Example: Creating a simple web page


    1. Start Notepad.
    2. Type in the following text
    <html>
    <head>
    <title>Title of page</title>
    </head>
    <body>
    This is a very basic webpage. <b>This text will be displayed in bold</b>
    </body>
    </html>
    3. Save the file as ".html".
    4. Double click the saved file the browser will display the page.

    EXAMPLE EXPLAINED:
    The first tag in your HTML document is <html>. This tag tells your browser that this is the start
    of an HTML document. The last tag in your document is </html>. This tag tells your browser
    that this is the end of the HTML document. The text between the <head> tag and the </head> tag
    is header information. Header information is not displayed in the browser window. The text
    between the <title> tags is the title of your document. The title is displayed in your browser's
    caption. The text between the <body> tags is the text that will be displayed in your browser. The
    text between the <b> and </b> tags will be displayed in a bold font.

    ATTRIBUTES:
    Tags can have attributes. Attributes can provide additional information about the HTML
    elements on your page. This tag defines the body element of your HTML page: <body>. With an
    added bgcolor attribute, you can tell the browser that the background color of your page should
    be red, like this: <body bgcolor="red">. Attributes always come in name/value pairs like this:
    name="value". Attributes are always added to the start tag of an HTML element. QUOTE
    STYLES, "RED" OR 'RED'?
    Attribute values should always be enclosed in quotes. Double style quotes are the most common,
    but single style quotes are also allowed. In some rare situations, like when the attribute value
    itself contains quotes, it is necessary to use single quotes:

    HEADINGS
    Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines
    the smallest heading. Heading tag is always having opening (<) and closing tag</>.
    HTML automatically adds an extra blank line before and after a heading.

    PARAGRAPHS
    The HTML <p> element defines a paragraph. The <p> provides a path to structure your text into
    different paragraphs.
    Example: <p>This is another paragraph</p>
    HTML automatically adds an extra blank line before and after a paragraph.

    LINE BREAKS
    The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The
    <br> tag forces a line break wherever you place it.

    COLOUR AND FONT


    <b> <i> <u> specifies bold, italic and underline respectively. The emphasis tag <em>specifies
    that its textual content is special and should be display in same way that indicates this
    distinctness. The strong tag <strong > is like the emphasis tag. it defines the text is important.

    LINKS
    Basically, hypertext is non-linear means the l8inks are used to connect one web to another.
    HTML uses hyperlink to connect from one page to another page of the web. An anchor tag<a>
    …….</a> is used to create link.
    Syntax: <a href =”url”> </a>
    Here, A start tag has an attribute “href” which declares the url to be navigated.

    IMAGES AS HYPERLINKS
    Image can also act as hyperlinks just as normal text. Just as text is made as a hotspot so as an
    image. i.e, by enclosing the <img> tag within the <a>….</a> tags.
    Syntax: <a href= “abc.html”> <imag src=”target.gif”> </a>
    TABLES
    An HTML table consists of <table> element and one or more<tr>, <th>, and <td> elements. To
    define a table row use <tr>element, while the <th> elements define a table header, and<td>
    element defines a table cell.
    <table border="1">
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    How it looks in a browser:
    row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    FRAMES
    The HTML <FRAME> tag is used to specify each frame within a frameset tag. Each <frame > in
    a <frameset> can have different attributes, such as border, scrolling, the ability to resize etc.
    Example:
    <html>
    <head></head>
    <frameset rows=”50% , 50%>
    <frame name src=“frame 1” src= “frame1.html>
    <frame mane src= “frame 2” src= “frame2.html”>
    </frameset>
    </html>

    Output:

    Frame1

    Frame2

    LISTS
    The HTML <li> tag is used for specifying a list item in ordered, unordered, definition lists.
    HTML has three types of lists. <ol> shows an ordinate list while <ul> an unordered one, and for
    making a definition list is used<dl>.
    <ul>-an unordered list
    <ol>- An ordered list
    <dl>- A definition list

    FORMS
    An HTML form is used to collect user input. The user input is most often sent to a server for
    processing. HHTML Provides tags to generate the commonly used objects on a screen form.
    There are control for single line and multiple text collection, checkboxes, radio buttons and
    menus, among others. All control tags are inline tags.

    b. CSS: CSS stands for Cascading Style Sheet. It is nothing, but design language intended to
    simplify the process of making web pages presentable.CSS handles the feel and look part of a
    web page. By using CSS, one can control the color of text, style of fonts, spacing between
    paragraphs, layout designs.

    CSS is easy to learn, easy to understand and it provides powerful control on presentation of an
    HTML document.

    Advantages of CSS:
    It saves the time, Pages load faster, Easy maintenance, Superior styles to HTML, Multiple
    Device Compatibility, Global web standards, Offline Browsing, Platform Independence

    A CSS comprises of style rules that are interpreted by the browser and then applied to the
    corresponding elements in your document. A style rule is made of three parts −
    • Selector − A selector is an HTML tag at which a style will be applied. This could be any tag
    like <h1> or <table> etc.
    • Property - A property is a type of attribute of HTML tag. Put simply, all the HTML
    attributes are converted into CSS properties. They could be color, border etc.
    • Value - Values are assigned to properties. For example, color property can have value either
    red or #F1F1F1 etc.

    You can put CSS Style Rule Syntax as follows − selector {property: value}

    Selector Declaration

    h1 {color:blue; font-size:100px;

    Property Value Property Value


    Techniques use to implement CSS in webpage:

    1. Inline- by using inline CSS technique we can apply CSS in a single element. The inline CSS
    is also a method to insert style sheets in HTML document. This method mitigates some
    advantages of style sheets so it is advised to use this method sparingly.

    If you want to use inline CSS, you should use the style attribute to the relevant tag.
    Syntax:
    <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

    Example:
    <h2 style="color:red; margin-left:40px;">Inline CSS is applied on this heading.</h2>
    <p>This paragraph is not affected </p>

    Output:

    Inline CSS is applied on this heading.


    This paragraph is not affected.

    2. Internal- by using an internal CSS file. The internal style sheet is used to add a unique style
    for a single document. It is defined in <head> section of the HTML page inside the <style> tag.

    Example:
    <html>
    <head>
    <style>
    body {
    background-color: linen;
    }
    h1 {
    color: red;
    margin-left: 80px;
    }
    </style>
    </head>
    <body>
    <h1>The internal style sheet is applied on this heading. </h1>
    <p>This paragraph will not be affected. </p>
    </body>
    </html>

    3. External- by using an external CSS file. An external style sheet is used to define the style for
    many HTML pages. With an external style sheet, you can change the look of an entire web
    site, by changing one file! To use an external style sheet, add a link to it in the <head> section
    of the HTML page

    Example: <link rel="stylesheet" href="styles.css">


    • Use the HTML <head> element to store <style> and <link> elements
    • Use the CSS color property for text colors
    • Use the CSS font-family property for text fonts
    • Use the CSS font-size property for text sizes
    • Use the CSS border property for borders
    • Use the CSS padding property for space inside the border
    • Use the CSS margin property for space outside the border

    Design and Execution Steps


    Following steps are used to create and execute web applications,

    1. Write the HTML code in notepad and save with .html extension.
    2. Write the CSS code in notepad and save with .css extension.
    3. Import CSS file in HTML page.
    4. Open HTML page in the browser.

    Test Cases
    Manual testing is used to check whether CSS get applied or not.

    Conclusion
    Hence, we have designed the static web page using HTML and CSS.

    You might also like