WEB BASICS PRACTICAL

UNIT : IV (PRACTICAL HOURS: 12)

1. Create a HTML and CSS code for the book page as follows.
 Open a Text Editor and name it as dreamweaverbook.html and another one as book.css
Code for HTML in dreamweaverbook.html
 Use basic HTML elements such as Head, Title, and Body.
 Under the Body Tag web page heading has to be display in “Dreamweaver CC 2014”
using level-1 heading.
 Place an image in left side of a page by using image tag associated with its attributes.
 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...”
 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”>
 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;
 CSS for level -1 heading(h1) tag as margin: 0; padding: .25em; color: navy; font-size:
200%;
 CSS for Image element as float: left; margin: 0 1em;
 CSS for Paragraph tag as margin: 0; padding-bottom: .5em.

2. Design a Home page for Town Hall using HTML and CSS rule set.
 Open a Text Editor and name it as index.html and CSS file called main.css,
Code for HTML in index.html
 Start to design the page with head section, title and three link tag for adding favicon,
main.css
 In body section, under header part home page title, motto and beside it logo should be
placed.
 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.
 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 of
speakers must be placed. Close the main tag.
 Under footer tag, “copyright 2015, San Joaquin Valley Town Hall, Fresno, CA 93755”
has to be placed.
Code for CSS in main.css
 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
 Add a rule set h2 elements within the main elements that set color to #800000, font-
size: 130%, padding: .5em 0 .25em 0.
 Add a rule set h3 elements within the main elements that set font-size to 105%,
padding-bottom: .25em.
 Add a rule set image elements within the main elements that set padding-bottom
to1em.
 Add a rule set p elements within the main elements that set padding-bottom to .5em.
 Add a rule set blockquote elements within the main elements that set padding to 0
2em, font-style: italic.
 Add a rule set ul elements within the main elements that set padding to 0 0 .25em
1.25em,
 Add a rule set li elements within the main elements that set padding-bottom: 35em;
 The styles for the footer as background-color: #931420, add rule set p under footer as
text-align: center, color: white, padding: 1em 0.

3. Design a web page for “San Joaquin Valley Town Hall” by using HTML and CSS.
 Use text editor to open index.html and main.css.
Add the HTML for the main navigation menu
 Add an ul element with the id “nav_menu” between the header and main elements.
 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”.
 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”.
 Set the class for the first link to “current”.
Create and format the submenu
  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.
 Modify the rule set for the main navigation menu so it uses relative positioning.
 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.
 Add rule set for the list items in the submenu that keeps them from floating to display
vertically.
 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
 Add rule set for ul element of navigation menu as list-style-type: none; margin: 0;
padding: 0; position: relative;
 Add rule set for li elements in the unordered list for navigation menu as float: left.
 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;
 Add rule set for “current” class that sets text color to yellow.

UNIT : V (PRACTICAL HOURS: 12)

4. Design a web page for luncheons and enhance by adding a table in it.
 Use text editor to open index.html and main.css.
Add the HTML for the main navigation menu
 Add an ul element with the id “nav_menu” between the header and main elements.
 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”.
 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”.
 Set the class for the first link to “current”.

 The main content of the page should come under the main and section element.
 Figure, figcaption elements is given as tile for the table.
 Table is created with table element and title of each field should come within thead, tr, td
elements (year, date, speaker, cost).
 Value for field is given under tbody, tr, td elements.
 Final value or result should bring it in tfoot. End the figure element.
 To bring the speakers images beside the main page can be displayed using aside element.
 Add the CSS for the main.css
 Add rule set for figure element in main as margin-top: .5em; margin-left: 0 and figcaption
color: #800000;
 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.
 Test and execute in browser.

5. Create an online order form for “San Joaquin Valley Town Hall” to enrolling members.
 Open a Text Editor as Registrationform.html and tickets.css
Add the HTML for the Registrationform.html
 Use the content “San Joaquin Valley Town Hall” as title in head section and two style
sheets as normalize.css and tickets.css
 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.
 Design a form in body section, under main, section elements provided level-3 heading for a
title “Become a member”.
 Create a form tag with its attributes as action="register_account.html" method="get"
name="registration_form" id="registration_form".
 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
 The procedure which is same for Member Information with fields as First Name, Last
Name, Address, City, State, ZIP Code, Phone Number
 Fields for membership information are Membership Type for that select tag is used to
choose which type member junior, regular, charter using option element.
 Finally two buttons as submit and reset fields end the form tag.
Add the CSS for the tickets.css
 Add rule set for fieldset under main and section elements as margin-bottom: .5em;
padding: .5em 1em;
 Add rule set for legend under main and section elements as font-weight: bold; font-size:
85%; padding-bottom: .5em.
 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.
 Test and execute in a browser.