Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html part2 (1)

335 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html part2 (1)

  1. 1. HTML Part 2
  2. 2. HTML key points <ul><li>HTML is a language for describing a text </li></ul><ul><li>Text manipulation is achieved exclusively with use of tags </li></ul><ul><li>Some tags are required, like <HTML>, <BODY>, some are not. </li></ul>
  3. 3. HTML key points <ul><li>Many tags come in pairs, like <HTML></HTML>. In this case <HTML> is an opening tag, and </HTML> is closing tag, </li></ul><ul><li>Some tags do not require closing tags, e.g. <BR>, <HR> </li></ul>
  4. 4. HTML key points <ul><li>Typical HTML document: </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> this document is created by (your name here) </li></ul><ul><li></TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> Some text goes here… </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  5. 5. HTML key points <ul><li>HTML document is a plain text document with extension “.html” or “htm”, </li></ul><ul><li>Each HTML document shall contain following tags <HTML>, <HEAD>, <BODY>, </HTML>, </HEAD>, </BODY>. </li></ul><ul><li>Using these six tags we split document into two parts – “for official use only” and for “recipient use”. </li></ul>
  6. 6. HTML key points <ul><li>We can set text outlook, such as text size, font, color with use of tags. </li></ul><ul><li>We can group phrases in paragraphs (basic layout) using <BR> and <P> tags </li></ul><ul><li>We can place some data in tables </li></ul><ul><li>We can create hyperlinks (<a href…>) </li></ul><ul><li>We can place images in document (<img…> </li></ul>
  7. 7. HTML key points <ul><li>We can nest tags, e.g. <P><HR>some text here</p> </li></ul><ul><li>Or use image in hyperlink: </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><a href=&quot;http://www.google.com&quot;><img border=&quot;0&quot; src = </li></ul><ul><li>“ google.gif&quot;></a> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  8. 8. HTML key points <ul><li>HTML document may look differently in different browsers. Reason is that HTML is not a language for text layout or publishing. Compare for example HTML document with pdf document). </li></ul><ul><li>HTML is text describing language and thus it cannot guarantee that HTML text look identical in different browsers. </li></ul>
  9. 9. More HTML <ul><li>Topics to be covered: </li></ul><ul><li>More tags </li></ul><ul><li>Display of special symbols in HTML </li></ul><ul><li>Different page encodings </li></ul><ul><li>Meta tags </li></ul><ul><li>Mailto URL </li></ul><ul><li>Anchors </li></ul>
  10. 10. <TITLE> tag <ul><li>Open Notepad application, </li></ul><ul><li>Type following text into it: </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>This is test doc</TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> Some text here</BODY> </li></ul><ul><li></HTML> </li></ul>
  11. 11. <TITLE> tag <ul><li>Save document: </li></ul>
  12. 12. <TITLE> tag <ul><li>Open saved document Test.html: </li></ul>
  13. 13. <TITLE> tag <ul><li><TITLE> tag gives HTML document a title, i.e. a name. </li></ul><ul><li>When bookmarking HTML page it’s a title which is saved in your list of bookmarks. </li></ul><ul><li>Only one <TITLE> tag is allowed </li></ul><ul><li>Tag <TITLE> must contain only plain text; no nested tags are allowed. </li></ul>
  14. 14. <TITLE> tag <ul><li>Try to give descriptive name to Title. </li></ul><ul><li>Long, non-descriptive names shall be avoided, and most probably, be trimmed by browser. </li></ul>
  15. 15. <TITLE>. Bad examples. <ul><li><TITLE> </TITLE> </li></ul><ul><li><TITLE>Some HTML doc</TITLE> </li></ul><ul><li><TITLE>An Example</TITLE> </li></ul><ul><li><TITLE>Rodriguez, who was also fined an undisclosed amount, was ejected from Thursday's game in the fourth inning for arguing that he was interfered with while trying to throw out a base stealer. </TITLE> </li></ul><ul><li><TITLE>HTML page</TITLE> </li></ul>
  16. 16. <TITLE>. Good examples. <ul><li><TITLE>Introduction to Photography</TITLE> </li></ul><ul><li><TITLE>USA map</TITLE> </li></ul><ul><li><TITLE>VoIP: Installation step 1</TITLE> </li></ul><ul><li><TITLE>Alex Krutoy Blog home</TITLE> </li></ul>
  17. 17. Tags, more tags. <ul><li>Try following code: </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><U>This text is underlined</U><BR> </li></ul><ul><li><S>This text is strikethrough</S><BR> </li></ul><ul><li><I>This text is in Italic</I><BR> </li></ul><ul><li><B>This text is in Bold</B><BR> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  18. 18. Tags, more tags. <ul><li>Tags: </li></ul><ul><li><U></U> For underlined text </li></ul><ul><li><S></S> For strikethrough text </li></ul><ul><li><I></I> For Italic text </li></ul><ul><li><B></B> For Bold text </li></ul>
  19. 19. Quoting text - <BLOCKQUOTE> and <Q> <ul><li>Use <BLOCKQUOTE> tags for quotation. </li></ul><ul><li>Try following code: </li></ul><ul><li><html> </li></ul><ul><li><body><BLOCKQUOTE> </li></ul><ul><li>Quidquid latine dictum sit, altum sonatur</BLOCKQUOTE> Everything said in Latin sounds noble. </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  20. 20. META element <ul><li>META element is designed for including document information, other than Title or Base. </li></ul>
  21. 21. META element <ul><li>META attributes are HTTP-EQUIV, NAME and CONTENT. </li></ul>
  22. 22. META element. Examples. <ul><li><meta name=&quot;description&quot; content=&quot;It's only one game, but it's a big deal to the Tigers. Detroit catcher Ivan Rodriguez was incredulous and manager Jim Leyland was irate at what both feel is an unjustified one-game suspension issued Saturday by Major League Baseball. Rodriguez was suspended for making contact with an umpire during a game against the Seattle Mariners on Thursday. - Major League Baseball news&quot; /> </li></ul>
  23. 23. META element. Examples. <ul><li><meta name=“multimedia, slideshow, digital photos, DVD, burning, streaming, online photos, digitizing, replication, image safe, storage, digital valve, video clips, online preview, scanning, negatives, music, film development” name=“description”> </li></ul>
  24. 24. META element <ul><li>Why META element is important? </li></ul>
  25. 25. META element <ul><li>The purpose of the meta element is to provide meta-information about the document. </li></ul><ul><li>The meta element is used to provide information that is relevant to browsers or search engines like telling browser about encoding and the content of document. </li></ul>
  26. 26. mailto URL <ul><li>Lets go to out HTML editor/browser at: </li></ul><ul><li>http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic </li></ul>
  27. 27. mailto URL <ul><li>Type in following HTML code: </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>This is test doc</TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> <ADDRESS> </li></ul><ul><li>Peter Tester <BR> </li></ul><ul><li>123 Test street, #3 <BR> </li></ul><ul><li>Testopulos, 00001, USA <BR> </li></ul><ul><li><a href=&quot;mailto:ptester@testos.edu?subject=Mail from your blog fan&quot;>Send me a mail</a> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  28. 28. mailto URL <ul><li>You shall get the following: </li></ul>
  29. 29. mailto URL <ul><li>Clicking on ‘Send me a mail’ link shall </li></ul><ul><li>Activate your default email application </li></ul><ul><li>Open new email template </li></ul><ul><li>Populate ‘MailTo’ and ‘Subject’ fields </li></ul>
  30. 30. mailto URL <ul><ul><li>Simple mailto: </li></ul></ul><ul><ul><li><a href=&quot;mailto:ptester@test.edu&quot;> </li></ul></ul><ul><ul><li>Multiple recepients: </li></ul></ul><ul><ul><li><a href=&quot;mailto:ptester@test.edu , tester2@test.edu &quot;> </li></ul></ul><ul><ul><li>Mailto with subject line: </li></ul></ul><ul><ul><li><a href=&quot; mailto:ptester@test.edu ?subject=Mail from your blog fan &quot;> </li></ul></ul><ul><ul><li>Mail with message body filled: </li></ul></ul><ul><ul><li><a href=&quot; mailto:ptester@test.edu?subject=Mail from your blog fan?body=I am having trouble finding information on cooking&quot;> </li></ul></ul><ul><ul><li>Mail with message body filled with multiple lines </li></ul></ul><ul><ul><li><a href=&quot; mailto:ptester@test.edu? body=The message's first paragraph.%0A%0aSecond paragraph.%0A%0AThird Paragraph.&quot;> </li></ul></ul><ul><ul><li>&quot;%0A&quot; for a new line </li></ul></ul><ul><ul><li>&quot;%0A%0A&quot; for a new line preceded by a blank line. </li></ul></ul>
  31. 31. Author information and DT stamp <ul><ul><li>It’s a good practice to specify author of the page at the bottom. </li></ul></ul><ul><ul><li>It is a good practice to specify date and time (DT stamp) when the document is last modified, like </li></ul></ul><ul><ul><li>Created by John Poe </li></ul></ul><ul><ul><li>Last modified: July 15, 2007, 12:56:12 PST </li></ul></ul>
  32. 32. More HTML <ul><li>Topics covered and to be covered: </li></ul><ul><li>More tags </li></ul><ul><li>Display of special characters in HTML </li></ul><ul><li>Different page encodings </li></ul><ul><li>Meta tags </li></ul><ul><li>Mailto URL </li></ul><ul><li>Anchors </li></ul>
  33. 33. Input elements <ul><li>Create following HTML document </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD></HEAD> </li></ul><ul><li><BODY><FORM id=&quot;form1&quot; runat=&quot;server&quot;> </li></ul><ul><li>< P > </li></ul><ul><li><input id=&quot;Text1&quot; type=&quot;text&quot; /></ P > </li></ul><ul><li>< P > </li></ul><ul><li><input id=&quot;Submit1&quot; type=&quot;submit&quot; value=&quot;submit&quot; /> </li></ul><ul><li></ P > </li></ul><ul><li></ FORM > </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  34. 34. Input text example <ul><li>Result: </li></ul>
  35. 35. Display of special characters in HTML <ul><li>What is a special character in HTML? </li></ul>
  36. 36. Display of special characters in HTML <ul><li>A special character in HTML is ANY symbol, which is NOT a: </li></ul><ul><li>Upper- or lowercase letter, </li></ul><ul><li>Number (0-9), </li></ul><ul><li>One of following symbols $ - _ . + </li></ul>
  37. 37. Display of special characters in HTML <ul><li>We have to indicate to a browser that there is a special symbol, otherwise browser might try to interpret the symbols itself with unpredictable results. </li></ul>
  38. 38. Display of special characters in HTML <ul><li>For example, we would like to navigate to document “www.somesite.commy directoryLast imagesIndex.html” </li></ul><ul><li>White spaces are special characters in HTML so the URL might not work: </li></ul>
  39. 39. Display of special characters in HTML <ul><li>Solution . </li></ul><ul><li>Indicate character code in (percent sign plus hexadecimal number). </li></ul><ul><li>Example : %20 – is a space character ( ) </li></ul><ul><li>%3f – question mark (?) </li></ul><ul><li>%2f – slash character (/) </li></ul><ul><li>So, the URL may look like this: </li></ul><ul><li>http://myhost/C/Program%20Files/My%20Web%20site%20Files/Index.html </li></ul>
  40. 40. Display of special characters in HTML <ul><li>Try . </li></ul><ul><li>Type following in browser address field: </li></ul><ul><li>C:Program Files </li></ul><ul><li>Press ‘Enter’ </li></ul><ul><li>What happened? </li></ul>
  41. 41. Display of special characters in HTML <ul><li>Case of special symbols, like ©, ®, ¢, ß </li></ul>
  42. 42. Display of special characters in HTML <ul><li>Microsoft Windows Character Set </li></ul>
  43. 43. Display of special characters in HTML <ul><li>Use on of the following methods (example for character ± ): </li></ul><ul><li>Insert code which brings to code whose value in decimal is 177, </li></ul><ul><li>Use numeric reference - ± </li></ul><ul><li>Use character named entity (nickname) - &plusmn; </li></ul>
  44. 44. Display of special characters in HTML <ul><li>Examples: </li></ul><ul><li>The Copyright Symbol (©) - &copy; </li></ul><ul><li>The Registered Trademark Symbol (®) - &reg; </li></ul><ul><li>The Trademark Symbol (™) - &trade; </li></ul><ul><li>The Non-breaking Space - &nbsp; </li></ul><ul><li>The Ampersand (&) - &amp; </li></ul><ul><li>Less Than and Greater Than (< , >) - &lt; or &gt; </li></ul><ul><li>French Accent Marks (é ) - &eacute; or &egrave; </li></ul><ul><li>The Spanish Tilde (ñ): - &ntilde; </li></ul><ul><li>The Cents Symbol (¢) - &cent; </li></ul>
  45. 45. Display of special characters in HTML <ul><li>When testing HTML take into account that special characters may look different on different platforms! </li></ul>
  46. 46. Display of special characters in HTML <ul><li>Type following code into the browser/editor: </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li>&quot;The speed of light in vacuum is exactly 299&nbsp;792&nbsp;458&nbsp;m/s&quot; </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  47. 47. Display of special characters in HTML <ul><li>The output we see on PC machines (Windows): </li></ul>
  48. 48. Display of special characters in HTML <ul><li>The output we would see on McIntosh machines: </li></ul>
  49. 49. Standard <ul><li>When designing web pages we cannot envisage that web site consumers will use same keyboard, same character encoding etc. </li></ul><ul><li>Thus, there is a need for standardization. </li></ul>
  50. 50. Standard character set <ul><li>International standard for character set ISO 8859-1, also known as ISO Latin-1 is the primary character set for representing Western languages on the Internet. </li></ul>
  51. 51. ISO 8859-1 (Latin-1)
  52. 52. Different character sets <ul><li>More requirements to HTML document. </li></ul><ul><li>Now we need to display document containing non-Latin-1 characters, e.g. text in Kanji or Cyrillic. </li></ul>
  53. 53. How HTML documents are served <ul><li>A request to web-server is made to retrieve particular HTML document </li></ul><ul><li>Server finds the documents, converts it into stream of bits and sends to browser </li></ul><ul><li>Browser reads stream of bits and converts it back to HTML document </li></ul><ul><li>Browser displays HTML document </li></ul>
  54. 54. Encoding <ul><li>By default server and browser assume that character encoding is Latin-1 </li></ul><ul><li>While in majority of cases this might be true (for “English websites”) there is a need to indicate encoding. </li></ul>
  55. 55. Encoding <ul><li>To specify encoding in HTML document we use meta tag attribute, e.g. </li></ul><ul><li><META http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=EUC-JP&quot;> </li></ul><ul><li>This declaration should appear as early as possible in the <HEAD> element. </li></ul>
  56. 56. Encoding (JP) <ul><li>Visit http://www.jref.com/language/japanese_writing_system_kanji_hiragana_katakana_romaji.shtml </li></ul>
  57. 57. Encoding (JP) <ul><li>Observe that following is placed in header part: </li></ul><ul><li><meta content=&quot;text/html; charset=Shift-JIS&quot; http-equiv=Content-Type> </li></ul><ul><li>Observe that both Latin and Kanji characters are displayed on the page. </li></ul>
  58. 58. Encoding (Cyrillic) <ul><li>Общая характеристика </li></ul><ul><li>Баба-Яга живёт в лесу, в избушке на курьих ножках , иногда окружённой частоколом из человеческих костей. Часто в доме Бабы-Яги находится Кот, являющийся охранником и советчиком. Иногда эту функцию выполняет мышь. </li></ul><ul><li>Основной способ передвижения — полёт (или поездка) в ступе , цитаты: «Баба-Яга, костяная нога в ступе едет, пестом погоняет, помелом след заметает». Также, у Пушкина : «Там ступа с Бабою-Ягой идёт-бредёт сама собой» </li></ul><ul><li>Баба-Яга — неоднозначный персонаж, чаще всего она отрицательная героиня, но иногда помогает (даже по доброй воле) положительным героям. Баба-Яга — обладательница огня (сказка «Василиса Прекрасная»), золотых яблок (сказка «Гуси-Лебеди») или знания, помогающего главному герою одолеть своего противника (сказка «Лягушка-Царевна»). </li></ul><ul><li>В 2004 году «родиной Бабы-Яги» было объявлено село Кукобой в Ярославской области . </li></ul>
  59. 59. Encoding (Cyrillic) <ul><li>If incorrect encoding is used previously mentioned text may lok like: </li></ul><ul><li>Баба-РЇРіР° живёт РІ лесу, РІ избушкРµ РЅР° РєСѓСЂСЊРёС … РЅРѕР¶РєР°С … , РёРЅРѕРіРґР° окружённой частоколом РёР· человеческих костей. Часто РІ РґРѕРјРµ Бабы-РЇРіРё находится РљРѕС‚, являющийся охранником Рё советчиком. Иногда эту функцию выполняет мышь. </li></ul><ul><li>РћСЃРЅРѕРІРЅРѕР№ СЃРїРѕСЃРѕР± передвижения — полёт (или поездка) РІ ступРµ , цитаты: «Баба-РЇРіР°, костяная РЅРѕРіР° РІ ступе едет, пестом погоняет, помелом след заметает». Также, Сѓ ПушкинР° : «Там ступа СЃ Бабою-РЇРіРѕР№ идёт-бредёт сама СЃРѕР±РѕР№В» </li></ul><ul><li>Баба-РЇРіР° — неоднозначный персонаж, чаще всего РѕРЅР° отрицательная героиня, РЅРѕ РёРЅРѕРіРґР° помогает (даже РїРѕ РґРѕР±СЂРѕР№ воле) положительным героям. Баба-РЇРіР° — обладательница РѕРіРЅСЏ (сказка «Василиса Прекрасная»), золотых яблок (сказка «Гуси-Лебеди») или знания, помогающего главному герою одолеть своего противника (сказка «Лягушка-Царевна»). </li></ul><ul><li>Р’ 2004 РіРѕРґСѓ «родиной Бабы-РЇРіРёВ» было объявлено село РљСѓРєРѕР±РѕР № РІ ЯрославскоР№ области . </li></ul>
  60. 60. Encoding (Cyrillic) <ul><li>Or even like this: </li></ul><ul><li>п▒п╟п╠п╟-п╞пЁп╟ п╤п╦п╡я▒я┌ п╡ п╩п╣я│я┐, п╡ п╦п╥п╠я┐я┬п╨п ╣ п╫п ╟ п╨я┐я─я▄п╦я ┘ п╫п╬п╤п╨п╟я ┘ , п╦п╫п╬пЁп╢п╟ п╬п╨я─я┐п╤я▒п╫п╫п╬п╧ я┤п╟я│я┌п╬п╨п╬п╩п╬п╪ п╦п╥ я┤п╣п╩п╬п╡п╣я┤п╣я│п╨п╦я┘ п╨п╬я│я┌п╣п╧. п╖п╟я│я┌п╬ п╡ п╢п╬п╪п╣ п▒п╟п╠я▀-п╞пЁп╦ п╫п╟я┘п╬п╢п╦я┌я│я▐ п п╬я┌, я▐п╡п╩я▐я▌я┴п╦п╧я│я▐ п╬я┘я─п╟п╫п╫п╦п╨п╬п╪ п╦ я│п╬п╡п╣я┌я┤п╦п╨п╬п╪. п≤п╫п╬пЁп╢п╟ я█я┌я┐ я└я┐п╫п╨я├п╦я▌ п╡я▀п©п╬п╩п╫я▐п╣я┌ п╪я▀я┬я▄. </li></ul><ul><li>п·я│п╫п╬п╡п╫п╬п╧ я│п©п╬я│п╬п╠ п©п╣я─п╣п╢п╡п╦п╤п╣п╫п╦я▐ Б─■ п©п╬п╩я▒я┌ (п╦п╩п╦ п©п╬п╣п╥п╢п╨п╟) п╡ я│я┌я┐п©п ╣ , я├п╦я┌п╟я┌я▀: б╚п▒п╟п╠п╟-п╞пЁп╟, п╨п╬я│я┌я▐п╫п╟я▐ п╫п╬пЁп╟ п╡ я│я┌я┐п©п╣ п╣п╢п╣я┌, п©п╣я│я┌п╬п ╪ п©п╬пЁп╬п╫я▐п╣я┌, п©п╬п╪п╣п╩п╬п ╪ я│п╩п╣п╢ п╥п╟п╪п╣я┌п╟п╣я┌б╩. п╒п╟п╨п╤п╣, я┐ п÷я┐я┬п╨п╦п╫п ╟ : б╚п╒п╟п╪ я│я┌я┐п©п╟ я│ п▒п╟п╠п╬я▌-п╞пЁп╬п╧ п╦п╢я▒я┌-п╠я─п╣п╢я▒я┌ я│п╟п╪п╟ я│п╬п╠п╬п╧б╩ </li></ul><ul><li>п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╫п╣п╬п╢п╫п╬п╥п╫п╟я┤п╫я▀п╧ п©п╣я─я│п╬п╫п╟п╤, я┤п╟я┴п╣ п╡я│п╣пЁп╬ п╬п╫п╟ п╬я┌я─п╦я├п╟я┌п╣п╩я▄п╫п╟я▐ пЁп╣я─п╬п╦п╫я▐, п╫п╬ п╦п╫п╬пЁп╢п╟ п©п╬п╪п╬пЁп╟п╣я┌ (п╢п╟п╤п╣ п©п╬ п╢п╬п╠я─п╬п╧ п╡п╬п╩п╣) п©п╬п╩п╬п╤п╦я┌п╣п╩я▄п╫я▀п╪ пЁп╣я─п╬я▐п╪. п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╬п╠п╩п╟п╢п╟я┌п╣п╩я▄п╫п╦я├п╟ п╬пЁп╫я▐ (я│п╨п╟п╥п╨п╟ б╚п▓п╟я│п╦п╩п╦я│п╟ п÷я─п╣п╨я─п╟я│п╫п╟я▐б╩), п╥п╬п╩п╬я┌я▀я┘ я▐п╠п╩п╬п╨ (я│п╨п╟п╥п╨п╟ б╚п⌠я┐я│п╦-п⌡п╣п╠п╣п╢п╦б╩) п╦п╩п╦ п╥п╫п╟п╫п╦я▐, п©п╬п╪п╬пЁп╟я▌я┴п╣пЁп╬ пЁп╩п╟п╡п╫п╬п╪я┐ пЁп╣я─п╬я▌ п╬п╢п╬п╩п╣я┌я▄ я│п╡п╬п╣пЁп╬ п©я─п╬я┌п╦п╡п╫п╦п╨п╟ (я│п╨п╟п╥п╨п╟ б╚п⌡я▐пЁя┐я┬п╨п╟-п╕п╟я─п╣п╡п╫п╟б╩). </li></ul><ul><li>п▓ 2004 пЁп╬п╢я┐ б╚я─п╬п╢п╦п╫п╬п╧ п▒п╟п╠я▀-п╞пЁп╦б╩ п╠я▀п╩п╬ п╬п╠я┼я▐п╡п╩п╣п╫п╬ я│п╣п╩п╬ п  я┐п╨п╬п╠п╬п ╧ п╡ п╞я─п╬я│п╩п╟п╡я│п╨п╬п ╧ п╬п╠п╩п╟я│я┌п ╦ . </li></ul>
  61. 61. Encoding (Cyrillic) <ul><li>Site of Pravda newspaper ( www.pravda.ru ) may contain following elements in the body part: </li></ul><ul><li><div class=&quot;articlelist-toptitle&quot;> </li></ul><ul><li><a class=&quot;articlelist-toptitle&quot; href=&quot;http://www.dailyshow.ru/&quot;> Ïëàòåæåñïîñîáíîñòü Êèðêîðîâà îêàçàëàñü ïîä âîïðîñîì </a> </li></ul><ul><li></div> </li></ul><ul><li><img width=&quot;100&quot; height=&quot;6&quot; src=&quot;/img/0.gif&quot; border=&quot;0&quot;><br> </li></ul><ul><li><div class=&quot;main-lead&quot; align=&quot;justify&quot;> Âåñíîé íûíåøíåãî ãîäà êîðîëü ðèìåéêîâ íàäóìàë ñâèòü ñåáå çàãîðîäíîå ãíåçäî. Ïðàâäà, óäîâîëüñòâèå ýòî, ïî ïîäñ÷åòàì Ôèëèïïà Êèðêîðîâà, îêàçàëîñü âåñüìà äîðîãîñòîÿùèì. Ïîýòîìó ïåâåö ðåøèë âçÿòü èïîòå÷íûé êðåäèò . </div> </li></ul><ul><li></td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>
  62. 62. Encoding (Cyrillic) <ul><li>The reason is that incorrect encoding is specified or texts with different encodings are inserted. </li></ul><ul><li>We have to specify correct encoding /charset in order to view the site (if we desire ;)) </li></ul>
  63. 63. Encoding (Cyrillic) <ul><li>Other encodings are KOI8-R, Cyrillic-ISO, Cyrillic-DOS. </li></ul>
  64. 64. Encoding – specifying the language <ul><li>Besides specification of encoding page language can also be specified. This may be used for rendering control, in situations like: </li></ul><ul><li>Assisting search engines </li></ul><ul><li>Assisting speech synthesizers </li></ul><ul><li>Assisting spell checkers and grammar checkers </li></ul>
  65. 65. Encoding – specifying the language <ul><li>Language attribute can be specified for any HTML element. For example, consider following code (you may type it in your browsereditor): </li></ul><ul><li><HTML><HEAD></HEAD><BODY> </li></ul><ul><li><P><Q lang=“en”>Her superpowers were the result of &gamma;-radiation,</Q> he explained. <P> </li></ul><ul><li></BODY></HTML> </li></ul>
  66. 66. Encoding – specifying the language <ul><li>Format for specifying Language attribute: </li></ul><ul><li>Language-code = primary-code (“-” subcode) </li></ul><ul><li>Examples: </li></ul><ul><li>“ en” – English </li></ul><ul><li>“ en-US” US version of English </li></ul><ul><li>“ i-navajo”: the Navajo language </li></ul>
  67. 67. Encoding – specifying the language <ul><li>Examples continued: </li></ul><ul><li>fr (French), de (German), it (Italian), nl (Dutch), el (Greek), es (Spanish), pt (Portuguese), ar (Arabic), he (Hebrew), ru (Russian), zh (Chinese), ja (Japanese), hi (Hindi), ur (Urdu), and sa (Sanskrit) </li></ul>
  68. 68. Encoding – specifying the language <ul><li><HTML lang=&quot;fr&quot;> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Un document multilingue</TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> ...Interpreted as French... <P lang=&quot;es&quot;> ...Interpreted as Spanish... <P> ...Interpreted as French again... <P> ...French text interrupted by <EM lang=&quot;ja&quot;>some Japanese</EM> French begins here again... </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  69. 69. More HTML <ul><li>Topics covered and to be covered: </li></ul><ul><li>More tags </li></ul><ul><li>Display of special characters in HTML </li></ul><ul><li>Different page encodings </li></ul><ul><li>Meta tags </li></ul><ul><li>Mailto URL </li></ul><ul><li>Anchors </li></ul>
  70. 70. Anchors <ul><li>Hyperlinks are for linking two different documents. </li></ul><ul><li>Anchors are for creating links within same document. </li></ul>
  71. 71. Anchors <ul><li>See examples at </li></ul><ul><li>http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations </li></ul><ul><li>http://www.caltrain.org/timetable.html </li></ul>
  72. 72. Anchors <ul><li>How to create an anchor: </li></ul><ul><li>Create a hyperlink: </li></ul><ul><li><A HREF = “#A”>Anchor</A> </li></ul><ul><li>2. Assign name to the element: </li></ul><ul><li><A NAME=“A”>Anchors in nutshell</A> </li></ul>
  73. 73. HTML editors <ul><li>More or less comprehensive list is given at: </li></ul><ul><li>http://en.wikipedia.org/wiki/HTML_editor </li></ul>
  74. 74. Testing HTML code and Web site <ul><li>HTML source code verification. </li></ul><ul><li>This might include HTML source code errors and optimization of page performance </li></ul>
  75. 75. Testing HTML code and Web site <ul><li>HTML source code verification. </li></ul><ul><li>Hypertext link validation </li></ul>
  76. 76. Testing HTML code and Web site <ul><li>HTML source code verification. </li></ul><ul><li>Hypertext link validation </li></ul><ul><li>Outstanding Web pages. May serve as a good example to follow. </li></ul>
  77. 77. Testing HTML code and Web site <ul><li>HTML source code verification. </li></ul><ul><li>Hypertext link validation </li></ul><ul><li>Outstanding Web pages. </li></ul><ul><li>Get help from developers/webmasters </li></ul>
  78. 78. Testing HTML code and Web site <ul><li>HTML source code validation. </li></ul><ul><li>Use online validators like </li></ul><ul><li>http://validator.w3.org/ </li></ul><ul><li>List of validators: </li></ul><ul><li>http://www.flfsoft.com/html/html_validators.html </li></ul>
  79. 79. Testing HTML code and Web site <ul><li>HTML source code validation. </li></ul><ul><li>Use online validators like </li></ul><ul><li>http://validator.w3.org/ </li></ul><ul><li>List of validators: </li></ul><ul><li>http://www.flfsoft.com/html/html_validators.html </li></ul>
  80. 80. Style sheets and HTML <ul><li>Problems web developers face with time: </li></ul><ul><li>Using proprietary HTML extensions </li></ul><ul><li>Converting text into images </li></ul><ul><li>Using images for white space control </li></ul><ul><li>Use of tables for page layout </li></ul><ul><li>Writing a program instead of using HTML </li></ul>
  81. 81. Style sheets and HTML <ul><li>To demonstrate use of style sheets please </li></ul><ul><li>Open NotePad </li></ul><ul><li>Type code: </li></ul><ul><li>P.special { </li></ul><ul><li>color : green; border: solid red; </li></ul><ul><li>} </li></ul>
  82. 82. Style sheets and HTML <ul><li>3. Create a folder C:HTMLClass </li></ul><ul><li>4. Save document as C:HTMLClassspecial.css </li></ul>
  83. 83. Style sheets and HTML <ul><li>Open NotePad, type following HTML code in it and save as C:HTMLClassTest2.html: </li></ul><ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> <HTML> <HEAD> <LINK href=&quot;special.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> </HEAD> <BODY> <P class=&quot;special&quot;>This paragraph should have special green text. </BODY> </HTML> </li></ul>
  84. 84. Style sheets and HTML <ul><li>Open Test2.html and observe how paragraph looks. </li></ul>
  85. 85. Style sheets and HTML <ul><li>Styles can be defined within HTML tags as well, e.g.: </li></ul><ul><li><P style=&quot;font-size: 12pt; color: red&quot;>This text shall appear in red </li></ul>
  86. 86. Style Format <ul><li>Property declarations shall be in form “name : value”, properties are separated by semi-colon. </li></ul>
  87. 87. Style Format. Example <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><STYLE type=&quot;text/css&quot;> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY><H1>Some text here</H1> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  88. 88. Style Format. Example <ul><li>We can apply setting to specific headers also! Try this code: </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><STYLE type=&quot;text/css&quot;> H1.myclass {border-width: 1; border: solid; text-align: center} </STYLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> <H1 class=&quot;myclass&quot;> This H1 is affected by our style </H1> </li></ul><ul><li><H1> This one is not affected by our style </H1> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  89. 89. Exercise <ul><li>http://www.resume-help.org/banking_executive_resume_example.htm </li></ul>
  90. 90. Frames <ul><li>Frames are independent and ususally scrollable windows tha tile together to break up and organize a display so it is not only more visually appealing but also easier to work with. </li></ul>
  91. 91. Frames. <ul><li>Create following file header.html: </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><H1>This is header</H1> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  92. 92. Frames. <ul><li>Create following file label.html: </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><H4>This is left part</H4> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  93. 93. Frames. <ul><li>Create following file info.html: </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><H4>This is some information</H4> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  94. 94. Frames. <ul><li>Create following file footer.html: </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li><I>This is footer</I> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  95. 95. Frames. Part 1 of 2. <ul><li><HTML> </li></ul><ul><li><HEAD></HEAD> </li></ul><ul><li><FRAMESET ROWS = “25%, 50%, 25%”> </li></ul><ul><li><FRAME SRC=“header.html”> </li></ul><ul><li><FRAMESET COLS = “25%, 75%”> </li></ul>
  96. 96. Frames. Part 2 of 2. <ul><li><FRAME SRC=“label.html”> </li></ul><ul><li></FRAMESET> </li></ul><ul><li><FRAME SRC=“info.html”> </li></ul><ul><li></FRAMESET> </li></ul><ul><li><FRAME SRC=“footer.html”> </li></ul><ul><li></FRAMESET> </li></ul><ul><li></HTML> </li></ul>
  97. 97. Frames. <ul><li>For browsers not supporting frames use following syntax: </li></ul><ul><li><NOFRAMES> </li></ul><ul><li>…HTML code here… </li></ul><ul><li></NOFRAMES> </li></ul>
  98. 98. HTML <ul><li></END> </li></ul>
  99. 99. HTML <ul><li>http://www.scopesys.com/ </li></ul><ul><li>http://www.tradeshop.com/master/custom.shtml </li></ul><ul><li>http://www.mewspage.pwp.blueyonder.co.uk / </li></ul><ul><li>http://www.un.org/events/workshop/dpi-unitar/2003/dreamweaver/pagesamples/badsites.htm </li></ul>
  100. 100. Background Image <ul><li>http://www.psoug.org/reference/collections.html </li></ul>

×