HUMAN COMPUTER INTERACTION › ~hy364 › files › project › HTML-CSS.pdfCS-364: Introduction to...

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


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


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


<!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>


Extensible Hypertext Markup Language

A stricter version of HTML

The HTML 4.01 elements correspond with the XML syntax

Recommended by W3C


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">


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">


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#">


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>




Paragraphs

Paragraphs are defined using the tag <p>

E.g. <p>This is a paragraph</p>


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 

e.g.

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


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>


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>


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>


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%">


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.


CS-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>


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


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>


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>


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” />


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


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


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


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" />


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


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


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, ...)


<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">


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, ...)


<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


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>


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


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>


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


Τ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"}


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 */


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>


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


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>


<p>This is a paragraph</p>

</body>

</html>



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


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>


h1 {text-decoration: overline}

h2 {text-decoration: line-through}

h3 {text-decoration: underline}

a {text-decoration: none}

</style>

</head>

<body>




<p><a href="http://www.parliament.gr">This is a link</a></p>

</body>

</html>



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


CSS font properties allow the configuration of the following properties

<html>

<head>


h3 {font-family: times}

p {font-family: courier}

p.sansserif {font-family: sans-serif}

</style>

</head>

<body>


<p>This is a paragraph</p>

<p class="sansserif">This is a paragraph</p>

</body>

</html>



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


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>



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, %


CSS margin properties generate space around elements

<html>

<head>


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>



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, %


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>


CS-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


THE END


HUMAN COMPUTER INTERACTION › ~hy364 › files › project › HTML-CSS.pdfCS-364: Introduction to...

Documents

Transcript of HUMAN COMPUTER INTERACTION › ~hy364 › files › project › HTML-CSS.pdfCS-364: Introduction to...