Html part2

David Shtern, © 2007, All Rights ReserDavid Shtern, © 2007, All Rights Reserved.ved.

11

HTMLHTML

Part 2Part 2


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.


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>


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>


55


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”.


66


• 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…>


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>


88


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.


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


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>


1111


Save document:Save document:


1212


Open saved document Test.html:Open saved document Test.html:


1313


<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.


1414


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.


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>


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>


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>


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


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>


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.


2121


META attributes are HTTP-EQUIV, NAME META attributes are HTTP-EQUIV, NAME and CONTENT.and CONTENT.


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" />


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”>


2424


Why META element is important? Why META element is important?


2525


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.


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


2727


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:[email protected]?subject=Mail from your blog <a href="mailto:[email protected]?subject=Mail from your blog

fan">Send me a mail</a>fan">Send me a mail</a></BODY></BODY></HTML></HTML>


2828


You shall get the following:You shall get the following:


2929


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


3030

mailto URLmailto URLSimple mailto: Simple mailto: – <a href="mailto:[email protected]"> <a href="mailto:[email protected]">

Multiple recepients:Multiple recepients:

– <a href="mailto:[email protected]<a href="mailto:[email protected], [email protected], [email protected]">">

Mailto with subject line: Mailto with subject line:

– <a href=" <a href=" mailto:[email protected]:[email protected]?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:[email protected]?subject=Mailmailto:[email protected]?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:[email protected]?mailto:[email protected]?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.


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


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


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>


3434

Input text exampleInput text example

Result:Result:


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?


3636


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 $ - _ . +


3737


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.


3838


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:


3939


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


4040


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?


4141


Case of special symbols, like ©, ®, ¢, ß Case of special symbols, like ©, ®, ¢, ß


4242


Microsoft Windows Character SetMicrosoft Windows Character Set


4343


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) - ±±


4444


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 (¢) - ¢


4545


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!


4646


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>


4747


The output we see on PC machines The output we see on PC machines (Windows):(Windows):


4848


The output we would see on McIntosh The output we would see on McIntosh machines:machines:


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.


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.


5151

ISO 8859-1 (Latin-1)ISO 8859-1 (Latin-1)


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.


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


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.


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.


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


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.


5858

Encoding (Cyrillic)Encoding (Cyrillic)

Общая характеристикаОбщая характеристикаБаба-Яга живёт в лесу, в Баба-Яга живёт в лесу, в избушкеизбушке нана курьихкурьих ножкахножках, иногда окружённой , иногда окружённой

частоколом из человеческих костей. Часто в доме Бабы-Яги находится частоколом из человеческих костей. Часто в доме Бабы-Яги находится Кот, являющийся охранником и советчиком. Иногда эту функцию Кот, являющийся охранником и советчиком. Иногда эту функцию выполняет мышь.выполняет мышь.

Основной способ передвижения — полёт (или поездка) в Основной способ передвижения — полёт (или поездка) в ступеступе, цитаты: , цитаты: «Баба-Яга, костяная нога в ступе едет, «Баба-Яга, костяная нога в ступе едет, пестомпестом погоняет, погоняет, помеломпомелом след след заметает». Также, у заметает». Также, у ПушкинаПушкина: «Там ступа с Бабою-Ягой идёт-бредёт : «Там ступа с Бабою-Ягой идёт-бредёт сама собой»сама собой»

Баба-Яга — неоднозначный персонаж, чаще всего она отрицательная Баба-Яга — неоднозначный персонаж, чаще всего она отрицательная героиня, но иногда помогает (даже по доброй воле) положительным героиня, но иногда помогает (даже по доброй воле) положительным героям. Баба-Яга — обладательница огня (сказка «Василиса героям. Баба-Яга — обладательница огня (сказка «Василиса Прекрасная»), золотых яблок (сказка «Гуси-Лебеди») или знания, Прекрасная»), золотых яблок (сказка «Гуси-Лебеди») или знания, помогающего главному герою одолеть своего противника (сказка помогающего главному герою одолеть своего противника (сказка «Лягушка-Царевна»).«Лягушка-Царевна»).

В В 20042004 году «родиной Бабы-Яги» было объявлено село году «родиной Бабы-Яги» было объявлено село КукобойКукобой в в ЯрославскойЯрославской областиобласти..


5959


