Ip 02

Chapter 2: Web page Development using HTML
2.1 What is HTML?

HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language

HTML is a markup language
A markup language is a set of markup tags
The tags describes document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
2.2 HTML tags

HTML markup tags are usually called HTML tags
HTML 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 tag
The end tag is written like the start tag, with a forward slash before the tag name
Start and end tags are also called opening tags and closing tags
2.3 Creating HTML documents

Type html code in a notepad file and save it with .htm or .html extension. Open the file in any internet
browser
2.4 Breaking pages into paragraphs and other breaks
Browser ignores white spaces such as blank space, tab, line break, paragraph etc. from html file.
You can have blankspace by typing
Line break by typing <br> at the end of the line
Paragraph by typing it within <p>
</p>
Preformatted content by typing it within <pre>
</pre>
2.5 HTML style tag
CSS Styles can be attached to html pages by using style tag.
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2.6 Lists (ordered and unordered) and definition lists

<title>Ordered list</title>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<title>Unordered list</title>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<title>Definition list</title>
<dl>
<dt>Term 1</dt>
<dd>Describe Term 1</dd>
<dt>Term 2</dt>
<dd>Describe Term 2</dd>
</dl>
2.7 Linking between pages
a. Uniform resource locator
A uniform resource locator ( URL) is a specific character string that constitutes a reference to a resource.
Most web browsers display the URL of a web page above the page in an address bar. A typical URL might
look like: http://www.example.com
b. Linking to a local files (graphical file or another HTML file)
To learn web design click
<a href="http://www.w3schools.com/">
<img src="D:\NOW\IP-2014-15-III\IP 02\photos\2.7
b.jpg"></a>
To learn web design click
<a
href="http://www.w3schools.com/"><img
src="photos\2.7 b.jpg"</a>
Click <a href="2.5.htm"> here</a> to open
another html page.
c. Linking to the world: Internet sites

Ex: To learn web design click <a href="http://www.w3schools.com/">here</a>
d. Linking to section of a page

<a name="s1"><h3>section1</h3></a>
<pre>Write something in section 1.
Let us describe item1 in section1.
Suppose item1 is red in color.</pre>
Suppose item2 is green in
color.</pre>
Suppose item3 is blue in color.</pre>
<a href="#s1">section1</a><br>
e. Hyper graphics: A graphic on a web page which is also a hyperlink is called a hyper graphic.
f. Address footer and E-mail : Email can be added as a last sentence (footer) in a page as follows.
<a href="mailto:pranand12@gmail.com?subject=comments">E-mail a comment</a>
2.8 Fonts Colors and Colorful and Textured Backgrounds
<body bgcolor="Yellow">
<font color="red" size=1>One</font><br>
<font color="green" size=2>Two</font><br>
<font color="blue" size=3>Three</font><br>
</body>
2.9 Working with tables
<table border=1>
<tr>
<th>table header1</th> <th>table header2</th>
</tr>
<tr>
<td>table data11</td> <td>table data12</td>
</tr>
<tr>
<td>table data21</td> <td>table data22</td>
</tr>
</table>
<table border=1 bordercolor=red >

