Monday 14 May 2012

WEB // Lorraines Sessions

Throughout Loraine's sessions on a Thursday Morning and Afternoon, we've been picking up on a few area's that we didn't fully understand when being taught by Simon. Basic CSS and HTML really interests me, this week we've been learning about lots of different helpful pockets of information. I've learnt that theres a huge difference between a web coding and website design, for example when being employed we wouldn't take on the role of linking websites with databases, maintenance and accessibility but instead designing the user Interface and the general look of the pages.


HTML Basic Document

<html>
<head>
<title>Title of document goes here</title>
</head><body>
Visible text goes here...
</body>

</html>

Heading Elements

<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>

A named anchor:

<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Unordered list

<ul>
<li>Item</li>
<li>Item</li>
</ul>

Ordered list<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Definition list<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Iframe
<iframe src="demo_iframe.htm"></iframe>

Frames

<frameset cols="25%,75%">
<frame src="page1.htm" />
<frame src="page2.htm" />
</frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>

<textarea name="comment" rows="60" cols="20"></textarea>

</form>
Entities&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

Other Elements

<!-- This is a comment -->

<blockquote>
Text quoted from a source.
</blockquote>

A few quick scamps below and ideas for the layout of my website. We did a session where we received feedback on our scamps, I found that the overall outcome was that I overcomplicate things too much. This seems to be a growing trend across the different aspects of graphic design, simple and plain design is effective plus will be much easier for users to navigate around. 



Below are a few of the bits of feedback I received;


No comments:

Post a Comment