Website Design 1 Professor Danne Woowebdesign.dannewoo.com

ΑRTS 214 – 02Spring 2016Thursday 2:00 pm – 5:50 pm I-Building 213

Four DsDiscoverDefineDesignDevelop

Four DsDiscoverDefineDesignDevelop

What is HTML used for?

Basic Structure and Elements

- Text- Links- Lists- Images

- Tables

- Forms- Audio- Video

Lists

1. Chop potatoes into quarters2. Simmer in salted water3. Heat milk and butter4. Drain potatoes and mash5. Mix in the milk mixture

UNORDERED DEFINITIONORDERED

• 1kg King Edward potatoes• 100ml milk• 50g salted butter• Freshly grated nutmeg• Salt and pepper to taste

SashimiSliced raw fish

ScaleA device used to accurately measure weight

Lists

Ordered List HTML

<ol><li>Chop potatoes into quarters</li><li>Simmer in salted water for 15-20

minutes until tender</li><li>Heat milk, butter and nutmeg</li><li>Drain potatoes and mash</li><li>Mix in the milk texture</li>

</ol>

Lists

Ordered List RESULT

Lists

Unordered List HTML

<ul><li>1kg King Edward potatoes</li><li>100ml milk</li><li>50g salted butter</li><li>Freshly grated nutmeg</li><li>Salt and pepper to taste</li>

</ul>

Lists

Unordered List RESULT

Lists

Definition List HTML

<dl><dt>Sashimi</dt>

<dd>Sliced raw fish served with condiments.</dd>

<dt>Scale</dt><dd>Device used to measure the weight of ingredients.</dd><dd>A technique by which the scales are removed from the skin of fish.</dd>

</dl>

Lists

Definition List RESULT

Lists

Nested Lists HTML

<ul><li>Mousses</li><li>Pastries</li><ul>

<li>Croissant</li><li>Milles-feille</li><li>Palmier</li><li>Profiteroles</li>

</ul><li>Tarts</li>

</ul>

Lists

Nested Lists RESULT

Images

Storing Images on Your Site

Images

Images on Your Site HTML

<img src="images/quokka.jpg"alt="A family of quokka"title="The quokka is an Australian

marsupial that is similar insize to the domestic cat" />

Images

Images on Your Site RESULT

Images

Links on Images HTML

<a href="http://www.google.com"><img src="images/quokka.jpg"

alt="A family of quokka"title="The quokka is an Australian

marsupial that is similar insize to the domestic cat" />

</a>

Images

Height and Width of Images HTML

<img src="images/quokka.jpg"alt="A family of quokka"title="The quokka is an Australian

marsupial that is similar insize to the domestic cat"

width="600"height="450" />

Images

Height and Width of Images RESULT

Images

Where to Place Images in your Code HTML

<img src="images/bird.gif" alt="bird"width="100" height="100" />

<p>There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

Images

Where to Place Images in your Code RESULT

Images

Where to Place Images in your Code HTML

<p><img src="images/bird.gif" alt="bird"width="100" height="100" />There are

around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

Images

Where to Place Images in your Code RESULT

Images

Alignment (OLD WAY) HTML

<p><img src="images/bird.gif" alt="bird"width="100" height="100" align="left" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

Images

Alignment (OLD WAY) RESULT

Images

Alignment (OLD WAY) HTML

<p><img src="images/bird.gif" alt="bird"width="100" height="100" align="right" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Man species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>

Images

Alignment (OLD WAY) RESULT

Images

GIF JPEG PNG or SVG

Minimal colors Full color images Minimal colors with transparent background

Image Formats

Images

Animated GIF

http://reedandrader.com

Images

Image Dimensions

Images

Image Dimensions

If an image has the wrong dimensions, it can look squished.

Images

Image Dimensions

If an image is too small, it can look blurry when shown bigger.

Images

Image Dimensions

Tables

Tables

Basic Table Structure HTML

<table><tr>

<td>15</td><td>15</td><td>30</td>

</tr><tr>

<td>45</td><td>60</td><td>90</td>

</tr></table>

RESULT

Tables

Basic Table Structure

Tables

Table Headings HTML

<table><tr>

<th></th><th scope="col">Saturday</th><th scope="col">Sunday</th>

</tr><tr>

<th scope="row">Tickets sold</th><td>120</td><td>135</td>

</tr></table>

RESULT

Tables

Table Headings

Tables

Spanning Columns HTML

...<tr>

<th>Monday</th><td colspan="2">Geography</td><td>Math</td><td>Art</td>

</tr>...

RESULT

Tables

Spanning Columns

Tables

Spanning Rows HTML

...<tr>

<th>6pm - 7pm</th><td rowspan="2">Movie</td><td>Comedy</td><td>News</td>

</tr><tr>

<th>7pm - 8pm</th><td>Sport</td><td>Current Affairs</td>

</tr>

RESULT

Tables

Spanning Rows

Forms

Forms

Forms

Text Input HTML

<formaction="http://example.com/join.php">

<p>Username:<input type="text" name="username"size="15" maxlength="30" />

</p></form>

RESULT

Forms

Text Input

Forms

Password HTML

<p>Username:<input type="text" name="username"

size="15" maxlength="30" /></p>

<p>Password:<input type="password" name="password"

size="15" maxlength="30" /></p>

RESULT

Forms

Password

Forms

Text Area HTML

