Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Q. What is HTML? Explain various basic text formatting Tags. Ans
Document related concepts
Transcript
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
Q. What is HTML? Explain various basic text formatting Tags.
Ans: Linear text is a term used to describe any text where there is a defined beginning and a linear
progression to the end most books. Hyper Text is where the user simply selects the next information of interest
and is immediately transported to that new location.
HTML means Hyper Text Markup Language. HTML is based on SGML (Standard Generalized
Markup Language), a much bigger document-processing system. Original HTML was developed by Tim
Berners-Lee in 1990.
Every HTML Program has a standard structure. The entire web page is enclosed in <HTML> and
</HTML>, which are called open HTML tag and closed HTML tag. Within these tags two distinct sections are
created using <HEAD> tags and <BODY> tags.
<HTML>
<HEAD>
<TITLE> . . . </TITLE>
<META> . . . </META>
</HEAD>
<BODY>
...
<ADDRESS> . . . </ADDRESS>
</BODY>
</HTML>
• Head section provides about the title, base and Meta information.
• <TITLE> tag provides title for out web page. A title should be short and descriptive.
• <BODY> tag attribute takes formatted information of the web page and optionally contains
<ADDRESS> tag which provides footer information about the web page.
HTML Tags:
Tags are instructions that are embedded directly into the text of the document. An HTML tags begin
with an angle bracket [<] and end with a closing angle bracket [>]. HTML rags can be two types, paired tags
and singular tags.
A tag is said to be a paired tag if it has along with a companion end tag. The effects of the paired tag are
applied only to the text they contain. For example the <BODY> tag is paired tag. A singular tag does not have
a companion tag. These types of tags are also called as standard-alone tag. For example <BR> tag is singular
tag. HTML codes which are enclosed between brackets are not case sensitive. The first word or character that
appears inside the “<” opening bracket is called the element. An element is a command that tells the browser
to do something, such as <FONT>.
Word that follows the element and are contained inside the “>” bracket of the opening tag are called
Properties. Each property of an element is a pair or attribute and value. Properties are not repeated and are
separated by a space, each attribute is assigned a value by an equal sign. The value of the attribute is contained
in quotes.
E.g. <FONT COLOR =”BLUE”> This text would be blue </FONT>
Most HTML elements have more than one attribute
E.g. <FONT COLOR =”BLUE” SIZE = “+1”> This text would be blue and size larger than the normal
</FONT>
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 1
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
HEAD:
The HTML head tag defines a block where authors can declare information about the document, as the
title, description, keywords, etc., as well as other data that's not considered to be document content. Browsers
don't usually render this information (with the exception of the title). The head block is declared before the
body .
BODY:
The HTML body tag embeds all documents’ renderable content. Between these tags are all the visual
(for visual browsers) elements of the document.
Bgcolor: Defines a color to be used as a background.
Background: The value of this attribute refers to the location of an image resource, that will be used as
background. The image usually tiles the background.
Text: Sets the foreground color for text.
Link: Sets the color of text marking unvisited hypertext links
Vlink: Sets the color of text marking visited hypertext links.
Alink: Sets the color of text marking visited hypertext links.
FORMATTING TAGS:
When an HTML page is parsed by a browser, any formatting you may have done by hand-that is, any
extra spaces, tabs, returns, and so on-are all ignored. The only thing that formats an HTML page is an HTML
tag. If you spend hours carefully editing a plain text file to have nicely formatted paragraphs and columns of
numbers, but you don't include any tags, when you read the page into an HTML browser, all the text will flow
into one paragraph.
Paragraph Tag [<P>]
A blank line always separates paragraphs in the text. The tag provides this functionality is <P>. On
encountering this tag the browser, moves on to a new line, skipping one line between the previous line and the
new line.
The <P> tag always creates a simple, left-justified paragraph. You can change the justification of the
paragraph with the ALIGN attribute. To change the alignment of a paragraph, put the ALIGN statement in the
paragraph tag, followed by the type of justification you want. To create a right-justified paragraph, type <P
ALIGN=RIGHT>. To create a centered paragraph, type <P ALIGN=CENTER>. To create a paragraph that
is justified on both sides, type <P ALIGN=JUSTIFY>. You can also create a left-justified paragraph by
typing <P ALIGN=LEFT>.
By default, the Web browser will wrap lines of text to keep the entire paragraph in view. You have the
option of turning off word wrapping by including the NOWRAP command in the paragraph tag. To turn off
word wrapping in a paragraph, type <P NOWRAP >
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 2
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
Line Break [<BR>]
When text needs to start a new line and not continue on the same line, the <BR> tag should be used.
This tag simply changes line of the text and start on the next line without skipping a blank line.
Head Formals [<H1> to <H6>]
HTML supports Six different levels of headings. The highest level header format is <H1> and the
lowest level header <H6>. All the style appear in BOLD face and the size of the heading depends on the level
we chosen.
Drawing Lines [<HR>]
The Tag <HR> draws lines which are also called horizontal rules. This tag draws a horizontal line
across the whole page, where over it spread.
The attributes of the Horizontal rule tag are :
1. WIDTH: Sets the width of the rule. It can be set to a fixed number of pixels or to a percentage of the
available screen width.
2. Align: Align tag aligns the line on the browser screen. Which is by default align to the center of the
screen. Value of this attribute is LEFT, RIGHT, and CENTER.
TEXT STYLES:
• BOLD: To create bold text, insert <B> and </B> tags. Any text falling between these two tags will
appear in boldface type.
• ITALIC: To create italic text, insert an <I> tag in the document, followed by a </I> tag. Any text
between these two tags will be displayed in italics when viewed by a browser.
• UNDER LINE: Underlined text can be displayed using the <U> and </U> tag pair. You should use
these tags only when absolutely necessary, as underlined text is not widely supported by Web browsers.
• TYPEWRITER TEXT: To create text that is displayed in a monospaced font (such as Courier), use
the <TT> and </TT> tags. Text falling between these two tags will be displayed in a fixed- width font,
similar to the output from a teletype machine or typewriter.
• STRIKEOUT: To create strike-through text, which is text with a single horizontal line running
through it, use the <STRIKE> and </STRIKE> tags.
• SUPERSCRIPT AND SUBSCRIPT: You can also format text as either superscript or subscript,
which is text that appears slightly above or below the current line, respectively. Superscript and
subscript numbers are often used in mathematical equations or to indicate footnotes. Using the <SUP>
and </SUP> tags will mark text as superscript (slightly above the current line). <SUB> and </SUB>
will mark text as subscript (slightly below the current line).
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 3
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
PRE:
Preformatted text is a great way to create a quick and dirty table of data, such as names and phone
numbers. However, HTML 3.2 has full table support, and in most cases you'll want to use real tables whenever
possible. Another good use for the <PRE> and </PRE> tags is to display samples of Internet e-mail or
newsgroup posts in your HTML document. These messages often have specific layouts that are difficult to
reproduce in straight HTML. Just cut and paste the original message into Notepad and then place the <PRE>
and </PRE> tags at the beginning and end, respectively.
1. To begin a section of preformatted text, type <PRE>.
2. Now type the section of text exactly how you want it to appear. It's a good idea to limit the length of
your lines to 65 characters or less, so that you can accommodate the screen width of most browsers.
(Remember that browsers will not word wrap preformatted text.)
Q. Write about IMAGE tag in HTML. Explain about Image Mapping.
Ans : The two most common image file formats in use on the World Wide Web are GIF (.GIF) and JPEG
(.JPG) files. The GIF format is directly supported by every graphical Web browser, while JPEG is still gaining
acceptance as a standard image format on the World Wide Web. Although both GIF and JPEG files can be
used in your HTML documents, there are a few important differences between the two formats.
Images in HTML are included by using the <IMG> tag.
• To insert an image into your HTML document, type <IMG>. There is no closing </IMG> tag.
• You need to specify the URL of the image to load by placing the SRC (source) attribute within the
<IMG> tag. If you store your images in the same directory as your HTML files, the URL can simply be
the file name of the image. For example, to insert a GIF file named logo.gif into your HTML document,
you would type <IMG SRC="logo.gif">.
• To link to images that are not in the same directory as the HTML document, use relative URLs to
locate them. For example, if you stored the above logo.gif file in a subdirectory called images in your
HTML documents folder, you would type <IMG SRC="images/logo.gif">.
• The ALT attribute allows you to create alternate text for your image that will be shown to users who
have browsers that do not support graphics. Some browsers will also display the alternate text while the
image is loading. To specify the alternate text, type ALT=, followed by the text in quotes. For example,
adding alternate text would change the above image tag to <IMG SRC="images/logo.gif" ALT="The
LawnBirds, Inc. logo in stunning 3-D.">.
IMAGE MAPPINGS:
MAP was originally defined to take one or more AREA elements that specify the coordinates of a
clickable region on the image. HTML allows images in different documents to use the same MAP definition
from just one file, but many browsers do not support this and require the MAP and image elements to be in the
same document. The MAP element defines a client-side image map for use with an IMG. MAP's required
NAME attribute is used as an anchor for the USEMAP attribute of the IMG element.
MAP element to take one or more block-level elements as an alternative to using AREA elements.
The AREA element defines a map region in a client-side image map. Each map region is a piece of the
image that may have a different action when clicked.
The SHAPE and COORDS attributes of AREA specify what part of the image is included in the region.
The default SHAPE value is rect, which defines a rectangular region using COORDS="left, top, right, bottom".
Other SHAPE values are
•default, which specifies the entire image;
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 4
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
•circle, which specifies a circular region using COORDS="center-x, center-y, radius";
•poly, which specifies a polygonal region using COORDS="x1, y1, x2, y2, ..., xN, yN".
Coordinate values are relative to the top left corner of the object and may be expressed as pixels or
percentages. A percentage radius value for circular regions is calculated relative to the smaller of the object's
width and height. If two or more regions overlap, the earliest specified region takes precedence.
The HREF attribute specifies a link to another resource, such as an HTML document or a JPEG image.
The TITLE attribute can be used to briefly describe the contents of the link and is rendered as a "tooltip" by
some visual browsers. The Boolean NOHREF attribute indicates that the region has no link.
The TARGET attribute is used with frames to specify the frame in which the link should be rendered. If
no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special
frame names begin with an underscore:
•_blank renders the link in a new, unnamed window
•_self renders the link in the current frame (useful for overriding a BASE TARGET)
•_parent renders the link in the immediate FRAMESET parent
•_top renders the link in the full, unframed window
In HTML 4, the TARGET attribute value is case-insensitive, so that _top and _TOP both have the same
meaning. However, most browsers treat the TARGET attribute value as case-sensitive and do not recognize
_TOP as having the special meaning of _top.
Q. How to create LISTs in HTML? Explain various types of lists.
Ans: The environment of the Web calls for information to be presented in a concise and timely manner.
There unordered lists, ordered (numbered) lists, and a special type of list known as a definition list.
All the lists are formatted by a principle quote to specify what sort of list can be created (OL-ordered
list, UL- unordered list, and DL-definition list) and a secondary quote to specify what sort of item (LI-list item,
DT- Definition term) we want to create.
Unordered Lists:
The simplest list in HTML is the unordered, or bulleted, list. This is ideal for listing items that have no
particular hierarchy or order of importance. Unordered lists are very common on the Web and are used to
convey items of note in a quick and concise manner. Web browsers usually place bullets or other markers in
front of each item in an unordered list.
Begin the unordered list by typing <UL>, and then press Enter. The <UL> tag tells the Web browser to
treat this section of text as an unordered list. Unordered lists will usually be indented from the main document
and list items will be formatted with bullets. The size and type of bullets used are determined by the Web
browser.
To create the first item in your list, type <LI>. Then type the text of the item itself. <LI> is an open
tag, which means that you do not need to type </LI> at the end of each item. Continue typing <LI> followed
by text for each item in your list. Press Enter after each item. Finish the unordered list by typing </UL>.
<UL> tag type attribute is used to specify the type of the list by TYPE attribute, possible values of type
are disc (to draw a filled circle which is a default one), circle (to draw a non filled circle) and square (to draw
non filled square). Nesting order of the list will be disc, circle then square by default.
Ordered Lists:
An ordered (numbered) list items begin by typing <OL>, and then press Enter. The <OL> tag tells the
Web browser to treat this section of text as an ordered list. Ordered lists will usually be indented from the main
document and list items will be formatted with numbered automatically. You have the choice of setting the
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 5
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
TYPE attribute to one of the five number styles. Specify bullet type by adding type=followed by one of: "1 a A
i I".
You can also specify a start number of an order list. The value of the START attribute is always an
Arabic Numbers. Specify starting number by adding start=#. You can also change the sequence of list order in
middle by specifying new value with VALUE attribute of <li>.
Definition List:
Definition list is different from others. Each item in DL consists of one or more Definition Terms (DT
element), followed by one or more Definition Description (DD element), the definition is always placed on the
next line to emphasize the relation.
Note: You can next the list by inserting UL, OL etc., inside a list item (LI).
Q. Write short notes on FRAMEs in HTML.
Ans: FRAMES: By dividing a page, called Frameset into frames we can allow visitor to see more than one
page at a time. Each frame contains its own web page. A Frame set is a window which contains individual
panes. Each pane shows different information. We can design as many panes as we required, set the name,
size, borders and scrollbars of each pane. We can assign frame contents using URL.
The HTML tag recognizable unique regions using the <FRAMESET>…</FRAMESET> tags. The
<FRAMESET> tag require one of the two attributes ROWS/COLS depending on whether the screen has to be
divided rows or columns or both. Once the browser screen is divided into rows and columns, each unique
section defined can be loaded with <FRAME> tag, which can take attributes.
Src : This attribute defines the address of the initial content for the frame.
Name : Assigns a name to the frame. This name may be used as the value of the "target" attribute in
links and forms.
Border : Decides if a border (separator) will be drawn for this frame. The value "1" tells the browser to
draw a border for this frame, while the value "0" not to draw it. Note thatfor two adjacent frames, both
"frameborder" attributes must be set to "0" if you want the border between them to be invisible.
Marginheight: Specifies the distance between the left margin and the content, as well as the distance
between the right margin and the content.
Marginwidth: Specifies the distance between the top margin and the content, as well as the distance
between the bottom margin and the content.
Noresize : When present, this attribute indicates that users should not be able to change the frame's
size.
Scrolling : Decides how scrolling will be shown for this frame. Possible values are auto, yes and no.
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 6
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
Sample Code:
Q. Write about HTML FORMs.
Ans: A form is an area that can contain form elements. Form elements are elements that allow the user to
enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.
<form>
.
input elements
.
</form>
Input:
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The
most commonly used input types are explained below.
Text Fields:
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form> First name:<input type="text" name="firstname" /><br />
Last name:<input type="text" name="lastname" />
</form>
The width of the text field is 20 characters by default.
Password Field:
Password fields are used when user want to type letters, numbers, etc. And at the same time
information typed by the user can’t be displayed, they are masked with a character. In a form <input
type="password" /> defines a password field: The characters in a password field are masked (shown as
asterisks or circles).
<form> Password: <input type="password" name="pwd" /> </form>
How the HTML code above looks in a browser:
Password:
Radio Buttons:
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form> <input type="radio" name="sex" value="male" /> Male
input type="radio" name="sex" value="female" /> Female </form>
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 7
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
Checkboxes:
Checkboxes are used when you want the user to select one or more options of a limited number of
choices.
<form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" />
I have a car:<input type="checkbox" name="vehicle" value="Car" />
</form>
Submit:
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:
<input type="submit" value="Send form">
How it looks in a browser:
Without value the submit button look like this
Reset:
A ‘reset’ button resets all controls in the form, clearing the user input and returning controls to their
initial values.
<input type="reset" value="Reset form">
How it looks in a browser
Select control element:
This control offers the user a pull-down menu option from which to choose one option.
<select name="age">
<option>18-40</option>
<option>41-65</option>
<option>65 upwards</option>
</select>
When used with the size attribute, the select control renders as a multi-select scrolling list that displays the
number of entries that is specified as the value of the size attribute.
Textarea:
This element creates a multi-line input control, allowing users to type in and view
larger amounts of data. The author specifies the geometry of the area by including
the ‘rows’ and ‘cols’ attributes.
<textarea name="furtherdetails" rows="6" cols="30"></textarea>
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 8
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
Button:
The <button> tag defines a push button. A button is marked up as follows:
<button type="button">Click Me!</button>
Inside a button element you can put content, like text or images. This is the difference between this
element and buttons created with the input element.
Fieldset:
The <fieldset> tag is used to logically group together elements in a form. The <fieldset> tag draws a box
around the related form elements. The <legend> tag defines a caption for the fieldset element.
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
Q. What is CSS? Explain various ways of writing CSS. Explain various properties used in CSS.
Ans:
CASCADING STYLE SHEETS (CSS):
• CSS lets us to assign several properties at once to all the elements
• It is a set of formatting instructions
• Common format for all web pages
• Saves Time
• Easy to Change
• Easy to apply
• Overrides earlier definitions
• Controls text in a way that HTML cannot.
There are three mechanisms to apply CSS
1. Inline Style Sheets
2. Internal Style Sheets
3. External Style sheets
INLINE STYLE SHEETS:
Style information can be included inline i.e. within the tag of HTML elements. It can also be called as
local styles. All style elements are declared with in the
<BODY> tag.
Syntax:
STYLE = “ declaration “
Declaration => property: value
Ex:
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 9
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
<BODY>
<P STYLE=”font-family:Arial”> NRIIT </P>
<BODY>
INTERNAL STYLE SHEETS:
Internal styles are ideal for individual pages. Style information can be embedded directly with in the
document by using the <STYLE> tag.
Syntax:
<STYLE>
SELECTOR{ declarator} ….
</STYLE>
SELECTOR can be any HTML element
Ex:
<HEAD>
<STYLE>
H1{color:red}
</STYLE>
</HEAD>
EXTERNAL STYLE SHEETS:
External style sheets are ideal for giving all the pages on our web site a common look. External style
sheet is separate web document which has style definitions, and has an extension “.css”. This external style
sheet can be linked to any web documents via a URL.
Style document:
<STYLE>
H2{color:blue}
H3{background : yellow}
</STYLE>
• This document should be saved by giving extension as “.css”
• Linking of external document to our present web document can be done as
<HEAD>
<LINK REL=stylesheet TYPE=”text/css” HREF=”css file path”>
</HEAD>
CLASS AND ID SELECTORS:
Any element of the HTML document may have a class associated with it. A class or id gives ability to
apply specific patterns the same selector.
Ex:
<HTML>
<HEAD>
<STYLE>
P.in{color: red}
</STYLE>
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 10
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
</HEAD>
<BODY>
<P> SRTIST </P>
<P class=in> welcome </P>
</BODY>
</HTML>
• Class can also be declared so that it apply to all selectors,
.in{color:blue}
Use:
<H1 class=in> SRTIST</H1>
<P class=in>welcome</p>
• We can also use # decelerator and access it by ID.
• For flexibility we can also use SPAN and DIV tags
CSS Selectors, Properties, and Values
For each selector there are 'properties' inside curly brackets, which simply take the form of words such
as color, font-weight or background-color.
A value is given to the property following a colon (NOT an 'equals' sign) and semi- colons separate the
properties.
body {
font-size: 0.8em;
color: navy;
}
• This will apply the given values to the font-size and color properties to the body selector.
• So basically, when this is applied to an HTML document, text between the body tags (which is the
content of the whole window) will be 0.8 ems in size and navy in color.
Lengths and Percentages
There are many property-specific units for values used in CSS.
• em em is the unit for the calculated size of a font. So "2em", for example, is two times the current font
size(such as font-size: 2em).
• px px is the unit for pixels(such as font-size: 12px).
• pt pt is the unit for points(such as font-size: 12pt).
• % % is the unit for percentages(such as font-size: 80%).
• Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches). When a value is
zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be
border: 0.
Colors:
CSS brings 16,777,216 colors. They can take the form of a name, an rgb (red/green/blue) value or a hex code.
Red)
•
•
•
Is the same as rgb(255,0,0)
Which is the same as rgb(100%,0%,0%)
Which is the same as #ff0000
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 11
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
• Which is the same as #f00
There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white, and yellow.
The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the
three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966
etc.). The three-digit version is easier to decipher (the first digit, like the first value in rgb, is red, the second
green and the third blue) but the six-digit version gives you more control over the exact colour.
‘color’ and ‘background-color’:
Colours can be applied by using color and background-color (note that this must be the American English
'color' and not 'colour').
• A blue background and yellow text could look like this:
h1 {
color: yellow;
background-color: blue;
}
• These colours might be a little too harsh, so you could change the code of your CSS file for slightly
different shades:
body { font-size: 0.8em;color: navy; }
h1 { color: #ffc;background-color: #009; }
• You can apply the color and background-color properties to most HTML elements, including body,
which will change the colours of the page and everything in it.
Text:
You can alter the size and shape of the text on a web page with a range of properties, outlined below:
font-family
• This is the font itself, such as Times New Roman, Arial, or Verdana.
• The font you specify must be on the user's computer, so there is little point in using obscure fonts.
• There are a select few 'safe' fonts (the most commonly used are arial, verdana and times new roman),
but you can specify more than one font, separated by commas. The purpose of this is that if the user
does not have the first font you specify, the browser will go through the list until it finds one it does
have. This is useful because different computers sometimes have different fonts installed.
• So fontfamily: arial, helvetica, for example, is used so that similar fonts are used on PC (which
traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have arial and
so helvetica, which it does normally have, will be used).
• Note: if the name of a font is more than one word, it should be put in quotation marks, such as fontfamily: "Times New Roman".
font-size
• The size of the font. Be careful with this - text such as headings should not just be a paragraph in a
large font; you should still use headings (h1, h2 etc.) even though, in practice, you could make the fontsize of a paragraph larger than that of a heading.
font-weight
• This states whether the text is bold or not.
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 12
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
•
In practice this usually only works as fontweight: bold or font-weight: normal. In theory it can also be
bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900, but seeing as many browsers may not
support them, it's safer to stick with bold and normal.
font-style
• This states whether the text is italic or not. It can be font-style: italic or font-style: normal.
text-decoration
• This states whether the text is underlined or not.
• This can be: text-decoration: overline, which places a line above the text. text-decoration: line-through,
strike-through, which puts a line through the text. text-decoration: underline should only be used for
links because users generally expect underlined text to be links.
• This property is usually used to decorate links, such as specifying no underline with text-decoration:
none.
text-transform
• This will change the case of the text.
• text-transform: capitalize turns the first letter of every word into uppercase.
• text-transform: uppercase turns everything into uppercase.
• text-transform: lowercase turns everything into lowercase.text-transform: none
Text spacing:
• The letter-spacing and word-spacing properties are for spacing between letters or words. The value can
be a length or normal.
• The line-height property sets the height of the lines in an element, such as a paragraph, without
adjusting the size of the font. It can be a number (which specifies a multiple of the font size, so '2' will
be two times the font size, for example), a length, a percentage or normal.
• The text-align property will align the text inside an element to left, right, center or justify.
• The text-indent property will indent the first line of a paragraph, for example, to a given length or
percentage. This is a style traditionally used in print, but rarely in digital media such as the web.
p { letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center; }
Margins and Padding:
• margin and padding are the two most commonly used properties for spacing-out elements.
• A margin is the space outside of the element, whereas padding is the space inside the element.
h2 { font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em; }
• The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom,
margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory
properties you can use.
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 13
Web Technologies
III B.Tech II Sem (R09) CSE
UNIT-I
CSS Borders:
• Borders can be applied to most HTML elements within the body.
• To make a border around an element, all you need is border-style.
• The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.
• border-width sets the width of the border, which is usually in pixels. There are also properties for
border-top-width, border-right-width, border-bottom-width and border-left-width.
• Finally, border-color sets the colour.
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels wide
on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width
of the entire border).
More about style definitions:
• All declarations are case sensitive
• Declarations can be more than one, if we want to define more than one those can be separated by
semicolon. property1:value1; property2:value2;
• One property can take more than one value by blank space sepration property: value1 value2 value3;
• Same definitions can be applied to more than one selectors by using coma separator.
H1, b {....}
• We can establish dependence relation among definitions by separating dependent tag and parent tag just
by giving a space.
B U { .. }
Prepared by A. Sharath Kumar (M.Tech), Asst.Prof
Page 14
