[email protected]. 2 internet is a hot topic today. it has opened new ways of opportunities...
TRANSCRIPT
WEB DESIGNINGThe Concept of Creating Web Pages for Website
BY: ANOOP KUMAR TIWARI
Internet is a hot topic today. It hasopened new ways of opportunities for education and helped increase productivity, as well efficiency in areas like fashion, publicity, marketing, healthcare, banking, governance, and manufacturing all over the world.
COURSE INTRODUCTION
As IT Professionals we have to deal with the whole range of Web Technologies starting from the Internet , i.e. to HTML, Advanced HTML, CSS, Java Script, VB Script, XML, COM, JSP, ASP, PHP etc.
The purpose of the course is to introduce with some of these technologies and to teach that ‘How a Web Page is created?’. After the creation of Web Page we have to upload this Web Page on the Internet known as Hosting of Website.
LANGUAGE AND STYLES FOR
WEB PAGE1. Markup Langauges-
a) HTML (Hyper text Markup Language)
b) DHTML (Dynamic HTML) c) Advanced HTML d) XML (eXtensive Markup Language)
2. CSS (Cascade Sheet Style)
3. Scripting Language- a) Java Script b) VB Script
4. Advanced Technologies-a) Java
b) .Net c) PHP d) ASP e) JSP
13
BackgroundHeadingsHorizontal RowsAlignments (left, right, center, justify)Paragraphs Text Formatting (color, size, and type)ImagesHyperlinks
Static Page Contents
14
Advanced Page Contents
Tables Option Values Radio Buttons Check Box Input Box Text Area Buttons (Submit, Reset, Login ,
etc.)
By: Mr. Anoop Kumar Tiwari
HYPER TEXT MARKUP LANGUAGE(STATIC)
<html><head><title>Index</title></head>
<body> Here type your information or document that you want to look on the Web page.
</body></html>
Structure of HTML-
To Break a line… <BR> Tag
HTML CODE OUTPUT
This is first line. <br> This issecond line.
This is first line.This is second line.
To create a new Paragraph… <P> Tag
HTML CODE OUTPUT
This is first para. <P> This issecond para.
This is first para.
This is second para.
To align a Paragraph… <P align=“_”> Tag
HTML CODE OUTPUT<p align=“left”>This is
first para.
<P align=“right”> This issecond para.</p>
<p align=“center”> This is central para.</p>
<p align=“justify”>This para is highly justified.</p>
This is first para.
This is second para.
This is central para.
This is highly justified para.
<b> Hyper Text Markup Language </b>
Hyper Text Markup Language
Use of Bold (<B>) Tag.
<i> Hyper Text Markup Language </i>
Hyper Text Markup Language
Use of Italic (<I>) Tag.
<u> Hyper Text Markup Language </u>
Hyper Text Markup Language
USE OF UNDERLINE (<U>) TAG.
<Body bgcolor=“red”>
This is the background color of the WEB PAGE….
To give background colour
<body background=“C:\Documents and Settings\Documents\My Pictures\Sunset.jpg”>
We are able to type upon this picture.
To add a picture in the background of the Web Page.
Use a PICTURE as a IMAGE…
<img src=“path_of_image.jpg”>
Note: “jpg” in the above code is a format type of image it can be change with the formats of picture as PNG, GIF also..
Note: For getting the path of any image you need to Right Click on that picture and click on Properties option after this you have to copy its Location…
To set with Alignment to an image…
To set an image in center of the page
<img src=“path_of_image.jpg” align=“center”>
To set with Alignment to an image…
To set an image in right of the page
<img src=“path_of_image.jpg” align=“right”>
To set with Alignment to an image…
To set an image in Left of the page
<img src=“path_of_image.jpg” align=“center”>
By default a picture comes automatically in Left side of a page…
To set a size to an image…
To set the height of the image…<img src=“path_of_image.jpg” height=“20%”>
To set the width of the image…<img src=“path_of_image.jpg” width=“50%”>
To set a size to an image…
To set the height and with also of the image…<img src=“path_of_image.jpg” height=“80%”
width=“50%>
<Body text=“blue”>
Hyper Text Markup Language
BEFORE : Hyper Text Markup Language
AFTER: Hyper Text Markup Language
To give the default colour to thetext in the WEB Page.
<font color=“green”>
As: Hyper Text <font color=“green”>Markup Language.
Hyper Text Markup Language
Note: Here default colour of the text is BLUE as we had done before.
To change the font colour-
<font face=“Arial”> This is in Arial Font</font>
This is in Arial Font.
To change the type of any FONT:
<font size=“10”>This is in size 10</font>
Before: This is in normal form.
After: This is in size 10.
TO CHANGE THE SIZE OF THE TEXT-
Can we use all the attributes in a tag?Ans: Yes.
<font color=yellow face=Arial size=10>
All the attributes had used in a tag like this….
<hr> is used to draw a simple line.
<hr noshade> is used to draw a solid line.
To draw a line on the Web Page-
<hr color=“red”>
<hr size=“5”>
<hr color=red size=5>
To change the size & color of <hr>-
<hr width=“200”>
Where as <hr> will show a complete line-
We can use all the attributes of <hr> tag as-<hr size=10 color=red width=200 noshade>
To change the width of <HR>..
There are 6 Levels of headings by default-<h1> HTML</h1>
<h2> HTML</h2>
<h3> HTML</h3>
<h4> HTML</h4>
<h5> HTML</h5>
<h6> HTML</h6>
HTMLHTML
HTML
HTML
HTML
HTML
WE CAN ALSO ADD HEADINGS IN WEB PAGES-
Use of Subscript & Superscript-
IN H2O ‘2’ IS IN SUBSCRIPT FORM, WE SHALL USE <SUB> TAG
We shall write H2O like this:
IN A2 ‘2’ IS IN SUPERSCRIPT FORM, WE WILL USE <SUP> TAG. We shall write A2 like
this:H<sub>2</sub>O
A<sup>2</sup>
ORDERED LIST
It shows an order of sequence.Order List may be in following kinds-1, 2, 3, 4, 5, …………A, B, C, D, E, ……….a, b, c, d, e, ………..I, II, III, IV, V, ……….i, ii, iii, iv, v, ………..
UNORDERED LIST
It does not show any order of sequence.Order List may be in following kinds-Disc ( )Circle ( )Square( )
There is two types of lists in HTML:
We can create lists in HTMl-
Ordered ListHTML CODE
<ol>Four Directions: <li>EAST</li> <li>WEST</li> <NORTH</li> <li>SOUTH</li> </ol>
OUTPUT
Four Directions:1. EAST2. WEST3. NORTH4. SOUTH
ORDERED LIST (TYPE ATTRIBUTE)
<OL TYPE=“A”><LI>EAST</LI><LI>WEST</LI><LI>NORTH</LI><LI>SOUTH</LI></OL>
A. EASTB. WESTC. NORTHD. SOUTH
HTML CODE OUTPUT
NOTE: You can change the List Type ‘A’ in ‘I’ for Capital Roman numbers, ‘i’ for smallcaps roman numbers and ‘a’ for smallcaps english alphabets also but by default it creats the list in regular Numerals…
Ordered List (Start Attribute)
INPUT CODE (HTML)
<OL start=“11”>Four Directions:
<li>EAST</li> <li>WEST</li> <li>NORTH</li> <li>SOUTH</li> </OL>
OUTPUT
Four Directions:11. EAST12. WEST13. NORTH14. SOUTH
Unordered ListHTML CODE OUTPUT<UL><li>EAST</li><li>WEST</li><li>NORTH</li><li>SOUTH</li></UL>
• EAST• WEST• NORTH• SOUTH
Unordered List with ‘TYPE’attribute…HTML CODE OUTPUT
<UL type=“circle”><li>EAST</li><li>WEST</li><li>NORTH</li><li>SOUTH</li></UL>
o EASTo WESTo NORTHo SOUTH
Note: You can also insert ‘Square’ instead of ‘Circle’…
Another list in the list
Coding Output<html><head><title>Nested List</title>
<head><body>
<ol>Tags<li>Physical Tags</li> <ul><li>Bold</li>
<li>Italic</li></ul> <li>Logical Tag</li> <ul><li>Emphasis</li> <li>Strong</li></ul></ol>
</body></html>
1. Physical Tag • Bold • Italic
2. Logical Tag• Emphasis• Strong
Nested List:
Definition List:
Input Output<body>
<dl><dt>Noun<dd>A noun is the name of a person, things or a place.<dt>Pronoun<dd>Pronoun are the words that are used in place of nouns to avoid the repetition of nouns.</dl>
Noun A noun is the name of a person, things or a place.
Pronoun Pronoun are the words that are used in place of nouns to avoid the repetition of nouns.
CODEs in HTML<table>
<tr><td>Name</td><td>Class</td>
</tr><table>
OUTPUT
Name Class
TABLE IN HTML
TR For creating a new row in the table
TD For creating a new cell in the row of the table
TH For creating a Heading in the row of the table
USE OF TR>,<TD>&<TH>
Use of Border AttributeHTML CODE
<table border=“1”><tr>
<th>Name</th><th>Class</th><th>Address</th>
</tr><tr>
<td>Aditya</td><td>10</td><td>Sikandrabad</
td></tr>
<table>
OUTPUT
Name Class Address
Aditya 10 Sikandrabad
Use of Bordercolor AttributeHTML CODE
<table border bordercolor=“red”>
<tr>
<th>Name</th><th>Class</th><th>Address</th>
</tr><tr>
<td>Aditya</td><td>10</td><td>Sikandrabad</td>
</tr><table>
OUTPUT
Name Class Address
Aditya 10 Sikandrabad
<table height=“50%” width=“50%” border><tr> <td> Name</td><td>Class</td><td>Address
</td> </tr><tr> <td> Aditya</td><td>10</td><td>
Sikandrabad </td> </tr><tr> <td> Akash</td><td>10</td><td> Khurja
</td> </tr><tr> <td> Ajay</td><td>10</td>Ghaziabad </td>
</tr></table>
Use of “WIDTH” and HEIGHT” Attribute
Output of Table
Name Class Address
Aditya 10 Sikandrabad
Akash 10 Khurja
Ajay 10 Ghaziabad
Table with Two Colored Lines
<table border><tr bgcolor=“pink”> <th>Name
<th>Class</th></tr><tr bgcolor=“silver”>
<td>Aditya <td>10</td></tr></table>
Name Class
Aditya 10
Input code Output
Use of ‘ALIGN’ Attribute
<table border><tr bgcolor=“pink”> <th>Name
<th>Class</th></tr><tr bgcolor=“silver” align=“center”>
<td>Aditya <td>10</td></tr></table>
Name Class
Aditya 10
HTML Code Output
Note: You can also use here: ‘align=“right”>’
Use of ‘CAPTION’ Attribute in Table
<table border><caption> My Table</caption><tr bgcolor=“pink”> <th>Name
<th>Class</th></tr><tr bgcolor=“silver” align=“center”>
<td>Aditya <td>10</td></tr></table>
Name Class
Aditya 10
HTML Code Output
My Table
Note: You can also use here: ‘align=“right”>’
Use of ‘CAPTION’ Attribute in Table with different color…
<table border><caption> <font color=“red”>My Table</font></caption><tr bgcolor=“pink”> <th>Name
<th>Class</th></tr><tr bgcolor=“silver” align=“center”>
<td>Aditya <td>10</td></tr></table>
Name Class
Aditya 10
HTML Code Output
My Table
Note: You can also use here: ‘align=“right”>’
Use of COLSPAN in a Table…
<table border=“1”> <tr>
<th colspan=“2”>I carry 2 Columns</th></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
I carry 2 Columns
1 2
3 4
HTML CODE OUTPUT
Use of ROWSPAN in a Table…
<table border=“1”> <tr>
<th rowspan=“2”>I carry 2 Rows</th>
<td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
HTML CODE OUTPUT
I Carry 2 Rows1 2
3 4