Class 5 – In-class Assignment #1
Here is the link for today’s assignment.
Class 3 – Homework Assignment
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
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
Click Here to view to site.
Class 3 – In-Class Assignment #1
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:
<?xml version=”1.0″ encoding=”utf-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”assignmentone.css” /></head>
<body>
<div id=”container”>
<h1>Class 3 – In-Class Assignment #1</h1>
<div id=”row1″>
<img id=”pic1″ src=”http://www.clevelanddotnet.info/images/MouseNotWorking.jpg”/></div>
<div id=”row2″>
<img id=”pic2″ src=”http://mouseworksonline.com/images/mouse.gif”/></div>
<p>In computing, a mouse is a pointing <span style=”color:blue;”>device</span> that functions by detecting two-dimensional motion relative to its supporting surface. <span style=”color:red;”>Physically,</span> 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. <span style=”color:orange;”>The mouse’s motion typically</span> translates into the motion of a cursor on a display, which allows for fine control of a graphical user interface.</p>
</div>
</body>
</html>
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
CSS – Cascading Style Sheets
<link
rel=”stylesheet”
type=”text/css”
href=”styles/basic.css” />
- There are relative and absolute references.
- The order of <h> and <p> 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
Click Here to view the uploaded web page.
Or check out my xhtml code below:
<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Class 2 – In-class Assignment</title>
</head>
<body>
<h1>Power Rangers</h1>
<img
width=”175″
height=”200″
src=”http://www.nickutopia.com/wp-content/uploads/2010/05/Power-Rangers-Nickelodeon1.jpg” align=”left”/>
<p>
  Power Rangers is a long-running American<br/>
  entertainment and merchandising franchise<br/>
  built around a live action children’s television<br/>
  series featuring teams of costumed heroes.<br/>
  Despite initial criticism for its action violence <br/>
  targeted to child audiences, the franchise has <br/>
  continued, and as of 2011[update] the show <br/>
  consists of 19 television seasons, 16 different <br/>
  series, and two theatrical films.
<p/> <br/>
<h2>Be a Power Ranger</h2>
<form>
<label for=”what”> What’s your Power Ranger name? </label>
<input id=”what” type=”Text” value=”Enter your name here…”/> <br/> <br/>
<label for=”which”> Which Power Ranger color do you wear? </label>
<input id=”which” type=”Text” value=”Enter your color here…”/>
</form>
<p><strong>Things Power Rangers do</strong></p>
<ol>
<li>Jump</li>
<li>Fight</li>
<li>Help</li>
</ol>
<p><strong>What is your favorite Power Ranger activity?</strong></p>
<input type=”radio” name=”r1″ id=”c1″/>
<label for=”c1″>Jump</label> <br/>
<input type=”radio” checked=”checked” name=”r1″ id=”c2″/>
<label for=”c2″>Fight</label> <br/>
<input type=”radio” name=”r1″ id=”c3″/>
<label for=”c3″>Help</label> <br/>
<p><strong>Let’s test your Power Ranger knowledge…<br/> Which year did the Power Rangers debut on TV?</strong></p>
<select>
<option selected=”selected”>1997</option>
<option>1993</option>
</select> <br/>
<p><strong>You are almost done…<br/>Tell us your gender and submit your questionnaire to become a Power Ranger</strong></p>
<input type=”checkbox” id=”a1″/>
<label for=”a1″> male </label>
<input type=”checkbox” id=”a2″/>
<label for=”a2″> female </label> <br/><br/>
<table>
<tr>
<td>
               
</td>
<td>
<input type=”button”value=”Submit”/>
</td>
</tr>
</table>
</body>
</html>
Class 2
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
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>The Title of Your Page</title> </head> <body> <!-- the contents of the page go here --> </body> </html>
Explanation:
- Tags <>, <html> 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 <html> and </html> are <head> </head>and <body> </body>
- Inside the head element there is the <title> This is the title </title> 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:
- <?xml version=”1.0″ encoding=”utf-8″?> This indicates which version of xml we are using.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 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:
- <h1></h1> to <h6> </h6>
- Web browsers are built to understand html, css and java script.
- <p></p> are paragraphs, there is no numbering.
- The forward thinking of xhtml is to remove the visual aspects of the language (eg. <b> meaning bold turned into <strong>) 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.
- <a> is an anchor tag that is used for links.
- There is a tag name and a tag attribute. Attributes are in ” ” or ‘ ‘.
- <br/> 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 <table>, <tr> and <td> or <form> or <select>,<option>
- “radio” buttons are not automatically mutually exclusive. The need to be given the same name in order to do so. (mutually exclusive meaning you can only check one at a time)
To Do:
- Learn: http://w3schools.com/tags/default.asp
- Learn: http://w3schools.com/tags/ref_standardattributes.asp
Is this happening to anyone else?
I just realized that Google Reader publishes old, already removed posts. Is this happening to anyone else? Slightly irritating.
Assignment Week 1 – Travel Destination Website Wireframe
I am a big fan of travel inspiration sites like Wanderfly and I spend hours browsing through the picture galleries on the Lonely Planet website. While creating the wireframe for this week’s assignment I tried to combine some elements of both websites and have a site that has a lot of pictures as well as articles on different destinations – a bit like on a blog, to allow the visitor to get a better idea of the different destinations.
