HTML By K.Sasidhar

K.Sasidhar

WEB TECHNOLOGIESWEB TECHNOLOGIES

By

K. SasidharHyderabad.

K.Sasidhar

IntroductionIntroductionWEB ?A collection of documents inter-linked by

hyperlinks is called a web.A web page contains hyper text information

system

WWW ?World wide web is a global hypertext

system that uses the internet as its transmission medium

K.Sasidhar

Hyper Text ?The text embedded with another units of

text. Hyperlinks are embedded into the text.

HyperlinkHyperlink is an underlined or emphasized

word that when clicked displays another document.

K.Sasidhar

Clicking on those links activates the necessary protocols and pulls up the chosen web site.

Browsing ?The process of navigating among the

documents is called as browsing.Web Browser ?A program that runs on an computer and

provides access to WWW resources

K.Sasidhar

Browser Types ?1. Text only Browsers2. Graphical Web Browsers

Text only browsers does not provide GUI features and not user friendly.

Ex: Lynx on Unix shell os

K.Sasidhar

Graphical web browsers provide inline images, fonts and document layouts.

Much user friendly.Ex: Internet Explorer Mozilla fire fox Google chrome Netscape Navigator

K.Sasidhar

Web SiteWeb SiteA website runs a web server and has

been setup for publishing documents.

Web Server ?Is a program that accepts requests from

users for information framed according to the HTTP.

The server processes these requests and sends the requested documents.

K.Sasidhar

Finally Web Technologies ?Melding of Technologies Internet TechnologyHTMLJavaScriptJavaCORBAMultimedia Tools – FlashDatabase ConnectivityClient - Server Programming

K.Sasidhar

More ……JSPAjaxFlexNet BeansPHP etc…

K.Sasidhar

HTML ?

Tim Berners- Lee designed HTML

Hyper Text Markup LanguageA markup language is a set of

markup tagsThe purpose of the tags are

to describe page content

K.Sasidhar

HTML TagsHTML 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 tagThe end tag is written like the start tag, with

a forward slash before the tag nameStart and end tags are also called opening

tags and closing tags

K.Sasidhar

HTML Page Structure <html><head> </title>Program Ex. </title></head><body><h1>This a Heading</h1><p>This is a paragraph.</p><p>This is another paragraph.</p></body></html>

K.Sasidhar

Tags list Heading Elements

<h1>Largest Heading</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5>

<h6>Smallest Heading</h6>

K.Sasidhar

Text Elements

<p>This is a paragraph</p><br /> (line break)<hr /> (horizontal rule)<pre>This text is preformatted </pre>

Logical Styles <em>This text is emphasized</em>

<strong>This text is strong</strong><code>This is some computer code </code>

K.Sasidhar

Text Elements continue…..Physical Styles<b>This text is bold</b>

<i>This text is italic</i> <u>This text is underlined</u> <sub>Defines subscripted text<sup>Defines superscripted

K.Sasidhar

Font <font>With this tag we can use the following

attributes face / style / name Color – for different colors details watch

colors word file Size

K.Sasidhar

HTML Hyperlinks (Links)A hyperlink (or link) is a word, group of words, or

image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified using the <a> tag.The <a> tag can be used in two ways:To create a link to another document, by using the

href attributeTo create a bookmark inside a document, by using

the name attribute

K.Sasidhar

Link Syntax<a href="url">Link text</a> Ex: <a href="http://www.sreenidhi.edu.in /">

Visit Sreenidhi</a>

K.Sasidhar

ListsListsNumbered / Ordered ListsBulleted / Unordered ListsGlossary ListsMenu ListsDirectory Lists

K.Sasidhar

Numbered ListsNumbered Lists<ol type =1><li></li></ol>

K.Sasidhar

Unordered ListsUnordered Lists<ul type=“square”><li></li></ul>

K.Sasidhar

Glossary listGlossary listContains a term & its verbose definition<dl> def.list<dt> def.term<dd> def. description</dt></dl>

K.Sasidhar

Menu ListMenu List<menu></menu>Directory list<dir></dir>

K.Sasidhar

Imagesimages are defined with the <img> tag To display an image use the src attribute. src

stands for "source". <img src="url" alt="some_text"/> <img src=“flower" alt=“lilly flower" /> Attributes of image are: width, height & border

K.Sasidhar

framesTo divide the document into frames Use <frameset> tagSyntax: <frameset rows=“30%,70%”><frameset cols =“30%,70%”>

K.Sasidhar

Frames exampleEx: <html> <head> <frameset cols =“30%,70%”> <frame src= “filename.html” name=“f1”> <frame src= “filename.html” name=“f2”> </frameset></head></html>

K.Sasidhar

TablesTablesTable Tag contains code for caption, headings, data values.<table> </table>caption: Describes the contents of table <tr> table row<th> table heading<td> table data Attributes: border, rowspan, colspan Caption, alignment

K.Sasidhar

Ex:Ex:<TABLE border=2> <CAPTION>MARKS LIST</CAPTION><TR><TH>HTNO</TH><TH>MARKS</TH></TR><TR><TD>100</TD><TD>95%</TD></TR><TR><TD>101</TD><TD>87%</TD></TR>

K.Sasidhar