If incorrect encoding is used previously mentioned text may lok like:If incorrect encoding is used previously mentioned text may lok like:

Р‘Р°Р±Р°-РЇРіР° Р¶РёРІС‘С‚ РІ Р»РµСЃСѓ, РІ Р‘Р°Р±Р°-РЇРіР° Р¶РёРІС‘С‚ РІ Р»РµСЃСѓ, РІ РёР·Р±СѓС€РєРРёР·Р±СѓС€РєРµ РЅР° µ РЅР° РєСѓСЂСЊРёСРєСѓСЂСЊРёС… … РЅРѕР¶РєР°СРЅРѕР¶РєР°С……, , РёРЅРѕРіРґР° РѕРєСЂСѓР¶С‘РЅРЅРѕР№ С‡Р°СЃС‚РѕРєРѕР»РѕРј РёР· С‡РµР»РѕРІРµС‡РµСЃРєРёС… РёРЅРѕРіРґР° РѕРєСЂСѓР¶С‘РЅРЅРѕР№ С‡Р°СЃС‚РѕРєРѕР»РѕРј РёР· С‡РµР»РѕРІРµС‡РµСЃРєРёС… РєРѕСЃС‚РµР№. Р§Р°СЃС‚Рѕ РІ РґРѕРјРµ Р‘Р°Р±С‹-РЇРіРё РЅР°С…РѕРґРёС‚СЃСЏ РљРѕС‚, РєРѕСЃС‚РµР№. Р§Р°СЃС‚Рѕ РІ РґРѕРјРµ Р‘Р°Р±С‹-РЇРіРё РЅР°С…РѕРґРёС‚СЃСЏ РљРѕС‚, СЏРІР»СЏСЋС‰РёР№СЃСЏ РѕС…СЂР°РЅРЅРёРєРѕРј Рё СЃРѕРІРµС‚С‡РёРєРѕРј. РРЅРѕРіРґР° СЌС‚Сѓ �СЏРІР»СЏСЋС‰РёР№СЃСЏ РѕС…СЂР°РЅРЅРёРєРѕРј Рё СЃРѕРІРµС‚С‡РёРєРѕРј. РРЅРѕРіРґР° СЌС‚Сѓ �С„СѓРЅРєС†РёСЋ РІС‹РїРѕР»РЅСЏРµС‚ РјС‹С€СЊ.С„СѓРЅРєС†РёСЋ РІС‹РїРѕР»РЅСЏРµС‚ РјС‹С€СЊ.

РћСЃРЅРѕРІРЅРѕР№ СЃРїРѕСЃРѕР± РїРµСЂРµРґРІРёР¶РµРЅРёСЏ вЂ” РїРѕР»С‘С‚ (РёР»Рё РїРѕРµР·РґРєР°) РћСЃРЅРѕРІРЅРѕР№ СЃРїРѕСЃРѕР± РїРµСЂРµРґРІРёР¶РµРЅРёСЏ вЂ” РїРѕР»С‘С‚ (РёР»Рё РїРѕРµР·РґРєР°) РІ РІ СЃС‚СѓРїРСЃС‚СѓРїРµµ, С†РёС‚Р°С‚С‹: В«Р‘Р°Р±Р°-РЇРіР°, РєРѕСЃС‚СЏРЅР°СЏ РЅРѕРіР° РІ СЃС‚СѓРїРµ РµРґРµС‚, , С†РёС‚Р°С‚С‹: В«Р‘Р°Р±Р°-РЇРіР°, РєРѕСЃС‚СЏРЅР°СЏ РЅРѕРіР° РІ СЃС‚СѓРїРµ РµРґРµС‚, РїРµСЃС‚РѕРјРїРµСЃС‚РѕРј РїРѕРіРѕРЅСЏРµС‚, РїРѕРіРѕРЅСЏРµС‚, РїРѕРјРµР»РѕРјРїРѕРјРµР»РѕРј СЃР»РµРґ Р·Р°РјРµС‚Р°РµС‚В». РўР°РєР¶Рµ, Сѓ СЃР»РµРґ Р·Р°РјРµС‚Р°РµС‚В». РўР°РєР¶Рµ, Сѓ РџСѓС€РєРёРЅРРџСѓС€РєРёРЅР°°: В«РўР°Рј СЃС‚СѓРїР° СЃ Р‘Р°Р±РѕСЋ-РЇРіРѕР№ РёРґС‘С‚-Р±СЂРµРґС‘С‚ СЃР°РјР° : В«РўР°Рј СЃС‚СѓРїР° СЃ Р‘Р°Р±РѕСЋ-РЇРіРѕР№ РёРґС‘С‚-Р±СЂРµРґС‘С‚ СЃР°РјР° СЃРѕР±РѕР№В»СЃРѕР±РѕР№В»

