Scribd Logo
Upload

Welcome to Scribd!

  • WB Algorithm

    Uploaded by

    Subash
    45 views9 pages
    web basic

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    web basic

    Copyright:

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

    WB Algorithm

    Uploaded by

    Subash
    web basic

    Copyright:

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

    WEB BASICS PRACTICAL

    UNIT-IV

    1. Create a HTML and CSS code for the book page as follows.

    AIM:

    To create a HTML and CSS code for book page.

    ALOGRITHM:
    STEP 1: Open a Text Editor and name it as dreamweaverbook.html and another one as

    book.css

    Code for HTML in dreamweaverbook.html

    STEP 2: Use basic HTML elements such as Head, Title, and Body.

    STEP 3: Under the Body Tag web page heading has to be display in “Dreamweaver CC

    2014” using level-1 heading.

    STEP 4: Open a Text Editor and name it as dreamweaverbook.html and another one as

    book.css

    Code for HTML in dreamweaverbook.html

    STEP 5:Use basic HTML elements such as Head, Title, and Body.

    STEP 6:Under the Body Tag web page heading has to be display in “Dreamweaver CC

    2014” using level-1 heading.

    STEP 7:Place an image in left side of a page by using image tag associated with its

    attributes.

    STEP 8:The following content has to be displayed in two paragraphs using Paragraph tag
    beside image.
    “Since 1996, Dreamweaver has been the leading product for web developers
    who want to build web pages by using a visual interface. Now, Dreamweaver
    CC 2014 takes that to a new level, with tools that make it easier than ever to
    take advantage of today's best we design practices.

    The trick to mastering Dreamweaver is learning how to use all of its windows,
    panels, toolbars, and web technologies. To find out how this book teaches you
    the skills you need, read more...”
    STEP 9:To make use of book.css styles into dreamweaverbook.html file use element in
    the head section as follows
    <link rel= “stylesheet” href= “book.css”>
    STEP 10:Save and execute the file in browser.
    Code for CSS in book.css
    CSS for body tag elements as font-family: Arial, Helvetica, sans-serif; font-size: 100%;
    width: 550px; margin: 0 auto; padding: 1em; border: 1px solid navy;
    STEP 11:CSS for level -1 heading(h1) tag as margin: 0; padding: .25em; color: navy; font-

    size: 200%;

    STEP 12:CSS for Image element as float: left; margin: 0 1em;

    STEP 13:CSS for Paragraph tag as margin: 0; padding-bottom: .5em.

    CODING:

    <!doctype html>
    <html>
    <head>
    <title>Dreamweaver book</title>
    <link rel="stylesheet" href="bk.css">
    </head>
    <body>
    <h1>Dreamweaver CC 2014</h1>
    <img src="dreamweaver.jpg" alt="Dreamweaver Book">
    <p>Since 1996, Dreamweaver has been the leading product for web
    developers who want to build web pages by using a visual interface.
    Now, Dreamweaver CC 2014 takes that to a new level, with tools that
    make it easier than ever to take advantage of today's best web design
    practices.</p>
    <p>The trick to mastering Dreamweaver is learning how to use all of its
    windows, panels, toolbars, and web technologies. To find
    out how this book teaches you the skills you need, <a href="">
    read more...</a></p>
    </body>
    </html>
    OUTPUT:

    Dreamweaver Book

    Since 1996, Dreamweaver has been the leading product for web developers who want to build
    web pages by using a visual interface. Now, Dreamweaver CC 2014 takes that to a new level,
    with tools that make it easier than ever to take advantage of today's best web design practices.

    The trick to mastering Dreamweaver is learning how to use all of its windows, panels, toolbars,
    and web technologies. To find out how this book teaches you the skills you need, read more...

    2. Design a Home page for Town Hall using HTML and CSS rule set.

    AIM:
    To design a home page for Town Hall using HTML and CSS.
    ALGORITHM:

    STEP 1:Open a Text Editor and name it as index.html and CSS file called main.css,
    Code for HTML in index.html
    STEP 2:Start to design the page with head section, title and three link tag for adding

    favicon, main.css

    STEP 3:In body section, under header part home page title, motto and beside it logo

    should be In main part, the content “Our Mission” given in h2. Paragraph

    element should contain “Our mission is to bring nationally and

    internationally renowned thought- provoking speakers who inform,


    educate, and entertain our audience! As one or our members told us:”

    The following content must come with quotation


    Each year I give a ticket package to each of our family members. I think of

    it as the gift of knowledge...and that is priceless.


    STEP 4:Content “Our Ticket Packages” provided with h2 tag. Upcoming contents has
    to be displayed as list “Season Package: $95, Patron Package: $200, Single
    Speaker: $25”. Content “This season's guest speakers” given in h1. Followed
    by that three images must be placed. Close the main tag.
    STEP 5:Under footer tag, “copyright 2015, San Joaquin Valley Town Hall, Fresno,

    CA 93755” has to be placed.

    Code for CSS in main.css

    STEP 6:CSS for main tag elements add a rule set h1 elements within the main elements

    That set font-size to 150%, border: 3px double #800000, margin-bottom: .75em,

    border-radius: 10px, box-shadow: 5px 5px, padding: .5em 0 .5em 2em,

    background-color: white.

    STEP 7:Add a rule set h2 elements within the main elements that set color to #800000,

    Font-size: 130%, padding: .5em 0 .25em 0.

    STEP 8:Add a rule set h3 elements within the main elements that set font-size to 105%,

    padding-bottom: .25em.

    STEP 9:Add a rule set image elements within the main elements that set padding-bottom

    to1em.

    STEP 10:Add a rule set p elements within the main elements that set padding-bottom to

    .5em.

    STEP 11:Add a rule set blockquote elements within the main elements that set padding to

    0 2em, font-style: italic.

    STEP 12:Add a rule set ul elements within the main elements that set padding to 0 0 .25em

    1.25em,

    STEP 13:Add a rule set li elements within the main elements that set padding-bottom:
    35em;

    STEP 14:The styles for the footer as background-color: #931420, add rule set p under

    footer as text-align: center, color: white, padding: 1em 0.

    STEP 15:Place an image in left side of a page by using image tag associated with its

    attributes.

    STEP 16:The following content has to be displayed in two paragraphs using Paragraph tag
    beside image.
    “Since 1996, Dreamweaver has been the leading product for web developers
    Who want to build web pages by using a visual interface. Now, Dreamweaver
    CC 2014 takes that to a new level, with tools that make it easier than ever to
    take advantage of today's best we design practices.
    The trick to mastering Dreamweaver is learning how to use all of its windows,
    panels, toolbars, and web technologies. To find out how this book teaches you
    the skills you need, read more...”
    STEP 17:To make use of book.css styles into dreamweaverbook.html file use element in
    the head section as follows

    <link rel= “stylesheet” href= “book.css”>


    STEP 18:Save and execute the file in browser.
    Code for CSS in book.css
    STEP 19:CSS for body tag elements as font-family: Arial, Helvetica, sans-serif; font-size:
    100%; width: 550px; margin: 0 auto; padding: 1em; border: 1px solid navy;
    STEP 20:CSS for level -1 heading(h1) tag as margin: 0; padding: .25em; color: navy;

    font- size: 200%;

    STEP 21:CSS for Image element as float: left; margin: 0 1em;

    STEP 22:CSS for Paragraph tag as margin: 0; padding-bottom: .5em.

    CODING:

    3. Design a web page for “San Joaquin Valley Town Hall” by using HTML and CSS.

    AIM:
    To Design a web page for “San Joaquin Valley Town Hall” by using HTML and
    CSS.
    ALGORITHM:
    STEP 1:Use text editor to open index.html and main.css.

    Add the HTML for the main navigation menu


    STEP 2:Add an ul element with the id “nav_menu” between the header and main

    elements.

    STEP 3:Add the first li elements for this list. Then, add an element to this list item with

    href attributes set to index.html and text set to “Home”.

    STEP 4:Copy the li element that was created and past it four times to create four more

    list items. Then, change the text for links in each list item as speakers.html and

    set to “Speakers”, luncheons.html and set to Luncheons, tickets.html and set to

    “Tickets”, aboutus.html and set to “About Us”.

    STEP 5:Set the class for the first link to “current”.


    Create and format the submenu

    STEP 6:Add a ul element within the last li element (about us) in the navigation menu.

    Then, add four li elements (Our History, Board of Directors, Past Speakers &

    Contact Information) with <a> tag.

    STEP 7:Modify the rule set for the main navigation menu so it uses relative positioning.

    STEP 8:Add rule set for the sub menu that uses the display property to keep the submenu

    from being displayed by default. This rule set should also position the submenu a

    absolutely100% from top of the main menu.

    STEP 9:Add rule set for the list items in the submenu that keeps them from floating to

    display vertically.

    STEP 10:Add rule set that causes the submenu to be displayed as block element when

    mouse hovers over the list item that contains the submenu.

    Add the CSS for the main navigation menu


    STEP 11:Add rule set for ul element of navigation menu as list-style-type: none;

    margin: 0; padding: 0;position: relative;

    STEP12: Add rule set for li elements in the unordered list for navigation menu as float:

    left.
    STEP 13:Add rule set for <a> element within the li elements of navigation menu as

    display: block; width: 160px; text-align: center; padding: 1em 0; text-

    decoration: none; background-color: #800000; color: white; font-weight: bold;

    STEP 14:Add rule set for “current” class that sets text color to yellow.

    UNIT-V

    4. Design a web page for luncheons and enhance by adding a table in it.

    AIM:
    To Design a web page for luncheons and enhance by adding a table in it.

    ALGORITHM:
    STEP 1:Use text editor to open index.html and main.css.

    Add the HTML for the main navigation menu


    STEP 2:Add an ul element with the id “nav_menu” between the header and main

    elements.

    STEP 3:Add the first li elements for this list. Then, add an element to this list item with

    href attributes set to index.html and text set to “Home”.

    STEP 4:Copy the li element that was created and past it four times to create four more list

    items. Then, change the text for links in each list item as speakers.html and set to

    “Speakers”, luncheons.html and set to Luncheons, tickets.html and set to “Tickets”,

    aboutus.html and set to “About Us”.

    STEP 5:Set the class for the first link to “current”.


    STEP 6:The main content of the page should come under the main and section element.

    STEP 7:Figure, figcaption elements is given as tile for the table.

    STEP 8:Table is created with table element and title of each field should come within

    thead, tr, td elements (year, date, speaker, cost).

    STEP 9:Value for field is given under tbody, tr, td elements.

    STEP 10:Final value or result should bring it in tfoot. End the figure element.

    STEP 11:To bring the speakers images beside the main page can be displayed using aside
    element.

    Add the CSS for the main.css


    STEP 12:Add rule set for figure element in main as margin-top: .5em; margin-left: 0 and

    figcaption color: #800000;

    STEP 13:Add rule set for table element in main as border-collapse: collapse. thead, tfoot set

    To border-top: 2px solid #800000; border-bottom: 2px solid #800000. th, td set to

    padding: .2em .7em; text-align: left. tfoot th, tfoot td set to text-align: right; font-

    weight: bold.

    STEP 14:Test and execute in browser.

    5. Create an online order form for “San Joaquin Valley Town Hall” to enrolling members.

    AIM:
    To Create an online order form for “San Joaquin Valley Town Hall” to enrolling
    members.
    ALGORITHM:

    STEP 1:Open a Text Editor as Registrationform.html and tickets.css


    Add the HTML for the Registrationform.html
    STEP 2:Use the content “San Joaquin Valley Town Hall” as title in head section and two style

    sheets as normalize.css and tickets.css


    STEP 3:In body section, use header elements to do the following
    1. Place a logo of San Joaquin Valley Town Hall in image tag and level-1 heading for
    the same.
    2. Under level-2 heading use the content “Celebrating our 75th Year” using h2 and
    superscript tag.
    STEP 3:Design a form in body section, under main, section elements provided level-3 heading
    for a title “Become a member”.
    STEP 4:Create a form tag with its attributes as action="register_account.html" method="get"
    name="registration_form" id="registration_form".
    STEp 5:Create field set under that give registration information using legend tag. Fields are to
    be displayed using label tag and user can enter in input tag wit required attributes.
    The following are fields such as E-mail, Password, Verify password
    STEP 6:The procedure which is same for Member Information with fields as First Name, Last
    Name, Address, City, State, ZIP Code, Phone Number
    STEP 7:Fields for membership information are Membership Type for that select tag is used to
    choose which type member junior, regular, charter using option element.
    STEP 8:Finally two buttons as submit and reset fields end the form tag.
    Add the CSS for the tickets.css
    STEP 9:Add rule set for fieldset under main and section elements as margin-bottom: .5em;
    padding: .5em 1em;
    STEP 10:Add rule set for legend under main and section elements as font-weight: bold; font-
    size: 85%; padding-bottom: .5em.
    STEP 11:Add rule set for label, input, select under main and section elements as font-size:
    90%; set label to float: left; width: 10em; text-align: right; set input, select to width:
    15em; margin-left: .5em; margin-bottom: .5em.
    STEP 12:Test and execute in a browser.

    You might also like