Techinal English Book

2014
English State Academy 1|Page

Dear students and teachers from CONALEP
Tamaulipas First of all I am pleased to greet you, I
know you are developing activities that strengthen
academic excellence and also that you are
developing innovative doings in your everyday with
the enthusiastic participation of teachers and with the aid from your directives.
In The State Development Plan 2011-2016 the state Governor Egidio

Torre Cant made it very clear that in the humane Tamaulipas that is needed
to be constructed and specifically in the strategy that is mentioned It is required
to achieve the formation of citizens with competences and knowledge for the
life and the development of the entity, through the establishment of a new
educational policy centered in learning and more clear still in the strategy
stated; 5.1.6 Impulse the teaching of English as a second Language in all the
academic levels.
This is why I am thankful with the Conalep in our State, whom by

presenting the pilot project Ingls Tcnico Especializado elaborated with the
enthusiastic participation of the State English Academy and the didactic
material presented, is a clear evidence of the effort that they are producing.
With high expectations I hope for the best relevant academic

achievements that after this project, once having been evaluated, can be
expanded and based on its impact can be presented to other levels.
I am sure that these didactic and academic materials constitute one of

the components of academic quality, since they will allow our students to have
the needed elements and competencies they require for a better performance in
their professional and personal lives.
Remember there are no achievements without effort. May you be very

successful.
Dr. Didoro Guerra Rodrguez

Education Secretary of Tamaulipas

The pilot Project Ingls Tcnico
Especializado was born with the purpose to
attend the line of action and the strategies
taken from The State Development Plan 2011-
2016 and from the State Education Plan 2011-
2016 in which the curricula is bassed in the
argument of: ingles para todos los estudiantes del nivel medio superior,
from here arises the commitment to accomplish this goal.
The participation of the State English Academy was decisive for the
achievement of the required academic materials that would be needed for the
starting date of such project, furthermore their participation was materialized by
designing 100 percent of the booklet that is now in your hands, they also
created a teacher guide booklet. This is why I strongly thank the Academy that
put in a great effort that is shown in these resources.
I want to ask the fifth semester students in the pilot group to optimize the
use of these materials that contain the minimum required to obtain the
competencies of the English program, as well as the program for Informatics but
in English.
For the success of this project we obviously depend on the English

teacher, directive personnel as far as the attention that will be offered to the
teacher, and especially to the students for their involvement; that will be
monitored in order to measure the advancement, the range achieved and the
learning acquired, which is why I hope that everyone puts in their strongest
effort to give great results.
I wish you a great success in the new adventure and may we achieve
this highly important purpose.
Ing. Jos Guadalupe Ibarra Martnez

State Director of Conalep Tamaulipas

BOOKLET CONTENTS.
I. Competencies 5
II. HTML R.A. 1.1 8
III. Glossary 51
IV. Wireless LAN R.A. 1.2 54
V. Glossary 67
VI. CSS and JavaScript R.A. 2.1 72
VII. Glossary 154
VIII. Virtual LAN R.A. 2.2 158
IX. Glossary 177
X. Rubrics 178

Competence Attributes
1.1. - Encounters the difficulties that are presented and addresses
1. - Discovers and values problems and is conscious of values, strengths and weaknesses.
own self and confronts 1.2. - Identifies emotions, manages them in a constructive manner and
problems and challenges recognizes the need of asking for help when a situation overhauls.
considering all objectives. 1.3. - Chooses alternatives and paths of action based on sustained criteria
and on a lifetime frame.
1.4. - Critically analyses factors that are influential in decision taking.
1.5. - Takes responsibility of own actions and decisions.
1.6. - Manages available resources keeping in mind the restrictions for the
achievement of goals.
2.- Is sensible to arts and 2.1. - Considers arts as a proof of beauty and the expression of ideas,
takes part in the sensations and emotions.
appreciation and 2.2. - Undergoes with arts as a shared historic fact that allows the
interpretation of own communication between individuals and cultures in time and space, at the
expressions in distinctive same time auto-develops a sense of identity.
genres 2.3. - Takes part in activities related to arts.
3. - Chooses and practices 3.1. - Recognizes physical activity like a means for physical, mental and
a healthy lifestyle. social development.
3.2. - Takes decisions after appraising the consequences of diverse habits
of consumption and risk taking conduct.
3.3. - Grows interpersonal relationships that contribute to his humane
development and that of those who surround him.
4. - Listens, interprets and 4.1. - States ideas and concepts through linguistic, mathematical or
emits relevant messages graphic representations.
in a variety of contexts 4.2. - Uses different communication strategies according to who is the
through the use of receptor, the context that is within and the final objectives.
means, codes and 4.3. - Identifies the key ideas in a text or speech and infers conclusions of
appropriate tools. them.
4.4. - Communicates in a second language in everyday scenarios.
4.5.-Manages information and communication technologies to retrieve
information and states ideas.
5.- Develops innovations 5.1.-Reflexively follows instructions and processes, considering how each
and proposes solutions of its steps helps in the achievement of an objective.
to problems from 5.2. - Sets information according to category, hierarchy and relationship.
established methods. 5.3.-Identifies systems and rules or medullar principals that underlay from
a series of phenomenon.
5.4. - Constructs a hypothesis and designs and applies protocols to proof
its validity.
5.5.-Synthesizes evidence obtained during the experimentation to make
out conclusions and formulate new questions.
5.7. - Manages information and communication technologies to process
and interpret information.

6. - Sustains a personal 6.1. - Chooses the most relevant sources of information for a specific
posture over topics of purpose, and distinguish among them according to their relevance and
interest and general reliability.
relevance, considering 6.2. - Values arguments and opinions, and identifies judgments and
other points of view in a fallacies.
critically and reflexive 6.3. - Recognizes his own judgments, modifies his points of view when
manner. discovers new evidence and integrates new knowledge and perspectives
to his heritage.
6.4.-Structures ideas and arguments in a clear, coherent and synthetic
manner.
7. - Learns by self-interest 7.1. - Defines goals and looks out for his processes of knowledge
and self-initiative along acquisition.
life. 7.2. - Identifies activities that result in low and high interest and difficulty,
recognizing and controlling his reactions when confronting challenges and
obstacles.
7.3.-Articulates diverse knowledge and establishes relationship between
them and his daily life.
8. - Takes place and 8.1. - Proposes problem solving or developing a team project, defining a
collaborates effectively in path of action with specific steps.
diverse teams. 8.2.-Contributes points of view with an introduction and considers those
of others in a reflexive manner.
8.3. - Applies a constructive attitude, congruent with the knowledge and
skills that are in different teams.
9. - Participates with a 9.1. - Privileges dialogue as a mechanism of problem solving.
civic and ethic conscious 9.2. - Takes decisions for the purpose of contributing to equality, welfare
in the life of the and democratic development of society.
community, region, 9.3. - Is aware of his rights and obligations as Mexican and member of
Mexico and the world. various communities and institutions, and recognizes the value of the
participation as a tool for their practice.
9.4. - Contributes to reaching a balance between individual interest and
welfare, and general interest of society.
9.5. - Proactively acts in front of social phenomenon and maintains
informed.
9.6. - Notices that the phenomenons that are developed in the local,
national and international environments occur within a global
interdependent context.
10. - Keeps a respectful 10.1. - Recognizes that diversity has place in a democratic space of
attitude towards equality and dignity and the rights of all the people, and rejects all form of
interculturality and the discrimination.
diversity of beliefs, 10.2. - Engages in dialogue and learns from people who have different
values, ideas and social points of view as well as cultural traditions, by identifying his
practices. circumstances in a broader context.
10.3. - Assumes that respect of the differences is the beginning of
integration and coexistence in the local, national and international
contexts.
11. - Contributes to the 11.1. - Adopts an attitude that favors the solving of environmental
sustainable development problems in local, national and international contexts.
in a critical manner, with 11.2. -Recognizes and considers the biological, economic, political and
responsible actions. social implications to environmental damage in a global interdependent
context.
11.3. - Contributes to reach a balance between the short and long term
interests related to the environment.

C1. - Identifies orders and interprets ideas, data and implicit and explicit concepts in a text,
considering the context in which it was elaborated and in which is received.
C.2. - Evaluates a text through the comparison of its content with another, by means of his previous
and new knowledge.
C3. - Establishes hypothesis over natural and cultural phenomenon of his ambient with consultation
of diverse sources.
C4. - Produces texts on basis of the normative use of the language, considering the intention and
communicative situation.
C.5. - States ideas and concepts in creative and coherent essays, with introduction, body
development, and clear conclusions.
C.6. - Expresses a point of view in public in a precise, coherent and creative manner.
C.7. - Values and describes the role of art, literature, and the media in the recreation or
transformation of a culture, keeping in mind the communicative purposes of the different genres.
C.8. - Values logical thinking in the communicative process in his academic and everyday life.
C.9. - Analyzes and compares the origin, development and diversity of the means and systems of
communication.
C10. - Identifies and interprets the main idea and possible development of an oral or written
message in a second language, noticing previous knowledge, nonverbal elements and cultural
contexts.
C11. - Communicates in a second language through an oral, logical or written speech congruent
with the communicative situation.
C12. - Uses the information and communication technologies to investigate, solve problems,
produce materials and transmit the information.

WEB Pages

INTRODUCTION
What is ?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language

HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by angle

brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a forward slash before the
tag name
Start and end tags are also called opening tags and closing tags
Example Explained
The !DOCTYPE declaration defines the document type

The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph

Elements
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and
the end tag, including the tags:
Web Browsers
The purpose of a web browser (such as

Google Chrome, Internet Explorer, Firefox,
Safari) is to read HTML documents and
display them as web pages.
The browser does not display the HTML

tags, but uses the tags to determine how
the content of the HTML page is to be
presented/displayed to the user:
Page Structure
Below is a visualization of an HTML page structure:
English State Academy 10 | P a g e

EDITORS
Writing Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or
TextEdit (Mac). We believe using a simple text editor is a good way to learn
HTML. Follow the 4 steps below to create your first web page with Notepad.
Step 1: Start Notepad
To start Notepad go to:
Start All Programs Accessories Notepad
Step 2: Edit Your HTML with Notepad
Type your HTML code into your Notepad:
Step 3: Save Your HTML
Select Save as.. in Notepad's file menu. When you save an HTML file,
you can use either the .htm or the .html file extension. There is no
difference; it is entirely up to you.
Step 4: Run the HTML in Your Browser
Start your web browser and open your html file from
the File, Open menu, or just browse the folder and double-click your
HTML file.
The result should look much like this:

Basic - 4 Examples
Don't worry if the examples use tags you have not learned. You will learn about
them in the next chapters.
Headings
HTML headings are defined with the <h1> to <h6>

tags.
Example
<h1>This is a heading</h1>
Paragraphs
HTML paragraphs are defined with the <p> tag.
Links
HTML links are defined with the <a> tag.
Example
<a href="http://www.w3schools.com">This is a link</a>

Note: The link address is specified in the href attribute. (You will learn about
attributes in a later chapter of this tutorial).
Images
HTML images are defined with the <img> tag.
Example
Note: The filename and the size of the image are provided as attributes.

ELEMENTS
Element Syntax
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content
Most HTML elements can have attributes
Tip: You will learn about attributes in the next chapter.
Nested Elements
Most HTML elements can be nested (can contain other HTML elements). HTML documents
consist of nested HTML elements.
HTML Document Example
The example above contains 3 HTML elements.
The <p> element:

The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The <body> element:
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The <html> element:
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Empty Elements
HTML elements with no content are called empty elements. <br> is an empty element without a
closing tag (the <br> tag defines a line break).

I. - Watch the following video and listen carefully to the information. Take notes
for answering the question below. What is HTML. HTML Tutorial for Beginners (1)
In the table below write the tags description on the line.
Description
1.
2.
3.
4.
5.

ATTRIBUTES
Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
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.
Tip: In some rare situations, when the attribute value itself contains quotes, it is
necessary to use single quotes: name='John "ShotGun" Nelson'

HEADINGS
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading.
<h6> defines the last important heading.
Example
Note: Browsers automatically add some empty space (a margin) before and after each heading.
Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages. Since
users may skim your pages by its headings, it is important to use headings to show the
document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less
important H3 headings, and so on.

LINES
Lines
The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to
separate content:
Example

For designers
There are two common mistakes designers do: Using the tags <p>, <br> y
<hr> and write the HTML code in order to write build up a text.

I. - Watch the following video and listen carefully to the information. Take notes
for answering the question below. Basic HTML Tutorial.
TEXT FORMATTING
This text is bold

This text is italic
This is computer output
This is subscript and superscript
Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags
are called formatting tags (look at the bottom of this page for a complete reference).
Often <strong> renders as <b>, and <em> renders as <i>.
However, there is a difference in the meaning of these tags:
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be rendered in a way that
the user understands as "important". Today, all major browsers render strong
as bold and em as italics. However, if a browser one day wants to make a
text highlighted with the strong feature, it might be cursive for example and
not bold!

Write in the blank the tag that is needed in order to modify the text as it
looks
Always know when a stage comes to an end. Closing cycles, shutting doors,
finishing chapters, it doesnt matter the name we give it, what it matters is to
leave in the past the moments of life that are over.
Text Formatting Tags

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<i> Defines italic text
<u> Defines underline text

"Computer Output" Tags
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<pre> Defines preformatted text
Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term

LINKS
Links are found in nearly all Web pages. Links allow users to click their way
from page to page.
Hyperlinks (Links)
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the links
destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue

A visited link is underlined and purple
An active link is underlined and red
Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

Links - The target Attribute
The target attribute specifies where to open the linked document. The example below will open
the linked document in a new browser window or a new tab:
Example
Links - The id Attribute

The id attribute can be used to create a bookmark inside a HTML document.
Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section
</a>

Write the HTML code necessary to create a link from a web page to the
Iowa State University home page (http://www.iastate.edu).
_________________________________________________
A directory called "WWW "contains 2 subdirectories (folders), called

"trees" and "images." Each subdirectory contains several files. Which of the
following is the proper way to embed the "elmleaf.gif" image within the elm.html
document?
1. <A HREF="../images/elmleaf.gif">click here</A>

2. <A HREF="images/elmleaf.gif">click here</A>
3. <AHREF="images/elmleaf.gif">click here</A>
4. <IMG SRC="../images/elmleaf.gif">
5. <IMG SRC="images/elmleaf.gif">
6. <A HREF="mailto:elmleaf.gif">
In the above example, above write the HTML code that would create a
link in "elm.html" which being clicked, would replace the display in the web
browser with the "elmleaf.gif" image.
_______________________________________________

IMAGES
Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The
value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
The browser displays the image where

the <img> tag occurs in the document. If
you put an image tag between two
paragraphs, the browser shows the first
paragraph, then the image, and then the
second paragraph.
Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be
displayed.
The value of the alt attribute is an author-defined text:
The alt attribute provides alternative information for an image if a user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen
reader).
Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:
Tip: It is a good practice to specify both the height and width attributes for an image. If these
attributes are set, the space required for the image is reserved when the page is loaded.
However, without these attributes, the browser does not know the size of the image. The effect
will be that the page layout will change during loading (while the images load).
Basic Notes - Useful Tips

Note: If an HTML file contains ten images - eleven files are required to display the page right.
Loading images takes time, so my best advice is: Use images carefully.
The source code for

A third simple web page
<html>
<head>
<title>Example Three</title>
</head>
<body>
<p>A third simple web page</p>
<p>Here is a photo of some fruit. It is in the format of a JPEG image.</p>
<p><img src="fruits.jpg" /></p >
<p>Photo by kind permission of <a href="mailto:Christophe.Reffay@univ-
fcomte.fr">Christophe Reffay 2003</a></p>
<p>*****************************************************</p>
<p>And here is a picture of a rose. It is in GIF format.</p>
<p><img src="images/rose.gif" /></p>
<p>One of many images available free from the
<a href="http://www.pdictionary.com/">Internet Picture Dictionary</a>. </p>
<p>Click on this <a href="index.htm">link</a> to go back to the lesson.</p>
</body>
</html>

Put a check in the correct answer.
1. First, what is the file name of this "HTML Exercise 3"?

I mean, of this page with the CLA logo that you're looking at now.
A. HTML Exercise 3
B. exercise3.htm
C. exercise3.html
2. Now look at the source code for A third simple web page on the left.
To insert the JPEG image, what do you have to write?
A. <img src=fruits.jpg />
B. <img src="fruits.jpg" />
C. <img src="fruits.jpeg" />
3. To insert the GIF image what do you have to write?
A. <img src"images/rose.gif" />
B. <img src="imagesrose.gif" />
C. <img src="images/rose.gif" />
4. <img src="images/rose.gif" /> means that:
A. The file images is in a folder called rose.
B. The file rose.gif is in a folder called images.
C. The file images is in a folder called rose.gif.

Image Tags
Tag Description
<img> Defines an image
<map> Defines an image-map
<area> Defines a clickable area inside an image-map
Attributes
New : New in HTML.
Attribute Value Description
align top Specifies the alignment of an image according to

bottom surrounding elements
middle
left
right
alt text Specifies an alternate text for an image
border pixels Specifies the width of the border around an image
Crossorigin anonymous Allow images from third-party sites that allow

New use-credentials cross-origin access to be used with canvas
height pixels Specifies the height of an image
hspace pixels Specifies the whitespace on left and right side of an

image
ismap ismap Specifies an image as a server-side image-map
longdesc URL Specifies the URL to a document that contains a

long description of an image
src URL Specifies the URL of an image
usemap #mapname Specifies an image as a client-side image-map
vspace pixels Specifies the whitespace on top and bottom of an

image
width pixels Specifies the width of an image

LISTS
The most common HTML lists are ordered and unordered lists:
Lists
An ordered list: An unordered list:
1. The first list item List item
2. The second list item List item
3. The third list item List tem
Unordered Lists
An unordered list starts with the <ul>

tag. Each list item starts with the <li>
tag.
The list items are marked with bullets

(typically small black circles) and how
the HTML code above looks in a
browser:
Ordered Lists
An ordered list starts with the <ol> tag.

Each list item starts with the <li> tag.
The list items are marked with numbers

and how the HTML code above looks in
a browser:
Description Lists
A description list is a list of terms/names,

with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with

<dt> (defines terms/names) and <dd>
(describes each term/name):

What is the best way to provide a caption for an HTML list? E.g
Fruit
Apple
Pear
Orange
How should the word "fruit" be handled, particularly if I want it to be semantically associated
with the list itself?
While there is no caption or heading element structuring your markup effectively

can have the same affect. Here are some suggestions, choose the correct
answer by writing a check in the box:
Nested List
<ul>
<li>
Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Organge</li>
</ul>
</li>
</ul>
Heading Prior to List

<hX>Fruit</hX>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
Definition List
<dl>
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Pear</dd>
<dd>Orange</dd>
</dl>

List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list tem
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list

TABLES
Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the
<td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain
text, links, images, lists, forms, other tables, etc.
How the HTML code above looks in a browser:
COLUMN #1
COLUMN #2
COLUMN #3
Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes
this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:

Table Headers
Header information in a table is defined with the <th> tag. All major browsers display the text in
the <th> element as bold and centered.
Tables are one of the most useful tools for page layout that you will find. One of
the most common questions I hear is "How can I put some text next to an
image?" One simple solution is a table...
Here is the table with the borders turned on...
Fresh Fruits
It has long been known that a

diet that includes at least a
few servings of fresh fruit
every day will help keep you
healthy, fit and trim.
Fill in the blanks the tags needed to create a table in the way as shown
in the figure above, include the attribute for borders. Note: The name of the
image is frutero.jpeg.

Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

FORMS AND INPUT
Forms
HTML forms are used to pass data to a server. An HTML form can contain input elements like
text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select
lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form> input elements </form>
Forms - The Input Element

The most important form element is the <input> element. The <input> element is used to select
user information. An <input> element can vary in many ways, depending on the type attribute.
An <input> element can be of type text field, checkbox, password, radio button, submit button,
and more.
The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.

Password Field
<input type="password"> defines a password field:
<form> Password: <input type="password" name="pwd"> </form>
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a
limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Male
Female
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
I have a bike
I have a car
Submit Button
<input type="submit"> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in
the form's action attribute. The file defined in the action attribute usually does something with
the received input:
<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Submit
Username:
If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "html_form_action.asp". The page will show you the
received input.
Form Tags
New : New tags in HTML5.
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist>New Specifies a list of pre-defined options for input controls
<keygen>New Defines a key-pair generator field (for forms)
<output>New Defines the result of a calculation

Grammar in Context
In teams of four members study and discuss the following information and then
answer the examples below.
G.C. 8.1,8.2 & 8.3
POSITIVE AGREEMENT
To express positive agreement we use: SO + Auxiliary* + Subject

