Presentation 1

HTML
Webpages are written in HTML- a simple scripting language.

HTML is short for HYPER TEXT MARKUP LANGUAGE.
-Hypertext is simply a piece of text that works as a link.
-Markup Language is a set of markup tags.HTML uses these markup tags to describe
web pages.
Markup tags:-
These are the HTML tags.They are keywords surrounded by angle brackets like <html>.
They normally come in pairs like <html>and </html> .The first tag is the start tag and the
second tag is the end tag.
HTML DOCUMENT
a) An HTML DOCUMENT is a plain text file that contains text and nothing else ,so they
can be written in the simplest text editor like notepad.
b) Some of the most popular HTML editors such as FrontPage or Dreamweaver will let
you create pages more or less as you write documents in word.
WP? LLA8n P1ML ?
lL ls posslble Lo creaLe webpages wlLhouL knowlng anyLhlng abouL Lhe P1ML source behlnd Lhe
page
1here are excellenL edlLors ln Lhe markeL LhaL wlll Lake care of Lhe P1ML parLs All you need Lo
do ls layouL Lhe page
Powever lf you wanL Lo make lL above average ln webdeslgn lL ls sLrongly recommended LhaL
you undersLand Lhese Lags
1he mosL lmporLanL beneflLs are
1) ?ou can use Lags Lhe edlLor does noL supporL
2) ?ou can read Lhe code of oLher peoples pages and borrow Lhe cool effecLs
3) ?ou can do Lhe work yourself when Lhe edlLor slmply refuses Lo creaLe Lhe effecLs you wanL
All you need Lo do ls Lype ln Lhe code Lhen save Lhe documenL maklng sure Lo puL a htm|
exLenslon or a htm exLenslon Lo Lhe flle (for lnsLance mypagehLml)
P1ML LLLMLn1S
An P1ML elemenL ls everyLhlng from Lhe sLarL Lag Lo Lhe end Lag 1he sLarL Lag ls ofLen called
Lhe open|ng tag 1he end Lag ls ofLen called Lhe c|os|ng tag
P1ML LlemenL SynLax
a) An P1ML elemenL sLarLs wlLh a start tag ] open|ng tag
b) An P1ML elemenL ends wlLh an end tag ] c|os|ng tag
c) 1he e|ement content ls everyLhlng beLween Lhe sLarL and Lhe end Lag
eg body Pome/body
d) Some P1ML elemenLs have empty content
e) LmpLy elemenLs are c|osed |n the start tag
f) MosL P1ML elemenLs can have attr|butes
MosL P1ML elemenLs can be nesLed (can conLaln oLher P1ML elemenLs)
P1ML documenLs conslsL of nesLed P1ML elemenLs
aslc P1ML LLLMLn1S are
a)hLml deflnes Lhe whole P1ML documenL
b)head speclfles LlLlellnksLylecalls exLernal CSS eLc
c)LlLle dlsplays LlLle ln head secLlon
d)body maln parL lL ls used Lo dlsplay everyLhlng wrlLLen ln lL
uonL lorgeL Lhe Lnd 1ag
MosL browsers wlll dlsplay P1ML correcLly even lf you forgeL Lhe end Lag
p1hls ls a paragraph
1he example above wlll work ln mosL browsers buL donL rely on lL lorgeLLlng Lhe end Lag can
produce unexpecLed resulLs or errors
LmpLy P1ML LlemenLs
P1ML elemenLs wlLhouL conLenL are called empLy elemenLs LmpLy elemenLs can be closed ln
Lhe sLarL Lag
br ls an empLy elemenL wlLhouL a closlng Lag (lL deflnes a llne break)
ln xP1ML xML and fuLure verslons of P1ML all elemenLs musL be closed
Addlng a slash Lo Lhe sLarL Lag llke br / ls Lhe proper way of closlng empLy elemenLs
accepLed by P1ML xP1ML and xML
P1ML 1lp use Lowercase 1ags
P1ML Lags are noL case senslLlve means Lhe same as p lenLy of web slLes use uppercase
P1ML Lags ln Lhelr pages
P1ML ALLrlbuLes
ALLrlbuLes provlde addlLlonal lnformaLlon abouL P1ML elemenLs
1)P1ML elemenLs can have attr|butes
2)ALLrlbuLes provlde add|t|ona| |nformat|on abouL Lhe elemenL
3)ALLrlbuLes are always speclfled ln the start tag
4)ALLrlbuLes come ln name/value palrs llke nameva|ue
3)Always CuoLe ALLrlbuLe values
6)ALLrlbuLe values should always be enclosed ln quoLes
7)uouble sLyle quoLes are Lhe mosL common buL slngle sLyle quoLes are also allowed
ln some rare slLuaLlons llke when Lhe aLLrlbuLe value lLself conLalns quoLes lL ls necessary Lo
use slngle quoLes
name!ohn ShoLCun nelson
P1ML Peadlngs
Peadlngs are deflned wlLh Lhe h1 Lo h6 Lags
h1 deflnes Lhe largesL headlng h6 deflnes Lhe smallesL headlng
O,9
hLml
body
h11hls ls a headlng/h1
/body
/hLml
P1ML 8ules (Llnes)
1he hr / Lag ls used Lo creaLe a horlzonLal rule (llne)
P1ML CommenLs
CommenLs can be lnserLed ln Lhe P1ML code Lo make lL more readable and undersLandable
CommenLs are lgnored by Lhe browser and are noL dlsplayed
CommenLs are wrlLLen llke Lhls
Lxample
! 1hls ls a commenL
P1ML aragraphs
1)P1ML documenLs are dlvlded lnLo paragraphs
2) 1hey are deflned wlLh Lhe p Lag
amp|e
hLml
body
p1hls ls a paragraph/p
p1hls ls anoLher paragraph/p
/body
/hLml
HTML Style Attribute
The HTML Style Attribute
The purpose of the style attribute is:
To provide a common way to styIe aII HTML eIements.
Styles was introduced with HTML 4, as the new and preferred way to style HTML
elements. With HTML styles, styles can be added to HTML elements directly by using
the style attribute, or indirectly by in separate style sheets (CSS files).
HTML Style Examples
a)style="background-color:yellow"
b)style="font-size:10px"
c)style="font-family:Times"
d)style="text-align:center"
Style Examples:
Background Color
-ody styIe="-ackground-coIor:yeIIow">
The style attribute defines a style for the <body> element.
The new style attribute makes the "old" bgcolor attribute obsolete.
Font Family, Color and Size
p styIe="font-famiIy:courier new; coIor:red; font-size:20px">
The style attribute defines a style for the <p> element.
Text Alignment
styIe="text-aIign:center">
The style attribute defines a style for the <h1> element.
HTML Text Formatting
Basically the text formatting tags are used to capture attention of the user.These tags
create an altogether different appearance of our text.
ExampIe:-
<html>
<body>
<p><b>This text is bold</b></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><code>This is computer output</code></p>
<p>This is <sub>subscript</sub>and <sup>superscript</sup></p>
</body>
</html>
The output will be given as:-
Tis text is -oId
This text is big
This text is italic
This is computer output
This is
subscript
and
superscript
Text Formatting Tags:-
<b>:-Defines bold text
<big>:-Defines big text
<em>:-Defines emphasized text
<i>:-Defines italic text
<small>:-Defines small text
<strong>:-Defines strong text
<sub>:-Defines subscripted text
<sup>:-Defines superscripted text
<ins>:-Defines inserted text
<del>:-Defines deleted text.
"Computer Output" Tags
<code>:-Defines computer code text
<kbd>:-Defines keyboard text
<samp>:-Defines sample computer code
<tt>:-Defines teletype text
<var>:-Defines a variable
<pre>:-Defines preformatted text
"uotations and Definition Tags
<abbr>:-Defines an abbreviation
<acronym>:-Defines an acronym
<address>:-Defines an address element
<bdo>:-Defines the text direction
<dfn>:-Defines a definition term
HTML Links
A link is the "address" to a document (or a resource) on the web.
Hyperlinks, Anchors, and Links
n web terms, a hyperlink is a reference (an address) to a resource on the web.
Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file,
a movie, etc.
An anchor is a term used to define a hyperlink destination inside a document.
Te HTML ancor eIement a>, is used to define -ot yperIinks and ancors.
We use the term HTML link when the <a> element points to a resource, and the term
HTML anchor when the <a> elements defines an address inside a document..
An HTML Link
Link syntax:-<a href="url">Link text</a>
The start tag contains attributes about the link.
The element content defines the part to be displayed.
The href Attribute:-
The ref attri-ute defines the link "address".
This <a> element defines a link to Facebook:
<a href="http://www.facebook.com/">Book yourself on FACEBOOK!</a>
The code above will display like this in a browser:
Book yourself on FACEBOOK!
The target Attribute:-
The target attri-ute defines were the linked document will be opened.
a) _blank:- document will be opened in a new window.
b) _self:- document just uploads in current page.
ExampIe
<a href="http://www.facebook.com/"
target="_blank">Book yourself on FACEBOOK!</a>
The name Attribute
When the name attri-ute is used, the <a> element defines a named anchor inside a
HTML document.
Named anchor syntax:
<a name="label">Any content</a>
The link syntax to a named anchor:
<a href="#label">Any content</a>
The # in the href attribute defines a link to a named anchor.
ExampIe:
A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>
A link to the Useful Tips Section from the same document:
<a href="#tips">
Jump to the Useful Tips Section</a>
ase Tag
t is defined in the head section.On every page an address is given so that when some
bug occurs the page (address one) gets automatically opened.
ExampIe:-
<head>
<Base href="yahoo.com>
</head>
HTML Images
The mage Tag and the Src Attribute
1) n HTML, images are defined with the <img> tag.
2) The <img> tag is empty, which means that it contains attributes only and it has no
closing tag.
3) 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 on
your page.
4) The syntax of defining an image:
<img src="url" />
The URL points to the location where the image is stored.
The browser puts the image where the image tag occurs in the document.
Te AIt Attri-ute
The alt attribute is used to define an "alternate text" for an image. The value of the alt
attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" />
The "alt" attribute tells the reader what he or she is missing on a page if the browser
can't load images. The browser will then display the alternate text instead of the image.
EXAMPLE:-
<html>
<head>
<title>Welcome Everybody</title>
</head>
<body>
<p>
<img src="/D:/Photos_Traval_Holiday_June_09/DSCF0220.jpg" width="67%"
height="75%" />
</p>
</body>
</html>
HTML FORMS
HTML enables us to create forms. This is where our websites can become more than
just a nice advertising brochure. Forms allow us to build more dynamic websites that
allow our users to interact with it.
An HTML form is made up of any number of 1472 ele2ents. These elements enable the
user to do things such as enter information or make a selection from a preset options.
n HTML, a form is defined using the form>form> tags. The actual form elements are
defined between these two tags.
Te 35:9 Tag
This is the most commonly used tag within HTML forms. t allows us to specify various
types of user input fields such as text, radio buttons, checkboxes etc.
Text
Text fields are used for when you want the user to type text or numbers into the form.
<input type="text" />
Radio Buttons
Radio buttons are used for when you want the user to select 4ne option from a pre-
determined set of options.
ExampIe:-
Gender<input type="radio" name="gender" />Male<br />
<input type="radio" name="gender" /> Female<br/>
Ceck-oxes:-
Checkboxes are similar to radio buttons, but enable the user to make multiple
selections.
ExampIe:-
Course<input type="checkbox" name="BE" / >BE<br />
<input type="checkbox" name="B-Tech" />B-Tech<br/>
<input type="checkbox name="MCA />MCA<br/>
Su-mit:-
The submit button allows the user to actually submit the form.
ExampIe:-
<input type="submit value="SUBMT />
Dropdown Lists:-
A dropdown list consists of options. This allows the user to select one option from a list
of pre-defined options.
The select list is created using the select in conjunction with the option tag.
ExampIe:-
<select name="country>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">"ueenstown</option>
</select>
Menus:-
Menus are almost the same as dropdown lists.n dropdown list if we specify the size it
will become a dropdown menu.
ExampIe:-
<select name="country size="3>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">"ueenstown</option>
</select>
Form Action:-
Usually when a user submits the form, you need the system to do something with the
data. This is where the acti4n page comes in. The action page is the page that the form
is submitted to. This page could contain advanced scripts or programming that inserts
the form data into a database or emails an administrator etc.
FORM Metod
This attribute specifies the HTTP method to use when the form is submitted.
Possible values are:
1)get (the form data is appended to the URL when submitted)
2)post (the form data is not appended to the URL)
Providing this attribute is optional. f you don't provide it, the method will be 54st.
ExampIe:-
<body>
<form action=".tm" method="post">
First name:<input type="text" name="first_name" maxlength="100" /><br />
Last name:<input type="text" name="last_name" maxlength="100" /><br/>
<input type="submit" value="Submit" />
</form>
</form>
HTML Ta-Ies:-
Tables have been a popular method for achieving advanced layouts in HTML. Generally,
this involves putting the whole web page inside a big table.
asic ta-Ie tags:-
n HTML, you create tables using the <table> tag, in conjunction with the tr and td tags.
th can be given to display the heading.
ExampIe:-
<body>
<table border="1">
<tr>
<td>Table cell 1</td>
</tr>
</table>
</table>
We added a border attribute to the table tag. This particular attribute allows us to specify
how thick the border will be. f we don't want a border we can specify 0 (zero).
Other common attributes you can use with your table tag include width, cellspacing and
cellpadding.
We can also add attributes to the tr and td tags. For example, we can specify the width
of each table cell.
Widths can be specified in either pixels or percentages. Specifying the width in pixels
allows you to specify an exact width. Percentages allows the table to "grow" or "shrink"
depending on what else is on the page and how wide the browser is.
ExampIe:-
<body>
<table border="1" ceIIpadding="5" ceIIspacing="5" widt="00%">
<tr>
<td widt="20%">Table cell 1</td>
</tr>
</table>
</body>
Anoter ExampIe:-
<table width="400px" border="0">
<tr>
<td colspan="2" style="background-color:yellow;">
Header
</td>
</tr>
<tr>
<td style="background-color:orange;width:100px;text-align:top;">
Left menu<br />
tem 1<br />
tem 2<br />
</td>
<td style="background-color:#eeeeee;height:200px;width:300px;text-align:top;">
Main body
</td>
</tr>
<tr>
<td colspan="2" style="background-color:yellow;">
Footer
</td>
</tr>
</table>
HTML 'div' and 'span'
Although we can achieve pretty nice layouts with HTML tables, tables weren't really
designed as a layout tool. Tables are more suited to presenting tabular data.
The div element is a block level element used for grouping HTML elements. Once
grouped, formatting can be applied to the div element and everything contained within it.
While the div tag is a block-level element, the HTML span element is used for grouping
elements at an inline level.
ExampIe of span tag:-
<head>
<style type="text/css">
span.blue {color:lightskyblue;font-weight:bold}
span.green {color:darkolivegreen;font-weight:bold}
</style>
</head>
<body>
<p>My mother has <span class="blue">light blue</span> eyes and my father has <span
class="green">dark green</span> eyes.</p>
</body>
ExampIe of div tag:-
<body>
<div style="width:400px">
<div style="background-color:yellow">
Header
</div>
<div style="background-color:orange;height:200px;width:100px;float:left;">
Left menu<br />
tem 1<br />
tem 2<br />
tem 3...
</div>
<div style="background-color:#eeeeee;height:200px;width:300px;float:right;">
Main body
</div>
<div style="background-color:yellow;clear:both">
Footer
</div>
</div>
</body>
HTML Lists
HTML supports ordered, unordered and definition lists.
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small
black circles),disc,square etc.
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
ExampIe:-
<body>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</ul>
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
ExampIe:-
<body>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
Definition Lists:-
Definition list is not a list of single items. t is a list of items (terms), with a description of
each item (term).
1) A definition list starts with a <dl> tag (definition Iist).
2) Each term starts with a <dt> tag (definition term).
3) Each description starts with a <dd> tag (definition description).
ExampIe:-
<body>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
MARQUEE
The effect in which the text or an image moves left,right,top,bottom,alternate etc can be
given by marquee.t is enclosed within <marquee> </marquee> tag.
ExampIe:-
<marquee behavior="scroll" direction="up">Your upward scrolling text goes
here</marquee>
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll
speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll
speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll
speed</marquee>
<marquee behavior="scroll" direction="left">
<img src="/pix/smile.gif" width="100" height="100" alt="smile" />
<p>Sample text under a marquee image.</p>
</marquee>
HTML Frames
With frames, you can display more than one Web page in the same browser window.
Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:
The web developer must keep track of more HTML documents
t is difficult to print the entire page
Te Frameset Tag:-
The <frameset> tag defines how to divide the window into frames.
Each frameset defines a set of rows or columns.
The values of the rows/columns indicate the amount of screen area each row/column
will occupy .
Te Frame Tag
The <frame> tag defines what HTML document to put into each frame
ExampIe:-
<html>
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
</html>
n the example above we have a frameset with two columns. The first column is set to
25% of the width of the browser window. The second column is set to 75% of the width
of the browser window. The HTML document "frame_a.htm" is put into the first column,
and the HTML document "frame_b.htm" is put into the second column:
Note: The frameset column size value can also be set in pixels (cols="200,500"), and
one of the columns can be set to use the remaining space (cols="25%,*").
HTML CoIors
Colors are displayed combining RED, GREEN, and BLUE light.
Color Values
1) HTML colors are defined using a hexadecimal (hex) notation for the combination of
Red, Green, and Blue color values (RGB).
2) The lowest value that can be given to one of the light sources is 0 (hex 00). The
highest value is 255 (hex FF).
Hex values are written as 3 double digit numbers, starting with a # sign.
ExampIe:-
1) Black- #000000 or rgb(0,0,0)
2) Red- #FF0000 or rgb(255,0,0)
3) Pink- #FF00FF or rgb(255,0,255)
CASCAulnC S1?LL SPLL1S
IN1kCDUC1ICN
lL ls Llme Lo Lake our web deslgnlng skllls Lo Lhe nexL levelCascadlng SLyle SheeLs
are a way Lo conLrol Lhe look and feel of our P1ML documenL ln an organlsed and
efflclenL manneruslng Lhese sheeLs we wlll be able Lo
Add new looks Lo our old P1ML
CompleLely resLyle a webslLe wlLh only a few changes Lo our CSS code
use Lhe sLyle" we creaLe on any webpage we wlsh
Using CSS
CSS s short for Cascadng Stye Sheets.The purpose of CSS s to assgn
styng nformaton to eements n a marked document.Unke HTML,t s not
actuay a markup anguage.Rather,t s a coecton of commands that aow
us to reference the markup anguage beng used.
STYLESHEET:- t s a tempate apped to a document that determnes
how t w be dspayed.
HlSTORY:- CSS was deveoped by a Word Wde Web(WWW) Consortum
headed by Bert Bos and Hakon Le. The ntent of the pro|ect was to create a
styng anguage that coud be ntegrated wth HTML and XHTML to
compement ts structurng capabtes wth styng rues.
enefits Of StyIe Seets
We can change the appearance of our entire document by adjusting a few rules in a
style sheet.
Style sheets can be applied to multiple documents.
Pages and sites are easier to maintain.
Style Sheets can address multiple users.
Documents download faster.
How to Use CSS in a HTML Document..????
Wat is a styIe ruIe?
t is a command that tells a user agent how to display a particular element.
Syntax:-
The CSS syntax is made up of three parts: a selector, a property and a value:
seIector {property:vaIue}
The selector is normally the HTML element/tag you wish to define, the property is the
attribute you wish to change, and each property can take a value. The property and
value are separated by a colon, and surrounded by curly braces:
-ody {coIor:-Iack}
f the value is multiple words, put quotes around the value:
p {font-famiIy:"sans serif"}
Te cIass SeIector
With the class selector you can define different styles for the same type of HTML
element.
Say that you would like to have two types of paragraphs in your document: one right-
aligned paragraph, and one center-aligned paragraph. Here is how you can do it with
styles:
p.rigt {text-aIign:rigt}
p.center {text-aIign:center}
You have to use the class attribute in your HTML document:
p cIass="rigt">Tis paragrap wiII -e rigt-aIigned.p>
p cIass="center">Tis paragrap wiII -e center-aIigned.p>
To apply more than one class per given element, the syntax is:
p cIass="center -oId">Tis is a paragrap.p>
The paragraph above will be styled by the class "center" AND the class "bold".
You can also omit the tag name in the selector to define a style that will be used by all
HTML elements that have a certain class. n the example below, all HTML elements with
class="center" will be center-aligned:
.center {text-aIign:center}
n the code below both the h1 element and the p element have class="center". This
means that both elements will follow the rules in the ".center" selector:
cIass="center">Tis eading wiII -e center-aIigned>
p cIass="center">Tis paragrap wiII aIso -e center-aIigned.p>
O1kN S1Sn1
An exLernal sLyle sheeL ls ldeal when Lhe sLyle ls applled Lo many pages Lach page
musL llnk Lo Lhe sLyle sheeL uslng Lhe llnk Lag 1he llnk Lag goes lnslde Lhe head
secLlon
Synta
head
||nk re|sty|esheet typetet]css hrefmysty|ecss ]
]head
1he browser wlll read Lhe sLyle deflnlLlons from Lhe flle mysLylecss and formaL Lhe
documenL accordlng Lo lL
1he flle should noL conLaln any hLml Lags ?our sLyle sheeL should be saved wlLh a
css exLenslon
An example of a style sheet file is shown below:
r {coIor:sienna}
p {margin-Ieft:20px}
-ody {-ackground-image:urI("images-ack40.gif")}
InIine StyIes:-
A style that is specified within the body of a markup tag as an attribute of that tag.
ExampIe:-
<img src="image.jpg style="border : 2px solid red;/>
<table style="max-width:600px ; >
<b style="font-size:10px ; font-weight:500 ; >
InternaI StyIe Seet:-
A collection of style rules enclosed in <style> tag in the header of the document.
ExampIe:-
<html>
<head>
<style type="text/css >
{ color:blue; font-style:italic ; font-size:10px }
</style>
</head>
</html>

Presentation 1

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Presentation 1

Caricato da

Copyright:

Formati disponibili

HTML

Webpages are written in HTML- a simple scripting language.

Potrebbero piacerti anche