<p>What did you think of this gig?</p>

<textarea name="comments"cols="20" rows="4">Enter your comments...

<textarea/>

RESULT

Forms

Text Area

Forms

Radio Buttons HTML

<p>Your favorite genre:<br />

<input type="radio" name="genre"value="rock" checked="checked" /> Rock

<input type="radio" name="genre"value="pop" /> Pop

<input type="radio" name="genre"value="jazz" /> Jazz

</p>

RESULT

Forms

Radio Buttons

Forms

Check Boxes HTML

<p>Your favorite music service:<br /><input type="checkbox" name="service"value="iTunes"checked="checked" /> iTunes

<input type="checkbox" name="service"value="Last.fm" /> Last.fm

<input type="checkbox" name="service"value="Spotify" /> Spotify

</p>

RESULT

Forms

Check Boxes

Forms

Dropdown HTML

<select name="devices">

<option value="iPod"selected="selected">iPod</option>

<option value="radio">Radio</option>

<option value="PC">Computer</option>

</select>

RESULT

Forms

Dropdown

Forms

Multiple Select Box HTML

<select name="devices" size="4">

<option value="guitar"selected="selected">Guitar</option>

<option value="drums">Drums</option><option value="keys"selected="selected">Keyboard</option>

<option value="bass">Bass</option>

</select>

RESULT

Forms

Multiple Select Box

Forms

Submit Button HTML

<form action="http://eg.com/email.php"><p>Subscribe to our email list:</p>

<input type="text" name="email" />

<input type="submit"value="Subscribe" />

</form>

RESULT

Forms

Submit Button

Forms

Image Button HTML

<form action="http://eg.com/email.php"><p>Subscribe to our email list:</p>

<input type="text" name="email" />

<input type="image"src="images/subscribe.jpg"width="100" height="20" />

</form>

RESULT

Forms

Image Button

Extra Markups

Comments in HTML HTML

<!-- start of introduction --><h1>Current Exhibition</h1><h2>Olafur Eliasson</h2><!-- end of introduction -->

<!--<a

href="mailto:info@example.org">Contact</a>-->

RESULT

Extra Markups

Comments in HTML

Extra Markups

ID Attributes HTML

<p>Water and air. So very commonplace are these substances, they hardly attraction attention and yet they vouchsafe our very existence.</p><p id="pullquote">Every time I view the sea I feel a sense of calming security, as if visiting my ancestral home; I embark of a voyage of seeing.</p><p>Mystery of mysteries, water and air are right there before us in the sea.</p>

RESULT

Extra Markups

ID Attributes

Extra Markups

Class Attributes HTML

<p class="important">For a one-year period from November 2010, the MarugameGenichiro-Inokuma Museum of Contemporary Art (MIMOCA) will host...</p><p>Each will showcase works by the artist thematically contextualized under the headings...</p><p class="important admittance">Hours: 10:00 - 18:00 (No admittance after 17:30)</p>

RESULT

Extra Markups

Class Attributes

Extra Markups

Block Elements HTML

<h1>Hiroshi Sugimoto</h1><p>The dates of the ORIGIN OF ART

exhibition are as follows:</p><ul>

<li>Science: 21 Nov - 20 Feb 2010</li><li>Architecture: 6 Mar - 15 May

2010</li><li>History: 29 May - 21 Aug 2010</li><li>Religion: 28 Aug - 6 Nov 2010</li>

</ul>

RESULT

Extra Markups

Block Elements

Extra Markups

Inline Elements HTML

Timed to a single revolution of the planet around the sun at a 23.4 degrees tilt that plays out the rhythm of the seasons, this <i>Origins of Art</i> cycle is organized around four themes: <b> science, architecture, history </b> and <b>Religion</b>.

RESULT

Extra Markups

Inline Elements

Extra Markups

Grouping Text & Elements in a Block HTML

<div id="header"><img src="logo.gif" alt="Anish Kapoor" /><ul><li><a href="index.html">Home</a></li><li><a href="bio.html">Bio</a></li><li><a href="works.html">Works</a></li><li><a href="contact.html">Contact</a></li>

</ul></div><!-- #header -->

RESULT

Extra Markups

Grouping Text & Elements in a Block

Extra Markups

Grouping Text & Elements Inline HTML

<p>Anish Kapoor won the Turner Prize in1991 and exhibited at the<span class="gallery">Tate Modern</span>gallery in London in 2003.</p>

RESULT

Extra Markups

Grouping Text & Elements Inline

Extra Markups

iframes HTML

<iframe width="450" height="350"src="http://maps.google.co.uk/maps?

q=moma+new+york&amp;output=embed"frameborder="0"scrolling="no">

</iframe>

RESULT

Extra Markups

iframes

Extra Markups

Escape Characters HTML

<p>&copy; 2012</p><p>&#169; 2012</p>

<p>The &lt;html&gt; tag</p><p>The &#60;html&#62; tag</p>

RESULT

Extra Markups

Escape Characters

Extra Markups

Information About Your Pages HTML

<head><meta name="description"content="An essay on installation art" />

<meta name="robots" content="nofollow" />

<meta http-equiv="Author"content="Danne Woo" />

<meta http-equiv="pragma"content="no-cache" />

</head>

In Class Assignment

Create a HTML page for all your unique pages on your website.Have at least a navigation connecting all your pages.

Homework

Read chapters 10-13 in the text book.