Introduction to Web Page Design HTML XHTML Bartosz Sakowicz

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/XHTML/HTML 5 • HTML (1991) <tag> some part of document </tag> • HTML 2. 0 (1995) OR : • HTML 3. 2 (1997) <tag/> • HTML 4. 01 (1999) <? xml version="1. 0"? > • XHTML 1. 0 <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" • XHTML 1. 1 (2000) • XHTML 2. 0 "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" xml: lang="en"> <head> • HTML 5. 0 (2014) <title> </head> <body> </html>

HTML/XHTML/HTML 5 • HTML: <body background=”image. jpg”> • XHTML/HTML 5: <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 (recommendation) 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 201515: 32: 54 GMT Server local time. Serwer Apache/2. 3 Unix Web server name Last-Modified: Fri, 04 Oct 2015 12: 09: 34 GMT Etag: “ 8 d 7 jk-876 -901 i 7 ki 2” 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 <title> DMCS </title>. . . One empty row and content of the page. Unique id of the content

DTD (HTML 4. 01/XHTML 1. 0 based on SGML) a) Strict: <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/tr/xhtml 1/DTD/xhtml 1 -strict. dtd"> b) Transitional: <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/tr/xhtml 1/DTD/xhtml 1 -transitional. dtd"> c) Frameset: <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD XHTML 1. 0 Frameset//EN" "http: //www. w 3. org/tr/xhtml 1/DTD/xhtml 1 -frameset. dtd"> HTML 5 does not require DTD: <!DOCTYPE html>

Header elements <title> Page title </title> <meta charset="UTF-8"> <meta name="Description" content="Some description. . "/> <meta name="Keywords" content="keyword 1, keyword 2, . . . "/> <meta name="Author" content="Firstname Lastname"> <meta http-equiv="expires" content="Wed, 26 Apr 2015 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">

Text formatting (mostly HTML 4. 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 (HTML 5) All tags and attributes related to fonts has been moved to CSS Headers: from: <h 1> up to <h 6> <h 1>The biggest</h 1> <h 6>The smallest </h 6> Tooltip over headers: <h 1 title="This is tooltip">Some title. . . </h 1> Paragraph: <p>It is new paragraph</p> New line tag: <br/> Horizontal line: <hr>

Text formatting (HTML 5) (2) Preformatting text: <pre>Here is 20 spaces </pre> Address: <address> Al. Politechniki 11</address> Box over text: <fieldset>Box over text</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: 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="#map 1" alt="some desc"/> <map name="map 1" id="map 1"> <area shape="rect" coords="1, 1, 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, 20" href="3. html" alt="three"/> <area shape="rect" coords="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> </ul> => o. Point 2. 1 o. Point 2. 2 §Point 2. 2. 1 </li> </ul> </li> <li>Point 3</li> </ul> §Point 2. 2. 2 ·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 explanation 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> <td> CCC</td><td> DDD</td></tr> </table> </td></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: <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: <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 "-//W 3 C//DTD XHTML 1. 0 Frameset//EN" "http: //www. w 3. org/tr/xhtml 1/DTD/xhtml 1 -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"> 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=”page 1. htm”/> <frameset cols=” 35%, *, 35%”/> Nesting frames: <frame src=”page 2. htm”/> <frame src=”page 3. htm”/> <frame src=”page 4. htm”/> </frameset>

Inline frames <iframe width=” 100” height=” 100” src="doc. htm"> Your browser doesn't support inline frames! </iframe> <iframeborder=” 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/0 cow[1]. swf" width="550" height="400" type="application/x-shockwave-flash"> <param name="quality" value="High"/> </object> MP 3: <object data="mp 3/a. mp 3" 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: 2 cm; margin-right: 2 cm} P {font-size: 14 pt; 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. <h 1> tag – should be placed exactly once on page, should contain keywords 4. Another elements with keywords: <h 2> to <h 6>, <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 - White. Hat Infrastructure

SEO - Black. Hat Infrastructure

SEO - Black. Hat 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