Subject Auxiliary
If there is no auxiliary in the sentence, we use DO or Does (Depending on the I
subject): You Do
We
They
I live in London and so does Susan = I live in London and Susan lives in
He Does
London She
You work in McAllen and so do I = You work in McAllen and I work in It.
McAllen.
If the principal verb is the verb to be, we use it as auxiliary. Subject Auxiliary
I am
He is
Petes web page is gorgeous and so is yours. She
HTML is a language to build up web pages and so is CSS. it
You are
We
They
If the principal verb is in past, we use it as the auxiliary Did.
Tom designed a new web page last year and so did I.

I learned three new tags and so did Tom
Note
Special verbs that never use Do are: have, can, could, will, would, shall,
should, may, might. These verbs are used as the auxiliary.
I can speak English and so can my sister.

Peter will take a web page course next year and so will his sister.

Colloquial We can use SUBJECT + TOO for all the sentences.
I like web pages design and my sister too.

I can design a web page and my brother too.
NEGATIVE AGREEMENT
To express negative agreement we use: NEITHER + Auxiliary + Subject
Note
The auxiliary will follow the same rules as the ones we use them with So.
NEITHER is a negative word so it is used with an affirmative verb form (we can't have a double
negative in a sentence).
I dont know how to use HTML and neither does Mike.

Tom cant design a web page and neither can I.
George isnt a good web designer and neither are Pete and Larry.
Colloquial Me neither (we can only use it with the subject "Me", but not with other subjects)
Tom doesnt like school and me neither.

I cant use HTML and neither can my sister. (you can't say: My sister neither)
Grammar in Action. Now lets see what you all have learned.
Circle the correct answer. G.C. 5.1
1.- I don't believe she can design a web 2.- I think his web page looks great. (+)
page. (-)
a)Neither do I. b)Neither can I. a)So do I. b)So will I.
c)Neither am I. c)Neither did I. c)So am I. c)So did I.
3.- I'm so tired . (+) 4.- I'm not saying that is your fault!
a)So do I. b)So will I. a)Neither do I. b)Neither can I.
c)So am I. c)So did I. c)Neither am I. c)Neither did I.
Teacher gives the correct answers and the students check their answers and all doubts are
clarified by the teacher.

I.- Grammar exercise.
Read the following sentences and circle the correct answer. G.C. 5.1
1.-I don't believe she can design a web page.
a)Neither do I b)Neither did I c)Neither can I d)Neither am I
2.-I've spent all my money in this laptop. I think Ive paid too mucho for it.
a)So do I b)So am I c)So have I d)So did I
3.-I haven't been in a web page expo before.
a)Neither have I b)Neither did I c)Neither will I d)Neither am I
4.-I can't understand these HTML tags.
a)Neither have I b)Neither can I c)Neither will I d)Neither do I
5.-I would like to have a break, Im tired of been programming this web page.
a)So will I b)So am I c)So would I d)So did I
6.-I can see how you save your HTML file.
a)So am I b)So do I c)So have I d)So can I
7.-I wouldn't go to the web page expo this year.
a)Neither have I b)Neither can I c)Neither will I d)Neither would I
8.-I didn't finish my web page, Im missing some links.
a)Neither do I b)Neither did I c)Neither can I d)Neither am I
9.-I went to the computer room yesterday and I think the workstations are terrific.
a)So am I b)So do I c)So have I d)So can I
10.-Tom paid $200 for that router but I think he paid too much for it.
a)So do I b)So am I c)So have I d)So did I

II.- Grammar exercise.
Complete the conversations using the words in parentheses. G.C. 5.1
A: I agree with John about the web pages design.
B: _______________________________________________________________. (So)
A: I am not in agreement with the use of some HTML tags.
B: _____________________________________________________________. (Neither)
A: I dont think we should criticize Mikes web page.
B: ____________________________________________________________. (Neither)
A: I think David is a good programmer.
B: _______________________________________________________________. (Too)
A: I disagree with Marys web page body; I think is boring and monotone.
B: _______________________________________________________________. (So)
A: Yesterday, in Martins presentation, I didnt like the web pages headings, they were too big.
B: ____________________________________________________________. (Neither)
A: I agree with the HTML formatting tags that Ann used in her web page.
B: _______________________________________________________________. (Too)

G.C. 8.1, 8.2 & 8.3
PHRASES FOR EXPLAINING CAUSE
Cause-effect Example Sentences

...because of... There were mistakes because of the lack of knowledge about the HTML
tags.
...caused by
The mistakes were caused by the lack of knowledge about the HTML tags.
...cause of
The lack of knowledge about the HTML tags was the cause of the mistakes.
...reason for
The lack of knowledge about the HTML tags was the reason for the
...attributed to mistakes.
...on account of The mistakes were attributed to the lack of knowledge about the HTML tags
.
...owing to
There were mistakes on account of the lack of knowledge about the HTML
tags.
Owing to the lack of knowledge about the HTML tags there were mistakes.
(These cause-effect phrases are all followed by noun phrases; i.e. ' the lack
of knowledge about the HTML tags .)
Grammar Note: Don't use 'Because' as the first word in a sentence: It's bad style.
There are a number of alternatives. You can use:
'Due to...'; e.g. 'Due to the lack of knowledge about the HTML tags there were
mistakes.'
'Owing to ...'; e.g. 'Owing to the lack of knowledge about the HTML tags
there were mistakes.'
Explaining Cause Explaining Effect
Because As a result
Because of Thats why
For this reason The main consequence

Grammar in Action. Now lets see what all of you have learned.
Complete theses sentences with words or phrases from the box. G.C. 5.1
because Thats why because of consequence as a result this reason
1. In Japan, thousands of people were programmer ____________ the technological

development.
2. One ___________________ of not picking the correct attribute is not having what
is expected.
3. The students left ___________________ the computer room was closed.
4. There was a lot of misunderstanding of the tags and, ________, nobody finished on
time
5. The HTML tags werent applied correctly and the design was for
__________________ a disaster.
6. They were programming all day long. ___________ they are so tired.
Circle the correct answer. G.C. 5.1
owing to
1. Programmers believe some languages are better nowadays because the
development of new design programs. caused by
due to
2. Hes embarrassed about being bald because of he always wears a wig.
thats why
This reason
3. Because of the traffic jam I arrive late for work every day.
As a result

due to
4. You are not following the teachers advice for this reason you wont finish on
time your web page design. caused by
G.C. 8.1, 8.2 & 8.3
GIVING AND PRESENTING OPINIONS
Nine Expressions to Use In Speaking And How To Use These Phrases In Your English
Writing
In my opinion, this one would be Its the classic expression but its not the only one
better.
To my mind this one's better. Is a common spoken form - and it can be used in
writing, too
If you ask me, this one's better. Is very, very common in spoken English, and can
come first or last in a sentence
To my way of thinking, this one's fine. Is often used with emphasis on 'my' to give a
strong opinion
In my view, this one is best. Is common in spoken and written English
Know what I think? That one's best. The abbreviated question '(Do you) know what I
think?' is very popular and is not rude
I'd say tomorrow that one's better. The conditional structure I'd say is rarely taught
as a conditional, but this is one of the most
common ways of giving an opinion in English
For me, that one's better. Is like 2 and 5
I tell you what I think, that one's best. This one is similar to 6, and is quite direct

Solve the clues. Complete the crossword. What is 1 down? G.C. 5.1
1.- In my opinion, this image tag ___________________ be better.
2.- To my view, Toms web ___________________ is better than Mikes.
3.- To my __________________ this link offers you better information than the other one. What do you think?
4.- To my way of ______________________ your web page is lacking of good headings design.
5.- Id say ______________________ is the correct imagine tag that we need to use for this picture format.
6.-I tell you what I think; this ________________ text tags list has been very useful for all of us.
7.- If you ask me, I love your design, specially the ___________________ you used in the headings, is that Comic
San Ms?
OPINION THINKING FONT WOULD THIS PAGE FORMATTING
1 1
Individually study the following information and then answer the exercise below.
G.C. 7.1

PHRASES TO EXPRESS ADVANTAGES
AND DISADVANTAGES.
Expressing Advantages Expressing Disadvantages

The main advantage is The disadvantage is
Another advantage is Another disadvantage is
On one hand On the other hand
Complete the sentences with appropriate words or phrases from the box . G.C. 5.1
advantage disadvantage Generally speaking On the other hand
1. The main ______________________ of using HTML is that you design it as you

wish.
2. These scanners are cheap and immediately available. __________, they are almost
obsolete.
3. __________, the majority of the programmers are more interested in the design
than in the content.
4. A __________ of these kind of links, is that they are online today and tomorrow
they wont.

CONNECTORS OF ADDITION,
CONTRAST AND SEQUENCE.
Individually study the following information and then answer the exercise below.
G.C. 7.1
CONNECTORS
Addition Contrast Sequence
Moreover, However, The first thing to do is
In addition, Despite First of all,
What is more, In spite of Secondly,
Before we
Match the columns. G.C. 5.1
( ) We are optimistic a) We need to decide the salary to offer him/her.

about our web design.
( ) Our products are b) The first thing to do is to hire a new designing company.
What do you think?
selling well.
( ) Before we hire a new c) Moreover, we should invest in our web site to do it
programmer, friendlier and more attractive for our customers and as a
consequence of this we should increase our online sales.
( ) We should improve d) However, we are aware that our content and links are not
our web site. as good as we expected.
( ) Despite our e) We accomplished our goal, I feel we can do a better design

problems, next time, we have learned a lot and we have seen our
errors, and we can improve them next time.

Self evaluation
G.C. 6.3
Goal Yes No Ways to

improve
I am able to express agreement with an opinion of another

person.
I know the phrases that are used in order to express the

cause or effect of an event, news, etc.
I am able to express my opinion about something that is

being presented.
I know the phrases that must be used to express the

advantages or disadvantages of something.
I know the connectors of addition, contrast and sequence

that I have to use when Im giving my opinion.

Well Folks, first let me congratulate to all of you
because you almost accomplish the target and
you have done things very well.
So congratulations!!!!!!!!!!!!!!!!!
But you havent finished it yet, there is something

you havent done, and that is the main target and
the real challenge for what I dare you,
So Are you ready for the real challenge?
Ready or not, here it comes.
Youve already learned how to build up a Web

Page using HTML language. Right?, now
Your final project is to create a Web page design in which you must include the
following sections.
1. Heading designs
2. Different text formatting
3. Different pictures formats and aligned in different positions.
4. At least 2 different links
5. Include at least a table with a heading, text and image.
6. Include a form.
After you finish your web page design you must work in pairs and you must do the
following.
1. Present you web page to your partner.

2. Then you must write a report of at least 1 page about your partners web
page, in which you must include the following points:
A. Your opinion about the general view of the web page
B. Your opinion about specific sections of the web page.
C. The advantages or disadvantages of placing the elements in a specific
place.
D. The consequences of place it in a wrong place or to use a wrong text
formatting.
E. Your suggestions for improvement
F. Present your report in class using a power point presentation in which
you may only include clues, not the whole paragraph.

GLOSSARY
<! -- ... -->: A comment whatever you put here will be skipped over by the browser.
Alt text: Text description of a graphic that appears before the graphic is loaded into the browser. After
an image has been downloaded on the browser, the alt text may briefly appear over the graphic as you
rollover the mouse over the graphic.
Attribute: A property of an HTML element used to provide additional instructions to a given HTML tag.
The attribute is specified in the start of HTML tag.
Browser: A program used to access and display HTML documents. Common examples: Internet Explorer,
Netscape, and Mozilla Firefox.
Closing tag: An HTML instruction that tells the browser to turn off a specific feature of an opening tag.
Containers: Containers refer to the area enclosed by <start> and </stop> tags where the commands
take effect. Some tags, such as <HTML> enclose the entire document, others enclose lists, and others
can enclose a single world.
<!DOCTYPE>: The DTD (Document Type Declaration), this tells your browser which version of HTML
you're using. Make sure you use the right DTD, or your page may display incorrectly.
Elements: An element in HTML refers to a tag (such as <head>, <body>, and <p>) or element of
structure of a document(such as body, title, and paragraph).
Entities: Entities are those characters that do not appear on the keyboard (i.e., , , etc.) or
characters that have special meaning in HTML (i.e., <, >, &, etc.).
Frames: HTML supports frames to divide a web page into independent and scrollable sections. Having
two frames on a web page is like loading three separate pages in the browser. A common use for frames
is to place the navigation on the left, and content on the right.
FTP: FTP stands for File Transfer Protocol. FTP is a robust method for transferring files between
computers using TCP/IP. TCP stands for Transmission Control Protocol and IP stands for Internet
Protocol.
GIF (Graphics Interchange Format): A file format (commonly used for web pages) used for storing image
files.
HEAD or HEADER (of HTML document): The top portion of the HTML source code behind Web pages,
beginning with <HEAD> and ending with </HEAD>. It contains the Title, Description, Keywords fields and
others that web page authors may use to describe the page. The title appears in the title bar of most
browsers, but the other fields cannot be seen as part of the body of the page. To view the <HEAD>
portion of web pages in your browser, click VIEW, Page Source.

HTML (Hyper Text Mark-up Language): While it is not an official computer language such as C++ or
pascal, HTML is the way in which computers communicate across the world wide web. It consists of
many tags that allow writers to mark-up text documents so that they can be viewed by others using web
browsers.
<html>...</html>: Standard opening and closing tags for any HTML page. Enclose everything else in
these. Container tag.
HTML converter: A software that converts text to HTML code.
HTML editor: A software that inserts HTML code as you work to create an HTML file.
Hypermedia: Hypertext that may include multimedia like text, images, sound, and video.
Imagemap: A graphic that has clickable areas (or hotspots) defined to allow a user to move to another
URL.
Inline: Elements those that are supported directly by HTML are known as inline. Also, another
characteristic of inline element is that their output can be seen or heard without the user taking any
additional action (such as clicking, and installing of a plug-in) because the output is directly placed on
the webpage. Inline elements include, for instance, animated graphics, graphics, and sound.
JPEG or JPG (Joint Photographic Experts Group): A common cross-platform image format that is used on
the web.
Link: The URL imbedded in another document, so that if you click on the highlighted text or button
referring to the link, you retrieve the outside URL. If you search the field "link:", you retrieve on text in
these imbedded URLs which you do not see in the documents.
Nesting/nested tags: Nesting occurs when you place tags within other tags. Anytime you create an
HTML document, you will end-up using nested tags. For example, the <title>, and <body>, tags are
nested inside the root <html> tag. The <body> tag is likely to also nest inside of itself other tags.
Notepad: Is a generic text editor included with Microsoft Windows that enables someone to open and
read plaintext files. If the file contains special formatting or is not a plaintext file, it will not be able to be
read in Microsoft Notepad.
Pixels: Pixels are a method of measurement used in the computer world. Your computer screen's
resolution is measured in pixels, 832*624, 640*480, etc. They are the number of "dots, or pixels, that
computer displays horizontally and vertically. This allows for a standard to be set, so that a 100*50
picture always comes up as the same relative size, but could vary in absolute size depending on the
resolution of your monitor.
Relative and Absolute Links: Relative and absolute links are styles of links that one finds connecting a
web page to other pages, files, etc. Relative links look like this /~ahetting/htmlprimer.html. They consist
of telling the link where to find what it is looking for, but leave out the server that the page is attached
to because the original page and the one being sought after are in the same directory(folder or server).
The same link in absolute link format would look like this

http:/serendip.brynmawr.edu/~ahetting/htmlprimer.html. They accommplish the same goal, but each
has it's advantages and disadvantages. If you move a folder with web pages with relative links to a new
server, then nothing will happen and all the links will remain stable. But if you were to only move one of
those pages, then it's links would be broken because the other pages would be in a differnt
directory(folder or server). Absolute links have the opposite effect, if you move one file then it's links
will be fine.
Site or WEB-Site: This term is often used to mean "web page," but there is supposed to be a difference.
A web page is a single entity, one URL, one file that you might find on the Web. A "site," properly
speaking, is an location or gathering or center for a bunch of related pages linked to from that site. For
example, the site for the present tutorial is the top-level page "Internet Resources."
Style sheet: A style sheet includes styling syntax that dictates how your web page will look. Style sheets
are very useful as they help web developers create uniform presentation of web pages.
Syntax: Syntax basically refers to the rules a computer language uses to perform a task. Without syntax,
a computer language would not be functional or useful at all. HTML syntax dictates what and how a web
page will display.
Syntax error: A syntax error basically refers to a situation in which the rules (or a rule) of the computer
language are (is) broken. In HTML, depending on the syntax error you produce, the web page may look
completely different than what you had intended.
Tags: Are the commands that give HTML documents their functionality. They consist of commands
placed within < and >. Some tags work by placing a start and stop tag at each end of the desired text,
such as below <big>.This makes the text bigger <big>.The stop tags are often the same as the start with
the addition of "/" at the beginning of the stop tag.
TITLE (of a document): The official title of a document from the "meta" field called title. It is what
appears in the top bar of the window when you display the document and it is the title that appears in
search engine results. The "meta" field called title is not mandatory in HTML coding. Sometimes you
retrieve a document with "No Title" as its supposed title; this is caused when the meta-title field is left
blank.
URL: Uniform Resource Locator. The unique address of any Web document. May be keyed in a browser's
OPEN or LOCATION / GO TO box to retrieve a document. There is a logic the layout of a URL:
Anatomy of a URL:
Type of file Domain name (computer Path or directory on the Name of file, and its file
file is on and its location computer to this file extension (usually ending
on the Internet) in .html or .htm)
http:// www.lib.berkeley.edu/ TeachingLib/Guides/Internet/ FindInfo.html
Web Browsers: Are the applications that allow one to view HTML documents from either your own
computer or from any other computer connected to the internet.

Hello folks, Im Mr.
Computer Man, and as you
can see Im here to dare you
all to configure the sources
of a wireless network, I
know you can do it but it
will take you a lot of effort,
but at the end it will be
worthless.
So what are you waiting

for?
Lets get to work!!!

I. Identification of the wireless LAN infrastructures. Read the lecture and
make a comparative chart with the Wireless LAN Standards.
G.C. 4.4 and 4.5
Wireless LAN Standards

- 802.11a
IEEE 802.11 - Standard for wireless networks with line of sight. It is applied to wireless LANs
and provides 1 or 2 Mbps transmission in the 2.4 GHz band using any frequency jumps the
spread spectrum (FHSS) or direct sequence spectrum (DSSS).
IEEE 802.11 - Standard than 802.11b, allowing maximum theoretical speeds of up to 54 Mbps ,
relying on the 5GHz band . In turn, eliminates the problem of multiple interference that exist in
the band of 2.4 GHz (microwave ovens, digital telephones DECT, Bluetooth).
- 802.11b
IEEE 802.11b - An extension to 802.11 to provide 11 Mbps using DSSS, also commonly known
as Wi - Fi (Wireless Fidelity): A term promulgated by the WECA registered to certify IEEE
802.11b products able to interoperate with other manufacturers. Its the standard most
commonly used in wireless communities.
802.11g
IEEE 802.11g - Uses the 2.4 GHz band , but allows it to transmit on theoretical speeds of 54
Mbps is achieved by changing the mode of signal modulation , from ' Complementary Code
Keying ' a ' Orthogonal Frequency Division Multiplexing ' . Thus, instead of having to purchase
new wireless cards, suffice to change its internal firmware.
- 802.11n
IEEE 802.11n. - A proposed amendment to the IEEE 802.11-2007 standard to significantly
improve network performance beyond previous standards, such as 802.11b and 802.11g, with
a significant increase in the maximum transmission speed of 54 mbps at a maximum of 600
mbps physical layer currently supports 300Mbps, using two spatial streams on a channel of 40
MHz Depending on the environment, this can result in user perceived performance of
100Mbps.It can be useful broadcast or transmition of radio and TV On line.
II. Work in pairs to make the comparative chart

G.C. 5.2
PROTOCOL FREQUENCY (GHz) BAND WIDE (MHz) APPLICATIONS
802.11 a
802.11 b
802.11 g
802.11 n
III. Share your answer with the group.

G.C. 8.2
Teacher gives the correct answers and the students check their answers and all doubts are clarified
by the teacher.

IV. Read again the paragraph and answer the questions.
G.C. 5.1
1. This standard is used in microwave ovens, digital telephones DECT,

Bluetooth.
2. IEEE 802.11g, uses the 2.4 GHz band, but allows it to transmit on theoretical
speeds of 54 Mbps. How can it achieve this change?
3. Which standard is used in radio frequencies?
4. What was the improvement network performance beyond previous

standards, such as 802.11b and 802.11g?
5. Which standard is able to operate with Wireless Fidelity?
V. In groups of four members, search information about the following components of

WLAN
D.C. 4.1
Components of the wireless WLAN.
Component Description
Wireless NIC
Directional Antenna.
Antennas.

Component Description
Omnidirectional antenna.
Sector Antennas
Access Point (Access Point).
Wireless Router.
Wireless Bridge.
.
Wireless Client.

