In the following sections you will learn how to implement bean properties. A bean property is a named attribute of a bean that can affect its behavior or appearance. Examples of bean properties include color, label, font, font size, and display size.
The JavaBeans™ specification defines the following types of bean properties:
• Simple – A bean property with a single value whose changes are independent of changes in any other property.
• Indexed – A bean property that supports a range of values instead of a single value.
• Bound – A bean property for which a change to the property results in a notification being sent to some other bean.
• Constrained – A bean property for which a change to the property results in validation by another bean. The other bean may reject the change if it is not appropriate.
Bean properties can also be classified as follows:
• Writable – A bean property that can be changed
o Standard
o Expert
o Preferred
• Read Only – A bean property that cannot be changed.
• Hidden – A bean property that can be changed. However, these properties are not disclosed with the BeanInfo class
BeanBuilder uses this schema to group and represent properties in the Properties window.
Simple Properties
To add simple properties to a bean, add appropriate getXXX and setXXX methods (or isXXX and setXXX methods for a boolean property).
The names of these methods follow specific rules called design patterns. These design pattern-based method names allow builder tools such as the NetBeans GUI Builder, to provide the following features:
• Discover a bean's properties
• Determine the properties' read/write attributes
• Determine the properties' types
• Locate the appropriate property editor for each property type
• Display the properties (usually in the Properties window)
• Alter the properties (at design time)
Thursday, February 28, 2008
JavaBeans Properties
JavaBeans Concepts
The JavaBeans™ architecture is based on a component model which enables developers to create software units called components. Components are self-contained, reusable software units that can be visually assembled into composite components, applets, applications, and servlets using visual application builder tools. JavaBean components are known as beans.
A set of APIs describes a component model for a particular language. The JavaBeans API specification describes the core detailed elaboration for the JavaBeans component architecture.
Beans are dynamic in that they can be changed or customized. Through the design mode of a builder tool you can use the Properties window of the bean to customize the bean and then save (persist) your beans using visual manipulation. You can select a bean from the toolbox, drop it into a form, modify its appearance and behavior, define its interaction with other beans, and combine it and other beans into an applet, application, or a new bean.
The following list briefly describes key bean concepts.
• Builder tools discover a bean's features (that is, its properties, methods, and events) by a process known as introspection. Beans support introspection in two ways:
o By adhering to specific rules, known as design patterns, when naming bean features. The Introspector class examines beans for these design patterns to discover bean features. The Introspector class relies on the core reflection API. The trail The Reflection API is an excellent place to learn about reflection.
o By explicitly providing property, method, and event information with a related bean information class. A bean information class implements the BeanInfo interface. A BeanInfo class explicitly lists those bean features that are to be exposed to application builder tools.
• Properties are the appearance and behavior characteristics of a bean that can be changed at design time. Builder tools introspect on a bean to discover its properties and expose those properties for manipulation.
• Beans expose properties so they can be customized at design time. Customization is supported in two ways: by using property editors, or by using more sophisticated bean customizers.
• Beans use events to communicate with other beans. A bean that is to receive events (a listener bean) registers with the bean that fires the event (a source bean). Builder tools can examine a bean and determine which events that bean can fire (send) and which it can handle (receive).
• Persistence enables beans to save and restore their state. After changing a bean's properties, you can save the state of the bean and restore that bean at a later time with the property changes intact. The JavaBeans architecture uses Java Object Serialization to support persistence.
• A bean's methods are no different from Java methods, and can be called from other beans or a scripting environment. By default all public methods are exported.
Beans vary in functionality and purpose. You have probably met some of the following beans in your programming practice:
• GUI (graphical user interface)
• Non-visual beans, such as a spelling checker
• Animation applet
• Spreadsheet application
Wednesday, February 27, 2008
Mainframe [Common Editor Line Commands]
Common Editor Line Commands:
I - Insert Line(s)
C - Copy Line
D - Delete Line
M - Move Line
A - Locate After this line (Used for move and copy)
B - Locate Before this line (Same as above)
CC - Indicate begin and end of block for Copy
DD - Indicate begin and end of block for Delete
MM - Indicate begin and end of block for Move
XX - Indicate begin and end of block to Hide
Cn - Copy n lines beginning with this one
Dn - Delete n lines beginning with this one
Mn - Move n lines beginning with this one
Common Editor Commands:
Cut/Paste Allow copy of lines from different programs
C ALL ‘old value’ ‘new value’ (Change all text instances)
Common Flasher List Commands:
D - D Delete report file no longer needed
S - Select report file from list
S - S Show status lines only
E - Expand subfile list in flasher
L x Find first file starting with x
Common Text Commands:
F ==> - Find next COBOL compiler error
F - text Find next occurrence of ‘text’
F5 -
F24 - Scroll thru previous Commands
=F - Go to Flasher from any command line
=X - Exit ISPF from any command line
logoff Exit system from ready prompt
Customer Information Control System (CICS)
In this tutorial you will learn about Customer Information Control System (CICS) - CICS - An overview, Functions of CICS, Task, Transaction and CICS Components.
CICS - An overview
CICS is called as Customer Information Control System. The main functionality of CICS is it acts as an interface between the Operating System and application programs.
Functions of CICS
Acts as interface between operating system and application programs
.
Does the function of data communication and therefore handle data. In other words CICS can support number of terminals or systems and acts as a data communication system between them.
.
Take care of application program functions along with that take care of system functions also
.
Also help in the task of monitoring
.
Acts as a specialized operating system by providing environment for the execution of online application programs.
.
CICS handles file management itself and so there is no need for statements like READ ,WRITE,OPEN
Before going into what CICS does and handles it would be easier if we get to know some common terminologies used with CICS namely
Task
.
Transaction
Task: This is defined as the fundamental unit of work which is scheduled by CICS namely to write to the workstation, read from workstation, read from a file, write to a file, initiate another task, call another function and so on.
Transaction: This is one which commences the execution of a task. CICS assigns and identifies each transaction by a transaction identifier
Having known about task and transaction let us see how both are handled together in CICS. We have seen above that when a transaction is started then it executes a task. But one may have a doubt whether CICS can handle more than one task at the same time for same transaction. The answer is yes. In other words if a transaction say tran1 is started or initiated more than one time again and again then CICS transaction tran1 create more than one task at the same time. This is how a task or more than one task gets created. Now we switch to see how to initiate a transaction which is essential for starting a task. There are many ways to start transaction let us see some of the ways of initiating or starting a transaction.
One of the ways could be to use a transaction identifier to initiate a transaction. This is because we have seen already that CICS assigns and identifies each transaction by a transaction identifier. So by entering the transaction identifier in the CICS screen and by pressing enter key CICS transaction associated with the transaction identifier entered gets initiated and invoked. It is also possible to initiate a transaction by using the CICS command START. This also provides the facility of starting a transaction after a specified time interval.
CICS also has the option of initiating a task automatically technically called as Automatic Task Initiation. One can initiate a transaction in this way also.
CICS Components
There are three major components associated with CICS namely Management Modules, Control Tables and Control Blocks. These three are very essential in CICS environment and so let us see an overview of the function of each. We have seen that CICS act as an interface between operating system and application program and this is achieved by management module. In other words Management Modules are programs that act as interface between operating system and application program. Control table is associated with management module and is used to define the CICS environment. A control block is used to store information about CICS system. For instance we have seen that a transaction handled by CICS is identified by transaction identifier. And also each transaction may have number of task in it. Control blocks have the information about the task in an area called as task control area. Like that control block has many system information stored.
Having got an idea about what CICS is what a transaction is and the components used in CICS now its time to look in brief as how a transaction gets initiated and executed in CICS.
Let us take a example where the
Transaction Identifier: EXFOR
Application program: A1
User Makes call to file student for data
Let use see how the above transaction given in example is initiated and executed by CICS and how the data is presented on the terminal as output in CICS environment. As we have seen before each transaction in CICS has a transaction identifier associated with it. So as a first step to initiate the transaction one types the transaction identifiers on the terminal. For instance in our example the transaction identifier is EXFOR and it is typed on the terminal. This is taken by CICS and the transaction identifier EXFOR is stored in working storage division. The CICS service treats the transaction identifier say EXFOR as a call to the associated application program. The application program can be present in storage division or in program library. Suppose in our case if the associated application program say A1 was in program library so A1 is loaded from program library into working storage. Now task is created and the program is started or initiated. Now we must know an important technology called as BMS. BMS is also called as Basic mapping support. We know the output of any program would appear on the terminal screen.
There are many features which are specific to hardware and this may affect the output. In other words to get the output as desired say in formatted way and in order to remove the dependency CICS has a facility called BMS. Now after the program is initiated the next step is to give the control to user. This is done by giving terminal control and also BMS is used by CICS now to get the requirements from user that is from screen. As per our example user wants to get value from student file. So file control is given by CICS to student file and the information requested by user is retrieved. Now BMS as explained does the primary function of formatting of the data retrieved from student file and present it on the terminal.
This is how transaction flows between user application and system in a CICS environment. There are lot of functions and features available in ICS but the above description gives an overview of CICS.
Prev
CICS Overview and Functions
CICS is called as Customer Information Control System. The main functionality of CICS is it acts as an interface between the Operating System and application programs.
Functions of CICS
Acts as interface between operating system and application programs.
Does the function of data communication and therefore handle data. In other words CICS can support number of terminals or systems and acts as a data communication system between them.
Take care of application program functions along with that take care of system functions also
Also help in the task of monitoring
Acts as a specialized operating system by providing environment for the execution of online application programs.
CICS handles file management itself and so there is no need for statements like READ ,WRITE,OPEN
Before going into what CICS does and handles it would be easier if we get to know some common terminologies used with CICS namely Task and Transaction.
What is Task: This is defined as the fundamental unit of work which is scheduled by CICS namely to write to the workstation, read from workstation, read from a file, write to a file, initiate another task, call another function and so on.
What is a Transaction: This is one which commences the execution of a task. CICS assigns and identifies each transaction by a transaction identifier.
Having known about task and transaction let us see how both are handled together in CICS. We have seen above that when a transaction is started then it executes a task. But one may have a doubt whether CICS can handle more than one task at the same time for same transaction. The answer is yes. In other words if a transaction say tran1 is started or initiated more than one time again and again then CICS transaction tran1 create more than one task at the same time. This is how a task or more than one task gets created. Now we switch to see how to initiate a transaction which is essential for starting a task. There are many ways to start transaction let us see some of the ways of initiating or starting a transaction.
One of the ways could be to use a transaction identifier to initiate a transaction. This is because we have seen already that CICS assigns and identifies each transaction by a transaction identifier. So by entering the transaction identifier in the CICS screen and by pressing enter key CICS transaction associated with the transaction identifier entered gets initiated and invoked. It is also possible to initiate a transaction by using the CICS command START. This also provides the facility of starting a transaction after a specified time interval.
CICS also has the option of initiating a task automatically technically called as Automatic Task Initiation. One can initiate a transaction in this way also.
Next
MainFrame
The term ‘MainFrame’ brings to mind a giant room of electronic parts that is a computer, referring to the original CPU cabinet in a computer of the mid-1960’s. Today, Mainframe refers to a class of ultra-reliable large and medium-scale servers designed for carrier-class and enterprise-class systems operations. Mainframes are costly, due to the support of symmetric multiprocessing (SMP) and dozens of central processors existing within in a single system. Mainframes are highly scalable. Through the addition of clusters, high-speed caches and volumes of memory, they connect to terabyte holding data subsystems.
The first mainframe vendors were GE, Control Data, IBM, NCR, RCA, Burroughs, Honeywell and Univac. Collectively known as “IBM and the Seven Dwarfs”. Through mergers, these vendors shifted within the industry, becoming “IBM and the BUNCH”. Running a version of Unix or Linux, these vendors led by IBM now include Amdahl (Fujitsu), Unisys and Sun among others.
Online training includes the History of Mainframes, Job Control Language (JCL) and thorough tutorials on the components, transactions and functions of the Customer Information Control System (CCIS). Mainframe professionals can find well-paid work in highly respected and breakthrough technology companies throughout the world as Mainframe Systems Programmers and Project Managers.
Start Here
Tuesday, February 26, 2008
Error handlling in JavaScript Try...Catch Statement
--------------------------------------------------------------------------------
The try...catch statement allows you to test a block of code for errors.
--------------------------------------------------------------------------------
Examples
The try...catch statement
How to write a try...catch statement.
The try...catch statement with a confirm box
Another example of how to write a try...catch statement.
--------------------------------------------------------------------------------
JavaScript - Catching Errors
When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page.
This chapter will teach you how to trap and handle JavaScript error messages, so you don't lose your audience.
There are two ways of catching errors in a Web page:
By using the try...catch statement (available in IE5+, Mozilla 1.0, and Netscape 6)
By using the onerror event. This is the old standard solution to catch errors (available since Netscape 3)
--------------------------------------------------------------------------------
Try...Catch Statement
The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.
Syntax
try
{
//Run some code here
}
catch(err)
{
//Handle errors here
}
Note that try...catch is written in lowercase letters. Using uppercase letters will generate a JavaScript error!
Example 1
The example below contains a script that is supposed to display the message "Welcome guest!" when you click on a button. However, there's a typo in the message() function. alert() is misspelled as adddlert(). A JavaScript error occurs:
To take more appropriate action when an error occurs, you can add a try...catch statement.
The example below contains the "Welcome guest!" example rewritten to use the try...catch statement. Since alert() is misspelled, a JavaScript error occurs. However, this time, the catch block catches the error and executes a custom code to handle it. The code displays a custom error message informing the user what happened:
Example 2
The next example uses a confirm box to display a custom message telling users they can click OK to continue viewing the page or click Cancel to go to the homepage. If the confirm method returns false, the user clicked Cancel, and the code redirects the user. If the confirm method returns true, the code does nothing:
--------------------------------------------------------------------------------
The onerror Event
The onerror event will be explained soon, but first you will learn how to use the throw statement to create an exception. The throw statement can be used together with the try...catch statement.
Sunday, February 24, 2008
JavaScript Guidelines
Some other important things to know when scripting with JavaScript.
JavaScript is Case Sensitive
A function named "myfunction" is not the same as "myFunction" and a variable named "myVar" is not the same as "myvar".
JavaScript is case sensitive - therefore watch your capitalization closely when you create or call variables, objects and functions.
White Space
JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent:
name="Hege";
name = "Hege";
Break up a Code Line
You can break up a code line within a text string with a backslash. The example below will be displayed properly:
document.write("Hello \World!");
However, you cannot break up a code line like this:
document.write \("Hello World!");
Thursday, February 21, 2008
Learn ASP
An ASP file can contain text, HTML tags and scripts. Scripts in an ASP file are executed on the server
What you should already know
Before you continue you should have some basic understanding of the following:
* HTML / XHTML
* A scripting language like JavaScript or VBScript
If you want to study these subjects first, find the tutorials on our Home page.
What is ASP?
* ASP stands for Active Server Pages
* ASP is a program that runs inside IIS
* IIS stands for Internet Information Services
* IIS comes as a free component with Windows 2000
* IIS is also a part of the Windows NT 4.0 Option Pack
* The Option Pack can be downloaded from Microsoft
* PWS is a smaller - but fully functional - version of IIS
* PWS can be found on your Windows 95/98 CD
ASP Compatibility
* ASP is a Microsoft Technology
* To run IIS you must have Windows NT 4.0 or later
* To run PWS you must have Windows 95 or later
* ChiliASP is a technology that runs ASP without Windows OS
* InstantASP is another technology that runs ASP without Windows
What is an ASP File?
* An ASP file is just the same as an HTML file
* An ASP file can contain text, HTML, XML, and scripts
* Scripts in an ASP file are executed on the server
* An ASP file has the file extension ".asp"
How Does ASP Differ from HTML?
* When a browser requests an HTML file, the server returns the file
* When a browser requests an ASP file, IIS passes the request to the ASP engine. The ASP engine reads the ASP file, line by line, and executes the scripts in the file. Finally, the ASP file is returned to the browser as plain HTML
What can ASP do for you?
* Dynamically edit, change or add any content of a Web page
* Respond to user queries or data submitted from HTML forms
* Access any data or databases and return the results to a browser
* Customize a Web page to make it more useful for individual users
* The advantages of using ASP instead of CGI and Perl, are those of simplicity and speed
* Provide security since your ASP code can not be viewed from the browser
* Clever ASP programming can minimize the network traffic
Important: Because the scripts are executed on the server, the browser that displays the ASP file does not need to support scripting at all!
Tuesday, February 19, 2008
JavaScript Form Validation
JavaScript can be used to validate input data in HTML forms before sending
off the content to a server.
JavaScript Form Validation
JavaScript can be used to validate input data in HTML forms before sending off
the content to a server.
Form data that typically are checked by a JavaScript could be:
* has the user left required fields empty?
* has the user entered a valid e-mail address?
* has the user entered a valid date?
* has the user entered text in a numeric field?
Required Fields
The function below checks if a required field has been left empty. If the
required field is blank, an alert box alerts a message and the function returns
false. If a value is entered, the function returns true (means that data is OK):
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
The entire script, with the HTML form could look something like this:
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return
true
}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{
email.focus();return false;
}
}
}
</script>
<form action="submitpage.htm" onsubmit="return validate_form(this)"
method="post">
Email: <input style="background-color: rgb(255, 255, 160);" name="email"
size="30" type="text">
<input value="Submit" type="submit">
</form>
E-mail Validation
The function below checks if the content has the general syntax of an email.
This means that the input data must contain at least an @ sign and a dot (.).
Also, the @ must not be the first character of the email address, and the last
dot must at least be one character after the @ sign:
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2) type="text/javascript"></script>
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)>
<form action="submitpage.htm" onsubmit="return validate_form(this);"
method="post">
Email: <input style="background-color: rgb(255, 255, 160);" name="email"
size="30" type="text">
<input value="Submit" type="submit">
</form>
Introduction to JavaScript
JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more.
JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, and Opera.
What You Should Already Know
Before you continue you should have a basic understanding of the following:
* HTML / XHTML
If you want to study these subjects first, find the tutorials on our Home page.
What is JavaScript?
* JavaScript was designed to add interactivity to HTML pages
* JavaScript is a scripting language
* A scripting language is a lightweight programming language
* A JavaScript consists of lines of executable computer code
* A JavaScript is usually embedded directly into HTML pages
* JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
* Everyone can use JavaScript without purchasing a license
Are Java and JavaScript the Same?
NO!
Java and JavaScript are two completely different languages in both concept and design!
Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.
What can a JavaScript Do?
* JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
* JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("
" + name + "
") can write a variable text into an HTML page* JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
* JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element
* JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
* JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
* JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer
The Real Name is ECMAScript
JavaScript's official name is "ECMAScript". The standard is developed and maintained by the ECMA organisation.
ECMA-262 is the official JavaScript standard. The standard is based on JavaScript (Netscape) and JScript (Microsoft).
The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.
The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997.
The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.
The development of the standard is still in progress.
JavaScript Tutorial
JavaScript is THE scripting language of the Web.
JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more.
JavaScript is easy to learn! You will enjoy it!
Tuesday, February 12, 2008
HTML Attributes
Attributes provide additional information to an HTML element.
--------------------------------------------------------------------------------
HTML Tag Attributes
HTML tags can have attributes. Attributes provide additional information to an HTML element.
Attributes always come in name/value pairs like this: name="value".
Attributes are always specified in the start tag of an HTML element.
--------------------------------------------------------------------------------
Attributes Example 1:
Defines the start of a heading.
has additional information about the alignment.
Try it yourself: Center aligned heading
--------------------------------------------------------------------------------
Attributes Example 2:
Defines the body of an HTML document.
has additional information about the background color.
Try it yourself: Background color
--------------------------------------------------------------------------------
Attributes Example 3:
Defines an HTML table. (You will learn more about HTML tables later)
--------------------------------------------------------------------------------
Use Lowercase Attributes
Attributes and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation, and XHTML demands lowercase attributes/attribute values.
--------------------------------------------------------------------------------
Always Quote Attribute Values
Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.
In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:
name='John "ShotGun" Nelson'
HTML Tags
The most important tags in HTML are tags that define headings, paragraphs and line breaks.
The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor, you can edit the HTML source code if you like, and click on a test button to view the result.
--------------------------------------------------------------------------------
Try it Yourself - Examples
A very simple HTML document
This example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates how the text inside a body element is displayed in the browser.
Simple paragraphs
This example demonstrates how the text inside paragraph elements is displayed in the browser.
(You can find more examples at the bottom of this page)
--------------------------------------------------------------------------------
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1> This is a heading <h1>
This is a heading
<h2> This is a heading <h2>
This is a heading
<h3> This is a heading <h3>
This is a heading
<h4> This is a heading <h4>
This is a heading
<h5> This is a heading <h5>
This is a heading
<h6> This is a heading <h6>
This is a heading
HTML automatically adds an extra blank line before and after a heading.
--------------------------------------------------------------------------------
Paragraphs
Paragraphs are defined with the <p> This is a heading <h1> tag.
<p> This is a paragraph <p>
This is a paragraph
<p> This is another paragraph <p>
This is another paragraph
HTML automatically adds an extra blank line before and after a paragraph.
--------------------------------------------------------------------------------
Don't Forget the Closing Tag
You might have noticed that paragraphs can be written without end tags :
<p> This is a paragraph
<p> This is another paragraph
The example above will work in most browsers, but don't rely on it. Future version of HTML will not allow you to skip ANY end tags.
Closing all HTML elements with an end tag is a future proof way of writing HTML. It also makes the code easier to understand (read and browse) when you to mark both where an element starts and where it ends.
--------------------------------------------------------------------------------
Line Breaks
The <br> tag is used when you want to break a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br>is a para<br>graph with line breaks<<p>
Try it yourself
The <br> tag is an empty tag. It has no end tag like <br>, since a closing tag doesn't make any sense.
--------------------------------------------------------------------------------
<br> or <br/>
More and more often you will see the <br> tag written like this: <br/>
Because the <br> tag has no end tag (or closing tag), it breaks one of the rules for future HTML (the XML based XHTML), namely that all elements must be closed.
Writing it like <br/> is a future proof way of closing (or ending) the tag inside the opening tag, accepted by both HTML and XML.
--------------------------------------------------------------------------------
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
<!-- This is a comment -->
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
--------------------------------------------------------------------------------
Recap on HTML Elements
Each HTML element has an element name (body, h1, p, br)
The start tag is the name surrounded by angle brackets: <hr>
The end tag is a slash and the name surrounded by angle brackets </hr>
The element content occurs between the start tag and the end tag
Some HTML elements have no content
Some HTML elements have no end tag
--------------------------------------------------------------------------------
Basic Notes - Useful Tips
When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.
HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space.
Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don't use the <br> tag to create lists. Wait until you have learned about HTML lists.)
HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.
We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.
--------------------------------------------------------------------------------
More Examples
More paragraphs
This example demonstrates some of the default behaviors of paragraph elements.
Line breaks
This example demonstrates the use of line breaks in an HTML document.
Poem problems
This example demonstrates some problems with HTML formatting.
Headings
This example demonstrates the tags that display headings in an HTML document.
Horizontal rule
This example demonstrates how to insert a horizontal rule.
Hidden comments
This example demonstrates how to insert a hidden comment in the HTML source code.
--------------------------------------------------------------------------------
Basic HTML Tags
If you lookup the basic HTML tags in the reference below, you will see that the reference contains additional information about tag attributes.
You will learn more about HTML tag attributes in the next chapter of this tutorial.
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p>Defines a paragraph
<br>Inserts a single line break
<hr>Defines a horizontal rule
<!--> Defines a comment
HTML Elements
HTML documents are text files made up of HTML elements.
HTML elements are defined using HTML tags.
--------------------------------------------------------------------------------
HTML Tags
HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like and
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, means the same as
--------------------------------------------------------------------------------
HTML Elements
Remember the HTML example from the previous page:
This is my first homepage. This text is bold
This is an HTML element:
This text is bold
The HTML element starts with a start tag:
The content of the HTML element is: This text is bold
The HTML element ends with an end tag:
The purpose of the tag is to define an HTML element that should be displayed as bold.
This is also an HTML element:
This is my first homepage. This text is bold
This HTML element starts with the start tag , and ends with the end tag .
The purpose of the tag is to define the HTML element that contains the body of the HTML document.
--------------------------------------------------------------------------------
Why do We Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: means the same as . If you surf the Web, you will notice that plenty of web sites use uppercase HTML tags in their source code. We always use lowercase tags. Why?
If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags
HTML Introduction
What is an HTML File?
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor
Do You Want to Try It?
If you are running Windows, start Notepad.
If you are on a Mac, start SimpleText.
In OSX start TextEdit and change the following preferences: Open the the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above!
Type in the following text:
This is my first homepage. This text is bold
Save the file as "mypage.htm".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document.
The text between the tag and the tag is header information. Header information is not displayed in the browser window.
The text between the
The text between the
The text between the and tags will be displayed in a bold font.
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm in our examples. It might be a bad habit inherited from the past when some of the commonly used software only allowed three letter extensions.
With newer software we think it will be perfectly safe to use .html.
Note on HTML Editors:
You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file.
However, if you want to be a skillful Web developer, we strongly recommend that you use a plain text editor to learn your primer HTML.