Share this:
WEBSITE DEVELOPMENT
INTRODUCTION
HTML, an initialism of Hypertext Markup Language, is the predominant markup language for web pages. I provides a means to describe the structure of text- based information in a document by denoting certain text as lines, headings, paragraphs, lists and so on.HTML is written in the form of labels (known as tags or elements),surrounded by angle brackets.
HTML pages are used for specifying web page content. They contain information and instructions to web browsers that inform them of what to display, and how it should be displayed. It is a simple format, easily learnt, and can support a number of media devices, such as sound, graphic images, and video.
HTML documents are ASCII files, and are created using a simple text editor (or an editor like Front Page). With a text editor, you cannot see what the code looks like in the browser, unless you save the page and then load it into the browser for viewing. WYSIWYG (What you see is what you get) editors like Front Page allow you to view the page as it is constructed in the editor window.
One advantage of using a simple text editor is that you have more control over the HTML code; the disadvantage is you must know the code and have a picture in your mind as to what it looks like. Another disadvantage, is since HTML is becoming more complex, it is harder to write, and sophisticated editors like Front Page support the advanced features making it easier for you to implement them.
HTML is a series of tags enclosed in <and> brackets. For instance,is an HTML tag that defines a head section of an HTML document. Certain characters are reserved, such &which are interpreted as HTML codes.
Explanation:
The first tag in your HTMl document is <HTML>.This tells your browser that, this is the start of an HTML document. The last tag in your document is <⁄HTML>. This tag tells your browser that this is the end of the HTML document.
The text between the tag and the <HEAD> tag and the <⁄HEAD>is header information. Header information is not displayed in the browser window. The text between the <TITLE> tag is the title of your document. The title is displayed in your browser. The text between theand tags will be displayed in a bold font.
Each HTML page adheres to a basic structure. This looks like
When viewed in the browser, this page looks like.
Textual Information to be displayed |
HTML TEXT FORMATTING
HTML TAGS
HTML codes are not case sensitive. Most HTML tags need an end-tag to end it. An example of an HTML tag is , <HEAD> and the end tag for this is <⁄HEAD>.
HTML codes are not case sensitive. Most HTML tags need an end-tag to end it. An example of an HTML tag is , <HEAD> and the end tag for this is <⁄HEAD>.
BOLD TYPE
The BOLD print tag starts with <B> and ends with<⁄B> so that all text in-between the tags is printed in bold.
The BOLD print tag starts with <B> and ends with<⁄B> so that all text in-between the tags is printed in bold.
Example of using the bold tag
- the source in the HTML page looks like
<B>This is bold text <⁄B> and this is not.
- the resultant output by the browser looks like
This is bold text and this is not.
SPACES, TABS AND FORMATTING
Newlines, spaces and tabs are ignored (single spaces accepted).
Newlines, spaces and tabs are ignored (single spaces accepted).
Example of spaces in the input text
- the source in the HTML page looks like
∙ This line contains heaps of spaces.
- the resultant output by the browser looks like
This line contains heaps of spaces.
To format text literally, the <PRE> and <⁄PRE>tags are used. This is how the above line that contains all the spaces was inserted into this document.
LARGE SIZE TEXT
There are 6 header sizes, from H1, the smallest, to H6, the largest. The HTML tags <H1> to <H6> are used to define the size of text. The normal size is about<H2>.
Examples of using the tag to implement larger style text
- the source in the HTML page looks like <H3> This is header size 3 <⁄H3>
- the resultant output by the browser looks like:
This is header size 3
ITALIC TEXT
The ITALIC print tag starts with <I> ends with <⁄I> so that all text in-between the tags is printed in italics.
The ITALIC print tag starts with <I> ends with <⁄I> so that all text in-between the tags is printed in italics.
Example of using the italics tag
- the source in the HTML page looks like
<I>This is italic text<⁄I> and this is not. - the resultant output by the browser looks like
This is italic text and this is not.
A PAGE TITLE
A page title, specified on an HTML page, appears in the title window of the browser.
A page title, specified on an HTML page, appears in the title window of the browser.
- add a title which appears in the title bar of the browser
<TITLE>This appears in the title window<⁄TITLE>
A HORIZONTAL DIVIDER
This is used for breaking pages up, by separating sections using a horizontal line.
This is used for breaking pages up, by separating sections using a horizontal line.
- the source in the HTML page looks like <HR>
- the resultant output by the browser looks like
In addition, a number of effects can be applied to a horizontal rule, such as color, size and width tags.
- the source in the HTML page looks like
- the resultant output by the browser looks like
ADDING IMAGES
Graphic images are added to an HTML page using the <IMG> tag.
Graphic images are added to an HTML page using the <IMG> tag.
- the source in the HTML page looks like
<IMG SRC=”http://msomimaktaba.blogspot.com/icon.gif”>This is an icon - the resultant output by the browser looks like
This is an icon
LINKING TO OTHER PAGES
This is called a hyper-link. It shows up in the document as underlined text, and allows the user to load another page.
This is called a hyper-link. It shows up in the document as underlined text, and allows the user to load another page.
- the source in the HTML page looks like
<A href=”basichtm.html”> Goto next page <⁄A> - the resultant output by the browser looks like
Goto next page
FONT SIZES, FACES AND COLOR
You can specify the font face, size and color using the <FONT>tag. Some systems may not have the desired font installed on their system.
You can specify the font face, size and color using the <FONT>tag. Some systems may not have the desired font installed on their system.
- specify font size and color and type of font, the source in the HTML page looks like
<FONT face=”comic sans MS” size=4 color=green> - the resultant output by the browser looks like
Hello There
BACKGROUND IMAGES
An image (.gif or .jpg) can be used as a background. It should be reasonably pale so as not to distract from the displayed information.
An image (.gif or .jpg) can be used as a background. It should be reasonably pale so as not to distract from the displayed information.
- the source in the HTML page looks like <BODY background=”../backgnds/blue_pap.gif”>
You can also specify a background color rather than an image. The sixteen basic colors are AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, and YELLOW.
- the source in the HTML page looks like <BODY BGCOLOR=”WHITE”>
BACKGROUND SOUNDS
A background sound is loaded and plays when the HTML page is loaded by the browser. The HTML tag specifies the filename to play (which is generally a .wav file for window systems), whilst the LOOP statement specifies the number of times to play the sound.
A background sound is loaded and plays when the HTML page is loaded by the browser. The HTML tag specifies the filename to play (which is generally a .wav file for window systems), whilst the LOOP statement specifies the number of times to play the sound.
- the source in the HTML page looks like <BGSOUND src=”http://msomimaktaba.blogspot.com/sounds/whales.wav”loop=”1″>
IMAGES AS HYPERLINKS
It is common to use little pictures or Icons as links to other pages, for example, the little red up triangle’s used in this document are used as hyperlinks to the top of this page.
It is common to use little pictures or Icons as links to other pages, for example, the little red up triangle’s used in this document are used as hyperlinks to the top of this page.
- the source in the HTML page looks like
<A href=”basichtm.htm”><IMG src=”http://msomimaktaba.blogspot.com/icon.gif” width=”57″ height=”40″ border=0 alt=”click here”><⁄A> - the resultant output by the browser looks like
This is the same as inserting an image, then making the image a hyperlink.
EMBEDDED VIDEO
Some browsers such as Internet Explorer support video embedded on the HTML page. The <IMG> tag is extended to include DYNSRC which specifies the location of the video file, LOOP which specifies how many times to play, and START, which specifies how the movie will play (MOUSEOVER or FILEOPEN).
Some browsers such as Internet Explorer support video embedded on the HTML page. The <IMG> tag is extended to include DYNSRC which specifies the location of the video file, LOOP which specifies how many times to play, and START, which specifies how the movie will play (MOUSEOVER or FILEOPEN).
- the source in the HTML page looks like
<IMG SRC=”http://msomimaktaba.blogspot.com/video/avi/cit stuff/surface.jpg” DYNSRC=”../videos/avi/cit stuff/surface.avi” LOOP=2 START=MOUSEOVER width=240 height=180 alt=”Rise”> - the resultant output in the browser looks like
You should be aware that browsers that do not support embedded video need the SRC statement so a graphic image is displayed if the movie file is not found or is not supported.
Using the Reserved Characters & < > as text
As was stated earlier, the characters & < > are reserved to implement HTML tags. To use these as text requires the use of a special code sequence,
As was stated earlier, the characters & < > are reserved to implement HTML tags. To use these as text requires the use of a special code sequence,
HTML Tag | Resultant Output |
& | & |
< | < |
> | > |
© | © |
“ | “ |
insert a space | |
® | © |
Embedding a video or sound object
One of the problems of using the background sound tag is that is it only supported by Internet Explorer. To use video and sound that will play in both Netscape Navigator and Internet Explorer, use the EMBED tag. It’s format is shown below.
One of the problems of using the background sound tag is that is it only supported by Internet Explorer. To use video and sound that will play in both Netscape Navigator and Internet Explorer, use the EMBED tag. It’s format is shown below.
<EMBED src=”http://msomimaktaba.blogspot.com/sounds/intro2.wav” border=”0″ width=”145″ height=”60″ autostart=”TRUE”><⁄EMBED>
The src is the path to the object, the height and width is the screen space allocated to displaying the object.
To create a table:
Example:
Example:
Save your codes as tabe.html
Then open your work where you save it.
OUT PUT
OUT PUT
HTML Forms:
A form is a graphical user interface with text entry fields and buttons, check boxes, pull down menus, scrolling lists. Etc. form elements are elements that allow the user to enter information in a form.
A form is a graphical user interface with text entry fields and buttons, check boxes, pull down menus, scrolling lists. Etc. form elements are elements that allow the user to enter information in a form.
To create a simple Form.
Save the page as form.html
Open form.html where you save
OUTPUT
First name:
Last name:
First name:
Last name:
OUT PUT:
INTRODUCTION TO JAVASCRIPT
JavaScript
JavaScript is a scripting language designed to enhance HTML pages and provide functionality such as data validation, forms and interaction with form elements. It is a language created by Netscape, and is not Java. It is embedded into an HTML document and interpreted by the client browser. It is supported by both Internet Explorer and Netscape Navigator.
JavaScript is a scripting language designed to enhance HTML pages and provide functionality such as data validation, forms and interaction with form elements. It is a language created by Netscape, and is not Java. It is embedded into an HTML document and interpreted by the client browser. It is supported by both Internet Explorer and Netscape Navigator.
Inserting JavaScript into HTML Documents
JavaScript statements are inserted into HTML documents using the
The <SCRIPT> tag surround the JavaScript code. In addition, this is further wrapped using the embedded comment tags. The embedded comment tags prevents browsers which do not support the script tag from displaying the JavaScript code.
JavaScript statements are inserted into HTML documents using the
The <SCRIPT> tag surround the JavaScript code. In addition, this is further wrapped using the embedded comment tags. The embedded comment tags prevents browsers which do not support the script tag from displaying the JavaScript code.
In this particular case, the opening
The use ofis for browsers which do not support JavaScript, so if you were using such a browser, the line would have read
Last modified 19th March 97.
Example 1
The following example embeds the current date and time directly into the HTML document.
The following example embeds the current date and time directly into the HTML document.
The date is Sat Dec 13 2014 10:10:35 GMT-0800 (Pacific Standard Time)
The code for this is as follows……..
<SCRIPT language=”javascript”>
<!– start of javascript hide from old browsers document.write(date())–>
<⁄SCRIPT>
<SCRIPT language=”javascript”>
<!– start of javascript hide from old browsers document.write(date())–>
<⁄SCRIPT>
The <SCRIPT> and <⁄SCRIPT> tags surround the JavaScript code. In addition, this is further wrapped using the embedded comment tags <!–and–>. The embedded comment tags prevents browsers which do not support the script tag from displaying the JavaScript code.
In this particular case, the opening <SCRIPT> tag specifies the language to be used as JavaScript.
Another example shown below displays the last modified date and time of the document.
Last Modified 01/14/1999 07:00:00
The code for this is as follows.
Last modified
<SCRIPT language=”javascript”>
<!– start of javascript hide from old browsers document.write(document.lastmodified);//–>
<⁄SCRIPT>
<NOSCRIPT>
19th march 97.
<⁄NOSCRIPT>
Last modified
<SCRIPT language=”javascript”>
<!– start of javascript hide from old browsers document.write(document.lastmodified);//–>
<⁄SCRIPT>
<NOSCRIPT>
19th march 97.
<⁄NOSCRIPT>
The use of <NOSCRIPT> and <⁄NOSCRIPT> is for browsers which do not support JavaScript, so if you were using such a browser, the line would have read
Last modified 19th March 97.
The Window Status Bar
The bottom line of the browser window is called the STATUS BAR. Using JavaScript, you can write directly to the status bar. Consider the following example, which displays a message in the status bar.
The bottom line of the browser window is called the STATUS BAR. Using JavaScript, you can write directly to the status bar. Consider the following example, which displays a message in the status bar.
Look at the status bar to see this text displayed there now.
<script language=”javascript”>
<!–start of javascript hide from old browsers window.status=’welcome to my page’;//–>
<⁄script>
<script language=”javascript”>
<!–start of javascript hide from old browsers window.status=’welcome to my page’;//–>
<⁄script>
OnMouseOver
Well, that was pretty neat. But it would be nice to have the contents of the status bar change from time to time, for instance, when the mouse cursor moves over a hyper-link, the status bar could display a message which informs you of what the hyper-link is all about. To do this, the mouseover statement is added. Consider the following example.
Well, that was pretty neat. But it would be nice to have the contents of the status bar change from time to time, for instance, when the mouse cursor moves over a hyper-link, the status bar could display a message which informs you of what the hyper-link is all about. To do this, the mouseover statement is added. Consider the following example.
<A href=”whatisjs.htm” target=”_top”
onmouseover=”window.status=’Click here to learn about JavaScript’; return true”>
<⁄IMG<⁄A>
onmouseover=”window.status=’Click here to learn about JavaScript’; return true”>
<⁄IMG<⁄A>
Message Box Alerts
The next thing we will discuss in message boxes. Sometimes, when a user clicks on something, you want to pop up a message box. The following example does just that.
The next thing we will discuss in message boxes. Sometimes, when a user clicks on something, you want to pop up a message box. The following example does just that.
<A href=”whatisjs” target=”_top” onclick=”alert(“sorry,that document is not available right now..’);return false”>
<IMG src=”http://msomimaktaba.blogspot.com/images/ballloc.gif” border=”0″>
<⁄A>
<IMG src=”http://msomimaktaba.blogspot.com/images/ballloc.gif” border=”0″>
<⁄A>
Note the return false, this causes the click on the href to not perform the action of loading the referenced page. As an example, try creating a new document and change it to return true and note the different effect this has.
Confirmin
g Actions
In some cases, where a user clicks on a link that might download a rather large file, you would consider giving the user a means of canceling the request before the action is performed. An example of this follows,
g Actions
In some cases, where a user clicks on a link that might download a rather large file, you would consider giving the user a means of canceling the request before the action is performed. An example of this follows,
The confirm function returns either true or false, depending upon the user choices. If it returns true, the action is performed, and the browser will load the referenced wave file.
Detecting the Browser Type
Because browsers display HTML slightly differently, and not all statements are supported by every browser, JavaScript is often used to perform actions based on a particular browser type. This calls for some code which will detect the browser type. An example follows,
Because browsers display HTML slightly differently, and not all statements are supported by every browser, JavaScript is often used to perform actions based on a particular browser type. This calls for some code which will detect the browser type. An example follows,