1 / 36

Computer and Communication Fundamental

Computer and Communication Fundamental. Basic web programming. Lecture 7 Rina Zviel-Girshin. Overview. Colors Table Image Hypertext. Color in computer. The color space used to create color on a TV or computer monitor is RGB color space . It uses three colors: Red Green Blue

bspaeth
Download Presentation

Computer and Communication Fundamental

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Computer and Communication Fundamental Basic web programming Lecture 7 Rina Zviel-Girshin

  2. Overview • Colors • Table • Image • Hypertext

  3. Color in computer • The color space used to create color on a TV or computer monitor is RGB color space. • It uses three colors: • Red • Green • Blue • To understand RGB color space you need to understand the structure of the computer monitor.

  4. Screen (monitor) structure • The computer screen is a matrix of addressable pixels. • The projection mechanism uses three “electron guns” that shoot, together, red, green, and blue light beams on each pixel.

  5. The color scheme • How Color is Produced • Each Pixel Has Three Colored Dots — Red, Green, and Blue • a separate electron gun produces each color • Each gun can shoot 256 different intensities (or Voltage levels, or wave lengths) of its respective basic color. • So each pixel color is defined by 3 values: (red, green, blue). • The range of each value – 0-255. • For example, red basic color: (255,0,0) – means max value for red and min value for green and blue.

  6. The color scheme • Thus, we can generate 256 x 256 x 256, or more than 16,000,000different composite colors. • The human eye can resolve 10,000different colorssimultaneously. • The 3 guns scan the entire screen, pixel by pixel, thousands of time each second. • Thus, the pixel colors are refreshed all the time. • That’s why a screen saver is a good thing if you want to extend your screen’s life.

  7. The RGB code

  8. The RGB code = (255 , 0 , 0 ) = ( 0 , 255 , 0 ) = ( 0 , 0 , 255 ) Basic colors

  9. The RGB code = (255 , 0 , 0 ) = ( 0 , 255 , 0 ) = ( 0 , 0 , 255 ) = (255 , 255 , 255 ) = (255, 255 , 0 ) = ( 0 , 0 , 0 ) = (211 , 17 , 122 ) = ( 9 , 231 , 43 ) Basic colors Composite colors

  10. The RGB code in action = (255 , 0 , 0 ) = ( 0 , 255 , 0 ) = ( 0 , 0 , 255 ) = (255 , 255 , 255 ) = (255, 255 , 0 ) = ( 0 , 0 , 0 ) = (211 , 17 , 122 ) = ( 9 , 231 , 43 ) Each pixel in the Mona Lisa is represented by a triplet of numbers (x,y,z)

  11. Colors in HTML • In HTML you can change default colors of your page: • Black text • White background • To change the default colors of your page you add color attributes to the body tag: • bgcolor – defines back ground color of your page • text – defines text color of your document <body bgcolor=“gray” text=#0000ff> • The value of the attribute can be • windows defined colors: red, green, yellow, tomato, gray, greenyellow, magenta, olive, … • or RGB color scheme • If you use RGB scheme you have to put # sign before 6 hexadecimal digit number. • It is advisable to write basic colors in double quotes.

  12. Hexadecimal numbers • Hexadecimal system basis is 16 and not 10 as in  usual decimal system. • That means we need more digits, to signify 10,11,12,13,14 and 15. • Those are represented by the first letters of the Latin alphabet: A(10), B(11), C(12), D(13), E(14), F(15). • In RGB scheme: x x x xx x • Two digit hexadecimal arithmetic: • 00 0*16 + 0 = 0 01 0*16 + 1 = 1 • 0A 0*16 + 10 = 10 0f 0*16 + 15 = 15 • 10 1*16 + 0 = 16 A0 10*16 + 0 = 160 • A1 10*16 + 1 = 161 AF 10*16 + 15 = 175

  13. Colors example <html><head></head> <body bgcolor=“lightgreen” text=#0000FF> <h1>Hello World!</h1> </body></html>

  14. Font tag • If you want to change color of only one line or one paragraph in your document you should add <font> tag to your page. • <font> tag has several attributes: • size • color. • You can change text color by adding color attribute to the font tag:   <font color="red">. • It is advisable to use double quotes “ around color value (for xml). • Color value can be predefined color or RGB color.

  15. Size attribute of <font> • You can change text size by adding size attribute to the font tag: <font size=5>. • The size of the font can be in 1-7 range. • Default size is 3. • Largest font size is 7. • Smallest font size is 1. • You can add a numeric integer value to the current size by using following syntax: <font size=+2>.

  16. Font tag example <html><head></head> <body bgcolor=beige text=red> This is a regular text.<br> <font color=green>This is a green text.<br> <font color=blue>This is a blue text.<br> <font color=green size=7>This is a green size=7 text.<br> <font color=black size=+2>This is a black default +2 size text.<br> </body></html>

  17. Font tag example output <body text=red> <font color=black size=+2> <font color=green size=7> <body bgcolor=beige>

  18. Table • You can build a table in HTML. • <table> tag defines a table. • You have to use <table> opening and closing tag. • Table is defines by it’s rows and columns: • Elements inside the table are <tr> - table rows. • Elements inside <tr> are <td> - table data (or table column) • It is advisable to close td and tr (</td> and </tr>). • Table you build does not have to be symmetric. • In asymmetric table a number of columns in each row can be different.

  19. Number of columns in each row is 3 – the table is a symmetric table Symmetric table example <html><head></head><body><center> <table> <!-- BEGIN table definition - symmetrical table--> <tr> <!-- BEGIN first row definition --> <td> <u> TAG </u> </td> <!-- first column --> <td> <u> USAGE </u> </td> <!-- second column --> <td> <u> RESULT </u> </td> <!-- third column --> </tr> <!-- END first row definition --> <tr> <!-- BEGIN second row definition --> <td> B </td> <!-- first column --> <td> bold text </td> <!-- second column --> <td> <B>bold text</B></td> <!-- third column --> </tr> <!-- END second row definition --> <tr> <!-- BEGIN third row definition --> <td> I </td> <!-- first column --> <td> italics </td> <!-- second column --> <td> <I>italics</I></td> <!-- third column --> </tr> <!-- END third row definition --> </table></body></html>

  20. Table example output

  21. Table attributes • Table tag has following attributes: • align      center| left| right - horizontal alignment of the table • border   number • width     number or %number • height    number or %number • <tr> and <td> tags also have attributes: • align      middle| left| right - horizontal alignment inside the row • width     number or %number relative to the table width • height    number or %number relative to the table height

  22. Table attributes example <html><head></head><body><center> <table border=2 width=50%> <tr><td align=right> first column </td> <td> second column</td></tr> <tr align=center><td> one</td> <td> two</td></tr> </table></body></html>

  23. <td align=right> <tr align=center> Table attributes example output <table border=2 width=50%>

  24. Image • You can add an image (a picture) to your web page. • <img> tag is used for this purpose. • When you add image you have to specify its location: <img src=“filename”>. SRC attributespecifies image location. • Example: <img src="back.gif"> • <img> tag has additional attributes: • width - number or %number • height - number or %number • Number denotes a picture size in pixels. For example, <img src="back.gif“ width=200> draws back.gif image in rectangle with 200 pixel width. • %number relative size denotes a relative picture size (relative to browser window).

  25. Image example <html><head></head><body> <center> <img src="back.gif"> <br><br><br> <img src="back.gif“ width=20% height=40%> <br><br><br></center> </body></html>

  26. Image file format • *.GIF (Graphics Interchange Format) • *.JPEG (Joint Photographic Exports Group) • *.TIFF (Tag Image File Format) • *.PNG (Portable Network Graphics) • Browser can display all these formats.

  27. Hypertext • Hypertext enables people to read, author and comprehend information more effectively than traditional linear documents. • Hypertext frees readers and developers from this linear, sequential form of expression. • Developer can structure information as a web of information chunks and interrelating links. • Many people consider the terms hypertext and hypermedia synonymous. • Nominally hypertext refers to relating textual elements, while hypermedia encompasses relationships among elements of any media type. • Hypertext is not a new concept. • In 1945 Vannevar Bush proposed the mechanical Memex system, which would maintain links and annotations over printed materials.

  28. Hyperlink • The chief power of HTML comes from its ability to link text and/or an image to another document or section of a document. • Linking is the possibility to jump from a place in a document to another "linked" place by simple click of the mouse. • A browser highlights the identified text or image with color and/or underlines to indicate that it is a hypertext link. • Hypertext link is also called • hyperlink • link. • HTML's single hypertext-related tag is <A>, which stands for anchor . • Hyperlink can be • to local file • to global file • to specific place in the file.

  29. <a> format • You start the anchor with <A (include a space after the A). • Specify the document you're linking to by entering the parameter HREF="filename" followed by a closing right angle bracket - >. • HREF is a short of Hyper reference. • Enter the text or image that will serve as the hypertext link in the current document. • Enter the ending anchor tag: </A> (no space is needed before the end anchor tag). <html><head></head> <body> <center> <a href="ex21.html">back</a> </center></body></html>

  30. When you put mouse over the link you can see your link location in the status bar. <a> example output

  31. Hyperlink to the global file • In global link you have to give URL of the file: scheme://host.domain/path/ filename • <a href="URL">link text</a> <html><head></head> <body> <center> a href="http://www.idc.ac.il">IDC HOME PAGE</a><p>> a href="http://www.yahoo.com">YAHOO HOME PAGE</a>> </center></body></html>

  32. Hyperlink to the global file output

  33. Suppose you want to set a link to a specific place in another document then the link you use should be. Another multi-line document. You defined , bookmarked . My bookmark. Another text. Hyperlink to the specific location in the document • You can link to a  specific place in a current  document. • You have to enter: <a name="PlaceName"></a> tag before this specific place (make a bookmark). • The link to this place is created using the following code: <a href="#PlaceName"> Jump to PlaceName</a> • Suppose you want to set a link to a specific place in another document then the link you use should be: <a href="fileName#PlaceName"> Jump to PlaceName</a>.

  34. Sound • You can add sound file to your page. • If you want a background sound then you should use <bgsound> tag. <bgsound SRC=“voiceFile" > • Again you have to specify file location using src attribute. • If you want to repeat the file you can use loop attribute of <bgsound> tag. • Loop range values: from 1 to infinite. • Example: <bgsound SRC="beethoven5.rmi" loop=infinite> • Sound files: • *.au • *.mid • *.rmi • *.wav

  35. Video • You can add video file to your page. • You should use <img> tag and dynsrc="FileName" attribute:<img dynsrc="FileName" loop=infinite> • loop attribute values can be from 1 to infinite. • If you want to play the file only once you can omit loop attribute. <html><head></head> <<body This is a page with repeated video in it.<p> <img DYNSRC="RoseBloom.avi" loop=infinite> </body></html>

  36. Any questions?

More Related