Web Design ( 1:30-3:30)

Biyernes, Disyembre 30, 2011

3rd HTML EXAM

1. Do cascading style sheets make for easy web page formatting? Do you find it easy to use CSS? Explain

Ans.

Yes. At first I thougth that CSS are more difficult than the HTML codes but when you use its easy than HTML codes and its more cleaner the html codes to use.

2. Enumerate, differentiate and provide an example on the varying ways of using CSS.

Ans.

Three Ways To Use CSS:

Inline - style declarations allow us to define styles at the exact point we need them. For example, if we want to make a headline show up as large, bold, crimson text, we will find that headline in our HTML and add the CSS where the headline appears in the markup.
Example:
<p>This is a paragraph that has no inline styles applied to it.</p>

Internal - placement of CSS, we will make our style rules in the HEAD section of the HTML. By using this method, the style declarations we make will affect only content on this page.

Example:
<style>

h1 {font-size:1.5em; color:#990000;}

p {font-size:.9em; line-height:140%;color:#000000;}

</style>

External - the great thing about this method is that you can have 1000 pages (or more) in a website and have every one of them link to that stylesheet. This means you can make changes to that one CSS file and have the changes apply across all 1000 pages of your site.

Example:
<link rel="stylesheet" href="style.css" media="screen" />

3. Give 10 examples of a regular html style formatting and show its equivalent formatting in CSS.

Ans.

HTML Style Formatting: Its Equivalent Formatting in CSS:

1.<body bgcolor="red"> {background-color:red;}
2.<p align="right">Hello</p> <p style="align:right">Hello</p>

3.<td align="right"></td> td{text-align:right;}

4. <table width="100"> <table style="width:100">

5.<font size="2"> body {font-size:16px;}

<p></p>                       p {font-style:italic;}

<b></b>                       <strong></strong>

8.<u></u> {text-decoration:underline;}

9.<font color=”"></font> {font-color: green;}

10.<i></i> {font: italic;}

4. Create an html document (web page) using CSS. Show the code and a screen cap of your output.

Ans.

<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>

<body>
<table id="customers">
<tr>
<th>Family</th>
<th>Occupation</th>
<th>Gender</th>
</tr>
<tr>
<td>Florencio Jordan</td>
<td>Armys</td>
<td>Male</td>
</tr>
<tr class="alt">
<td>Myrna Jordan</td>
<td>Princess?</td>
<td>Female</td>
</tr>
<tr>
<td>Kim Sharmaine Jordan</td>
<td>Employeessssss</td>
<td>Female</td>
</tr>
<tr class="alt">
<td>Arlyn Jofrdan</td>
<td>OFW</td>
<td>Female</td>
</tr>
<tr>
<td>Michael Jordan</td>
<td>Student</td>
<td>Male</td>
</tr>
<tr class="alt">
<td>Harvey Jordan</td>
<td>Student</td>
<td>Male</td>
</tr>
<tr>
<td>Steph Jordan</td>
<td>Student</td>
<td>Female</td>
</tr>
<tr class="alt">
<td>Luigi JOrdan</td>
<td>Tambay</td>
<td>Male/td>
</tr>
<tr>
<td>Clarice Jordan</td>
<td>Employee</td>
<td>Female</td>
</tr>
<tr class="alt">
<td>Emman Jordan</td>
<td>Seaman</td>
<td>Male</td>
</tr>
</table><br><br>

<p><center><font color:"blue"><b><i>THIS IS MY

FAMILY</i></font></b></center></p>
</body>
</html>

OUTPUT:

Lunes, Nobyembre 28, 2011

Difference Between Tables, Frames and DIV Tags

Frames

allow you to divide the page into several rectangular areas and to display a separate document in each rectangle. Each of those rectangles is called a "frame". Frames are very popular because they are one of the few ways to keep part of the page stationary while other parts change. Frames are also one of the most controversial uses of HTML, because of the way the frames concept was designed, and because many web framed web sites are poorly implemented.
divide up your browser window into separate areas. In each of these a page is loaded. Links in different pages can be made to change the pages in other frames and frames can stay the same when another page changes. This means that you can have one page which has the navigation bar for a whole site on it and it never changes.

GUIDES TO LAYOUT

Columns
(Two columns with two rows in column #1.)

col 1, row 1	col 2
col 1, row 2

The basic code:
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="col1row1.html">
<frame src="col1row2.html">
</frameset>
<frame src="col2.html">
</frameset>

Rows
(Two rows with two columns in row #1.)

row 1, col 1	row 1, col 2
row 2

The basic code:
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="row1col1.html">
<frame src="row1col2.html">
</frameset>
<frame src="row2.html">
</frameset>

Example Code:
<HTML>
<HEAD>
<TITLE>Great Recipes</TITLE>
</HEAD>

<FRAMESET ROWS="15%,*">
   <FRAME SRC="recipetitlebar.html" NAME=TITLE SCROLLING=NO>

   <FRAMESET COLS="20%,*">
      <FRAME SRC="recipesidebar.html" NAME=SIDEBAR>
      <FRAME SRC="recipes.html" NAME=RECIPES>
   </FRAMESET>

   <NOFRAMES>
   <H1>Great Recipes</H1>
   No frames? No Problem! Take a look at our 
   <A HREF="recipes.html">no-frames</A> version.
   </NOFRAMES>

</FRAMESET>

</HTML>

OUTPUT:

from: URL = http://www.manda.com/frames/

Tables

- divide up a web page into separate cells (like in a spreadsheet). This means that you have a lot more control over where text and pictures can be placed. By using the method I described earlier (having a column for a navigation bar and a cell for the page text) you can create complex page structures. A page looking the same could be created with frames and tables.

EXAMPLE CODE:

<html>

<body>

<tr>

<td>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

</td>

<td>This cell contains a table:

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

OUTPUT:

This is a paragraph

This is another paragraph

This cell contains a table:

A	B
C	D

This cell contains a list

apples
bananas
pineapples

HELLO

From: http://www.w3schools.com/

DIV

-allows authors to assign certain attributes to blocks of contents. It's primary used in conjunction with style sheets to give visual styles to portions of content in a document. Also, the "id" attribute gives a way to dynamically change these attributes with or without the user interaction. Browsers usually place a break line before and after a div block .

EXAMPLE CODE:

<html>
  <head>
  <title>Enter first and last name</title>
  <s:head theme="ajax" debug="false"/>
  </head>
  <body>
  <s:div id="maskValue" >
  <div style="position:absolute;top:10; left:20; width:300;
height:175;background-color:#E5E5E5;">
  <h3>Enter first and last name:</h3>
  <s:form theme="ajax" action="doMask">
  <s:textfield name="firstname" label="Firstname" />
  <s:textfield name="lastname" label="Lastname" />
  <s:submit value="Submit" theme="ajax" targets="maskValue" />
  </s:form>
  </div>
  <br>
<div id="8" style="position:absolute;top:10; left:350;
width:300; height:160;background-color:#E5E5E5;">
  <h3>Output: </h3>
  Firstname : <s:property value="firstname" />
  <br><br>
  Lastname :  <s:property value="lastname" />
  </div>
  </s:div>
  </body>
</html>

OUTPUT:

Different Web Design Tools

SiteKreator – You can instantly design, build and host a fully-branded website for personal or business use.

Leafletter – Allows you to create a “little web site” that you can then distribute anywhere (social networks, blogs, other websites).

SynthaSite – Browser-based website creation tool that allows you to collaborate with friends or colleagues. Also has lots of widgets, templates and other components you can use.

Weebly – With Weebly you can create a fully branded website using a drag and drop interface, and change your design any time.

FolioNow – A web-based tool that makes creating websites affordable and requires little effort.

Zinadoo – Lets you create and share a mobile website.

mobispirit – An online platform for creating mobile applications.

siteMighty – Web based platform for creating affiliate websites in minutes.

CreataPlace – Create a professional portfolio website without programming. And it’s affordable.

weebox – Flash-based website creator with a drag-and-drop interface. You do have to host through them.

freewebs – Fast and easy website creator with hundreds of available templates and customizable widgets.

Built Smarter – Tons of templates available, depending on the price you’re willing to pay, built-in modules and customization also available.

sampa – Free website creation and hosting. There is an ad bar that runs across the top of your site.

Wufoo – Online form builder with full CSS and XHTML integration.

formspring – Another online form builder. This one lets you get all of the form submissions through an RSS feed or single spreadsheet instead of hundreds of emails.

inserit – A codeless CMS that lets you freely design your pages and integrate live content anywhere. Host your website anywhere (Linux or Windows).

BrowserShots – Test your site in different browsers.

tweak – Tweak is a CMS that allows you to design your way, and make it conform. You can also save pages in just about any format (HTML, PHP, ASP, JSP, etc.).

formatpixel – Create an online magazine, fanzine or catalog that you can then share on your website.

RoundedCornr – Generates HTML/CSS code and images for rounded corners.

ColorSchemer – I use the color scheme gallery on this site all the time for inspiration when creating just about anything.

COLOURlovers – Tons of color theory inspiration and color schemes as well as color trends.

Color Mixers – Color Mixers creates color schemes for you, and has an easy-to-use slider interface.

ColorBlender – A free online tool for color matching and palette design. You just choose a color using the color picker and a 6-color matching palette will be automatically created.

Kuler – Make color schemes that are compatible with Adobe Creative Suite products.

colr – Another color scheme generator.

Color Tool 2.0.8 Alpha – This is a pretty cool color scheme generator that allows you to save and then link to your color scheme.

Vecteezy – Get free vector graphics from top artists around the world.

BlogFlux Button Maker – The Button Maker allows you to make 80×15 and 88×13 buttons with a few clicks and without needing to know how to use a graphics program.

Button Browser – Button gallery and button maker.

Brilliant Button Maker – Another 80×15 button maker.

Background Image Maker – You can make slash, strip, dot or gradation backgrounds with this free online tool.

Brusheezy – Very cool Photoshop brushes available for download.

Tartan Maker – Create your own tartans with this easy-to-use web-based tool. Use for backgrounds or other images.

iconfinder – An icon search engine.

Stripe Generator 2.0 – Create striped backgrounds for your site.

FamFamFam – Silk icons, 1000 to choose from. There are report icons, picture icons, XHTML/CSS buttons, hardware drive icons, feed icons, and more.

IconBuffet – Professional icon collections.

Web 2.0 Badges – Create Web 2.0 badges for your site.

The Icon Factory – They offer freeware icons as well as a shareware IconBuilder.

Colr Pickr – Pick a color and Colr Pickr will show you a bunch of images that consist primarily of that color from flickr.

terra IMS mapicons Dynamic Generator – Create PNG format images to use as icons on Google Maps or Yahoo Maps.

pic2color – Create color palettes from images, and recolor your graphics.

TypeTester – TypeTester allows you to try out different web fonts to see how they’ll look side-by-side.

DesignSnack – A user-controlled web design showcase that can serve as great inspiration. Users get to vote on sites showcased.

Web Creme – A gallery of beautiful web designs for inspiration.

CSS Collection – A collection of real websites built with CSS to serve as inspiration.

cssBeauty – Check out their gallery for tons of inspiration.

ConceptShare – Share your work with clients and coworkers with a very clear interface that is unlikely to confuse clients.

A List Apart – The must-read blog/online magazine focused on web development and design.

Web Design from Scratch – Tons of resources for design, including articles on design process, goal-oriented design, site architecture and usability.

Css ForSale – Purchase an established CSS-based website or just go here for inspiration.

Biyernes, Disyembre 30, 2011

3rd HTML EXAM

1. Do cascading style sheets make for easy web page formatting? Do you find it easy to use CSS? Explain

Ans.

Yes. At first I thougth that CSS are more difficult than the HTML codes but when you use its easy than HTML codes and its more cleaner the html codes to use.

2. Enumerate, differentiate and provide an example on the varying ways of using CSS.

Ans.

Three Ways To Use CSS:

Inline - style declarations allow us to define styles at the exact point we need them. For example, if we want to make a headline show up as large, bold, crimson text, we will find that headline in our HTML and add the CSS where the headline appears in the markup.

Example:

<p>This is a paragraph that has no inline styles applied to it.</p>

3. Give 10 examples of a regular html style formatting and show its equivalent formatting in CSS.

Ans.

HTML Style Formatting: Its Equivalent Formatting in CSS:

4. Create an html document (web page) using CSS. Show the code and a screen cap of your output.

Ans.

OUTPUT:

Lunes, Nobyembre 28, 2011

Difference Between Tables, Frames and DIV Tags

Different Web Design Tools

`<p>This is a paragraph that has no inline styles applied to it.</p>`