Nothing Special   »   [go: up one dir, main page]

UNIT-II Introduction - HTML

Download as ppt, pdf, or txt
Download as ppt, pdf, or txt
You are on page 1of 53

WEB TECHNOLOGIES

WEB (WWW)

• World Wide Web (WWW) or Web or W3


▫ Created by Tim Berners-Lee (Timothy John Berners-Lee) in
1989
• Web is a software application that makes it easy to publish
and browse documents in internet.
• Internet ==WWW?
• Internet is a very large group of networked computers.
• The information on the Web is transported over the Internet.
• The Web runs on the HTTP Protocol.
URL(Uniform Resource Locator)

• A URL is a Web address that uniquely identifies a document.


▫ An image, an HTML file, audio tracks, videos, etc..,
• If the browser is successful in finding the page, the browser
will display it.
• HOW?
▫ How can the page be accessed?
• WHERE?
▫ Where can the page be found?
• WHAT?
▫ What is the file name corresponding to the page?
Cont…
• URL has 3 parts.
▫ HOW://WHERE/WHAT
• Example
▫ http://www.google.com/index.html
• HTTP (how):
▫ Defines the protocol or scheme by which to access the page.
• www.google.com (where):
▫ Identifies the domain name of the computer where the page
resides.
• Index.html ( what):
▫ Uniquely identifying the specific page.
▫ If no name is specified, a default file supplied by web server.
• The URL consists of a Protocol, a Web Server’s Name, and a
File Name.
HTML (HyperText Markup Language)
HTML

• HTML is a method of describing the format of documents


which allows them to be viewed on computer screens.
• Documents are displayed by the web browsers.
• HTML is not programming language, we can’t write HTML
program.
• HTML pages can be developed to be simple text or to be
complex multimedia containing sounds, moving images, etc..,
• The global publishing format of the Internet is HTML.
HTML History

• GML  SGML  HTML

• General Markup Language(GML)


▫ Developed by Charles Goldfarb, Edward Mosher and Raymond Lorie
in 1960’s
▫ In 1978 ANSI setup a Committee to investigate text processing
languages.
▫ Charles Goldfarb joined in that committee to extend GML.

• Standard General Markup Language (SGML)


▫ The first draft of SGML was released in 1980 and after series of
reviews SGML got Standard in 1985.
Cont…

• HTML
▫ The original version of HTML was released in 1993 with MOSAIC.
▫ The first HTML version 2.0 was released in 1994 and supported by
all browsers.
▫ Version 3.2 was released in 1996 with many useful additions.
▫ Version 4.0 was released by W3C in 1999.
▫ W3C (world wide web consortium), group of organizations and
individuals provides distributed standards for web technology.
Web Browser
• A web browser is an interface between user and the Internet.
• The browser not only sends messages to web servers to retrieve
page request , but also renders the HTML code once it arrives.
• Web browser interacts with a web server by HTTP protocol.
• Web browsers are two types:
▫ Graphical: Text, Images, Audio, and Video are retrievable.
▫ Netscape Navigator, Internet Explorer, Mozilla Firefox, Google
chrome, …
▫ Text: Text only mode
▫ Lynx

• MOSAIC: the first graphical web browser.


More about HTML

• HTML is a language which is used to create web pages/documents.


• Markup means set of tags.
• Text editor like NOTEPAD is used to write HTML source code.
• All HTML files have either .htm or .html as file extension.
▫ Example: gvpmca.html or gvpmca.htm
TAGS

• Any formatting text document is composed of set of elements such


as paragraphs, headings, lists, etc..,
• In HTML formatting is specified by using TAGS.
• Tags also called as LABELS.
• A TAG is a format name surrounded by angle brackets “< >”.
• Two types of tags:
▫ Opening tag: format name surrounded by angle brackets “< >”
▫ Closing tag: format name surrounded by angle brackets “< >” preceded
by forward slash “/”
▫ Example: <h1> MCA FIFTH SEM </h1>
TAGS cont…
• TAGS are not case sensitive.
▫ <head>, <HEAD>, <Head>

• Styles must be switched off by closing tag.


▫ <h1> MCA FIFTH SEM </h1>

• Some characters have to be replaced in the text by escape


sequences.
▫ < was not escaped, it is part of tag.
▫ To include that character in our code, replace it with escape sequences.

• White spaces, tabs and newlines are ignored by browser.


