Download - Lab.Manual_Web tech Lab
-
8/7/2019 Lab.Manual_Web tech Lab.
1/29
Essentials, Part 1, Lesson 1: Compiling &
Running a Simple Program
Training Index
[ ]
The computer age is here to stay. Households and businesses all over the world usecomputers in one way or another because computers help individuals and businesses
perform a wide range of tasks with speed, accuracy, and efficiency. Computers can
perform all kinds of tasks ranging from running an animated 3D graphics applicationwith background sound to calculating the number of vacation days you have coming to
handling the payroll for a Fortune 500 company.
When you want a computer to perform tasks, you write a program. A program is a
sequence of instructions that define tasks for the computer to execute. This lessonexplains how to write, compile, and run a simple program written in the Java language
(Java program) that tells your computer to print a one-line string of text on the console.
But before you can write and compile programs, you need to understand what the Java
platform is, and set your computer up to run the programs.
A Word About the Java Platform
Setting Up Your Computer
Writing a Program Compiling the Program Interpreting and Running the Program
Common Compiler and Interpreter Problems
Code Comments
API Documentation
More Information
A Word About the Java Platform
The Java platform consists of the Java application programming interfaces (APIs) and theJava 1 virtual machine (JVM).
Java APIs are libraries of compiled code that you can use in yourprograms. They let you add ready-made and customizable
functionality to save you programming time.
http://www.oracle.com/technetwork/java/index-jsp-135888.htmlhttp://www.oracle.com/technetwork/java/index-138747.htmlhttp://www.oracle.com/technetwork/java/index-138747.html#contentshttp://www.oracle.com/technetwork/java/prog-140388.htmlhttp://www.oracle.com/technetwork/java/prog-140388.htmlhttp://www.oracle.com/technetwork/java/compile-136656.html#platformhttp://www.oracle.com/technetwork/java/compile-136656.html#platformhttp://www.oracle.com/technetwork/java/compile-136656.html#setuphttp://www.oracle.com/technetwork/java/compile-136656.html#setuphttp://www.oracle.com/technetwork/java/compile-136656.html#simplehttp://www.oracle.com/technetwork/java/compile-136656.html#simplehttp://www.oracle.com/technetwork/java/compile-136656.html#comphttp://www.oracle.com/technetwork/java/compile-136656.html#comphttp://www.oracle.com/technetwork/java/compile-136656.html#runhttp://www.oracle.com/technetwork/java/compile-136656.html#runhttp://www.oracle.com/technetwork/java/compile-136656.html#debughttp://www.oracle.com/technetwork/java/compile-136656.html#debughttp://www.oracle.com/technetwork/java/compile-136656.html#commhttp://www.oracle.com/technetwork/java/compile-136656.html#commhttp://www.oracle.com/technetwork/java/compile-136656.html#apihttp://www.oracle.com/technetwork/java/compile-136656.html#apihttp://www.oracle.com/technetwork/java/compile-136656.html#morehttp://www.oracle.com/technetwork/java/compile-136656.html#morehttp://www.oracle.com/technetwork/java/compile-136656.html#TJVMhttp://www.oracle.com/technetwork/java/compile-136656.html#TJVMhttp://www.oracle.com/technetwork/java/index-jsp-135888.htmlhttp://www.oracle.com/technetwork/java/index-138747.htmlhttp://www.oracle.com/technetwork/java/index-138747.html#contentshttp://www.oracle.com/technetwork/java/prog-140388.htmlhttp://www.oracle.com/technetwork/java/compile-136656.html#platformhttp://www.oracle.com/technetwork/java/compile-136656.html#setuphttp://www.oracle.com/technetwork/java/compile-136656.html#simplehttp://www.oracle.com/technetwork/java/compile-136656.html#comphttp://www.oracle.com/technetwork/java/compile-136656.html#runhttp://www.oracle.com/technetwork/java/compile-136656.html#debughttp://www.oracle.com/technetwork/java/compile-136656.html#commhttp://www.oracle.com/technetwork/java/compile-136656.html#apihttp://www.oracle.com/technetwork/java/compile-136656.html#morehttp://www.oracle.com/technetwork/java/compile-136656.html#TJVM -
8/7/2019 Lab.Manual_Web tech Lab.
2/29
The simple program in this lesson uses a Java API to print a line of text to the console.
The console printing capability is provided in the API ready for you to use; you supply
the text to be printed.
Java programs are run (or interpreted) by another program called the Java VM. If you are
familiar with Visual Basic or another interpreted language, this concept is probablyfamiliar to you. Rather than running directly on the native operating system, the program
is interpreted by the Java VM for the native operating system. This means that anycomputer system with the Java VM installed can run Java programs regardless of the
computer system on which the applications were originally developed.
For example, a Java program developed on a Personal Computer (PC) with the Windows
NT operating system should run equally well without modification on a Sun Ultraworkstation with the Solaris operating system, and vice versa.
Setting Up Your Computer
Before you can write and run the simple Java program in this lesson, you need to install
the Java platform on your computer system.
The Java platform is available free of charge from the java.sun.com web site. You canchoose between the Java 2 Platform software for Windows 95/98/NT or for Solaris.
The download page contains the information you need to install and configure the Java
platform for writing and running Java programs.
Note: Make sure you have the Java platform installed and configured for your system
before you try to write and run the simple program presented next.
Writing a Program
The easiest way to write a simple program is with a text editor. So, using the text editor
of your choice, create a text file with the following text, and be sure to name the text fileExampleProgram.java. Java programs are case sensitive, so if you type the code in
yourself, pay particular attention to the capitalization.
//A Very Simple Exampleclass ExampleProgram {
public static void main(String[] args){
System.out.println("I'm a Simple Program");
}
}
http://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://www.oracle.com/technetwork/java/j2se-eol-137618.html -
8/7/2019 Lab.Manual_Web tech Lab.
3/29
Here is the ExampleProgram.java source code file if you do not want to type the program
text in yourself.
Compiling the Program
A program has to be converted to a form the Java VM can understand so any computerwith a Java VM can interpret and run the program. Compiling a Java program means
taking the programmer-readable text in your program file (also called source code) and
converting it to bytecodes, which are platform-independent instructions for the Java VM.
The Java compiler is invoked at the command line on Unix and DOS shell operatingsystems as follows:
javac ExampleProgram.java
Note: Part of the configuration process for setting up the Java platform is setting the class
path. The class path can be set using either the -classpath option with the javac
compiler command and java interpreter command, or by setting the CLASSPATHenvironment variable. You need to set the class path to point to the directory where theExampleProgram class is so the compiler and interpreter commands can find it. SeeJava
2 SDK Tools for more information.
Interpreting and Running the Program
Once your program successfully compiles into Java bytecodes, you can interpret and run
applications on any Java VM, or interpret and run applets in any Web browser with a
Java VM built in such as Netscape or Internet Explorer. Interpreting and running a Javaprogram means invoking the Java VM byte code interpreter, which converts the Java byte
codes to platform-dependent machine codes so your computer can understand and run theprogram.
The Java interpreter is invoked at the command line on Unix and DOS shell operatingsystems as follows:
java ExampleProgram
At the command line, you should see:
I'm a Simple Program
Here is how the entire sequence looks in a terminal window:
http://java.sun.com/developer/onlineTraining/Programming/BasicJava1/Code/ExampleProgram.javahttp://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://java.sun.com/developer/onlineTraining/Programming/BasicJava1/Code/ExampleProgram.javahttp://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://www.oracle.com/technetwork/java/j2se-eol-137618.html -
8/7/2019 Lab.Manual_Web tech Lab.
4/29
Common Compiler and Interpreter Problems
If you have trouble compiling or running the simple example in this lesson, refer to the
Common Compiler and Interpreter Problemslesson in The Java Tutorialfortroubleshooting help.
Code Comments
Code comments are placed in source files to describe what is happening in the code to
someone who might be reading the file, to comment-out lines of code to isolate the
source of a problem for debugging purposes, or to generate API documentation. To theseends, the Java language supports three kinds of comments: double slashes, C-style, and
doc comments.
Double Slashes
Double slashes ( //) are used in the C++ programming language, and tell the compiler totreat everything from the slashes to the end of the line as text.
//A Very Simple Example
class ExampleProgram {
public static void main(String[] args){
System.out.println("I'm a Simple Program");
}
}
C-Style Comments
Instead of double slashes, you can use C-style comments ( /* */) to enclose one or more
lines of code to be treated as text.
/* These are
C-style comments
*/
class ExampleProgram {
public static void main(String[] args){
System.out.println("I'm a Simple Program");
}}
Doc Comments
http://java.sun.com/docs/books/tutorial/getStarted/problems/index.htmlhttp://java.sun.com/docs/books/tutorial/getStarted/problems/index.htmlhttp://java.sun.com/docs/books/tutorial/trailmap.htmlhttp://java.sun.com/docs/books/tutorial/trailmap.htmlhttp://java.sun.com/docs/books/tutorial/getStarted/problems/index.htmlhttp://java.sun.com/docs/books/tutorial/trailmap.html -
8/7/2019 Lab.Manual_Web tech Lab.
5/29
To generate documentation for your program, use the doc comments ( /** */) to enclose
lines of text for the javadoc tool to find. The javadoc tool locates the doc comments
embedded in source files and uses those comments to generate API documentation.
/** This class displays a text string at
* the console.*/
class ExampleProgram {
public static void main(String[] args){
System.out.println("I'm a Simple Program");
}
}
HTML Tags Chart
To use any of the following HTML tags, simply select the HTML code you'd like and
copy and paste it into your web page.
Tag Name Code Example Browser View
Nothing will show (Tip)
-
8/7/2019 Lab.Manual_Web tech Lab.
6/29
Definition of the term
Definition Term
Definition of the term
term
Definition Term
Definition of the
term
definition
term
Definition Term
Definition of the term
Definition Term
Definition of the term
Definition Term
Definition of the
term
Definition TermDefinition of the
term
emphasisThis is an Example of using the emphasis
tag
This is an Example of using
the emphasis tag
embed
object
(Tip)
embed
object
Music will begin playingwhen your page is loaded
and will only play one time.
A control panel will be
displayed to enable yourvisitors to stop the music.
font Example Example (Tip)
fontExampleExample(Tip)
fontExample Example(Tip)
form
Name:
Email:
Name: (Tip)
Email:
Submit
-
8/7/2019 Lab.Manual_Web tech Lab.
7/29
heading 1
heading 2
heading 3
heading 4
heading 5heading 6
Heading 1 Example
Heading 2 ExampleHeading 3 Example
Heading 4 Example
Heading 5 ExampleHeading 6 Example
heading of
HTML
document
Contains elements describing thedocument
Nothing will show
horizontal
rule
Contents of your web page(Tip)
Contents of your web page
horizontal
rule
Contents of your web page
Contents of your web page
horizontal
rule
Contents of your web page
Contents of your web page
(Internet
Explorer)
horizontal
rule
Contents of your web page
Contents of your web page
(Internet
Explorer)
horizontal
rule
Contents of your web page
Contents of your web page
hypertext
markup
language
Title of your web page
HTML web page contents
Contents of your web page
italic Example Example
image (Tip)
input field Example 1:
Example 1: (Tip)
Submit
http://www.web-source.net/216_color_chart.htm.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm.htmhttp://www.web-source.net/216_color_chart.htm -
8/7/2019 Lab.Manual_Web tech Lab.
8/29
(Internet
Explorer)input field
Example 2:
Example 2: (Tip)
Submit
input field
Example 3:
Example 3: (Tip)
input field
Example 4:
Enter Your Comments:
Example 4: (Tip)
Submit Clear
input field
Example 5:
Select an option:
option 1
option 2option 3
option 4
option 5option 6
Example 5: Tip)
Select an option:
Submit
-
8/7/2019 Lab.Manual_Web tech Lab.
9/29
input field
Example 6:
Select an option:
Option 1
Option2
Option 3
Select an option:Selection
1
Selection 2
Selection
3
Example 6: (Tip)
Select an option:
Option 1
Option 2
Option 3
Select an option:
Selection 1
Selection 2
Selection 3
Submit
list item
Example 1:
List item 1
List item 2
List item 3
Example 2:
List item 1
List item 2List item 3
List item 4
Example 1: (Tip)
List item 1
o List item 2
List item 3
Example 2:
i. List item 1
ii. List item 2iii. List item 3
iv. List item 4
link
(Internet
Explorer)
scrolling
text
Example
Marquee
(Tip)
menu List item 1
List item 1
http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm -
8/7/2019 Lab.Manual_Web tech Lab.
10/29
List item 2List item 3
o List item 2
List item 3
meta
Nothing will show (Tip)
metaNothing will show (Tip)
meta Nothing will show (Tip)
meta Nothing will show (Tip)
meta Nothing will show (Tip)
meta Nothing will show (Tip)
ordered list Numbered
List item 1
List item 2List item 3
List item 4
Numbered Special Start
List item 1
List item 2
List item 3List item 4
Lowercase Letters
List item 1
List item 2List item 3
List item 4
Capital Letters
Numbered
1. List item 12. List item 2
3. List item 3
4. List item 4
Numbered Special Start
5. List item 1
6. List item 2
7. List item 38. List item 4
Lowercase Letters
a. List item 1
b. List item 2
c. List item 3d. List item 4
Capital Letters
A. List item 1
B. List item 2
C. List item 3D. List item 4
Capital Letters Special
-
8/7/2019 Lab.Manual_Web tech Lab.
11/29
List item 1List item 2
List item 3
List item 4
Capital Letters Special Start
List item 1
List item 2
List item 3List item 4
Lowercase Roman Numerals
List item 1
List item 2List item 3
List item 4
Capital Roman Numerals
List item 1
List item 2List item 3
List item 4
Capital Roman Numerals Special Start
List item 1
List item 2List item 3
List item 4
Start
C. List item 1
D. List item 2
E. List item 3F. List item 4
Lowercase Roman
Numerals
i. List item 1
ii. List item 2iii. List item 3
iv. List item 4
Capital Roman Numerals
I. List item 1
II. List item 2III. List item 3
IV. List item 4
Capital Roman Numerals
Special Start
VII. List item 1
VIII. List item 2IX. List item 3
X. List item 4
listboxoption
Select an option:
Select an option:(Tip)
-
8/7/2019 Lab.Manual_Web tech Lab.
12/29
option 1option 2
option 3
option 4
option 5option 6
paragraph
This is an example displaying the use of the paragraph
tag.
This will create a line break and a spacebetween lines.
Attributes:
Example 1:
This is an example
displaying the use
of the paragraph tag.
Example 2:
This is an example
displaying the use
of the paragraph tag.Example 3:
This is an example
displaying the use
of the paragraph tag.This is an exampledisplaying the use of the
paragraph tag.
This will create a line break
and a space between lines.
Attributes:
Example 1:
This is an exampledisplaying the use
of the paragraph tag.
Example 2:
This is an exampledisplaying the use
of the paragraph tag.
Example 3:
This is an example
displaying the useof the paragraph tag.
small (text) Example Example(Tip)
deleted text Example Example
strong
emphasisExample Example
table
Example 1:
Example 1: (Tip)
Column 1 Column 2
-
8/7/2019 Lab.Manual_Web tech Lab.
13/29
Column 1
Column 2
Example 2: (Internet Explorer)
Column 1
Column 2
Example 3:
Column 1
Column 2
Row 2
Row 2
Example 2: (Tip)
Column 1 Column 2
Example 3: (Tip)
Column 1 Column 2
Row 2 Row 2
table data
Column 1
Column 2
Column 1 Column 2
table
header
Column 1
Column 2
Column 3
Row 2
Column
1
Column
2
Column
3Row 2 Row 2 Row 2
Row 3 Row 3 Row 3
Row 4 Row 4 Row 4
http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm -
8/7/2019 Lab.Manual_Web tech Lab.
14/29
Row 2
Row 2
Row 3
Row 3Row 3
Row 4Row 4
Row 4
documenttitle
Title of yourHTML page
Title of your web page will
be viewable in the title bar.(Tip)
table row
Column 1Column 2
Column 1 Column 2
teletype Example Example
underline Example Example
unordered
list
Example 1:
List item 1List item 2
Example 2:List item 1List item 2
List item 3
List item 4
Example 1:
List item 1
List item 2
Example 2:
List item 1 List item 2
o List item 3
o List item 4
-
8/7/2019 Lab.Manual_Web tech Lab.
15/29
Creating an HTML Email Form
-
8/7/2019 Lab.Manual_Web tech Lab.
16/29
If you would like to provide your web site visitors with a simple way to contact you from your website, but really don't want to display your email address, this HTML form code may be what you'relooking for.
You can create a simple form, as displayed below, to enable your visitors to send you comments,questions, product support requests, or whatever you'd like.
Name:
Email:
Comment:
Submit Reset
Copy and paste the following HTML code into the HTML portion of your web page:
Name:
Email:
Comment:
-
8/7/2019 Lab.Manual_Web tech Lab.
17/29
Change the text indicated in red to your email address.
Displaying an email form on your web page provides a great way to enable your visitors tocontact you.
Create a Gradient Background Effect
A gradient background effect will display your selected HTML background colors in ascending ordescending color variations - from lightest to darkest or darkest to lightest.
This powerful HTML code effect can be used to give your web pages a unique look and feel.However, it must be used very cautiously.
Please ensure that you select your HTML web page background colors very carefully, as yourtext must be clearly visible through the background colors you select.
In addition, you must select one light color and another color that is several shades lighter inorder for this HTML gradient background effect to display properly.
This effect can be used for your entire web page background, or within your table cells.To use the gradient effect as your web page background, use the following BODY tag:
To use the gradient effect within your HTML tables, place the following code within your table tag:
style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2',startColorstr='#FFFFFF', gradientType='0');"
Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradient
effect to display properly, you must select one light color and another color that is several shadeslighter.
-
8/7/2019 Lab.Manual_Web tech Lab.
18/29
Replacing Your Standard HTML ListBullets With Graphic Bullets
If you're looking for a way to spice up your HTML list bullets, this HTML tip is for you. You can usegraphic bullets to replace the standard text bullets by using the "Definition List" tag.
The key to using this technique effectively is to select or create a small graphic that willcompliment your list text and enhance your visitors experience on your web site.
Copy and paste the following HTML list code into the HTML portion of your web page.
List ItemOneList ItemTwoList ItemThreeList ItemFour
Edit the text indicated in red to suit your needs.
Using graphic bullets within your HTML web pages will enable you to give your lists your owncustomized look.
Auto Fill Email Subject and Body
If you're using a list management system that requires specific text to be placed within the emailsubject or body of your email, this HTML code is for you.
Many times, if you request your visitors to type in a specific email subject or body text in order tosubscribe to your publication, they may not type the required text correctly. This mistake willcause you to lose your subscriber, as your system will reject the subscription request.
To prevent this problem, you can create an email link that will automatically fill in the subject lineand body when clicked on.
-
8/7/2019 Lab.Manual_Web tech Lab.
19/29
[email protected] the following code to your HTML.
Customizing HTML Web PageHorizontal Rules (Line Dividers)
(Internet Explorer)
The HTML web page horizontal rule , also known as a line divider, is used to divide contentareas within a web page.
These HTML horizontal rules can be used to divide your web page content subjects, products,navigational menus or whatever you'd like. They provide a great way to add color to your pageswithout using images and will enable you to improve the appearance of your web pages.
If you're using line dividers (horizontal rules) within your web page, you can change the color,width and height of the line dividers by adding some attributes to your HTML code.
The examples below show various styles of the HTML tag. They are displayed in a tableand the width attributes span the set percentage of the table. When used without a table, the
width will span the set percentage of the entire web page.
Edit the text indicated in bold to suit your needs.
mailto:[email protected]?subject=Your%20Subject&body=Message%20for%20the%20body.http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmmailto:[email protected]?subject=Your%20Subject&body=Message%20for%20the%20body.http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm -
8/7/2019 Lab.Manual_Web tech Lab.
20/29
Using customized HTML web page horizontal rules or line dividers will enable you to quickly andeasily spice up your web pages.
CSS Tutorial: An Introduction to
Cascading Style Sheets
Cascading Style Sheets, better known as CSS, enable you to control the style and layout
of a web page. They will enable you to specify link styles, fonts, margins, tables, colors,
sizes, alignments and much more throughout your entire web page.
They can also be used to create a template like style sheet (stored within a separate file)
that can be used throughout your web site. You can simply link to your style sheet within
each of your web pages and have the ability to update the styles for your entire web sitewith just one file.
The Benefits of Using Cascading Style Sheets (CSS)
CSS will save you a great deal of time. When it comes to the Internet, there are really
only two elements: Content and the way that content is presented. With HTML, weprovide content, and define how that content will be presented within the HTML code.
However, we are very limited as to what we can do with HTML.
Each browser is different and they see things differently. This is why webmasters are
instructed from the very beginning to view their web pages in many different browsers,
such as Internet Explorer, Netscape, Firefox, and Opera (among many others), to make
sure that their web pages appear as they intended and expected them to from one browserto another.
Overall, the HTML code on the web page polices the content, and the CSS polices the
HTML. This allows you to create web pages that are suitable for all browsers.
One of the best benefits of using CSS within your web pages is the ease of updating yourweb pages. If you'd like to make a change to your design, instead of having to change
hundreds of web pages on your site, you can make one simple change to the CSS file, and
it will automatically update all of the pages on your web site. CSS enables you to do inseconds what would take hours to do in HTML.
-
8/7/2019 Lab.Manual_Web tech Lab.
21/29
Creating Cascading Style Sheets (CSS)
Learning, creating, and working with CSS doesn't require much. You do not need any
type of editor, as Cascading Style Sheets can be created using a plain text editor, such asNote Pad.
However, you will need a web browser. Internet Explorer and Firefox are the most
popular ones, but there are many others. Once you create your pages and are using CSS,you must ensure that you view your web pages through multiple browsers to ensure they
are displaying just as you had intended. Visit Any Browserto view your pages through
different browsers.
You may also need a way to upload your pages to your web server. This is typically done
with an FTP client, and there are many nice free one's available. You may also uploadyour files through the control panel of your web hosting service.
Internal and External Cascading Style Sheets (CSS)
CSS can be used in two ways. It can be used internally, which may be referred to as
embedded or inline, or it can be used externally, which is often referred to as a linkedstyle sheet. Ideally, you will be using linked styled sheets when you finish this tutorial.
The only time you may be using embedded CSS is if you would like to change an
individual link or text, or have a one or two page web site. If you will have more thanthat, however, a linked style sheet is definitely the way to go.
CSS can be used in three different ways:
Inline CSS
Added to your standard HTML tags.
Embedded CSS
An embedded CSS is exactly as it sounds. The CSS code is actually placed within theHTML web page between the and tags.
Linked CSS
A linked style sheet, on the other hand, is a completely separate document that is linked
to within a web page.
http://www.anybrowser.com/http://www.anybrowser.com/http://www.anybrowser.com/ -
8/7/2019 Lab.Manual_Web tech Lab.
22/29
Prioritizing CSS and HTML tags
When using CSS, certain tags take precedence over others. Here's how the tags are
prioritized:
HTML tags override all other tags.
CSS inline tags override embedded and linked tags.
CSS embedded tags override linked tags.
CSS linked tags won't override any other tags.
Formatting CSS Tags
CSS tags are formatted like this:
selector {property: value;}
The selector is a browser command and is followed by a property. The property is a
word describing the selector, which further instructs the browser. The value specifies thevalue of the property.
Although this may sound a little confusing, CSS is formatted much like standard HTML.
Let's compare the two formats:
HTML
CSS
body {font-size:16px;}
As you can see in the comparison diagram above, the Elementis equivalent to theSelector, the Attribute is equivalent to the Property and the Values are the same.
-
8/7/2019 Lab.Manual_Web tech Lab.
23/29
Inline Cascading Style Tags
Inline cascading style tags are used within standard HTML code using the STYLE
parameter. The following example will remove the underline of an individual link:
Your Link
Browser View:
Your Link
The STYLEparameter is added directly to your original HTML link code.
Inline style tags enable you to specify how each individual link will look.
Embedded Cascading Style Sheets
Embedded cascading style sheets (CSS) can perform the same tasks as the inline style
tags. However, the coding is placed between the and tags within
your HTML. You can specify how your entire page will appear including links, fonts,text and more, simply by using embedded style tags.
The following example will display your active text links (after a link has been clickedon) in a specific color. The hover color (when the mouse is placed over the link) will be
displayed in an alternate color and the underline will disappear.
Browser View:
Example Link(Place your mouse over the link to view this example.)
http://www.webdesignmastery.com/http://www.webdesignmastery.com/http://www.webdesignmastery.com/http://www.webdesignmastery.com/http://www.webdesignmastery.com/ -
8/7/2019 Lab.Manual_Web tech Lab.
24/29
The above code will display all of your links in a specific style.
Notice the code is placed within the comment tags? Comment tags look like this:
The comment tags are used to prevent older browsers that don't support style tags fromdisplaying the CSS codes within their page.
The great thing about embedding style codes is that you can create your own classes ofcode. What this means is that you can specify different styles throughout your page and
then call them within your page.
For example, you can add a class of code to a paragraph selectorlike this:
Notice the text highlighted in bold? This is a class name I made up. You can call it
whatever you'd like. Simply add .yourtext following your selector.
To put this style into action orcallit, simply place the following code within your HTML
where you would like the style to be used:
Keep in mind, the text you place after your CSS selector ( .yourtext) must be the same
name as the code you place to call the style.
For example, if your class code looks like this:
p.text
the code you use to call the style will look like this:
-
8/7/2019 Lab.Manual_Web tech Lab.
25/29
See how that works?
Linking CSS
The linking CSS method involves creating a file that defines specific styles. This CSS filecan be used throughout your entire web site to specify everything from body styles and
headings to paragraphs and HTML tables.
This file might look something like this:
BODY {font-family: Arial;
font-size: 12px;}
H1 {font-family: Georgia;
font-size: 16px;font-weight: bold; color: blue}
P { font-weight: normal;
color: blue}
This file should be saved as style.css and uploaded to your server where you store your
HTML files.
When using a style sheet, you must place a link to your style.css file within your HTML
between your and tags like this:
Your Page Title
Page Content
CSS Tutorial: Getting Started - Creating
a Basic HTML Web Page
-
8/7/2019 Lab.Manual_Web tech Lab.
26/29
Creating a Folder for Your Web Page
Prior to creating your web page, your first step should be to create a folder on your
desktop or within your My Documents folder to hold your new web page files. You cancall it web site or whatever you'd like.
Your next step will be to create a basic HTML page. Simply open a plain text editor, suchas Note Pad, and type or paste in the HTML code that you see in the box below. Each
element of that code will be explained below, as it is important that you understand what
these codes are and what they mean.
Here is the code that you should copy and paste into your text editor:
Your Page Title
Your Web Page Content
HTML Tags
Everything you see between the < and > symbols are html codes, which are also referredto as html tags. These tags are telling the web browser how they should display the page.
The tag tells the browser that it is about to see HTML coding.
The tag contains information about the page, such as the TITLE, META
tags for proper Search Engine indexing, STYLE tags, which determine the pagelayout, and JavaScript coding for special effects.
The tag tells the browser that the part of your web page that should be
viewable by others is about to start. The various tags used inside the body tag tell
the browser how to display the page.
For a complete list of HTML codes and examples, visit ourHTML Codes Chartsection.
Each HTML tag contains an opening tag and a closing tag. The opening tag is writtenwith the command enclosed with brackets.
Example:
http://www.web-source.net/html_codes_chart.htmhttp://www.web-source.net/html_codes_chart.htm -
8/7/2019 Lab.Manual_Web tech Lab.
27/29
The closing tag contains a forward slash followed by the command enclosed with
brackets.
Example:
The opening tag is telling the browser to begin the specified action and the closing tag is
telling the browser to end the action.
Saving Your HTML Document
Once you have copied and pasted the above HTML code into your text editor, your nextstep will be to save the document into the new folder you created. If your new web page
will be your main or starting page, you should save it as index.htm orindex.html, asindex is the file name most web servers will look for when someone types your web
address into a web browser. Secondary pages should be saved using the pages most
relevant keyword phrase. For example, if your page is about dog grooming tips, then youmight save your page as dog_grooming_tips.htm.
Next, place some content in your new web page between the and tags.
The content may be an article or whatever you'd like:
This Is Content.
This is content that others will be able to see when they visit your web page. When
content is pasted in, it won't have any formatting. It will just be text that reads from left to
right, in one long paragraph. It should have a heading, followed by the actual content. Inthis section, you will learn how to format the text so that it is easier to read and
understand. Use any article or content that you have written, and simply copy and paste it
into the HTML document that you have created.
Formatting HTML Text
Now, as you can see, the text isn't formatted. It isn't laid out in paragraphs, and it's not
that special. Even if you copy text in that is formatted and separated into paragraphs, youwill find that when you view it in a web browser, the formatting is gone. That is because
the format requires special tags.
Heading Tags
-
8/7/2019 Lab.Manual_Web tech Lab.
28/29
Let's start with the heading of the page. In the example above, the heading says This Is
Content. To turn that into something that looks like a heading, we use the heading tags.
Heading tags are presented as and may go as high as . Thelower the number, the bigger the text will appear. The title or heading of the page goes
between these tags, so that it appears like this: This Is Content.
Paragraph Tags
Your next step will be to divide the content into paragraphs. This is done by enclosingeach paragraph with the
tags. The openingtag is used at the beginning of a
paragraph, and the closing
tag is used at the end of each paragraph.If you'd like to move a sentence or some text to the next line, you can do so by using the
(break) tag at the end of or in between your paragraphs.Bold, Italics and Underline
To further format your text, you can use additional HTML tags, such as tag,
which will make any text between the opening and closing tags bold. To italicizeyour text, use the tags. You can underline your text with the tags.
You can find many more tags you can use within the HTML Codes Chart section.
This is very easy to memorize: b stands for bold, I stands for italicize, and u stands for
underline. P stands for paragraph, and br stands for break. H1 stands for heading 1.
By implementing these tags, you will see that your code looks like the following
example:
Your Page Title
This Is Content
This is content that others will be able to see when they visit your webpage. When
content is pasted in, it won't have any formatting. It will just be text that reads from left to
right, in one long paragraph. It should have a heading, followed by the actual content.
In this section, you will learn how to format the text so that it is easierto read and understand. Use any article or content that you have written, and simply copy
http://www.web-source.net/html_codes_chart.htmhttp://www.web-source.net/html_codes_chart.htm -
8/7/2019 Lab.Manual_Web tech Lab.
29/29
and paste it into the HTML document that you have created.