This is simple slider for web designer. If you know advance html then you can ignore this otherwise you can read. You can also knock me to get more information...
HTML forms have been the bane of web developers for years. Not anymore!
With HTML5 you may learn to love forms. Imagine a day when you can validate a form without any JavaScript. Date pickers, place holder text, pattern matching, required fields, auto focus, error handling, all without JavaScript? That day is not as far off as you think. In this session we'll discuss new to HTML5 form input types and attributes. We can't promise that you'll love creating web forms, but you will gain a new, exciting appreciation.
We'll learn all about creating dynamic web forms with form validation without the use of javascript.
Sneak peak into the presentation...
The new HTML5 input types
Controlling what keyboard types gets displayed on touch keyboards, including the iPad and iPhone,
Placeholder Attribute: Adding native placeholder text and clearing on focus
Native form validation: Error messages with no javascript
Date & time input types: The jQuery datepicker, without jQuery.
Providing focus to a form element, including focus on invalid input without javascript.
CSS & Forms: Stylizing form elements based on current states of required and invalid
Pattern attribute - Pattern matching for form input: with regular expressions and no javascript
element and list attribute- providing autosuggest on inputs, again no javascript.
Browsers are beginning to support HTML5 web forms. In this session we'll learn how to implement them.
The Internet is growing at an incredible pace, and we want everybody to be a part of this growth. Basic HTML was created for the beginner to learn about designing web pages from the ground up and for the advanced web designers that want to revise a few HTML tricks.This downloadable tutorial is designed to help you learn about HTML and web page design.
Css Founder is Website Designing Company working with the mission of Website For Everyone Website Start From 999/-* More Packages are available. we are best company in website designing company in Delhi, as we are also working in Website Designing company in Mumbai.
Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
Introduction to jQuery Mobile - Web Deliver for AllMarc Grabanski
Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.
This is simple slider for web designer. If you know advance html then you can ignore this otherwise you can read. You can also knock me to get more information...
HTML forms have been the bane of web developers for years. Not anymore!
With HTML5 you may learn to love forms. Imagine a day when you can validate a form without any JavaScript. Date pickers, place holder text, pattern matching, required fields, auto focus, error handling, all without JavaScript? That day is not as far off as you think. In this session we'll discuss new to HTML5 form input types and attributes. We can't promise that you'll love creating web forms, but you will gain a new, exciting appreciation.
We'll learn all about creating dynamic web forms with form validation without the use of javascript.
Sneak peak into the presentation...
The new HTML5 input types
Controlling what keyboard types gets displayed on touch keyboards, including the iPad and iPhone,
Placeholder Attribute: Adding native placeholder text and clearing on focus
Native form validation: Error messages with no javascript
Date & time input types: The jQuery datepicker, without jQuery.
Providing focus to a form element, including focus on invalid input without javascript.
CSS & Forms: Stylizing form elements based on current states of required and invalid
Pattern attribute - Pattern matching for form input: with regular expressions and no javascript
element and list attribute- providing autosuggest on inputs, again no javascript.
Browsers are beginning to support HTML5 web forms. In this session we'll learn how to implement them.
The Internet is growing at an incredible pace, and we want everybody to be a part of this growth. Basic HTML was created for the beginner to learn about designing web pages from the ground up and for the advanced web designers that want to revise a few HTML tricks.This downloadable tutorial is designed to help you learn about HTML and web page design.
Css Founder is Website Designing Company working with the mission of Website For Everyone Website Start From 999/-* More Packages are available. we are best company in website designing company in Delhi, as we are also working in Website Designing company in Mumbai.
Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
Introduction to jQuery Mobile - Web Deliver for AllMarc Grabanski
Mobile web development frameworks are targeting the builtin web browsers on iPhone and Android only; however, jQuery mobile has in a different vision, one that will reach the largest distribution of phones possible. Leveraging the ways of progressive enhancement, your website can be viewed in raw HTML on old mobile phones and then enhanced with nice CSS styles across mobile platforms that have a decent CSS and JavaScript support. In this session, Grabanski gives you his list of reasons to use jQuery mobile, an overview of the framework and will draw from his experiences building websites on top of jQuery Mobile.
This presentation covers HTML basics for website and web development by iFour Technolab Pvt. Ltd.
Presentation covers following broad topics.
- Introduction To HTML
- Creating HTML Pages
- HTML Structure
- HTML Code Formatting
- HTML Structure
- HTML Code Formatting
- First HTML Page
- First HTML Page: Tags
- Tags Attributes
- Headings and Paragraphs
- Text Formatting
- Block and Inline Elements
- HTML Tables
- Form Fields
Web Designing Training in Ambala ! BATRA COMPUTER CENTREjatin batra
Are you in search of Web Designing training in Ambala?
Now your search ends here... Batra Computer Centre provides you the best training in Ambala Cantt. We provide training in Basics of Computers, training in Programming Languages C, C++, HTML, PHP,Web Designing,WebDevelopment,Seo,Smo and training many other courses also provided here.
This is the basic Web design and development slide. From here you can practice HTML, CSS, PHP, MySql, and JavaScript. I do believe that this is a very effective slide for the beginner who wants to learn Basic Web design and development.
Basics of html for web development by software outsourcing company indiaJignesh Aakoliya
This presentation provides overview of HTML basics for web development - by Software outsourcing company in India, iFour Technolab Pvt. Ltd. - http://www.ifourtechnolab.com
Intro to mobile web application developmentzonathen
Learn all the basics of web app development including bootstrap, handlebars templates, jquery and angularjs, as well as using hybrid app deployment on a phone.
HTML from A to Z
HTML Basics : Basics-Semantic Elements-Attributes-Block and Inline Elements-Forms-Responsive Web Design-XHTML…..
HTML for Text Formatting : Text formatting-Links-Tables-Lists-Symbols-Space…
HTML Visuals and Media : Layout-Classes-Colors-Images-Multimedia…
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvZahouAmel1
Lecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
The Metaverse and AI: how can decision-makers harness the Metaverse for their...Jen Stirrup
The Metaverse is popularized in science fiction, and now it is becoming closer to being a part of our daily lives through the use of social media and shopping companies. How can businesses survive in a world where Artificial Intelligence is becoming the present as well as the future of technology, and how does the Metaverse fit into business strategy when futurist ideas are developing into reality at accelerated rates? How do we do this when our data isn't up to scratch? How can we move towards success with our data so we are set up for the Metaverse when it arrives?
How can you help your company evolve, adapt, and succeed using Artificial Intelligence and the Metaverse to stay ahead of the competition? What are the potential issues, complications, and benefits that these technologies could bring to us and our organizations? In this session, Jen Stirrup will explain how to start thinking about these technologies as an organisation.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™UiPathCommunity
In questo evento online gratuito, organizzato dalla Community Italiana di UiPath, potrai esplorare le nuove funzionalità di Autopilot, il tool che integra l'Intelligenza Artificiale nei processi di sviluppo e utilizzo delle Automazioni.
📕 Vedremo insieme alcuni esempi dell'utilizzo di Autopilot in diversi tool della Suite UiPath:
Autopilot per Studio Web
Autopilot per Studio
Autopilot per Apps
Clipboard AI
GenAI applicata alla Document Understanding
👨🏫👨💻 Speakers:
Stefano Negro, UiPath MVPx3, RPA Tech Lead @ BSP Consultant
Flavio Martinelli, UiPath MVP 2023, Technical Account Manager @UiPath
Andrei Tasca, RPA Solutions Team Lead @NTT Data
4. Why this workshop?
• Web Technology is a predominant field of Information Technology/Computer
Science and has an ever growing scope.
• Internet is becoming more and more common and people like to spend time
on the internet.
• Very interesting field.
• No costs involved in experimentation process like robotics.
• Lots of IDE’s(Integrated Development Environments) available to help.
Example: Microsoft Web Expression, Adobe Dreamweaver, Microsoft Visual
Studio, Netbeans, Eclipse, Adobe Photoshop etc.
• Why Adobe Photoshop??
• What Web sites can do at present??
• They can supply enormous amount of information, used for advertising,
promoting events, online reservations, e-commerce, managing colleges, online
banking, etc.
• What can be a possible future of websites?
• May be sites working as smooth as windows applications.
5. Terminology
Web:
The World Wide Web, abbreviated as WWW and
commonly known as the Web, is a system of
interlinked hypertext documents accessed via the Internet. With
a web browser, one can view web pages that may contain text,
images, videos, and other multimedia and navigate between
them via hyperlinks.
Internet:
The Internet is a global system of
interconnected computer networks that was enabled by the
standard Internet Protocol Suite (TCP/IP) to eventually serve
billions of users worldwide. It is a network of networks that
consists of millions of private, public, academic, business, and
government networks, of local to global scope, that are linked by
a broad array of electronic, wireless and optical networking
technologies.
6. Terminology cont…
Technology: Technology is the usage and knowledge
of tools, techniques, crafts, systems or methods of
organization in order to solve a problem or serve some
purpose.
Client/Browser
Server
URL
Types of web pages:
Static page
Active Page
Dynamic Page
7. What is web designing
Web Designing is an art.
First thing you need is imagination, then
comes the use of technologies.
First of all decide the layout of your web
page.
Then you have all the technologies
available to make it visible on a web
page.
8. Special tip for those who do not
have command over programming
Try to understand code and modify it according to your
requirements. Your goal is to achieve a functionality not
to make each and every thing on your own.
Note: You need to use your brain more than your
hands in this field because writing code which you
already have and understand very well is a waste of
time.
9. Client Server Architecture
(static page)
Client(Browser)
Server
Http request(abc.html)
Http response(abc.html)
Browser can
interpret HTML
only.
Fetches the static
page on disk
10. Client Server Architecture
(dynamic page)
Client(Browser)
Server
1.Http request(abc.aspx)
6.Http response(Generated
HTML)
Browser can
interpret HTML
only (No dynamic
code is sent to the
client)
4.May refer to external
sources such as web
services or databases
according to script.
5.HTML is generated
2.Locates the
page on disk
3.Executes the
scripts on
runtime engine.
12. What is HTML?
This is the very basic technology without which
websites cannot be created.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup
language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages.
Browser understands HTML only.
13. HTML is written in the form of HTML
elements consisting of tags, enclosed in angle
brackets(like <html>), within the web page
content. HTML tags normally come in pairs like
<h1> and </h1>. The first tag in a pair is
the start tag, the second tag is the end tag (they
are also called opening tags and closing tags).
Doctype declaration is not necessary in an html
document but it tells the browser to follow
HTML version specified.
14. The purpose of a web browser (like Internet
Explorer or Firefox) is to read HTML documents
and display them as web pages. The browser does
not display the HTML tags, but uses the tags to
interpret the content of the page:
Most popular web browsers
Mozilla Firefox
Google Chrome
Opera
Apple Safari
Internet Explorer (worst support for the best technologies)
15. Structure of HTML Document
•The text between <html> and </html> describes the web page
•The text between <head> and </head> is not displayed on the webpage.
•The text between <body> and </body> is the visible page content
•The text between <h1> and </h1> is displayed as a heading
•The text between <p> and </p> is displayed as a paragraph
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
16. HTML headings
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
18. Anchor
<html>
<body>
<a href="http://www.warecon.in">
This is a link</a>
</body>
</html>
On clicking this link you can navigate to a new page or even set
any software or image on download. It all depends on the href
attribute.
You can even place an image within the anchor tag to make
link on the image.
20. Comments
<html>
<body>
<!— I do not want to show this text on my webpage!>
<img src="w3schools.jpg" width="104" height="142" />
</body>
</html>
21. Tags and attributes
Think of tag as an object and attribute as one of its property it
becomes really easy to understand.
As an example consider a computer and a car.
Car will have attributes such as colour, horse power , mileage
etc.
Whereas a computer will have attributes like colour, Hard
Disk size, ram size etc.
We can see that some attributes are unique to an object and
some are not.
Now just map this concept to what we have just studied.
Consider two tags we have just studied <a> and <img>.
<a> has attributes such as href ,id,name etc.
<img> has atributes such as src,id,name,height,width etc.
26. HTML Forms
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes,
radio-buttons, submit buttons and more. A form can also contain
select lists, textarea, fieldset, legend, and label elements.
<html>
<body>
<form action="">
<input type="radio" name=“gender" value="male" /> Male<br />
<input type="radio" name=“gender" value="female" /> Female
</form>
<p><b>Note:</b> When a user clicks on a radio-button, it becomes
checked, and all other radio-buttons with equal name become
unchecked.</p>
</body>
</html>
36. <!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240"
controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
37. Attribute Value
audio
muted
autoplay
autoplay
controls
controls
height
loop
pixels
loop
poster
url
preload
preload
src
width
url
pixels
Description
Defining the default state of the audio.
Currently, only "muted" is allowed
If present, then the video will start
playing as soon as it is ready
If present, controls will be displayed,
such as a play button
Sets the height of the video player
If present, the video will start over
again, every time it is finished
Specifies the URL of an image
representing the video
If present, the video will be loaded at
page load, and ready to run. Ignored if
"autoplay" is present
The URL of the video to play
Sets the width of the video player
41. Canvas(Gradient Example)
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#020000");
grd.addColorStop(1,"#AAFF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body> </html>
42. Canvas(Background image)
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="img_flwr.png"
cxt.drawImage(img,0,0);
</script>
</body>
</html>
43. Web Storage
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>
<p>Refresh the page to see the counter increase.</p>
<p>Close the browser window, and try again, and the counter will
continue.</p>
</body>
</html>
44. Session Storage
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
<p>Refresh the page to see the counter increase.</p>
<p>Close the browser window, and try again, and the counter has been
reset.</p>
</body>
</html>
45. New input types
Input type
email
url
number
range
Date pickers
search
color
IE
No
No
No
No
No
No
No
Firefox
No
No
No
No
No
No
No
Opera
9.0
9.0
9.0
9.0
9.0
11.0
11.0
Chrome
No
No
7.0
4.0
No
No
No
Safari
No
No
No
4.0
No
No
No
48. Autocomplete
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp" method="get"
autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email"
autocomplete="off" /><br />
<input type="submit" />
</form>
<p>Fill in and submit the form, then reload the page to
see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but
"off" for the e-mail field.</p>
</body>
</html>
50. Spelling Check and editing
<!DOCTYPE HTML>
<html>
<body>
<p contenteditable="true"
spellcheck="true">This is a praggagraph. It is
editable. Try to change this text.</p>
</body>
</html>
51. Embed flash into your
webpage
<!DOCTYPE HTML>
<html>
<body>
<embed src="helloworld.swf"
height="500px" width="500px" />
</body>
</html>
55. What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML
elements
Styles were added to HTML 4.0 to solve a
problem
External Style Sheets can save a lot of
work
External Style Sheets are stored in CSS files
56. CSS Syntax
A CSS rule has two main parts: a selector, and one or more
declarations:
The selector is normally the HTML element you want to
style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change.
Each property has a value.
57. Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
External Style Sheet
An external style sheet is ideal when the style is applied to many
pages. With an external style sheet, you can change the look of
an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag goes inside
the head section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
58. Three Ways to Insert CSS
An external style sheet can be written in any text
editor. The file should not contain any html tags.
Your style sheet should be saved with a .css
extension. An example of a style sheet file is shown
below:
hr {color:sienna;}
p {margin-left:20px;}
body {backgroundimage:url("images/back40.gif");}
59. Three Ways to Insert CSS
Internal Style Sheet
An internal style sheet should be used when a single
document has a unique style. You define internal styles in
the head section of an HTML page, by using the <style> tag,
like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {backgroundimage:url("images/back40.gif");}
</style>
</head>
60. Three Ways to Insert CSS
Inline Styles
An inline style loses many of the advantages of style
sheets by mixing content with presentation. Use this
method sparingly!
To use inline styles you use the style attribute in the
relevant tag. The style attribute can contain any CSS
property. The example shows how to change the
color and the left margin of a paragraph.
<p style="color:sienna;margin-left:20px">This
is a paragraph.</p>
61. All CSS Background Properties
Property
background
background-attachment
background-color
background-image
background-position
background-repeat
Description
Values
Sets all the background properties in one
declaration
CSS
background-color
background-image
background-repeat backgroundattachment background-position
inherit
Sets whether a background image is fixed or scrolls scroll
with the rest of the page
fixed
inherit
Sets the background color of an element
color-rgb
color-hex
color-name
transparent
inherit
Sets the background image for an element
url(URL)
none
inherit
Sets the starting position of a background image
left top
left center
left bottom
right top
right center
right bottom
center top
center center
inherit
1
Sets if/how a background image will be repeated
1
repeat
repeat-x
repeat-y
no-repeat
inherit
1
1
1
1
62. Grouping Selectors
In style sheets there are often elements with the same style.
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
To minimize the code, you can group selectors.
Separate each selector with a comma.
In the example below we have grouped the selectors from the
code above:
Example
h1,h2,p
{color:green;}
63. Navigation Bars
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard
HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:
Example
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
href="default.asp">Home</a></li>
href="news.asp">News</a></li>
href="contact.asp">Contact</a></li>
href="about.asp">About</a></li>