introduction to web technology

An Introduction to Web Technologies Vikram Singh Asst. Professor, Department of IT, JECRC, Jodhpur

Internet and WWW ,[object Object],[object Object],[object Object]

Why Internet? Use of internet ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Why Websites? Offline Apps vs. Online Apps ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Why Websites? Offline Apps vs. Online Apps ,[object Object],[object Object],[object Object],[object Object]

Technologies Overview List of Technologies ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Technologies Overview List of Technologies ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

How to choose a Technology? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML Hyper Text Markup Language ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

That’s how this… ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Some HTML Tags example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Basic Structure of HTML document Example of basic tag positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Attributes and Values ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tables ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Row 1, Cell 1 Row 1, Cell 2 Row 2, Cell 1 Row 2, Cell 2

Some Common Text Tags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ordered & Unordered Lists ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Anchor Tag (1) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Anchor Tag (2) ,[object Object],text only image only both

Images (1) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Images (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],<img src="smiley.gif" > <img src="./pix/mypic.jpg" > <img src="http://www.myweb.com/mail.gif" >

Tables (1) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tables (2) ,[object Object],<table border="1"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> Row 1, Cell 1 Row 1, Cell 2 Row 2, Cell 1 Row 2, Cell 2

CSS Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Why Use CSS? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What's "Cascading" All About? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What Can CSS Control? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Coding CSS Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],h2 { font-style : italic ; } rule property value selector declaration

CSS Rule Placement ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Linking To An External CSS ,[object Object],[object Object],[object Object],[object Object],<head> <link rel="stylesheet" type="text/css" href="mystyles.css"> </head>

Adding Styles To A Single Page ,[object Object],[object Object],<head> <style> h2 { font-style: italic; color: red; } p { font-family: "Verdana, Arial, sans- serif"; font-size: 12pt; color: blue; } </style> </head>

Adding Styles To An HTML Tag ,[object Object],[object Object],<h1 style = "font: small-caps bold italic; font-family: 'Verdana, Arial, sans-serif'; color: #008080; text-align: center;" >Gettysburg Address (First Draft)</h1> <p style = "font-family: Times; color: #800000; font-weight: bold;" > Four score and seven beers ago…</p>

JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Usage of JS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Conclusion & Future Work ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

introduction to web technology

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to introduction to web technology

Similar to introduction to web technology (20)

More from vikram singh

More from vikram singh (20)

Recently uploaded

Recently uploaded (20)

introduction to web technology