Infrastructure and Ad hoc
The IEEE 802.11 standard specifies two modes: infrastructure and ad hoc .
VI.- Look the pictures and write a brief description about How infrastructure and ad hoc
connect computers with wireless network adapters.
G.C.5.1 and 8.3
Infraestructure Ad Hoc

VII. Read the following paragraph and do the activities mentioned.
G.C. 4.4 and 4.5
Wireless Security. Security comprises IEEE 802.11 authentication and encryption. Encryption is used to
encrypt or scramble data from wireless frames before being sent to the wireless network. With
authentication requirements, wireless clients authenticate themselves before they are allowed to join
the wireless network.
Encryption. The following types are available for use encryption with 802.11:
WEP Encryption: For encryption of wireless data, the original 802.11 standard defined wired equivalent
privacy (WEP). Due to the nature of wireless networks, protecting the physical access to the network is
difficult. Unlike a wired network which requires a direct physical connection, it is possible that any user
within range of a wireless access point or a wireless client can send and receive frames, as well as listen
to other frames sent, so that interception and eavesdropping remote wireless frames are very simple.
WEP uses a shared secret key to encrypt the sending node data. The receiving node uses the same WEP
key to decrypt the data. For infrastructure mode, the WEP key must be configured on the wireless
access point and all wireless clients. For ad hoc mode, the WEP key must be configured on all wireless
clients.
Choosing a WEP key
The WEP key should be a random sequence of keyboard characters (uppercase and lowercase letters,
numbers and punctuation marks) or hexadecimal digits (numbers 0 through 9 and letters A to F). The
more random WEP key, the more secure use.
WPA Encryption: IEEE 802.11i is a new standard that specifies security improvements in wireless local
networks.
With WPA, encryption is performed using TKIP (Temporal Key Integrity Protocol temporary), which
replaces WEP for stronger encryption algorithm. Unlike WEP, TKIP provides the determination of a
single unicast encryption key for each authentication startup and synchronized change of the unicast
encryption key for each frame. Because TKIP keys are automatically determined, it is not necessary to
configure an encryption key for WPA.
WPA2 Encryption: WPA2 is a product certification that the Wi-Fi Alliance that certifies wireless
devices are compatible with the 802.11i standard. WPA2 supports the additional mandatory security
features of the 802.11i standard that are not included for products that support WPA. With WPA2,
encryption is performed using AES (Advanced Encryption Standard), which also replaces WEP for
stronger encryption algorithm. As for WPA TKIP, AES provides the determination of an encryption key
unique starting unicast for each authentication and synchronized change of unicast encryption key for
each frame.
VIII. Work in teams of four members.

G.C. 4.5
Recommend Security Configurations according with lower to higher security:
Security configuration Recommend in:
WEP
WAP
WAP2

IX. Watch the following video and answer the questions.
G.C. 4.2 D.C. 4.10
http://www.youtube.com/watch?v=tbBdXMvVLZw 00:00 to 6:45
1.- Which service set is also called Ad Hoc Network?
2.- Give three characteristics of Ad Hoc.
3.- SSID is the logical name given Infrastructure Network.
True False
4.- Transmition Rate for BSSID is 46.
True False
5.- MBSSID can include multiple clients.
True False
Self evaluation
G.C. 6.3
Goal Yes No Ways to improve
I can identify the sources of wireless network
I can identify the standards and their applications
I know how to use the encryptions

I. Grammar in context.
D.C. 4.1
Zero Conditional
It refers to a situation that always is true (universal true)
If clause (If+present) Main clause (Simple present)
If you freeze water It turns into ice
If I work too much, I get tired.
If she eats chocolate, she gets an allergy
If she doesn't know the answer, she keeps silent.
If we don't go out on Saturdays, we rent a video and stay home.
First Conditional
It is used when a situation is real or possible.
If clause (If + present) Main clause (will / can / may / must +
verb)
If it rains today, I'll stay at home
If he is busy now, I will come back tomorrow.
If he doesn't do his homework, He can not go to the party.
If you work hard, you may become a millonaire someday.
If they don't invite you, you must not go.
Second conditional
It refers to a hypothetic situation
If clause (If + past) Main clause (would / could / might +
verb)
If I won the lottery, I would travel around the world.
If I were in Brazil, I could go to Rio de Janeiro.
If they worked for that company, they might have better salaries
If he didn't live by the river, he couldn't go fishing.
Third conditional
It refers to a hypothetic situation in the past
If clause (If + past perfect Main clause (would/could/might + have +
tense) past participle)
If I had won the lottery, I would have traveled around the world.
If I had known the answer, I would have raised my hand.
If I hadn't been so busy, I could have helped you.
If they hadn't drunk so much they wouldn't have felt sick today.
last night,
If we had studied harder, we might have passed the test.

II. GRAMMAR IN ACTION
D.C. 4.11
Conditional exercises
Zero and First Conditional

1) If I _________________________ (to study), I ___________________________ (to pass) the exams.
2) If the sun _____________________ (to shine), we ______________________ (to walk) to the town.
3) If he ___________________ (to have) a temperature, he ___________________ (to see) the doctor.
4) If my friends _______________________ (to come), I ______________________ (to be) very happy.
5) If she __________________ (to earn) a lot of money, she ___________________ (to fly) to New York.
6) If we __________________ (to travel) to London, we ____________________ (to visit) the museums.
7) If you __________________ (to wear) sandals in the mountains, you _________________ (to slip) on
the rocks
8) If Rita _________________ (to forget) her homework, the teacher _________________ (to give) her
a low mark.
9) If they _______________________ (to go) to the disco, they ______________________ (to listen) to
loud music.
10) If you _____________________ (to wait) a minute, I _____________________ (to ask) my parents.
Second Conditional
1) If I _____________________ (to come) home earlier, I _____________________ (to
prepare) dinner.
2) If we _____________________ (to live) in Rome, Francesco _____________________ (to
visit) us.
3) If Tim and Tom _____________________ (to be) older, they _____________________ (to
play) in our hockey team.

4) If he _____________________ (to be) my friend, I _____________________ (to invite) him
to my birthday party.
5) If Susan _____________________ (to study) harder, she _____________________ (to
be) better at school.
6) If they _____________________ (to have) enough money,
they _____________________ (to buy) a new car.
7) If you _____________________ (to do) a paper round, you _____________________ (to
earn) a little extra money.
8) If Michael ___________________ (to get) more pocket money,
he ____________________ (to ask ) Doris out for dinner.
9) If we _____________________ (to hurry), we _____________________ (to catch) the bus.
10) If it _____________________ (to rain), Nina _____________________ (to take) an
umbrella with her.
Third Conditional
1) If the weather _____________________ (to be) nice, they _____________________ (to
play)football.
2) If we _____________________ (to go) to a good restaurant,
we _____________________ (to have) a better dinner.
3) If John _____________________ (to learn) more words, he _____________________ (to
write) a good report.
4) If the boys _____________________ (to take) the bus to school,
they _____________________ (to arrive) on time.
5) If the teacher _____________________ (to explain) the homework,
I _____________________ (to do) it.

6) If they _____________________ (to wait) for another 10 minutes,
they _____________________ (to see) the pop star.
7) If the police _____________________ (to come) earlier, they _____________________ (to
arrest) the burglar.
8) If you _____________________ (to buy) fresh green vegetable, your
salad _____________________ (to taste) better.
9) If Alex _____________________ (to ask) me, I _____________________ (to email) the
documents.
10) If he _____________________ (to speak) more slowly, Peggy _____________________ (to
understand) him.

III. GRAMMAR IN ACTION
D.C. 4.11
Write the steps to configure a wireless access point without WPA or

WPA2. Dont forget to include Phrases with Conditional.
For the authentication of an open system and encryption WEP, you must
configure the access point with the following options:
1. NAME OF THE NETWORK (SSID)
2.
3. If you write the WEP key with characters from the keyboard, you must include
five characters of 40 bits
4.
5.
6.
7.
Self evaluation
G.C. 6.3
Goal Yes No Ways to improve
I can use Zero Conditional.
I can change the tense of the verbs according

Second Conditional.
I know how to use third conditional.
I can name the steps to configure WLAN and

describe with conditionals.

FINAL PROJECT
G.C. 4.5,8.1 and 8.3. D.C. 4.12
Well Folks, first let me congratulate to all

of you because you almost accomplish the
target and you have done things very well.
But you havent finished it yet, there is
something you havent done , and that is
the main target and the real challenge for
what I dare you,
So Are you ready for the real

challenge?
Youve already known the sources of

wireless networks
YOUR FINAL PROJECT IS TO CREATE A TUTORIAL VIDEO TO CONFIGURE THE WIRELESS

ACCESS POINT WITH TP-LINK.
You can choose between WEP, WPA or WPA2, according to the security and justify your
selected option.
HOW TO DO THE TUTORIAL
1. INVESTIGATE THE TOPIC (How to configure wireless access point with TP-LINK)
2. CREATE THE SPEECH (Dont forget to include at least 5 sentences with Conditionals
3. SAVE YOUR VIDEO IN AVI FORMAT
4. BURN A CD TO DELIVER YOUR FINAL PROJECT
CHECK LIST
ACTIVITY TO EVALUATE POINTS

STEPS TO CONFIGURE WIRELESS ACCESS POINT 20 %
TECHNICAL VOCABULARY 20 %
AT LEAST 5 SENTENCES WITH CONDITIONALS 20 %
PRONUNCIATION AND PRESENTATION 20 %
QUALITY OF VIDEO 20 %

WLAN GLOSSARY
From 802.11a to 802.11m and beyond: How much do you know about essential wireless LAN
terminology? Our handy WLAN glossary provides concise definitions with links to more complete
explanations and further information. Want to test your knowledge? Try our WLAN quiz .
802.11: an evolving family of specifications for wireless LANs, developed by a working group of the
Institute of Electrical and Electronics Engineers(IEEE). 802.11 standards use the Ethernet protocol and
CSMA/CA (carrier sense multiple access with collision avoidance) for path sharing.
802.11a: provides specifications for wireless ATM systems. 802.11a is also used in wireless hubs.
Networks using 802.11a operate at radio frequencies between 5.725 GHz and 5.850 GHz. The
specification uses a modulation scheme known as orthogonal frequency-division multiplexing (OFDM)
that is especially well suited to use in office settings.
802.11b: WLAN standard often called Wi-Fi; backward compatible with 802.11. Instead of the phase-
shift keying (PSK) modulation method historically used in 802.11 standards, 802.11b uses
complementary code keying (CCK), which allows higher data speeds and is less susceptible to multipath-
propagation interference.
802.11d: a wireless network communications specification for use in countries where systems using
other standards in the 802.11 family are not allowed to operate. Configuration can be fine-tuned at the
Media Access Control layer (MAC layer) level to comply with the rules of the country or district in which
the network is to be used. Rules subject to variation include allowed frequencies, allowed power levels,
and allowed signal bandwidth. 802.11d facilitates global roaming.
802.11e: a proposed adaptation to the 802.11a and 802.11b specifications that enhances the 802.11
Media Access Control layer (MAC layer) with a coordinated time division multiple access (TDMA)
construct, and adds error-correcting mechanisms for delay-sensitive applications such as voice and
video. The 802.11e specification provides seamless interoperability between business, home, and public
environments such as airports and hotels and offers all subscribers high-speed Internet access with full-
motion video, high-fidelity audio, and Voice over IP (VoIP).
802.11g: offers transmission over relatively short distances at up to 54 megabits per second (Mbps),
compared with the 11 Mbps theoretical maximum of 802.11b. 802.11g employs orthogonal frequency
division multiplexing (OFDM), the modulation scheme used in 802.11a, to obtain higher data speed.
Computers or terminals set up for 802.11g can fall back to speeds of 11 Mbps, so that 802.11b and
802.11g devices can be compatible within a single network.
802.11h: intended to resolve interference issues introduced by the use of 802.11a in some locations,
particularly with military radar systems and medical devices. Dynamic frequency selection (DFS) detects
the presence of other devices on a channel and automatically switches the network to another channel
if and when such signals are detected. Transmit power control (TPC) reduces the radio-frequency (RF)
output power of each network transmitter to a level that minimizes the risk of interference.
802.11i: provides improved encryption for networks that use 802.11a, 802.11b, and 802.11g standards.
Requires new encryption key protocols, known as Temporal Key Integrity Protocol (TKIP) and Advanced
Encryption Standard (AES). Other features include key caching, which facilitates fast reconnection to the

server for users who have temporarily gone offline, and pre-authentication, which allows fast roaming
and is ideal for use with advanced applications such as Voice over Internet Protocol (VoIP).
802.11j: proposed addition to the 802.11 family of standards that incorporates Japanese regulatory
extensions to 802.11a; the main intent is to add channels in the radio-frequency (RF) band of 4.9 GHz to
5.0 GHz. WLANs using 802.11j will provide for speeds of up to 54 Mbps, and will employ orthogonal
frequency division multiplexing (OFDM). The specification will define how Japanese 802.11 family
WLANs and other wireless systems, particularly HiperLAN2 networks, can operate in geographic
proximity without mutual interference.
802.11k: proposed standard for how a WLAN should perform channel selection, roaming, and transmit
power control (TPC) in order to optimize network performance. In a network conforming to 802.11k, if
the access point (AP) having the strongest signal is loaded to capacity, a wireless device is connected to
one of the underutilized APs. Even though the signal may be weaker, the overall throughput is greater
because more efficient use is made of the network resources.
802.11m: an initiative to perform editorial maintenance, corrections, improvements, clarifications, and

interpretations relevant to documentation for 802.11 family specifications. 802.11m also refers to the
set of maintenance releases itself.
802.1X: standard designed to enhance 802.11 WLAN security. 802.1X provides an authentication
framework, allowing a user to be authenticated by a central authority. The actual algorithm that is used
to determine whether a user is authentic is left open and multiple algorithms are possible.
Access point (AP): a station that transmits and receives data (sometimes referred to as a transceiver).
An access point connects users to other users within the network and also can serve as the point of
interconnection between the WLAN and a fixed wire network. The number of access points a WLAN
needs is determined by the number of users and the size of the network.
Access point mapping (also called war driving): the act of locating and possibly exploiting connections to
WLANs while driving around a city or elsewhere. To do war driving, you need a vehicle, a computer
(which can be a laptop), a wireless Ethernet card set to work in promiscuous mode, and some kind of an
antenna which can be mounted on top of or positioned inside the car. Because a WLAN may have a
range that extends beyond an office building, an outside user may be able to intrude into the network,
obtain a free Internet connection, and possibly gain access to company records and other resources.
Ad-hoc network : a LAN or other small network, especially one with wireless or temporary plug-in
connections, in which some of the network devices are part of the network only for the duration of a
communications session or, in the case of mobile or portable devices, while in some close proximity to
the rest of the network.
Antenna: a specialized transducer that converts radio-frequency (RF) fields into alternating current (AC)
or vice-versa. There are two basic types: the receiving antenna, which intercepts RF energy and delivers
AC to electronic equipment, and the transmitting antenna, which is fed with AC from electronic
equipment and generates an RF field.
Digital pulse wireless: (see also: ultra wideband or UWB) is a wireless technology for transmitting large
amounts of digital data over a wide spectrum of frequency bands with very low power for a short

distance. Ultra wideband radio can carry a huge amount of data over a distance up to 230 feet at very
low power (less than 0.5 milliwatts), and has the ability to carry signals through doors and other
obstacles that tend to reflect signals at more limited bandwidths and a higher power.
Evil twin: a home-made wireless access point that masquerades as a legitimate one to gather personal
or corporate information without the end-user's knowledge. It's fairly easy for an attacker to create an
evil twin by simply using a laptop, a wireless card and some readily-available software. The attacker
positions himself in the vicinity of a legitimate Wi-Fi access point and lets his computer discover what
name and radio frequency the legitimate access point uses. He then sends out his own radio signal,
using the same name.
Extensible Authentication Protocol (EAP): authentication protocol for wireless networks that expands
on methods used by the Point-to-Point Protocol (PPP), a protocol often used when connecting a
computer to the Internet. EAP can support multiple authentication mechanisms, such as token cards,
smart cards, certificates, one-time passwords, and public key encryption authentication.
Fixed wireless: wireless devices or systems in fixed locations such as homes and offices. Fixed wireless
devices usually derive their electrical power from the utility mains, unlike mobile wireless or portable
wireless which tend to be battery-powered. Although mobile and portable systems can be used in fixed
locations, efficiency and bandwidth are compromised compared with fixed systems.
HiperLAN: WLAN communication standards primarily used in European countries. There are two
specifications: HiperLAN/1 and HiperLAN/2. Both have been adopted by the European
Telecommunications Standards Institute (ETSI). The HiperLAN standards provide features and
capabilities similar to 802.11. HiperLAN/1 provides communications at up to 20 Mbps in the 5-GHz range
of the radio frequency (RF) spectrum.
Hot spot: (see also access point) a WLAN node that provides Internet connection and virtual private
network (VPN) access from a given location. A business traveller, for example, with a laptop equipped
for Wi-Fi can look up a local hot spot, contact it, and get connected through its network to reach the
Internet and their own company remotely with a secure connection. Increasingly, public places, such as
airports, hotels, and coffee shops are providing free wireless access for customers.
Hot zone: a wireless access area created by multiple hot spots located in close proximity to each other.
Hot zones usually combine public safety access points with public hot spots. Each hot spot typically
provides network access for distances between 100 and 300 feet; various technologies, such as mesh
network topologies and fiber optic backbones, are used in conjunction with the hot spots to create
areas of coverage.
Optical wireless: the combined use of conventional radio-frequency (RF) wireless and optical fiber for
telecommunication. Long-range links are provided by optical fiber and links from the long-range end-
points to end users are accomplished by RF wireless or laser systems. RF wireless at ultra-high
frequencies (UHF) and microwave frequencies can carry broadband signals to individual computers at
substantial data speeds.
Radio frequency (RF): alternating current (AC) having characteristics such that, if the current is input to
an antenna, an electromagnetic (EM) field is generated suitable for wireless broadcasting and/or
communications.

SWAN (Structured Wireless-Aware Network): a technology that incorporates a WLAN into a wired wide-
area network (WAN). SWAN technology can enable an existing wired network to serve hundreds of
users, organizations, corporations, or agencies over a large geographic area. A SWAN is said to be
scalable, secure, and reliable.
Transponder: a wireless communications, monitoring, or control device that picks up and automatically
responds to an incoming signal. The term is a contraction of the words transmitter and responder.
Transponders can be either passive or active.
Ultra wideband (UWB): (see also: digital pulse wireless) is a wireless technology for transmitting large
amounts of digital data over a wide spectrum of frequency bands with very low power for a short
distance. Ultra wideband broadcasts very precisely timed digital pulses on a carrier signal across a very
wide spectrum (number of frequency channels) at the same time. UWB can carry a huge amount of data
over a distance up to 230 feet at very low power (less than 0.5 milliwatts), and has the ability to carry
signals through doors and other obstacles that tend to reflect signals at more limited bandwidths and a
higher power.
Virtual private network (VPN): a network that uses a public telecommunication infrastructure, such as
the Internet, to provide remote offices or individual users with secure access to their organization's
network. A VPN ensures privacy through security procedures and tunneling protocols such as the Layer
Two Tunneling Protocol ( L2TP ). Data is encrypted at the sending end and decrypted at the receiving
end.
VoWLAN (Voice over WLAN, sometimes called wireless VoIP, Wi-Fi VoIP): a method of routing telephone
calls for mobile users over the Internet using the technology specified in IEEE 802.11b. Routing mobile
calls over the Internet makes them free, or at least much less expensive than they would be otherwise.
WAP (Wireless Application Protocol): a specification for a set of communication protocols to standardize
the way that wireless devices, such as cellular telephones and radio transceivers, can be used for
Internet access, including e-mail, the World Wide Web, newsgroups, and instant messaging.
War driving (also called access point mapping):, the act of locating and possibly exploiting connections
to WLANs while driving around a city or elsewhere. To do war driving, you need a vehicle, a computer
(which can be a laptop), a wireless Ethernet card set to work in promiscuous mode, and some kind of an
antenna which can be mounted on top of or positioned inside the car. Because a WLAN may have a
range that extends beyond an office building, an outside user may be able to intrude into the network,
obtain a free Internet connection, and possibly gain access to company records and other resources.
W-CDMA (Wideband Code-Division Multiple Access): officially known as IMT-2000 direct spread; ITU
standard derived from Code-Division Multiple Access (CDMA). W-CDMA is a third-generation (3G)
mobile wireless technology that promises much higher data speeds to mobile and portable wireless
devices than commonly offered in today's market.
Wi-Fi (short for wireless fidelity): a term for certain types of WLANs. Wi-Fi can apply to products that use
any 802.11 standard. Wi-Fi has gained acceptance in many businesses, agencies, schools, and homes as
an alternative to a wired LAN. Many airports, hotels, and fast-food facilities offer public access to Wi-Fi
networks.

WiMAX : a wireless industry coalition whose members organized to advance IEEE 802.16 standards for
broadband wireless access (BWA) networks. WiMAX 802.16 technology is expected to enable
multimedia applications with wireless connection and, with a range of up to 30 miles, enable networks
to have a wireless last mile solution. According to the WiMAX forum, the group's aim is to promote and
certify compatibility and interoperability of devices based on the 802.16 specification, and to develop
such devices for the marketplace.
Wired Equivalent Privacy (WEP): a security protocol specified in 802.11b, designed to provide a WLAN
with a level of security and privacy comparable to what is usually expected of a wired LAN. Data
encryption protects the vulnerable wireless link between clients and access points; once this measure
has been taken, other typical LAN security mechanisms such as password protection, end-to-end
encryption, virtual private networks (VPNs), and authentication can be put in place to ensure privacy.
Wireless: describes telecommunications in which electromagnetic waves (rather than some form of
wire) carry the signal over part or all of the communication path.
Wireless Abstract XML (WAX): an abstract markup language and associated tools that facilitate wireless
application development. The major features of WAX include: the WAX language itself; translation
stylesheets, which are used to translate the WAX language into the most suitable language for the
requesting device; the device registry, which includes an XML database of device particulars; dynamic
image and text selection, which allows content to be written a single time for multiple transformations;
and the application foundation, a WAX servlet that creates a foundation for WAX applications.
Wireless adapter: A device that adds wireless capability to a desktop or laptop machine. Different
varieties plug into a PC Card slot, USB port or PCI bus.
Wireless application service provider (WASP): provides Web-based access to applications and services
that would otherwise have to be stored locally and makes it possible for customers to access the service
from a variety of wireless devices, such as a smartphone or personal digital assistant (PDA).
Wireless ISP (WISP): an Internet service provider (ISP) that allows subscribers to connect to a server at
designated hot spots (access points) using a wireless connection such as Wi-Fi. This type of ISP offers
broadband service and allows subscriber computers, called stations, to access the Internet and the Web
from anywhere within the zone of coverage provided by the server antenna, usually a region with a
radius of several kilometers.
Wireless LAN: A local area network that uses radio frequency transmission over the air. Wi-Fi is the
standard, and it works like a cellular phone system. See wireless LAN and Wi-Fi.
Wireless local area network (WLAN): a local area network (LAN) that users access through a wireless
connection. 802.11 standards specify WLAN technologies. WLANs are frequently some portion of a
wired LAN.
Wireless service provider: a company that offers transmission services to users of wireless devices
through radio frequency (RF) signals rather than through end-to-end wire communication.
Yagi antenna (sometimes called a Yagi-Uda array or simply a Yagi): a unidirectional antenna commonly
used in communications when a frequency is above 10 MHz.

WEB Design
HTML, CSS and JavaScript

Styles -
CSS (Cascading Style Sheets) is used to style HTML elements.
Styling with CSS

CSS was introduced together with HTML, to provide a better way to style HTML elements. CSS can be
added to HTML in the following ways:
Inline - using the style attribute in HTML elements

Internal - using the <style> element in the <head> section
External - using an external CSS file
Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined
in the <head> section of an HTML page, by using the <style> tag, like this:
<head> < style type="text/css">
body {background-color:yellow;}
p {color:blue;}
< /style> < /head>
External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you
can change the look of an entire Web site by changing one file. Each page must link to the style sheet
using the <link> tag. The <link> tag goes inside the <head> section:
<head>
< link rel="stylesheet" type="text/css" href="mystyle.css">
< /head>
Style Tags
Tag Description
<style> Defines style information for a document
<link> Defines the relationship between a document and an external
resource

Borders
Rounded Corners
After adding rounded corners in CSS was tricky. We had to use different images for each corner. Now in
CSS, creating rounded corners is easy. In CSS, the border-radius property is used to create rounded
corners:
Example
Add rounded corners to a div element:
div
{
border:2px solid;
border-radius:25px;
}
Box Shadow
In CSS, the box-shadow property is used to add shadow to boxes:
Example
Add a box-shadow to a div element:
div
{
box-shadow: 10px 10px 5px #888888;
}
Border Image
With the CSS border-image property you can use an image to create a border:

The original image used to create the border above:
Example
Use an image to create a border around a div element:
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5
and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
Border Properties
Property Description
border-image A shorthand property for setting all the border-
image-* properties
border-radius A shorthand property for setting all the four border-
*-radius properties
box-shadow Attaches one or more drop-shadows to the box

Background
CSS background properties are used to define the background effects of an element. CSS properties used
for background effects:
Background Color
The background-color property specifies the background color of an element. The background color of a
page is defined in the body selector:
Example
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Look at CSS Color Values for a complete list of possible color values. In the example below, the h1, p,
and div elements have different background colors:
Example

Background Image
The background-image property specifies an image to use as the background of an element. By default,
the image is repeated so it covers the entire element. The background image for a page can be set like
this:
Example
Below is an example of a bad combination of text and background image.
Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically. Some
images should be repeated only horizontally or vertically, or they will look strange, like this:
Example
If the image is repeated only horizontally (repeat-x), the background will look better.
Background Image - Set position and no-repeat
Note: When using a background image, use an image that does not
disturb the text.

Showing the image only once is specified by the background-repeat property:
Example
In the example above, the background image is shown in the same place as the text. We want to change
the position of the image, so that it does not disturb the text too much.
The position of the image is specified by the background-position property:
Example
All Background Properties

background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls
with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

Text
Text formatting
Th is text is st yled with s om e of the t ext formatting
prop erties. Th e h eading uses the t ext -align, text -trans form, and
col or p roperti es. The paragraph is ind en ted, align ed, and the space
between characters is specified.
Text Color
The color property is used to set the color of the text. With CSS, a color is most often specified by:
a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Example
Note: For W3C compliant CSS: If you define the color property, you
must also define the background-color property.
Text Alignment
The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned
to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left
and right margins are straight (like in magazines and newspapers).
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Text Decoration
The text-decoration property is used to set or remove decorations from text. The text-decoration property
is mostly used to remove underlines from links for design purposes:
Example
It can also be used to decorate text:
Note: It is not recommended to underline text that is not a link, as this

often confuses users.
All Text Properties

color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to set or return
whether the text should be overridden to support multiple
languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

Text Effects
Text Effects
CSS contains several new text features. In this part you will learn about the following text properties:
text-shadow
word-wrap
Text Shadow
In CSS, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:
Example
Add a shadow to a header:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Word Wrapping
If a word is too long to fit within an area, it expands outside. In CSS, the word-wrap property allows you
to force the text to wrap - even if it means splitting it in the middle of a word.
The CSS code is as follows:
Example

Text Properties
hanging-punctuation Specifies whether a punctuation character may be placed
outside the line box
punctuation-trim Specifies whether a punctuation character should be
trimmed
text-align-last Describes how the last line of a block or a line right before
a forced line break is aligned when text-align is "justify"
text-emphasis Applies emphasis marks, and the foreground color of the
emphasis marks, to the element's text
text-justify Specifies the justification method used when text-align is
"justify"
text-outline Specifies a text outline
text-overflow Specifies what should happen when text overflows the
containing element
text-shadow Adds shadow to text
text-wrap Specifies line breaking rules for text
word-break Specifies line breaking rules for non-CJK scripts
word-wrap Allows long, unbreakable words to be broken and wrap to
the next line

Font
CSS font properties define the font family, boldness, size, and the style of a text.
Difference Between Serif and Sans-serif Fonts
Font Families
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
Generic family Font family Description

Serif Times New Roman Serif fonts have small lines at the ends on
Georgia some characters
Sans-serif Arial "Sans" means without - these fonts do not

Verdana have the lines at the ends of characters
Monospace Courier New All monospace characters have the same

Lucida Console width
Note: On computer screens, sans-serif fonts are considered easier to

read than serif fonts.
Font Style
The font-style property is mostly used to specify italic text. This property has three values:
normal - The text is shown normally

italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)

