Created by Glorioso
FTP clients – this is a utility that allows you to
ITEC87
transfer across the internet using the File Transfer
Protocol.
Lessson2
Advance Tools
Building Blocks of the Web
Web Editor
HTML (Hyper Text Markup Language)
Graphics Editor
Is the language of the Web that is used to define
the structure and the content of your webpage.
WHAT IS HTML?
CSS (Cascading Style Sheets)
HTML stands for Hyper Text Markup Language
Define how HTML elements are displayed
HTML is language for describing a web page
HTML is not a programming language, it is a
Clients Side Scripting
markup language
About “programming” the behavior of an internet A markup language is a set of markup tags
browser. HTML uses markup tags to describe web pages
JavaScript: interactive and programmable web
pages.
HTML Tags
HTML markup tags are usually called HTML tags
Server Side Scripting
HTML tags are keywords surrounded by angle
About “programming” an internet server. With
brackets like <tagname> content </tagname>
server side scripting, you can:
Dynamically edit, change or add any HTML tags normally come in pairs like <b> and
content of a Web Page </b>
Respond to user queries or data The first tag in a pair is the start tag, the second
submitted from HTML forms tag is the end tag
Access any data or databases and return Start and end tags are also called opening tags and
the results to browser closing tags
PHP Hypertext Preprocessor(PHP) –
dynamically create pages on a web server
Asynchronous JavaScript and XML
HTML Elements
(AJAX): accessing data for web
applications HTML elements are written with a start tag with
an end tag, with the content in between:
<tagname> content </tagname>
Database Technology
The HTML element is everything from the start tag
Such as a The Structures Query Language (SQL) – to the end tag: <p> My First HTML Documents
is the common standard for accessing databases </p>
such as SQL Server, Oracle, Sybase, and Access
HTML Documents
Tools Needed for Developing a website
All HTML documents must start with a type
Basic Tools declaration: <!DOCTYPE html>
Text Editor – which a program that allows you to The HTML document itself begins with <html> and
edit plain text files. You’ll use this to write your ends with </html>
web pages
The visible part of the HTML document is between
Web Browser – that’s the application you use to
<body> and </body>
view websites
1
Created by Glorioso
Basic Requirements of a Web Page HTML Headings are defined with the <h1> to
</h6>
Example:
<h1>This is a Heading</h1>
<h2>This is a Heading</h2>
<h3>This is a Heading</h3>
Note: Browsers automatically add some empty space (a
margin) before and after each heading.
<!DOCTYPE> declaration
helps the browser to display a web page correctly
Headings are Important
<html> tag
Use HTML headings for headings only.
defines the whole document
Don't use headings to make text BIG or bold.
<head> tag
Search engines use your headings to index the
defines the head element
structure and content of your web pages.
<title> tag
Since users may skim your pages by its headings, it
defines the title of a document or web page is important to use headings to show the
document structure.
<body> tag
H1 headings should be used as main headings,
defines the document body followed by H2 headings, then the less important
H3 headings, and so on.
A typical HTML Documents
PARAGRAPHS
<p> ....</p> tag delimits a paragraph.
HTML ignores most carriage returns in a file — so
must use <p> or <br> tag to get a newline in the
browser.
Text is wrapped until a <p> or </p> encountered.
Paragraphs can be aligned — left, center, right –
with the align attribute
Example:
Lesson3 <p>This is a paragraph.</p>
HTML - BASIC TAGS <p>This is a paragraph.</p>
LINE BREAK
The <br /> tag creates a line break or a new line.
The <br /> tag has a space between the characters
br and the forward slash.
If you omit this space, older browsers will have
trouble rendering the line break, while if you miss
the forward slash character and just use <br> it is
HTML HEADINGS
not valid in XHTML.
2
Created by Glorioso
The HTML <i> element defines italic text, without
any extra importance.
HORIZONTAL LINES
The HTML <em> element
The Horizontal lines are used to visually break-up
defines emphasized text, with added semantic
sections of a document.
importance.
The <hr /> tag creates a line from the current
NOTE:
position in the document to the right margin and
breaks the line accordingly. There is a difference in the meaning of these tags:
The <hr /> element has a space between the <b> and <i> defines bold and italic text,
characters hr and the forward slash.
but <strong> and <em> means that the text is
If you omit this space, older browsers will have
"important".
trouble rendering the horizontal line, while if you
miss the forward slash character and just use <hr>
it is not valid in XHTML
HTML Underlined Text
Anything that appears within <u>...</u> element,
HTML COMMENTS is displayed with underline
Comment tags <!-- and --> are used to insert
comments in HTML.
HTML Smaller Text
Comments are not displayed by the browser, but
they can help document your HTML. The HTML <small> element defines small text:
With comments you can place notifications and The content of the <small>...</small> element is
reminders in your HTML: displayed one font size smaller than the rest of the
text surrounding
Example:
<!-- This is a comment -->
HTML Larger Text
<!-- Write your comments here -->
The content of the <big>...</big> element is
displayed one font size larger than the rest of the
text surrounding.
Lesson4
HTML MARKED Formatting
HTML FORMATTING
The HTML <mark> element defines marked or
If you use a word processor, you must be familiar
highlighted text
with the ability to make text bold, italicized, or
underlined; these are just three of the ten options Anything that appears with-in <mark>...</mark>
available to indicate how text can appear in HTML element, is displayed as marked with yellow ink.
and XHTML.
HTML Strike Text
BOLD AND STRONG
Anything that appears within <strike>...</strike>
The HTML <b> element defines bold text, without element is displayed with strikethrough, which is a
any extra importance. thin line through the text
The HTML <strong> element defines strong text,
with added semantic "strong" importance.
HTML Subscript
The HTML <sub> element
ITALIC AND EMPHASIZED defines subscripted text.
3
Created by Glorioso
The content of a <sub>...</sub> element is written Attribute names and attribute values are case-
in subscript; the font size used is the same as the insensitive.
characters surrounding it, but is displayed half a Attributes usually come in name/value pairs like:
character's height beneath the other characters. name="value"
HTML Superscript
The HTML <sup> element
defines superscripted text.
The content of a <sup>...</sup> element is written
in superscript; the font size used is the same size
as the characters surrounding it but is displayed
half a character's height above the other
characters.
INSERTED AND DELETED TEXT
Anything that appears within <ins>...</ins> CORE ATTRIBUTES
element is displayed as inserted text.
The four core attributes that can be used on the majority of
Anything that appears within <del>...</del> HTML elements (although not all) are:
element, is displayed as deleted text.
ID ATTRIBUTES
HTML “Computer Output” Tags
The id attribute of an HTML tag can be used to
<code> Defines computer code text uniquely identify any element within an HTML
page.
<kbd> Defines keyboard text
1. If an element carries an id attribute as a unique
<samp> Defines sample computer code identifier, it is possible to identify just that element
<var> Defines a variable and its content.
2. If you have two elements of the same name within
<pre> Defines preformatted text a Web page (or style sheet), you can use the id
attribute to distinguish between elements that
have the same name
HTML ATTRIBUTES
An attribute is used to define the characteristics of
TITLE ATTRIBUTES
an HTML element and is placed inside the
element's opening tag. The title attribute gives a suggested title for the
element. They syntax for the title attribute is
All attributes are made up of two parts: a name
similar as explained for id attribute:
and a value:
The name is the property you want to set. For
The behavior of this attribute will depend upon
example, the paragraph <p> element in the
the element that carries it, although it is often
example carries an attribute whose name is align,
displayed as a tooltip when cursor comes over the
which you can use to indicate the alignment of
element or while the element is loading.
paragraph on the page.
The value is what you want the value of the
property to be set and always put within CLASS ATTRIBUTES
quotations. The below example shows three
possible values of align attribute: left, center and The class attribute is used to associate an element
right. with a style sheet, and specifies the class of
4
Created by Glorioso
element. You will learn more about the use of the
class attribute when you will learn Cascading Style
Sheet (CSS).
The value of the attribute may also be a space-
separated list of class names.
STYLE ATTRIBUTE
The style attribute allows you to specify Cascading
Style Sheet (CSS) rules within the element.
