Here comes Fran

Class 5 – In-class Assignment #1

herecomesfran — Sat, 26 Mar 2011 19:53:38 +0000

Here is the link for today’s assignment.

Class 3 – Homework Assignment

herecomesfran — Sat, 12 Mar 2011 12:42:12 +0000

Whoop whoop remember the wireframe from 2 weeks ago? Yes this one!
Two questions/problems came up while writing the code: How do I get the text to be at a certain place? Why isn’t the div#container box going down to the bottom?

Here’s some lovely codaster:

HTML:

CSS:

Class 3 – In-Class Assigment #3

herecomesfran — Sat, 12 Mar 2011 05:25:42 +0000

Click Here to view the site.

Somehow this assignment was an easy-ride. At least compared to the assignment #2 fail. Sadly WordPress seems to delete half of my code whenever I copy paste it into the text field. Not sure why. Maybe it is correcting/auto formatting my coding mess?

Here is my HTML code:

Here is my CSS code:

Class 3 – In-Class Assignment #2

herecomesfran — Sat, 12 Mar 2011 04:48:53 +0000

Click Here to view to site.

Class 3 – In-Class Assignment #1

herecomesfran — Sat, 12 Mar 2011 03:16:08 +0000

Click Here to view the website online.

CSS turns out being harder than I initially expected. The coloring etc is pretty obvious but it took me a while to get the idea of aligning and floating. My {float:both;} solution is a mere guess than a reflected code. Anyone?

Here is my HTML Code:

Class 3 – In-Class Assignment #1

In computing, a mouse is a pointing device that functions by detecting two-dimensional motion relative to its supporting surface. Physically, a mouse consists of an object held under one of the user’s hands, with one or more buttons. It sometimes features other elements, such as “wheels”, which allow the user to perform various system-dependent operations, or extra buttons or features that can add more control or dimensional input. The mouse’s motion typically translates into the motion of a cursor on a display, which allows for fine control of a graphical user interface.

Here is my CSS Code:

#pic1 {width:200px; height:200px; border:1px solid red;}
#pic2 {width:600px; height:400px;}
div#container {width: 970px; margin-left:auto; margin-right:auto;}
div#row1 {float:both;}
div#row2 {float:both;}

Class 3

herecomesfran — Sat, 05 Mar 2011 15:19:01 +0000

CSS – Cascading Style Sheets

rel=”stylesheet”
type=”text/css”
href=”styles/basic.css” />

There are relative and absolute references.
The order of and
etc is important mainly for SEO, if you want them reversed, keep them in a correct order in your html and inverse them with your css.
Block elements vs. inline elements.

Assignment Week 2 – Convert a wireframe into XHTML

herecomesfran — Sat, 26 Feb 2011 20:22:44 +0000

Click Here to view the uploaded web page.

Or check out my xhtml code below:

Class 2 – In-class Assignment

Power Rangers

width=”175″
height=”200″
src=”http://www.nickutopia.com/wp-content/uploads/2010/05/Power-Rangers-Nickelodeon1.jpg” align=”left”/>

Power Rangers is a long-running American

entertainment and merchandising franchise

built around a live action children’s television

series featuring teams of costumed heroes.

Despite initial criticism for its action violence

targeted to child audiences, the franchise has

continued, and as of 2011[update] the show

consists of 19 television seasons, 16 different

series, and two theatrical films.

Be a Power Ranger

Things Power Rangers do

Jump

Fight

Help

What is your favorite Power Ranger activity?

Jump

Fight

Help

Let’s test your Power Ranger knowledge…
Which year did the Power Rangers debut on TV?

You are almost done…
Tell us your gender and submit your questionnaire to become a Power Ranger

male

female

Class 2

herecomesfran — Sat, 26 Feb 2011 14:21:42 +0000

Separation of presentation from content

HTML is for basic content and functionality
CSS is used for presentation and applies the style to the HTML code.
Check out: csszengarden.com





The Title of Your Page

Explanation:

Tags <>, HTML Tag
<> starting tag, ending tag.
Everything between starting and ending tag is html code
Starting and ending tag create an element
Two required elements in between and are and
Inside the head element there is the <em>This is the title</em> Which is the title of the page that will show up at the top of the browser.
This is HTML, to convert this into XHTML, using xml (special syntax). To indicate this to the web browser we add the following two lines:
This indicates which version of xml we are using.
This indicates what type of document we are using. Most browsers ignore the first two lines completely.
Opening the .html document in a browser on your own computer is called ‘testing locally’. It does not involve uploading the site to an external browser. ‘testing locally’ is indicated by file:// in the address line of the browser.

General comments:

to
Web browsers are built to understand html, css and java script.
are paragraphs, there is no numbering.
The forward thinking of xhtml is to remove the visual aspects of the language (eg. meaning bold turned into ) this is happening because the platform of the web is expanding and devices like mobile phones, ereaders and even programs that scan the codes and read it out (for handicapped people) have come up.

is an anchor tag that is used for links.

There is a tag name and a tag attribute. Attributes are in ” ” or ‘ ‘.

is a self closing line break tag, because there can’t be anything ‘in’ a line break.

Umlaute: &u/a/ouml; A complete list can be found here: http://www.utexas.edu/learn/html/spchar.html

Images can be re-sized in html code. This is however not recommended because we enter into presentation.

Some tags have a specific order, such as , and
or
or