Example
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:
Example
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
The example above allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to resize the text.
Set Font Size With Em

To avoid the resizing problem with older versions of Internet Explorer, many developers use em instead
of pixels. The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em
is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em
Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
All Font Properties

font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text

font-variant Specifies whether or not a text should be displayed in a small-
caps font
font-weight Specifies the weight of a font
Font Descriptors
The following table lists all the font descriptors that can be defined inside the @font-face rule:
Descriptor Values Description

font-family name Required. Defines a name for the font
src URL Required. Defines the URL of the font file
font-stretch normal Optional. Defines how the font should be
condensed stretched. Default is "normal"
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
font-style normal Optional. Defines how the font should be
italic styled. Default is "normal"
oblique
font-weight normal Optional. Defines the boldness of the font.
bold Default is "normal"
100
200
300
400
500
600
700
800
900
unicode-range unicode-range Optional. Defines the range of UNICODE
characters the font supports. Default is
"U+0-10FFFF"

Links
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links
can be styled differently depending on what state they are in.
The four links states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover
Background Color
The background-color property specifies the background color for links:
Example

Lists
The CSS list properties allow you to:
Set different list item markers for ordered lists

Set different list item markers for unordered lists
Set an image as the list item marker
List
In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets

ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers

The type of list item marker is specified with the list-style-type property:
Example
Some of the values are for unordered lists, and some for ordered lists.
An Image as The List Item Marker

To specify an image as the list item marker, use the list-style-image property:
Example
When using the shorthand property, the order of the values are:
list-style-type
list-style-position (for a description, see the CSS properties table below)
list-style-image
It does not matter if one of the values above are missing, as long as the rest are in the specified order.
All List Properties

list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or
outside the content flow
list-style-type Specifies the type of list-item marker

Tables
The look of an HTML table can be greatly improved with CSS:
Company Contact Country

Alfreds Futterkiste Maria Anders Germany
Berglunds snabbkp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Table Borders
To specify table borders in CSS, use the border property. The example below specifies a black border for
table, th, and td elements:
Example
table, th, td
{
border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both the table and the th/td
elements have separate borders. To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or
separated:
Example

Table Width and Height
Width and height of a table is defined by the width and height properties. The example below sets the
width of the table to 100%, and the height of the th elements to 50px:
Example
table
{ width:100%; }
th
{ height:50px; }
Table Text Alignment

The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets
the horizontal alignment, like left, right, or center:
Example
td
{ text-align:right; }
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Example
td
{
height:50px;
vertical-align:bottom;
}
Table Padding
To control the space between the border and content in a table, use the padding property on td and th
elements:

Table Color
The example below specifies the color of the borders, and the text and background color of th elements:
Example
I. Watch the following video and listen carefully to the information. Take
notes for answering the question below. CSS Tutorial Part 1 Basic
Webpage Layout or CSS Tutorial Pt 1 Basic Layout

CSS QUIZ
1. What does CSS stand for?

Colorful Style Sheets
Cascading Style Sheets
Computer Style Sheets
2. What is the correct HTML for referring to an external style sheet?

<link rel="stylesheet" type="text/css" href="mystyle.css">
<style src="mystyle.css">
<stylesheet>mystyle.css</stylesheet>
3. Where in an HTML document is the correct place to refer to an external

style sheet?
At the end of the document
In the <body> section
In the <head> section
At the top of the document
4. Which HTML tag is used to define an internal style sheet?

<style>
<css>
<script>
5. Which HTML attribute is used to define inline styles?
style
font
styles
class

6. Which is the correct CSS syntax?
body:color=black;
body {color: black;}
{body;color:black;}
{body:color=black;}
7. Which property is used to change the background color?

color
background-color
bgcolor
8. Which CSS property controls the text size?

text-style
font-style
text-size
font-size
9. How do you display hyperlinks without an underline?

a {text-decoration:none;}
a {text-decoration:no-underline;}
a {underline:none;}
a {decoration:no-underline;}
10. table {color: blue;}

In the code snippet above, which part represents the property?
table
color
blue

Box Model
The Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking
about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins,
borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other
elements. The image below illustrates the box model:
Explanation of the different parts:
Margin - Clears an area around the border. The margin does not have a
background color, it is completely transparent
Border - A border that goes around the padding and content. The border is
affected by the background color of the box
Padding - Clears an area around the content. The padding is affected by
the background color of the box
Content - The content of the box, where text and images appear
In order to set the width and height of an element correctly in all browsers, you need to know how the box
model works.
Width and Height of an Element
Important: When you set the width and height properties of an element
with CSS, you just set the width and height of the content area. To
calculate the full size of an element, you must also add the padding,
borders and margins.

The total width of the element in the example below is 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Let's do the math:

+ 250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
Assume that you had only 250px of space. Let's make an element with a total width of 250px:
Example
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left
margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border +
top margin + bottom margin

Border
Border Style
The CSS border properties allow you to specify the style and color of an element's border. The border-
style property specifies what kind of border to display.
Note: None of the border properties will have ANY effect unless the
border-style property is set!
border-style values:
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value

Border Width
The border-width property is used to set the width of the border. The width is set in pixels, or by using
one of the three pre-defined values: thin, medium, or thick.
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set
the borders first.
Example
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Border Color
The border-color property is used to set the color of the border. The color can be set by:
name - specify a color name, like "red"

RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
You can also set the border color to "transparent".
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set
the borders first.
Example
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Border - Individual sides
In CSS it is possible to specify different borders for different sides:
Example
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
The border-style property can have from one to four values.
border-style:dotted solid double dashed;

o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
border-style:dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double
border-style:dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
border-style:dotted;
o all four borders are dotted
The border-style property is used in the example above. However, it also works with border-width and
border-color.

All Border Properties
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

Outlines
An outline is a line that is drawn around elements (outside the borders)

to make the element "stand out". However, the outline property is
different from the border property.
The outline is not a part of an element's dimensions; the element's total

width and height is not affected by the width of the outline.
All Outline Properties

Property Description Values
outline Sets all the outline properties in one outline-color
declaration outline-style
outline-width
inherit
outline-color Sets the color of an outline color_name
hex_number
rgb_number
invert
inherit
outline-style Sets the style of an outline none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width Sets the width of an outline thin
medium
thick
length
inherit
English State Academy 100 |

Page
Margin
Margin
The margin clears an area around an element (outside the border). The margin does not have a
background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A
shorthand margin property can also be used, to change all margins at once.
Possible Values
Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the containing element
inherit Specifies that the margin should be inherited from the parent element
Note: It is also possible to use negative values, to overlap content.
Margin - Individual sides

In CSS, it is possible to specify different margins for different sides:
Example
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margin - Shorthand property

To shorten the code, it is possible to specify all the margin properties in one property. This is called a
shorthand property.
Page
The margin property can have from one to four values.
margin:25px 50px 75px 100px;

o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
margin:25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
margin:25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px
margin:25px;
o all four margins are 25px
All Margin Properties
margin A shorthand property for setting the margin properties in one
declaration
margin- Sets the bottom margin of an element
bottom
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

Page
Padding
Padding
The padding clears an area around the content (inside the border) of an element. The padding is affected
by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A
shorthand padding property can also be used, to change all paddings at once.
Possible Values
Value Description
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element
Padding - Individual sides

In CSS, it is possible to specify different padding for different sides:
Example
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Padding - Shorthand property

To shorten the code, it is possible to specify all the padding properties in one property. This is called a
shorthand property.

Page
The padding property can have from one to four values.
padding:25px 50px 75px 100px;

o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px
padding:25px 50px 75px;
o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px
padding:25px 50px;
o top and bottom paddings are 25px
o right and left paddings are 50px
padding:25px;
o all four paddings are 25px
All Padding Properties
padding A shorthand property for setting all the padding properties in
one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

Page
Define three different paragraph class styles, p1, p2, and p3 that meet the following
requirements:
p1:
o left and right margins of 20 pixels
o background color of Pink (#FF00FF)
o foreground color of blue.
o font-family of Arial,Helvetica,sans-serif
o font-size 10pt
o font-weight normal
o left aligned text
p2:
o left and right margins of 30 pixels
o background color of black
o foreground color of #FFFF00
o font-size 10pt
p3:
o text indent of 1 centimeter
o background color of rgb(204, 51, 51)
o foreground color of white
o font-size 10pt

Page
JavaScript is the scripting language of the Web. All modern HTML pages are
using JavaScript. This tutorial will teach you JavaScript from basic to advance.
Introduction
JavaScript is the world's most popular programming language. It is the language for
HTML, for the web, for servers, PCs, laptops, tablets, phones, and more.
is a Scripting Language
A scripting language is a lightweight programming language.
JavaScript is programming code that can be inserted into HTML pages.
JavaScript code can be executed by all modern web browsers.
JavaScript is easy to learn.
Writing Into Output

Example
You can only use document.write in the HTML output. If you use it after
the document has loaded, the whole document will be overwritten.

Page
Reacting to Events
Example
The alert() function is not much used in JavaScript, but it is quite handy for trying out code.
The onclick event is only one of the many HTML events you will learn about in this tutorial.
Changing Content
Using JavaScript to manipulate the content of HTML elements is a very common.
Example
x=document.getElementById("demo") //Find the element

x.innerHTML="Hello JavaScript"; //Change the content
You will often see document.getElementById("some id"). This is defined in the HTML DOM. The
DOM (Document Object Model) is the official W3C standard for accessing HTML elements.
Changing Images
This example dynamically changes the source (src) attribute of an HTML <image> element:
The Light bulb
With JavaScript, you can change almost any HTML attribute.

Page
Changing Styles
Changing the style of an HTML element, is a variant of changing an HTML attribute.
Example
Validate Input
JavaScript is commonly used to validate input.
Example
if isNaN(x) {alert("Not Numeric")};
Did You Know?
JavaScript and Java are two completely different languages, in both

concept and design.
Java (invented by Sun) is a more complex programming language in
the same category as C. ECMA-262 is the official name of the JavaScript
standard.
JavaScript was invented by Brendan Eich. It appeared in Netscape (a no
longer existing browser) in 1995, and has been adopted by ECMA (a
standard association) since 1997.

Page
How To
JavaScripts in HTML must be inserted between <script> and </script> tags. JavaScripts
can be put in the <body> and in the <head> section of an HTML page.
The <script> Tag

To insert a JavaScript into an HTML page, use the <script> tag.
<script> alert("My First JavaScript"); < /script>
Old examples may have type="text/javascript" in the <script> tag. This is

no longer required. JavaScript is the default scripting language in all
modern browsers and in HTML5.
in <body>
In this example, JavaScript writes into the HTML <body> while the page loads:
Example
<!DOCTYPE html>
<html>
< body>
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
< /script>
.
< /body>
< /html>
Functions and Events
The JavaScript statements, in the example above, are executed while the page loads. More often, we want
to execute code when an event occurs, like when the user clicks a button.
If we put JavaScript code inside a function, we can call that function when an event occurs. You will
learn much more about JavaScript functions and events in later chapters.

Page
A Function in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is
called when a button is clicked:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
< /script>
< /head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
< /html>
External
Scripts can also be placed in external files. External files often contain code to be used by several
different web pages. External JavaScript files have the file extension .js. To use an external script, point to
the .js file in the "src" attribute of the <script> tag:
Example
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"> </script>
< /body>
< /html>
You can place the script in the <head> or <body> as you like. The script will behave as if it was located
exactly where you put the <script> tag in the document.

Page
External scripts cannot contain <script> tags.
Output
JavaScript is typically used to manipulate HTML elements.
Manipulating HTML Elements

To access an HTML element from JavaScript, you can use the document.getElementById(id) method.
Use the "id" attribute to identify the HTML element:
Example
Access the HTML element with the specified id, and change its content:
<!DOCTYPE html>
<html>
< body>
< h1>My First Web Page</h1>
< p id="demo">My First Paragraph</p>
<script> document.getElementById("demo").innerHTML="My First
JavaScript"; < /script>
< /body>
< /html>
The JavaScript is executed by the web browser. In this case, the browser will access the HTML element
with id="demo", and replace its content (innerHTML) with "My First JavaScript".
Writing to The Document Output

The example below writes a <p> element directly into the HTML document output:
Example
<!DOCTYPE html>
<html>
< body>
< h1>My First Web Page</h1>
<script> document.write("<p>My First JavaScript</p>");
< /script>
< /body>
< /html>
in Windows 8
Page
Microsoft supports JavaScript for creating Windows 8 apps.
JavaScript is definitely the future for both the Internet and Windows.
I. Watch the following video and listen carefully to the information. Take
notes for answering the question below. What is JavaScript
JavaScript QUIZ
1. Inside which HTML element do we put the JavaScript?

<script>
<javascript>
<scripting>
2. What is the correct JavaScript syntax to write "Hello World"?

response.write("Hello World");
echo "Hello World";
("Hello World");
document.write("Hello World");
3. Where is the correct place to insert a JavaScript?
The <head> section
The <body> section
Both the <head> section and the <body> section are correct
4. What is the correct syntax for referring to an external script called

"xxx.js"?
<script href="xxx.js">
<script src="xxx.js">
<script name="xxx.js">
5. How do you write "Hello World" in an alert box?

Page
msgBox("Hello World");
alertBox("Hello World");
msg("Hello World");
alert("Hello World");
Variables
JavaScript variables are "containers" for storing information:
Example
Much Like Algebra

x=5
y=6
z=x+y
In algebra we use letters (like x) to hold values (like 5). From the expression z=x+y above, we can
calculate the value of z to be 11. In JavaScript these letters are called variables.
Think of variables as containers for storing data.
Variables
As with algebra, JavaScript variables can be used to hold values (x=5) or expressions (z=x+y). Variable
can have short names (like x and y) or more descriptive names (age, sum, totalvolume).
Variable names must begin with a letter

Variable names can also begin with $ and _ (but we will not use it)
Variable names are case sensitive (y and Y are different variables)

Page
Both JavaScript statements and JavaScript variables are case-sensitive.
Data Types
JavaScript variables can also hold other types of data, like text values (person="John Doe"). In JavaScript
a text like "John Doe" is called a string. There are many types of JavaScript variables, but for now, just
think of numbers and strings.
When you assign a text value to a variable, put double or single quotes around the value. When you
assign a numeric value to a variable, do not put quotes around the value. If you put quotes around a
numeric value, it will be treated as text.
Example
Declaring (Creating) Variables

Creating a variable in JavaScript is most often referred to as "declaring" a variable. You declare
JavaScript variables with the var keyword: var carname;
After the declaration, the variable is empty (it has no value). To assign a value to the variable, use the
equal sign: carname="Volvo";
However, you can also assign a value to the variable when you declare it: var carname="Volvo";
In the example below we create a variable called carname, assigns the value "Volvo" to it, and put the
value inside the HTML paragraph with id="demo":
Example
<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

Page
It's a good programming practice to declare all the variables you will
need, in one place, at the beginning of your code.
One Statement, Many Variables

You can declare many variables in one statement. Just start the statement with var and separate the
variables by comma:
var lastname="Doe", age=30, job="carpenter";
Your declaration can also span multiple lines:
var lastname="Doe",
age=30,
job="carpenter";
Value = undefined
In computer programs, variables are often declared without a value. The value can be something that has
to be calculated, or something that will be provided later, like user input. Variable declared without a
value will have the value undefined.
The variable carname will have the value undefined after the execution of the following statement:
var carname;
Re-Declaring Variables
If you re-declare a JavaScript variable, it will not lose its value. The value of the variable carname will
still have the value "Volvo" after the execution of the following two statements:
var carname="Volvo";
var carname;

Page
Arithmetic
As with algebra, you can do arithmetic with JavaScript variables, using operators like = and +:
Example
y=5;
x=y+2;
Data Types
String, Number, Boolean, Array, Object, Null, Undefined.
Has Dynamic Types
Strings
A string is a variable which stores a series of characters like "John Doe".
A string can be any text inside quotes. You can use single or double quotes. You can use quotes
inside a string, as long as they don't match the quotes surrounding the string:
Example
var answer="It's alright";

var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
Numbers
JavaScript has only one type of numbers. Numbers can be written with, or without decimals:
Example
var x1=34.00; // Written with decimals

var x2=34; // Written without decimals
Extra large or extra small numbers can be written with scientific (exponential) notation:

Page
Example
var y=123e5; // 12300000

var z=123e-5; // 0.00123
Booleans
Booleans can only have two values: true or false.
var x=true;
var y=false;
Arrays
The following code creates an Array called cars:
var cars=new Array();

cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
or (condensed array):
var cars=new Array("Saab","Volvo","BMW");
or (literal array):
Example
var cars=["Saab","Volvo","BMW"];
Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
Declaring Variables as Objects

When a variable is declared with the keyword "new", the variable is declared as an object:
var name = new String;

var x = new Number;
var y = new Boolean;

Page
With JavaScript all variables can be objects.
Functions
A function is a block of code that will be executed when "someone" calls it:
Example
<!DOCTYPE html>
<html>
< head>
< script>
{
alert("Hello World!");
}
< /script>
< /head>
< body>
< button onclick="myFunction()">Try it</button>
< /body>
< /html>
Function Syntax
A function is written as a code block (inside curly { } braces), preceded by the function keyword:
function functionname()
{

Page
some code to be executed
}
JavaScript is case sensitive. The function keyword must be written in

lowercase letters, and the function must be called with the same
capitals as used in the function name.
Calling a Function with Arguments

When you call a function, you can pass along some values to it, these values are called arguments or
parameters. These arguments can be used inside the function.
You can send as many arguments as you like, separated by commas (,)
myFunction(argument1,argument2)
Declare the argument, as variables, when you declare the function:
function myFunction(var1,var2)
{
some code
}
Example
<button onclick="myFunction('Harry Potter','Wizard')">Try

it</button>
< script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
< /script>
The function above will alert "Welcome Harry Potter, the Wizard" when the button is clicked.

Page
The function is flexible, you can call the function using different arguments, and different welcome
messages will be given:
Example
The example above will alert "Welcome Harry Potter, the Wizard" or "Welcome Bob, the Builder"
depending on which button is clicked.
Functions With a Return Value

Sometimes you want your function to return a value back to where the call was made. This is possible by
using the return statement.
When using the return statement, the function will stop executing, and return the specified value.
Syntax
{
var x=5;
return x;
}
The function above will return the value 5.
Note: It is not the entire JavaScript that will stop executing, only the function. JavaScript
will continue executing code, where the function-call was made from.
You can make a return value based on arguments passed into the function:
Example

Page
The return statement is also used when you simply want to exit a function.
I. Watch the following video and listen carefully to the information.

Take notes in your notebook and answer the questions that the
teacher will give you. JavaScript Alert() and JavaScript Events General
Operators
= is used to assign values.
+ is used to add values.
The assignment operator = is used to assign values to JavaScript variables. The arithmetic operator + is
used to add values together.
Example
Assign values to variables and add them together:

y=5;
z=2;
x=y+z;
The result of x will be:
7

Page
Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators:
Operator Description Example Result of x Result of y

+ Addition x=y+2 7 5
- Subtraction x=y-2 3 5
* Multiplication x=y*2 10 5
/ Division x=y/2 2.5 5
% Modulus (division remainder) x=y%2 1 5
++ Increment x=++y 6 6
x=y++ 5 6
-- Decrement x=--y 4 4
x=y-- 5 4
Assignment Operators
Assignment operators are used to assign values to JavaScript variables.
Given that x=10 and y=5, the table below explains the assignment operators:
Operator Example Same As Result

= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

Page
The + Operator Used on Strings
The + operator can also be used to add string variables or text values together.
Example
To add two or more string variables together, use the + operator.
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
The result of txt3 will be:
What a verynice day
To add a space between the two strings, insert a space into one of the strings:
Example
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
What a very nice day
or insert a space into the expression:
Example
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
What a very nice day
Adding Strings and Numbers

Adding two numbers, will return the sum, but adding a number and a string will return a string:
Example
x=5+5;
y="5"+5;
z="Hello"+5;

Page
The result of x,y, and z will be:
10
55
Hello5
The rule is: If you add a number and a string, the result will be a string!
Comparison and Logical

Operators
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables
or values.
Operator Description Comparing Returns

== equal to x==8 false
x==5 true
=== exactly equal to (equal value and equal x==="5" false
type) x===5 true
!= not equal x!=8 true
!== not equal (different value or different type) x!=="5" true
x!==5 false
> greater than x>8 false
< less than x<8 true

Page
>= greater than or equal to x>=8 false
<= less than or equal to x<=8 true
Logical Operators
Logical operators are used to determine the logic between variables or values.
Operator Description Example

&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true
Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
Syntax : variablename=(condition)?value1:value2
Example
If the variable age is a value below 18, the value of the variable voteable will
be "Too young, otherwise the value of voteable will be "Old enough":
voteable=(age<18)?"Too young":"Old enough";
If...Else Statements
Conditional statements are used to perform different actions based on different conditions.
Conditional Statements
Very often when you write code, you want to perform different actions for different decisions. You can
use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
if statement - use this statement to execute some code only if a specified

condition is true
if...else statement - use this statement to execute some code if the
condition is true and another code if the condition is false
if...else if....else statement - use this statement to select one of many
blocks of code to be executed

Page
switch statement - use this statement to select one of many blocks of
code to be executed
If Statement
Use the if statement to execute some code only if a specified condition is true.
Syntax
if (condition)
{
code to be executed if condition is true
}
Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!
Example
Make a "Good day" greeting if the time is less than 20:00:
if (time<20)
{
x="Good day";
}

Good day
Notice that there is no ..else.. in this syntax. You tell the browser to execute some code only if the
specified condition is true.
If...else Statement
Use the if....else statement to execute some code if a condition is true and another code if the condition is
not true.
Syntax
if (condition)
{
code to be executed if condition is true
}
else
{

Page
code to be executed if condition is not true
}
Example
If the time is less than 20:00, you will get a "Good day" greeting, otherwise
you will get a "Good evening" greeting
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}

Good day
If...else if...else Statement

Use the if....else if...else statement to select one of several blocks of code to be executed.
Syntax
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}
Example
If the time is less than 10:00, you will get a "Good morning" greeting, if not,
but the time is less than 20:00, you will get a "Good day" greeting,
otherwise you will get a "Good evening" greeting:

