SlideShare a Scribd company logo

Html part2

Download as PPT, PDF
S
suba_sqa

HTML is a language used to describe text on web pages. It uses tags to format and lay out text, images, and other content. Some key tags include <HTML> and </HTML> to define an HTML document, <HEAD> and </HEAD> for metadata, and <BODY> and </BODY> to contain the visible page content. The document is saved with a .html or .htm file extension. HTML allows adding formatting, hyperlinks, tables, images and other enhancements to make the page more informative and visually appealing. Proper encoding must be specified so non-Latin characters display correctly across different browsers and platforms.

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

More Related Content

What's hot (16)

PPT
Intro to html
anshuman rahi
 
PPTX
Html basic tags
umesh patil
 
PPT
Html Ppt
vijayanit
 
PPTX
Html
Lincoln School
 
PPT
Introduction to HTML
MayaLisa
 
ODP
Html
irshadahamed
 
ODP
Html intro
kalaivani.g
 
PPT
Html Presentation Of Web Page Making
Sandeep Supal
 
PPTX
Cse html ppt
Mahantesh Hiremath
 
PDF
Html - Tutorial
adelaticleanu
 
PPT
Html ppt
Iblesoft
 
PPT
Html ppt
Sanmuga Nathan
 
PPT
AK html
gauravashq
 
DOCX
CLASS VII COMPUTERS HTML
Rc Os
 
PPT
Intro To HTML
Building Family Counseling
 
ODP
Prabu html
Prabu Cse
 
Intro to html
anshuman rahi
 
Html basic tags
umesh patil
 
Html Ppt
vijayanit
 
Html
Lincoln School
 
Introduction to HTML
MayaLisa
 
Html
irshadahamed
 
Html intro
kalaivani.g
 
Html Presentation Of Web Page Making
Sandeep Supal
 
Cse html ppt
Mahantesh Hiremath
 
Html - Tutorial
adelaticleanu
 
Html ppt
Iblesoft
 
Html ppt
Sanmuga Nathan
 
AK html
gauravashq
 
CLASS VII COMPUTERS HTML
Rc Os
 
Intro To HTML
Building Family Counseling
 
Prabu html
Prabu Cse
 

Similar to Html part2 (20)

PPT
HTML & CSS
jlinabary
 
PPS
Lecture1
Ahmed Abozeed
 
PDF
Class 1 handout (2) html exercises
Erin M. Kidwell
 
PPT
Html
charu gupta
 
PPTX
week 3 slides.pptx
AyeshaMirza24
 
PPTX
HTML
CHANDERPRABHU JAIN COLLEGE OF HIGHER STUDIES & SCHOOL OF LAW
 
PPT
Html Ppt
Sanmuga Nathan
 
PPT
Hyper text markup language with examples
matiasbahiru1
 
PPT
Html basic
Charitha Bandara
 
ODP
Tags in html
Balakumaran Arunachalam
 
PPT
Xhtml Part1
nleesite
 
ODP
Htmltag.ppt
MAGNA COLLEGE OF ENGINEERING
 
PPT
Castro Chapter 4
Jeff Byrnes
 
PPT
Diva
diva23
 
PDF
Basic Html Notes
NextGenr
 
PDF
Notes4
Denise Garofalo
 
PPT
Intro to html
anshuman rahi
 
PPT
Internship HTML_Day-1 for beggineers.ppt
testvarun21
 
PPT
Html TAGS
Pranil Dukare
 
DOC
Html introduction
vishnu murthy
 
HTML & CSS
jlinabary
 
Lecture1
Ahmed Abozeed
 
Class 1 handout (2) html exercises
Erin M. Kidwell
 
Html
charu gupta
 
week 3 slides.pptx
AyeshaMirza24
 
HTML
CHANDERPRABHU JAIN COLLEGE OF HIGHER STUDIES & SCHOOL OF LAW
 
Html Ppt
Sanmuga Nathan
 
Hyper text markup language with examples
matiasbahiru1
 
Html basic
Charitha Bandara
 
Tags in html
Balakumaran Arunachalam
 
Xhtml Part1
nleesite
 
Htmltag.ppt
MAGNA COLLEGE OF ENGINEERING
 
Castro Chapter 4
Jeff Byrnes
 
Diva
diva23
 
Basic Html Notes
NextGenr
 
Notes4
Denise Garofalo
 
Intro to html
anshuman rahi
 
Internship HTML_Day-1 for beggineers.ppt
testvarun21
 
Html TAGS
Pranil Dukare
 
Html introduction
vishnu murthy
 
Ad

More from suba_sqa (6)

PDF
Rajaperigai 01
suba_sqa
 
PPT
Html part2 (1)
suba_sqa
 
ZIP
Alphabets ppt
suba_sqa
 
ODS
Searchbox test cases
suba_sqa
 
ODS
Print luna
suba_sqa
 
ODS
Print luna
suba_sqa
 
Rajaperigai 01
suba_sqa
 
Html part2 (1)
suba_sqa
 
Alphabets ppt
suba_sqa
 
Searchbox test cases
suba_sqa
 
Print luna
suba_sqa
 
Print luna
suba_sqa
 
Ad

Recently uploaded (20)

PDF
Presentation - Vibe Coding The Future of Tech
yanuarsinggih1
 
PDF
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PDF
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
PDF
Timothy Rottach - Ramp up on AI Use Cases, from Vector Search to AI Agents wi...
AWS Chicago
 
PDF
CIFDAQ Weekly Market Wrap for 11th July 2025
CIFDAQ
 
PDF
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
PDF
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
PDF
HubSpot Main Hub: A Unified Growth Platform
Jaswinder Singh
 
PDF
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PDF
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
PDF
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
PDF
Blockchain Transactions Explained For Everyone
CIFDAQ
 
Presentation - Vibe Coding The Future of Tech
yanuarsinggih1
 
From Code to Challenge: Crafting Skill-Based Games That Engage and Reward
aiyshauae
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
Timothy Rottach - Ramp up on AI Use Cases, from Vector Search to AI Agents wi...
AWS Chicago
 
CIFDAQ Weekly Market Wrap for 11th July 2025
CIFDAQ
 
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
HubSpot Main Hub: A Unified Growth Platform
Jaswinder Singh
 
HCIP-Data Center Facility Deployment V2.0 Training Material (Without Remarks ...
mcastillo49
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
Using FME to Develop Self-Service CAD Applications for a Major UK Police Force
Safe Software
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
Fl Studio 24.2.2 Build 4597 Crack for Windows Free Download 2025
faizk77g
 
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
Blockchain Transactions Explained For Everyone
CIFDAQ
 

Html part2

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