▫ Multiple white spaces are replaced by single space.
▫ Newlines and tabs are treated as spaces.
Structure of Basic HTML
<HTML> Entire Document is
surrounded by
<HEAD> <HTML>………</HTML>
Which tells the software
<TITLE> Title of the document </TITLE>that it is now processing
HTML
</HEAD>
<BODY>
<HEAD>………</HEAD>
…………………………… Body <BODY>………</BODY>
Sections are
…………………………… Section compulsory in all HTML
documents
</BODY>
</HTML>
EXAMPLE SOURCE EXAMPLE
TAGS cont…
Comment tag: used to write comments in the HTML source code. Comments are not executed
by the browser.
1. Single line comment tag : <! -- content -->
2. Multiple line comment tag: <! -- content line1 --
-- content line2 --
…………………………
-- content line n -- >
<HTML>….</HTML> Tag: Which tells the software that it is now processing HTML.
<HTML> shows starting of HTML page and </HTML> shows ending of the HTML page.
<HEAD>….</HEAD> Tag: contains head of an HTML document. Holds information
about the document, such as its title.
<TITLE>….</TITLE> Tag: gives the title of a web page.
title appears in the web browser’s title-bar.
TAGS cont…
<BODY>….</BODY> Tag: Describes the body section of HTML structure.
Contains the body of the HTML document, which includes creating web pages
like text, images, links, forms and etc..,
ATTRIBUTES: An attribute is a keyword, that we can use in opening tag to give
more information to the web browser.
BACKGROUND: used to set a background of a browser like an image.
BGCOLOR: used to set a color of the browser’s background
BOTTOM/LEFT/RIGHT/TOP MARGIN: Specifies the empty space of the
document, in pixels at desired positions.
TEXT: Specifies the color of the text in the document.
SCROLL: Specifies whether a vertical scroll bar appears to the right of the
document, can be YES(the default) or NO. SOURCE EXAMPLE
TAGS cont…
Header Tag: Header tags create the headlines in our web pages by displaying
bold text in a verity of sizes.
<H1>, <H2>, <H3>, <H4>, <H5>, and <H6>
<H1> is the highest level in size and <H6> is the lowest level heading.
SOURCE EXAMPLE
Font Tag: Sets the fonts on the web page where making text font bigger or
smaller, have different colors and have different styles.
Attributes:
COLOR: Sets the color of the text. REF:APPENDIX-A P#569

FACE: Sets the style of the text.


SIZE: Sets the size of the text.
SOURCE EXAMPLE
TAGS cont…
Text Formatting Tags:
Bold Tag: Sets the text style to bold. SOURCE
Syntax: <B>………..</B>
Italic Tag: Displays the text in italic form. EXAMPLE
Syntax: <I>………..</I>
Strikeout Tag: A Strikeout to be drawn through the text.
Syntax: <S>………..</S>
Underline Tag: Underlines the enclosed text.
Syntax: <U>………..</U>
Big & Small Tag: Makes the text to look BIGGER and SMALLER.
Syntax: <BIG>………..</BIG> & <SMALL>………</SMALL>

Sub & Sup Tag: Sets the text as SUBSCRIPT and SUPERSCRIPT.

Syntax: <SUB>………..</SUB> & <SUP>………..</SUP>