Page
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
Good day
For Loop
Loops can execute a block of code a number of times.
Loops
Loops are handy, if you want to run the same code over and over again, each time with a different value.
Often this is the case when working with arrays:
Instead of writing:

Page
document.write(cars[0] + "<br>");
You can write:
for (var i=0;i<cars.length;i++)

{
document.write(cars[i] + "<br>");
}
Different Kinds of Loops

JavaScript supports different kinds of loops:
for - loops through a block of code a number of times

for/in - loops through the properties of an object
while - loops through a block of code while a specified condition is true
do/while - also loops through a block of code while a specified condition is
true
The For Loop

The for loop is often the tool you will use when you want to create a loop. The for loop has the following
syntax:
for (statement 1; statement 2; statement 3)

{
the code block to be executed
}
Statement 1 is executed before the loop (the code block) starts.

Statement 2 defines the condition for running the loop (the code block).
Statement 3 is executed each time after the loop (the code block) has been executed.
Example
for (var i=0; i<5; i++)

{
x=x + "The number is " + i + "<br>";
}

Page
Statement 1
Normally you will use statement 1 to initiate the variable used in the loop (var i=0). This is not always the
case, JavaScript doesn't care, and statement 1 is optional. You can initiate any (or many) values in
statement 1:
Example:
for (var i=0,len=cars.length; i<len; i++)

{
}
And you can omit statement 1 (like when your values are set before the loop starts):
Example:
var i=2,len=cars.length;
for (; i<len; i++)
{
}
Statement 2
Often statement 2 is used to evaluate the condition of the initial variable. This is not always the case,
JavaScript doesn't care, and statement 2 is optional. If statement 2 returns true, the loop will start over
again, if it returns false, the loop will end.
If you omit statement 2, you must provide a break inside the loop.
Otherwise the loop will never end. This will crash your browser. Read
about breaks in a later chapter of this tutorial.
Statement 3
Often statement 3 increases the initial variable. This is not always the case, JavaScript doesn't care, and
statement 3 is optional. Statement 3 could do anything. The increment could be negative (i--), or larger
(i=i+15). Statement 3 can also be omitted (like when you have corresponding code inside the loop):
Example:
Page
var i=0,len=cars.length;
for (; i<len; )
{
i++;
}
The For/In Loop

The JavaScript for/in statement loops through the properties of an object:
Example
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
While Loop
Loops can execute a block of code as long as a specified condition is true.
The While Loop

The while loop loops through a block of code as long as a specified condition is true.
Syntax
while (condition)
{

Page
code block to be executed
}
The loop in this example will continue to run as long as the variable i is less than 5:
Example
while (i<5)
{
i++;
}
If you forget to increase the variable used in the condition, the loop will
never end. This will crash your browser.
The Do/While Loop

The do/while loop is a variant of the while loop. This loop will execute the code block once, before
checking if the condition is true, then it will repeat the loop as long as the condition is true.
Syntax
do
{
code block to be executed
}
while (condition);
The example below uses a do/while loop. The loop will always be executed at least once, even if the
condition is false, because the code block is executed before the condition is tested:
Example
do
{
i++;
}
while (i<5);
Do not forget to increase the variable used in the condition, otherwise the loop will never end!
Comparing For and While

Page
If you have read the previous chapter, about the for loop, you will discover that a while loop is much the
same as a for loop, with statement 1 and statement 3 omitted.
The loop in this example uses a for loop to display all the values in the cars array:
Example
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];)
{
i++;
}
The loop in this example uses a while loop to display all the values in the cars array:
Example
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
i++;
}
JavaScript QUIZ
1. How to write an IF statement in JavaScript?

if i=5 then
if i==5 then
if i=5

Page
if (i==5)
2. How does a WHILE loop start?

while i=1 to 10
while (i<=10;i++)
while (i<=10)
3. How does a FOR loop start?

for i = 1 to 5
for (i = 0; i <= 5; i++)
for (i <= 5; i++)
for (i = 0; i <= 5)
4. What is the correct way to write a JavaScript array?

var txt = new Array("tim","kim","jim")
var txt = new Array:1=("tim")2=("kim")3=("jim")
var txt = new Array="tim","kim","jim"
var txt = new Array(1:"tim",2:"kim",3:"jim")
5. How do you round the number 7.25, to the nearest integer?

Math.rnd(7.25)
rnd(7.25)
round(7.25)
Math.round(7.25)
Grammar in Context
FORMAL AND INFORMAL E-MAILS
Read this information about the main characteristics of formal and informal e-mails,
so you could learn the correct style to write them.
G.C. 8.1,8.2 & 8.3
Page
Think about Formal Informal
Purpose Business and important messages. Informal messages.
Audience Business and work colleagues. Friends and family.
Style and accuracy Professional - accurate spelling, Friendly - accuracy is

punctuation and grammar less important
Dont use slang,
exclamation marks or smiles Thank you for your prompt response. Thx 4 email, will call
in formal e-mails. you l8r! x
Beginning and ending Start and end appropriately No rules - your choice
E-mail is a fairly new format Dear Mr/Mrs/Chris

and there are no agreed Dear Sir/Madam
rules for starting and Yours sincerely (if you know their
ending. name)
Yours faithfully (if you dont know their
Remember to use a formal name)
style when writing business Regards
or work e-mails. Kind regards
(use first name if you know the person
or if they have asked you to)
Read the example then by teams choose the correct name of each letter shown
below and write them on the lines.
G.C. 8.1,8.2 & 8.3
request for body greeting senders job Opening phrase Closing phrase
action

Page
a) Dear Mr. Lee:
b) I write on behalf of my CEO, Ms. Douglas, of the Dutch cell phone company cell.com.
Youve met Ms. Douglas at the Cebit Trade Fair in Hannover. She was highly satisfied with your
inspirational inventions, especially the auto rechargeable cell phone. This new technique is not
only eco friendly, but also very efficient in many ways. This is why our company has a positive
vision of our potential collaboration.
c) Considering the fact that our eye went to your invention, we would like to set up a deal.
Ms. Douglas wants to draw up an order of 3,000 of your cell phones. But instead of 130, - a
piece, a descent settlement would be more appropriate, seen the extent of the purchase.
First we would like to receive a small amount of your cell phones. This is to confirm our decision
and test the Dutch view on your product. Then, we would like to discuss the business aspect of
this matter, which we also prefer on black and white. However, we most certainly are in doubt
of the success.
d) Nevertheless, we look forward to our rewarding cooperation.
e) Yours sincerely.
f) Lara Porter,
Manager cell.com
a) c) e)
b) d) f)
Teacher gives the correct answers and the students check their answers and all doubts
are clarified by the teacher.
Grammar in Context
REQUESTS AND PREFERENCES IN FORMAL EMAILS
Analyze the following chart then identify the different ways to express requests and
preferences.
G.C. 8.1,8.2 & 8.3
Page
REQUEST PREFERENCE
We often have to make requests and ask for In preference to asking a direct question, formal
things in our letters and e-mails. To do this, e-mails frequently use indirect questions.
we use phrases like Could you and Would you.
If you make two requests in a letter or email,
the second request should include the
word also/therefore.
Would you be able to deliver the I wonder if you would like to join us for
report by tomorrow? dinner on Tuesday.
Could you ask Pierre to come to the We would like to eat at 1:30 pm
meeting? We are interested
Could you also send me ? I would appreciate if you
Could you therefore send me ? I would be grateful if
Would you be so kind as to
Look at this short example G.C. 8.1,8.2 & 8.3

Page
Dear Mr. Smith;
I recently saw an advertisement for your new range of kitchen equipment.

I own a small retail shop selling household goods and I am interested in buying some of your new
products. Could you therefore please send me your price list? [first request] I would also be
grateful if you could include details of delivery and postage. [second request]
Thank you in advance.

Best regards
Read the following sentences and complete it with the correct word. G.C. 5.1
Dear Sincerely Interested grateful appreciate could
____________Sir,
We are a company dedicated to the sale and distribution of garden furniture called "Mi Jardn".
The company is based in Valencia, Spain. We invite you to visit our web page in English at www.
my garden.com, where you will be able to ___________our product lines.
We are ____________in the garden products you have advertised in the publication "Gardens
Today" of March 20th especially "Garden benches in pine". We should be ____________if you
__________send us your wholesale price list by email. Please advise of per unit cost for 10 items.
Is a discount offered for frequent orders? Do you ship abroad? If so, please advise of the shipping
cost to Valencia, Spain.
We look forward to doing business with you in the near future.
_________________________
Francisco Gmez (Sales department)
are clarify by the teacher.

Page
Grammar in Context
PHRASES FOR A JOB APPLICATION LETTER
Read the different steps for writing a job application letter
G.C. 8.1,8.2 & 8.3
Steps Phrases
I would like to enquire as to whether there are any

openings for telesales operators in your company.
Identify the job you are applying I am writing to apply for the post of marketing assistant
for I would like to apply for the position for on-line learning
co-coordinator, as advertised on your website.
I have gained experience in several major aspects of

publishing.
Give some examples of personal I have coordinated the changeover from one filing
achievements system to another.
I have supervised a team of bar staff on a regular basis.
I contributed to the development of our new database.
I see myself systematic and meticulous in my approach

to work.
I am fair and broad minded person, with an ability to get
Outline your personal qualities on with people from all kind of life.
I am hard-working and business- minded, and I tend to
thrive under pressure.

Page
I am keen to find a post with more responsibility.
I now wish to find a more permanent full-time position.
Explain why you want this job: I would like to further my career in IT.
I feel that your companys activities most closely match
my own values and interests.
Look
English andAcademy
State read the following example
140G.C.
| 8.1,8.2 & 8.3
Page
79 Horwood Hall
Keele University
Keele
Newcastle
Staffordshire
ST5 5BJ
11/11/2010
Mrs. Jane Job
Recruitment Officer
Jobs For Us
Newcastle
Staffordshire
ST5 8LB
Dear Mrs. Job,
Application for the post of Community Development Officer: Post No. 513/6
I am writing in response to your advertisement in The Sentinel Newspaper last week, and I am
enclosing my CV for your review.
As you will see, I have gained valuable experience in working with many different people in the
local community, and have a strong understanding of community development. I am self-
motivated, and can work as an efficient leader of a team.
In my current position as Regeneration Assistant I have been involved in creating a strategic

framework for obtaining funding and attaining targets.
I am at present completing distance learning course on Equality and Diversity Policy

Development, and I am now looking for a post which gives me an opportunity to use my new
skills.
I look forward to have the opportunity to discuss this further with you.
Yours sincerely,
Mr. Bob Seeker
I.- Grammar exercise. G.C. 5.1

According to the example read, complete the chart below with the information
Page asked.
Steps Phrases
Identify the job you are applying

for
Give some examples of personal

achievements
Outline your personal qualities
Explain why you want this job:
English State Academy Grammar in Context 142 |

Page
FORMAL PHRASES FOR ORDERING PRODUCTS AND RESPONDING ORDERS
The Start Dear Personnel Director,
The start of any business letter Dear Sir or Madam: (use if you don't know who you are
begins by addressing the recipient writing to).
of the letter.
Dear Dr, Mr, Mrs, Miss or Ms Smith: (Use if you know who
you are writing to, and have a formal relationship with -
VERY IMPORTANT use Ms for women unless asked to use
Mrs. or Miss).
Dear Frank: (use if the person is a close business contact or

friend).
Note: If you are unsure how formal you should be, always
choose a more formal form. Writing to a specific person is
always preferred if at all possible.
The Reference Begin by referencing a specific conversation or other