<tr>
<th rowspan=2 valign=bottom >City</th>
<th colspan=3>Distance in Kilometers</th>
</tr>
<tr>
<th> City 1</th> <th>City 2</th> <th>City 3</th>
</tr>
<tr>
<td>City 1</td> <td>-</td> <td>94</td> <td>55</td>
</tr>
<tr>
<td>City 2</td> <td align=right>94</td> <td>-</td>
<td>66</td>
</tr>
<tr>
<td>City 3</td> <td>55</td> <td align=center>66</td>
<td>-</td>
</tr>
</table>
2.10 Forms and Frames
<html>
<form method="post" action="login.php">
MailID:<input type="text" size=20 name='mailid'
value="pranand3@yahoo.com"><br>
Password:<input
type="password"
size=17
name='password'>
<input type="submit" value="Login">
<form>
</html>
<html>
<frameset rows=20%,*>
<frame src=tp.htm name=tf>
<frameset cols=10%,*>
<frame src=lp.htm name=lf>
<frame src= rp.htm name=rf>
</frameset>
</frameset>
</html>
2.11 Cascading Style Sheets (CSS)
a. CSS Basics
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a
document written in a markup language.
CSS is designed primarily to enable the separation of document content from document presentation,
including elements such as the layout, colors, and fonts.[2] This separation can improve content accessibility,
provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML
pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and
repetition in the structural content.
Style sheets can help you maintain a consistent look and feel throughout your Web site.
4
Tags you add inside other tags inherit the outer tags formatting, unless you specify otherwise. For example, if
you define a <BODY> style, any tags you nest within the <BODY> tags inherit that formatting. This is called
cascading.
b.Style Sheet Rules
c. CSS selectors
There are three types of selectors. (i) element
(ii)id
(iii)class.
The element selector selects elements based on the element name.
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with#".
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
5
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
The class selector uses the HTML class attribute, and is defined with a "."
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1
class="center">Red
heading</h1>
<p
class="center">Red
paragraph.</p>
and
center-aligned
and
center-aligned
</body>
</html>
To minimize the code, you can group selectors. To group selectors, separate each selector with a comma.
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<h3>This is not affected</h3>
<p>This is a paragraph.</p>
</body>
</html>
d.Style Properties
i. Font and Text properties
<p style="color:red;text-align:center;
text-transform:uppercase;
text-decoration:underline; ">
Welcome to All
</p>
ii. Foreground and Background properties

<html>
<head>
<style>
h3{ color: blue; background-color: red;}
</style>
<h3>Heading 3</h3>
</html>
iii. Layout and Positioning Properties
Layout: 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 add a border around elements, and to define space between elements.
The image below illustrates the box model:
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 200px;
padding: 20px;
border: 15px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<div>The CSS box model is essentially
a box that wraps around HTML
elements, and it consists of: margins,
borders, padding, and the actual
content.</div>
</body>
</html>
7
Positioning
The CSS positioning properties allow you to position an element.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work
unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.
Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the
normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled
<html>
<head>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
color: red;
}
</style>
</head>
<body>
<p>Some
text</p><p>Some
text</p><p>Some text</p><p>Some
text</p><p>Some text</p>
text</p><p>Some
text</p><p>Some
text</p><p>Some
text</p><p>Some
text</p><p>Some
<p class="pos_fixed">Some fixed positioned text.</p>

</body>
</html>
Relative Positioning
A relative positioned element is positioned relative to its normal position.
<html>
<head>
<style>
h2.pos_left { position: relative; left: -20px;}
h2.pos_right { position: relative; left: 20px;}
</style>
</head>
<body>
<h2>Original position</h2>
<h2 class="pos_left">moves left 20px</h2>
<h2 class="pos_right">moves right 20px</h2>
</body>
</html>
8
Absolute Positioning
With absolute positioning, an element can be placed anywhere on a page.
<html>
<head>
<style>
h2 {
position: absolute;
left: 100px;
top: 150px;
}
</style>
</head>
<body>
<h2>This
heading
has
an
absolute
position</h2>
<p>With absolute positioning, an element can
be placed anywhere on a page. The heading
below is placed 100px from the left of the page
and 150px from the top of the page.</p>
</body>
</html>
e. Type of CSS Styles

