Podstawy tworzenia stron WWW
Download
Report
Transcript Podstawy tworzenia stron WWW
Introduction to Web Page Design
HTML/XHTML
Bartosz Sakowicz
Client-server
Web
request
Web
browser
server
response
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.
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.
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
• HTML 2.0
• HTML 3.2
• HTML 4.01
• XHTML 1.0
• XHTML 1.1
• XHTML 2.0
• HTML 5.0 (?)
<tag> some part of document </tag>
OR :
<tag/>
<?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>
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)
Host: www.dmcs.p.lodz.pl
Name of the browser and name of operating
system
Connection: Keep-Alive
Request to keep connection open on the
server side until next request of the browser.
Domain name
HTTP Protocol – server response
Response 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
Etag: “8d7jk-876-901i7ki2”
Last modification date.
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
Unique id of the content
One empty row and content of the page.
<title> DMCS </title>
.....
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 element
second element
third 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>
10
20
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”/>
<ul>
Unordered list
<li>First point</li>
<ul>
<li>Second point</li>
<li>Point 1</li>
<li>Third point</li>
<li>Point 2
</ul>
<ul>
<li>Point 2.1</li>
<li>Point 2.2
Point 1
<ul>
Point 2
<li>Point 2.2.1</li>
<li>Point 2.2.2</li>
oPoint 2.2
</ul>
Point 2.2.1
</li>
Point 2.2.2
</ul>
</li>
<li>Point 3</li>
</ul>
=>
oPoint 2.1
Point 3
Ordered list
<ol>
<li>First point</li>
1.
First point
<li>Second point</li>
2.
Second point
3.
Third point
=>
<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”>
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
<!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
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"/>
<frameset rows=”200,*”>
<frame src=”page1.htm”/>
<frameset cols=”35%,*,35%”/>
Nesting frames:
<frame src=”page2.htm”/>
<frame src=”page3.htm”/>
<frame src=”page4.htm”/>
</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/formdata.
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">
<!--
body
{margin-left: 2cm; margin-right: 2cm}
P {font-size: 14pt; font-family: Arial, Helvetica; font-weight: normal}
-->
</style>
<script type=“text/javascript”>
function pushbutton() {
alert("Hello!");
}
</script>
SEO basics
1. <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
Target website
Portal#1
Portal#2
Portal#3
Portal#4
SEO - BlackHat Infrastructure
Target website
Portal#1
Portal#2
Portal#3
Portal#4
Portal#1
Portal#2
Portal#3
Portal#4
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
XHTML,CSS
AJAX/SOAP/Web
Services/JSON
RDF
„John is married to Eve"
45
Literature
http://dev.w3.org/html5/spec/Overview.html
HTML 5.0 specification
http://w3schools.com/html5
tutorial
http://www.coreservlets.com/html5-tutorial/
good tutorial
47
Video tag
Video tag – easier integration with document, doesn't
require additional plugins
<video src="movie.ogg" controls="controls"></video>
---------------------------------------------------------------------------------------------------------------------------------
<video width="320" height="240" controls="controls"
preload="preload" loop="loop" autoplay="autoplay"
poster="poster.jpg">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser doesn't support video tag.
</video>
48
Audio tag
audio tag – easier integration with document, doesn't
require additional plugins
<audio src="song.ogg" controls="controls"></audio>
---------------------------------------------------------------------------------------------------------------
<audio controls="controls" preload="preload" loop="loop">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser doesn't support audio tag
</audio>
49
Canvas
Canvas –HTML 5 element which uses JavaScript to draw
pictures
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#0000FF";
cxt.fillRect(0,0,150,100);
</script>
50
New input fields in forms
email: <input type="email" name="user_email" />
url:
<input type="url" name="user_url" />
number:<input type="number" name="points" min= "0"
max="10" step="2" value= "0"/>
range: <input type="range" name="points" min= "0"
max="100" step= "10" value= "50"/>
search: <input type= "search" name="user_search" />
color: <input type="color" name="user_color" />
51
Date and time (input fields)
Pola daty i czasu
date – day, month, year
month – month and year
week – week and year
time – hours and minutes
datetime – time and date (UTC time format)
datetime-local – time and date (local time)
-------------------------------------------------------------------------<input type="month" name="user_date" />
52
Datalist
datalist – drop down list to choose data
Choose page: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="Onet" value="http://www.onet.pl" />
<option label="WP" value="http://www.wp.pl" />
<option label="Interia" value="http://www.interia.pl" />
</datalist>
53
New attributes in forms
autocomplete – automatically completes input fields, it can be defined
for all the form
automatyczne uzupełnianie pola input, może być zdefiniowany dla
całego formularza
autofocus – sets focus in input field
required – filling particular field is required
<form autocomplete="on">
First name:<input type="text" name="imie" autofocus="autofocus" />
Last name: <input type="text" name= "n" required= "required " />
E-mail: <input type="email" name="email" autocomplete="off" />
<input type="submit" />
</form>
54
New attributes in forms (2)
novalidate – turns off field validation
multiple – allows to insert many email addresses or file names
min, max, step – it defines min value, max value and step for fields
number and range
<form>
Age: <input type="number" min="1" max="100" step="1" />
Notice: <input type="text" name= "n" novalidate="novalidate" />
E-mail: <input type="email" name="email" multiple="multiple"/>
<input type="submit" />
</form>
55
New attributes in forms (3)
placeholder – inserts hint in the area of the field
height, width – defines width and height of image field
form – defines, to which form particular field belongs to
<form id="form1">
Name:<input type="text" name="imie" placeholder="Please insert your
name here"/>
</form>
<input type="image" src="img.gif" width="20" height="20" form="form1"/>
56
Local Storage/Session Storage
Keeping big variables in cookies is ineffective
HTML 5 uses JavaScript variables:
localStorage – active all the time
sessionStorage – active only in particular session
<script type="text/javascript">
localStorage.name=„John";
document.write(localStorage.name);
</script>
57
Code simplification
Document type
<!DOCTYPE HTML>
instead of:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Character encoding
<meta charset="UTF-8"/>
instead of:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
58
Code Simplification
CSS stylesheet attachment:
<link rel="stylesheet" href="file.css">
instead of:
<link rel="stylesheet" type="text/css" href="file.css">
JavaScript file attachment
<script src="file.js"></script>
instead of:
<script type="text/javascript" src="file.js"></script>
59
Thank you for attention