Р‘Р°Р±Р°-РЇРіР° вЂ” РЅРµРѕРґРЅРѕР·РЅР°С‡РЅС‹Р№ РїРµСЂСЃРѕРЅР°Р¶, С‡Р°С‰Рµ РІСЃРµРіРѕ РѕРЅР° Р‘Р°Р±Р°-РЇРіР° вЂ” РЅРµРѕРґРЅРѕР·РЅР°С‡РЅС‹Р№ РїРµСЂСЃРѕРЅР°Р¶, С‡Р°С‰Рµ РІСЃРµРіРѕ РѕРЅР° РѕС‚СЂРёС†Р°С‚РµР»СЊРЅР°СЏ РіРµСЂРѕРёРЅСЏ, РЅРѕ РёРЅРѕРіРґР° РїРѕРјРѕРіР°РµС‚ (РґР°Р¶Рµ РѕС‚СЂРёС†Р°С‚РµР»СЊРЅР°СЏ РіРµСЂРѕРёРЅСЏ, РЅРѕ РёРЅРѕРіРґР° РїРѕРјРѕРіР°РµС‚ (РґР°Р¶Рµ РїРѕ РґРѕР±СЂРѕР№ РІРѕР»Рµ) РїРѕР»РѕР¶РёС‚РµР»СЊРЅС‹Рј РіРµСЂРѕСЏРј. Р‘Р°Р±Р°-РЇРіР° вЂ” РїРѕ РґРѕР±СЂРѕР№ РІРѕР»Рµ) РїРѕР»РѕР¶РёС‚РµР»СЊРЅС‹Рј РіРµСЂРѕСЏРј. Р‘Р°Р±Р°-РЇРіР° вЂ” РѕР±Р»Р°РґР°С‚РµР»СЊРЅРёС†Р° РѕРіРЅСЏ (СЃРєР°Р·РєР° В«Р’Р°СЃРёР»РёСЃР° РѕР±Р»Р°РґР°С‚РµР»СЊРЅРёС†Р° РѕРіРЅСЏ (СЃРєР°Р·РєР° В«Р’Р°СЃРёР»РёСЃР° РџСЂРµРєСЂР°СЃРЅР°СЏВ»), Р·РѕР»РѕС‚С‹С… СЏР±Р»РѕРє (СЃРєР°Р·РєР° В«Р“СѓСЃРё-РџСЂРµРєСЂР°СЃРЅР°СЏВ»), Р·РѕР»РѕС‚С‹С… СЏР±Р»РѕРє (СЃРєР°Р·РєР° В«Р“СѓСЃРё-Р›РµР±РµРґРёВ») РёР»Рё Р·РЅР°РЅРёСЏ, РїРѕРјРѕРіР°СЋС‰РµРіРѕ РіР»Р°РІРЅРѕРјСѓ РіРµСЂРѕСЋ Р›РµР±РµРґРёВ») РёР»Рё Р·РЅР°РЅРёСЏ, РїРѕРјРѕРіР°СЋС‰РµРіРѕ РіР»Р°РІРЅРѕРјСѓ РіРµСЂРѕСЋ РѕРґРѕР»РµС‚СЊ СЃРІРѕРµРіРѕ РїСЂРѕС‚РёРІРЅРёРєР° (СЃРєР°Р·РєР° В«Р›СЏРіСѓС€РєР°-РѕРґРѕР»РµС‚СЊ СЃРІРѕРµРіРѕ РїСЂРѕС‚РёРІРЅРёРєР° (СЃРєР°Р·РєР° В«Р›СЏРіСѓС€РєР°-Р¦Р°СЂРµРІРЅР°В»).Р¦Р°СЂРµРІРЅР°В»).

