You are on page 1of 60

East Africa University

Faculty of Business Administration

HTML
Academic year: 2015-2016
FEB- 2016

1

East Africa University
Faculty of Business Administration
Course Outline of HTML

Academic Year: 2nd 2015/2016

Unit 1: Introduction to WEB
1. History of web
2. W3C and W3C members
3. Why WHATWG
4. Web terminology
5. Advantages of web application
Unit 2: HTML Basics
1. HTML Introduction
2. Building a first html document
3. Structure of the web documents
4. HTML Tags and Elements
5. History of html

Unit 3: Formatting the page
1. Text formatting
2. Heading styles
3. Fonts formatting
4. Paragraphs formatting
5. Colors
6. Marquee

Unit 4: Creating lists and tables /hyperlinks
1. List and types of list
2. Creating Tables
2

3. Creating links and common types of
hyperlinks
Unit 5: Working with images and using audio and
video
- Inserting images to your html files
- Inserting audio and sound formats
- Inserting video and video formats
Unit 6 Creating forms and frames
o Creating forms and form elements and
attributes
o Working with Frames
Unit 7 Introduction to HTML5
o Html 4 draw backs
o Why html5 and new features
o Power of html5 and common terms in html5
o Html 5 syntax, formatting , new elements
o Html5 canvas ,SVG, Drag/drop and
Geolocation
o Html5 media and multimedia video tags
,audio tags
o Html5 input types and new attributes for
<form>
o Html 5 semantic, web storage , web workers
,SSE events and Math ml
Unit 8 Real live website (HTMLBARO.COM)
o Purchasing a domain(Website name)
o Purchase domain Space hosting (Memory)
o Uploading site to the internet
o Haw to upload files and edit your website by
online

3

References Html5&css Develop with tomorrow brain p.webcamtoy.com 4 .com 4.w3shools.hogan Html5 for web designers jeremy kieth Websites 1. www.html5demos.com 3. www.whatwg. www.html5rocks.com 5.org 2. www. www.