TAGS cont…
Center Tag: Aligns text in the center of web page.
Syntax: <CENTER>………..</CENTER>
Blink Tag: Causes the text to blink.
Syntax: <BLINK>………..</BLINK>
Line Break Tag: Inserts line break into a page. This tag not have the closing
tag. Syntax: <BR>
Paragraph Tag: Indicates the start of a new paragraph. Produces a single
blank line in between the two paragraphs.
Syntax: <P>………..</P>
Attribute: ALIGN: Sets the alignment of the text in the paragraph.
LEFT(Default), RIGHT, CENTER, and JUSTIFY.
Example: <P ALIGN=RIGHT>………………….</P>
TAGS cont…
Marquee Tag: displays the scrolling text in a marquee style.
Syntax: <MARQUEE>………..</MARQUEE>
Attributes:
ALIGN: Sets the alignment of the text to TOP(Default), MIDDLE, or
BOTTOM.
BEHAVIOUR: Shows how the text in the marquee tag should move.
SCROLL(Default), SLIDE(Text enters from one side and stops at other), or
ALTERNATE(text seems to bounce from one side to another).
BGCOLOR: Sets the background color for the marquee box.
DIRECTION: Sets the direction of the text for scrolling to LEFT(Default),
RIGHT, DOWN, or UP.
Ex: <marquee align=“middle” behavior=‘alternate”> MCA5 </marquee>
TAGS cont…
Horizontal Line Tag: Draws a horizontal line to separate items horizontally.
This tag not have the closing tag. Syntax: <HR>
Attributes:
ALIGN: Sets the alignment for line to either LEFT, RIGHT,
CENTER(Default).
COLOR: Sets the color of the line.
SIZE: Sets the size of the line.
Preformatted Text Tag: Marks the text as “preformatted” all the spaces and
carriage returns are rendered exactly as you type them.
Ex: <PRE> MCA 5TH SEM WEB TECHNOLOGIES </PRE>
SOURCE EXAMPLE
TAGS cont…
Escape Sequences:
& space < > “
&amp; &nbsp; &lt; &gt; &quot;
Escape sequences stars with an “ampersand(&)” and are terminated
with a “semicolon(;). REF:APPENDIX-C P#583
TAGS cont…
Image Tag: Displays an image on a page.
This tag not have the closing tag. Syntax: <IMG>
Attributes:
SRC: SRC stands for source. Specifies the URL of the actual image. This
attribute is compulsory.
ALT: Provides some piece of text that will be display if the image is not
loaded.
HEIGHT & WIDTH: defines height & width for an image.
Ex: <IMG SRC=“E:\mca.jpg” ALT=“MCA” HEIGHT=“50”
WIDTH=“50”>
SOURCE EXAMPLE
TAGS cont…
Link Tag(Hyperlink): Define links from one page to another.
An anchor is a term used to define a hyperlink . A hyperlink can point to
any resource on the web. (an HTML Page, an image, a sound file, etc..,).
Syntax: <A>……………..</A>
In HTML both images and text can act as anchors to link to any other
page.
Attributes:
HREF: Specifies the URL of the link file. This attribute is compulsory.
TARGET: Defines where the linked document will be opened.
Ex: <A HREF=“E:\WT MCA(2012)\UNIT-1 Programs\FORMAT.html”>
GVPMCA </A>
SOURCE EXAMPLE
TAGS cont…
Lists: Defines most effective way of structuring a web-site content.
HTML provides three types of lists:
The Basic Bulleted List (Un-Ordered List)
A Numbered List (Ordered List) A Definition List
The Basic Bulleted List (Un-Ordered List): <UL>……………..</UL>
The Un-Ordered List has a bullet in front of each list item. Every thing
between the tags must be encapsulated within <LI>…..</LI> tags.
Bullet can be specified by the TYPE attribute.
Attribute: TYPE: Specifies the type of bullet to either DISC, SQUARE,
CIRCLE.
List Item: <LI>……..</LI> The Ordered or Un-Ordered lists are made up
of set of list items. The list item may be text, image or hyperlink.
TAGS cont…
The Numbered List (Ordered List): <OL>……………..</OL>
An Ordered List has a number instead of a bullet in front of each list item.
Every thing between the tags must be encapsulated within <LI>…..</LI> tags.
Different numbering schemes can be specified by the TYPE attribute
depending upon preference.
Attributes: TYPE: Specifies the type of list item set to either
A (UPPERCASE LETTERS),
a (lowercase letters),
I (Large Roman Numerals),
i (Small Roman Numerals) or
1 (Numbering Scheme-Default)
TAGS cont…
START: A list can number from any value. The starting value is given by
the START attribute.
Definition List: <DL>……………..</DL> SOURCE
The definition Lists are different to the previous lists.
Don’t use list items to contain their members.
Elements with in definition list are either DEFINITION-TERM or
DEFINITION-DESCRIPTION.
Definition-Term: <DT>……..</DT> EXAMPLE
Marks items whose definition will be provided.
The closing tag is optional as it is assumed once <DD> tag is reached.
Definition-Description:<DD>…….</DD> definitions of terms.
The text of the definition is on the line below the preceding item.
TAGS cont…
Tables: Defines an another way to structuring web-site .
TABLE organizes data into rows & columns.
Two uses:
Structuring piece of information &
Structuring the whole web page.
<TABLE>……………..</TABLE>: Creates a table on web page.
Enclosed tags are: <TR>, <TH>, <TD>
Attributes:
ALIGN: Specifies the horizontal alignment of the table to LEFT (Default),
CENTER, or RIGHT.
BACKGROUND: Specifies the URL of background image for the table.
BGCOLOR: Specifies the background color for the table.
TAGS cont…
BORDER: Sets the border width between cells. If the border attribute is
not set, the table has no border.
BORDERCOLOR: Sets the external border color for the entire table.
COLS: Specifies number of columns in the table.
HEIGHT: Sets the height of the table.
WIDTH: Sets the width of the table.
CELLPADDING: Defines the space , in pixels, between the cell contents
and cell borders.
CELLSPACING: Defines the space , in pixels, between the cells.
Ex: <TABLE ALIGN=“CENTER” BGCOLOR=“SKYBLUE” BORDER=“2”
BORDERCOLOR=“BROWN” COLS=“4” HEIGHT=“40” WIDTH=“60”
CELLPADDING=“7” CELLSPACING=“6”>
TAGS cont…
TABLE ROW:<TR>……………..</TR>: Creates a row in the table.
Enclosed tags are: <TH> & <TD>
Attributes:
ALIGN: Specifies the horizontal alignment of the text in the table row to
LEFT (Default), CENTER, or RIGHT.
VALIGN: Specifies the vertical alignment of the text in the table row to
TOP(Default), CENTER, or BOTTOM.
BGCOLOR: Specifies the background color for the table row.
BORDERCOLOR: Sets the external border color for the table row.
Ex: <TR ALIGN=‘CENTER” VALIGN=“CENTER”
BGCOLOR=“GREEN”>
TAGS cont…
TABLE HEADING:<TH>……………..</TH>: Creates a table heading. It can
be used inside <TR> Tag.
Usually BOLD and CENTERED vertically & horizontally.
Attributes:
ALIGN, VALIGN, BGCOLOR, BORDERCOLOR.
COLSPAN & ROWSPAN: Allows individual cells to be larger than a one
by one grid.
TABLE DATA:<TD>……………..</TD>: Specifies the data for a table cell.
It can be used inside <TR> Tag.
Attributes: SOURCE
ALIGN, VALIGN, COLSPAN & ROWSPAN. EXAMPLE
TAGS cont…
Forms: Used to add an element of interactivity to a web-site.
An HTML form is a section of a document containing normal text and
special elements called CONTROLS.
FORM TAG:<FORM>……………..</FORM> : Creates a form, used to
enclose HTML controls.
A form tag can contain all other markup tags but can not be nested with
in another form.
Attributes:
ACTION: Specifies the name and location (URL) of the script that will
be used to process data.
METHOD: Data can be sent in one of two ways i.e. either by GET or
POST methods.
TAGS cont…
GET method is used to get or retrieve information from a server.(default)
POST method is used to sent the information to the server.
Ex: <FORM ACTION=“URL” METHOD=“POST”>…….</FORM>
FORM CONTROLS IN HTML:
TEXT TEXTAREA PASSWORD SUBMIT
RESET BUTTON CHECKBOX RADIOBUTTON
IMAGE SELECT FILE
Controls can create by using <INPUT> tag and TYPE attribute.
Attributes:
TYPE: Specifies what type of input control.
Ex: <INPUT TYPE=“TEXT”>
TAGS cont…
TEXT:<INPUT TYPE=“TEXT”>: Creates a text field that the user can enter
or edit text inside it and supports single line of text.
Attributes:
SIZE: Specifies the visible size for the text field. Size should be positive
integer.
MAXLENGTH: Specifies the maximum input size for the text field. Size
should be positive integer.
VALUE: Provides a string that will be used as default string.
Ex: <INPUT TYPE=“TEXT” SIZE=“20” MAXLENGTH=“15”
VALUE=“GVPMCA”>
TAGS cont…
TEXTAREA:<TEXTAREA>……….</TEXTAREA>: Creates a text area where
multiple lines of data can be entered.
Attributes:
ROWS: Specifies the no of rows in the text area. Size should be positive
integer.
COLS: Specifies the no of columns in the text area. Size should be
positive integer.
PASSWORD:<INPUT TYPE=“PASSWORD” >: Creates a password text
field. It works exactly like text but the input is not displayed to the
screen. Instead each character is replaced by * (an asterisk).
Attributes:
MAXLENGTH, SIZE, VALUE.
TAGS cont…
SUBMIT:<INPUT TYPE=“SUBMIT” >: Creates a button which displays the
value of value attribute as its text. It is used to sent data to server.
Attributes:
NAME: Specifies name of the control.
VALUE.
RESET:<INPUT TYPE=“RESET” >: Creates a button which is used to clear
the form controls data as default values.
Attributes:
NAME, VALUE.
TAGS cont…
BUTTON:<INPUT TYPE=“BUTTON” >: Creates a button on the form.
Attribute: VALUE.
CHECK BOX:<INPUT TYPE=“CHECKBOX” >: Check boxes are on/off
switches in a form. Checkboxes allows users to select the item.
Attributes:
CHECKED: Identifies that if a checkbox should appear checked initially
or not. NAME, VALUE.
RADIO BUTTON:<INPUT TYPE=“RADIO”>: Radio buttons are like
checkboxes except that when several share the same control name, they
are mutually exclusive.
when one is switched ON, all others with the same name are switched
OFF.
TAGS cont…
Attributes:
CHECKED: Identifies that if a radio button should appear checked
initially or not. NAME, VALUE.
IMAGE:<INPUT TYPE=“IMAGE”>: Used to place a picture on a page
instead of a button.
Attributes:
ALIGN, SRC, SIZE, VALUE.
SELECT TAG: <SELECT NAME=“…….” >: Creates a dropdown lists, where
the user can select choice from list.
Attributes: NAME, SIZE.
The SELECT tag will have several options, from which the user can
choose one.
TAGS cont…
OPTION TAG:<OPTION>……….</OPTION>: Used to insert options in Selection list.
<OPTION> tag is enclosed tag of <SELECT> tag.
Attributes:
SELECTED: It is a keyword, sets this option as initially chosen when the form
appears.
VALUE.
FILE :<INPUT TYPE=“FILE”>: Used to upload any file. Provides a text box that contains
a path of the uploading file when user selects any file and a browse button.
SOURCE EXAMPLE
TAGS cont…
Frames: Divides the page into TWO or MORE sections through
HORIZONTAL or/and VERTICAL partitioning.
Allows the users to view more than one HTML file in a single web page.
Earlier frames were called as Transitional.
Advantages:
Frame contains hyperlinks.
Ex: Frame is divides into two sections through vertical partition.
Click a hyperlink on the left page,
The corresponding page is loaded into the frame on the right
page. The link section of the left frame doesn’t change.
Frames are Customizable.
The user can resize the frame using mouse.
TAGS cont…
FRAMESET TAG: To have frames in web page we use the <FRAMESET> tag.
Attributes:
ROWS: Used to divide the window into rows (horizontal frames).
It is a comma-separated list of pixels, percentages, and relative lengths. The
default value is 100%, means one row.
<FRAMESET ROWS=“150, *”>……….</FRAMESET>
<FRAMESET ROWS=“40%, *”>……….</FRAMESET>
The Asterisk(*) denotes that the second frame occupies the remaining screen.
COLS: Used to divide the window into columns (vertical frames).
<FRAMESET COLS=“200, *”>……….</FRAMESET>
<FRAMESET COLS=“30%, *”>……….</FRAMESET>
TAGS cont…
FRAME TAG:<FRAME>……….</FRAME>: The frame tag contains set of references to HTML
files, displayed inside a separate frame.
Attributes:
SRC: Specifies the URL of the web-page. This attribute is compulsory.
NAME: Specifies name of the frame control. This name can be used as a target of subsequent
links.
SCROLLING: Specifies scroll information for the frame window.
Possible values:
AUTO: Displays the scroll bar in the browser when needed.
NO: Disable the scroll bar in the browser and is not displayed.
YES: Enables the scroll bar in the browser and is always displayed.
<FRAME SRC=“FORM.HTML” NAME=“F1”>
TAGS cont…
TARGET ELEMENT: The frame can contains the Hyperlinks. This hyperlink code
contains an anchor tag.
Ex: <A HREF=“FORM.HTML” TARGET=“F1”>
Target is an anchor element and form.html will be loaded in the frame whose
name is ‘f1’.
Target can be set to many values such as
“_blank” It displays the page in a new blank browser window.
“_self” It displays the page in the same browser window.
“_parent” It changes the frameset which encapsulate the current frame. “_top”
It enables the full browser window to display the requested page.
Ex: <A HREF=“FORM.HTML” TARGET=“_TOP”>
SOURCE EXAMPLE
CASCADING STYLE SHEETS
The STYLE SHEET improves HTML page formatting capability.
Best approach for creating attractive web pages.
Create a style of presentation to the whole document or a group
of elements or to a particular element.
Simplifies the work of the web designers.
In 1995 Bert Boas and Haakon Lie of W3C put a proposal to
work on style sheets.
Style sheets are part of HTML document.
Three Types of Style Sheets:
Inline Style
Embedded Style Sheet OR Internal Style Sheet
External Style Sheet
CASCADING STYLE SHEETS Selector
{
Property : value;
Syntax: }
Property : value;

