introduction to web page design html/xhtml bartosz sakowicz

Introduction to Web Page DesignHTML/XHTML

Bartosz Sakowicz

Client-server

Client-server is network architecture which separates the client (often an application that uses a graphical user interface) from the server. Each instance of the client software can send requests to a server or application server. There are many different types of servers; some examples include: a file server, terminal server, or mail server. While their purpose varies somewhat, the basic architecture remains the same.

.

Web

browser

Web

server

request

response

URL

http://www.dmcs.p.lodz.pl:80/index.jsp#id

http:// - protocol name

www.dmcs.p.lodz.pl – server domain address

80 – port number

index.jsp – name of a resource

#id – identiffier of part of the resource

Few parts in the name has defaults, so browser (default protocol and port number) and server (default resource name, aliases for server name) can simplify it.

http://www.dmcs.p.lodz.pl/

Copyrights

•Every country has its own law. According to the polish law, you cannot copy anything from Internet, even if it is written on web page that you can

•You cannot put any hyperlinks pointing other sites

•But ussually:

• if you copy text or pictures from the page, that allows for it

• if you put a link pointing to the main page of other web service

it shouldn't be any troubles.

Golden rules

• avoid spelling mistakes

• create pages using utf-8 character encoding

• do not use any web page generators

• size does matter. Each page should be smaller that 70 kb (???)

• put information about sizes of downloaded files

• put on your page last modification date

HTML i XHTML

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title> </title>

</head>

<body>

</body>

</html>

<tag> some part of document </tag>

OR :

<tag/>

HTML i XHTML(2)

• HTML: <body background=”image.jpg”>

• XHTML: <body style=”background-image: url(‘image.jpg’)”>

or: <body>

XML style:

Each tag has to be completely nested

Each attribute should be doublequoted

Other differences:

Many tags attributes moved to the CSS

All tags should be written using small letters

Global attributes: style, type, id, class

HTTP Protocol – browser request

Request lines Description

GET /. HTTP/1.1 Request to get document from main directory with usage HTTP 1.1.

