human computer interaction › ~hy364 › files › project › html-css.pdfcs-364: introduction to...
TRANSCRIPT
HY-364: Επικοινωνία Ανθρώπου - Μηχανής Slide 1HY-364: Επικοινωνία Ανθρώπου - Μηχανής Slide 1
COURSE CS-364 (OPTIONAL)
HUMAN – COMPUTER INTERACTION
UNIVERSITY OF CRETEFACULTY OF SCIENCES AND ENGINEERING
COMPUTER SCIENCE DEPARTMENT
ECTS: 6
Prerequisite: CS-150
Introduction
HTML HTML info Tag Attributes Basic HTML DOM XHTML <!DOCTYPE> tag Meta tags Basic HTML Tags Links Tables Lists Forms and data input Images Div και Span elements HTML styling Events in HTML 4.0 Scripts (Javascript)
CSS CSS styling
Why is CSS needed;
CSS syntax
CSS Background
CSS Text
CSS Font
CSS Border
CSS Margin
CSS Padding
References
Slide 2CS-364: Introduction to Human – Computer Interaction
What is HTML;
It is a language that describe webpages
Hyper Text Markup Language
The HTML documents are text files that contain markup tags
Τα markup tags informs the browser the way that the webpage should be presented
File extension: htm or html
To create an html file a text editor is enough
Slide 4CS-364: Introduction to Human – Computer Interaction
HTML are documents that contain HTML elements
The HTML elements are determined using HTML tags
HTML tags usually used in pairs, for example <b> (opening tag) και </b> (closing tag)
The text between the opening and closing tag is the content of the element
HTML is not case sensitive
Slide 5CS-364: Introduction to Human – Computer Interaction
Tags may contain attributes. Attributes provide more information about an HTML element.
e.g. <table border="0">
name-value pairs (name=“value”)
They are determined in the opening tag of an HTML element
Slide 6CS-364: Introduction to Human – Computer Interaction
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html><head>
<title>...</title>
<meta name="keywords" content=“C, C++, C#“ />
...</head>
<body>
...
</body>
</html>
Slide 7CS-364: Introduction to Human – Computer Interaction
Extensible Hypertext Markup Language
A stricter version of HTML
The HTML 4.01 elements correspond with the XML syntax
Recommended by W3C
Slide 8CS-364: Introduction to Human – Computer Interaction
This tag informs the browser about the HTML or XHTML version that the file uses
HTML Strict DTD
Use this version for clear markup, without unnecessary elements. Use it combined with CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Slide 9CS-364: Introduction to Human – Computer Interaction
HTML Transitional DTD
Use this version when the website is intended to be used by users who have browsers that don’t support CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Slide 10CS-364: Introduction to Human – Computer Interaction
HTML also contains meta elements which are included in the head of the HTML file
Provides meta-information about the file
Describes the contents of the file
<meta name="description" content=“Source code for C, C++, C#">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content=“C, C++, C#">
Slide 11CS-364: Introduction to Human – Computer Interaction
Headings
Headings are defined using the tags <h1> to <h6>. The <h1> defines the biggest and most important hierarchically heading. Respectively the tag <h6> defines the smallest heading.
<h1>CS-364: Introduction to HCI</h1>
<h2>CS-364: Introduction to HCI</h2>
<h3>CS-364: Introduction to HCI</h3>
<h6>CS-364: Introduction to HCI</h6>
Paragraphs
Paragraphs are defined using the tag <p>
E.g. <p>This is a paragraph</p>
Slide 12CS-364: Introduction to Human – Computer Interaction
Line Breaks
The tag <br> produces a line break in text
The <br> tag is an empty tag which means that it has no end tag
Non-breaking Space
To add a space character in your text, use the
Comments
They are surrounded by the opening tag <!--and by the closing tag -->
e.g. <!-- This is a comment -->
Slide 13CS-364: Introduction to Human – Computer Interaction
To create a hyperlink to another document, use the tag <a> (anchor)
It can redirect to any web resources (HTML page, image, sound file, video, etc.)
The href attribute specifies the URL of the page the link goes to
<a href="http://www.google.gr/" target="_blank"> Google </a>
Target attribute
_blank: opens the linked document in a new window or tab
_self: opens the linked document in the same frame
_parent: opens the linked document in the parent frame
_top: opens the linked document in the full body of the window
Slide 14CS-364: Introduction to Human – Computer Interaction
Named Anchors
With the use of named anchor we can create links that go directly to a specific area of our webpage
We use the attribute name to create a bookmark inside an anchor
<a name="tips"> Helpful tips </a>
Use the “href” that goes to the bookmark
<a href="#tips"> Go to the helpful tips </a>
Slide 15CS-364: Introduction to Human – Computer Interaction
A table consist of rows (that are defined using the <tr> tag), And every row consist of table cells (that are defined using the <td> tag)
A table cell can contain text, images, lists, paragraphs, forms, horizontal lines,tables, etc.
<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
</table>
Slide 16CS-364: Introduction to Human – Computer Interaction
colspan and rowspan attributes
<table border="1">
<caption>Header</caption>
<tr>
<th>Office</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>postgraduate secretariat</td>
<td>+30-2810-1234567</td>
<td>+30-2810-1234568</td>
</tr>
</table>
Slide 17CS-364: Introduction to Human – Computer Interaction
width and height attributes
Static: using Pixels
Percentage: percentage of the available vertical or horizonal space
Usage of percentage is recommended
<table border="1" width=“40" height=“35">
<table border="1" width="50%" height=“40%">
Slide 18CS-364: Introduction to Human – Computer Interaction
HTML supports ordered, unordered, definition and nested lists
Unordered Lists
In an unordered list the list items will be marked with bullets
Ordered Lists
In an order list the list items will be marked with numbers by default
Description Lists
A description list is not an element list. A description list is a list ofterms, with a description of each term.
Slide 19CS-364: Introduction to Human – Computer Interaction
Slide 20CS-364: Introduction to Human – Computer Interaction
Ordered List
<ol><li>Red</li><li>Green</li><li>Blue</li>
</ol>
Description List
<dl><dt>Coffee</dt><dd>Black drink</dd><dt>Milk</dt><dd>White drink</dd>
</dl>
Unordered List
<ul><li>Red</li><li>Green</li><li>Blue</li>
</ul>
<ul type="square">
<li>Specific
<ol type="lower-roman">
<li>RDF Validator</li>
<li>Feed Validator</li>
<li>P3P Validator</li></ol>
</li>
<li>Basic
<ul type="circle">
<li>MarkUp Validator</li>
<li>CSS Validator
<ol type="A" start="3">
<li>by URI</li>
<li>by File Upload</li>
</ol>
</li></ul></li></ul>
Slide 21CS-364: Introduction to Human – Computer Interaction
Nested List
Forms
A form is an area that can contain form elements
The form elements are elements that allow the user to input information (for example text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.)
The form is defined by the tag <form></form>
Input
The most commonly used form element is the <input> tag. The input type is determined from the type attribute(Text Field, Radio Button, Checkbox)
Drop Down Boxes, TextAreas
Slide 22CS-364: Introduction to Human – Computer Interaction
Text fields / Password
They are used to input letters, numbers, etc. in a form. For the password fields set the type attribute as type=“password”.
<form>Name:
<input type="text" name="firstname">
</form>
Radio Buttons
They are used to choose one option between a predefined set of options
<form>
<input type="radio" name="sex" value="male">Boy<br>
<input type="radio" name="sex" value="female">Girl
</form>
Slide 23CS-364: Introduction to Human – Computer Interaction
Checkboxes
They are used to choose one or more options from a predefined set of option
<input type="checkbox" name="vehicle" value="Bike" />Bicycle<br>
<input type="checkbox" name="vehicle" value="Car" />Car<br>
<input type="checkbox" name="vehicle" value="Airplane" />Airplane<br>
Drop Down Boxes
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
</select>
Slide 24CS-364: Introduction to Human – Computer Interaction
Text area
<textarea rows=“5" cols=“25">This is a text area</textarea>
Hidden Fields
Not visible by the user
Commonly used to store a default value
<input type=“hidden” name=“languageID” value=“2” />
Slide 25CS-364: Introduction to Human – Computer Interaction
Action and Method Attributes
Action attribute
Defines the name of the file where the form content will be sent
Method attribute
GET: This method sends the form’s content to a URL that is determined with pair name-value▪ Useful for bookmarking the result
POST: this method sends the form’s content as an HTTP transaction▪ More secure than get and no size limit
Slide 26CS-364: Introduction to Human – Computer Interaction
Submit Button
Informs the browser to collect all the options, values and text that is
inputted to the form elements and to send them to the form handler which is specified in the form's action attribute
Reset Button
Resets the form to its initial state
Slide 27CS-364: Introduction to Human – Computer Interaction
<form action= "test_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike" checked="checked" /> Bicycle<br/>
<input type="checkbox" name="vehicle" value="Car" />Car<br/>
<input type="checkbox" name="vehicle" value="Airplane" />Airplane<br/>
<br/>
<input type="submit" value="OK" />
<input type="reset" value= "Clear" />
</form>
Slide 28CS-364: Introduction to Human – Computer Interaction
Usage of the tag <img>
Attribute src (the source of the image file)
Attribute alt (the alternative text of the image)
<img src="/images/test.gif" alt="test image" width="144" height="50" />
<img src="http://www.w3schools.com/images/ie.gif" />
Slide 29CS-364: Introduction to Human – Computer Interaction
The tags <span> and <div> are really important while using CSS
<div>
Is used are a container of other tags
Alternative way to present content (other way is using tables)
Creates a line change before and after the element
Attributes : id, width, height, style, align, ...
<span>
This tag is used to group inline-elements in a document
This tag provides no visual change by itself
Does not support the attribute align
Slide 30CS-364: Introduction to Human – Computer Interaction
<div id="menu" align="right" >
<a href="">HOME</a> |
<a href="">CONTACT</a> |
<a href="">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>This paragraph would be your
<span style="color: red;">content paragraph</span>
with all of your readable material.</p>
</div>
Slide 31CS-364: Introduction to Human – Computer Interaction
Colors
16 basic colors
(black, yellow, blue, green, navy, red, lime, ...)
RGB (Red, Green, Blue)
Each parameter can be from 0 (no usage of this color) to 255 (full color)
e.g. (0,0,255) = blue, (255,255,255) = white
Font
<font></font>
size (1 to 7)
color
type (Arial , Book Antiqua, Garamond, ...)
Slide 32CS-364: Introduction to Human – Computer Interaction
<p> <font size=“6" face="Georgia, Arial" color=“maroon“>C</font>
ustomize your font to achieve a desired look. </p>
Attribute bgcolor
It is used to customize the color of the font in an HTML file, the webpage and the font of the tables
Use CSS to customize the font in more detail
<body bgcolor="Silver">
<table bgcolor="rgb(0,0,255)" border="1">
Slide 33CS-364: Introduction to Human – Computer Interaction
Events trigger browser actions, for example when a user chooses, using his mouse, an html element
Window Events
(onload, onunload)
Form Element Events
(onchange, onsubmit, onfocus, ...)
Keyboard Events
(onkeydown, onkeypress, ...)
Mouse Events
(onclick, ondblclick,
onmousemove,
onmouseover, ...)
Slide 34CS-364: Introduction to Human – Computer Interaction
<form><input type = "button"
onclick = "myfunction('Hello')"value = "Call function">
</form>
Client-side scripting language
Adds interactive characteristics to the HTML pages
It is used to:
add text dynamically in an HTML page
read/write the content of HTML elements
Validate forms
identify the user's browser
create cookies
Slide 35CS-364: Introduction to Human – Computer Interaction
Where is JavaScript placed
In the Head or Body
<head>
<script type="text/javascript"> .... </script>
</head>
External script
<head>
<script src="myScript.js"></script>
</head>
Slide 36CS-364: Introduction to Human – Computer Interaction
Cascading Style Sheets
Separates the HTML file content from the presentation of the document
p { text-align: center; color: black; font-family: arial; }
Multiple style definitions, in ascending order of priority:
Browser default
External style sheet
Internal style sheet inside the <head> tag
Internal style, inside an HTML element
For common definitions, the last statement takes precedence
For example an internal style has higher priority, which means that it will overrule a style that is defined in the <head> tag
Slide 38CS-364: Introduction to Human – Computer Interaction
External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Internal Style Sheet
<head>
<style type="text/css"> body {background-color: red;} p {padding-left: 20px;} </style>
</head>
Inline Style
<p style="color: red; padding-left: 20px;"> This is a paragraph </p>
Slide 39CS-364: Introduction to Human – Computer Interaction
The HTML tags initially designed to define the content of a document
The presentation of the document would have to be ensured by the browser without the use of additional tags
While all leading browsers add new proprietary HTML tags in the initialHTML definition, the process for creating HTML documents, where the content was separate from the way it was presented was getting more difficult.
To solve this problem W3C created STYLES in addition to HTML 4.0
Slide 40CS-364: Introduction to Human – Computer Interaction
Τhe CSS syntax consists of three parts: the selector, a property and a value selector {property: value}
Selector is usually an HTML element/tag that you would like to define
Property is the parameter/attribute you would life to configure
Every property can have a value
body {color: black}
p {font-family: "sans serif"}
Slide 41CS-364: Introduction to Human – Computer Interaction
You can group the selector
Separate each selector with a comma
h1, h2, h3, h4, h5, h6
{
color: green
}
Thee comments in a CSS start with “/*” and close with “*/”
e.g. /* This is a comment */
Slide 42CS-364: Introduction to Human – Computer Interaction
Class
With classes you can define different styles in the same HTML element
For example, a document needs to type of paragraphs: one with left alignment and one with center alignment
The styles are:
p.right {text-align: right}
p.center {text-align: center}
In the HTML, we set the classes in the class attribute:
<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>
Slide 43CS-364: Introduction to Human – Computer Interaction
Property Description Value
background-attachment
Sets whether a background image is fixed or scrolls with the rest of the page
scroll, fixed
background-color Sets the background color of an element
color-rgb, color-hex, color-name, Transparent
background-image Sets one or more background images for an element
url(URL), none
background-position
Sets the starting position of a background image
top left, top center, top right, center left, centercenter, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos
background-repeat Sets if/how a background image will be repeated
Repeat, repeat-x, repeat-y, no-repeat
Slide 44CS-364: Introduction to Human – Computer Interaction
CSS background properties allows the configuration of an element’s font color, you can set an image as a background, repeat the background image horizontally or vertically
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
Slide 45CS-364: Introduction to Human – Computer Interaction
Property Description Value
color Sets the text color color
direction Specifies the text direction/writing direction.
ltr, rtl
line-height Specifies the line height normal, number, length, %
letter-spacing Increases or decreases the space between characters in a text
normal, length
text-align Aligns the text left, right, center, justify
text-decoration Specifies the decoration added to text none, underline, overline, line-through, blink
text-indent specifies the indentation of the first line in a text-block
length, %
text-transform Controls the capitalization of text none, capitalize, uppercase, lowercase
Slide 46CS-364: Introduction to Human – Computer Interaction
CSS text properties allows the configuration of the way the text will be presented. You can set color, increase or decrease the space between characters,align text, etc.
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<p><a href="http://www.parliament.gr">This is a link</a></p>
</body>
</html>
Slide 47CS-364: Introduction to Human – Computer Interaction
Property Description Value
font-family Specifies the font for an element family-name
generic-family
font-size Sets the size of a font xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length
%
font-style Specifies the font style for a text normal, italic, oblique
font-weight Sets how thick or thin characters in text should be displayed.
normal, bold, bolder, lighter, 100, 200
300, 400, 500, 600, 700, 800, 900
Slide 48CS-364: Introduction to Human – Computer Interaction
CSS font properties allow the configuration of the following properties
<html>
<head>
<style type="text/css">
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>
<body>
<h3>This is header 3</h3>
<p>This is a paragraph</p>
<p class="sansserif">This is a paragraph</p>
</body>
</html>
Slide 49CS-364: Introduction to Human – Computer Interaction
Property Description Value
border Sets all the border properties in one declaration
border-width, border-style, border-color
border-bottom Sets all the bottom border properties in one declaration
border-bottom-width, border-style, border-color
border-left Sets all the left border properties in one declaration
border-left-width, border-style, border-color
border-right Sets all the right border properties in one declaration
border-bottom-width, border-style, border-color
border-style Sets the style of an element's four borders none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
border-top Sets all the top border properties in one declaration
border-top-width, border-style, border-color
border-width Sets the width of an element's four borders thin, medium, thick, length
Slide 50CS-364: Introduction to Human – Computer Interaction
CSS border properties allow to set an elements frame style and color
<html><head><style type="text/css">
p.dotted {border-style: dotted}p.dashed {border-style: dashed}p.solid {border-style: solid}p.double {border-style: double}p.groove {border-style: groove}p.ridge {border-style: ridge}p.inset {border-style: inset}p.outset {border-style: outset}
</style></head><body>
<p class="dotted">A dotted border</p><p class="dashed">A dashed border</p><p class="solid">A solid border</p><p class="double">A double border</p><p class="groove">A groove border</p><p class="ridge">A ridge border</p><p class="inset">An inset border</p><p class="outset">An outset border</p>
</body></html>
Slide 51CS-364: Introduction to Human – Computer Interaction
Property Description Value
margin Sets all the margin properties in one
declaration
margin-top, margin-right, margin-bottom, margin-left
margin-bottom Sets the bottom margin of an element auto
length, %
margin-left Sets the left margin of an element auto
length, %
margin-right Sets the right margin of an element auto
length, %
margin-top Sets the top margin of an element auto
length, %
Slide 52CS-364: Introduction to Human – Computer Interaction
CSS margin properties generate space around elements
<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class=" margin">This is a paragraph with specified margins </p>
<p>This is a paragraph with no specified margins </p>
</body>
</html>
Slide 53CS-364: Introduction to Human – Computer Interaction
Property Description Value
padding Sets all the padding properties in one
declaration
padding-top, padding-right, padding-bottom, padding-left
padding-bottom Sets the bottom padding of an element length, %
padding-left Sets the left padding of an element length, %
padding-right Sets the right padding of an element length, %
padding-top Sets the top padding of an element length, %
Slide 54CS-364: Introduction to Human – Computer Interaction
CSS padding properties configure the space between the frame and the content of the element
<html><head>
<style type="text/css">td.test1 {padding: 1.5cm}td.test2 {padding: 0.5cm 2.5cm}
</style></head><body>
<table border="1"><tr>
<td class="test1">This is a tablecell with equal padding on each side.</td>
</tr></table><br /><table border="1"><tr>
<td class="test2">This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.</td>
</tr></table>
</body></html>
Slide 55CS-364: Introduction to Human – Computer Interaction
Slide 56CS-364: Introduction to Human – Computer Interaction
http://www.w3schools.com
http://www.w3.org/html/
http://www.w3.org/Style/CSS/
http://www.w3.org/TR/2000/NOTE-WCAG10-HTML
TECHS-20000920/#html-index
http://www.alanwood.net/demos/wgl4.html
http://www.htmlhelp.com/reference/html40/entities/
http://www.pitt.edu/~nisg/cis//web/cgi/rgb.html
Slide 57CS-364: Introduction to Human – Computer Interaction
THE END
Slide 58CS-364: Introduction to Human – Computer Interaction