Р’ Р’ 20042004 РіРѕРґСѓ В«СЂРѕРґРёРЅРѕР№ Р‘Р°Р±С‹-РЇРіРёВ» Р±С‹Р»Рѕ РѕР±СЉСЏРІР»РµРЅРѕ СЃРµР»Рѕ РіРѕРґСѓ В«СЂРѕРґРёРЅРѕР№ Р‘Р°Р±С‹-РЇРіРёВ» Р±С‹Р»Рѕ РѕР±СЉСЏРІР»РµРЅРѕ СЃРµР»Рѕ РљСѓРєРѕР±РѕРРљСѓРєРѕР±РѕР№№ РІ РІ РЇСЂРѕСЃР»Р°РІСЃРєРѕРРЇСЂРѕСЃР»Р°РІСЃРєРѕР№ № РѕР±Р»Р°СЃС‚РёРѕР±Р»Р°СЃС‚Рё..


6060


Or even like this:Or even like this:

п▒п╟п╠п╟-п╞пЁп╟ п╤п╦п╡я▒я┌ п╡ п╩п╣я│я┐, п╡ п▒п╟п╠п╟-п╞пЁп╟ п╤п╦п╡я▒я┌ п╡ п╩п╣я│я┐, п╡ п╦п╥п╠я┐я┬п╨пп╦п╥п╠я┐я┬п╨п╣ ╣ п╫пп╫п╟ ╟ п╨я┐я─я▄п╦яп╨я┐я─я▄п╦я┘ ┘ п╫п╬п╤п╨п╟яп╫п╬п╤п╨п╟я┘┘, , п╦п╫п╬пЁп╢п╟ п╬п╨я─я┐п╤я▒п╫п╫п╬п╧ я┤п╟я│я┌п╬п╨п╬п╩п╬п╪ п╦п╥ п╦п╫п╬пЁп╢п╟ п╬п╨я─я┐п╤я▒п╫п╫п╬п╧ я┤п╟я│я┌п╬п╨п╬п╩п╬п╪ п╦п╥ я┤п╣п╩п╬п╡п╣я┤п╣я│п╨п╦я┘ п╨п╬я│я┌п╣п╧. п╖п╟я│я┌п╬ п╡ п╢п╬п╪п╣ п▒п╟п╠я▀-п╞пЁп╦ я┤п╣п╩п╬п╡п╣я┤п╣я│п╨п╦я┘ п╨п╬я│я┌п╣п╧. п╖п╟я│я┌п╬ п╡ п╢п╬п╪п╣ п▒п╟п╠я▀-п╞пЁп╦ п╫п╟я┘п╬п╢п╦я┌я│я▐ п п╬я┌, я▐п╡п╩я▐я▌я┴п╦п╧я│я▐ п╬я┘я─п╟п╫п╫п╦п╨п╬п╪ п╦ п╫п╟я┘п╬п╢п╦я┌я│я▐ п п╬я┌, я▐п╡п╩я▐я▌я┴п╦п╧я│я▐ п╬я┘я─п╟п╫п╫п╦п╨п╬п╪ п╦ я│п╬п╡п╣я┌я┤п╦п╨п╬п╪. п≤п╫п╬пЁп╢п╟ я█я┌я┐ я└я┐п╫п╨я├п╦я▌ п╡я▀п©п╬п╩п╫я▐п╣я┌ п╪я▀я┬я▄.я│п╬п╡п╣я┌я┤п╦п╨п╬п╪. п≤п╫п╬пЁп╢п╟ я█я┌я┐ я└я┐п╫п╨я├п╦я▌ п╡я▀п©п╬п╩п╫я▐п╣я┌ п╪я▀я┬я▄.