contact means. If this is the first letter in a conversation,
you can also provide the reason for writing.
With reference to your advertisement in the Times, your

letter of 23 rd March,
your phone call today,
Thank you for your letter of March 5 th .
The Reason for Writing I am writing to...
... inquire about

... apologize for
... confirm
... comment on
... apply for
Examples:

Page
I am writing to inquire about the position posted in The
Daily Mail.
I am writing to confirm the shipment details on order #
2346.
I am writing to apologize for the difficulties you
experienced last week at our branch.
Once you have introduced the reason for writing your

business letter, move on to stating more specifically the
purpose of your letter. Here are a number of possibilities:
Requesting Could you possibly?

I would be grateful if you could
Agreeing to Requests I would be delighted to
Giving Bad News Unfortunately

I am afraid that
Enclosing Documents
I am enclosing
Please find enclosed
Enclosed you will find
Closing Remarks Thank you for your help Please contact us again if we can
help in any way.
there are any problems.
you have any questions.
Reference to Future Contact I look forward to ...

hearing from you soon.
meeting you next Tuesday.
seeing you next Thursday
The End Yours faithfully, (If you don't know the name of the person
you're writing to)
Yours sincerely, (If you know the name of the person

you're writing to)
Best wishes,
Best regards, (If the person is a close business contact or

friend)

Page
Here is a sample purchase order using some of these forms G.C. 8.1,8.2 & 8.3
Ken's Cheese House

34 Chatley Avenue
Seattle, WA 98765
E-mail: kenny@cheese.com
October 23, 2006
Fred Flintstone
Sales Manager
Cheese Specialists Inc.
456 Rubble Road
Rockville, IL
Dear Mr. Flintstone:
With reference to our telephone conversation today, I am writing to confirm your order for: 120 x
Cheddar Deluxe Ref. No. 856
The order will be shipped within three days via UPS and should arrive at your store in about 10
days.
Please contact us again if we can help in any way.
Yours sincerely,
Kenneth Beare
Director of Ken's Cheese House

Page
In pairs, read the following sentences and complete them with the correct word
from the box
G.C. 8.1, 8.2 & 8.3
1. I am writing to _____________ that we would like to ___________ an order

for 10 computers.
2. _______________it be possible to decrease the ______________ we made in

our telephone conversation?
3. Please advise us of the _______________ ______________.
4. The _______________will be faxed on dispatch of the ___________________.
5. The total amount is ________________ immediately after ________________

of the goods.
Number from 1 to 8 to order these lines, then write the complete paragraph as it is.
G.C. 5.1
_______ I would like to apologize for
_______ Your order and dispatched it this morning. We
_______ Hired a new salesperson who was not familiar
_______ The mixed-up on your last order. We recently
_______ With your systems. We have corrected
_______ Have applied a 10% discount on your order, and again
_______ This may have caused you.
_______ Apologize for any inconvenience

Page
II.- Grammar exercise.
Write the ordered paragraph in the notepad.

G.C. 5.1

Page
Grammar in Context
PHRASES FOR LETTERS OF COMPLAINT
Letters of complaint usually include the following stages:
Background I am writing to inform you that the goods we ordered

This section describes the from your company have not been supplied correctly.
situation I attended your exhibition Sound Systems 2013 at the
Fortune Hotel (22-25 January) and found it informative
and interesting. Unfortunately, my enjoyment of the
event was spoiled by a number of organizational
problems.
I am a shareholder of Sunshine Bank and I am very
concerned regarding recent newspaper reports on the
financial situation of the bank. Your company is listed as
the auditor in the latest annual report of the bank, so I am
writing to you to ask for an explanation of the following
issues.
I am writing to inform you of my dissatisfaction with the
food and drinks at the 'European Restaurant' on 18
January this year.
Problem Cause:
On 17 October 2013 we placed an order with your firm for

12,000 ultra super long-life batteries. The consignment
arrived yesterday but contained only 1,200 batteries.
Firstly, I had difficulty in registering to attend the event.
You set up an on-line registration facility, but I found the
facility totally unworkable.
You sent us an invoice for $10,532, but did not deduct our
usual 10% discount.
We have found 16 spelling errors and 2 mis-labelled

Page
diagrams in the sample book.
Effect:
This error put our firm in a difficult position, as we had to

make some emergency purchases to fulfill our
commitments to all our customers. This caused us
considerable inconvenience.
Even after spending several wasted hours trying to
register in this way, the computer would not accept my
application.
I am therefore returning the invoice to you for correction.
These large numbers of errors are unacceptable to our
customers, and we are therefore unable to sell these
books.
Solution I am writing to ask you to please make up the shortfall

immediately and to ensure that such errors do not
happen again.
Could I please ask you to look into these matters.
Please send us a corrected invoice for $9,479
I enclose a copy of the book with the errors highlighted.
Please re-print the book and send it to us by next Friday.
Warning (optional) Otherwise, we may have to look elsewhere for our

supplies.
I'm afraid that if these conditions are not met, we may be
forced to take legal action.
If the outstanding fees are not paid by Monday, 4
November 2013, you will incur a 10% late payment fee.
Closing I look forward to receiving your explanation of these

matters.
I look forward to receiving your payment.
I look forward to hearing from you shortly.

Page
Look at this example G.C. 8.1,8.2 & 8.3
Fortune Goods
317 Orchard Road
Singapore
October 24, 2013
Attn: Mr David Choi

Sales Manager
Everlong Batteries
171 Choi Hung Road
Hung Hom
Hong Kong
Dear Mr. Choi
Re. Order No. 768197
I am writing to inform you that the goods we ordered from your company have not been supplied
correctly.
On 17 October 2013 we placed an order with your firm for 12,000 ultra super long-life batteries.
The consignment arrived yesterday but contained only 1,200 batteries.
This error put our firm in a difficult position, as we had to make some emergency purchases to
fulfil our commitments to all our customers. This caused us considerable inconvenience.
I am writing to ask you to please make up the shortfall immediately and to ensure that such
errors do not happen again. Otherwise, we may have to look elsewhere for our supplies.
I look forward to hearing from you by return.
Yours sincerely

Page
J. Wong
J. Wong
Purchasing Officer
By teams of four, write a complaint letter with the information given below
G.C. 8.1,8.2 & 8.3
1470 South Pole Thank you for

Chicago 6734 your assistance
Tel/ Fax 956 63855 with this
Dear Mr. situation
Taylor
On April 25, we Customer Service

purchase a laser Manager
Office Mart
printer, model A532,
Michigan mail
from your store, for the Chicago 5643
amount of $199.99
May 30,
2014
The situation is completely
unacceptable. We demand
immediate delivery of the printer or a
complete refund.
(Signature)
Tom Harvey
Purchasing manager
Respectfull Aluminum Articles
y,
We were promised that the printer would

be delivered to our offices with eight
English State Academy
working days. We have still not received it, 151 |
Page
and your customer service department has
been extremely uncooperative.
Write the complaint letter

G.C. 5.1

Page
Teacher gives the correct answers and the students check their answers and all
doubts are clarified by the teacher.
Self evaluation
G.C. 6.3
Goal Yes No Ways to

improve
I am able to identify the main characteristics of formal and

informal e-mails.
I know the different ways to express requests and

preferences.
I know the phrases used for a job application letter.
I know the phrases used for ordering and responding orders.
I know the phrases for writing a complaint letter.

Page
Well Folks, first let me congratulate to all of you
because you almost accomplish the target and
you have done things very well.
But you havent finished it yet, there is something

you havent done, and that is the main target and
the real challenge for what I dare you,
So are you ready for the real challenge?
Your final project is to design a job application by a web page in which you must
include 3 sections:
1. Personal information.
2. Knowledge about the company interested on and personal interests
about the job asked.(you have to choose a real company where you
would like to work)
3. Education, skills, abilities and experience.
After you finish your web page you must work with a partner doing the following:
1. Exchange your web page with your partner.

2. Interview him/her about the information given on the job application.
3. Write a report (at least 1 page) about your partners web page including:
o Your personal opinion about how it was done.

o Your partners reasons for choosing the company named.

Page
o Your partners possibility for getting the job, according to your point of
view.
CSS AND JavaScript GLOSSARY
A relation to CSS positioning: Absolute positioning is used for elements that would be out of place if
allowed to flow with the surrounding elements. e.g. The background on the CodeHelp site uses absolute
positioning to eliminate the border that would appear if the image was placed with relative positioning,
even as the first line of the body section. Use relative to provide access with Javascript without affecting
the position of the element relative to the rest of the page. (The default in HTML is static positioning and
Javascript requires the use of the relative position attribute to access the element.
Background: Formerly found in the <body> tag or in tables, the background attribute is deprecated and
must be replaced by CSS. The background attribute specifies the URL of an image to use behind the page
content. The image is tiled by default (repeated in each direction until the space is filled). To set the
background to a color use the CSS below instead of the deprecated bgcolor attribute.
Base tag: (Must be within the <head></head> section.) Common use is to specify the target for all links
in a frameset document. If the document is part of a frameset, you can specify an output frame by
name. To override the base target, specify a target as <a href="" target="differentframe">. HTML4
requires the tag to specify the base URL for all relative links in the document (which is otherwise
assumed to be the current directory).
Bgcolor attribute: Deprecated Sets the color background. Use either a color name or describe the exact
color using hexadecimal numbers to describe the settings for red, green and blue. Color names are
preferable.
Body tag: Every HTML document, except a frameset, needs a <body> </body> tag as the beginning and
end of the content area. Attributes specified in the body tag apply equally to all parts of the document.
CSS allows the usual body attributes to be specified as part of the style, including backgrounds,text
colors, and link colors. The body tag is also the home of the onLoad() Javascript function which is only
called once, after the document has finished loading - executing configuration code outside onLoad can
cause errors if certain parts of the document have not yet been downloaded over a slow connection.
Button: A real 3D button is only available within a form. You can make an image into a button (2D by
default) by putting the <img> tag within a <a></a> tag.

Page
Cascading Style Sheets: cascading style sheets: The basis of style management in HTML4. The
main CodeHelp site contains detailed explanations of style sheet syntax and uses. Search for stylesheet.
Class: Use the keyword class to assign the settings declared in the style sheet to the HTML tag: <p
class=indent> </p> Only <base> <basefont> <head> <html> <meta> <param> <script> <style> and <title>
cannot contain a class selector.
CSS: The Cascading Style Sheets Specification (CSS) is a computer language that is used to write
formatting instructions (rules). These rules tell a web browser how webpage content should look in
terms of:
Layout. position, alignment, width, height, etc.
Style. typeface, font-weight, color, border, etc.
CSS and Backgrounds: Style sheets can put a background behind individual elements, position the main
background away from the page edges, stop background images repeating in either or both directions
and dictate whether the image scrolls with the page or remains fixed.
Document Javascript: Document inherits properties and methods from HTMLElement. Netscape4 and
Internet Explorer add numerous incompatible methods and properties (see this site or DHTML in this
glossary and the Javascript Pocket Reference for details). The onLoad(); and onUnload(); are part of the
window object rather than document.
Extension or File extensin: In Windows, DOS and some other operating systems, one or several letters
at the end of a filename. Filename extensions usually follow a period (dot) and indicate the type of file.
For example, this.txt denotes a plain text file, that.htm or that.html denotes an HTML file, that.js an
JavaScript file. Some common image extensions are picture.jpg or picture.jpeg or picture.png or
picture.gif
External Stylesheets: Stylesheets are particularly suitable as external links. Using a single file for all
appropriate pages makes updating and amending the site simple. One change to the stylesheet file and
all pages on the site could reflect the amendments without you having to alter any HTML or upload any
of the HTML files themselves using FTP. The syntax is <link rel="stylesheet" href="URL"
type="text/css"> The stylesheet file itself should be a plain text file with a .css extension contain only the
text you would otherwise enter between the <style></style> tags. Only one stylesheet can be linked to
any one HTML page.
External Javascript: If more than one page uses the same functions (such as the one that loads some
pages in new browser windows) the javascript code can be imported from an external text file - with the
.js externsion - using the following syntax in the HTML document: <script language="Javascript"
type="text/javascript" src="URL"></script>
Font property (CSS): If you want to specify more than one font control in a single class or rule, use the
shorthand font property and separate each value with a space. Weight values
precede style, variant, size line height and font names in that order.

Page
Font tag: Now deprecated, the font tag has been overtaken by CSS. You may choose to use it for pages
viewed in v3 browsers. The main advantage in CSS is the reuse of code: under HTML3 if you wanted a
table showing ordinary text in the first column and highlighted text in the second column. If you wanted
customized text in column 1 as well to differentiate the descriptions from the rest of the text on the
page, that would be two font changes per line. With 30 products that gets to a mess of 60 <font
color="#FFC354" size="+1"> and </font> tags. Now with HTML4 and CSS, you can set the parameters for
each column as a class and even set the table definition itself so that the final code only requires
class=one or class=two to be set.
Height property (CSS): Stylesheets can use the height property for text elements as easily as images and
objects. The property can use absolute measurements in pixels or percentages of the available area.
HTMLElement Javascript: Browser dependent properties and methods are not covered here. See
the Javascript Pocket Reference for details. Only the event handlers within the HTMLElement object are
browser-independent, and only inJavascript1.2.
In relation to CSS positioning: Relative positioning provides an offset from the current flow of the page
and allows elements to be accessed by a Javascript function. A relative position of top:0 left:0 is no
different to the default static position.
Java: A network-oriented programming language invented by Sun Microsystems that is specifically

designed for writing programs that can be safely downloaded to your computer through the Internet
and immediately run without fear of viruses or other harm to our computer or files. Using small Java
programs (called "Applets").
JavaScript: A simple programming language developed by Netscape to enable greater interactivity in

Web pages. It shares some characteristics with JAVA but is independent. It interacts with HTML,
enabling dynamic content and motion.
Margin property: See also padding. The margin is a calculated space around any element - a transparent
space around any border drawn. Use margin in your stylesheet to remove the need for the deprecated
hspace and vspace attributes and to precisely control the relative positioning of page elements. Use
margin-top margin-right margin-bottom and margin-left if you want to position the element off center
compared to adjacent elements.
Padding: See also the more commonly required margin. Padding space is only within the border of an
element (whether the border is drawn or not) so does not affect other objects on the page. Padding, by
default is even on all sides. Use padding-top, padding-right, padding-bottom and padding-left to position
an element off center inside the invisible box that contains each individual element on the page.
Paragraphs: Publishing any kind of written work requires the use of a paragraph. The paragraph tag is
very basic and a great introductory tag for beginner's because of its simplicity.
Script: A script is a type of programming language that can be used to fetch and display Web pages.
There are many kinds and uses of scripts on the Web. They can be used to create all or part of a page,
and communicate with searchable databases. Forms (boxes) and many interactive links, which respond
differently depending on what you enter, all require some kind of script language. When you find a

Page
question mark (?) in the URL of a page, some kind of script command was used in generating and/or
delivering that page. Most search engine spiders are instructed not to crawl pages from scripts, although
it is usually technically possible for them to do so (see Invisible Web for more information).
Script tag: If your code defines new Javascript functions, put the <script> tag in the <head> section of
your HTML document to make sure the functions are available to all parts of the document. If you want
your Javascript to execute inline, for example, to print a customised part of the page, the code may not
need a function declaration and the tag should be in the <body> at the point where the output is
required.
Stylesheets: Cascading style sheets: Users of some browsers can set up their own stylesheets that will
be applied to all sites the user visits. Eventually, one of these settings will conflict with another setting
on the web site. The style sheets are applied in a cascade to avoid this problem. The site style sheet will
overrule the visitors style sheet. Also, if two site rules conflict, the more specific rule will be applied, ID
being more specific than class and class being more specific than HTML tag alterations.
Validation: For solutions to problems validating forms which use Javascript, see the CodeHelp site.
To validate your own HTML (after uploading it to suitable webspace) go to the W3C Validator.
Validation at least ensures that you should not get nasty suprises from visitors viewing your HTML in
other browsers.
Var tag: Similar to <code> - use to display a program argument or variable. Usually renders in italic.
Visibility: Set the initial visibility state of any CSS element in the stylesheet: visibility:visible or hidden.
When hidden, the element takes up the same amount of space on the page as when it is visible.
Compare with display. Visibility can be changed dynamically using Javascript but remember that IE and
Netscape have differing ways ofaccessing CSS elements through Javascript. The following code shows
how to manipulate the visibility of an element with the id active in IE which was previously declared as
hidden.

Page
Hello folks, Im Mr.
Computer Man, and as you
can see Im here to dare you
all to configure the sources
of a virtual network, I know
you can do it but it will take
Page
you a lot of effort, but at
the end it will be worthless.
So what are you waiting

for?
Lets get to work!!!

Page
PACKET TRACER
I. Watch the following video and take notes from it, the notes will help you to learn about the
program Packet Tracer.
G.C.4.3
II.- Exercise.
Using the notes you took during the video answer the following question. G.C. 5.7
What is the Packet Tracer?
III.- Compare your answer with a partner and try to get a single answer between your
definitions.
G.C. 5.2
Teacher gives the correct answer and the students check their answer and all doubts are

Page
IV.- Exercise.
Look at the picture and label the parts of it. G.C. 8.2
Teacher gives the correct answer and the students check their answer and all doubts are

Page
V.- Read this information about Cisco IOS then use it to solve the next activities.

G.C. 4.3, D.C. 4
Cisco IOS
Cisco IOS Software is the world's leading

network infrastructure software,
delivering a seamless integration of
technology innovation, business-critical
services, and hardware platform support.
Currently operating on millions of active
systems, ranging from the small home
office router to the core systems of the
world's largest service provider networks,
Cisco IOS Software is the most widely
leveraged network infrastructure software
in the world.
Access Levels
Cisco IOS permits to configure multiple privilege access levels for different accounts.
This is very useful when many people work on the same router or switch, but with
different access levels and there is no time to implement an authentication server.
Cisco IOS supports 16 different privilege levels from 0 through 15. Level 0 is user mode.
Level 15 is the privileged mode. Level 1 through 14 is available for customization and
use. By default, any user who can furnish the user-level password or user
name/password combination can gain User exec mode access to the device, which is
privilege level 1. From there, if the user knows the enable secret password, they can
access the Privilege exec mode, or privilege level 15. The three predefined privilege
levels on Cisco devices include the following:
Level 1 is User exec mode only (prompt is router>), the default level for login
Level 15 is Privileged exec mode (prompt is router#), the Enable mode
Level 0 Seldom used, but includes five commands: disable, enable, exit, help,
and logout and these commands can be executed at any level.
Command Hierarchy
After an EXEC session is established, commands within Cisco IOS Software are
hierarchically structured. Understanding this hierarchy is important for successfully
configuring a router. The following figure illustrates a simple high-level schematic
diagram of some Cisco IOS commands.

Page
Command options and applications vary, depending on your position within this
hierarchy. Configuration command options are not available until you have navigated
to the configuration branch of the Cisco IOS command-line interface (CLI) structure.
When you are in the configuration branch, you may enter system-level configuration
commands that apply to the entire router at the global configuration level. Interface-
specific configuration commands are available when you switch to the interface
configuration level.
To assist you in navigation through the Cisco IOS CLI, the command prompt changes to
reflect your position within the command hierarchy. This setup allows you to easily
identify where within the command structure you are at any given moment. The
following table is a summary of command prompts and the corresponding location
within the command structure.

Page
Router> - User EXEC mode
Router# - Privileged EXEC mode
Router(config)# - Configuration mode (notice the #
sign indicates this is accessible
only at privileged EXEC mode)
Router(config-if)# - Interface level within
configuration mode
Router(config-router)# - Routing engine level within
configuration mode
Router(config-line)# - Line level (vty, tty, async) within
configuration mode
VI.- Exercise.
Using the information about the reading answer the following questions. G.C.4.3
1. What is the IOS?

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
2. What is the prompt?

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
3. Which are the predefined privilege levels on Cisco devices?

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
4. Which are the Routing Engine commands?

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
5. What does CLI stand for?

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Page
VII. - Compare your answers with your classmates and correct them if you need to do
so.

Teacher gives the correct answers and the students check their answer and all doubts
VIII. - Exercise. Match the columns by writing the letter in the parentheses according
to the information in the text.
G.C. 5.1
A. User EXEC mode [ ] Router(config-line)#
B. Privileged EXEC mode [ ] Router(config)
C. Configuration mode [ ] Router#
D. Interface level within configuration mode [ ] Router(config-if)
E. Routing engine level within configuration mode [ ] Router(config-router)#
F. Line level within configuration mode [ ] Router>
Teacher gives the correct answers and the students check their answer and all
doubts are clarify by the teacher.

Page
IX. - Read this information about VLAN, it contains very helpful information to
you.

VLAN
A VLAN is a group of end stations in a switched network that is logically segmented by
function, project team, or application, without regard to the physical locations of the
users. VLANs have the same attributes as physical LANs, but you can group end
stations even if they are not physically located on the same LAN segment.
Any port can belong to a VLAN, and unicast, broadcast, and multicast packets are
forwarded and flooded only to end stations in that VLAN. Each VLAN is considered a
logical network. Packets destined for stations that do not belong to the VLAN must be
forwarded through a router.
VLANs are usually associated with IP subnetworks. For example, all the end stations in
a particular IP subnet belong to the same VLAN. To communicate between VLANs, you
must route the traffic.
By default, a newly created VLAN is operational; that is, the VLAN is in the no
shutdown condition. Additionally, you can configure VLANs to be in the active state,
which is passing traffic, or the suspended state, in which the VLANs are not passing
packets. By default, the VLANs are in the active state and pass traffic.
VLAN Advantages.
Broadcast Control: Broadcasts are required for the normal function of a

network. Many protocols and applications depend on broadcast
communication to function properly. A layer 2 switched network is in a single
broadcast domain and the broadcasts can reach the network segments which
are so far where a particular broadcast has no scope and consume available
network bandwidth. A layer 3 device (typically a Router) is used to segment a
broadcast domain. If we segment a large LAN to smaller VLANs we can reduce
broadcast traffic as each broadcast will be sent on to the relevant VLAN only.
Security: VLANs provide enhanced network security. In a VLAN network
environment, with multiple broadcast domains, network administrators have
control over each port and user. A malicious user can no longer just plug their
workstation into any switch port and sniff the network traffic using a packet
sniffer. The network administrator controls each port and whatever resources

Page
it is allowed to use. VLANs help to restrict sensitive traffic originating from an
enterprise department within itself.
Cost: Segmenting a large VLAN to smaller VLANs is cheaper than creating a
routed network with routers because normally routers costlier than switches.
X. WatchLayer
Physical the video about VLANs
Transparency: and are
VLANs taketransparent
notes, the notes
on thewill help you
physical to learn about
topology
the VLANs.
and medium over which the network is connected.
G.C.4.3
XI. - Decide whether each sentence is True or False and write the corresponding letter
in the parentheses.
G.C. 6.2
( ) VLANs have the same attributes as physical LANs.
( ) VLANs are not usually associated with IP subnetworks.
( ) Broadcasts are not required for the normal function of a network.
( ) When VLANs are implemented, each VLAN must be on a different IP
subnet than other VLANs.
( ) VLANs provide basic network security.
English State Academy
are clarified by the teacher. 168 |
Page

XII. - Read the following information and use it to answer the exercise below.

Types of VLANs
Several types of VLAN are defined, depending on switching criteria and the level at
which the VLAN is conducted:
A level 1 VLAN (also called a Port Based VLAN) defines a virtual network
according to the connection ports on the switch;
A level 2 VLAN (also called a MAC Address-Based VLAN) comprises of defining a
virtual network according to the MAC addresses of the stations; This type of
VLAN is much more flexible than the port based VLAN because the network is
independent from the location of the station;
A level 3 VLAN: there are several types of level 3 VLANs:
The Network Address Based VLAN links subnets according to the source
IP address of the datagrams. This type of solution provides great
flexibility in so far as the configuration of the switches changes
automatically when a station is moved. On the other hand there may be
slight degradation in performance since the information contained in
the packets must be analyzed more closely.
The Protocol Based VLAN makes it possible to create a virtual network
by protocol type (for example TCP/IP, IPX, AppleTalk, etc.), therefore
grouping together all the machines using the same protocol on the
same network.

Page
XIII.- Write the correct letter into the parentheses according to the information read it.
G.C. 6.2
VLANs types. Description.
A. MAC Address-Based VLAN ( ) Comprises of defining a virtual network according to

the MAC addresses of the stations; This type of VLAN is
much more flexible than the port based VLAN because
the network is independent from the location of the
station.
B. Protocol Based VLAN ( ) Makes it possible to create a virtual network by

protocol type (for example TCP/IP, IPX, AppleTalk, etc.),
therefore grouping together all the machines using the
same protocol on the same network.
C. Port Based VLAN ( ) Links subnets according to the source IP address of

the datagrams. This type of solution provides great
flexibility in so far as the configuration of the switches
changes automatically when a station is moved. On the
other hand there may be slight degradation in
performance since the information contained in the
packets must be analyzed more closely.
D. Network Address Based ( ) Defines a virtual network according to the

VLAN connection ports on the switch.

Page
Grammar in Context
G.C. 8.1,8.2 & 8.3
What is ACTIVE tense?
Example: John sells his computer to a technician.
Explanation: This sentence has the regular structure of an affirmative

sentence, and it says what John sells. This is the reason it is active because
the subject is who performs the action. It is used in everyday conversations.
John sells his computer to a technician.

Subject verb direct object predicate
What is PASSIVE tense?
Example: The computer is sold to a technician by John.
Explanation: This sentence has a reversed structure where the object (who
receives the action) becomes the subject, and you add the correct form of
auxiliary BE( is / are / am / isnt / arent / am not ), and change action verb to
past participle form.
The computer is sold to a technician by John.

Subject Auxiliary Past Participle verb predicate Agent
Page
More examples
Present Simple Tense (passive Voice)

Auxiliary verb in passive voice: am/is/are
Active voice: Passive voice:

He sings a song. A song is sung by him.
He does not sing a song. Does he A song is not sung by him.
sing a song? Is a song sung by him?
I. - Grammar exercise.
Put in the SIMPLE PRESENT passive form tense the verbs in brackets. G.C. 5.1
EXAMPLE: I ________ (give) a sweet for smiling at her.
I am given a sweet for smiling at her.
1. When thieves ___________ (arrest) they ___________ (take) to a police station.
2. The battery in my car ___________ (check) quite often and it ____________

(change) if it is no good.
3. Books ___________ (borrow) from the library on Friday and then they
___________ (return) on Tuesday.
4. Sometimes traffic signs ___________ (knock) down by careless motorists. If they

Page
_____ (damage), they _____________ (take) away to be repaired or discarded.
Teacher gives the correct answers and the students check their answers and all
doubts are clarified by the teacher.
II. - Grammar exercise.
Rewrite the sentences in Present Passive Voice. G.C. 5.1
EXAMPLE: 1. He opens the port. -

The port is opened by him
2. We install the net.

_______________________________________________________________
3. She chooses a wireless net.

_______________________________________________________________
4. I draw a net layout.

_______________________________________________________________
5. They use a router.

_______________________________________________________________
6. They don't configure it.

_______________________________________________________________
7. He doesn't open the subnet.

_______________________________________________________________
8. You do not write the command.

_______________________________________________________________
9. Does your boss select the devices?

________________________________________________________________
10. Does the technician put the cables?

________________________________________________________________
Page
III.- Grammar exercise.
Read next passage and underline the sentences with simple present passive G.C. 5.1
voice.
Saint Valentines Day, commonly shortened to Valentines Day, is an annual

commemoration. On February 14 is celebrated love and affection between intimate
companions. The day is named after one or more early Christian martyrs named
Valentine and this celebration is established by Pope Gelasius I in 500 AD. Valentines
Day is deleted from the Roman calendar of saints in 1969 by Pope Paul VI, but its
religious observance is still permitted. In this day is expressed the love for each other
by presenting flowers, offering confectionery, and sending greeting cards (known as
valentines). The day first became associated with romantic love in the circle of
Geoffrey Chaucer in the High Middle Ages, when the tradition of courtly love
flourished.
are clarify by the teacher.
Self evaluation
G.C. 6.3
Goal Yes No Ways to

Page
improve
I can identify the difference between the active and

passive voice.
I can write sentences in passive voice in present.
I can recognize sentences in passive voice in present in a

paragraph.
G.C. 8.1,8.2 & 8.3
PAST PASSIVE TENSE
Now lets see how to speak in PAST PASSIVE
NOTE: Remember to keep the same rules only use WAS / WERE to signal the past.
Look at the following examples.
Past Simple Tense (passive Voice)

Auxiliary verb in passive voice: was/were
Active voice: Passive voice:
I installed three nets Three nets were installed by me.
I did not install a net. A net was not installed by me.
Did I install a net? Was a net installed by me?
I. - Grammar exercise.
Put in the Simple Past Passive form tense the verbs in brackets. G.C. 5.1
EXAMPLE: An important command _________ (enter) on the prompt.
An important command was entered on the prompt.
1. Our net ________________________ (access) by a new user.

Page
2. I think it ________________________ (install) sometime during the night.
3. The cables ___________________ soon ________________________ (cut).
4. The spare routers _____ (want) urgently so they ________________________ (fly)

in from the supplier.
5. These protocols ________________________ (change) from the technicians in

another department.
II. - Grammar exercise.
Write the Simple Past Passive form of the sentences. G.C. 5.1
EXAMPLE: 1) She wrote four commands.

Four commands were written.
2. We updated the subnet.

_______________________________________________________________
3. The technician cut the blue wire.

_______________________________________________________________
4. The man stole an old car.

_______________________________________________________________
5. Cisco sold the new servers.

_______________________________________________________________
6. The dog bit the old lady.

_______________________________________________________________
7. Tom and Max fixed five terminals.

_______________________________________________________________
8. Oliver taught the children.

_______________________________________________________________
Page
9. Victoria rode the brown horse.
________________________________________________________________
10. Grandmother told good stories.

________________________________________________________________
III. - Grammar exercise.

Review the Simple Present and Simple Past PASSIVE tense. Write the correct verb tense
in the line. G.C. 5.1
1. - While I was travelling around the country my camera ____________________

(steal) from my hotel room.
2.- The technician ____________________ (call) by a user
3. - The switch ____________________ (fix) very often.
4. - Originally the users manual ____________________ (write) in Spanish, and a

few years ago it ____________________ (translate) into English.
5. - The islands ___________________ (wash) by the Atlantic Ocean.
6. - The term Packet ___________________ (use) in 1965.
7. - About this equipment ___________________ (speak much) now.
8. - We ___________________ (not allow) to send personal e-mails at work.
9. - Our project ___________________ (make) a week ago.
10. - Three boys __________________ (inform) about test results last lesson.
Self evaluation
Page G.C. 6.3
Goal Yes No Ways to
improve
I can write sentences in passive voice in past tense.
I can use the passive voice in past to communicate.
FINAL PROJECT
G.C. 4.5,8.1 and 8.3. D.C. 4.12

CHECK LIST
Page
Well Folks, first let me congratulate to
all of you because you almost
accomplish the target and you have
done things very well.
But you havent finished it yet, there is

something you havent done , and that
is the main target and the real
challenge for what I dare you,
So Are you ready for the real

challenge?
Youve already known the sources of

wireless networks
YOUR FINAL PROJECT IS TO CREATE A TUTORIAL of a VLAN

HOW TO DO THE TUTORIAL
1. Using the theory about wireless nets and VLANs, elaborate the design and
configuration of a VLAN for an organization.
2. Write the dialogue.
3. Deliver a report about the development of the project using passive voice.
4. Save the video in AVI format.
5. Burn it on a CD.
ACTIVITY TO EVALUATE POINTS

STEPS TO CONFIGURE A VLAN 20 %
TECHNICAL VOCABULARY 20 %
WRITTEN REPORT 20 %
PRONUNCIATION AND PRESENTATION 20 %
QUALITY OF VIDEO 20 %
GLOSSARY

Page
Cisco: Cisco Systems, Inc. is an American multinational corporation headquartered in San Jose,
California, that designs, manufactures, and sells networking equipment.
IP address: An IP address is a binary number that uniquely identifies computers and other devices on a
TCP/IP network.
Packet: A term first coined by Donald Davies in 1965, a packet is a segment of data sent from one
computer or network device to another computer or network device over a network. A packet contains
the source, destination, size, type, data, and other useful information that helps packet get to its
destination and then read. Below is a breakdown of a TCP packet.
Protocol: Sometimes referred to as an access method, a protocol is a standard used to define a method
of exchanging data over a computer network such as local area network, Internet, Intranet, etc. Each
protocol has its own method of how data is formatted when sent and what to do with it once received,
how that data is compressed or how to check for errors in data.
Router: Routers are small physical devices that join multiple networks together. Technically, a router is a
Layer 3 gateway device, meaning that it connects two or more networks and that the router operates at
the network layer of the OSI model.
Subnet: Subnet is a method of dividing a network of IP addresses into groups. Subnetting allows each
computer or networking device in its own subnet to communicate with each other and still allow
communication between subnets by routing the traffic through the network router
TCP/IP: Short for Transmission Control Protocol/Internet Protocol, TCP/IP also commonly abbreviated as
TCP was developed in 1978 and driven by Bob Kahn and Vint Cerf. Today, TCP/IP is a language governing
communications among all computers on the Internet.
VLAN: Short for Virtual Local Area Network, VLAN is a virtual LAN that allows a network administrator to
setup separate networks by configuring a network device, such as a router, and not through cabling.
This allows for a network to be divided, setup and changed, allowing for a network administrator to
organize and filter data accordingly in a corporate network.

Page
Siglema: CENGN-02 Nombre del Comunicacin especializada en ingls Nombre del
Mdulo: Alumno:
Docente evaluador: Grupo: Fecha:
Resultado de 1.1 Argumenta propuestas, opiniones y Actividad de evaluacin: 1.1.1 Expresa oralmente acuerdos en ingls.
Aprendizaje: acuerdos mediante el anlisis de
informacin especfica. (HETEROEVALUACION)
INDICADORES % CRITERIOS
Excelente Suficiente Insuficiente
Elabora guin de conversacin Elabora guin de conversacin con Utiliza un tema distinto al
con base en el diseo de la base en el diseo de la Pgina establecido.
Pgina Web del compaero en el Web del compaero en el cual Omite uno o varios de los
cual incluye: incluye: siguientes aspectos al elaborar
Planteamiento de opinin Planteamiento de opinin guin:
personal sobre el diseo en personal sobre el diseo en Planteamiento de opinin
general y especfico de algunas general y especfico de algunas personal sobre el diseo en
secciones de la Pgina Web. secciones de la Pgina Web. general y especfico de algunas
Planteamiento de ideas Planteamiento de ideas secciones de la Pgina Web.
personales. personales. Planteamiento de ideas
Desacuerdos y acuerdos respecto Desacuerdos y acuerdos respecto personales.
al diseo. al diseo. Desacuerdos y acuerdos respecto
Elementos Opciones de mejora al diseo Opciones diferentes a las al diseo.
discursivos del texto 20 desde su punto de vista a las planteadas. Opciones diferentes a las
oral planteadas. Propuestas de ideas distintas a las planteadas.
Propuestas de ideas distintas a planteadas. Propuestas de ideas distintas a
las planteadas. Defensa de punto de vista las planteadas.
Defensa de punto de vista basada basada en argumentos. Defensa de punto de vista
en argumentos. Complementa frases utilizadas con basada en argumentos.
Complementa frases utilizadas lxico y estructura Complementa frases utilizadas
con lxico y estructura correspondiente. con lxico y estructura
correspondiente. Cumple con todos los puntos de correspondiente.
Cumple con todos los puntos de una manera muy superficial y
una manera muy especfica y escueta y con dificultades para Emite frases utilizadas con lxico
profunda donde se refleja el darse a entender y estructura que no
anlisis en todos los contenidos corresponde impidiendo la
del diseo de la pgina web y comprensin.
mostrando gran dominio del
idioma.


Pronuncia oraciones y frases Pronuncia oraciones y frases Pronuncia oraciones y frases
completas. completas. incompletas.
Presenta las acciones con una Presenta las acciones con una Presenta las acciones sin
secuencia lgica. secuencia lgica. secuencia lgica.
Existe cohesin y coherencia en Existe cohesin y coherencia en su Presenta un discurso sin cohesin
su discurso. discurso. ni coherencia.
Corrige lapsus de confusin o Corrige lapsus de confusin o Omite corregir lapsus de
Exposicin oral 20
error. error. confusin o error.
Utiliza reformulacin. Utiliza cambio de toma de palabra. Utiliza errneamente o evita
Utiliza repeticin. Utiliza reformulacin. utilizar cambio de toma de
Pronuncia con fluidez y sin palabra.
pausas mayores a 5 segundos. Emplea errneamente y evita
usar la reformulacin.
Redacta documento resumiendo Redacta documento resumiendo Redacta documento sin resumir
puntos clave en la presentacin puntos clave aportados en puntos clave aportados en
aportados en interaccin oral interaccin oral que incluya lo interaccin oral.
que incluya lo siguiente: siguiente: Redacta el documento omitiendo
Establece acuerdos referentes al Establece acuerdos referentes al uno o varios de los siguientes
diseo de la Pgina Web. diseo de la Pgina Web. elementos:
Resume aspectos centrales. Resume aspectos centrales. Establece acuerdos referentes al
Elementos Establece opinin personal y los Emplea redaccin de introduccin, diseo de la Pgina Web.
discursivos del texto 15 motivos para que sea o no desarrollo y conclusin. Resumir aspectos centrales
aceptada en las propuestas Redacta sin seguir considerar el
finales. orden de inicio, desarrollo y
Emplea redaccin de conclusin.
introduccin, desarrollo y
conclusin.
Elabora documento con una Elabora documento con una Omite redactar cubriendo uno o
extensin mnima de 1 pgina. extensin mxima de media hoja. varios de los siguientes aspectos:
Evita faltas de ortografa. Evita faltas de ortografa. Extensin menor a media hoja
Reduce errores gramaticales o de Reduce errores gramaticales o de oraciones simples y compuestas.
estructura. estructura. Uso de puntos, comas y
Presentacin escrita
del documento 15 Presenta oraciones simples y Presenta oraciones simples y maysculas.
compuestas. compuestas. Uso de conectores para
Emplea puntos, comas y Emplea puntos, comas y establecer secuencia.
maysculas. maysculas.

Emplea conectores para Emplea conectores. Comete faltas de ortografa que
establecer secuencia. impiden la comprensin.
Comete errores gramaticales o de
estructura que impiden la
comprensin.
Emplea 5 frases para establecer Emplea 4 o menos frases para Utiliza errneamente o no
opinin. establecer opinin. emplea uno o varios de los
Emplea 2 frases para expresar Emplea 1 frase para expresar siguientes puntos gramaticales:
ventajas y desventajas sobre el ventajas y desventajas sobre el Frases para establecer opinin.
diseo de una Pagina Web. diseo de una pgina Web. Lxico relacionado con opinin y
Emplea lxico relacionado con Emplea poco lxico relacionado diseo de Pginas Web.
opinin y diseo de Pginas Web. con opinin y diseo de Pginas Estructuras para establecer
Emplea estructuras para Web. acuerdos.
Gramtica 15 establecer acuerdos. Emplea estructuras para Frases para ofrecer opciones.
Emplea 5 frases para ofrecer establecer acuerdos. Conectores para articular ideas
opciones. Emplea 4 o menos frases para que expresen causa y
Emplea 4 conectores para ofrecer opciones. consecuencia.
articular ideas que expresen Emplea 3 o menos conectores
causa y consecuencia. para articular ideas que expresen
causa y consecuencia.
Entrega el trabajo cuidando Entrega el trabajo cuidando Entrega el trabajo sin cuidar
aspectos de limpieza y orden. aspectos de limpieza y orden. aspectos de limpieza y orden.
Muestra perseverancia al Muestra perseverancia al Muestra inconstancia al no
aprovechar los errores marcados aprovechar los errores marcados corregir errores marcados en
en actividades previas para en actividades previas para actividades previas.
mejorar su trabajo. mejorar su trabajo. Muestra falta de responsabilidad
Muestra organizacin y Muestra responsabilidad al al entregar en fecha posterior a la
responsabilidad al entregar en entregar en la fecha establecida establecida por el docente, u
Actitudes 15 fecha previa a la establecida por por el docente omite la entrega del trabajo.
el docente. Muestra respeto al referirse a los Muestra falta de respeto al
Muestra respeto al referirse a los eventos o personas de las referirse a los eventos o personas
eventos o personas de las instrucciones. de la noticia.
instrucciones. Muestra honestidad al reportar Muestra falta de honestidad al
Muestra honestidad al reportar informacin verdica. reportar informacin errnea o
informacin verdica. inexacta.
100

Mdulo: Alumno:
Resultado de 1.2 Describe responsabilidades propias del Actividad de evaluacin: 1.2.1 Disea gua de lineamientos laborales en
Aprendizaje: desarrollo de funciones y tareas laborales ingls.
mediante condicionales y modales verbales.
HETEROEVALUACIN
Redacta lineamientos para Redacta lineamientos para Redacta los lineamientos sin
configurar redes inalmbricas configurar redes inalmbricas considerar la cantidad
utilizando vocabulario utilizando vocabulario establecida.
referente a derechos y referente a derechos y Omite uno o varios de los
obligaciones siguientes: obligaciones siguientes: componentes de WLAN.
Componentes de WLAN. Nombra algunos componentes No presenta propuestas de
Adicionalmente, realiza de WLAN. Seguridad inalmbrica.
procedimientos o presenta Presenta propuestas para la Derechos del empleado.
Elementos propuestas que mejoren la seguridad inalmbrica. Actividades prohibidas dentro
discursivos del texto 30 seguridad de la red La redaccin de los del espacio laboral.
inalmbrica. lineamientos se desarrolla con La redaccin de los
10 actividades prohibidas el formato de folleto lineamientos omite uno o
dentro del espacio laboral. informativo. varios aspectos para
La redaccin de los La redaccin de los desarrollarse bajo el formato
lineamientos se desarrolla con lineamientos se desarrolla bajo de folleto informativo.
el formato de folleto la estructura de introduccin, La redaccin de los
informativo. lineamientos e informacin de lineamientos no se desarrolla
La redaccin de los la empresa. bajo la estructura de
lineamientos se desarrolla introduccin, lineamientos e
bajo la estructura de informacin de la empresa.
introduccin, lineamientos e
informacin de la empresa.

Elabora documento con la Elabora documento con la No cubre uno o varios de los
descripcin de los componentes descripcin de ISO componentes siguientes aspectos:
de la WLAN, configuraciones de de la WLAN, y tipos de estndares Extensin mnima de tres
seguridad, tipos de estndares y y usa dos tipos de condicionales. prrafos.
usa los diferentes tipos de Evita faltas de ortografa. Oraciones completas.
condicionales. Reduce errores gramaticales o de Uso de puntos, comas y
Evita faltas de ortografa. estructura. maysculas.
Reduce errores gramaticales o de Presenta oraciones completas. Comete faltas de ortografa que
Presentacin escrita estructura. Emplea puntos, comas y impiden la comprensin.
del documento 20 Presenta oraciones completas. maysculas. Comete errores gramaticales o de
Emplea puntos, comas y estructura que impiden la
maysculas. comprensin.
Emplea uno o varios de los Emplea uno o varios de los Utiliza errneamente o no
siguientes modales: siguientes modales: emplea alguno de los siguientes
Must Must modales:
Mustnt Mustnt Must
Have to Have to Mustnt
Has to Has to Have to
Dont have to Dont have to Has to
Should Should Dont have to
Gramtica 30 Shouldnt Shouldnt Should
Need to Zero Conditional Shouldnt
Do not need to First conditional Utiliza errneamente o no
Ought to Emplea lxico relacionado con emplea uno o varios de los
Ought not to seguridad, derechos y obligaciones siguientes puntos gramaticales:
Zero Conditional laborales. Lxico relacionado con
First conditional Emplea instrucciones y simbologa honestidad y tica.
Second conditional en instructivos y etiquetas. Lxico relacionado con seguridad,
Third conditional
derechos y obligaciones
Emplea lxico relacionado con la laborales.
composicin de la WLAN.

Emplea lxico relacionado con Instrucciones y simbologa en
seguridad, derechos y instructivos y etiquetas.
obligaciones laborales.
Emplea instrucciones y
simbologa en instructivos y
etiquetas.
aspectos de orden, limpieza y aspectos de orden y limpieza. aspectos de orden y limpieza.
diseo amigable. Muestra responsabilidad al Muestra falta de
Muestra organizacin y entregar en la fecha responsabilidad al entregar en
responsabilidad al entregar en establecida por el docente. fecha posterior a la
Actitudes 20 fecha previa establecida por el Muestra perseverancia al establecida por el docente, u
docente. aprovechar los errores omite la entrega del trabajo.
Muestra perseverancia al marcados en actividades Muestra inconstancia al no
aprovechar los errores previas para mejorar su corregir errores marcados en
marcados en actividades trabajo. actividades previas.
previas para mejorar su
trabajo.
100

Mdulo: Alumno:
Resultado de 2.1 Redacta documentos laborales Actividad de evaluacin: 2.1.1 Redacta carta de solicitud de empleo en
Aprendizaje: empleando modelos de formatos ingls.
establecidos.
Escribe discurso con el formato Escribe discurso con el formato de Omite realizar el discurso con el
de carta con base en el diseo de carta con base en el diseo de formato de carta con base en el
Pgina Web acorde con el Pgina Web acorde con el diseo de Pgina Web.
siguiente orden de ideas: siguiente orden de ideas: Omite uno o varios de los
Referencia de anuncio de puesto Referencia de anuncio de puesto siguientes aspectos de orden de
ofertado. ofertado. ideas:
Expresin de inters en el puesto Expresin de inters en el puesto Referencia de anuncio de puesto
ofertado. ofertado. ofertado.
Motivos de inters personal del Motivos de inters personal del Expresin de inters en el puesto
puesto ofertado. puesto ofertado. ofertado.
Habilidades personales acorde Habilidades personales acorde con Motivos de inters personal del
con el puesto ofertado. el puesto ofertado. puesto ofertado.
Experiencia y/o elementos que se Planteamiento de opinin Habilidades personales acorde
pueden ofrecer a la empresa. personal sobre la carta de trabajo con el puesto ofertado.
Planteamiento de opinin en base al diseo de la Pgina Planteamiento de opinin
personal sobre la carta de trabajo Web. personal sobre la carta de trabajo
Elementos
en base al diseo de la Pgina Redacta carta bajo la siguiente en base al diseo de la Pgina
discursivos del texto 30 Web. estructura: Web.
oral Redacta carta bajo la siguiente Nombre del solicitante. Redacta la carta sin emplear uno
estructura: Datos personales de localizacin o varios de los siguientes
Nombre del solicitante. del solicitante. aspectos de estructura:
Datos personales de localizacin Fecha. Nombre del solicitante.
del solicitante. Tipo de carta. Datos personales de localizacin
Fecha. Dirigida a quien se considere. del solicitante.
Tipo de carta. Frase de encabezado. Fecha.
Dirigida a quien se considere. Introduccin e inters en el Tipo de carta.
Frase de encabezado. empleo. Dirigida a quien se considere.
Introduccin e inters en el Argumentos a favor del solicitante Frase de encabezado.
empleo. para obtener el empleo. Introduccin e inters en el
Argumentos a favor del Resumen de educacin y empleo.

solicitante para obtener el experiencia. Argumentos a favor del
empleo. Cierre. solicitante para obtener el
Resumen de educacin y Firma del solicitante empleo.
experiencia. Resumen de educacin y
Explicacin del inters personal experiencia.
por trabajar en dicho lugar as Cierre.
como lo que se conoce de la Firma del solicitante.
empresa empleadora.
Cierre.
Firma del solicitante.
Emplea formato de carta de Emplea formato de carta de Redacta la carta sin utilizar
solicitud de empleo con base en solicitud de empleo con base en el formato de carta de solicitud de
el diseo de la Pgina web. diseo de la Pgina Web. empleo con base en el diseo de
Elabora documento con una Elabora documento con una la Pgina Web.
extensin mnima de 1 cuartilla y extensin mnima de 1 cuartilla. Omite cubrir uno o varios de los
media y mxima de 2 cuartillas. Evita faltas de ortografa. siguientes aspectos:
Evita faltas de ortografa. Reduce errores gramaticales o de Extensin mnima de 1 cuartilla.
Reduce errores gramaticales o de estructura. Oraciones completas.
Presentacin escrita
estructura. Presenta oraciones completas. Uso de puntos, comas y
del documento 20 Presenta oraciones completas. Emplea puntos, comas y maysculas.
Emplea puntos, comas y maysculas. Comete faltas de ortografa que
maysculas. impiden la comprensin.
Comete errores gramaticales o de
estructura que impiden la
comprensin.
Emplea frase hecha para Emplea frase hecha para Utiliza errneamente o no
encabezados y desarrollo de encabezados y desarrollo de carta emplea uno o varios de los
carta laboral en base al diseo de laboral en base al diseo de siguientes aspectos de desarrollo
pgina Web. pgina Web. de carta de solicitud de empleo
Emplea frase hecha de Emplea frase hecha de en base al diseo de pgina Web:
introduccin para carta de introduccin para carta de Frase hecha para encabezado y
solicitud de empleo en base al solicitud de empleo en base al desarrollo.
diseo de pgina Web. diseo de pgina Web. Frase hecha de introduccin.
Gramtica 30 Emplea dos frases hechas de Emplea dos frases hechas de Frase hecha de argumentos.
argumentos para cartas de argumentos para cartas de
solicitud de empleo en base al solicitud de empleo en base al

diseo de Pgina Web. diseo de Pgina Web. Frase hecha para cierre.
Emplea frase hecha para Emplea frase hecha para cierre Complementa frases y
cierre de cartas de solicitud de de cartas de solicitud de oraciones sin emplear lxico y
empleo en base al diseo de empleo en base al diseo de estructura correspondiente.
Pgina Web. Pgina Web.
Emplea lxico relacionado con Complementa frases y
habilidades y conocimientos. oraciones con lxico y
Complementa frases y estructura correspondiente.
oraciones con lxico y
estructura correspondiente.
Complementa informacin Complementa informacin Complementa informacin
solicitada en el formato con su solicitada en el formato con su solicitada en el formato de
informacin personal. informacin personal. forma incompleta u omite su
Formato de Incluye informacin verdica. Incluye informacin verdica. complementacin.
solicitud de empleo 5 Adiciona carta de exposicin Omite informacin personal.
AUTOEVALUACIN de motivos para solicitar el Incluye informacin no
trabajo. verdica.
aspectos de orden, limpieza y aspectos de orden y limpieza. aspectos de orden y limpieza.
diseo amigable. Muestra responsabilidad al Muestra falta de
Muestra organizacin y entregar en la fecha responsabilidad al entregar en
responsabilidad al entregar en establecida por el docente. fecha posterior a la
fecha previa establecida por el Muestra perseverancia al establecida por el docente, u
docente. aprovechar los errores omite la entrega del trabajo.
Actitudes 15 Muestra perseverancia al marcados en actividades Muestra inconstancia al no
aprovechar los errores previas para mejorar su corregir errores marcados en
marcados en actividades trabajo. actividades previas.
previas para mejorar su
trabajo.
100

Mdulo: Alumno:
Resultado de 2.2 Describe acuerdos y fases especficas Actividad de evaluacin: 2.2.1 Redacta en ingls la elaboracin de un
Aprendizaje: acorde con la ocupacin laboral empleando producto.
voz pasiva. (HETEROEVALUACION)
Elabora un documento con base Elabora un documento en el cual Elabora un documento en el cual
en el diseo de una red se describan los siguientes se omitan alguno de los
inalmbrica en la cual se elementos: siguientes elementos:
describan los siguientes Red inalmbrica. Red inalmbrica.
elementos: Acciones a realizar para la Acciones a realizar para la
Producto seleccionado. instalacin de una red instalacin de una red
Acciones a realizar para la inalmbrica. inalmbrica.
instalacin de una red
Elementos inalmbrica.
discursivos del texto 20 Elabora una presentacin
oral empleando el presentador
grfico que incluya lo siguiente:
Mnimo de cinco diapositivas.
Actividad y procedimiento de la
instalacin de la red.
Imgenes que correspondan con
las fases de la instalacin.
Escribe el proceso en ingls. Escribe el proceso en ingls. Escribe sin cubrir uno o varios de
Evita errores de ortografa Evita errores de ortografa. los siguientes aspectos:
Reduce errores gramaticales o de Reduce errores gramaticales o de Escritura del proceso en ingls.
estructura. estructura. Evitar errores de ortografa
Utiliza oraciones simples y Utiliza oraciones simples y Reducir errores gramaticales o de
compuestas. compuestas. estructura.
Presentacin escrita
Presenta una extensin de dos Presenta una extensin mnima de Uso de oraciones simples y
del documento 20 cuartillas. una cuartilla. compuestas.
Expone de 10 a 15 pasos en la Expone de 6 a 9 pasos en la fase Extensin mnima
fase del proceso de instalacin de la instalacin de la red. Exposicin de los pasos
de la red inalmbrica. Cita una fuente bibliogrfica de requeridos de la fase de la
Cita dos o ms fuentes donde extrajo la informacin. instalacin de la red.
bibliogrficas de donde extrajo la Cita de fuente bibliogrfica de
informacin.
donde extrajo la informacin.
Utiliza voz pasiva. Utiliza voz pasiva. Utiliza errneamente o no
Utiliza complemento agente. Utiliza complemento agente. emplea uno o varios de los
Utiliza participio verbal. Utiliza participio verbal. siguientes puntos gramaticales:
Utiliza verbos transitivos. Utiliza verbos transitivos. Voz pasiva.
Utiliza tiempos verbales pasivos Utiliza tiempos verbales pasivos en Complemento agente.
en presente, pasado y futuro presente, pasado y futuro simple. Participio verbal.
simple. Utiliza conectores causa-efecto y Verbos transitivos.
Utiliza conectores causa-efecto y secuenciadores. Tiempos verbales pasivos en
Gramtica 40 presente, pasado y futuro simple.
secuenciadores. Emplea lxico relacionado con
Emplea lxico relacionado con fases de la instalacin de una red Conectores causa-efecto y
fases de la instalacin de una red inalmbrica. secuenciadores
inalmbrica. Lxico relacionado con
Emplea lxico relacionado con instalacin de redes inalmbricas.
procesos.
Entrega el trabajo cuidando Entrega el trabajo cuidando Muestra falta de responsabilidad

aspectos de orden, limpieza y aspectos de orden y limpieza. al entregar en fecha posterior a la
diseo amigable. Muestra responsabilidad al establecida por el docente, u
Muestra organizacin y entregar en la fecha establecida omite la entrega del trabajo.
responsabilidad al entregar en por el docente. Entrega el trabajo sin cuidar
fecha previa establecida por el Entrega el trabajo cuidando aspectos de limpieza y orden.
docente. aspectos de limpieza y orden. Muestra inconstancia al no
Entrega el trabajo cuidando Muestra perseverancia al corregir errores marcados en
aspectos de limpieza y orden. aprovechar la correccin de los actividades previas.
Muestra perseverancia al errores marcados en actividades
Actitudes 20 aprovechar la correccin de los previas para mejorar su trabajo.
errores marcados en actividades
previas para mejorar su trabajo.
Muestra respeto al cuidar y
emplear el material escolar segn
indicaciones establecidas.
100

Mdulo: Alumno:
Resultado de 2.2 Describe acuerdos y fases especficas Actividad de evaluacin: 2.2.2 Redacta en ingls un dilogo de
Aprendizaje: acorde con la ocupacin laboral empleando interaccin prestador de servicios-cliente.
voz pasiva.
Utiliza la estructura de dilogo de Utiliza la estructura de dilogo de Emplea errneamente o no
prestador de servicios-cliente con prestador de servicios-cliente con emplea la estructura de dilogo
cambio de toma de palabra. cambio de toma de palabra. de prestador de servicios-cliente
Elabora guin de conversacin Elabora guin de conversacin con con cambio de toma de palabra.
con base en la oferta de servicio base en la oferta de servicio Utiliza un tema distinto al
especfico que incluya lo especfico que incluya lo siguiente: establecido.
siguiente: Servicio que solicitara o prestara Omite uno o varios de los
Servicio que solicitara o prestara en su rea de especialidad. siguientes aspectos al elaborar
en su rea de especialidad. Lxico relacionado con guin:
Elementos Lxico relacionado con advertencia, peligro o riesgo. Servicio que solicitara o prestara
discursivos del texto 30 advertencia, peligro o riesgo. Fases de atencin al usuario en su rea de especialidad.
oral Lxico relacionado con conductas Complementa frases utilizadas con Lxico relacionado con
y procedimientos. lxico y estructura advertencia, peligro o riesgo.
Frases de atencin al usuario. correspondiente. Fases de atencin al usuario.
Complementa frases utilizadas Emite frases utilizadas con
con lxico y estructura lxico y estructura que no
correspondiente. corresponde impidiendo la
comprensin.
Pronuncia oraciones y frases Pronuncia oraciones y frases Pronuncia oraciones y frases
completas. completas. incompletas.
Presenta las acciones con una Presenta las acciones con una Presentas las acciones sin
secuencia lgica. secuencia lgica. secuencia lgica.
Existe cohesin y coherencia en Existe cohesin y coherencia en su Presenta un discurso sin cohesin
su discurso. discurso. ni coherencia.
Exposicin oral 30
Corrige lapsus de confusin o Corrige lapsus de confusin o Omite corregir lapsus de
error. error. confusin o error.

Utiliza cambio de toma de palabra. Utiliza cambio de toma de palabra. Utiliza errneamente o evita
Utiliza reformulacin. Utiliza reformulacin. utilizar cambio de toma de palabra.
Utiliza repeticin. Emplea errneamente e evita usar
Pronuncia con fluidez y sin pausas la reformulacin.
mayores a 5 segundos.
Utiliza voz pasiva. Utiliza voz pasiva. Utiliza errneamente o no emplea
Utiliza complemento agente. Utiliza complemento agente. uno o varios de los siguientes
Utiliza participio verbal. Utiliza participio verbal. puntos gramaticales:
Utiliza verbos transitivos. Utiliza verbos transitivos. Voz pasiva.
Utiliza tiempos verbales pasivos en Utiliza tiempos verbales pasivos en Complemento agente.
presente, pasado y futuro simple. presente, pasado y futuro simple. Participio verbal.
Utiliza conectores causa-efecto y Utiliza conectores causa-efecto y Verbos transitivos.
Gramtica 20 secuenciadores. secuenciadores. Tiempos verbales pasivos en
Emplea lxico relacionado con Emplea lxico relacionado con presente, pasado y futuro simple.
fases de produccin. procesos. Conectores causa-efecto y
Emplea lxico relacionado con secuenciadores.
procesos. Lxico relacionado con procesos.
Muestra organizacin y Muestra responsabilidad al entregar Muestra falta de responsabilidad al
responsabilidad al entregar en en la fecha establecida por el entregar en fecha posterior a la
fecha previa establecida por el docente. establecida por el docente, u omite
docente. Muestra perseverancia al la entrega del trabajo.
Muestra perseverancia al aprovechar los patrones de Muestra inconstancia al no corregir
aprovechar los patrones de tonalidad corregidos para mejorar errores de tonalidad marcados en
tonalidad corregidos para mejorar su actuacin oral. actividades previas.
su actuacin oral. Muestra respeto al cuidar y emplear Muestra falta de respeto al no
Actitudes 20 Muestra respeto al cuidar y el material escolar segn seguir las indicaciones establecidas
emplear el material escolar segn indicaciones establecidas. de uso y cuidado del material
indicaciones establecidas. escolar.
Muestra consideracin al cuidar la
audibilidad del material auditivo
entregado.
100

Techinal English Book

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Techinal English Book

Transféré par

Droits d'auteur :

Formats disponibles

2014

English State Academy 1|Page

In The State Development Plan 2011-2016 the state Governor Egidio

This is why I am thankful with the Conalep in our State, whom by

With high expectations I hope for the best relevant academic

I am sure that these didactic and academic materials constitute one of

Remember there are no achievements without effort. May you be very

Dr. Didoro Guerra Rodrguez

English State Academy 2|Page

For the success of this project we obviously depend on the English

Ing. Jos Guadalupe Ibarra Martnez

English State Academy 3|Page

II. HTML R.A. 1.1 8

IV. Wireless LAN R.A. 1.2 54

VI. CSS and JavaScript R.A. 2.1 72

VII. Glossary 154

VIII. Virtual LAN R.A. 2.2 158

IX. Glossary 177

English State Academy 4|Page

English State Academy 5|Page

English State Academy 6|Page

English State Academy 7|Page

English State Academy 8|Page

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language

HTML markup tags are usually called HTML tags

HTML tags are keywords (tag names) surrounded by angle

The !DOCTYPE declaration defines the document type

English State Academy 9|Page

The purpose of a web browser (such as

The browser does not display the HTML

Below is a visualization of an HTML page structure:

English State Academy 10 | P a g e

Writing Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:

Step 1: Start Notepad

To start Notepad go to:

Start All Programs Accessories Notepad

Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:

Step 3: Save Your HTML

Step 4: Run the HTML in Your Browser

The result should look much like this:

English State Academy 11 | P a g e

HTML headings are defined with the <h1> to <h6>

HTML paragraphs are defined with the <p> tag.

HTML links are defined with the <a> tag.

English State Academy 12 | P a g e

English State Academy 13 | P a g e

Tip: You will learn about attributes in the next chapter.

HTML Document Example

The example above contains 3 HTML elements.

The <p> element:

English State Academy 14 | P a g e

In the table below write the tags description on the line.

English State Academy 15 | P a g e

Always Quote Attribute Values

English State Academy 16 | P a g e

Headings Are Important

English State Academy 17 | P a g e

English State Academy 18 | P a g e

English State Academy 19 | P a g e

This text is bold

Often <strong> renders as <b>, and <em> renders as <i>.