0 (a semantic Web of linked data). W3C standards have enabled a single World Wide Web of information and people. Any entity that can sign the Membership Agreement can become a Member. educational and governmental entities) and individuals. Members may be either for- profit or not-for-profit organizations. Since that time. mobile access. Tim berners founded the World Wide Web Consortium (W3C) as a place for stakeholders to reach consensus around the specification and guidelines to ensure that the Web works for everyone and that it evolves in a responsible manner. the Web has changed the world. At the time. CERN announced in April 1993 that the World Wide Web technology would be available for anyone to use on a royalty-free basis. about 20 years after the first connection was established over what is today known as the Internet. etc 1. accessibility for people with disabilities and for people speaking many languages.2 W3C and W3C members Membership in W3C is open to all types of organizations (including commercial.0 (personal and dynamic). the large particle physics laboratory near Geneva. richer graphics and video. people outside of CERN joined the new Web community. Web 3. Tim was a software engineer at CERN. In 1994. Introduction to Web History of the Web Tim Berners-Lee invented the World Wide Web in 1989.World Wide Web Consortium (W3C) contains 3000 members as the fallowing :IBM Microsoft corporation 5 . Very important to the growth of the Web. and an increasingly- rich set of capabilities: Web 2. Web services. Switzerland By 1991. voice access.

send item Web browser is: a software which is installed user machine ex: Mozilla . The WHATWG was founded by individuals from Apple. Tcp /ip.  Network collection hardware and software resources between two or more devices  Internet : international network connected with tcp/ip communication protocols Web site is collection e-pages globally exchange information example: www. FTP HTTP: Hypertext Transfer Protocol is used in order to have communication betweenn client (browser) and server TCP connection two network system 6 .uk/somali Web page is one page on web example inbox.co.3 Why WHATWG The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested Maintaining and evolving HTML and related technologies.American online apple mozelle foundation oracle corporation Adobe micromedia sun micro system Redhat and etc 1. and store it for future use (storage). the Mozilla Foundation and Opera Software in 2004 Web terminology  A computer is an electronic device that is programmed to accept data (input). process it into useful information (output).bbc.opera chrome Protocols are: provides same set of rules to create the communication between browser and server example :http.

The advantages of the web applications have made a number of users move from the desktop applications to the web applications:  Cheaper and Much More Flexible Than Print Advertising The Internet is extremely different from print advertising in that space is cheap  Market Expansion The Internet has allowed businesses to break through the geographical barriers and become accessible.test.com  Web host: company provider hosting your website like  Web master: person who designers and manages web sites  Html is used to create and design static web application Advantages of web sites The web applications are executed on the Internet and have a number of advantages to them.contains information that is sent to client from server URI: Uniform Resource Identifier. IP connection between two computer networking Port no :unique number given every server Socket :browser uses socket to establish connection to server Request and response Request: .  No Installation and/or Maintenance 7 . A kind of “address” that is unique to each resource on the Web example: www. virtually. The web based applications have come a long way from the desk top applications. from any country in the world by a potential customer that has Internet access.containing information that is sent from client to website Response: .

Unlike the desktop applications. History of HTML 1. but rather a markup language. Pre . At the same.Markup Language describes how HTML works. the web applications do not have to be installed. as they run on a web server.Requirement You should be familiar with: 8 . Technically. Structure of the web documents 4. since the web servers are used  Multiple Platforms The beauty of the web applications is that they work on multiple platforms. HTML was developed with the intent of defining the structure of documents like headings. paragraphs. Immaterial of the browser or the operating system. They are often also compatible with most of the computer operating systems. HTML Introduction 2. The time and trouble required for installing software are also done away with. HTML is not a programming language. you simply "markup" a text document with tags that tell a Web browser how to structure it to display. Building a first html document 3. Mozilla Firefox. When you click a link in a Web page. etc.  Originally. UNIT 2: HTML BASICS 1. lists. Most of the applications work on different Internet browsers like Internet Explorer.  Hypertext refers to the way in which Web pages (HTML documents) are linked together. With a markup language.HTML Introduction  HTML or Hypertext Markup Language is the most widely used language on Web. you are using hypertext. and so forth to facilitate the sharing of scientific information between researchers.

 Basic word processing using any text editor. Click Notepad. Click All Programs.  How to create directories and files. Example 9 . To open Notepad in Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Step 2: Write Some HTML Write or copy some HTML into Notepad. We believe using a simple text editor is a good way to learn HTML. Step 1: Open Notepad To open Notepad in Windows 7 or earlier: Click Start (bottom left on your screen). BUILDING A FIRST HTML DOCUMENT . Write HTML Using Notepad or Text Edit/notepad++ HTML can be edited by using a professional HTML editor like:  Adobe Dreamweaver  Microsoft Expression Web  Coffee Cup HTML Editor However.  Basic understanding on internet browsing using a browser like Internet Explorer or Firefox etc.  How to navigate through different directories. Click Accessories . Type Notepad. Follow the 4 steps below to create your first web page with Notepad. for learning HTML we recommend a text editor like Notepad (PC) or Text Edit (Mac).

</p> </body> </html> Step 3: Save the HTML Page Save the file on your computer. Step 4: View HTML Page in Your Browser Double-click your saved HTML file. Select File > Save as in the Notepad menu.htm or . it is up to you.html as file extension. There is no difference. and the result will look much like this: 10 .<! DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph. You can use either .

2.STRUCTURE OF HTML FILES TAGS <HTML> and </HTML> tags <HEAD>. <TITLE>. </HEAD>.<HTML> and </HTML> tags First we need to learn how to set things up properly in an HTML document <HTML> is the beginning tag and </HTML> is the ending tag. </TITLE>. 11 . <BODY> and </BODY> tags 1.<HEAD> and </HEAD> tags Each web page must have the HEAD tag that give information to a person visiting your website 3 <TITLE> and </TITLE> tags One of the statements that must be included between the <HEAD> and </HEAD> tags is the TITLE of your web page. The forward slash before the tag (</ >) Thus <HTML> tells the browser that what follows is an HTML document an </HTML> tells the browser that the HTML document is completed.

It is the part that will be displayed on the browser screen. Example <HTML> <HEAD> <TITLE>WEB PAGE DESIGN . the title should be short 4 <BODY> and </BODY> tags It contains all the text and tags. <HR> <HR> puts a line across the page. Thus the BODY element contains the actual contents of the document.<HR> <p> programming languages like c .c++</p><br> address <BR> 12 . <BR> acts in the same way as the ENTER key on your keyboard. Courses<p> <BR> <p> html for web programming </p>. HTML BASIC TAGS <BR> <BR> tells your browser to go to the beginning of the next line . HR stands for Horizontal Rule. The TITLE of your web page must occur between the <TITLE> and </TITLE> tags and you are only allowed one TITLE element per page Note: In general.BASIC TAGS</TITLE> </HEAD> <BODY> <p> ICS. BR stands for line Break. <P> <P> for Paragraph tells your browser to insert a blank or empty line and th begin a new line (a new paragraph).

</H5> THIS IS NORMAL SIZE.</H4> THIS IS NORMAL SIZE. <H2>THIS IS H2.</H2> THIS IS NORMAL SIZE. H1 produces the largest size heading and is called the "level 1 heading" H6 produces the smallest size heading and is called the "level 6 heading EXAMPLE : <HTML> <HEAD> <TITLE>HEADING LEVELS</TITLE> </HEAD> <BODY> <H1>THIS IS H1. <H6>THIS IS H6. <H5>THIS IS H5. HEADER tags are logical tags and used extensively in HTML documents to display headings There are only six HEADER tags and they range from H1 to H6. <H4>THIS IS H4.</H6> THIS IS NORMAL SIZE.<B>behinds of Gools <B/> </BODY> </HTML> HEADER TAGS Headings are controlled by HEADER tags.</H3> THIS IS NORMAL SIZE.</H1> THIS IS NORMAL SIZE.<HR> </BODY> </HTML> CENTERING TEXT TAXT TAGS The center command is: ALIGN="CENTER" And must be used in conjunction with a HEADER tag or the PARAGRAPH tag LIKE:<H2 ALIGN="CENTER">a heading goes here</H2> or 13 . <H3>THIS IS H3.

Text formatting 2. In the above example you have seen <html>. Heading styles 3. More complicated tags contain one or more attributes . tag and attribute names are not case-sensitive. which specify or modify the behavior of the tag. Paragraphs formatting 14 . are called HTML tags or HTML elements. Every language or Script they have their own comments. <Head>. According to the HTML standard. or even <HeaD>. Every tag consists of a tag name. Fonts formatting 4. <body> etc. they are all equivalent . It is possible to include comments in a source HTML document that do not appear when seen through a browser An HTML comment begins with "<!--". all placed between opening and closing brackets (< and >). There's no difference in effect between <head>. <HEAD>. Example: <!-----This comment will not appear in the browser-----> HTML Tags and Elements and attributes : HTML language is a markup language and we use many tags to markup text. ends with "-->" and does not contain "--" or ">" anywhere in the comment. Unit 3: HTML Formatting Elements 1.<P ALIGN="CENTER">a paragraph or block of text goes here</P> HTML Comment Tag Comments are non-executable statements or ignore statements.

without any extra importance.</p> 15 . Color 6. Example: <p>This text is normal. text. centered text. Marquee Html tags you type in your text To get large print.</p> <p><b>This text is bold</b>. Text in italics and etc. Formatting elements were designed to Display special types of text:  Bold text  Italic text  Emphasized text  Marked text  Small text  Deleted text  Inserted text  Subscripts  Superscripts HTML Bold and Strong Formatting The HTML <b> element defines bold text. 5.

</p> Note: Browsers display <strong> as <b>.The HTML <strong> element defines strong text. HTML Small Formatting The HTML <small> element defines small text: Example: <h2>HTML <small>Small</small> Formatting</h2> HTML Marked Formatting The HTML <mark> element defines marked or highlighted text: 16 .</p> The HTML <em> element defines emphasized text. Example: <p>This text is normal. with added semantic "strong" importance.</p> HTML Italic and Emphasized Formatting The HTML <i> element defines italic text.</p> <p><i>This text is italic</i>.</p> <p><em>This text is emphasized</em>. Example: <p>This text is normal.</p> <p><strong>This text is strong</strong>. Example: <p>This text is normal. and <em> as <i>. with added semantic importance.

Example:

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML Deleted Formatting

The HTML <del> element defines deleted (removed)
of text.

Example:

<p>My favorite color is <del>blue</del> red.</p>
HTML Inserted Formatting

The HTML <ins> element defines inserted (added)
text.

Example:

<p>My favorite <ins>color</ins> is red.</p>
HTML Subscript Formatting
The HTML <sub> element defines subscripted text.

Example:

<p>This is <sub>subscripted</sub> text.</p>

HTML Superscript Formatting
The HTML <sup> element defines superscripted text.

Example
<p>This is <sup>superscripted</sup> text.</p>

17

HTML Text Fonts

The font-family property defines the font to be used for an HTML
element:

EXAMPLE

<Html>

<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>

</html>

-HTML Text Size
The font-size property defines the text size to be used
for an HTML element:

<html>

<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p> </body>
</html>

HTML Text Alignment
The text-align property defines the horizontal text
alignment for an HTML element
<html>
<body>
<h1 style="text-align:center">Centered
Heading</h1>
18

<p>This is a paragraph.</p></body>
</html>

Preserve Formatting - The <pre> Element:
If we specify the text in pre tag, the browser will consider the
line breaks (Return / Enter keys) and spaces specified in the
text editor (notepad). Pre is a container tag.

Syntax: <pre>---------------</pre>

Example:
<html>
<title>
Pre formated Tag
</title>
<head>
<b><h1 align="center">I am Learning Web Language
HTML</b></h1>
</head>
<body>
<pre>
Text in a pre-element is displayed
in a fixed-width font,
and it preserves both spaces and
line breaks
</pre> </body> </html>

HTML Styles
Every HTML element has a default style (background color is white, text color
is black, text-size is 12px ...)

Changing the default style of an HTML element, can be done with the style
attribute.

This example changes the default background color from white to lightgrey:

<body style="background-color:lightgrey">
19

HTML colors are defined using a hexadecimal (hex) notation for the combination of Red. Green. The lowest value that can be given to one of the RGB is 0 (hex 00). starting with a # sign. Hex values are written as 3 double digit numbers. and Blue color values (RGB).</p> </body> </html> Font color COLOR: sets the font's color as color name or hexadecimal value.<h1>This is a heading</h1> <p>This is a paragraph. The highest value is 255 (hex FF). 20 .</p> </body> HTML Text Color The color property defines the text color to be used for an HTML element: <html> <body> <h1 style="color:blue">This is a heading</h1> <p style="color:red">This is a paragraph. Colors come as attributes of some tags. <BODY BGCOLOR = "#00FF00" TEXT = "DARKBLUE"> <HR COLOR = "BLUE"> <FONT COLOR = "#0000FF"> Note that HTML does not have separate tag for setting colors. such as <BODY>.

An RGB color value is specified with: rgb(red. }</style> <body><div><h1>bosaso is the capital city of bari r. rgb(0. The following table shows some more examples of creating a color: Value Color Value Color 00FF00 Green 0000FF Blue FFFFFF White 000000 Black FFFF00 Yellow FF00FF Magenta 00FFFF Cyan 808080 Gray RGB Colors RGB color values are supported in all browsers.HTML supports 16. <!DOCTYPE html> <html> <style> div { background-color: rgb(0. green. color: rgb(255. 255). For example.</h1> </div> </body></html> 21 . 255.88 million unique color definitions. and blue) defines the intensity of the color as an integer between 0 and 255. 255) is rendered as blue. Each parameter (red. because the blue parameter is set to its highest value (255) and the others are set to 0. blue). padding: 20px. 191. 255). green. 0.

Summary HTML Text Formatting Elements Tag Description <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small Defines smaller text > <stron Defines important text g> <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <mark Defines marked/highlighted > text <font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font face="verdana" color="green">This is some text!</font> 22 .

.</marquee> </body> </html> 23 ... HTML <marquee> Tag The HTML <marquee> tag is used for scrolling piece of text or image displayed either Horizontally across or vertically down your web site page Syntax A simple syntax to use HTML <marquee> tag is as follows: <marquee attribute_name="attribute_value".more attributes> One or more lines or text message or image </marquee> Example <html> <head> <title>HTML marquee Tag</title> </head> <body> <marquee>This is basic example of marquee</marquee> <marquee direction="up">The direction of text will be from bottom to top.

which loop means that the marquee loops endlessly. This can be direction value like up. This specifies horizontal space around the marquee. This specifies vertical space around the marquee. down. left or right. This can be a value like 10 or 20% height etc. The default value is INFINITE. This specifies how long to delay between each jump. bgcolor This specifies background color in terms of color name or color hex value. This specifies the direction in which marquee should scroll. This can be a value lik hspace 10 or 20% etc. This specifies the type of scrolling of the marquee. This can be a value like 10 vspace or 20% etc. This will have a valu scrolldelay like 10 etc. This specifies the height of the marquee.The <marquee> Tag Attributes Following is the list of important attributes which can be used with <marquee> tag. This can be a value like 10 or 20% width etc. Attribute Description This specifies the width of the marquee. Example 2 <html> 24 . slide and alternate. This specifies how many times to loop. This can have a value like behavior scroll.

<head> <title>HTML marquee Tag</title> </head> <body> <marquee width="50%">This example will take only 50% width</marquee> </body> </html> Example 3 <html> <head> <title>HTML marquee Tag</title> </head> <body> <marquee direction="right">This text will scroll from left to right</marquee> </body> </html> Example 4 <html> <head> <title>HTML marquee Tag</title> </head> 25 .

<body> <marquee direction="up">This text will scroll from bottom to up</marquee> </body> </html> Example 5 <html> <head> <title>HTML marquee Tag all attributes </title> </head> <body> <marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee></body> </html> 26 .

<UL> and </UL>. Creating Tables 3. Using numbers Definition list: A list that defines glossary list. The second. <LI> and </LI> defines each item within the list. List and types of list 2. <html> <Head> <title> Un-ordered Lists</title> <head> <Body> <h1> list of student </h1> 27 . defines the beginning and end of the entire list. Creating links and common types of hyperlinks CREATING LISTS There are three fundamental types of lists Unordered list: A list that defines a group of items that are related to one another By bullets Ordered list: A list that defines an order or a series of events. Un-ordered Lists The first.UNIT 4: CREATING LISTS AND TABLES AND HYPERLINKs 1. terms and its definition.

<OL> and </OL>. <html> 28 .<Ul> <li> asad Mohamed</li> <li> faaduma ahmed</li> <li> ibrahin ali</li> <li> naima abd1</li> </Ul> </body> </html> Attributes of Un Ordered list: Use of the type attribute in an unordered HTML list: Value Description disc Default. <LI> and </LI> defines each item within the list. defines the beginning and end of the entire list. A filled circle circle An unfilled circle square A filled square Example <ul type="square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Ordered list tags and attributes : The first. The second.

7.) Start(number) Specifies the start value of an ordered type Specifies the kind of marker to use in the list Example An ordered list with uppercase roman numbers 29 .8.<Head> <title> ordered Lists</title> <head> <Body> <h1> list of items </h1> <ol> <li> pen</li> <li> book</li> <li> pencil </li> <li> mobile</li> <li> computers </li> </ol> </body> </html> Attributes of Un Ordered list: Use of the type attribute in an unordered HTML list: Value Description Specifies that the list order Reversed should be descending (9...

<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> 30 .

The third. <html> <Head> <title> Definition list </title> <head> <Body> <h1> list of terms </h1> <Dl> <dt> html</dt> <dd> hyper text markup languages </dd> <dt> php </dt> <dd> personal home page </dd> </dl> </body> </html> 31 . <DT> and </DT> defines each term within the list. The second. defines the beginning and end of the entire list. <DD> and </DD> defines term's definition.Definition list The first. <DL> and </DL>.

<TD> </TD> Defines a new cell (column). Tables also play an important role when it comes to a user’s screen resolution you will first learn about the table tags shown in the following table: Starting Tag Ending Tag Description <TABLE> </TABLE> Defines the table. > > EXAMPLE <html> 32 . CREATING TABLES Tables are commonly used to create three-column and two- column newsletter layouts. top. <TFOOT> </TFOOT> Row grouping. <TR> </TR> Defines a new row. <THEAD> </THEAD> Row grouping. <COL> </COL> Column grouping. <COLGROUP </COLGROUP Column grouping. or right of the table. <CAPTION> </CAPTION> Defines a caption for the table that can be placed to the left. <TBODY> </TBODY> Row grouping. <TH> </TH> Defines a table header cell. bottom.

Normally you will put your top row as table heading <html> <head> 33 . Column 1</td> <td>Row 2. Column 2</td> </tr> </table> </body> </html> Table Heading Table heading can be defined using <th> tag. This tag will be put to replace <td> tag. which is used to represent actual data cell. Column 1</td> <td>Row 1. Column 2</td> </tr> <tr> <td>Row 2.<head> <title>HTML Tables</title> </head> <body> <table border="1"> <tr> <td>Row 1.

The cellspacing attribute defines the width of the border. while cellpadding 34 .<title>HTML Table Header</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Asad</td> <td>5000</td> </tr><tr> <td>Hussein</td><td>7000</td></tr> </table> </body> </html> Cellpadding and Cellspacing Attributes There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells.

represents the distance between cell borders and the content within a cell. <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> 35 .

Similar way you will use rowspan if you want to merge two or more rows.</table> </body></html> Colspan and Rowspan Attributes You will use colspan attribute if you want to merge two or more columns into a single column. <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> 36 .

column 1</td><td>row 2. columnn 2</td> </tr> <tr> <td>row 2. columnn 2</td> </tr> </table></body> </html> 37 .<tr><td colspan="3">Row 3 Cell 1</td></tr> </table></body> </html> Table Caption The caption tag will serve as a title or explanation for the table <html> <head> <title>HTML Table Caption</title> </head> <body> <table border="1" width="100%"> <caption>This is the caption</caption> <tr> <td>row 1. column 1</td><td>row 1.

38 .

<tbody> . a body. body. Body. <tfoot> . Example <html> <head> <title>HTML Table</title> </head> <body> <table border="1" width="100%"> <thead> <tr> <td colspan="4">this is the head of the table</td> </tr> 39 . and a foot. and foot of a table are: <thead> . and Footer Tables can be divided into three portions: a header. A table may contain several <tbody> elements to indicate different pages or groups of data.Table Header.to create a separate table header. The three elements for separating the head.to indicate the main body of the table.to create a separate table footer.

</thead><tfoot> <tr> <td colspan="4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> </body> </html> 40 .

PAGE" target="_self">MYPAGE</a> </body> </html> 41 . and images. phrases. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag Syntax < A HREF="FIRST.HML" TARGET="-SELF"> MYPAGE</A> <Html> <head> <title>Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href="FIRST. Thus you can create hyperlinks using text or images available on a webpage Linking Documents A link is specified using HTML tag <a>. CREATING HYPERLINKS Hyperlinks allow visitors to navigate between Web sites by clicking on words.

HTML" target="_blank">Opens in New</a> | <a href="SECOND. _paren Opens the linked document in the parent frame.HTML" target="_parent">Opens in Parent</a> | <a href="FOUR. Following are possible options: Optio Description n _blank Opens the linked document in a new window or tab.HTML" target="_top">Opens in Body</a</body></html> 42 . t Opens the linked document in the full body of the _top window. _self Opens the linked document in the same frame.HTML" target="_self">Opens in Self</a> | <a href="THID. <html> <head><title>Hyperlink Example</title> </head> <body> <p>Click any of the following links</p> <a href="FIRST. The target Attribute This attribute is used to specify the location where linked document is opened.

> tag as follows: <h1>HTML Text Links <a name="top"></a></h1> Second step is to create a hyperlink to link the document and place where you want to reach: <a href="FIRST.com/"> </head> <body alink="#54A250" link="#040404" vlink="#F40633"> 43 . alink and vlink attributes of <body> tag. Setting Link Colors You can set colors of your links. This is a two step process. First create a link to the place where you want to reach with-in a webpage and name it using <a. alink and vlink attributes work.. Example Save the following in test.. where you can click on the link generated Go to the Top to reach to the top of the HTML Text Link tutorial.Linking to a Page Section You can create a link to a particular section of a given webpage by using name attribute. active links and visited links using link. <html> <head> <title>Hyperlink Example</title> <base href="http://www.HTML#top">Go to the Top</a> This will produce following link.htm and open it in any web browser to see how link.tutorialspoint.

<p>Click following link</p> <a href="index.htm" target="_blank" >HTML LINKS</a> </body> </html> 44 .

example. www.PAGE" target="_self"> <img src="logo. with Hypertext Transfer Protocol (HTTP).png" alt="HTMLCOURSE" border="0"/> </a> </body> </html> Link to another web site: To link to another web site.Image Links We just need to use an image inside hyperlink at the place of text <Html> <head> <title>Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href="FIRST. for example East Africa University web site: <A HREF = "http://www.com.eastafricauniversity. and double forward slash (http://).net" TITLE = "Visit EAU Web site" TARGET = "_blank">East Africa University official web site</A> Do not forget to precede the domain name for example. 45 . colon sign.

The E-Mail Me text appears just like any other text- based hyperlink. it is customary to include at least one e-mail address. 46 . This is where users typically look to find either the Webmaster’s e-mail address or some type of support address to send questions or comments . The new e-mail message will be automatically addressed to the individual(s) defined by the hyperlink. An anchor tag for an e-mail address looks like the following: <A HREF = "mailto:info@eastafricauniversity.net?subject = Inquiry">E-Mail Me</A> The word mailto is a protocol that launches Outlook Express program.E-Mail Links: Many sites include hyperlinks that will launch a user’s e-mail application and create a new e-mail message. At the bottom of each and every Web page.

47 .

it contains attributes only.height:228px"> </body> </html> The alt Attribute The alt attribute specifies an alternate text for the image. The src attribute defines the url (web address) of the image: Example <Html> <HEAD> <TITLE> SAWIRR</TITLE></HEAD> <body> <h2>SAWIKAN EEG </h2> <img src="ABC. images are defined with the <img> tag.jpeg" alt="SAWIR View" style="width:304px.UNIT 5: WORKING WITH IMAGES AND USING AUDIO AND VIDEO 1. Inserting audio and sound formats 3. and does not have a closing tag. if it cannot be displayed. Inserting images to your html files 2. Inserting video and video formats INSERTING IMAGES HTML Images Syntax In HTML. 48 . The <img> tag is empty.

Note: An image has no border by default.<Html> <HEAD> <TITLE> SAWIRR</TITLE></HEAD> <body> <h2>SAWIKAN EEG </h2> <img src="ABC.gif" alt="Smiley face" border="5"> 49 . <img src="smiley.jpeg" alt="SAWIR View" style="width:304px.height:228px"> </body> </html> Definition and Usage The border attribute specifies the width of the border around an image.

there was no standard for playing audio files on a web page. do not support the <audio> element. and Safari support the <audio> element. The HTML <audio> Element To play an audio file in HTML. Before HTML5.mp3" type="audio/mpeg"> 50 . Chrome. Firefox. The HTML5 <audio> element specifies a standard way to embed audio in a web page. Internet Explorer 9+. audio files could only be played with a plug-in (like flash). Opera. MULTIMEDIA IN HTML Audio on the Web Before HTML5. use the <audio> element: <html> <head> <TITLE> vidoi</title> </head> <body> <h1> KU SOO DHAWAAW GABayGAN WACAN </h2> <audio controls> <source src="xaq. Note: Internet Explorer 8 and earlier versions.

pause.Media Types File Media Forma Type t audio/mp MP3 eg audio/og Ogg g audio/wa Wav v The HTML <video> Element To show a video in HTML.Your browser does not support the audio element. HTML Audio . use the <video> element: <video width="320" height="240" controls> <source src="1234. and volume.How It Works The controls attribute adds audio controls. like play. </audio> </body> </HTML> Note: HTML Audio . </video> EXAMPLE <html> 51 .mp4" type="video/mp4"> Your browser does not support the video tag. Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.

Media Types File Media Format Type video/mp MP4 4 video/web WebM m video/og Ogg g 52 .<head> <TITLE> vidoi</title> </head> <body> Gabaygan <video width="320" height="240" controls> <source src="1234.mp4" type="video/mp4"> </video> </body> </HTML> HTML Video .

etc.<FORM> tag attributes Attribute Description NAME Name of the form. Working with Frames What Are Form? A form is made up of a collection of input controls. their tag syntax and descriptions: 53 . file uploads. password fields. Each HTML document can have zero. <TEXTAREA>. You use <FORM> tag to enter form and it has closing tag /FORM>. buttons. hidden buttons.UNIT 6 CREATING FORMS AND FRAMES 1. ACTION Tells the server which page to go to once the user has clicked a submit button on the form. The following table shows form controls. submit button. text area fields. all derivatives of three tags (<INPUT>. or many forms within its page. The various types of controls. and <SELECT>). checkboxes. reset button. Form controls are elements that allow the user to enter information such as text fields. METHOD Controls the way that information is sent to the server. Creating forms and form elements and attributes 2. drop-down menus. one. image button. Form Controls Forms can contain a variety of controls. radio buttons.

Control Type Syntax Description Text box <INPUT TYPE = Allows the user to enter one "text"> line text. when button "submit"> activated. Password <INPUT TYPE = Allows the user to enter text "password"> but masks each character with an asterisk "*". File <INPUT TYPE = 54Upload file to a web server . "button"> Hidden <INPUT TYPE = Same as textbox but it is button "hidden"> hidden so user cannot control it. Submit <INPUT TYPE = Creates a button that. Button <INPUT TYPE = Creates a user-defined button. Radio <INPUT TYPE = Allows users to choose a single button "radio"> item from a group of items. Checkbox <INPUT TYPE = Allows users to choose a single "checkbox"> or multiple item/items from a group of items. sends the form data to the Web server. Reset <INPUT TYPE = Clears all controls on the form button "reset"> and sets them to the default values.

NAME All Sets the name of the control. If the SIZE attribute is equal to 1 then the menu is a Dropdown otherwise it is a List box. button "image"> Dropdow <SELECT SIZE = Allows users to pick from a n "1"> list. Textarea <TEXTAREA> Allows users to enter multi-line text.upload "file"> (attachment). Default is TYPE All text. Image <INPUT TYPE = Image acts as submit button. This attribute and others are summarized in the following table: Attribute Applies To Description Sets the type of control. All radio buttons within the form should be 55 . You use the TYPE attribute to specify the specific type of control. The name of the control gets passed along to the Web server to help you identify the data. <INPUT> Tag The <INPUT> tag is used to create a number of controls.

Specifies width of the image in WIDTH Image pixels or percentage. the same name. For submit. and button it sets the caption of the control. For text. password. reset. hidden. reset. and button Text and Sets the display width in SIZE password characters. radio. submit. For radio. it will be CHECKED selected. Specifies height of the image in HIEGHT Image pixels or percentage. and hidden password. For checkbox. it will be checked. text. Specifies image source and takes SRC Image image name plus extension. For radio and checkbox it sets the VALUE checkbox. Radio and Sets the default state of the checkbox control. Study the following example: 56 . controls it sets the initial value. MAXLENGT Text and Sets the maximum number of H password characters the user may enter. value sent if control is selected.

<BODY> <CENTER><B>Application Form</B></CENTER> <FORM> <B>Your Name: <INPUT TYPE = "TEXT" VALUE = "MOHAMED"><P> Your Password:<INPUT TYPE = "PASSWORD"><P> Gender: Male<INPUT TYPE = "RADIO" NAME = "A" CHECKED>Female<INPUT TYPE = "RADIO" NAME = "A"><P> Faculty: <INPUT TYPE = "CHECKBOX">Sharia <INPUT TYPE = "CHECKBOX">BBA <INPUT TYPE = "CHECKBOX" CHECKED>BCS<P> <INPUT TYPE = "RESET" VALUE = "CLEAR"> <INPUT TYPE = "SUBMIT" VALUE = "SEND"> </FORM> </BODY> The output of the code will be as follows: 57 .

58 . The name of the control gets passed along to the Web server to help you identify the data. The following table shows the attributes available for the <SELECT> tag. allows the user to select more than one E item. Values greater than 1 set the number of elements the listbox will show at one time. Creates a listbox control if set to greater than 1. MULTIPL If present. Only valid if SIZE is greater than 1. while the listbox controls can be configured to allow multiple selections. Attribute Description NAME Sets the name of the control. What sets these two apart is the value of the SIZE attribute. Using a SIZE attribute greater than 1 will generate a listbox control. Dropdown controls allow the user to select only one item from the list. Using the <SELECT> tag with the SIZE attribute of 1 will generate a dropdown control.<SELECT> Tag HTML uses the <SELECT> tag to create both the dropdown (combobox) control and the listbox control. Both the listbox and dropdown controls are useful in providing the user with a long list of options to choose from. SIZE Creates a dropdown control if set to 1.

To have an item default to being selected. These attributes do not limit the number of characters the user can enter. you need to use the textarea control. If you need to allow your users to enter multi-line text-based data. like for a comments field or for shipping instructions. Each <OPTION> tag represents one item in the list. The <TEXTAREA> tag includes ROWS and COLS attribute to allow you to set the width and height of the control.Between the opening and closing tags of <SELECT> there are one or many <OPTION> tags. it simply defines how many characters the user can see at one time. Here is an example of dropdown menu and Textarea: <BODY> <CENTER><B>Application Form</B></CENTER> <FORM> <B>Secondary school: <SELECT> <OPTION>Omar Samatar<OPTION>Imam Nawawi<OPTION>Hamdan<OPTION>Shafici<OPTION>Ibn Hajar <OPTION>Najah<OPTION>Al-Waha <OPTION>Qardho<OPTION>Baran<OPTION>Al-Furqan </SELECT><BR> 59 . Between the opening and closing <TEXTAREA> tag. include the SELECTED attribute within the <OPTION> tag of that item. <TEXTAREA> Tag The text control created by the <INPUT> tag cannot accept carriage returns because it is a single-line control. Between the opening and closing <OPTION> tags is the string you wish to include as that item and they will be ordered in the order they appear between the <SELECT> tags. include any content you would like to appear within the textarea control as a default.

Other comment: <BR><TEXTAREA ROWS = "15" COLS = "20">Further information</TEXTAREA><BR><P><P> <IPUT TYPE = "RESET" VALUE = "CLEAR"></B> <INPUT TYPE = "SUBMIT" VALUE = "SEND"> </FORM> </BODY> The following is the output of the code: 60 .