introduction to web page design html/xhtml bartosz sakowicz
Post on 20-Dec-2015
236 Views
Preview:
TRANSCRIPT
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.
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:aaa@aaa.com.pl”>Write to the author...</a>
<a href="mailto:aaa@aaa.com.pl?subject=Title of the letter..."> Send </a>
<a href= "mailto:aaa@aaa.com.pl?cc=bbb@bbb.com.pl&bcc=ccc@ccc.com.pl&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%”/>
<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/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">
<!--
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 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"
top related