FormsFormsHTML forms are used to pass data to the

server.A form can contain the following

components1. Text Field 2. Password field 3. Radio

Button 4. Checkbox 5. Button 6. Submit Button 7. Reset Button 8. Select (list) Box

9.TextArea 10. File type.

K.Sasidhar

Forms continue….The <form> tag is used to create an

HTML formThe Input Element is the most important

form element.The input element is used to select user

information.An input element can vary in many ways,

depending on the type attribute.

K.Sasidhar

Input elementAn input element can be of type text

field, checkbox, password, radio button, submit button, and more

Ex: <form>

First name: <input type="text" name="firstname" /><br />

Last name: <input type="text" name="lastname" />

</form>

K.Sasidhar

Ex2:Password Field<input type="password" /> defines a

password field:<form>

Password: <input type="password" name="pwd" /></form>

K.Sasidhar

Radio Buttons

<form><input type="radio" name=“gender" value="male" /> Male<br /><input type="radio" name=“gender" value="female" /> Female</form>

K.Sasidhar

Checkboxes

<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>

K.Sasidhar

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>

K.Sasidhar

HTML Form TagsTagDescription<form> Defines an HTML form for user. input <input/>Defines an input control <textarea>Defines a multi-line text input control<label>Defines a label for an input Element<fieldset>Defines a border around elements in a form<legend>Defines a caption for a fieldset element<select>Defines a select list (drop-down list)<optgroup>Defines a group of related options in a

select list<option>Defines an option in a select list <button>Defines a push button

K.Sasidhar

EntitiesEntities

< is the same as <> is the same as >© is the same as ©

K.Sasidhar

Cascading Style Sheets (CSS)CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

K.Sasidhar

CSS SyntaxA CSS rule has two main parts: a selector, and one or more declarations: H1 { color: blue; font-size:12px;}H1 selectorColor is property and blue is value CSS declaration always ends with a ;

(semicolon) and delegation groups are surrounded by curly braces.

K.Sasidhar

CSS EX:P{color:red; text-align:center;}

K.Sasidhar

Types of CSS

External style sheetInternal style sheetInline style

K.Sasidhar

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>

K.Sasidhar

Internal style sheet An internal style sheet should be used when a single

document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

K.Sasidhar

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

K.Sasidhar

CSS BackgroundCSS properties used for background

effects:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

K.Sasidhar

CSS TextThe 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

K.Sasidhar

Ex: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:

K.Sasidhar

Examples H1{text-decoration:overline;}H2{text-decoration: line-through}H3{text-decoration: underline}H4{text-decoration: blink}

K.Sasidhar

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}

K.Sasidhar

Text Indentation

The text-indentation property is used to specify the indentation of the first line of a text

Ex: p {text-indent:50px;}

K.Sasidhar

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Special for links are that they can be styled differently depending on what state they are in.

The four links states are:a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user mouse moves

over ita:active - a link the moment it is clicked

K.Sasidhar

Ex:a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /*selected link */

K.Sasidhar

Background Colora:link {background-color:#B2FF99;}

a:visited {background-color:#FFFF85;}a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;

Different List Item

Markersul.a {list-style-type: circle;}ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}Imageasexample.html

K.Sasidhar

Table Borderstable, th, td

{border: 1px solid black;}

Borders.htmlTable Colortable, td, th

{border:1px solid green;}th{background-color:green;color:white;}

K.Sasidhar

The CSS 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.

K.Sasidhar

Ex for Box Model

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 appearBoxmodel.html

K.Sasidhar

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

K.Sasidhar

Margin Ex:margin-top:100px;

margin-bottom:100px;margin-right:50px;margin-left:50px;

K.Sasidhar

Border Styleborder-style values:none: Defines no borderdotted: Defines a dotted borderdashed: Defines a dashed border solid: Defines a solid borderdouble: 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 valueoutset: Defines a 3D outset border. The effect depends

on the border-color value

K.Sasidhar

Border Width

The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

Ex: p.one{border-style:solid;border-width:5px;}p.two{border-style:solid;border-width:medium;}

K.Sasidhar

Border ColorThe 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"

K.Sasidhar

Ex:p.one

{border-style:solid;border-color:red;}p.two{border-style:solid;border-color:#98bf21;}

K.Sasidhar

Border - Individual sides

EX:p

{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;}

K.Sasidhar

CSS Padding The CSS padding properties define the space

between the element border and the element content

PaddingThe 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.

Ex: padding-top:25px;

padding-bottom:25px;padding-right:50px;padding-left:50px;

K.Sasidhar

CSS Grouping In style sheets there are often elements with the same

style. h1

{color:green;}h2{color:green;}p{color:green;}

K.Sasidhar

Grouping ………To minimize the code, you can group

selectors. h1,h2,p

{color:green;}

K.Sasidhar

Image gallery Imagegall.htmlImage Transparency:CSS property for transparency

is opacityEx: img

{ opacity:0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }

K.Sasidhar

Ifrmaes An iframe is used to display a web page

within a web page Syntax:<iframe src="URL"></iframe> Setting width, height<iframe src="demo_iframe.htm"

width="200" height="200"></iframe>

HTML By K.Sasidhar

Technology

Transcript of HTML By K.Sasidhar