п·я│п╫п╬п╡п╫п╬п╧ я│п©п╬я│п╬п╠ п©п╣я─п╣п╢п╡п╦п╤п╣п╫п╦я▐ Б─■ п©п╬п╩я▒я┌ (п╦п╩п╦ п·я│п╫п╬п╡п╫п╬п╧ я│п©п╬я│п╬п╠ п©п╣я─п╣п╢п╡п╦п╤п╣п╫п╦я▐ Б─■ п©п╬п╩я▒я┌ (п╦п╩п╦ п©п╬п╣п╥п╢п╨п╟) п╡ я│я┌я┐п©п╣, я├п╦я┌п╟я┌я▀: б╚п▒п╟п╠п╟-п╞пЁп╟, п╨п╬я│я┌я▐п╫п╟я▐ п©п╬п╣п╥п╢п╨п╟) п╡ я│я┌я┐п©п╣, я├п╦я┌п╟я┌я▀: б╚п▒п╟п╠п╟-п╞пЁп╟, п╨п╬я│я┌я▐п╫п╟я▐ п╫п╬пЁп╟ п╡ я│я┌я┐п©п╣ п╣п╢п╣я┌, п©п╣я│я┌п╬п╪ п©п╬пЁп╬п╫я▐п╣я┌, п©п╬п╪п╣п╩п╬п╪ п╫п╬пЁп╟ п╡ я│я┌я┐п©п╣ п╣п╢п╣я┌, п©п╣я│я┌п╬п╪ п©п╬пЁп╬п╫я▐п╣я┌, п©п╬п╪п╣п╩п╬п╪ я│п╩п╣п╢ п╥п╟п╪п╣я┌п╟п╣я┌б╩. п╒п╟п╨п╤п╣, я┐ п÷я┐я┬п╨п╦п╫п╟: б╚п╒п╟п╪ я│я┌я┐п©п╟ я│ я│п╩п╣п╢ п╥п╟п╪п╣я┌п╟п╣я┌б╩. п╒п╟п╨п╤п╣, я┐ п÷я┐я┬п╨п╦п╫п╟: б╚п╒п╟п╪ я│я┌я┐п©п╟ я│ п▒п╟п╠п╬я▌-п╞пЁп╬п╧ п╦п╢я▒я┌-п╠я─п╣п╢я▒я┌ я│п╟п╪п╟ я│п╬п╠п╬п╧б╩п▒п╟п╠п╬я▌-п╞пЁп╬п╧ п╦п╢я▒я┌-п╠я─п╣п╢я▒я┌ я│п╟п╪п╟ я│п╬п╠п╬п╧б╩

п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╫п╣п╬п╢п╫п╬п╥п╫п╟я┤п╫я▀п╧ п©п╣я─я│п╬п╫п╟п╤, я┤п╟я┴п╣ п╡я│п╣пЁп╬ п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╫п╣п╬п╢п╫п╬п╥п╫п╟я┤п╫я▀п╧ п©п╣я─я│п╬п╫п╟п╤, я┤п╟я┴п╣ п╡я│п╣пЁп╬ п╬п╫п╟ п╬я┌я─п╦я├п╟я┌п╣п╩я▄п╫п╟я▐ пЁп╣я─п╬п╦п╫я▐, п╫п╬ п╦п╫п╬пЁп╢п╟ п©п╬п╪п╬пЁп╟п╣я┌ п╬п╫п╟ п╬я┌я─п╦я├п╟я┌п╣п╩я▄п╫п╟я▐ пЁп╣я─п╬п╦п╫я▐, п╫п╬ п╦п╫п╬пЁп╢п╟ п©п╬п╪п╬пЁп╟п╣я┌ (п╢п╟п╤п╣ п©п╬ п╢п╬п╠я─п╬п╧ п╡п╬п╩п╣) п©п╬п╩п╬п╤п╦я┌п╣п╩я▄п╫я▀п╪ пЁп╣я─п╬я▐п╪. (п╢п╟п╤п╣ п©п╬ п╢п╬п╠я─п╬п╧ п╡п╬п╩п╣) п©п╬п╩п╬п╤п╦я┌п╣п╩я▄п╫я▀п╪ пЁп╣я─п╬я▐п╪. п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╬п╠п╩п╟п╢п╟я┌п╣п╩я▄п╫п╦я├п╟ п╬пЁп╫я▐ (я│п╨п╟п╥п╨п╟ п▒п╟п╠п╟-п╞пЁп╟ Б─■ п╬п╠п╩п╟п╢п╟я┌п╣п╩я▄п╫п╦я├п╟ п╬пЁп╫я▐ (я│п╨п╟п╥п╨п╟ б╚п▓п╟я│п╦п╩п╦я│п╟ п÷я─п╣п╨я─п╟я│п╫п╟я▐б╩), п╥п╬п╩п╬я┌я▀я┘ я▐п╠п╩п╬п╨ (я│п╨п╟п╥п╨п╟ б╚п▓п╟я│п╦п╩п╦я│п╟ п÷я─п╣п╨я─п╟я│п╫п╟я▐б╩), п╥п╬п╩п╬я┌я▀я┘ я▐п╠п╩п╬п╨ (я│п╨п╟п╥п╨п╟ б╚п⌠я┐я│п╦-п⌡п╣п╠п╣п╢п╦б╩) п╦п╩п╦ п╥п╫п╟п╫п╦я▐, п©п╬п╪п╬пЁп╟я▌я┴п╣пЁп╬ б╚п⌠я┐я│п╦-п⌡п╣п╠п╣п╢п╦б╩) п╦п╩п╦ п╥п╫п╟п╫п╦я▐, п©п╬п╪п╬пЁп╟я▌я┴п╣пЁп╬ пЁп╩п╟п╡п╫п╬п╪я┐ пЁп╣я─п╬я▌ п╬п╢п╬п╩п╣я┌я▄ я│п╡п╬п╣пЁп╬ п©я─п╬я┌п╦п╡п╫п╦п╨п╟ пЁп╩п╟п╡п╫п╬п╪я┐ пЁп╣я─п╬я▌ п╬п╢п╬п╩п╣я┌я▄ я│п╡п╬п╣пЁп╬ п©я─п╬я┌п╦п╡п╫п╦п╨п╟ (я│п╨п╟п╥п╨п╟ б╚п⌡я▐пЁя┐я┬п╨п╟-п╕п╟я─п╣п╡п╫п╟б╩).(я│п╨п╟п╥п╨п╟ б╚п⌡я▐пЁя┐я┬п╨п╟-п╕п╟я─п╣п╡п╫п╟б╩).

