Abstract image of a woman sitting on books and studying on a laptop

Html part2 (1)

Download as PPT, PDF
S
suba_sqa

HTML is a language for describing text using tags. Some tags like <HTML>, <BODY>, and </HTML> are required, while others like <BR> and <HR> are optional. Tags often come in pairs to delineate sections, and HTML documents typically contain tags that divide the document into a head and body section. The document discusses several common tags and their purposes, such as setting text formatting, creating paragraphs and tables, adding hyperlinks and images. It also notes that HTML documents may appear differently in different browsers since HTML only describes text and not layout.

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

ODP
Htmltag.ppt
anandha ganesh
 
PPT
Html tag
NIRMAL FELIX
 
PPT
Html
Kavi Bharathi R
 
PPT
Html Ppt
Hema Prasanth
 
PPT
Learning HTML
Md. Sirajus Salayhin
 
PPT
Understanding THML
Hinopak Motors Limited
 
PPT
HTML Fundamentals
Doncho Minkov
 
PPT
Html text formatting
derekoei
 
Htmltag.ppt
anandha ganesh
 
Html tag
NIRMAL FELIX
 
Html
Kavi Bharathi R
 
Html Ppt
Hema Prasanth
 
Learning HTML
Md. Sirajus Salayhin
 
Understanding THML
Hinopak Motors Limited
 
HTML Fundamentals
Doncho Minkov
 
Html text formatting
derekoei
 

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
 
Ad

Viewers also liked (6)

PPTX
Students with special needs
breannasinclair
 
PDF
Rajaperigai 01
suba_sqa
 
PDF
Pitch Binder 2012
boshtec
 
PPTX
U1 l2 guided practice
williamsdclass
 
PDF
Introduction to PhoneGap
Raymond Camden
 
PPTX
Mobile Apps with PhoneGap and jQuery Mobile
Terry Ryan
 
Students with special needs
breannasinclair
 
Rajaperigai 01
suba_sqa
 
Pitch Binder 2012
boshtec
 
U1 l2 guided practice
williamsdclass
 
Introduction to PhoneGap
Raymond Camden
 
Mobile Apps with PhoneGap and jQuery Mobile
Terry Ryan
 
Ad

Similar to Html part2 (1) (20)

PPT
HTML & CSS
jlinabary
 
PPS
Lecture1
Ahmed Abozeed
 
PDF
Class 1 handout (2) html exercises
Erin M. Kidwell
 
DOCX
HTML project 2.pdf Welcome to this simple HTML-only website dedicated to expl...
PratikLomate1
 
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
 
HTML & CSS
jlinabary
 
Lecture1
Ahmed Abozeed
 
Class 1 handout (2) html exercises
Erin M. Kidwell
 
HTML project 2.pdf Welcome to this simple HTML-only website dedicated to expl...
PratikLomate1
 
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
 

Recently uploaded (20)

PDF
Introduction to c language from lecture slides
sharmatribhuvnesh
 
PPTX
Blending method and technology for hydrogen.pptx
PradipChanda5
 
PDF
EGCB_Solar_Project_Presentation_and Finalcial Analysis.pdf
TaukirIslam
 
PPTX
AQUEEL MUSHTAQUE FAKIH COMPUTER CENTER .
nachanmasarrat13
 
PDF
Addressing the challenges of harmonizing law and artificial intelligence tech...
IAESIJAI
 
PDF
State of AI in Business 2025 - MIT NANDA
Razin Mustafiz
 
PDF
FASHION-DRIVEN TEXTILES AS A CRYSTAL OF A NEW STREAM FOR STAKEHOLDER CAPITALI...
IJMIT JOURNAL
 
PDF
EIS-Webinar-Regulated-Industries-2025-08.pdf
Earley Information Science
 
PPTX
How to use fields_get method in Odoo 18
Celine George
 
PPTX
Slides World Game (s) Great Redesign Eco Economic Epochs.pptx
Steven McGee
 
PDF
Be ready for tomorrow’s needs with a longer-lasting, higher-performing PC
Principled Technologies
 
PDF
ment.tech-Siri Delay Opens AI Startup Opportunity in 2025.pdf
thomasnova26
 
PDF
CCUS-as-the-Missing-Link-to-Net-Zero_AksCurious.pdf
AkarshaSrivastava1
 
PDF
Secure Java Applications against Quantum Threats
Ana-Maria Mihalceanu
 
PDF
Slides World Game (s) Great Redesign Eco Economic Epochs.pdf
Steven McGee
 
PDF
Ebook - The Future of AI A Comprehensive Guide.pdf
baljeethmata
 
PDF
TicketRoot: Event Tech Solutions Deck 2025
TicketRoot
 
PDF
Intravenous drug administration application for pediatric patients via augmen...
IAESIJAI
 
PPTX
Rise of the Digital Control Grid Zeee Media and Hope and Tivon FTWProject.com
hopegirl587
 
PDF
substrate PowerPoint Presentation basic one
jwaite4
 
Introduction to c language from lecture slides
sharmatribhuvnesh
 
Blending method and technology for hydrogen.pptx
PradipChanda5
 
EGCB_Solar_Project_Presentation_and Finalcial Analysis.pdf
TaukirIslam
 
AQUEEL MUSHTAQUE FAKIH COMPUTER CENTER .
nachanmasarrat13
 
Addressing the challenges of harmonizing law and artificial intelligence tech...
IAESIJAI
 
State of AI in Business 2025 - MIT NANDA
Razin Mustafiz
 
FASHION-DRIVEN TEXTILES AS A CRYSTAL OF A NEW STREAM FOR STAKEHOLDER CAPITALI...
IJMIT JOURNAL
 
EIS-Webinar-Regulated-Industries-2025-08.pdf
Earley Information Science
 
How to use fields_get method in Odoo 18
Celine George
 
Slides World Game (s) Great Redesign Eco Economic Epochs.pptx
Steven McGee
 
Be ready for tomorrow’s needs with a longer-lasting, higher-performing PC
Principled Technologies
 
ment.tech-Siri Delay Opens AI Startup Opportunity in 2025.pdf
thomasnova26
 
CCUS-as-the-Missing-Link-to-Net-Zero_AksCurious.pdf
AkarshaSrivastava1
 
Secure Java Applications against Quantum Threats
Ana-Maria Mihalceanu
 
Slides World Game (s) Great Redesign Eco Economic Epochs.pdf
Steven McGee
 
Ebook - The Future of AI A Comprehensive Guide.pdf
baljeethmata
 
TicketRoot: Event Tech Solutions Deck 2025
TicketRoot
 
Intravenous drug administration application for pediatric patients via augmen...
IAESIJAI
 
Rise of the Digital Control Grid Zeee Media and Hope and Tivon FTWProject.com
hopegirl587
 
substrate PowerPoint Presentation basic one
jwaite4
 

Html part2 (1)

  • 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