i. Inline
<h1
style="font-style:italic;backgroundcolor:yellow">Inline style sheet example</h1>
<p style="color:red">Red para</p>
ii. Internal or Embedded
<html>
<head>
<style>
h1{background:gold;font-style:italic}
p{background:green;}
div{background:pink;}
</style>
</head>
<body>
<h1>Internal style sheet example</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background
color.</p>
We are still in the div element.
</div>
</body>
</html>
iii. External
style.css in styles folder
h1{background:red;font-style:italic}
div{background:pink}
p{background:green}
ess.htm
<html>
<head>
</head>
<body>
<link rel = "stylesheet" href = "styles\style.css"
type="css">
<h1>CSS External style sheets example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background
color.</p>
We are still in the div element.
</div>
</body>
</html>
iv. Imported
Another interesting way to add CSS to a HTML page is with the import rule. This lets us attach a new CSS file from
within CSS itself. Let's look at an example of how this is done then I will show a practical example of when you
might use this method. To import a new CSS file from within CSS simply use the following rule:
@import "newstyles.css";
Just change "newstyles" to the name of your CSS file and be sure to include the correct path to the file too. Remember
the path is relative to the current CSS file that we are in, if the CSS is embedded into the HTML page then the path is
relative to the HTML file.
Let's imagine we have a 1000 page website and we link to a CSS file from every page on the site. Now let's
imagine we want to add a second CSS file to all of those pages. We could edit all 1000 HTML files and add a second
CSS link or a much better way would be to import the second CSS file from within the first file. We just saved
ourselves many hours of work!
f. Style Inheritance
Inheritance is a key feature in CSS, - it relies on the ancestor-descendant relationship to operate. Inheritance is the
mechanism by which properties are applied not only to a specified element, but also to its descendants. Descendant
elements may inherit CSS property values from any ancestor element enclosing them. In general, descendant elements
inherit text-related properties, but box-related properties are not inherited. Properties that can be inherited are color,
font, letter-spacing, line-height, list-style, text-align text-indent, text-transform, visibility, white-space and wordspacing. Properties that cannot be inherited are background, border, display, float and clear, height and width, margin,
min- and max-height and -width, outline, overflow, padding, position, text-decoration, vertical-align and z-index.
10
Inheritance prevents certain properties from being declared over and over again in a style sheet, allowing the software
developers to write less CSS. It enhances faster-loading of web pages by users and enables the clients to save money
on bandwidth and development costs.
<style>h1{color: red;}</style>
<h1>This to <i>illustrate</i> inheritance</h1>
g. Style Rules Precedence

Inline style has highest priority and it overrides all other rules if the same property is described in other
methods.
Embedded style has less priority than inline style but it overrides the same property defined in external
stylesheets.
The External style sheet has lowest priority but it is the recommended way, as it separates the CSS from
HTML and makes it easy to manage CSS in one place. If there is more than one external style sheet then
priority is decided in the way files are included in HTML, first file (top) has lowest priority while the last file
included (at bottom) has greater priority.
There can be a situation when we need to override the CSS in less priority place. Like if there is a width
property assigned in inline CSS and we need to override it in External Style Sheet. In such a situation we can
use !important declaration in external style sheet.
!important means 'this is important, ignore subsequent rules, and apply this rule!'
<style>
a {border:5px dotted green;
background: yellow;
}
</style>
<a style="border:1px solid red;background: gray;">Without
!important</a>
<style>
a {border:5px dotted green;
background: yellow !important; }
</style>
<a style="border:1px
!important</a>
solid
red;background:
gray;">With
h.Style Sheet Layers