п▓ 2004 пЁп╬п╢я┐ б╚я─п╬п╢п╦п╫п╬п╧ п▒п╟п╠я▀-п╞пЁп╦б╩ п╠я▀п╩п╬ п╬п╠я┼я▐п╡п╩п╣п╫п╬ я│п╣п╩п╬ п▓ 2004 пЁп╬п╢я┐ б╚я─п╬п╢п╦п╫п╬п╧ п▒п╟п╠я▀-п╞пЁп╦б╩ п╠я▀п╩п╬ п╬п╠я┼я▐п╡п╩п╣п╫п╬ я│п╣п╩п╬ п я┐п╨п╬п╠п╬п╧ п╡ п╞я─п╬я│п╩п╟п╡я│п╨п╬п╧ п╬п╠п╩п╟я│я┌п╦.п я┐п╨п╬п╠п╬п╧ п╡ п╞я─п╬я│п╩п╟п╡я│п╨п╬п╧ п╬п╠п╩п╟я│я┌п╦.


6161


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>


6262


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 ;))


6363


Other encodings are KOI8-R, Other encodings are KOI8-R, Cyrillic-ISO, Cyrillic-DOS.Cyrillic-ISO, Cyrillic-DOS.


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


6565


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>


6666


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


6767


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)


6868


<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>


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


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.


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


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>


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


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


7575



2.2. Hypertext link validationHypertext link validation


7676



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.


7777


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


7878


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


7979


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


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


8181


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;

} }


8282


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


8383


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>


8484


Open Test2.html and observe how Open Test2.html and observe how paragraph looks.paragraph looks.


8585


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


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.


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>


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>


8989

ExerciseExercise

http://www.resume-help.org/banking_executive_resume_example.htmhttp://www.resume-help.org/banking_executive_resume_example.htm


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.


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>


9292

Frames.Frames.

Create following file label.html:Create following file label.html:

<HTML><HTML>


<BODY><BODY>

<H4>This is left part</H4><H4>This is left part</H4>

</BODY></BODY>

</HTML></HTML>


9393

Frames.Frames.

Create following file info.html:Create following file info.html:

<HTML><HTML>


<BODY><BODY>

<H4>This is some information</H4><H4>This is some information</H4>

</BODY></BODY>

</HTML></HTML>


9494

Frames.Frames.

Create following file footer.html:Create following file footer.html:

<HTML><HTML>


<BODY><BODY>

<I>This is footer</I><I>This is footer</I>

</BODY></BODY>

</HTML></HTML>


9595

Frames. Part 1 of 2.Frames. Part 1 of 2.

<HTML><HTML>


<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%”>


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>


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>


9898

HTMLHTML

</END></END>


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


100100

Background ImageBackground Image

http://www.psoug.org/reference/http://www.psoug.org/reference/collections.htmlcollections.html

Html part2

Technology

Transcript of Html part2