The document outlines topics related to web development including introductions to HTML, CSS, XML, JSON, and other web technologies. It discusses internet infrastructure, the world wide web, and how websites are planned and designed. The document also provides an outline and overview of key elements of HTML like headings, paragraphs, colors, fonts, links, and images.
An alphabetical tour of digital media landscape terminology, covering concepts from Ajax to Usability. Designed for training of journalists entering the digital media landscape.
Introduction to WWW, History of Web
Protocols governing web
Cyber Crime
Cyber Laws
IT Act 2000
Web Development Strategies, Planning and Development
Web Applications
Web Development Process
Web Team
An alphabetical tour of digital media landscape terminology, covering concepts from Ajax to Usability. Designed for training of journalists entering the digital media landscape.
Introduction to WWW, History of Web
Protocols governing web
Cyber Crime
Cyber Laws
IT Act 2000
Web Development Strategies, Planning and Development
Web Applications
Web Development Process
Web Team
The general direction in which something tends to move.
A general tendency or inclination. Current style. The Internet is a global revolution in communication – as long as You use letters from the Western alphabet.
People want their own domains in their own languages.
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
Code for Startup MVP (Ruby on Rails) Session 1Henry S
First Session on Learning to Code for Startup MVP's using Ruby on Rails.
This session covers the web architecture, Git/GitHub and makes a real rails app that is deployed to Heroku at the end.
Thanks,
Henry
Deep Dive: Oracle WebCenter Content Tips and Traps!Brian Huff
Collaborate 2014 presentation, a deep dive into Oracle WebCenter tips & traps in five common areas: metadata, contribution, consumption, security, and integrations.
WEB TECHNOLOGY:Web Essentials and Markup Language HTMLsmitawagh14
Web Essentials and Markup Language HTML
HTML
XHTML
CSS
XML
JavaScript
VBSCRIPT
DOM
DHTML
AJAX
E4X
WMLScript
SQL
ASP
ADO
PHP
.NET
SMIL
SVG
FLASH
Java applets
Java servlets
Java Server Page
The general direction in which something tends to move.
A general tendency or inclination. Current style. The Internet is a global revolution in communication – as long as You use letters from the Western alphabet.
People want their own domains in their own languages.
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
Code for Startup MVP (Ruby on Rails) Session 1Henry S
First Session on Learning to Code for Startup MVP's using Ruby on Rails.
This session covers the web architecture, Git/GitHub and makes a real rails app that is deployed to Heroku at the end.
Thanks,
Henry
Deep Dive: Oracle WebCenter Content Tips and Traps!Brian Huff
Collaborate 2014 presentation, a deep dive into Oracle WebCenter tips & traps in five common areas: metadata, contribution, consumption, security, and integrations.
WEB TECHNOLOGY:Web Essentials and Markup Language HTMLsmitawagh14
Web Essentials and Markup Language HTML
HTML
XHTML
CSS
XML
JavaScript
VBSCRIPT
DOM
DHTML
AJAX
E4X
WMLScript
SQL
ASP
ADO
PHP
.NET
SMIL
SVG
FLASH
Java applets
Java servlets
Java Server Page
Web scraping (web harvesting or web data extraction) is data scraping used for extracting data from websites. Web scraping software may access the World Wide Web directly using the Hypertext Transfer Protocol, or through a web browser.
"Python web development combines the simplicity of the language with powerful...softwaretrainer2elys
Title: Exploring Web Development with Python: A Comprehensive Guide
Introduction:
Web development has become an integral part of the modern technological landscape, and Python has emerged as a versatile and powerful language for building web applications. In this comprehensive guide, we will delve into the various aspects of web development using Python, exploring frameworks, libraries, and best practices to create dynamic and scalable web applications.
I. Understanding the Basics of Web Development:
1.1 HTML, CSS, and JavaScript:
Before delving into Python-specific frameworks, it's essential to grasp the fundamentals of web development. HTML provides the structure, CSS adds styling, and JavaScript adds interactivity to web pages. These technologies form the backbone of web development regardless of the programming language used.
1.2 Introduction to Python for Web Development:
Python's readability, simplicity, and extensive libraries make it an excellent choice for web development. Familiarizing yourself with basic Python syntax, data structures, and control flow is crucial before diving into web-specific frameworks.
II. Python Web Frameworks:
2.1 Flask:
Flask is a lightweight and easy-to-use web framework that follows the WSGI (Web Server Gateway Interface) standard. It's ideal for small to medium-sized projects and encourages simplicity and flexibility. We'll explore how to set up a basic Flask application, define routes, and render dynamic templates.
2.2 Django:
Django, a high-level web framework, follows the "batteries-included" philosophy, providing a robust set of features out of the box. From database migrations to user authentication, Django simplifies complex tasks and promotes best practices. We'll cover creating a Django project, defining models, and building views and templates.
III. Frontend Development with Python:
3.1 JavaScript Integration:
While Python handles server-side logic, JavaScript is crucial for client-side interactivity. We'll explore methods to integrate JavaScript frameworks like React or Vue.js into Python-based web applications, allowing for a seamless user experience.
3.2 Template Engines:
Python web frameworks often use template engines to dynamically generate HTML. We'll delve into popular template engines like Jinja2, understanding how to create dynamic and reusable templates for rendering data.
IV. Database Integration:
4.1 Relational Databases (SQLAlchemy):
Python frameworks offer seamless integration with relational databases through libraries like SQLAlchemy. We'll cover database modeling, querying, and migrations, ensuring efficient data storage and retrieval.
4.2 NoSQL Databases (MongoDB with Flask):
For projects requiring flexibility in data storage, we'll explore integrating Flask with MongoDB, a popular NoSQL database. This section covers basic CRUD operations and demonstrates the advantages of using a document-oriented database.
V. RESTful APIs and Web Services:
5.1 Building RESTful API
COLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdfKamal Acharya
The College Bus Management system is completely developed by Visual Basic .NET Version. The application is connect with most secured database language MS SQL Server. The application is develop by using best combination of front-end and back-end languages. The application is totally design like flat user interface. This flat user interface is more attractive user interface in 2017. The application is gives more important to the system functionality. The application is to manage the student’s details, driver’s details, bus details, bus route details, bus fees details and more. The application has only one unit for admin. The admin can manage the entire application. The admin can login into the application by using username and password of the admin. The application is develop for big and small colleges. It is more user friendly for non-computer person. Even they can easily learn how to manage the application within hours. The application is more secure by the admin. The system will give an effective output for the VB.Net and SQL Server given as input to the system. The compiled java program given as input to the system, after scanning the program will generate different reports. The application generates the report for users. The admin can view and download the report of the data. The application deliver the excel format reports. Because, excel formatted reports is very easy to understand the income and expense of the college bus. This application is mainly develop for windows operating system users. In 2017, 73% of people enterprises are using windows operating system. So the application will easily install for all the windows operating system users. The application-developed size is very low. The application consumes very low space in disk. Therefore, the user can allocate very minimum local disk space for this application.
Automobile Management System Project Report.pdfKamal Acharya
The proposed project is developed to manage the automobile in the automobile dealer company. The main module in this project is login, automobile management, customer management, sales, complaints and reports. The first module is the login. The automobile showroom owner should login to the project for usage. The username and password are verified and if it is correct, next form opens. If the username and password are not correct, it shows the error message.
When a customer search for a automobile, if the automobile is available, they will be taken to a page that shows the details of the automobile including automobile name, automobile ID, quantity, price etc. “Automobile Management System” is useful for maintaining automobiles, customers effectively and hence helps for establishing good relation between customer and automobile organization. It contains various customized modules for effectively maintaining automobiles and stock information accurately and safely.
When the automobile is sold to the customer, stock will be reduced automatically. When a new purchase is made, stock will be increased automatically. While selecting automobiles for sale, the proposed software will automatically check for total number of available stock of that particular item, if the total stock of that particular item is less than 5, software will notify the user to purchase the particular item.
Also when the user tries to sale items which are not in stock, the system will prompt the user that the stock is not enough. Customers of this system can search for a automobile; can purchase a automobile easily by selecting fast. On the other hand the stock of automobiles can be maintained perfectly by the automobile shop manager overcoming the drawbacks of existing system.
Overview of the fundamental roles in Hydropower generation and the components involved in wider Electrical Engineering.
This paper presents the design and construction of hydroelectric dams from the hydrologist’s survey of the valley before construction, all aspects and involved disciplines, fluid dynamics, structural engineering, generation and mains frequency regulation to the very transmission of power through the network in the United Kingdom.
Author: Robbie Edward Sayers
Collaborators and co editors: Charlie Sims and Connor Healey.
(C) 2024 Robbie E. Sayers
Vaccine management system project report documentation..pdfKamal Acharya
The Division of Vaccine and Immunization is facing increasing difficulty monitoring vaccines and other commodities distribution once they have been distributed from the national stores. With the introduction of new vaccines, more challenges have been anticipated with this additions posing serious threat to the already over strained vaccine supply chain system in Kenya.
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Dr.Costas Sachpazis
Terzaghi's soil bearing capacity theory, developed by Karl Terzaghi, is a fundamental principle in geotechnical engineering used to determine the bearing capacity of shallow foundations. This theory provides a method to calculate the ultimate bearing capacity of soil, which is the maximum load per unit area that the soil can support without undergoing shear failure. The Calculation HTML Code included.
Student information management system project report ii.pdfKamal Acharya
Our project explains about the student management. This project mainly explains the various actions related to student details. This project shows some ease in adding, editing and deleting the student details. It also provides a less time consuming process for viewing, adding, editing and deleting the marks of the students.
Explore the innovative world of trenchless pipe repair with our comprehensive guide, "The Benefits and Techniques of Trenchless Pipe Repair." This document delves into the modern methods of repairing underground pipes without the need for extensive excavation, highlighting the numerous advantages and the latest techniques used in the industry.
Learn about the cost savings, reduced environmental impact, and minimal disruption associated with trenchless technology. Discover detailed explanations of popular techniques such as pipe bursting, cured-in-place pipe (CIPP) lining, and directional drilling. Understand how these methods can be applied to various types of infrastructure, from residential plumbing to large-scale municipal systems.
Ideal for homeowners, contractors, engineers, and anyone interested in modern plumbing solutions, this guide provides valuable insights into why trenchless pipe repair is becoming the preferred choice for pipe rehabilitation. Stay informed about the latest advancements and best practices in the field.
1. Pune Vidyarthi Griha’s
COLLEGE OF ENGINEERING, NASHIK
“WebDevelopment
Process, Front EndTools”
By
Prof. Anand N. Gharu
(Assistant Professor)
PVGCOE Computer Dept.
01 Jan 2020Note: Thematerial to preparethis presentation hasbeentaken from internet andare generatedonly
for students referenceandnot for commercialuse.
2. Outline
Introduction to web technology, internet and www, Web site planning and
design issues,
HTML:structure of html document,HTMLelements:headings, paragraphs,
line break, colors & fonts, links, frames, lists, tables, imagesand forms,
Difference between HTMLandHTML5.
CSS:Introduction to Style Sheet,Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent,Transforming XMLinto XSLT,
DTD:Schema,elements, attributes,
Introduction to JSON.
3. WebTechnology
• Themethods by which computers communicate with
each other through the useof markup languages and
multimedia packagesis known asweb technology.
4. HTML
XHTML
CSS
XML
JavaScript
VBSCRIPT
DOM
DHTML
AJAX
E4X
WMLScript
Web Technologies
SQL
ASP
ADO
PHP
.NET
SMIL
SVG
FLASH
Java applets
Java servlets
Java Server Page
5. Internet andWWW
• Inter-network and World WideWeb
• Interlinked hypertext documents accessedusing HTTP
Protocol
• Client - Server architecture
6. What isInternet?
• The Internet is essentially a global network of
computing resources. Youcan think of the Internet as
aphysical collection of routers and circuits asaset of
sharedresources.
7. Internet-BasedServices
• Email − Afast, easy, and inexpensive way to communicate
with other Internet usersaround theworld.
• Telnet − Allows a user to log into a remote computer as
though it were alocalsystem.
• FTP− Allows a user to transfer virtually every kind of file
that can be stored on a computer from one Internet-
connected computer to another.
• UseNet news − A distributed bulletin board that offers a
combination news and discussion service on thousands of
topics.
• World Wide Web (WWW) − A hypertext interface to Internet
information resources.
8. What isWWW?
• WWWstandsfor World WideWeb.
• A technical definition of the World Wide Web is − All
the resources and users on the Internet that are using the
Hypertext TransferProtocol (HTTP).
• In simple terms, The World Wide Web is away of exchanging
information between computers on theInternet
9. What isHTTP?
• HTTP stands for Hypertext Transfer Protocol. This is the
protocol being used to transfer hypertext documents that
makesthe World Wide Webpossible.
• Astandard web addresssuch asGoogle.com is called aURL
and here the prefix http indicates itsprotocol
10. What isURL?
• URLstands for Uniform Resource Locator, and is used to
specify addresseson the World WideWeb.
• AURLwill havethe following format−
• protocol://hostname/other_information
• The protocol is followed by a colon, two slashes, and then the
domain name. The domain name is the computer on which
the resource islocated.
11. What isWebsite?
• which is a collection of various pages written in HTML
markup language.
• Each page available on the website is called a web page and
first page of anywebsite is called homepagefor that site.
12. What is WebServer?
• EveryWebsite sites on acomputer known asaWeb server.
• Thisserver is alwaysconnected to the internet.
• Every Web server that is connected to the Internet is given a unique
address.Forexample,68.178.157.132
• When you register a Web address, also known as a domain name,
such as tutorialspoint.com you have to specify the IP address of the
Web server that will host the site.
• ExamplesofWeb Servers
• ApacheTomcat
• IIS
• Glassfish
13. What is WebBrowser?
• WebBrowsers are software installed on your PC.Toaccessthe
Webyou need aweb browsers.
• ExamplesofWeb Browsers
• NetscapeNavigator,
• Microsoft Internet Explorer
• Mozilla Firefox.
14. What isISP?
• ISP stands for Internet Service Provider. They are the
companies who provide you service in terms of internet
connection to connect to theinternet.
• Youwill buy space on a Web Server from any Internet Service
Provider.Thisspacewill be usedto host yourWebsite.
• Examplesof ISPProviders
• Reliance
• Airtel
• BSNL
16. Howto choose aTechnology?
• Dependson:
• What is the type ofcontent?
• Who is your audience?
• Who will modify yourcontent?
• What are your FuturePlans?
• Availability of technology?
• Yourprevious experience?
• Portability and Datasharing
17. What isHTML?
• HTMLstandsfor Hyper TextMarkup Language.
• This is the language in which we write web pages for any
Website.
• This is a subset of Standard Generalized Mark-Up Language
(SGML)for electronic publishing, the specific standard used
for the World WideWeb.
18. What isHyperlink?
• Ahyperlink or simply alink is aselectable element in an
electronic document that servesasanaccesspoint to other
electronic resources.
• Typically,you click the hyperlink to accessthe linkedresource.
• Familiar hyperlinks include buttons, icons, imagemaps,and
clickable text links.
19. Web-DomainNames&ExtensionTypes
• Adomain name isthe part of your Internet addressthat comesafter
"www". Forexample, in Tutorialspoint.comthe domain name is
tutorialspoint.com.
• SomeDomain Extensionsare asmentioned below
• .com−Standsfor company/commercial, but it canbe usedfor anywebsite.
• .net −Standsfor network and isusuallyusedfor anetworkof
sites.
• .org−Standsfor organization and issupposedto be fornon-profit bodies.
• .us,.in −Theyare basedon your country namessothat youcan
gofor country specific domainextensions
• .biz−Answer extension on the Internet and canbe usedto indicate that this
site ispurely related tobusiness.
20. Website Designing steps
• Information
Gathering
• Planning
• Design
• Development
• Testingand Delivery
• Maintenance
21. WebsitePlanning
• Setgoalsand objectives.
• Createabudget
• Define roles andresponsibilities.
• Create content stragtegy
• Structure your website
• Create mock-up
• Start designing
• Test it out
• Maintain your website
22. Website DesignIssues
• Simplicity –lessanimations, texts, visuals
• Identity – web appsthrough design
• Consistency– e.g.uniform style, color,etc.
• Robustness – requiredfunction should notmiss
• Navigability – navigation should besimple
• Visualappeal - look & feel ofcontent
• Compatibility – compatible to all browsers, internetconnection
types, OS,etc.
23. Outline
Introduction to web technology, internet and www, Web site planning and
design issues,
HTML:structure of html document,HTMLelements:headings, paragraphs,
line break, colors & fonts, links, frames, lists, tables, imagesand forms,
Difference between HTMLandHTML5.
CSS:Introduction to Style Sheet,Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent,Transforming XMLinto XSLT,
DTD:Schema,elements, attributes,
Introduction to JSON.
27. What isHTML?
• HTMLis the standard markup language for creatingWeb
pages.
• HTMLstands for Hyper TextMarkup Language
• HTMLdescribes the structure of Web pagesusing markup
• HTMLelements are the building blocks of HTMLpages
• HTMLelements are represented by tags
• Browsers do not display the HTMLtags, but usethemto
render the content of thepage
28. ASimple HTMLDocument
Example
<html>
<head>
<title>PageTitle</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Explanation
• The<html>element is the rootelement
of an HTMLpage
• The<head>element contains meta
information about thedocument
• The<title> element specifies atitle for
the document
• The<body>element contains the visible
pagecontent
• The<h1>element defines alarge heading
• The<p>element defines a paragraph
29. HTMLTags
• HTMLtags are element names surrounded by angle brackets:
• <tagname>content goes here...</tagname>
• HTMLtags normally come in pairslike <p>and </p>
• Thefirst tag in apair is the start tag, the secondtag is theend
tag
• Theendtagis written like the start tag, but withaforward
slashinserted before the tag name
32. Creating HTMLPage
Write HTMLUsingNotepad or TextEdit
Savethe file on your computer using .html or
.htm extension and set the encoding to UTF-8
View the HTMLPagein YourBrowser
34. <!DOCTYPE HTML>
<html>
<head>
<ti t l e>My Fi r st HTML Page</ t i t l e>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTMLPage:Tags
34
Openingtag
Closingtag
An HTMLelement consists of an opening tag, aclosing tag and the content inside.
35. <!DOCTYPE HTML>
<html>
<head>
<ti t l e>My Fi r st HTML Page</ t i t l e>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTMLPage:Header
35
HTMLheader
38. HeadingsandParagraphs
38
• HeadingTags(h1 –h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
• Paragraph Tags
<p>This is my f i r s t paragraph</p>
<p>This i s my second paragr aph</p>
• Sections: div and span
<div styl e="backgr ound: skyblue;">
This is a div</div>
39. TextFormatting
• Textformatting tags modify the text between the opening tag andthe
closing tag
• Ex.<b>Hello</b> makes“Hello”bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
39
41. Hyperlinks: <a>Tag
• Link to adocument called cat.html on the sameserver in the
subdirectory stuff:
41
• Link to adocument called form.html on the sameserver in the
same directory:
<a href="form.html">Fill Our Form</a>
• Link to adocument called parent.html on the sameserver in the
parent directory:
• Link to an external Website:
<a href="http://www.devbg.org" target="_blank">BASD</a>
42. LinkstotheSameDocument– Example
42
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
. . . t h e rest of the table of contents...
< ! - - The document text follows here -->
<h2 id="section1">Introduction</h2>
. . . Section 1 follows here . . .
<h2 id="section2">Some background</h2>
. . . Section 2 follows here . . .
<h3 id="section2.1">Project History</h3>
. . . Section 2.1 follows here . . .
43. Images: <img>tag
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
Inserting an image with <img> tag:
<img src="/img/basd-logo.png">
Image attributes:
Example:
<img src="./php.png" a l t ="PHP Logo" />
43
44. a. Apple
b. Orange
c. Grapefruit
Ordered Lists: <ol>Tag
• Create an Ordered List using <ol></ol>:
• Attribute values for type are 1, A, a, I, or i
44
1. Apple
2. Orange
3. Grapefruit
A. Apple
B. Orange
C. Grapefruit Grapefruit
Apple
Orange
i.
ii.
iii.
I. Apple
II.Orange
III.
Grapefruit
<ol type="1" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
45. Unordered Lists: <ul>Tag
45
• Apple
• Orange
• Pear
o Apple
o Orange
o Pear
Apple
Orange
Pear
• Create an Unordered List using <ul></ul>:
<ul type="disk" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
• Attribute values for type are:
• disc, c i r c l e or square
46. Definition lists: <dl>tag
46
• Create definition lists using<dl>
• Pairsof text and associateddefinition; text is in <dt>tag,
definition in <dd>tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
• Renderswithout bullets
• Definition isindented
49. HTMLTableTags
Tag Description
<table> Defines a table
<th> Defines aheader cell in atable
<tr> Defines arow in atable
<td> Defines acell in atable
<caption> Defines atable caption
<colgroup>
Specifies agroup of one or more columns in atablefor
formatting
<col>
Specifies column properties for eachcolumn within a
<colgroup> element
<thead> Groups the header content in atable
<tbody> Groups the body content in atable
<tfoot> Groups the footer content in atable
50. HTMLTables(2)
• Start and end of atable
• Start and end of arow
• Start and end of acell in arow
50
<table> . . . </table>
<tr> . . . </tr>
<td> . . . </td>
57. Complete HTMLTables
• Tablerows split into three semantic sections: header,body
and footer
• <thead> denotes table header and contains <th>elements,
instead of <td> elements
• <tbody> denotes collection of table rows that contain the very
data
• <tfoot> denotes table footer but comesBEFOREthe <tbody>
tag
• <colgroup> and <col> define columns (most often used to set
column widths)
57
59. HTMLForm
• The<form> Element
• TheHTML<form>element defines aform that is used to
collect user input:
• Syntax
<form>
formelements
</form>
• Form elements are different types of input elements,like
• text fields,
• checkboxes,
• radio buttons,
• submit buttons, andmore.
60. The <input>Element
• The<input>element is the most
important form element.
• Here are some examples:
• Input TypeText
• Input TypePassword
• Input TypeSubmit
• Input TypeRadio
• Input TypeReset
• Input TypeCheckbox
• Input TypeButton …etc
• HTML5Input Types
• HTML5added severalnew input
types
• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
61. Input TypeText
• <input type="text">
defines aone-line text
input field:
• Example
• Thisis how the HTML
code above will be
displayed in abrowser:
63. Input TypeSubmit
• defines abutton for submittingform data toaform-handler.
• Theform-handler is specified in the form's actionattribute:
• Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"> <br>
Lastname:<br>
<input type="text" name="lastname"value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
64. Input TypeReset
• <input type="reset"> defines areset button that will reset all
form values to their defaultvalues:
• clickthe "Reset"button, the form-data will be reset.
• Example
65. Input TypeButton
• <input type="button"> defines a button:
• Example
• <input type="button" onclick="alert('Hello World!')"
value="Click Me!">
• After clicking above button it shows outputasbelow:
66. Input TypeRadio
• <input type="radio"> defines aradio button.
• Radiobuttons let auser select ONLYONEof alimited number of
choices:
• <form>
<input type="radio" name="gender" value="male" checked>Male<br>
<input type="radio" name="gender" value="female">Female<br>
<input type="radio" name="gender" value="other">Other
</form>
• Thisis how the HTMLcode above will be displayed in abrowser:
67. Input TypeCheckbox
• <input type="checkbox">defines a checkbox.
• Checkboxeslet auser select ZEROor MOREoptions of alimited
number of choices.
• Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have abike
<br>
<input type="checkbox" name="vehicle2" value="Car"> I have acar
</form>
• Thisis how the HTMLcode above will be displayed in abrowser:
71. The <textarea>Element
• <textarea name="message" rows="10" cols="30">
Thecat wasplaying in the garden.
</textarea>
• Therowsattribute specifies the visible number of lines ina
text area.
• Thecolsattribute specifies the visible width of atextarea.
76. HTMLFrames
• Framesprovide away to show multiple HTMLdocuments in a
single Web page
• Thepagecanbe split into separate views (frames) horizontally
and vertically
• Frameswere popular in the early agesof HTMLdevelopment,
but now their usageisrejected
• Framesare not supported by all user agents (browsers, search
engines, etc.)
• A<noframes> element is usedto provide content fornon-
compatible agents.
76
77. HTML<frame>Tag.
• Example
• Asimple three-framed page:
• <frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
• Each<frame> in a<frameset> canhavedifferent attributes, suchas
border, scrolling, the ability toresize,etc.
78. Outline
Introduction to web technology, internet and www, Web site planning and
design issues,
HTML:structure of html document,HTMLelements:headings, paragraphs,
line break, colors & fonts, links, frames, lists, tables, imagesand forms,
Difference between HTMLandHTML5.
CSS:Introduction to Style Sheet,Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent,Transforming XMLinto XSLT,
DTD:Schema,elements, attributes,
Introduction to JSON.
79.
80.
81. Outline
Introduction to web technology, internet and www, Web site planning and
design issues,
HTML:structure of html document,HTMLelements:headings, paragraphs,
line break, colors & fonts, links, frames, lists, tables, imagesand forms,
Difference between HTMLandHTML5.
CSS:Introduction to Style Sheet, Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent,Transforming XMLinto XSLT,
DTD:Schema,elements, attributes,
Introduction to JSON.
83. Introduction ofCSS
• Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pagespresentable.
• CSShandlesthe look and feel part of a webpage.
• Using CSS,you can control the color of the text, the style of fonts,
the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout
designs,variations in display for different devices and screen sizes as
well asavariety of other effects.
84. Advantages of CSS
• CSSsavestime
• Pagesload faster
• Easymaintenance
• Superior styles to HTML
• Multiple Device
Compatibility
• Global web standards
• Offline Browsing
• Platform Independence
86. CSS- Syntax
• ACSScomprises of style rules that are interpreted by the browser and then
applied to the corresponding elementsin your document.
• Stylerule ismadeof three parts−
• Selector − Aselector is an HTMLtag at which a style will be applied. This
could be anytag like <h1>or <table>etc.
• Property - Aproperty is atype of attribute of HTMLtag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color,
borderetc.
• Value- Valuesare assignedto properties. Forexample,color
property canhavevalue either redor #F1F1F1etc.
88. CSSselectors (1)
• CSS selectors are used to "find" (or select) HTMLelements based on
their element name, id, class,attribute, andmore.
• Theelement Selector
• The element selector selects elements based on the element
name.
• Youcanselect all <p>elements on apagelike this (in this case,all
<p>elements will be center-aligned, with ared textcolor):
• Example
• p{
text-align: center; color:
red;
}
90. CSSselectors (2)
• Theid Selector
• Theid selector usesthe id attribute of anHTMLelementto select aspecific
element.
• Theid of anelement should be unique within apage,sotheid selector is used
to select one uniqueelement!
• Toselect anelement with aspecific id, write ahash(#)
character, followed by the id ofthe element.
• Thestyle rule below will be applied to the HTMLelementwith id="para1":
• Example
• #para1{
text-align: center; color: red;
}
92. CSSselectors (3)
• TheclassSelector
• Theclassselector selectselements with aspecific class attribute.
• Toselect elements with a specific class,write aperiod (.) character,
followed by the name of theclass.
• In the examplebelow, all HTMLelements with class="center" will be
red andcenter-aligned:
• Example
• .center {
text-align: center;
color: red;
}
94. CSSselectors (4)
• TheclassSelectorcontinued….
• Youcanalsospecify that only specific HTMLelements should be affected by a
class.
• In the examplebelow, only <p>elements withclass="center" will becenter-
aligned:
• Example
• p.center {
text-align: center; color: red;
}
95. CSSselectors (5)
• GroupingSelectors
• If you have elements with the samestyle definitions, likethis:
• h1 {
text-align: center;
color: red;}
h2 {
text-align: center;
color: red;}
p {
text-align: center;
color: red;}
• It will be better to group the selectors, to minimize the code.
• h1, h2, p{
text-align: center;
color: red;
98. External StyleSheet
• With anexternal style sheet, you canchangethe look ofan
entire website by changingjust onefile!
• Eachpagemust include areference to the external stylesheet
file inside the <link> element. The<link> element goesinside
the <head>section:
• Example
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
100. Internal StyleSheet
• Aninternal style sheet maybe usedif one single pagehasa unique
style.
• Internal styles are defined within the <style>element,inside the
<head>section of anHTMLpage:
• Example
101. InlineStyles
• Aninline style maybe usedto apply aunique style for asingle element.
• Touseinline styles, add the style attribute to therelevant
element. Thestyle attribute cancontain anyCSSproperty.
• Theexamplebelow showshow to changethe color andthe left margin of a
<h1>element:
• Example
102. Text-related CSSProperties
• color – specifies the color of the text
• font-size – sizeof font: xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger
or numeric value
• font-family – comma separated font names
• Example: verdana, sans-serif, etc.
• Thebrowser loads the first one thatis available
• There should always be at least one genericfont
• font-weight can be normal, bold, bolder, l i g h t e r
or a number in range [100 … 900]
10
1
103. CSSRules for Fonts(2)
• font-style – styles the font
• Values:normal, i t a l i c , oblique
• text-decoration – decorates thetext
• Values:none, underline, line-trough,
overline, blink
• text-align – defines the alignment of text or
other content
• Values: l e f t , right, center, j u s t i f y
10
2
104. Shorthand FontProperty
• font
• Shorthand rule for setting multiple font properties at
the sametime
is equal to writingthis:
10
3
font:italic normal bold 12px/16px verdana
font-style:i t a l i c ;
font-variant:normal;
font-weight:bold;
font-size: 12px;
line-height:16px;
font-family:verdana;
105. Backgrounds
10
4
• background-image
• URLof image to be usedasbackground,e.g.:
background-image:url("back.gif");
• background-color
• Usingcolor and image and the sametime
• background-repeat
• repeat-x, repeat-y, repeat, no-repeat
• background-attachment
• fixed / scroll
106. Backgrounds(2)
10
5
• background-position: specifies vertical andhorizontal
position of the backgroundimage
• Vertical position: top, center, bottom
• Horizontal position: l e f t , center, r i g h t
• Both can be specified in percentage or other numerical values
• Examples:
background- posit i on: top l ef t ;
background- posit i on: - 5px50%;
107. Borders
• border-width: thin, medium, thick or numerical
value (e.g. 10px)
• border-color: color aliasorRGBvalue
• border-style: none, hidden, dotted, dashed, solid,
double, groove, ridge, inset, outset
• Eachproperty canbe defined separatelyfor left, top,bottom
and right
• border-top-style, border-left-color, …
10
6
108. Border ShorthandProperty
10
7
• border: shorthand rule for setting border properties at once:
border: 1px solid red
is equal to writing:
border-width:1px;
border-color:red;
border- st yle:sol i d;
• Specify different borders for the sides via shorthand rules:
border-top, border-left, border-right, border-
bottom
• When to avoidborder:0
109. Width andHeight
• width – defines numerical value for the width of element,
e.g. 200px
• height – defines numerical value for the height of element,
e.g. 100px
• Bydefault the height of an element is defined by its content
• Inline elements do notapply height, unless you changetheir
displaystyle.
10
8
110. Outline
Introduction to web technology, internet and www, Web site planning and
design issues,
HTML:structure of html document,HTMLelements:headings, paragraphs,
line break, colors & fonts, links, frames, lists, tables, imagesand forms,
Difference between HTMLandHTML5.
CSS:Introduction to Style Sheet,Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent, Transforming XMLinto XSLT,
DTD:Schema,elements, attributes,
Introduction to JSON.
111. XML
• Introduction to XML
• XMLis asoftware- and hardware-independent tool for storing
and transporting data.
• What isXML?
• XMLstands for eXtensible Markup Language
• XMLis amarkup language much like HTML
• XMLwas designed to store and transport data
• XMLwas designed to be self-descriptive
• XMLis aW3C Recommendation
112. XMLDoes Not DOAnything
• Thisnote is anote to Tovefrom Jani, stored asXML::
• <note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
• TheXMLabove is quite self-descriptive:
• It hassenderinformation.
• It hasreceiverinformation
• It hasaheading
• It hasamessagebody.
• But still, the XMLabove does not DOanything. XMLis just
information wrapped in tags.
113. The Difference BetweenXML
andHTML
• XMLand HTMLwere designed with different goals:
• XMLwasdesigned to carry data - with focus on what datais
• HTMLwasdesigned to display data - with focus on howdata
looks
• XMLDoesNot UsePredefined Tagslike HTMLtags
114. XMLUsed For(1)
• It simplifies datasharing
• It simplifies datatransport
• It simplifies platformchanges
• It simplifies dataavailability
115. XMLUsedFor(2)
• Many computer systems contain data in incompatible formats.
Exchanging data between incompatible systems (or upgraded systems)
is a time-consuming task for web developers. Large amounts of data
must be converted, and incompatible data is often lost.
• XML stores data in plain text format. This provides a software- and
hardware-independent wayof storing, transporting, and sharingdata.
• XML also makes it easier to expand or upgrade to new
operating systems,new applications, or new browsers, without
losingdata.
116. XMLExample1
• <?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Amit</to>
<from>Neha</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
• Savethe file with .xml extension and when run o/p is like below
118. XMLExample2- Books.xml
explanation
• XMLusesamuch self-describing syntax.
• Aprolog defines the XMLversion and the characterencoding:
• <?xml version="1.0" encoding="UTF-8"?>
• Thenext line is the root element of thedocument:
• <bookstore>
• Thenext line starts a<book> element:
• <book category="cooking">
• The<book> elements have 4 childelements: <title>,
<author>, <year>, <price>.
• Thenext line ends the bookelement:
• </book>
119. XSLT
• XSLT(eXtensible Stylesheet LanguageTransformations) is the
recommended style sheet languagefor XML.
• XSLTis far more sophisticated than CSS.
• With XSLTyou canadd/remove elements and attributes to or
from the outputfile.
• Youcanalso rearrange and sort elements, perform tests and
make decisions about which elements to hide and display,and
alot more.
• XSLTusesXPathto find information in an XMLdocument.
122. Step 2: XSLTConversion
criteria
• Weneed to define an XSLTstyle sheet document for the
above XMLdocument to meet the following criteria−
• Pageshould have atitle Students.
• Pageshould have atable of student details.
• Columns should have following headers:
• Roll No, First Name, LastName
• Tablemust contain details of the studentsaccordingly.
127. Outline
Introduction to web technology, internet and www, Web site planning and
design issues,
HTML:structure of html document,HTMLelements:headings, paragraphs,
line break, colors & fonts, links, frames, lists, tables, imagesand forms,
Difference between HTMLandHTML5.
CSS:Introduction to Style Sheet,Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent,Transforming XMLinto XSLT,
DTD:Schema,elements, attributes,
Introduction to JSON.
128. Introduction toDTD
• ADTDis aDocument TypeDefinition.
• ADTDdefines the structure and the legal elements
and attributes of an XMLdocument.
• With aDTD,independent groups of people canagree
on a standard DTDfor interchanging data.
• An application canuseaDTDto verify that XMLdata is
valid.
130. AnInternal DTDExpalnation
• TheDTDin previous slide isinterpreted likethis:
• !DOCTYPEnotedefines that the root element ofthis
document isnote
• !ELEMENTnotedefines that the note element mustcontain four
elements: "to,from,heading,body"
• !ELEMENTto defines the to element to be of type"#PCDATA"
• !ELEMENTfromdefines the from element to be oftype
"#PCDATA"
• !ELEMENTheadingdefines the heading element to be of type
"#PCDATA"
• !ELEMENTbodydefines the body element to be of type
"#PCDATA"
132. Building Blocks ofXMLDocuments
as perDTD
<body>some text</body>
<img src="computer.gif" />
< &
• Elements :
• Attributes :
• Entities :
• PCDATA:
•
PCDATAmeans parsed character data.
PCDATAistext that WILLbeparsedbya parser.
Character data is the text found between the start tag
and the end tag of an XMLelement.
• CDATA:
•
CDATAmeans character data.
CDATAistext that will NOTbeparsedbya parser.
133. Elements
• XMLelements canbe defined asbuilding blocks of an XML
document.
• Elements canbehave asacontainer to hold text, elements,
attributes, media objects or mix ofall.
• EachXMLdocument contains one or more elements, the
boundaries of which are either delimited by start-tagsand
end-tags, or empty elements.
• Example
• <name>Tutorials Point</name>
134. Attributes
• Attributes are part of the XMLelements.
• An element canhave any number of unique attributes.
• Attributes give more information about the XMLelementor
more precisely itdefines aproperty of the element.
• An XMLattribute is always aname-value pair.
• Example
• <imgsrc="flower.jpg"/>
• Here img is the element name whereas src is anattribute
name and flower.jpg is avalue given for the attribute src.
135. Entities
• Entities are placeholders in XML.Thesecanbe declared in the
document prolog or in aDTD.Entities canbe primarily categorizedas:
• Built-in entities
• Character entities
• General entities
• Parameter entities
• There are five built-in entities that play in well-formed XML,they are:
• ampersand: &
• Singlequote: '
• Greater than: >
• Lessthan: <
• Double quote: "
136. Advantages &Disadvantages
• Advantagesof using DTD
• Documentation- Youcandefine your own format forthe XML
files.
• Validation - It gives away to check the validity of XMLfiles by
checking whether the elements appear in the right order,
mandatory elements and attributes are inplace
• Disadvantagesof using DTD
• It does not support thenamespaces.
• It supports only the textstring datatype.
• It is not objectoriented.
137. Outline
Introduction to web technology, internet and www, Web site planning and
design issues,
HTML:structure of html document,HTMLelements:headings, paragraphs,
line break, colors & fonts, links, frames, lists, tables, imagesand forms,
Difference between HTMLandHTML5.
CSS:Introduction to Style Sheet,Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent,Transforming XMLinto XSLT,
DTD:Schema,elements, attributes,
Introduction to JSON.
138. JSON-Introduction
• JSON:JavaScriptObjectNotation.
• JSONis asyntax for storing and exchangingdata.
• JSONis text, written with JavaScriptobjectnotation.
• JSONis language independent *
• Whyuse JSON?
• Since the JSONformat is text only, it can easily be sent to and
from a server, and used asa data format by any programming
language.
• JavaScript has a built in function to convert astring, written in
JSONformat, into native JavaScriptobjects:
• JSON.parse()
• So,if you receive data from a server, in JSONformat, you can
useit like any other JavaScriptobject.
139. JSONSyntaxRules
• JSONsyntax is derived from JavaScriptobject notationsyntax:
• Data is in name/value pairs
• Data is separated by commas
• Curly braceshold objects
• Squarebrackets hold arrays
• JSONData - ANameandaValue
• JSONdata is written asname/valuepairs.
• Aname/value pair consistsof afield name (in doublequotes),
followed by acolon, followed by avalue:
• Example
• "name":"John"
140. JSONValues
• In JSON,values must be one of the following datatypes:
• astring
• anumber
• an object (JSONobject)
• an array
• aboolean
• null
• In JSON,string values must be written with doublequotes:
• { "name":"John"}
141. ObjectSyntax
• Example
• { "name":"John", "age":30, "car":null }
• JSONobjects are surrounded by curly braces{}.
• JSONobjects are written in key/valuepairs.
• Keysmust be strings, and values must be avalid JSONdata
type (string, number, object, array, boolean ornull).
• Keysand values are separated by a colon.
• Eachkey/value pair is separated by acomma.