<p>Layer 2 on top of Layer 1</p>
<div style="position:relative; font-size:50px;
z-index:3;">LAYER 1</div>
<div style="position:relative; top:-50; left:5; color:red;
font-size:80px; z-index:4">LAYER 2</div>
i. Measurement units
11
CSS Provides you with, normally, six units with which to define the size of properties .
Unit: Pixels
Pixels define an element's size using a specific number of pixels. If your document is primarily designed for
print, then you may want to look at one of the other unit options.
Unit: Ems
Ems are a relative measurement unit. One 'Em'(1em) is equal to the height of the capital letter "M" in the
default font size.
Unit: Exes
Exes are similar to Ems, in that they are a relative unit of measurement that defines 1 unit to be equal to the
size of the letter "x" in the default font size
Units: Points and Picas
These units are print media units of measurments. A point (1pt) equals 1/72 of an inch, while a pica (1pc)
equals 1/6 of an inch. Documents intended for printed media will be able to tell the device exactly what the
intended size is for these units.
Unit: Percentages
When assigning percentage units to the font-size or line-height properties, they act like the Em unit,
where 100% equals 1em.
Ex:
<p style="font-size:10px">ten pixels</p>
<p style="font-size:10em">ten ems</p>
<p style="font-size:10ex">ten exs</p>
<p style="font-size:10pt">ten points</p>
<p style="font-size:10pc">ten picas</p>
<p style="font-size:50%">fifty % of M</p>
2.12 Introduction to XML
What is XML?
XML stands for EXtensible Markup Language
XML is a markup language much like HTML
XML was designed to carry and store data, not to display data
XML tags are not predefined. You must define your own tags
XML is designed to be self-descriptive
XML and HTML were designed with different goals:
XML was designed to transport and store data, with focus on what data is
HTML was designed to display data, with focus on how data looks
HTML is about displaying information, while XML is about carrying information.
XML does not DO anything. XML was created to store, and transport information.
The following example is a note to Tove, from Jani, stored as XML:
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
12
The note above is quite self-descriptive. It has sender and receiver information, it also has a heading and a message
body.
But still, this XML document does not do anything. It is just information wrapped in tags. Someone must write a
piece of software to send, receive or display it.
XML Separates Data from HTML
If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time
the data changes.
With XML, data can be stored in separate XML files. This way you can concentrate on using HTML/CSS for display
and layout, and be sure that changes in the underlying data will not require any changes to the HTML.
With a few lines of JavaScript code, you can read an external XML file and update the data content of your web page.
XML Simplifies Data Sharing
In the real world, computer systems and databases contain data in incompatible formats.
XML data is stored in plain text format. This provides a software- and hardware-independent way of storing data.
This makes it much easier to create data that can be shared by different applications.
XML supports Unicode
XML is a textual data format with strong support via Unicode for the languages of the world.
XML documents must be well-formed, meaning they should follow the syntax rules of the XML
specification. It is also possible (but not a requirement) for XML documents to be valid. A valid
XML document conforms to a Document Type Definition (DTD) or an XML Schema. A DTD or an
XML Schema dictates what elements and attributes may be part of a given XML document.
A schema is a formal way of defining and validating the content of an XML document. (A wellformed XML document that conforms to its schema is said to be valid.)
The schema is how we assign the data types to each tag and any attributes that are contained in the
XML document. A schema is a structured document which must obey XML syntax rules. It is
composed of a series of predefined tags and attributes that are part of the XML language and are
used to set the data types for the values associated with our custom tags. Simply put, not only do we
get to create custom XML tags, but we can also denote that an XML data value is, for example, an
integer data type. This ability to assign specific data types to specific XML data values is one of the
reasons why XML has attracted so much attention.
A schema can be part of the XML document or a separate file.
XML with correct syntax is "Well Formed" XML.
XML validated against a DTD or an XML Schema is "Valid" XML.
A "Well Formed" XML document has correct XML syntax.The syntax rules for XML documents are:
XML documents must have a root element
XML elements must have a closing tag
XML tags are case sensitive
XML elements must be properly nested
XML attribute values must be quoted
***
13

Ip 02

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ip 02

Hochgeladen von

Copyright:

Verfügbare Formate

Chapter 2: Web page Development using HTML

2.1 What is HTML?

HTML stands for Hyper Text Markup Language

2.2 HTML tags

2.3 Creating HTML documents

2.6 Lists (ordered and unordered) and definition lists

c. Linking to the world: Internet sites

d. Linking to section of a page

<table border=1 bordercolor=red >

ii. Foreground and Background properties

<p class="pos_fixed">Some fixed positioned text.</p>

e. Type of CSS Styles

g. Style Rules Precedence

h.Style Sheet Layers

Das könnte Ihnen auch gefallen