Accept: image/gif, image/x-xbitmap, image-jpeg, image/pjpeg, */*

Definition of MIME types acceptable by a browser.

Accept-Language: pl Preffered language.

Accept-Encoding: gzip Information to the server, that browser can use zip algorithms..

User_Agent: Mozzilla/4.0 (compatible; MSIE 5.01; Windows NT)

Name of the browser and name of operating system

Host: www.dmcs.p.lodz.pl Domain name

Connection: Keep-Alive Request to keep connection open on the server side until next request of the browser.

HTTP Protocol – server responseResponse lines Description

HTTP/1.1 200 OK. Information about protocol version and status code of the response.

Date: Mon, 06 Dec 201015:32:54 GMT Server local time.

Serwer Apache/2.3 Unix Web server name

Last-Modified: Fri, 04 Oct 2010 12:09:34 GMT

Last modification date.

Etag: “8d7jk-876-901i7ki2” Unique id of the content

Accept-Ranges: bytes Information, than server is able to send file partialy.

Content-lenght: 232 Number of bytes after header.

Connection: close Information, that server will close the connection.

Content-type: text/html MIME type of document

<title> DMCS </title>.....

One empty row and content of the page.

DTD

a) Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1-strict.dtd">

b) Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

c) Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1-frameset.dtd">

Header elements

<title> Page title </title>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<meta name="Description" content="Some description ...."/>

<meta name="Keywords" content="keyword1, keyword2,..."/>

<meta name="Author" content="Firstname Lastname">

<meta name="Generator" content="Generator name">

<meta http-equiv="expires" content="Wed, 26 Apr 2010 09:11:36 GMT">

<meta http-equiv="Pragma" content="no-cache">

<meta http-equiv="Refresh" content="no of seconds">

<meta http-equiv="Refresh" content=" no of seconds; URL=http://.../page.html">

<meta name="robots" content="index, follow, noindex, nofollow, none, all">

<base href="http://www.dmcs.pl/">

Text formatting (mostly HTML4.01)

<b> bold </b>

<i> italic </i>

<u> underline </u>

<tt> monotype </tt>

<sup> superscript</sup>

<sub> subscript </sub>

<strike> strike </strike>

<font color="red" size="5" face="Arial"> red, font size 5, font family: Arial</font>

<b><u><i>bold,underline, italic</i>bold and underline</u>only bold </b> nothing

Text formatting (XHTML)

All tags and attributes related to fonts has been moved to CSS

Headers: from: <h1> up to <h6>

<h1>The biggest</h1>

<h6>The smallest </h6>

Tooltip over headers:

<h1 title="This is tooltip">Some title...</h1>

Paragraph:

<p>It is new paragraph</p>

New line tag:

<br/>

Horizontal line:

<hr>

Text formatting (XHTML) (2)

Preformatting text:

<pre>Here is 20 spaces </pre>

Address:

<address> Al. Politechniki 11</address>

Box over text:

<fieldset>Box over text</fieldset>

<fieldset><legend>Table of contents</legend>first elementsecond elementthird element</fieldset>

Special characters

No Name Description Visualized as

& & Ampersand &

< < Less than <

> > Greater than >

Non-breaking space

Complete list is easy to find in Internet.

Hyperlinks

Label:

<a name="some_label"> </a>

Hyperlink:

<a href="page.html">Some description</a>

Hyperlink to label:

<a href="page.html#some_label">Some description</a>

Other hyperlinks:

<a href="subdirectory/page.html">...</a>

<a href="../equivalent_dir/page.html">...</a>

<a href=”ftp://ftp.address”>...</a>

<a href=”ftp://ftp.address/file.zip”>...</a>

<a href=”news:pl.com.www”> ... </a>

Hyperlink as an email

<a href=”mailto:[email protected]”>Write to the author...</a>

<a href="mailto:[email protected]?subject=Title of the letter..."> Send </a>

<a href= "mailto:[email protected][email protected]&[email protected]&subject=Financial report&body=For 2011 year"> Send </a>

Hyperlink as a bitmap

<img src="image.gif" usemap="#map1" alt="some desc"/>

<map name="map1" id="map1">

<area shape="rect" coords="1, 1, 10, 10" href="1.html" alt="one"/>

<area shape="rect" coords="11, 1, 10, 20" href="2.html" alt="two"/>

<area shape="rect" coords="1, 11, 11, 20" href="3.html" alt="three"/>

<area shape="rect" coords="11, 11, 20, 20" href="4.html" alt="four"/>

</map>

Other shapes:

<area shape=“circle” coords=" x, y, r" href="1.html" alt=”circle”/>

<area shape=“polygon” coords=" 23, 33, 82, 16, 82, 80" href="2.html" alt=”polygon”/>

10

20

Unordered list<ul>

<li>First point</li>

<li>Second point</li>

<li>Third point</li>

</ul>

<ul>

<li>Point 1</li>

<li>Point 2

<ul>

<li>Point 2.1</li>

<li>Point 2.2

<ul>

<li>Point 2.2.1</li>

<li>Point 2.2.2</li>

</ul>

</li>

</ul>

</li>

<li>Point 3</li>

</ul>

Point 1

Point 2

oPoint 2.1

oPoint 2.2

Point 2.2.1

Point 2.2.2

Point 3

=>

Ordered list<ol>

<li>First point</li>

<li>Second point</li>

<li>Third point</li>

</ol>

Numbering type:

<ol type=”A”> big latin letters

<ol type=”a”> small latin letters

<ol type=”I”> big roman numerals

<ol type=”i”> small roman numerals

<ol type=”1”> arabian numerals

Start of numbering:

<ol start=”x”>

1. First point

2. Second point

3. Third point=>

Definition list

<dl>

<dt> first term</dt>

<dd> first term explanation</dd>

<dt> second term</dt>

<dd> second term explanation</dd>

</dl>

Visualised as:

first term

first term explanation

second term

second term explanation

Tables

<table> table starts here

<tr> start of first row

<td> start of first column

</td> end of first column

<td> start of second column

</td> end of second column

</tr> end of first row

<tr> start of second row

<td> start of first column

</td> end of first column

<td> start of second column

</td> end of second column

</tr> end of second row

</table> table ends here

It is not correct table definition!

Table attributes

<table border=”10”> </table> - border width

<table cellspacing=”8”> </table> - cell spacing

<table cellpadding=”15”> </table> - cell padding

<table width=”300”> </table> - table width

Horizontal align:

<td align=”center”> </td>

<td align=”left”> </td>

<td align=”right”> </td>

Merging cells:

<td rowspan=”x”>

<td colspan=”x”>

Nested tables

<table>

<tr> <td> 100</td><td>200 </td><td> 300

<table>

<tr> <td>AAA </td><td>BBB </td></tr>

<tr> <td> CCC</td><td> DDD</td></tr>

</table>

</td></tr>

<tr> <td> 400</td><td>500 </td><td>600</td></tr>

</table>

Header, footer and body of the table

<table ><thead>It is header</thead><tbody><tr><td>Some cell</td></tr></tbody><tfoot>It is footer</tfoot></table>

Outside borders

Outside borders:

<table border=”2” frame=”x”>

x=void - no outside border

x=above - only upper border

x=below - only lower border

x=vsides - left and right border

x=hsides - upper and lower border.

x=lhs - left border

x=rhs - right border .

x=box - all borders

Inside borders

Inside borders:

<table border rules=”x”>

x=none - no borders

x=rows - only horizontal borders

x=cols - only vertical borders

x=all - all borders

Frames<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1-frameset.dtd">

<html>

<head>

<title>DMCS</title>

</head>

<frameset cols="25%,*%">

<frame name="Menu" src="menu.html"/>

<frame name="Main" src="main.html"/>

<noframes>

<body>

Some text for browsers, which don't support frames

</body>

</noframes>

</frameset>

</html>

Frames(2)Frame spacing and frame borders:

<frameset framespacing="0" frameborder="0" border="0">

Scrollbars:

<frame scrolling=”yes”/> - scrollbars always visible

<frame scrolling=”no”/> - scrollbars never visible

<frame scrolling=”auto”/> - scrollbars visible when needed

Blocking changes of frame size:

<frame noresize="noresize"/>

Nesting frames:

<frameset rows=”200,*”>

<frame src=”page1.htm”/>

<frameset cols=”35%,*,35%”/>




</frameset>

</frameset>

Inline frames

<iframe width=”100” height=”100” src="doc.htm">

Your browser doesn't support inline frames!

</iframe>

<iframe frameborder=”0” scrolling=”no”>

Grouping elements

<span> , <div> – grouping elements

<span> - local grouping

<div> - logical grouping

Examples:

<p>some text

<span style="color: red"> some other text </span> some text

</p>

OR:

<p>text

<span class="red_text"> some other text </span>some text

</p>

Images

<img src="1.gif" alt="My picture"/>

Width and height:

<img src="1.gif" width="100" height="100" alt=””/>

Borders:

<img src="1.gif" border="0" alt=””/>

Spacing from other elements:

<img src="1.gif" vspace=”10” hspace=”20” alt=””/>

Is there any sense to make image smaller than original?

Multimedia objects

Flash:

<object data="http://www.irancartoon.com/100/swf/0cow[1].swf" width="550" height="400" type="application/x-shockwave-flash">

<param name="quality" value="High"/>

</object>

MP3:

<object data="mp3/a.mp3" width="550" height="400" type="audio/mpeg">

</object>

WAV:

<object data="wav/a.wav" width="550" height="400" type="audio/x-wav">

</object>

Forms

<form action="url" method="post">....</form>

Attributes:

action - address of the resource, where the form will be sent (the same page, other page, or just other url). Requiered attribute.

method - HTTP method (usually GET or POST)

enctype - encoding standard. Default value: application/x-www-form-urlencoded.

If form consist from at list one field of type file, enctype should be: multipart/form-data.

Input fields

Text field:

<input name="field_name" value="default_value" type="text">

Button:

<input name="field_name" value ="button description" type ="button">

Attributes:

type - type. Default type is text. Allowed types: text, password, checkbox, radio, submit, reset, file, hidden, image, button.

name - name of the field

value - usually default value

size - size in pixels or characters

Select and textarea fields

Textarea:

<textarea name="some_name" cols=”2” rows=”10”></textarea>

Select:

<select name="choose">

<option> one </option>

<option selected="selected"> two </option>

</select>

Multiple choice select:

<select multiple="multiple">

Scripts and styles examples

<style type="text/css">



</style>

<script type=“text/javascript”>

function pushbutton() {

alert("Hello!");

}

</script>

SEO basics1. <title></title> tag - 70 up to 100 characters, can be build

from keywords but shouldn’t copy domain or file name

2. Metatags – keywords (no more than 300), description (100 characters)

3. <h1> tag – should be placed exactly once on page, should contain keywords

4. Another elements with keywords:

<h2> to <h6>, <b>, <u>, <i>

<img alt=> <a title=>

SEO basics (2)5. Flash usage – not recommended, worse indexing than pure

HTML

6. Page content – above 200 words, saturation of keywords no more than 20%

7. Robots.txt – file placed in main directory, allows to show content which should not be indexed eg:

User-agent: *

Disallow: /cgi-bin/

Disallow:/servlet/

Disallow: /images/

Disallow: /tmp/

Disallow: /private/

SEO basics (3)8. XML Sitemaps

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

<url>

<loc>http://www.example.com/</loc>

<lastmod>2005-01-01</lastmod>

<changefreq>monthly</changefreq>

<priority>0.8</priority>

</url>

</urlset>

SEO - WhiteHat Infrastructure

Portal#3 Portal#4

Portal#1 Portal#2

Target website

SEO - BlackHat Infrastructure

Portal#3 Portal#4

Portal#1 Portal#2

Target website

Portal#3 Portal#4

Portal#1 Portal#2

SEO - BlackHat Infrastructure (2)

• The content generated automatically, link farms

• If you don’t want to be banned it is necessary to change infrastructure at least once a week – content, URL, IP address

SEO - Tools

• Google Trends

• Google Analitycs

Web 1.0 / 2.0 / 3.0

45

XHTML,CSS

AJAX/SOAP/Web Services/JSON

RDF

„John is married to Eve"

introduction to web page design html/xhtml bartosz sakowicz

Documents