Ex: p
The CSS Syntax is made up of two parts. {
background-color : red;
Color : blue;
Selector & Set of Declarations
}

A Selector is used to create a link between the rules and HTML tag.
The Declaration has two parts.
Property & Value
Selectors can be placed into classes so that a tag can be formatted in a
variety of ways.
Declarations must be separated using colon(:) and terminated using
semicolon (;).
The rule body begins and ends with curly braces ( { and } ) and values
are assigned to corresponding property.
CASCADING STYLE SHEETS
Classes:
The above method applies the same style to all paragraphs.
Use CLASSES to apply a separate style to some paragraphs.
Syntax:
Ex:
Selector . className p.mca
{
{ color : green;
Property : value; background-color : yellow;
}
Property : value;
<p class=“mca”> GVPMCA <p>
}
Apply this CLASS with in body section
<selector class=“className”>
CASCADING STYLE SHEETS
Anonymous Classes:
Sometimes we can apply a piece of formatting to different
elements with in a page.
Anonymous Classes in CSS provides a way of defining styles
with in reusable classes.
Syntax: <style>
<style> <!–
<!– . mca
{
. className
color : blue;
{ font-size :
Property : value; 24pt;
Property : value; }
} -->
--> </style>
</style>
CASCADING STYLE SHEETS
INLINE STYLE: The STYLE attribute is used to configure style information
specific to a single element with in a web page.
The style applies only to the element in which the attribute is defined.
Style attribute can be specified in the opening tag.
Ex:
<p style=“font-size : 32pt; font-family : Arial; color : green” >
some paragraph
</p>
<p >
some paragraph
</p>
CASCADING STYLE SHEETS
EMBEDDED STYLE SHEET: The STYLES are specified in the <STYLE> tag.
This <STYLE> element is included in the <HEAD> portion of
the document.
This will applicable for the entire web page.
Ex:
<html>
<head>
< style type=“text/css”>
p
{ font-size : 32pt; font-family : Arial;
color : green;
}
</style>
………………………….
CASCADING STYLE SHEETS
EXTERNAL STYLE SHEET: The name EXTERNAL specifies that the style
sheet is made externally and can be used by other web pages.
The STYLES are specified in a separate CSS file and can import it
into the current HTML document with the <LINK> element.
The external Style Sheet is available in a separate outside file
with an extension “.CSS”.
ESS are useful when all web-pages on web-site have the same
pattern of style.
The <LINK> element is included in the <HEAD> portion of the
document.
Ex:
<LINK REL=“STYLESHEET” HREF=“url” TYPE=“TEXT/CSS”>
CASCADING STYLE SHEETS
<LINK REL=“STYLESHEET” HREF=“url” TYPE=“TEXT/CSS”>
The .CSS file should not contain any HTML tags.
Do not leave spaces between the property, value and its Units.
Ex: margin-left:20 px; will work in IE
margin-left:20px; will work in Firefox.
Ex: MCA.CSS
SOURCE
CASCADING STYLE SHEETS
PROPERTIES AND VALUES IN STYLES:
Font:
font-family : <family-name>
font-style : normal / italic / oblique
font-size : small / medium / large
Backgrounds and Colors:
color : <value>
background-color : <value>
background-image : URL / none
Text:
text-decoration : none / underline / overline / line-through
text-transformation: none / capitalize / uppercase / lowercase
text-align : left / right / center / justify
text-indentation : length / percentage
CASCADING STYLE SHEETS
PROPERTIES AND VALUES IN STYLES: cont..,
Boxes:
margin : length / percentage / auto {1,2,4}
i.e. value should be 1,2,4
Ex: margin:5px 10px 5px 10px
4 -top, right, bottom, and left
2 -first will be applied to top and bottom
second will be applied to left and right
1 -applies to all four margins
border-width : thin / thick / medium / length
padding : length / percentage
border-color : <value>
border-style : none / dotted / dashed / solid / double
width : length / percentage
height : length / percentage
CASCADING STYLE SHEETS
PROPERTIES AND VALUES IN STYLES: cont..,
Lengths:
px : pixels
in : sizes in inches
cm : sizes in centimeters
mm : sizes in millimeter
pt : points where 1pt equals to 1/72 inches
pc : picas where 1 pc = 12 pt

SOURCE EXAMPLE

You might also like