Post on 17-May-2015
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
11
HTMLHTML
Part 2Part 2
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
22
HTML key pointsHTML key points HTML is a language for describing HTML is a language for describing a texta text Text manipulation is achieved Text manipulation is achieved exclusively with use of tagsexclusively with use of tags Some tags are required, like Some tags are required, like <HTML>, <BODY>, some are not.<HTML>, <BODY>, some are not.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
33
HTML key pointsHTML key points
Many tags come in pairs, like Many tags come in pairs, like <HTML></HTML>. In this case <HTML> is <HTML></HTML>. In this case <HTML> is an opening tag, and </HTML> is closing an opening tag, and </HTML> is closing tag,tag,
Some tags do not require closing tags, Some tags do not require closing tags, e.g. <BR>, <HR>e.g. <BR>, <HR>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
44
HTML key pointsHTML key pointsTypical HTML document:Typical HTML document:
<HTML><HTML><HEAD><HEAD><TITLE> this document is created by (your name here)<TITLE> this document is created by (your name here)</TITLE></TITLE></HEAD></HEAD><BODY> Some text goes here…<BODY> Some text goes here…</BODY></BODY>
</HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
55
HTML key pointsHTML key points
HTML document is a plain text document HTML document is a plain text document with extension “.html” or “htm”,with extension “.html” or “htm”,
Each HTML document shall contain Each HTML document shall contain following tags <HTML>, <HEAD>, following tags <HTML>, <HEAD>, <BODY>, </HTML>, </HEAD>, </BODY>. <BODY>, </HTML>, </HEAD>, </BODY>.
Using these six tags we split document Using these six tags we split document into two parts – “for official use only” and into two parts – “for official use only” and for “recipient use”.for “recipient use”.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
66
HTML key pointsHTML key points
• We can set text outlook, such as text size, We can set text outlook, such as text size, font, color with use of tags.font, color with use of tags.
• We can group phrases in paragraphs We can group phrases in paragraphs (basic layout) using <BR> and <P> tags(basic layout) using <BR> and <P> tags
• We can place some data in tablesWe can place some data in tables• We can create hyperlinks (<a href…>)We can create hyperlinks (<a href…>)• We can place images in document We can place images in document
(<img…>(<img…>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
77
HTML key pointsHTML key pointsWe can nest tags, e.g. <P><HR>some text here</p>We can nest tags, e.g. <P><HR>some text here</p>
Or use image in hyperlink:Or use image in hyperlink:
<html><html><body><body><a href="http://www.google.com"><img border="0" src = <a href="http://www.google.com"><img border="0" src = ““google.gif"></a>google.gif"></a></body></body></html></html>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
88
HTML key pointsHTML key points
HTML document may look differently in HTML document may look differently in different browsers. Reason is that HTML is different browsers. Reason is that HTML is not a language for text layout or not a language for text layout or publishing. Compare for example HTML publishing. Compare for example HTML document with pdf document).document with pdf document).
HTML is text describing language and thus it HTML is text describing language and thus it cannot guarantee that HTML text look cannot guarantee that HTML text look identical in different browsers.identical in different browsers.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
99
More HTMLMore HTML
Topics to be covered:Topics to be covered:
More tags More tags Display of special symbols in HTMLDisplay of special symbols in HTML Different page encodingsDifferent page encodings Meta tagsMeta tags Mailto URLMailto URL AnchorsAnchors
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1010
<TITLE> tag<TITLE> tag
Open Notepad application,Open Notepad application,Type following text into it: Type following text into it: <HTML><HTML>
<HEAD><HEAD><TITLE>This is test doc</TITLE><TITLE>This is test doc</TITLE>
</HEAD></HEAD><BODY> Some text here</BODY><BODY> Some text here</BODY>
</HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1111
<TITLE> tag<TITLE> tag
Save document:Save document:
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1212
<TITLE> tag<TITLE> tag
Open saved document Test.html:Open saved document Test.html:
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1313
<TITLE> tag<TITLE> tag
<TITLE> tag gives HTML document a title, <TITLE> tag gives HTML document a title, i.e. a name.i.e. a name.
• When bookmarking HTML page it’s a title When bookmarking HTML page it’s a title which is saved in your list of bookmarks.which is saved in your list of bookmarks.
• Only one <TITLE> tag is allowedOnly one <TITLE> tag is allowed• Tag <TITLE> must contain only plain text; Tag <TITLE> must contain only plain text;
no nested tags are allowed.no nested tags are allowed.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1414
<TITLE> tag<TITLE> tag
Try to give descriptive name to Title. Try to give descriptive name to Title.
Long, non-descriptive names shall be Long, non-descriptive names shall be avoided, and most probably, be trimmed avoided, and most probably, be trimmed by browser. by browser.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1515
<TITLE>. Bad examples.<TITLE>. Bad examples.
<TITLE> </TITLE><TITLE> </TITLE><TITLE>Some HTML doc</TITLE><TITLE>Some HTML doc</TITLE><TITLE>An Example</TITLE><TITLE>An Example</TITLE><TITLE>Rodriguez, who was also fined an <TITLE>Rodriguez, who was also fined an
undisclosed amount, was ejected from undisclosed amount, was ejected from Thursday's game in the fourth inning for arguing Thursday's game in the fourth inning for arguing that he was interfered with while trying to throw that he was interfered with while trying to throw out a base stealer. </TITLE>out a base stealer. </TITLE>
<TITLE>HTML page</TITLE><TITLE>HTML page</TITLE>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1616
<TITLE>. Good examples.<TITLE>. Good examples.
<TITLE>Introduction to <TITLE>Introduction to Photography</TITLE>Photography</TITLE>
<TITLE>USA map</TITLE><TITLE>USA map</TITLE>
<TITLE>VoIP: Installation step 1</TITLE><TITLE>VoIP: Installation step 1</TITLE>
<TITLE>Alex Krutoy Blog home</TITLE><TITLE>Alex Krutoy Blog home</TITLE>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1717
Tags, more tags. Tags, more tags.
Try following code:Try following code: <html><html><body><body><U>This text is underlined</U><BR><U>This text is underlined</U><BR><S>This text is strikethrough</S><BR><S>This text is strikethrough</S><BR><I>This text is in Italic</I><BR><I>This text is in Italic</I><BR><B>This text is in Bold</B><BR><B>This text is in Bold</B><BR></body></body></html></html>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1818
Tags, more tags. Tags, more tags.
Tags:Tags:
<U></U> For underlined text<U></U> For underlined text
<S></S> For strikethrough text<S></S> For strikethrough text
<I></I> For Italic text<I></I> For Italic text
<B></B> For Bold text<B></B> For Bold text
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
1919
Quoting text - <BLOCKQUOTE> Quoting text - <BLOCKQUOTE> and <Q>and <Q>
Use <BLOCKQUOTE> tags for quotation.Use <BLOCKQUOTE> tags for quotation.Try following code:Try following code:
<html><html><body><BLOCKQUOTE><body><BLOCKQUOTE>Quidquid latine dictum sit, altum Quidquid latine dictum sit, altum
sonatur</BLOCKQUOTE> Everything said in sonatur</BLOCKQUOTE> Everything said in Latin sounds noble.Latin sounds noble.
</body></body></html> </html>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2020
META elementMETA element
META element is designed for including META element is designed for including document information, other than Title or document information, other than Title or Base.Base.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2121
META elementMETA element
META attributes are HTTP-EQUIV, NAME META attributes are HTTP-EQUIV, NAME and CONTENT.and CONTENT.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2222
META element. Examples.META element. Examples.
<meta name="description" content="It's only one <meta name="description" content="It's only one game, but it's a big deal to the Tigers. Detroit game, but it's a big deal to the Tigers. Detroit catcher Ivan Rodriguez was incredulous and catcher Ivan Rodriguez was incredulous and manager Jim Leyland was irate at what both feel manager Jim Leyland was irate at what both feel is an unjustified one-game suspension issued is an unjustified one-game suspension issued Saturday by Major League Baseball. Rodriguez Saturday by Major League Baseball. Rodriguez was suspended for making contact with an was suspended for making contact with an umpire during a game against the Seattle umpire during a game against the Seattle Mariners on Thursday. - Major League Baseball Mariners on Thursday. - Major League Baseball news" />news" />
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2323
META element. Examples.META element. Examples.
<meta name=“multimedia, slideshow, <meta name=“multimedia, slideshow, digital photos, DVD, burning, streaming, digital photos, DVD, burning, streaming, online photos, digitizing, replication, image online photos, digitizing, replication, image safe, storage, digital valve, video clips, safe, storage, digital valve, video clips, online preview, scanning, negatives, online preview, scanning, negatives, music, film development” music, film development” name=“description”> name=“description”>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2424
META elementMETA element
Why META element is important? Why META element is important?
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2525
META elementMETA element
The purpose of the meta element is to The purpose of the meta element is to provide meta-information about the provide meta-information about the document. document.
The meta element is used to provide The meta element is used to provide information that is relevant to browsers or information that is relevant to browsers or search engines like telling browser about search engines like telling browser about encoding and the content of document.encoding and the content of document.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2626
mailto URLmailto URL
Lets go to out HTML editor/browser at:Lets go to out HTML editor/browser at:
http://www.w3schools.com/html/tryit.asp?http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic filename=tryhtml_basic
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2727
mailto URLmailto URL
Type in following HTML code:Type in following HTML code: <HTML><HTML>
<HEAD><HEAD><TITLE>This is test doc</TITLE><TITLE>This is test doc</TITLE>
</HEAD></HEAD><BODY> <ADDRESS><BODY> <ADDRESS>
Peter Tester <BR>Peter Tester <BR>123 Test street, #3 <BR>123 Test street, #3 <BR>Testopulos, 00001, USA <BR>Testopulos, 00001, USA <BR><a href="mailto:ptester@testos.edu?subject=Mail from your blog <a href="mailto:ptester@testos.edu?subject=Mail from your blog
fan">Send me a mail</a>fan">Send me a mail</a></BODY></BODY></HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2828
mailto URLmailto URL
You shall get the following:You shall get the following:
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
2929
mailto URLmailto URL
Clicking on ‘Send me a mail’ link shall Clicking on ‘Send me a mail’ link shall
• Activate your default email applicationActivate your default email application• Open new email templateOpen new email template• Populate ‘MailTo’ and ‘Subject’ fields Populate ‘MailTo’ and ‘Subject’ fields
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3030
mailto URLmailto URLSimple mailto: Simple mailto: – <a href="mailto:ptester@test.edu"> <a href="mailto:ptester@test.edu">
Multiple recepients:Multiple recepients:
– <a href="mailto:ptester@test.edu<a href="mailto:ptester@test.edu, tester2@test.edu, tester2@test.edu">">
Mailto with subject line: Mailto with subject line:
– <a href=" <a href=" mailto:ptester@test.edumailto:ptester@test.edu?subject=Mail?subject=Mail from your blog fan from your blog fan"> ">
Mail with message body filled: Mail with message body filled:
– <a href=" <a href=" mailto:ptester@test.edu?subject=Mailmailto:ptester@test.edu?subject=Mail from your blog fan?body=I am having trouble finding from your blog fan?body=I am having trouble finding information on cooking"> information on cooking">
Mail with message body filled with multiple lines Mail with message body filled with multiple lines
– <a href="<a href="mailto:ptester@test.edu?mailto:ptester@test.edu?body=The message's first paragraph.%0A%0aSecond paragraph.%0Abody=The message's first paragraph.%0A%0aSecond paragraph.%0A%0AThird Paragraph.">%0AThird Paragraph.">
"%0A" for a new line "%0A" for a new line "%0A%0A" for a new line preceded by a blank line."%0A%0A" for a new line preceded by a blank line.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3131
Author information and DT stampAuthor information and DT stamp
It’s a good practice to specify author of the page It’s a good practice to specify author of the page at the bottom.at the bottom.
It is a good practice to specify date and time It is a good practice to specify date and time (DT stamp) when the document is last (DT stamp) when the document is last modified, like modified, like
Created by John PoeCreated by John Poe
Last modified: July 15, 2007, 12:56:12 PSTLast modified: July 15, 2007, 12:56:12 PST
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3232
More HTMLMore HTML
Topics covered and to be covered:Topics covered and to be covered:
More tags More tags Display of special characters in HTMLDisplay of special characters in HTML Different page encodingsDifferent page encodings Meta tagsMeta tags Mailto URLMailto URL AnchorsAnchors
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3333
Input elementsInput elements
Create following HTML documentCreate following HTML document
<HTML><HTML><HEAD></HEAD><HEAD></HEAD><BODY><FORM<BODY><FORM id="form1" runat="server"> id="form1" runat="server"><<PP>> <input id="Text1" type="text" /></<input id="Text1" type="text" /></PP>> <<PP>> <input id="Submit1" type="submit" value="submit" /><input id="Submit1" type="submit" value="submit" /></</PP>></</FORMFORM>></BODY></BODY></HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3434
Input text exampleInput text example
Result:Result:
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3535
Display of special characters in Display of special characters in HTMLHTML
What is a special character in HTML?What is a special character in HTML?
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3636
Display of special characters in Display of special characters in HTMLHTML
A special character in HTML is A special character in HTML is ANYANY symbol, symbol, which is NOT a:which is NOT a:
Upper- or lowercase letter,Upper- or lowercase letter,
Number (0-9),Number (0-9),
One of following symbols $ - _ . +One of following symbols $ - _ . +
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3737
Display of special characters in Display of special characters in HTMLHTML
We have to indicate to a browser that there We have to indicate to a browser that there is a special symbol, otherwise browser is a special symbol, otherwise browser might try to interpret the symbols itself with might try to interpret the symbols itself with unpredictable results.unpredictable results.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3838
Display of special characters in Display of special characters in HTMLHTML
For example, we would like to navigate to For example, we would like to navigate to document “www.somesite.com\my document “www.somesite.com\my directory\Last images\Index.html”directory\Last images\Index.html”
White spaces are special characters in White spaces are special characters in HTML so the URL might not work:HTML so the URL might not work:
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
3939
Display of special characters in Display of special characters in HTMLHTML
SolutionSolution. . Indicate character code in (percent sign plus Indicate character code in (percent sign plus
hexadecimal number).hexadecimal number).
ExampleExample: %20 – is a space character ( ): %20 – is a space character ( )%3f – question mark (?)%3f – question mark (?)%2f – slash character (/)%2f – slash character (/)So, the URL may look like this:So, the URL may look like this:http://myhost/C/Program%20Files/My%20Webhttp://myhost/C/Program%20Files/My%20Web
%20site%20Files/Index.html %20site%20Files/Index.html
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4040
Display of special characters in Display of special characters in HTMLHTML
TryTry. .
Type following in browser address field:Type following in browser address field:
C:\Program FilesC:\Program Files
Press ‘Enter’Press ‘Enter’
What happened?What happened?
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4141
Display of special characters in Display of special characters in HTMLHTML
Case of special symbols, like ©, ®, ¢, ß Case of special symbols, like ©, ®, ¢, ß
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4242
Display of special characters in Display of special characters in HTMLHTML
Microsoft Windows Character SetMicrosoft Windows Character Set
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4343
Display of special characters in Display of special characters in HTMLHTML
Use on of the following methods (example Use on of the following methods (example for character for character ±± ): ):
Insert code which brings to code whose Insert code which brings to code whose value in decimal is 177, value in decimal is 177,
Use numeric reference - ± Use numeric reference - ±
Use character named entity (nickname) - Use character named entity (nickname) - ±±
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4444
Display of special characters in Display of special characters in HTMLHTML
Examples:Examples:
• The Copyright Symbol (©) - ©The Copyright Symbol (©) - ©• The Registered Trademark Symbol (®) - ®The Registered Trademark Symbol (®) - ®• The Trademark Symbol (™) - ™The Trademark Symbol (™) - ™• The Non-breaking Space - The Non-breaking Space - • The Ampersand (&) - &The Ampersand (&) - &• Less Than and Greater Than (< , >) - < or >Less Than and Greater Than (< , >) - < or >• French Accent Marks (é ) - é or èFrench Accent Marks (é ) - é or è• The Spanish Tilde (ñ): - ñThe Spanish Tilde (ñ): - ñ• The Cents Symbol (¢) - ¢The Cents Symbol (¢) - ¢
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4545
Display of special characters in Display of special characters in HTMLHTML
When testing HTML take into account that When testing HTML take into account that special characters may look different on special characters may look different on different platforms!different platforms!
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4646
Display of special characters in Display of special characters in HTMLHTML
Type following code into the browser/editor:Type following code into the browser/editor:
<html><html>
<body><body>
"The speed of light in vacuum is exactly "The speed of light in vacuum is exactly 299 792 458 m/s"299 792 458 m/s"
</body></body>
</html></html>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4747
Display of special characters in Display of special characters in HTMLHTML
The output we see on PC machines The output we see on PC machines (Windows):(Windows):
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4848
Display of special characters in Display of special characters in HTMLHTML
The output we would see on McIntosh The output we would see on McIntosh machines:machines:
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
4949
StandardStandard
When designing web pages we cannot When designing web pages we cannot envisage that web site consumers will use envisage that web site consumers will use same keyboard, same character encoding same keyboard, same character encoding etc. etc.
Thus, there is a need for standardization.Thus, there is a need for standardization.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5050
Standard character setStandard character set
International standard for character set ISO International standard for character set ISO 8859-1, also known as ISO Latin-1 is the 8859-1, also known as ISO Latin-1 is the primary character set for representing primary character set for representing Western languages on the Internet. Western languages on the Internet.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5151
ISO 8859-1 (Latin-1)ISO 8859-1 (Latin-1)
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5252
Different character setsDifferent character sets
More requirements to HTML document.More requirements to HTML document.
Now we need to display document Now we need to display document containing non-Latin-1 characters, e.g. text containing non-Latin-1 characters, e.g. text in Kanji or Cyrillic.in Kanji or Cyrillic.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5353
How HTML documents are servedHow HTML documents are served
A request to web-server is made to A request to web-server is made to retrieve particular HTML documentretrieve particular HTML document
Server finds the documents, converts it Server finds the documents, converts it into stream of bits and sends to browserinto stream of bits and sends to browser
Browser reads stream of bits and converts Browser reads stream of bits and converts it back to HTML documentit back to HTML document
Browser displays HTML document Browser displays HTML document
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5454
EncodingEncoding
By default server and browser assume By default server and browser assume that character encoding is Latin-1that character encoding is Latin-1
While in majority of cases this might be While in majority of cases this might be true (for “English websites”) there is a true (for “English websites”) there is a need to indicate encoding.need to indicate encoding.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5555
EncodingEncoding
To specify encoding in HTML document To specify encoding in HTML document we use meta tag attribute, e.g.we use meta tag attribute, e.g.
<META http-equiv="Content-Type" <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> content="text/html; charset=EUC-JP">
This declaration should appear as early as This declaration should appear as early as possible in the <HEAD> element. possible in the <HEAD> element.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5656
Encoding (JP)Encoding (JP)
Visit Visit http://www.jref.com/language/japanese_wrhttp://www.jref.com/language/japanese_writing_system_kanji_hiragana_katakana_roiting_system_kanji_hiragana_katakana_romaji.shtmlmaji.shtml
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5757
Encoding (JP)Encoding (JP)
• Observe that following is placed in header Observe that following is placed in header part:part:
<meta content="text/html; charset=Shift-<meta content="text/html; charset=Shift-JIS" http-equiv=Content-Type>JIS" http-equiv=Content-Type>
• Observe that both Latin and Kanji Observe that both Latin and Kanji characters are displayed on the page.characters are displayed on the page.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5858
Encoding (Cyrillic)Encoding (Cyrillic)
Общая характеристикаОбщая характеристикаБаба-Яга живёт в лесу, в Баба-Яга живёт в лесу, в избушкеизбушке нана курьихкурьих ножкахножках, иногда окружённой , иногда окружённой
частоколом из человеческих костей. Часто в доме Бабы-Яги находится частоколом из человеческих костей. Часто в доме Бабы-Яги находится Кот, являющийся охранником и советчиком. Иногда эту функцию Кот, являющийся охранником и советчиком. Иногда эту функцию выполняет мышь.выполняет мышь.
Основной способ передвижения — полёт (или поездка) в Основной способ передвижения — полёт (или поездка) в ступеступе, цитаты: , цитаты: «Баба-Яга, костяная нога в ступе едет, «Баба-Яга, костяная нога в ступе едет, пестомпестом погоняет, погоняет, помеломпомелом след след заметает». Также, у заметает». Также, у ПушкинаПушкина: «Там ступа с Бабою-Ягой идёт-бредёт : «Там ступа с Бабою-Ягой идёт-бредёт сама собой»сама собой»
Баба-Яга — неоднозначный персонаж, чаще всего она отрицательная Баба-Яга — неоднозначный персонаж, чаще всего она отрицательная героиня, но иногда помогает (даже по доброй воле) положительным героиня, но иногда помогает (даже по доброй воле) положительным героям. Баба-Яга — обладательница огня (сказка «Василиса героям. Баба-Яга — обладательница огня (сказка «Василиса Прекрасная»), золотых яблок (сказка «Гуси-Лебеди») или знания, Прекрасная»), золотых яблок (сказка «Гуси-Лебеди») или знания, помогающего главному герою одолеть своего противника (сказка помогающего главному герою одолеть своего противника (сказка «Лягушка-Царевна»).«Лягушка-Царевна»).
В В 20042004 году «родиной Бабы-Яги» было объявлено село году «родиной Бабы-Яги» было объявлено село КукобойКукобой в в ЯрославскойЯрославской областиобласти..
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
5959
Encoding (Cyrillic)Encoding (Cyrillic)
If incorrect encoding is used previously mentioned text may lok like:If incorrect encoding is used previously mentioned text may lok like:
Баба-РЇРіР° живёт РІ лесу, РІ Баба-РЇРіР° живёт РІ лесу, РІ избушкРизбушке РЅР° µ РЅР° РєСѓСЂСЊРёСРєСѓСЂСЊРёС… … ножкаСножках…, , РёРЅРѕРіРґР° окружённой частоколом РёР· человеческих РёРЅРѕРіРґР° окружённой частоколом РёР· человеческих костей. Часто РІ РґРѕРјРµ Бабы-РЇРіРё находится РљРѕС‚, костей. Часто РІ РґРѕРјРµ Бабы-РЇРіРё находится РљРѕС‚, являющийся охранником Рё советчиком. РРЅРѕРіРґР° эту �являющийся охранником Рё советчиком. РРЅРѕРіРґР° эту �функцию выполняет мышь.функцию выполняет мышь.
РћСЃРЅРѕРІРЅРѕР№ СЃРїРѕСЃРѕР± передвижения — полёт (или поездка) РћСЃРЅРѕРІРЅРѕР№ СЃРїРѕСЃРѕР± передвижения — полёт (или поездка) РІ РІ ступРступеµ, цитаты: «Баба-РЇРіР°, костяная РЅРѕРіР° РІ ступе едет, , цитаты: «Баба-РЇРіР°, костяная РЅРѕРіР° РІ ступе едет, пестомпестом погоняет, погоняет, помеломпомелом след заметает». Также, Сѓ след заметает». Также, Сѓ ПушкинРПушкина°: «Там ступа СЃ Бабою-РЇРіРѕР№ идёт-бредёт сама : «Там ступа СЃ Бабою-РЇРіРѕР№ идёт-бредёт сама собой»собой»
Баба-Яга — неоднозначный персонаж, чаще всего она Баба-Яга — неоднозначный персонаж, чаще всего она отрицательная героиня, но иногда помогает (даже отрицательная героиня, но иногда помогает (даже по доброй воле) положительным героям. Баба-Яга — по доброй воле) положительным героям. Баба-Яга — обладательница огня (сказка «Василиса обладательница огня (сказка «Василиса Прекрасная»), золотых яблок (сказка «Гуси-Прекрасная»), золотых яблок (сказка «Гуси-Лебеди») или знания, помогающего главному герою Лебеди») или знания, помогающего главному герою одолеть своего противника (сказка «Лягушка-одолеть своего противника (сказка «Лягушка-Царевна»).Царевна»).
Р’ Р’ 20042004 РіРѕРґСѓ «родиной Бабы-РЇРіРёВ» было объявлено село РіРѕРґСѓ «родиной Бабы-РЇРіРёВ» было объявлено село РљСѓРєРѕР±РѕРРљСѓРєРѕР±РѕР№№ РІ РІ ЯрославскоРЯрославской № областиобласти..
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6060
Encoding (Cyrillic)Encoding (Cyrillic)
Or even like this:Or even like this:
п▒п╟п╠п╟-п╞пЁп╟ п╤п╦п╡я▒я┌ п╡ п╩п╣я│я┐, п╡ п▒п╟п╠п╟-п╞пЁп╟ п╤п╦п╡я▒я┌ п╡ п╩п╣я│я┐, п╡ п╦п╥п╠я┐я┬п╨пп╦п╥п╠я┐я┬п╨п╣ ╣ п╫пп╫п╟ ╟ п╨я┐я─я▄п╦яп╨я┐я─я▄п╦я┘ ┘ п╫п╬п╤п╨п╟яп╫п╬п╤п╨п╟я┘┘, , п╦п╫п╬пЁп╢п╟ п╬п╨я─я┐п╤я▒п╫п╫п╬п╧ я┤п╟я│я┌п╬п╨п╬п╩п╬п╪ п╦п╥ п╦п╫п╬пЁп╢п╟ п╬п╨я─я┐п╤я▒п╫п╫п╬п╧ я┤п╟я│я┌п╬п╨п╬п╩п╬п╪ п╦п╥ я┤п╣п╩п╬п╡п╣я┤п╣я│п╨п╦я┘ п╨п╬я│я┌п╣п╧. п╖п╟я│я┌п╬ п╡ п╢п╬п╪п╣ п▒п╟п╠я▀-п╞пЁп╦ я┤п╣п╩п╬п╡п╣я┤п╣я│п╨п╦я┘ п╨п╬я│я┌п╣п╧. п╖п╟я│я┌п╬ п╡ п╢п╬п╪п╣ п▒п╟п╠я▀-п╞пЁп╦ п╫п╟я┘п╬п╢п╦я┌я│я▐ п п╬я┌, я▐п╡п╩я▐я▌я┴п╦п╧я│я▐ п╬я┘я─п╟п╫п╫п╦п╨п╬п╪ п╦ п╫п╟я┘п╬п╢п╦я┌я│я▐ п п╬я┌, я▐п╡п╩я▐я▌я┴п╦п╧я│я▐ п╬я┘я─п╟п╫п╫п╦п╨п╬п╪ п╦ я│п╬п╡п╣я┌я┤п╦п╨п╬п╪. п≤п╫п╬пЁп╢п╟ я█я┌я┐ я└я┐п╫п╨я├п╦я▌ п╡я▀п©п╬п╩п╫я▐п╣я┌ п╪я▀я┬я▄.я│п╬п╡п╣я┌я┤п╦п╨п╬п╪. п≤п╫п╬пЁп╢п╟ я█я┌я┐ я└я┐п╫п╨я├п╦я▌ п╡я▀п©п╬п╩п╫я▐п╣я┌ п╪я▀я┬я▄.
п·я│п╫п╬п╡п╫п╬п╧ я│п©п╬я│п╬п╠ п©п╣я─п╣п╢п╡п╦п╤п╣п╫п╦я▐ Б─■ п©п╬п╩я▒я┌ (п╦п╩п╦ п·я│п╫п╬п╡п╫п╬п╧ я│п©п╬я│п╬п╠ п©п╣я─п╣п╢п╡п╦п╤п╣п╫п╦я▐ Б─■ п©п╬п╩я▒я┌ (п╦п╩п╦ п©п╬п╣п╥п╢п╨п╟) п╡ я│я┌я┐п©п╣, я├п╦я┌п╟я┌я▀: б╚п▒п╟п╠п╟-п╞пЁп╟, п╨п╬я│я┌я▐п╫п╟я▐ п©п╬п╣п╥п╢п╨п╟) п╡ я│я┌я┐п©п╣, я├п╦я┌п╟я┌я▀: б╚п▒п╟п╠п╟-п╞пЁп╟, п╨п╬я│я┌я▐п╫п╟я▐ п╫п╬пЁп╟ п╡ я│я┌я┐п©п╣ п╣п╢п╣я┌, п©п╣я│я┌п╬п╪ п©п╬пЁп╬п╫я▐п╣я┌, п©п╬п╪п╣п╩п╬п╪ п╫п╬пЁп╟ п╡ я│я┌я┐п©п╣ п╣п╢п╣я┌, п©п╣я│я┌п╬п╪ п©п╬пЁп╬п╫я▐п╣я┌, п©п╬п╪п╣п╩п╬п╪ я│п╩п╣п╢ п╥п╟п╪п╣я┌п╟п╣я┌б╩. п╒п╟п╨п╤п╣, я┐ п÷я┐я┬п╨п╦п╫п╟: б╚п╒п╟п╪ я│я┌я┐п©п╟ я│ я│п╩п╣п╢ п╥п╟п╪п╣я┌п╟п╣я┌б╩. п╒п╟п╨п╤п╣, я┐ п÷я┐я┬п╨п╦п╫п╟: б╚п╒п╟п╪ я│я┌я┐п©п╟ я│ п▒п╟п╠п╬я▌-п╞пЁп╬п╧ п╦п╢я▒я┌-п╠я─п╣п╢я▒я┌ я│п╟п╪п╟ я│п╬п╠п╬п╧б╩п▒п╟п╠п╬я▌-п╞пЁп╬п╧ п╦п╢я▒я┌-п╠я─п╣п╢я▒я┌ я│п╟п╪п╟ я│п╬п╠п╬п╧б╩
п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╫п╣п╬п╢п╫п╬п╥п╫п╟я┤п╫я▀п╧ п©п╣я─я│п╬п╫п╟п╤, я┤п╟я┴п╣ п╡я│п╣пЁп╬ п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╫п╣п╬п╢п╫п╬п╥п╫п╟я┤п╫я▀п╧ п©п╣я─я│п╬п╫п╟п╤, я┤п╟я┴п╣ п╡я│п╣пЁп╬ п╬п╫п╟ п╬я┌я─п╦я├п╟я┌п╣п╩я▄п╫п╟я▐ пЁп╣я─п╬п╦п╫я▐, п╫п╬ п╦п╫п╬пЁп╢п╟ п©п╬п╪п╬пЁп╟п╣я┌ п╬п╫п╟ п╬я┌я─п╦я├п╟я┌п╣п╩я▄п╫п╟я▐ пЁп╣я─п╬п╦п╫я▐, п╫п╬ п╦п╫п╬пЁп╢п╟ п©п╬п╪п╬пЁп╟п╣я┌ (п╢п╟п╤п╣ п©п╬ п╢п╬п╠я─п╬п╧ п╡п╬п╩п╣) п©п╬п╩п╬п╤п╦я┌п╣п╩я▄п╫я▀п╪ пЁп╣я─п╬я▐п╪. (п╢п╟п╤п╣ п©п╬ п╢п╬п╠я─п╬п╧ п╡п╬п╩п╣) п©п╬п╩п╬п╤п╦я┌п╣п╩я▄п╫я▀п╪ пЁп╣я─п╬я▐п╪. п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╬п╠п╩п╟п╢п╟я┌п╣п╩я▄п╫п╦я├п╟ п╬пЁп╫я▐ (я│п╨п╟п╥п╨п╟ п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╬п╠п╩п╟п╢п╟я┌п╣п╩я▄п╫п╦я├п╟ п╬пЁп╫я▐ (я│п╨п╟п╥п╨п╟ б╚п▓п╟я│п╦п╩п╦я│п╟ п÷я─п╣п╨я─п╟я│п╫п╟я▐б╩), п╥п╬п╩п╬я┌я▀я┘ я▐п╠п╩п╬п╨ (я│п╨п╟п╥п╨п╟ б╚п▓п╟я│п╦п╩п╦я│п╟ п÷я─п╣п╨я─п╟я│п╫п╟я▐б╩), п╥п╬п╩п╬я┌я▀я┘ я▐п╠п╩п╬п╨ (я│п╨п╟п╥п╨п╟ б╚п⌠я┐я│п╦-п⌡п╣п╠п╣п╢п╦б╩) п╦п╩п╦ п╥п╫п╟п╫п╦я▐, п©п╬п╪п╬пЁп╟я▌я┴п╣пЁп╬ б╚п⌠я┐я│п╦-п⌡п╣п╠п╣п╢п╦б╩) п╦п╩п╦ п╥п╫п╟п╫п╦я▐, п©п╬п╪п╬пЁп╟я▌я┴п╣пЁп╬ пЁп╩п╟п╡п╫п╬п╪я┐ пЁп╣я─п╬я▌ п╬п╢п╬п╩п╣я┌я▄ я│п╡п╬п╣пЁп╬ п©я─п╬я┌п╦п╡п╫п╦п╨п╟ пЁп╩п╟п╡п╫п╬п╪я┐ пЁп╣я─п╬я▌ п╬п╢п╬п╩п╣я┌я▄ я│п╡п╬п╣пЁп╬ п©я─п╬я┌п╦п╡п╫п╦п╨п╟ (я│п╨п╟п╥п╨п╟ б╚п⌡я▐пЁя┐я┬п╨п╟-п╕п╟я─п╣п╡п╫п╟б╩).(я│п╨п╟п╥п╨п╟ б╚п⌡я▐пЁя┐я┬п╨п╟-п╕п╟я─п╣п╡п╫п╟б╩).
п▓ 2004 пЁп╬п╢я┐ б╚я─п╬п╢п╦п╫п╬п╧ п▒п╟п╠я▀-п╞пЁп╦б╩ п╠я▀п╩п╬ п╬п╠я┼я▐п╡п╩п╣п╫п╬ я│п╣п╩п╬ п▓ 2004 пЁп╬п╢я┐ б╚я─п╬п╢п╦п╫п╬п╧ п▒п╟п╠я▀-п╞пЁп╦б╩ п╠я▀п╩п╬ п╬п╠я┼я▐п╡п╩п╣п╫п╬ я│п╣п╩п╬ п я┐п╨п╬п╠п╬п╧ п╡ п╞я─п╬я│п╩п╟п╡я│п╨п╬п╧ п╬п╠п╩п╟я│я┌п╦.п я┐п╨п╬п╠п╬п╧ п╡ п╞я─п╬я│п╩п╟п╡я│п╨п╬п╧ п╬п╠п╩п╟я│я┌п╦.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6161
Encoding (Cyrillic)Encoding (Cyrillic)
Site of Pravda newspaper (www.pravda.ru) may Site of Pravda newspaper (www.pravda.ru) may contain following elements in the body part:contain following elements in the body part:
<div class="articlelist-toptitle"><div class="articlelist-toptitle"> <a class="articlelist-toptitle" href="http://www.dailyshow.ru/"><a class="articlelist-toptitle" href="http://www.dailyshow.ru/">Ïëàòåæåñïîñîáíîñòü Ïëàòåæåñïîñîáíîñòü
Êèðêîðîâà îêàçàëàñü ïîä âîïðîñîìÊèðêîðîâà îêàçàëàñü ïîä âîïðîñîì</a></a> </div></div> <img width="100" height="6" src="/img/0.gif" border="0"><br><img width="100" height="6" src="/img/0.gif" border="0"><br> <div class="main-lead" align="justify"><div class="main-lead" align="justify">Âåñíîé íûíåøíåãî ãîäà êîðîëü ðèìåéêîâ íàäóìàë Âåñíîé íûíåøíåãî ãîäà êîðîëü ðèìåéêîâ íàäóìàë
ñâèòü ñåáå çàãîðîäíîå ãíåçäî. Ïðàâäà, óäîâîëüñòâèå ýòî, ïî ïîäñ÷åòàì Ôèëèïïà ñâèòü ñåáå çàãîðîäíîå ãíåçäî. Ïðàâäà, óäîâîëüñòâèå ýòî, ïî ïîäñ÷åòàì Ôèëèïïà Êèðêîðîâà, îêàçàëîñü âåñüìà äîðîãîñòîÿùèì. Ïîýòîìó ïåâåö ðåøèë âçÿòü èïîòå÷íûé Êèðêîðîâà, îêàçàëîñü âåñüìà äîðîãîñòîÿùèì. Ïîýòîìó ïåâåö ðåøèë âçÿòü èïîòå÷íûé êðåäèòêðåäèò. </div>. </div>
</td></td> </tr></tr></table></table>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6262
Encoding (Cyrillic)Encoding (Cyrillic)
The reason is that incorrect encoding is The reason is that incorrect encoding is specified or texts with different specified or texts with different encodings are inserted. encodings are inserted.
We have to specify correct encoding We have to specify correct encoding /charset in order to view the site (if we /charset in order to view the site (if we desire ;))desire ;))
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6363
Encoding (Cyrillic)Encoding (Cyrillic)
Other encodings are KOI8-R, Other encodings are KOI8-R, Cyrillic-ISO, Cyrillic-DOS.Cyrillic-ISO, Cyrillic-DOS.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6464
Encoding – specifying the languageEncoding – specifying the language
Besides specification of encoding page Besides specification of encoding page language can also be specified. This language can also be specified. This may be used for rendering control, in may be used for rendering control, in situations like:situations like:Assisting search enginesAssisting search enginesAssisting speech synthesizersAssisting speech synthesizersAssisting spell checkers and grammar Assisting spell checkers and grammar checkerscheckers
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6565
Encoding – specifying the languageEncoding – specifying the language
Language attribute can be specified for any HTML Language attribute can be specified for any HTML element. For example, consider following code element. For example, consider following code (you may type it in your browser\editor):(you may type it in your browser\editor):
<HTML><HEAD></HEAD><BODY><HTML><HEAD></HEAD><BODY><P><Q lang=“en”>Her superpowers were the <P><Q lang=“en”>Her superpowers were the
result of γ-radiation,</Q> he explained. result of γ-radiation,</Q> he explained. <P><P>
</BODY></HTML></BODY></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6666
Encoding – specifying the languageEncoding – specifying the language
Format for specifying Language attribute:Format for specifying Language attribute:Language-code = primary-code (“-” Language-code = primary-code (“-”
subcode)subcode)
Examples:Examples:““en” – Englishen” – English““en-US” US version of Englishen-US” US version of English““i-navajo”: the Navajo languagei-navajo”: the Navajo language
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6767
Encoding – specifying the languageEncoding – specifying the language
Examples continued:Examples continued:fr (French), de (German), it (Italian), nl fr (French), de (German), it (Italian), nl
(Dutch), el (Greek), es (Spanish), pt (Dutch), el (Greek), es (Spanish), pt (Portuguese), ar (Arabic), he (Hebrew), ru (Portuguese), ar (Arabic), he (Hebrew), ru (Russian), zh (Chinese), ja (Japanese), hi (Russian), zh (Chinese), ja (Japanese), hi (Hindi), ur (Urdu), and sa (Sanskrit) (Hindi), ur (Urdu), and sa (Sanskrit)
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6868
Encoding – specifying the languageEncoding – specifying the language
<HTML lang="fr"> <HTML lang="fr"> <HEAD> <HEAD> <TITLE>Un document multilingue</TITLE> <TITLE>Un document multilingue</TITLE> </HEAD> </HEAD> <BODY> <BODY> ...Interpreted as French......Interpreted as French... <P <P
lang="es">lang="es">...Interpreted as Spanish......Interpreted as Spanish... <P> <P>...Interpreted ...Interpreted as French again...as French again... <P> <P>...French text interrupted by...French text interrupted by<EM <EM lang="ja">some Japanese</EM>lang="ja">some Japanese</EM>French begins here French begins here again...again...
</BODY> </BODY> </HTML> </HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
6969
More HTMLMore HTML
Topics covered and to be covered:Topics covered and to be covered:
More tags More tags Display of special characters in HTMLDisplay of special characters in HTML Different page encodingsDifferent page encodings Meta tagsMeta tags Mailto URLMailto URL AnchorsAnchors
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7070
AnchorsAnchors
Hyperlinks are for linking two Hyperlinks are for linking two different documents.different documents.
Anchors are for creating links Anchors are for creating links within same document.within same document.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7171
AnchorsAnchors
See examples atSee examples athttp://www.w3schools.com/html/tryit.asp?http://www.w3schools.com/html/tryit.asp?
filename=tryhtml_link_locationsfilename=tryhtml_link_locations
http://www.caltrain.org/timetable.htmlhttp://www.caltrain.org/timetable.html
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7272
AnchorsAnchors
How to create an anchor:How to create an anchor:
1.1. Create a hyperlink:Create a hyperlink:
<A HREF = “#A”>Anchor</A><A HREF = “#A”>Anchor</A>2. Assign name to the element:2. Assign name to the element:
<A NAME=“A”>Anchors in nutshell</A><A NAME=“A”>Anchors in nutshell</A>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7373
HTML editorsHTML editors
More or less comprehensive More or less comprehensive list is given at:list is given at:
http://en.wikipedia.org/wiki/HTML_editorhttp://en.wikipedia.org/wiki/HTML_editor
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7474
Testing HTML code and Web siteTesting HTML code and Web site
1.1. HTML source code HTML source code verification.verification.
This might include HTML source code errors This might include HTML source code errors and optimization of page performanceand optimization of page performance
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7575
Testing HTML code and Web siteTesting HTML code and Web site
1.1. HTML source code HTML source code verification.verification.
2.2. Hypertext link validationHypertext link validation
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7676
Testing HTML code and Web siteTesting HTML code and Web site
1.1. HTML source code HTML source code verification.verification.
2.2. Hypertext link validationHypertext link validation3.3. Outstanding Web pages. May Outstanding Web pages. May
serve as a good example to serve as a good example to follow.follow.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7777
Testing HTML code and Web siteTesting HTML code and Web site
1.1. HTML source code verification.HTML source code verification.
2.2. Hypertext link validationHypertext link validation
3.3. Outstanding Web pages.Outstanding Web pages.
4.4. Get help from Get help from developers/webmastersdevelopers/webmasters
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7878
Testing HTML code and Web siteTesting HTML code and Web site
1.1. HTML source code validation.HTML source code validation.
Use online validators likeUse online validators likehttp://validator.w3.org/http://validator.w3.org/
List of validators:List of validators:
http://www.flfsoft.com/html/http://www.flfsoft.com/html/html_validators.htmlhtml_validators.html
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
7979
Testing HTML code and Web siteTesting HTML code and Web site
1.1. HTML source code validation.HTML source code validation.
Use online validators likeUse online validators likehttp://validator.w3.org/http://validator.w3.org/
List of validators:List of validators:
http://www.flfsoft.com/html/http://www.flfsoft.com/html/html_validators.htmlhtml_validators.html
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8080
Style sheets and HTMLStyle sheets and HTML
Problems web developers face with time:Problems web developers face with time:
Using proprietary HTML extensions Using proprietary HTML extensions
Converting text into images Converting text into images
Using images for white space control Using images for white space control
Use of tables for page layout Use of tables for page layout
Writing a program instead of using HTML Writing a program instead of using HTML
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8181
Style sheets and HTMLStyle sheets and HTML
To demonstrate use of style sheets please To demonstrate use of style sheets please Open NotePadOpen NotePad Type code:Type code:
P.special { P.special {
color : green; border: solid red; color : green; border: solid red;
} }
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8282
Style sheets and HTMLStyle sheets and HTML
3. Create a folder C:\HTMLClass3. Create a folder C:\HTMLClass
4. Save document as C:\HTMLClass\4. Save document as C:\HTMLClass\special.cssspecial.css
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8383
Style sheets and HTMLStyle sheets and HTML
Open NotePad, type following HTML code in it and Open NotePad, type following HTML code in it and save as C:\HTMLClass\Test2.html:save as C:\HTMLClass\Test2.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <LINK href="special.css" <HTML> <HEAD> <LINK href="special.css" rel="stylesheet" type="text/css"> </HEAD> rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="special">This paragraph <BODY> <P class="special">This paragraph should have special green text. </BODY> should have special green text. </BODY> </HTML> </HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8484
Style sheets and HTMLStyle sheets and HTML
Open Test2.html and observe how Open Test2.html and observe how paragraph looks.paragraph looks.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8585
Style sheets and HTMLStyle sheets and HTML
Styles can be defined within HTML tags as Styles can be defined within HTML tags as well, e.g.:well, e.g.:
<P style="font-size: 12pt; color: red">This <P style="font-size: 12pt; color: red">This text shall appear in red text shall appear in red
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8686
Style FormatStyle Format
Property declarations shall be in form “name Property declarations shall be in form “name : value”, properties are separated by : value”, properties are separated by semi-colon. semi-colon.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8787
Style Format. ExampleStyle Format. Example
<HTML><HTML>
<HEAD> <HEAD>
<STYLE type="text/css"> H1 {border-width: 1; <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> border: solid; text-align: center} </STYLE>
</HEAD></HEAD>
<BODY><H1>Some text here</H1><BODY><H1>Some text here</H1>
</BODY></BODY>
</HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8888
Style Format. ExampleStyle Format. Example
We can apply setting to specific headers also! Try this We can apply setting to specific headers also! Try this code:code:
<HTML><HTML><HEAD><HEAD> <STYLE type="text/css"> H1.myclass {border-width: 1; <STYLE type="text/css"> H1.myclass {border-width: 1;
border: solid; text-align: center} </STYLE> border: solid; text-align: center} </STYLE> </HEAD> </HEAD> <BODY> <H1 class="myclass"> This H1 is affected by our <BODY> <H1 class="myclass"> This H1 is affected by our
style </H1>style </H1> <H1> This one is not affected by our style </H1><H1> This one is not affected by our style </H1> </BODY></BODY></HTML> </HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
8989
ExerciseExercise
http://www.resume-help.org/banking_executive_resume_example.htmhttp://www.resume-help.org/banking_executive_resume_example.htm
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9090
FramesFrames
Frames are independent and ususally Frames are independent and ususally scrollable windows tha tile together scrollable windows tha tile together to break up and organize a display to break up and organize a display so it is not only more visually so it is not only more visually appealing but also easier to work appealing but also easier to work with.with.
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9191
Frames.Frames.
Create following file header.html:Create following file header.html:
<HTML><HTML>
<HEAD></HEAD><HEAD></HEAD>
<BODY><BODY>
<H1>This is header</H1><H1>This is header</H1>
</BODY></BODY>
</HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9292
Frames.Frames.
Create following file label.html:Create following file label.html:
<HTML><HTML>
<HEAD></HEAD><HEAD></HEAD>
<BODY><BODY>
<H4>This is left part</H4><H4>This is left part</H4>
</BODY></BODY>
</HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9393
Frames.Frames.
Create following file info.html:Create following file info.html:
<HTML><HTML>
<HEAD></HEAD><HEAD></HEAD>
<BODY><BODY>
<H4>This is some information</H4><H4>This is some information</H4>
</BODY></BODY>
</HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9494
Frames.Frames.
Create following file footer.html:Create following file footer.html:
<HTML><HTML>
<HEAD></HEAD><HEAD></HEAD>
<BODY><BODY>
<I>This is footer</I><I>This is footer</I>
</BODY></BODY>
</HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9595
Frames. Part 1 of 2.Frames. Part 1 of 2.
<HTML><HTML>
<HEAD></HEAD><HEAD></HEAD>
<FRAMESET ROWS = “25%, 50%, 25%”><FRAMESET ROWS = “25%, 50%, 25%”>
<FRAME SRC=“header.html”><FRAME SRC=“header.html”>
<FRAMESET COLS = “25%, 75%”><FRAMESET COLS = “25%, 75%”>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9696
Frames. Part 2 of 2.Frames. Part 2 of 2.
<FRAME SRC=“label.html”><FRAME SRC=“label.html”></FRAMESET></FRAMESET><FRAME SRC=“info.html”><FRAME SRC=“info.html”></FRAMESET></FRAMESET><FRAME SRC=“footer.html”><FRAME SRC=“footer.html”></FRAMESET></FRAMESET></HTML></HTML>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9797
Frames. Frames.
For browsers not supporting frames use For browsers not supporting frames use following syntax:following syntax:
<NOFRAMES><NOFRAMES>
……HTML code here…HTML code here…
</NOFRAMES></NOFRAMES>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9898
HTMLHTML
</END></END>
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
9999
HTMLHTML
http://www.scopesys.com/http://www.scopesys.com/http://www.tradeshop.com/master/custom.shtmlhttp://www.tradeshop.com/master/custom.shtml
http://www.mewspage.pwp.blueyonder.co.ukhttp://www.mewspage.pwp.blueyonder.co.uk//http://www.un.org/events/workshop/dpi-unitar/http://www.un.org/events/workshop/dpi-unitar/
2003/dreamweaver/pagesamples/badsites.htm2003/dreamweaver/pagesamples/badsites.htm
David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.
100100
Background ImageBackground Image
http://www.psoug.org/reference/http://www.psoug.org/reference/collections.htmlcollections.html