HTML5 is the latest version of HTML that adds new elements and attributes. It is being developed by the W3C and WHATWG to make HTML more semantic, customizable and multimedia-capable. Key features of HTML5 include less complex header code, new semantic tags like <article> and <section>, multimedia embedding with <video> and <audio> tags, canvas drawing with JavaScript, and web storage with localStorage and sessionStorage objects. HTML5 aims to provide one standard way to embed multimedia without plugins and more options for storing data on the client-side.
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
In this slide, we will discuss about what are css, html and also javascript. These three languages are very powerful and must be mastered and understood by all programmers and "hackers".
This slide will give you a clear view on what are they and their functions. Please note that, this slide does not teach you how to write/program them. This slides is completely for any levels.
1) Easy to understand.
2) Comments are included to make you understand better!
3) Ready to go for any presentation.
4) Full of informations
5) Small but powerful
What makes it interesting?
- These languages are used in every websites on the internet.
Why them?
- Seek for yourself in the slide
Web Development with HTML5, CSS3 & JavaScriptEdureka!
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
This is a brief introduction about HTML5. You will learn that what is new in HTML5. I will tell what and when changes happened in HTML which Hyper Text markup language. Html is a language which is used to create web pages that we have seen on the internet. For website development and web hosting visit https://tekfold.com
In this slide, we will discuss about what are css, html and also javascript. These three languages are very powerful and must be mastered and understood by all programmers and "hackers".
This slide will give you a clear view on what are they and their functions. Please note that, this slide does not teach you how to write/program them. This slides is completely for any levels.
1) Easy to understand.
2) Comments are included to make you understand better!
3) Ready to go for any presentation.
4) Full of informations
5) Small but powerful
What makes it interesting?
- These languages are used in every websites on the internet.
Why them?
- Seek for yourself in the slide
Web Development with HTML5, CSS3 & JavaScriptEdureka!
With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
This presentation walks through essential points for developing and working with REST APIs or web services to communicate through various platforms. This also explains HTTP methods.
HTML is the backbone of Internet. Learn the basics of HTML, you can create your own website.
If you have any doubt contact me for more details. WhatsApp:8008877940
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
HTML5 Tutorial For Beginners - Learning HTML 5 in simple and easy steps with examples covering 2D Canvas, Audio, Video, New Semantic Elements, Geolocation, Persistent Local Storage, Web Storage, Forms Elements,Application Cache,Inline SVG,Document
This presentation walks through essential points for developing and working with REST APIs or web services to communicate through various platforms. This also explains HTTP methods.
HTML is the backbone of Internet. Learn the basics of HTML, you can create your own website.
If you have any doubt contact me for more details. WhatsApp:8008877940
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
HTML5 Home
HTML5 Forms
HTML5 Reference
HTML5 Tags
HTML5 Canvas
Audio And Video
HTML5 new features
New Elements
New Attributes
Full CSS3 Support
Video and Audio
2D/3D Graphics
Local Storage
Local SQL Database
Web Applications
Many are eagerly waiting for HTML5. What about you? Are you ready for this phase of advanced browsing experience and interactions; Are you ready to engage and delight your customers with a unique experience?
Cygnet Infotech welcomes you to this webinar to help you gear up for the "What", "When" and "Why" about HTML5. Join this 35 min session to learn more.
What You Will Learn in this Webinar
- HTML5 - What is it all about
- Reasons for moving to HTML5
- The Top 10 Tags in HTML5
- Browser Support for HTML5
- Working with HTML5
- How to move current websites to HTML5
- HTML5 for Mobile Applications
- Q&A
If you want to us to cover anything specific in this webinar, leave your message or suggestions at http://www.cygnet-infotech.com/webinars/html5-are-you-ready-for-it
HTML5 presented at the Fox Valley Computing Professionals on December 14, 2010. Explores the history, philosophy, and drama behind this popular new spec for the web, and looks at some of the key new features.
HTML5 has changed the Web as we know it. The newest markup language has some exciting features that, for example, make it easy to embed and play multimedia content on the web without having to use proprietary plugins like Adobe’s Flash.
In this webinar, learn:
What HTML5 is and what it can do
New HTML5 tags
Useful coding examples
Testing and validation of your site
Future of HTML5
Participants will be given server space to create their own page and will be required to have a basic HTML editor like Notepad, Notepad++ or Eclipse.
Modern Web Apps should be focused, rich, and gorgeous, but they also need to be FAST. After all, being rich and beautiful isn't always enough!
With web apps, faster is always better; nobody will ever complain that your site is too fast!
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
How to Create Map Views in the Odoo 17 ERPCeline George
The map views are useful for providing a geographical representation of data. They allow users to visualize and analyze the data in a more intuitive manner.
The French Revolution, which began in 1789, was a period of radical social and political upheaval in France. It marked the decline of absolute monarchies, the rise of secular and democratic republics, and the eventual rise of Napoleon Bonaparte. This revolutionary period is crucial in understanding the transition from feudalism to modernity in Europe.
For more information, visit-www.vavaclasses.com
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
The Art Pastor's Guide to Sabbath | Steve ThomasonSteve Thomason
What is the purpose of the Sabbath Law in the Torah. It is interesting to compare how the context of the law shifts from Exodus to Deuteronomy. Who gets to rest, and why?
2. Agenda
• HTML
• HTML versions
• HTML5
• How Did HTML5 Get Started?
• Rules For HTML5
• HTML5 Less Header Code
• No need for type attribute
• More Semantic HTML Tags
• Media Tags
• Canvas
• Web storage
3. HTML
• Hyper Text Markup Language is the
language for specifying the static content
of Web pages.
• Hyper Text refers to the fact that Web
pages are more than just text.
• can contain multimedia, provide links for jumping
within & without.
4. HTML
• Markup refers to the fact that it works by
augmenting text with special symbols (tags) that
identify structure and content type.
• There are many versions of HTML
5. HTML Versions
• HTML 2.0 November 24, 1995
• HTML 3.2 January 1997
• HTML 4.0 December 1997
• HTML 4.0 April 1998
was reissued with minor edits without
incrementing the version number.
7. HTML5
• HTML5 will be the new
standard for HTML, XHTML
• The previous version of
HTML came in 1999. The
web has changed a lot since
then.
8. HTML5
• HTML5 is still a work in
progress.
• However, most modern
browsers have some
HTML5 support.
9. How Did HTML5 Get Started?
• HTML5 is the cooperation between the
World Wide Web Consortium (W3C)
and the Web Hypertext Application
Technology Working Group (WHATWG).
10. How Did HTML5 Get Started?
• WHATWG was working with web forms
and applications, and W3C was working
with XHTML 2.0. In 2006, they decided to
cooperate and create a new version of
HTML
11. Rules For HTML5
• New features should be based on HTML,
CSS and JavaScript.
• Reduce the need for external plugins (like
Flash)
12. Rules For HTML5
• Better error handling.
• More markup to replace scripting.
• HTML5 should be device independent.
14. Less Header Code
• With HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8”>
<title>MSP</title>
</head>
15. Less Header Code
• Pre HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd
HTML 4.01 Transitional//EN" "http://
www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>MSP</title>
</head>
16. No need for type attribute
• With HTML5
<script src=”MSP.js”></script>
<link href=”MSP.css”></link>
17. No need for type attribute
• Pre HTML5
<script type=”text/javascript” src=”script.js”>
</script>
<link type=”text/css” href=”style.css”></link>
18. More Semantic HTML Tags
• Output
<output name="result"></output>
Attributes
o Name
o For
19. More Semantic HTML Tags
• progress
<progress id="p"
max=100><span>0</span>%</progress>
Attributes
o Value
o Max
20. More Semantic HTML Tags
• Meter
<meter min="0“ max="100“
value="75"></meter>
• Attributes
o Value
o Max
o Min
o High
o Low
o Form
21. More Semantic HTML Tags
• Details and Summary
The content of a <details> element should
not be visible unless the open attribute is
set.
User can show the content
22. More Semantic HTML Tags
<details>
<summary>coping 1999-2010</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site
are the property of the company Refsnes
Data.</p>
</details>
Attributes
o Open
23. More Semantic HTML Tags
• Address
• The <address> tag defines the contact
information for the author/owner of a
document or an article.
• If the <address> element is inside the
<body> element, it represents contact
information for the document.
24. More Semantic HTML Tags
• Address
• If the <address> element is inside an
<article> element, it represents contact
information for that article.
• The text in the <address> element usually
renders in italic. Most browsers will add a
line break before and after the address
element.
25. More Semantic HTML Tags
• Ex :
<address>
Written by <a
href="mailto:webmaster@example.com">Jon
Doe</a>.<br />
Visit us at:<br />
Example.com<br />
Box 564, Disneyland<br />
USA
</address>
26. More Semantic HTML Tags
• Figure
<figure>
<img src=“MSP.jpg" alt=“MSP">
<figcaption>Microsoft student
partner</figcaption>
</figure>
27. More Semantic HTML Tags
• Hgroup
<!DOCTYPE html>
<html>
<body>
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
</body>
</html>
28. More Semantic HTML Tags
• Article
Examples of possible articles:
forum post
newspaper article
blog entry
user comment
29. More Semantic HTML Tags
• Section
• The <section> tag defines sections in a
document. Such as chapters, headers,
footers, or any other sections of the
document.
30. More Semantic HTML Tags
• <article>
• <hgroup>
• <h1>Mobile Phones</h1>
• <h2>Different Smart Phones</h2>
• </hgroup>
• <p>Some of the more popular mobile smart phones</p>
• <section>
• <h1>Apple iPhone</h1>
• <p>A popular smart phone from Apple.</p>
• </section>
• <section>
• <h1>Android-based Phones</h1>
• <p>A series of smart phones that use the Google Android operating
system.</p>
• </section>
• </article>
31. More Semantic HTML Tags
• There are a lot of new tags at HTML5
which we used them a lot.
32. Media Tags
• Video
• Today, most videos are shown through a plug-in (like
flash). However, different browsers may have different
plug-ins.
• HTML5 defines a new element which specifies a
standard way to embed a video/movie on a web page
33. Media Tags
• <video width="320" height="240"
controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
• The control attribute adds video controls, like
play, pause, and volume.
34. Media Tags
Currently, there are 3 supported video formats for
the <video> element: MP4, WebM, and Ogg:
•MP4 = MPEG 4 files with H264 video codec and AAC audio codec
•WebM = WebM files with VP8 video codec and Vorbis audio codec
•Ogg = Ogg files with Theora video codec and Vorbis audio codec
Browser MP4 WebM Ogg
Internet YES NO NO
Explorer 9
Firefox 4.0 NO YES YES
Google YES YES YES
Chrome 6
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES
35. Media Tags
• Video/Dom
• The HTML5 <video> element also has
methods, properties, and events.
• There are methods for playing, pausing, and
loading, for example. There are properties
(e.g. duration, volume, seeking) that you can
read or set. There are also DOM events that
can notify you, for example, when the
<video> element begins to play, is paused, is
ended, etc
38. Media Tags
• Audio
• Today, most audio files are played through a plug-in (like
flash). However, different browsers may have different
plug-ins.
• HTML5 defines a new element which specifies a
standard way to embed an audio file on a web page: the
<audio> element
39. Media Tags
• <audio controls="controls">
• <source src="song.ogg" type="audio/ogg" />
• <source src="song.mp3" type="audio/mpeg" />
• Your browser does not support the audio element.
• </audio>
• The control attribute adds audio controls, like play,
pause, and volume.
40. Media Tags
Currently, there are 3 supported file formats for
the <audio> element: MP3, Wav, and Ogg:
Browser MP3 Wav Ogg
Internet YES NO NO
Explorer 9
Firefox 4.0 NO YES YES
Google YES YES YES
Chrome 6
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES
41. Canvas
• What is Canvas?
• The HTML5 canvas element uses
JavaScript to draw graphics on a web
page.
42. Canvas
• A canvas is a rectangular area, and you
control every pixel of it.
• The canvas element has several methods
for drawing paths, boxes, circles,
characters, and adding images.
43. Canvas
• Create a Canvas Element
• <canvas id="myCanvas" width="200"
height="100"></canvas>
44. Canvas
• Draw With JavaScript
• <script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
45. Web Storage
• HTML5 offers two new objects for storing
data on the client:
localStorage - stores data with no time
limit
sessionStorage - stores data for one
session
46. Web Storage
• Earlier, this was done with cookies.
Cookies are not suitable for large amounts
of data, because they are passed on by
EVERY request to the server, making it
very slow and in-effective.
47. Web Storage
• In HTML5, the data is NOT passed on by
every server request, but used ONLY
when asked for. It is possible to store large
amounts of data without affecting the
website's performance.
48. Web Storage
• The data is stored in different areas for
different websites, and a website can only
access data stored by itself.
• HTML5 uses JavaScript to store and
access the data
49. The localStorage Object
• The localStorage object stores the data
with no time limit. The data will be
available the next day, week, or year.
50. The localStorage Object
• How to create and access a localStorage:
<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " +
localStorage.lastname);
</script>
</body>
51. The sessionStorage Object
• The sessionStorage object stores the data
for one session. The data is deleted when
the user closes the browser window.
52. The sessionStorage Object
• How to create and access a
sessionStorage:
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
53. Review
• HTML
• HTML5
• How Did HTML5 Get Started?
• Rules For HTML5
• HTML5 Less Header Code
• No need for type attribute
• More Semantic HTML Tags
• Media Tags
• Canvas
• Web storage
The DOCTYPE tag always begins with an exclamation point and is always placed at thebeginning of the document, before any other tag. Most HTML tags are not case-sensitive,but the word DOCTYPE should always be uppercase.Using the DOCTYPE tag is like signing a contract. It is an optional tag, but when you useit, you are promising that your coding will conform to certain standards. When a Webbrowser encounters a DOCTYPE tag, it processes the page in standards mode. When itdoesn’t encounter the DOCTYPE tag, it assumes that there is something quirky about thepage, and processes the page in quirks mode. When the browser sees the tag <!DOCTYPEhtml>, it assumes you are using HTML5.