Interaktionsudvikling, Multimediedesigneruddannelsen, Århus Erhvervsakademi

Dag 1

HTML og CSS

Plan for dag 1.

  1. Lektionsplan for interaktionsudvikling 1.sem
  2. Pædagogiske overvejelser i grundbogen http://www.headfirstlabs.com/readme.php Get the example files from the textbook download page
  3. Powerpoint intro
  4. Grundelementer i HTML
  5. Hand's on example
  6. Block og Inline elementer, Wellformed
  7. Uploading af et website til et webhotel (Webhost)

     

Læsestof til disse lektioner

Head First – HTML with CSS & XHTML

Chapter 1 - 4

 

 

Supplerende resourcer

Answers.com   Client-server
http://www.answers.com/topic/client-server
Webserver   http://en.wikipedia.org/wiki/Web_server
Browser   http://en.wikipedia.org/wiki/Web_browser
URL   http://en.wikipedia.org/wiki/Uniform_Resource_Locator
WWW   http://en.wikipedia.org/wiki/Www
Firefox addons   https://addons.mozilla.org/da/firefox/addon/1843
Installer gerne: Firebug, FireFTP
HTML.dk   http://www.html.dk/tutorials/html/introduktion.asp

 

 

Øvelser/opgaver i ugens emner

 

 

 

Noter

 

Forskellige former for client-server modeller

 

model

 

client_server_model

 

Oversigt over grund HTML elementer

 

HTML Basic Document

 

<html>
<head>
<title>Document name 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, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>


<a href="http://www.ats.dk" target="_blank"> Open link in a new window </a>

A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

Images:

<img src="http://www.example.com/images/cat.jpg" alt="Alternate Text">
<img src="../images/car.jpg" alt="Alternate Text">

Unordered list

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Next 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>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

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="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</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 some source.
</blockquote>

<address>
Address 1<br>
Address 2<br>
City<br>
</address>

 

Hand's on eksempel (Jeg skriver og I skriver med).

Plan:

 

Liste over forskellige HTML editorer

Men vi starter lige med Windows Notesblok !

notesblok

Markup til nedenstående side?

loung_screen

 

Udviklingsmetode

  1. You have some text/idea, content
  2. Outline the structure  (Textbook:Exercise 2_0)
  3. Markup the text with HTML tags (Textbook:Exercise 2_1)

 

 

Block og Inline elementer


Block elements ( <blockquote>,<h1>,<h2>,<p>, <div>...)


  Block elements has linebreak before and after 



Inline elements( <q>, <em>, <a> .. ) 
Empty/Inline (<br><img><hr> ) - Have no ending tags ! Inline elements follow the flow of the line.

 

 

Wellformed Nesting of elements 

Many HTML elements can be nested, or contained within other HTML elements:

<p>You <em>rock</em></p>

Nesting can be more complex:

<p>King Louis said, <q lang="fr">L'état, c'est <em>moi!</em></q>
(<cite><a href="/wiki/Louis_XIV_of_France">Wikipedia</a></cite>).</p>

Nesting may be arbitrarily deep, but for the code to remain valid, the elements must be closed in the reverse order that they were opened. (This pattern is known as Last in, first out.)

Incorrect 
<p>Claire kissed <em>Nick</p></em>
Correct
<p>Claire kissed <em>Nick</em></p>
 Wellformed Structure examples (Firebug) 

Hand's on examples : Wellformed Link lists with <ul><ol><li></li>  , lists inside lists,

    

Uploading af website til et webhotel (Webhost)

Chapter 4. A Trip to Webville  

URL, HTTP, Webhosting, FTP, Uploading

URL = protocol:// domainname / path /filename 

f.eks.

http://slipsager.freehostia.com/Day2/segway2.jpg

 

ftp://slipsager.net

mailto://someone@akademiaarhus.dk

http://en.wikipedia.org/wiki/Web_hosting_service  

 
Webhosting    https://www.one.com/en/ 
Free webhosting: http://freehostia.com/ eller http://www.freewebspace.net/free/Free-webhosting

Upload file (with Firefox addon FireFTP or with Dreamweaver)   

 

Help for uploading to Freehostia (pdf)


 Hand's on: Upload your html_css folder to your webhost.

 

 

Opgaver/Øvelser

 

Exercise 1. Make a folder called day1 on your desktop where you store the files you create in this exercise.

 
Exercise 2.Make a basic HTML document and save it as exercise1_2.html  . Write 'HTML exercise'  in the <title> element and try to use the 6 heading tags  h1,h2,h3.....h6 on som text.



Exercise 3. Make a basic HTML document save it as exercise1_3.html . Write some content (text) and try to mark it up with the following tags <h3>,<p>, <br>, <em>, <q>, <blockquote><div>. Try to find out what the different tags means by using a HTML reference.

Exercise 4. Take a short break :-)

Exercise 5.Open exercise1_3.html and save it as  exercise1_5.html .  Style all the text with a style sheat. Hint: look a page 30 or the hand's on example..



Exercise 6.Make a  link in exercise1_5.html on one of the words in the text. with the <a> tag.  The hyperreference of the link shall be exercise1_3.html.

Save the file as exercise1_6.html

 


Exercise7. Make a  link page with the name day1_yourName.html   

The linkpage shall contain 6 links that refers to the different day 1  exercises (1-6).

Hint:  

<a href="exercise1_2.html"> Exercise 2</a>

</br>
<a href="exercise1_3.htm"> Exercise 3</a>

 


Exercise 8. Open your linkpage and test if the links are working locally on your computer. Show it to Bjarne.

 

Prøv at upload løsningerne til din freehostia webdomæne eller et andet webhotel og aflever en URL til dag1.html via Fronter aflevering.

 

 

Hand's on dag 1

 

<html>
<head>
<title>Hands on Lounge</title>
<style type="text/css">
body {
background-color:tan;
margin:10%;
}
h1 { color: #093 }
h2 { color: #639 }
a {color: #933 }

</style>
</head>
<body>

<h1>Welcome to the Head First Lounge</h1>
<img src="images/drinks.gif" alt="drinks">
<p>Join us any evening for refreshing <a href="elixir.html">elixirs</a>, conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided; BYOWS (Bring Your Own Web Server).
</p>
<h2>Directions</h2>
<p>You'll find us right in the center of downtown Webville. Come join us!</p>

<h2>Links list</h2>
<ul>
<li> <a href="elixir.html">Elixir</a></li>
<li> <a href="directions.html">Directions</a></li>
<li> <a href="http://www.wikipedia.com">Wikipedia.com</a></li>
</ul>

</body>
</html>