web site design & multimedia systems - wordpress.com · 3/3/2015 · 26-mar-2015 1 web site...
TRANSCRIPT
26-Mar-2015
1
Web Site Design &Multimedia Systems
HTML Basic
Lecturer:Dr. EMAD OTHMAN
Dr. Emad Osman 1
Course AimThis course covers everything from basicwebsite to banner ads and interactive e-commerce sites. The course covers basicweb site design, navigation, andconstruction.
Dr. Emad Osman 2
Course Aim (Cont’d)This course covers everything from basic media tothe content that uses a combination of differentcontent forms. The term Multimedia can be used as anoun (a medium with multiple content forms) or asan adjective describing a medium as having multiplecontent forms. The term is used in contrast to mediawhich use only elementary computer display such astext-only, or traditional forms of printed or hand-produced material. Multimedia includes acombination of Text, Audio, Still Images,Animation, Video, Or Interactivity ContentForms. Dr. Emad Osman 3
Course ObjectivesThis course prepares students with necessary skillsfor building web sites. These skills help studentsapply business objectives to the differentcomponents of a business Web site. The coursebuilds on skills and concepts from other courses onprogramming, E-business, Databases, Systems andanalysis and design, etc.This course prepares students with necessary skillsfor Categorization of multimedia, Usage /Application, Commercial Uses, Entertainment andfine arts, Journalism and Document Imaging.Dr. Emad Osman 4
Lecture Schedule• Introduction to usability• Web user experience• Usability navigation convention• Tabs and pull down menus• Drop Down Menus• Page layout and visual design usability guideline• Homepage guideline• Homepage guideline continued• Form design, search and feedback• Writing style and web content guideline• Flash usability guideline• Usability testing• Accessibility guideline• Project PresentationDr. Emad Osman 5
Tutorial (Lab) ScheduleIntroduction the flash authoring toolCreating and modifying simple and complex graphicsUnderstanding animation(shape, frame by frame technique)Building button for interactivityBasic interactivity using behaviorsAdding sound ,adding videoBuilding complexity animationAdvanced buttons and event detectionControlling multiple timelinesManaging outside communication, Controlling movieclip and sound
Dr. Emad Osman 6
Multimedia Systems1 Categorization of multimedia2 Major characteristics of multimedia3 Terminology
3.1 History of the term3.2 Word usage and context
4 Usage / Application4.1 Creative industries4.1.1 Commercial Uses4.1.2 Entertainment and fine arts4.1.3 Education4.1.4 Journalism4.1.9 Document imaging
Dr. Emad Osman 7
HTML TutorialWith HTML you can create your own Web
site.This tutorial teaches you everything about
HTML.HTML is easy to learn - You will enjoy it.
Dr. Emad Osman 8
HTML TutorialHTML HOMEHTML IntroductionHTML Get StartedHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML FormattingHTML Fonts
HTML StylesHTML LinksHTML ImagesHTML TablesHTML ListsHTML FormsHTML FramesHTML IframesHTML ColorsHTML ColornamesHTML ColorvaluesHTML Quick ListDr. Emad Osman 9
26-Mar-2015
2
Dr. Emad Osman 10
HTML Introduction
What is HTML?HTML is a language for describing web pages.HTML stands for Hyper Text Markup LanguageHTML is not a programming language, it is a
markup languageA markup language is a set of markup tagsHTML uses markup tags to describe web
pagesDr. Emad Osman 11
HTML5
WebDevelopment tothe next level
Dr. Emad Osman 12
Rough Timeline of WebTechnologies
Dr. Emad Osman 13
What We need to Build aWeb Site ?????!!!!!
ArtisteerXamppSWISH MaxPhotoshopDreamweaverHosting Server $$$$$
Dr. Emad Osman 14
HTML TagsHTML markup tags are usually called HTML tags• HTML tags are keywords surrounded by angle
brackets like <html>• HTML tags normally come in pairs like <b>
and </b>• The first tag in a pair is the start tag, the
second tag is the end tag• Start and end tags are also called opening
tags and closing tagsDr. Emad Osman 15
HTML Documents = Web Pages
HTML documents describe web pagesHTML documents contain HTML tags
and plain textHTML documents are also called web
pages
Dr. Emad Osman 16
HTML Documents = Web Pages The purpose of a web browser (like Internet Explorer or
Firefox) is to read HTML documents and display them asweb pages. The browser does not display the HTML tags,but uses the tags to interpret the content of the page:
<html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
Dr. Emad Osman 17
Example ExplainedThe text between <html> and
</html> describes the web pageThe text between <body> and
</body> is the visible page contentThe text between <h1> and </h1> is
displayed as a headingThe text between <p> and </p> is
displayed as a paragraphDr. Emad Osman 18
26-Mar-2015
3
What You Need
You don't need any tools tolearn HTML
You don't need an HTML editorYou don't need a web serverYou don't need a web site
Dr. Emad Osman 19
Editing HTMLHTML can be written and edited using
many different editors likeDreamweaver and Visual Studio.
However, in this tutorial we use a plaintext editor (like Notepad) to edit HTML.
Using a plain text editor is the best way tolearn HTML. Dr. Emad Osman 20
.HTM or .HTML File Extension?
When you save an HTML file,you can use either the .htmor the .html file extension.
There is no difference, it isentirely up to you.Dr. Emad Osman 21
HTML Basic - 4 ExamplesHTML Headings
HTML headings are defined with the<h1> to <h6> tags.Example<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>
HTML tags are not case sensitive: <H>means the same as <h>Dr. Emad Osman 22
HTML Headings Examples
Dr. Emad Osman 23
HTML Paragraphs
HTML paragraphs are defined with the<p> tag.
Example<p>This is a paragraph.</p><p>This is another paragraph.</p>
Dr. Emad Osman 24
HTML Paragraphs Examples
Dr. Emad Osman 25
HTML Links
HTML links are defined with the <a> tag.
Example<a href="http://www.google.com">This is a link</a>
Note: The link address is specified in the hrefattribute.
Dr. Emad Osman 26
HTML Links Example
Dr. Emad Osman 27
26-Mar-2015
4
HTML Images
HTML images are defined with the <img>tag.
Example<img src="w3schools.jpg" width="104" height="142" /><img src="images/ w3schools.jpg " width="104" height="142" />
Note: The name and the size of the imageare provided as attributes.
Dr. Emad Osman 28
HTML Images Example
Dr. Emad Osman 29
HTML Elements
HTML documents are defined by HTML elements.
Dr. Emad Osman 30
HTML Element Syntax
An HTML element starts with a start tag /opening tag
An HTML element ends with an end tag /closing tag
The element content is everything betweenthe start and the end tag
Some HTML elements have empty contentEmpty elements are closed in the start tagMost HTML elements can have attributesDr. Emad Osman 31
Nested HTML Elements
Most HTML elements can benested (can contain otherHTML elements).
HTML documents consist ofnested HTML elements.
Dr. Emad Osman 32
HTML Document Example
<html>
<body><p>This is my first paragraph.</p></body>
</html>The example above contains 3
HTML elements.Dr. Emad Osman 33
HTML Example Explained
The <p> element:<p>This is my first paragraph.</p>The <p> element defines a paragraph in
the HTML document.
The element has a start tag <p> and anend tag </p>.
The element content is: This is my firstparagraph.
Dr. Emad Osman 34
HTML Example Explained
The <body> element:<body>
<p>This is my first paragraph.</p></body>
The <body> element defines the body ofthe HTML document.The element has a start tag <body> andan end tag </body>.
Dr. Emad Osman 35
HTML Example Explained The <html> element: <html>
<body><p>This is my first paragraph.</p></body>
</html> The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag</html>.
The element content is another HTML element (the bodyelement). Dr. Emad Osman 36
26-Mar-2015
5
Don't Forget the End TagSome HTML elements might display
correctly even if you forget the end tag:<p>This is a paragraph
<p>This is a paragraphThe example above works in most
browsers, because the closing tag isconsidered optional.
Never rely on this. Many HTML elementswill produce unexpected results and/orerrors if you forget the end tag .Dr. Emad Osman 37
Empty HTML Elements
HTML elements with no content are calledempty elements.
<br> is an empty element without a closingtag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed.Adding a slash inside the start tag, like<br />, is the proper way of closing emptyelements in XHTML (and XML).
Dr. Emad Osman 38
HTML Attributes
HTML elements can have attributesAttributes provide additional
information about HTML elementAttributes are always specified in the
start tagAttributes come in name/value pairs
like: name="value"Dr. Emad Osman 39
Attribute Example
HTML links are defined with the <a> tag.The link address is specified in the hrefattribute:
Example<a href="http://www.google.com">This is a link</a>
HTML Tip: Use Lowercase Attributes
Attribute names and attribute values are case-insensitive.Dr. Emad Osman 40
Always Quote Attribute Values
Attribute values should always be enclosed inquotes.
Double style quotes are the most common,but single style quotes are also allowed.
Tip: In some rare situations, when theattribute value itself contains quotes, it isnecessary to use single quotes: name='John"ShotGun" Nelson'
Dr. Emad Osman 41
HTML Attributes Reference
Dr. Emad Osman 42
HTML Headings
Headings are defined with the <h1> to <h6> tags.<h1> defines the most important heading. <h6>
defines the least important heading.Example
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>
Note: Browsers automatically add some emptyspace (a margin) before and after each heading.
Dr. Emad Osman 43
HTML Headings Examples
Dr. Emad Osman 44
Headings Are Important inHTML documents
Use HTML headings for headings only. Don't useheadings to make text BIG or bold.
Search engines use your headings to index thestructure and content of your web pages.
Since users may skim your pages by its headings, it isimportant to use headings to show the documentstructure.
H1 headings should be used as main headings,followed by H2 headings, then the less important H3headings, and so on. Dr. Emad Osman 45
26-Mar-2015
6
HTML LinesThe <hr /> tag creates a horizontal line in an
HTML page.
The hr element can be used to separate content:Example
<p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p>
Dr. Emad Osman 46
HTML Lines Example
Dr. Emad Osman 47
HTML Comments
Comments can be inserted into the HTML code tomake it more readable and understandable.Comments are ignored by the browser and are notdisplayed.
Comments are written like this:Example
<!-- This is a comment -->
Note: There is an exclamation point after theopening bracket, but not before the closing bracket.
Dr. Emad Osman 48
HTML Comments Example
Dr. Emad Osman 49
HTML Tip - How to ViewHTML Source
Have you ever seen a Web page andwondered "Hey! How did they do that?"
To find out, right-click in the page andselect "View Source" (IE) or "View PageSource" (Firefox), or similar for otherbrowsers.
This will open a window containing theHTML code of the page.Dr. Emad Osman 50
HTML Tag Reference
Dr. Emad Osman 51
HTML Paragraphs
HTML documents are divided into paragraphs.Paragraphs are defined with the <p> tag.Example<p>This is a paragraph</p><p>This is another paragraph</p>
Note: Browsers automatically add an emptyline before and after a paragraph.
Dr. Emad Osman 52
HTML Paragraphs Examples
Dr. Emad Osman 53
HTML Line Breaks
Use the <br /> tag if you want a line break(a new line) without starting a newparagraph:
Example<p>This is<br />a para<br />graph with linebreaks</p>
The <br /> element is an empty HTMLelement. It has no end tag.
Dr. Emad Osman 54
26-Mar-2015
7
HTML Line Breaks Example
Dr. Emad Osman 55
HTML Tag Reference
Dr. Emad Osman 56
HTML Text Formatting
Dr. Emad Osman 57
HTML Formatting Tags
HTML uses tags like <b> and <i> forformatting output, like bold or italic text.
These HTML tags are called formatting tags.
Remark Often <strong> renders as <b>,and <em> renders as <i>.
Dr. Emad Osman 58
However, there is a difference in the meaning ofthese tags:
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text tobe rendered in a way that the user understands as"important".
Today, all major browsers render strong as bold andem as italics. However, if a browser one day wantsto make a text highlighted with the strong feature, itmight be cursive for example and not bold!
HTML Formatting Tags
Dr. Emad Osman 59
HTML Text Formatting Tags
Dr. Emad Osman 60
HTML "Computer Output" Tags
Dr. Emad Osman 61
HTML Citations, Quotations,and Definition Tags
Dr. Emad Osman 62
Preformatted TextThis example demonstrates how you can control the line breaks,spaces, and character widths with the <pre> tag.
<html><body><pre>This ispreformatted text.It preserves both spacesand line breaks and shows the text in a monospace font.</pre><p>The pre tag is good for displaying computer code:</p><pre>for i = 1 to 10
print inext i</pre></body></html> Dr. Emad Osman 63
26-Mar-2015
8
“Computer Output” TagsThis example demonstrates how different“computer output” tags will be displayed.
<html><body><code>Computer code</code><br /><kbd>Keyboard input</kbd><br /><tt>Teletype text</tt><br /><samp>Sample text</samp><br /><var>Computer variable</var><br /><p><b>Note:</b> These tags are often used to display computer/programming code on the page.</p></body></html> Dr. Emad Osman 64
AddressThis example demonstrates how to write anaddress in an HTML document.
<html><body><address>Donald Duck<br>BOX 555<br>Disneyland<br>USA</address></body></html> Dr. Emad Osman 65
Abbreviations and AcronymsThis example demonstrates how to handlean abbreviation or an acronym.
<html><body><abbr title="United Nations">UN</abbr><br /><acronym title="World Wide Web">WWW</acronym><p>The title attribute is used to show the spelled-outversion when holding the mouse pointer over the acronymor abbreviation.</p></body></html>
Dr. Emad Osman 66
Text DirectionThis example demonstrates how tochange the text direction.
<html><body><p>If your browser supports bidirectional override (bdo), thenext line will be written from the right to the left(rtl):</p><bdo dir="rtl">Here is some backward text</bdo></body></html>
Dr. Emad Osman 67
Deleted and Inserted TextThis example demonstrates how to mark a text that isdeleted (strikethrough) or inserted (underscore) to adocument.
<html><body><p>a dozen is<del>twenty</del><ins>twelve</ins>pieces</p><p>Most browsers will <del>overstrike</del> deleted text and<ins>underscore</ins> inserted text.</p><p>Some older browsers will display deleted or inserted text asplain text.</p></body></html>
Dr. Emad Osman 68
HTML FontsThe HTML <font> Tag Should NOT be Used
The <font> tag is deprecated in HTML 4, andremoved from HTML5.
The World Wide Web Consortium (W3C) hasremoved the <font> tag from its recommendations.
In HTML 4, style sheets (CSS) should be used todefine the layout and display properties for manyHTML elements.
The example below shows how the HTML could lookby using the <font> tag:
Dr. Emad Osman 69
HTML Fonts Example
Dr. Emad Osman 70
HTML Styles - CSS
CSS is used to style HTML elements.
Dr. Emad Osman 71
CSS is used to style HTMLelements Example
Dr. Emad Osman 72
26-Mar-2015
9
Styling HTML with CSS
CSS was introduced together with HTML 4, toprovide a better way to style HTML elements.
CSS can be added to HTML in the followingways:
in Cascading Style Sheet files (CSS files)in the <style> element in the HTML head
sectionin the style attribute in single HTML
elementsDr. Emad Osman 73
Using the HTML StyleAttribute
It is time consuming and not very practical tostyle HTML elements using the style attribute.
The preferred way to add CSS to HTML, is toput CSS syntax in separate CSS files.
However, in this HTML tutorial we willintroduce you to CSS using the style attribute.This is done to simplify the examples. It alsomakes it easier for you to edit the code andtry it yourself.
Dr. Emad Osman 74
HTML Style Example -Background Color
The background-color property defines the background colorfor an element:
Example<html>
<body style="background-color:yellow;"><h2 style="background-color:red;">This is a heading</h2><p style="background-color:green;">This is a paragraph.</p></body>
</html>
<body background="images\Wallpaper1.jpg">Dr. Emad Osman 75
HTML Style Example -Font, Color and Size
The font-family, color, and font-size properties definesthe font, color, and size of the text in an element:
Example<html>
<body><h1 style="font-family:verdana;">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body>
</html>
Dr. Emad Osman 76
The text-align property specifies the horizontal alignment oftext in an element:
Example<html>
<body><h1 style="text-align:center;">Center-aligned heading</h1><p>This is a paragraph.</p></body>
</html>
Dr. Emad Osman 77
Dr. Emad Osman 78
HTML Link Tags
Tag Description
<a> Defines an anchor
Dr. Emad Osman 79
HTML Hyperlinks (Links) Links are found in nearly all Web pages. Links allow
users to click their way from page to page. A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to a newdocument or a new section within the currentdocument.
When you move the cursor over a link in a Web page,the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag. The <a> tag can be used in two ways:
1. To create a link to another document, by using the href attribute2. To create a bookmark inside a document, by using the name
attribute Dr. Emad Osman 80
HTML Link Syntax
The HTML code for a link is simple. It looks likethis:<a href="url">Link text</a>The href attribute specifies the destination of alink.
Dr. Emad Osman 81
26-Mar-2015
10
HTML Links - The targetAttribute
The target attribute specifies where to openthe linked document.
The example below will open the linkeddocument in a new browser window or anew tab:
Dr. Emad Osman 82
Example<html><body><a href="http://www.Youtube.com"target="_blank">Visit Youtube to downloadClips!</a><p>If you set the target attribute to"_blank", the link will open in a newbrowser window/tab.</p></body></html>
Dr. Emad Osman 83
Creating a mailto: Link
Example:
Dr. Emad Osman 84
Create a link attached to animage
<p>Create a link attached to an image:<a href="http://www.Google.com.eg"><img src="images\102.gif" alt="HTMLtutorial" width="32"height="40" /></a></p>
<a href="lastpage.htm" target="_blank">LastPage</a> Dr. Emad Osman 85
Dr. Emad Osman 86
HTML Images - The <img>Tag and the Src Attribute
In HTML, images are defined with the <img>tag.The <img> tag is empty, which means that itcontains attributes only, and has no closing tag.To display an image on a page, you need to usethe src attribute. Src stands for "source".
The value of the src attribute is the UniformResource Locator (URL) of the image you wantto display. Dr. Emad Osman 87
HTML Image Tags
Tag Description<img /> Defines an image<map> Defines an image-map
<area /> Defines a clickable area insidean image-map
Dr. Emad Osman 88
HTML <map> TagThe <map> tag is used to define a client-side image-map.An image-map is an image with clickable areas.
Example<html><body><p>Click on the sun or on one of the planets to watch it closer:</p><img src="planets.gif" width="145" height="126" alt="Planets"usemap="#planetmap" />
<map name="planetmap"><area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" /><area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" /><area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body></html>
Dr. Emad Osman 89
HTML <area> TagThe <area> tag defines an area inside an image-map (animage-map is an image with clickable areas).The <area> element is always nested inside a <map> tag.
Value Descriptionx1,y1,x2,y2 Specifies the coordinates of the left, top, right,
bottom corner of the rectangle (for shape="rect")
x,y,radius Specifies the coordinates of the circle center andthe radius (for shape="circle")
x1,y1,x2,y2,..,xn,yn
Specifies the coordinates of the edges of thepolygon. If the first and last coordinate pairs arenot the same, the browser will add the lastcoordinate pair to close the polygon (forshape="poly")
Attribute Values
Dr. Emad Osman 90
26-Mar-2015
11
Dr. Emad Osman 91
HTML Table Tags
Dr. Emad Osman 92
HTML Tables
Tables are defined with the <table> tag.A table is divided into rows (with the
<tr> tag), and each row is divided intodata cells (with the <td> tag). td standsfor "table data," and holds the content ofa data cell. A <td> tag can contain text,links, images, lists, forms, other tables,etc.
Dr. Emad Osman 93
Table Example
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table> Dr. Emad Osman 94
HTML Tables and theBorder Attribute
<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
Dr. Emad Osman 95
Assignment #1
Define table cells that spanmore than one row orone column, as shown inthe Figure
Dr. Emad Osman 96
Assignment #1 (Solve)
<html><body>
<h4>Cell that spans two columns:</h4><table border="1">
<tr><th>Name</th><th colspan="2">Telephone</th></tr>
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr>
</table><h4>Cell that spans two rows:</h4><table border="1">
<tr><th>First Name:</th><td>Bill Gates</td></tr>
<tr><th rowspan="2">Telephone:</th><td>555 77 854</td></tr><tr><td>555 77 855</td></tr></table>
</body></html>Dr. Emad Osman 97
Assignment #2
Define table cells that spanmore than one row orone column, as shown inthe Figure
Dr. Emad Osman 98
Assignment #2 (Solve)
<html><body>
<table border="1"><tr><td><p>This is a paragraph</p><p>This is another paragraph</p></td>
<td>This cell contains a table:<table border="1">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table></td></tr>
<tr><td>This cell contains a list<ul><li>apples</li><li>bananas</li><li>pineapples</li></ul></td><td>HELLO</td></tr></table>
</body></html>
Dr. Emad Osman 99
26-Mar-2015
12
Dr. Emad Osman 100
HTML Lists
The most common HTML lists are :
An ordered list:1.The first list item2.The second list item3.The third list item
An unordered list:•List item•List item•List item
Dr. Emad Osman 101
Unordered listHow to create an unordered list in anHTML document.An un ordered list starts with the<ul> tag . Each list item starts withthe <li> tag.<html><body>
<h4>An Unordered List:</h4><ul>
<li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>
</body></html>
Dr. Emad Osman 102
Ordered listHow to create an ordered list in anHTML document
An un ordered list starts with the<ol> tag . Each list item startswith the <li> tag.
<html><body>
<h4>An Ordered List:</h4><ol>
<li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>
</body></html> Dr. Emad Osman 103
You can display different kinds of bullets in an unorderedlist by using the type attribute.<html> <body><h4>Disc bullets list:</h4><ul type="disc"><li>Apples</li><li>Bananas</li> <li>Lemons</li></ul>
<h4>Circle bullets list:</h4><ul type="circle"><li>Apples</li><li>Bananas</li> <li>Lemons</li></ul>
<h4>Square bullets list:</h4><ul type="square"> <li>Apples</li><li>Bananas</li> <li>Lemons</li></ul>
</body> </html> Dr. Emad Osman 104
List tags
Dr. Emad Osman 105
Assignment # 3
Dr. Emad Osman 106
Assignment # 3 (Solve)
Dr. Emad Osman 107
Dr. Emad Osman 108
26-Mar-2015
13
HTML Forms and Input
HTML Forms are used to selectdifferent kinds of user input.
Form elements are elements thatallow the user to enter information ina form (like text fields, text area fields,drop-down menus, radio buttons,check boxes, and so on).
Dr. Emad Osman 109
Input tag and attributes
The most used form tag is the <input> tag.
The type of input is specified with the type attribute.
The following types are the most commonly used input types.
Dr. Emad Osman 110
1- Text FieldsText fields are used when you want the user to type letters,numbers, and so on in a form.
In most browsers, the width of the textfield is 20 characters by default.
Dr. Emad Osman 111
2- Check BoxesA user can select or deselect a check box.
Dr. Emad Osman 112
3- Radio ButtonsWhen a user clicks a radio button, that button becomes selected,and all other buttons in the same group become deselected.
Dr. Emad Osman 113
4- Drop-Down ListA drop-down list is a selectable list.
<html> <body><form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select> </form></body> </html
Dr. Emad Osman 114
5- ButtonsButtons are common items on a form.
<html><body>
<form action=""> <inputtype="button"value="Hello world!"></form>
</body></html> Dr. Emad Osman 115
6- Field setA field set is a grouping of data fields.
Dr. Emad Osman 116
Form tags
Dr. Emad Osman 117
26-Mar-2015
14
Dr. Emad Osman 118
You can create a scrolling marquee (i.e.scrolling text or scrolling images) by usingthe <marquee> tag.
You can make the text/images scroll fromright to left, left to right, top to bottom, orbottom to top - it's your choice!
Dr. Emad Osman 119
<marquee behavior="slide"direction="left">Your slide-in text goeshere</marquee>
<marquee behavior="scroll"direction="left">Your scrolling text goeshere</marquee>
<marquee behavior="alternate">Yourbouncing text goes here</marquee>
<marquee behavior="scroll"direction="up">Your upward scrolling textgoes here</marquee>
Dr. Emad Osman 120
<marquee behavior="scroll"direction="left" scrollamount="1">Slowscroll speed</marquee>
<marquee behavior="scroll"direction="left"scrollamount="10">Medium scrollspeed</marquee>
<marquee behavior="scroll"direction="left" scrollamount="20">Fastscroll speed</marquee>
Dr. Emad Osman 121
<marquee behavior="scroll"direction="left"><img src="/pix/smile.gif"width="100" height="100" alt="smile”/></marquee>
Dr. Emad Osman 122
<marquee behavior="scroll" direction="left"id="mymarquee">
<p>Go on... press the button!</p></marquee><input type="button" value="Stop
Marquee"onClick="document.getElementById('mymarquee').stop();">
<input type="button" value="StartMarquee"onClick="document.getElementById('mymarquee').start();">
Dr. Emad Osman 123
Dr. Emad Osman 124
ON Line – Web based<embed
src="http://www.clocktag.com/cs/d144.swf"width="335" height="232"wmode="transparent" type="application/x-shockwave-flash"></embed>
</hr><embed
src="http://www.clocktag.com/cs/dtclassic.swf"width="165" height="55"wmode="transparent" type="application/x-shockwave-flash"></embed>
Dr. Emad Osman 125
OFF Line – Your System
<script language="javascript">var date = new Date();document.write("<b>System date and Time
is:</b> "+ date);</script>
Dr. Emad Osman 126
