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

 

Læs gerne dag 1 noterne på denne side inden undervisningen.

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 Til Dag1

 

Forskellige former for client-server modeller

 

model

 

client_server_model

 

Oversigt over grund HTML elementer

 

HTML = Hyper Text Markup Language (fra 1991 ved Tim Berners Lee)

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

 

 

Prøv at opmarker/markup(eng.) elementerne på nedenstående screendump af en webside.

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)
  4. Add some style to the page with CSS

 

 

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.

 

Unordered list (ul):

Ordered list (ol):

  1. Bjarne Stroustrup
  2. Rasmus Lerdorf
  3. Jakob Nielsen
    

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.

 

 

Øvelser dag 1

 


Øvelse 1. Grundelementer

Lav en grundlæggende HTML-dokument og gem den som exercise1_1.html. Skrive noget kort indhold (tekst) og forsøge at opmarkere det med følgende tags <h1><h2> <h3>, <p>, <br>, <em>, <q>, <blockquote>. Prøv at finde ud af, hvad de forskellige mærke/tags betyder, ved hjælp HTML-referencen på denne her side.



Øvelse 2.Styling af elementer

Åben exercise1_1.html og gem den som exercise1_2.html. Style tekstens elementer via et style element i head elementet.

<style type="text/css"> 
 body {	background-color: tan;
			margin-left: 20%;
			margin-right: 20%;
 }
	
	p {		font-family: verdana; 
			font-color: #000000;

	}

</style>

Prøv også at style nogle flere af elementerne.

Tip: se side 30 i grundbogen eller kig på kildekode til denne webside.



Øvelse 3.Links og billeder

Åben exercise1_1.html og gem den som exercise1_3.html.

Gruppe Øvelse 4. Innovative steder i Århus

Prøv at lav et simpelt website, der vise nogle af de steder i så på byturen i torsdags.

Indhold: tekst (hvad lærte i om stederne?), billeder (nogle billeder som jeres gruppe tog på turen), links (til stedet, google.maps adresse m.m.)

 

 

Prøv at upload løsningerne i din HTML_CSS mappe til dit freehostia webdomæne eller et andet webhotel og aflever din URL til Fronter afleveringen HTML_CSS dag1 inden dag2.

 

 

 

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>