Fundamentals of HTML5

Jan 18, 2013Download as PPTX, PDF2 likes1,636 views

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.

http://www.slideshare.net/chadmairn

@cmairn

Virtual Petting Zoo/Discussion

anymeeting.com/chadmairn

Want to
hangout?

gplus.to/chadmairn

In this webinar, learn:

• What HTML5 is and what it can do
• New HTML5 tags/elements/attributes
• Useful coding examples
• Uploading Files to a Web server
• Testing and validation of your site
• Future of HTML5

HTML = Hypertext Markup Language
• Displays web pages in a web browser.
• Web browser uses the tags to interpret the
content of the page.
• HTML elements consisting of tags enclosed in
angle brackets (e.g., <html>)
• Tags most commonly come in pairs like <h1>
and </h1>
• Some elements are unpaired (e.g., <img>)

• HTML5 will be the
new standard for
HTML.
• HTML 4.01 was born
in 1999.
• HTML5 is still a work
in progress.
• The major browsers
support many of the
new HTML5
elements and APIs.

HTML <!DOCTYPE> Declaration
The <!DOCTYPE> declaration is an instruction to the Web
browser telling it what version of HTML the page is
written in. HTML5 is not based on SGML, and therefore
does not require a reference to a DTD.
[Source: http://www.w3schools.com]

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

Here is what a reference to a DTD looks like …

<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Source: http://goo.gl/Bclus

New HTML5 Elements
<article> <mark>
<aside> <meter>
<audio> <nav>
<bdi> <output>
<canvas> <progress>
<command> <rp>
<datalist> <rt>
<details> <ruby>
<embed> <section>
<figcaption> <source>
<figure> <summary>
<footer> <time>
<header> <track>
<hgroup> <video>
<keygen> <wbr>

Creating an ebook using jQuery Mobile with <iframe> to embed video. No plugins!

Uploading Files
1. If you don't have an FTP application, then I recommend that you download
and install the following: http://filezilla-project.org/download.php

2. Upload files to your directory (e.g., lastname_firstname).

3. When you begin to work with the FTP client, you will need to enter the
following credentials:

•Host: marcomponline.com
•Username: chadm
•Password: java_cookie1

A quick screencast video demonstrating how to login using the FileZilla FTP
Client can be found at http://www.youtube.com/watch?v=9VaM_wv0aQ4.

4. You will need either a text editor (TextEdit on mac or Notepad on PC) or a
tool like Dreamweaver.

If you have problems, please contact Chad Mairn at (727) 537-6405 or
at chadmairn@gmail.com.

To test you work visit …

http://marcomponline.com/chadtest/Class/
LastName_FirstName/

Homework …
• Pick 2 HTML5 tags (experiment with their
attributes) and add them to your practice Web
site.

• Test and validate your site at
http://validator.w3.org/

• Please take good notes because I’d like to spend
some time next week discussing any issues you
may have had using HTML5.

Next Week …
• Share with the group good/bad experiences (e.g.,
what worked, what didn’t etc.)

• Other coding examples

• Google Analytics

• Discuss the future of HTML5

• Questions and answers …

Web pages are hypertext documents connected to the World Wide Web. They are displayed using web browsers, which are programs that retrieve and display HTML files. Web servers are computers that deliver web pages to users, and have IP addresses and domain names. There are two main types of websites: static and dynamic. The basic structure of an HTML web page includes tags such as <!DOCTYPE>, <html>, <head>, <title>, and <body>. Cascading Style Sheets (CSS) is a language used to describe the presentation and formatting of web pages, and can be inserted via external style sheets, internal style sheets, or inline styles.

InternetLarkha Flores

Telnet allows users to access remote computers and use their computing power, software, databases, and archives. The World Wide Web (WWW) organizes and accesses information on the internet using hypertext, which connects documents through links and enables rapid information retrieval. To use the WWW, a browser is needed to navigate between web pages and download information in various formats without requiring login to remote servers. Internet search engines help users locate websites containing useful information by allowing them to enter search terms and presenting relevant results.

Web Development PresentationTurnToTech

The document provides an overview of web development. It discusses how the web was created in 1989 by Tim Berners-Lee and the initial technologies of HTTP, HTML, and URLs. It then explains how a basic web application works with a browser connecting to a web server to request and receive HTML files and other resources. The document also summarizes key concepts in web development including front-end versus back-end code, common programming languages and frameworks, database usage, and standards that allow interoperability across systems.

Internet And How It Worksftz 420

The Internet was created by ARPA and the U.S. Department of Defense and uses TCP/IP protocols to connect networks together globally. It provides services like the World Wide Web, email, file transfers, and more through interconnected networks that route data between hosts and clients. Application programs also integrate features that allow publishing content to and viewing content from the Internet.

Introduction to Web ArchitectureChamnap Chhorn

The document provides an introduction to basic web architecture, including HTML, URIs, HTTP, cookies, database-driven websites, AJAX, web services, XML, and JSON. It discusses how the web is a two-tiered architecture with a web browser displaying information from a web server. Key components like HTTP requests and responses are outlined. Extension of web architecture with server-side processing using languages like PHP and client-side processing with JavaScript are also summarized.

Web development presentationVaishnavi8950

Web development involves creating websites for use on the internet or intranets. It can range from simple single page sites to complex applications and online businesses. The rise of the internet as a visual medium correlated with its adoption by the general public through graphical interfaces. Users started embracing the World Wide Web when visual web browsers emerged in the early 1990s. Even as web technology advanced, some early design techniques persevered.

Markup Languages Senthil Kanth

HTML - 5 - IntroductionAayushi Chhabra

Introduction To Web TechnologyArun Kumar

This document provides an overview of web technology concepts and requirements for developing a website. It discusses how the web works from a user perspective, including necessary hardware, software, and internet connections. It then explains in more detail how information is transmitted and received through web requests and responses. Examples are given of common web applications and how e-commerce transactions are processed securely. Lastly, it outlines key requirements to collect from business owners regarding the goals and functionality needed for their website.

PPT on Basic HTML TagsVinitaPaliwal1

The document describes basic HTML tags used to structure and format web pages. It outlines structural tags like <html> and <body> that define the overall page. Header tags <h1> to <h6> are used to label sections. Other tags format text, insert links and graphics, and create unordered, ordered and definition lists. The tags <p> and <br> are used to create paragraph breaks within the visible page content.

Website Introductiontmm13

Presentation of web designingsreejagiri

This document provides an overview of web design, including its key elements and principles. It defines web design as the process of creating and arranging visual elements like layout, color, graphics, and fonts to present content on web pages for end users. The document outlines the main elements of web design and discusses factors that contribute to creating user-friendly designs, such as navigation, multimedia, compatibility, and technology. It emphasizes the importance of consistency in design and provides recommendations for developing a website.

Basics of the Web PlatformSanjeev Verma, PhD

The document provides an introduction to basic web technologies including URIs, HTTP, HTML, CSS, and JavaScript. It discusses how web pages are built using HTML elements and tags to provide structure, CSS for styling, and JavaScript for client-side interactivity. URIs and HTTP are used to identify and transfer web resources, with HTTP methods like GET and POST determining the type of request. JSON and JavaScript APIs allow dynamic client-server communication.

Internet features (2nd topic)Anish Thomas

The document provides an overview of key Internet and World Wide Web technologies including: - The Internet provides global access to communication services and information through tools like email, chat, newsgroups, and file transfer. - The World Wide Web consists of web pages containing text and images linked through hyperlinks. Collections of linked pages on a common topic form a website. - Hypertext links allow users to navigate between related pages of information. HTML codes format web pages for display in web browsers which retrieve and present web resources. - Major technologies include browsers like Firefox and Internet Explorer, HTTP for transferring files between servers and clients, and web servers which process HTTP requests and host websites and web pages.

Introduction to Web TechnologyAashish Jain

History of internetBoopathi Nsb

The document provides a history of the development of the Internet from ARPANET in the late 1960s to the growth of the World Wide Web in the 1990s. It discusses how ARPANET, developed by the US Department of Defense, was the basis for the Internet and initially connected four university computers in 1969. It also summarizes that Tim Berners-Lee first proposed the idea for the World Wide Web in 1989 while working at CERN, and brought together hyperlinks, URLs, and browsers to create the World Wide Web in 1990, fueling rapid growth and commercial uses like Amazon in the following years.

Uniform Resource Locator (URL)Mary Daine Napuli

Web DevelopmentAditya Raman

Internet ppt JayashreeTalwar

Basic html structureJhaun Paul Enriquez

This document provides an overview of basic HTML structure and elements. It discusses what HTML is, how it uses markup tags to describe web page structure with elements like headings, paragraphs, and links. It also covers HTML syntax and documents, how to structure a basic HTML page with tags for the root, head, title, and body. The document demonstrates using block and inline elements and attributes to build out web pages. It provides examples of different text formatting tags and tags for things like quotes, lines, and comments.

Web Page Authoring 1yht4ever

InternetRima Doot

The document provides an overview of the internet including its definition, history, key terms, advantages, and disadvantages. It defines the internet as a global system of interconnected computer networks based on internet protocol. Some key points in its history include the creation of ARPANET in 1968 and the first nodes in 1970. Important internet terms defined include search engines like Google, web browsers, and email. Advantages listed are speedy communication and access to information, online advertising and commerce, and research capabilities. Disadvantages include inaccurate information, security issues like viruses and cybercrime, high installation costs, and lack of personal connection compared to other communication methods.

Basic Web Design Principles and ElementsEromRamos

The document provides guidance on basic web design principles and elements. It outlines 7 principles for effective web design: 1) use a consistent visual language, 2) maintain balance, 3) limit choices to avoid overwhelming users, 4) focus on high-quality content, 5) simplify designs, 6) use a grid-based layout, and 7) optimize page load times. It also describes 6 key design elements: navigation, visual design, content, web compatibility, color scheme, and typography. The document emphasizes usability, engaging the user, and conveying the intended message through thoughtful application of design principles and elements.

Introduction to Html5www.netgains.org

HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors

Web Site Design PrinciplesMukesh Tekwani

The document discusses several principles for designing effective websites, including designing for the medium by making the site portable across different browsers and devices, presenting information clearly with good structure and navigation, designing for the user by considering their needs and how they will interact with the site, and designing for the screen by considering its differences from paper.

JavascriptManav Prasad

This document introduces JavaScript, explaining that it allows for interactivity on web pages by manipulating the browser and reacting to user actions. It is embedded in HTML and executes on the client side for fast loading without a connection. JavaScript statements can include code combined with HTML tags. The document also discusses how JavaScript works with HTML forms to process and validate user input on web pages.

HTML Introduction, HTML History, HTML Uses, HTML benifitsPro Guide

Static and Dynamic webpageAishwarya Pallai

The document discusses the basics of HTML, which is used to design webpages through tags and attributes, and defines dynamic HTML (DHTML) as combining HTML, JavaScript, CSS, and scripting to make webpages interactive and able to change based on user inputs. Static webpages only use HTML and CSS and cannot dynamically change, while dynamic pages use client-side or server-side scripting to alter the content displayed to users.

Website designjagan asan

A webpage is a single HTML document, while a website consists of multiple related webpages. Proper layout and design are important for usability and aesthetics. Tables can be used to lay out page elements like menus, headers, content, and logos in a 2x2 grid. Factors like monitor resolution affect appropriate dimensions. Consistency in themes, fonts, colors, and graphics improves the user experience. Site maps help illustrate the connections between pages hierarchically.

how to make your own website - Website designVishnuSharmaDigital

More Related Content

What's hot (20)

Introduction To Web TechnologyArun Kumar

PPT on Basic HTML TagsVinitaPaliwal1

Website Introductiontmm13

Presentation of web designingsreejagiri

Basics of the Web PlatformSanjeev Verma, PhD

Internet features (2nd topic)Anish Thomas

Introduction to Web TechnologyAashish Jain

History of internetBoopathi Nsb

Uniform Resource Locator (URL)Mary Daine Napuli

Web DevelopmentAditya Raman

Internet ppt JayashreeTalwar

Basic html structureJhaun Paul Enriquez

Web Page Authoring 1yht4ever

InternetRima Doot

Basic Web Design Principles and ElementsEromRamos

Introduction to Html5www.netgains.org

Web Site Design PrinciplesMukesh Tekwani

JavascriptManav Prasad

HTML Introduction, HTML History, HTML Uses, HTML benifitsPro Guide

Static and Dynamic webpageAishwarya Pallai

Introduction To Web TechnologyArun Kumar

PPT on Basic HTML TagsVinitaPaliwal1

Website Introductiontmm13

Presentation of web designingsreejagiri

Basics of the Web PlatformSanjeev Verma, PhD

Internet features (2nd topic)Anish Thomas

Introduction to Web TechnologyAashish Jain

History of internetBoopathi Nsb

Uniform Resource Locator (URL)Mary Daine Napuli

Web DevelopmentAditya Raman

Internet ppt JayashreeTalwar

Basic html structureJhaun Paul Enriquez

Web Page Authoring 1yht4ever

InternetRima Doot

Basic Web Design Principles and ElementsEromRamos

Introduction to Html5www.netgains.org

Web Site Design PrinciplesMukesh Tekwani

JavascriptManav Prasad

HTML Introduction, HTML History, HTML Uses, HTML benifitsPro Guide

Static and Dynamic webpageAishwarya Pallai

Viewers also liked (9)

Website designjagan asan

how to make your own website - Website designVishnuSharmaDigital

English_teacher_CV pdf (1)Niaz Hussain

Niaz Hussain is an experienced English teacher seeking a new teaching position. He has over 20 years of experience teaching English at both the secondary and college levels in Pakistan. His areas of expertise include lesson planning, grammar instruction, and working with students from diverse backgrounds. He is committed to understanding students' individual needs and providing a caring and stimulating learning environment.

ROZEE-CV-10274262-1609554-farina-sadiqFarina Sadiq

This document is Farina Sadiq's resume. It summarizes her personal and professional details in 3 pages, including her contact information, objective, work experience, education, skills, awards, team participations, and references. Farina has over 5 years of experience in roles like Student Counselor, Client Services Officer, and DMS Officer. She holds an MBA in Banking and Finance and Bachelor of Commerce degree. Her skills include English, IT, hardware/software installation, and Microsoft Office. She is results-oriented with strong communication and leadership abilities.

HTML presentation for beginnersjeroenvdmeer

The document discusses the basic syntax and structure of HTML documents. It covers the main components of HTML including: 1. The DOCTYPE declaration which identifies the document type 2. Elements which contain the content and are wrapped in tags 3. Attributes which provide extra information about elements 4. Comments for annotating the code It provides examples of basic HTML code including the skeleton of an HTML document with headings, paragraphs, lists, links, and other common elements.

Introduction to htmlvikasgaur31

This document provides an introduction to HTML (Hypertext Markup Language) and describes some basic HTML tags and elements. It discusses how to structure an HTML document using tags like <html>, <head>, <title>, and <body>. It also covers text formatting tags, headings, paragraphs, hyperlinks, images, and more. The document contains examples of HTML code and the rendered output to demonstrate how various tags are used.

html5.pptNiharika Gupta

This document compares HTML4 and HTML5, discussing their versions over time. It notes that HTML5 introduced new structures like drag and drop, can embed video/audio without Flash, and handles inaccurate syntax, while HTML4 used older structures and required Flash for media. HTML5 also introduced new APIs, tags, and features like local storage that enhanced flexibility, while HTML4 had more limited traditional APIs and no local storage capability.

Sample resume pptlissarray

This document discusses different resume formats and provides tips for an effective resume. It describes chronological, functional, and combinational resume formats. It also lists components of a resume like contact information, objective statement, education, work experience, and skills. Finally, it provides 10 tips for choosing a resume format including making it easy to understand, using bullet points, limiting length, font selection, and avoiding mistakes or lies.

Html Pptvijayanit

HTML (Hypertext Markup Language) is used to define the structure and layout of web pages using a variety of tags and attributes. Some key points covered are: - HTML documents use tags like <html> enclosed in angle brackets to describe headings, paragraphs, links, images, and other content. - Tags normally come in pairs with opening and closing tags. - HTML can be used to format text, add images and tables, create lists and forms, structure pages using divs and frames, and more. - CSS (Cascading Style Sheets) is often used to define styles and layouts, separate from HTML content. - Forms allow users to enter data through

Website designjagan asan

how to make your own website - Website designVishnuSharmaDigital

English_teacher_CV pdf (1)Niaz Hussain

ROZEE-CV-10274262-1609554-farina-sadiqFarina Sadiq

HTML presentation for beginnersjeroenvdmeer

Introduction to htmlvikasgaur31

html5.pptNiharika Gupta

Sample resume pptlissarray

Html Pptvijayanit

Similar to Fundamentals of HTML5 (20)

[In Control 2010] HTML5Christopher Schmitt

This document discusses HTML5 and provides examples of new HTML5 elements and features such as audio, video, and the canvas element. It demonstrates how to add audio and video to a basic HTML5 page structure and provides code samples using the canvas element to draw shapes. It also discusses HTML5 support in different browsers and techniques for improving compatibility, such as using JavaScript to add support for new elements in older browsers.

High-Speed HTML5Peter Lubbers

Html 5Prabhakaran V M

The document provides an overview of HTML5 including why to use HTML5, basic HTML5 tags and their descriptions, HTML5 block level elements like header, footer, nav, main tags and their usage, HTML5 multimedia elements like audio and video tags, HTML5 advance tags like progress, meter tags, and HTML5 graphics elements like canvas and SVG tags to draw shapes. It also discusses the differences between HTML and HTML5 and provides examples of usage of various HTML5 elements.

Html5 shubelalShub

HTML5 is the new standard for HTML that provides new semantic elements and APIs to create more engaging web experiences. Some key features include less code needed in page headers, more semantic HTML tags like <article> and <nav> to structure content, media elements like <video> and <audio> to embed multimedia, the canvas element to draw graphics, and web storage APIs like localStorage to store data on the client side. HTML5 development is a collaboration between the W3C and WHATWG to create a standard that reduces the need for plugins, has better error handling, and makes the web more device independent.

Html 5Nguyen Quang

Delhi student's dayAnkur Mishra

HTML5 and Joomla! 2.5 TemplateMarvelic Engine Co., Ltd.

The document summarizes information presented at the 11th Thailand Open Source Software Festival about HTML5 and building templates for Joomla!. It provides an overview of HTML5, describing it as the new standard for HTML, how it has evolved since HTML 4.01 in 1999, and how major browsers now support many of its new elements and APIs. It also discusses building Joomla! templates, including template structure, using HTML5 elements and enabling scripts, CSS3 features like @font-face, vendor prefixes, and frameworks that support HTML5. Finally, it covers key HTML5 features for mobile devices and showcasing Joomla! templates on mobile.

The Rich Standard: Getting Familiar with HTML5Todd Anglin

HTML 5 may take some time to find full support in all major browsers, but you may be surprised to discover how many of HTML 5’s features are available today! HTML 5 is the next generation standard for web applications, and it promises to give plug-in based RIAs a serious challenge. In this demo heavy session, you’ll see HTML 5 in action and learn what you can do with today’s browser support for the new standard. If you’re building rich web applications and you’ve never touched HTML 5, this session is a must see.

Looking into HTML5 + CSS3Christopher Schmitt

The document discusses HTML5 and CSS3. It begins by looking at Flash and XHTML. It then covers new HTML5 elements like article, aside, audio and video. It discusses HTML5 audio and video formats and browser support. It provides examples of using Canvas, geolocation, offline applications and local databases in HTML5. It also discusses using CSS3 properties like fonts, shadows, gradients and rounded corners. Finally, it notes some criticisms of HTML5 and looks at the future of CSS3.

HTML5: A brave new world of markupChris Mills

The document provides an overview of HTML5, including: - A brief history of HTML and the development of HTML5. - An explanation of new HTML5 semantic elements like <header>, <nav>, <article>, <section>, and <footer> and how they improve the structure and readability of pages. - A discussion of new HTML5 form controls, validation, and output mechanisms like <progress>, <meter>, and <output>. - Introductions to new canvas scripting capabilities and native <video> and <audio> elements in HTML5.

LIS3353 SP12 Week 8Amanda Case

Html5Nisa Soomro

The document provides an overview of HTML5, including its history, new features, and elements. Some key points: - HTML5 is intended to be the new standard for HTML, updating the previous HTML 4.01 from 1999 for modern web use. - New features in HTML5 include elements for drawing graphics (<canvas>), media playback (<video> and <audio>), local storage, and improved form handling. - HTML5 aims to reduce the need for plugins like Flash and provide a common standard for multimedia, applications, and offline web apps across devices. - Major browsers continue adding support for new HTML5 features, though it remains a work in progress not yet fully standardized.

Basics of HTML5 for PhonegapRakesh Jha

HTML5 and Search Engine Optimization (SEO)Performics.Convonix

HTML Basics by software development company indiaiFour Institute - Sustainable Learning

The document provides an overview of HTML, including: - HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, links, and other elements. - New HTML5 features include new semantic elements, form elements, graphics and media elements, and input types. Removed elements have been replaced by newer standards. - Core HTML tags include <html>, <head>, <title>, <body>, and other text formatting tags. The <div> and <span> tags are used to group and style content. - Links, images, and tables can be added using the <a>, <img>, and <table> tags, respectively. Forms are

Html5baabtra.com - No. 1 supplier of quality freshers

HTML5Cygnet Infotech

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

HTML 5Prof. Erwin Globio

Prof. Erwin M. Globio gave a presentation on HTML5 that covered: 1) The history and development of HTML5 by groups like WHATWG and its adoption by W3C. 2) New features in HTML5 like audio, video, and canvas elements to enable richer content as well as geo-location APIs for mobile apps. 3) Issues with older standards like HTML4 and XHTML2 that HTML5 aims to address and improve cross-browser compatibility. 4) Questions around browser support for HTML5 and implications for web designers in adopting the new standard.

HTML5 Ana AbdElzaher

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.

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI

This document provides an overview of HTML5 technologies including HTML5 markup, microdata/RDFa, WebFonts, Canvas, MediaQueries, performance optimizations like SPDY and HTTP 2.0. It discusses specifications from the W3C and implementations by companies. Tools for testing responsive design, fonts and browser compatibility are also mentioned. The document is written in Japanese and references the author's blog for code samples.

[In Control 2010] HTML5Christopher Schmitt

High-Speed HTML5Peter Lubbers

Html 5Prabhakaran V M

Html5 shubelalShub

Html 5Nguyen Quang

Delhi student's dayAnkur Mishra

HTML5 and Joomla! 2.5 TemplateMarvelic Engine Co., Ltd.

The Rich Standard: Getting Familiar with HTML5Todd Anglin

Looking into HTML5 + CSS3Christopher Schmitt

HTML5: A brave new world of markupChris Mills

LIS3353 SP12 Week 8Amanda Case

Html5Nisa Soomro

Basics of HTML5 for PhonegapRakesh Jha

HTML5 and Search Engine Optimization (SEO)Performics.Convonix

HTML Basics by software development company indiaiFour Institute - Sustainable Learning

Html5baabtra.com - No. 1 supplier of quality freshers

HTML5Cygnet Infotech

HTML 5Prof. Erwin Globio

HTML5 Ana AbdElzaher

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI

More from St. Petersburg College (20)

Introducing Immersive Technologies for Libraries St. Petersburg College

Immersive Technologies imitate or extend our physical world via digital simulations to give us the sense of being completely absorbed into something. Spatial computing is a new form of immersive technology that combines computer vision and artificial intelligence to integrate visual content into the real-world around us. In this webinar: • Understand Immersive Technologies and see how they will impact everything ranging from education to entertainment. • Learn the differences between virtual, augmented, and mixed realities to introduce Spatial Computing. • Hear about the tools, devices, and platforms creating these new experiences. • Discuss potential issues these technologies may have when used in learning and teaching. • See what libraries can do to make use of immersive technologies to create new user experiences.

Introducing How to Build a Personal Voice Assistant (AIY Edition) St. Petersburg College

This document provides an introduction to building a personal voice assistant using the AIY Edition kit. It outlines the steps to assemble the hardware components, install the operating system, enable various Google APIs like the Google Assistant API and Cloud Speech-to-Text API, and modify code samples to interact with these APIs using voice. The document also briefly discusses different types of artificial intelligence and mentions some other tools like Dialogflow, Pandorabots, Scratch and Actions on Google for building conversational agents.

360° Tours and MoreSt. Petersburg College

This document discusses 360-degree photography and video technologies. It begins with an agenda that covers understanding 360 cameras, live 360 video streaming, best practices for creating 360 tours, and emerging trends. Examples of 360 cameras are provided. Formats for 360 video and the stitching process needed to create panoramic images are explained. Tools for viewing 360 content on smartphones and creating virtual reality experiences are presented. The document concludes by introducing 3D photography technologies like light field and volumetric video.

Taking the Magical Leap with Immersive Technologies in LibrariesSt. Petersburg College

Spatial computing is a new form of computing that combines computer vision and artificial intelligence to seamlessly integrate visual content into the real world around us. Read more about the tools, devices, platforms and implications for these technologies that can be used in learning, teaching and more. Presented at Computers in Libraries 2019 with Alex Haber (Head of Education at Magic Leap), Washington D.C.

Open Education Resources in LibrariesSt. Petersburg College

According to the Open Education Consortium, “sharing is probably the most basic characteristic of education: education is sharing knowledge, insights, and information with others, upon which new knowledge, skills, ideas, and understanding can be built." Whether they are purchased or freely acquired, librarians should be open to sharing their resources to everyone who wants to use them to enrich their lives through education. Open Education Resources (OER) include resources or tools that can be used and modified for free and without any legal or technical barriers, and when used properly can help foster a transparent culture of learning and engagement in our communities. In this webinar: • Learn what Open Education Resources (OER) are and how they can be used to engender trust, generate rigorous learning opportunities, and potentially lead to smarter decision-making strategies. • Discover a variety of OER and Open Access (OA) repositories to find accessible and authoritative resources, including textbooks, to use in curriculum. • Acquire OER strategies for developing a variety of educational opportunities using a variety of formats. •Understand various issues (e.g., GDPR) impacting OER in libraries.

How to Repurpose Library Space: Listening Lab EditionSt. Petersburg College

In 2008, iTunes "listening stations" were created in the library so students could have easy access to a large, albeit hidden, CD collection. Hundreds of CDs were digitized and added to an iTunes collection that was shared to other computers located inside the library. The idea was to be more like a record store where people can browse for and listen to music before they buy it; but, in this case, it would be before they bring the CDs home. Fast forward to 2018 and see the vision of this “Listening Lab” becoming more clear and distinct. In this webinar, - Learn how to digitize CDs and create a web page based on iTunes XML data. - Discover how the donated/purchased music collection is being cataloged and shared. - Explore a variety of programming ideas ranging from small concerts to workshops. - Understand the basics of valuing CDs, vinyl, VHS, and other mediums. - Highlight how people are using the space and interacting with the collection. - Use technologies like 3D printing, graphic design, and videography for promotional purposes.

Using CoSpaces Edu to Create Virtual and Augmented Reality ExperiencesSt. Petersburg College

Virtual Reality (VR), a simulated computer environment in three dimensions, is becoming more popular for gaming, movies, and education. According to CoSpaces Edu, their creative platform “complements traditional teaching methods by immersing students into a world where they can create, consume and connect with the curriculum on a completely new level, even through the revolutionary visual mediums of Virtual and Augmented Reality (AR).” Take what you learn here to create your own library programs to teach your users how to create meaningful and interactive experiences using VR/AR. In this webinar: - Discover what Virtual Reality is and gain a brief historical summary of it. - Learn and explore the differences between virtual, augmented, and mixed realities. - Explore 360° video and photograph technologies to include in a variety of formats. - Create your own 3D/360° environments using CoSpaces EDU to test in Virtual Reality. - Learn how to use CoSpaces EDU as a student and as a teacher.

Understanding Artificial IntelligenceSt. Petersburg College

Artificial Intelligence (AI) is quickly moving from a science-fiction concept to reality where machines now have the capability to perform tasks commonly associated with humans. We are starting to see our society transformed because of AI, so having a better understanding of what it is and what it is capable of doing is essential. AI helps power Amazon’s Alexa personal assistant, Google’s Deep Dream neural network, various marketing initiatives, health applications, the aviation industry, and much more. In this keynote, - Discover what Artificial Intelligence (AI) is and how it is becoming a “machine trait.” - Gain an appreciation of AI pioneers like John McCarthy, Alan Turing, Marvin Minsky et al. - Learn how AI works and explore some applications that could play a role in your library. - Reflect on the future of AI and the implications for libraries and society in general. Presented at the Leading Edge Libraries Conference, hosted by the Special Library Association Florida and Caribbean Chapter. Orlando, Florida. September 21, 2018. Keynote address.

Web Design Trends: 2018 EditionSt. Petersburg College

What’s New With 3D Design and Printing?St. Petersburg College

3D printing has been a focal point in library makerspaces for several years; however, it seems that interest in the technology has decelerated. The technology may have slowed down, but there is still a lot going on in this space, which can be overwhelming to keep up with it all. In this webinar: - Learn what 3D printing is, how it works, and gain insight on how to implement/maintain, and to perhaps build your own 3D printer. - Get a snapshot of some of the best 3D printers and products on the market, including an overview on resin and carbon printers. - Discover a variety of 3D design applications to help with getting ideas to working prototypes. - Study trends in digital scanning and other emerging 3D design/printing technologies. - Interview an expert 3D designer/printer in the industry to get even more insight into this exciting technology.

Creating a Program to Assist Users Cutting CableSt. Petersburg College

Are you receiving questions about cutting cable? Are you working on a program to help users get on board with this growing trend? Cutting cable is one of the biggest consumer trends of 2017 and often libraries are faced with helping users navigate this seemingly complex and daunting task. During this webinar, we will help you create a toolbox to help users: - Understand how the cable and satellite industry works. - Discover various hardware solutions to gain access to high-quality TV stations. - Learn the pros and cons of streaming media services. - Construct a checklist to you prepare users to successfully cut their cable Audio with slides: https://goo.gl/CzskBr

Understanding Artificial Intelligence St. Petersburg College

Artificial Intelligence (AI) is quickly moving from a science-fiction concept to reality where machines now have the capability to perform tasks commonly associated with humans. We are starting to see our society transformed because of AI, so having a better understanding of what it is and what it is capable of doing is essential. AI helps power Amazon’s Alexa personal assistant, Google’s Deep Dream neural network, various marketing initiatives, health applications, the aviation industry, and much more. In this webinar: - Discover what Artificial Intelligence (AI) is and how it is becoming a “machine trait.” - Gain an appreciation of AI pioneers like John McCarthy, Alan Turing, Marvin Minsky et al. - Learn how AI works and explore some applications that could play a role in your library. - Reflect on the future of AI and the implications for libraries and society in general. - Special Guest, Owen Cegielski from STEM School and Academy in Highlands Ranch, Colorado, will discuss various AI projects.

Beginning Python ProgrammingSt. Petersburg College

Python is a widely-used and powerful computer programming language that has helped system administrators manage computer networks and problem solve computer systems for decades. Python has also built some popular applications like BitTorrent, Blender, Calibre, Dropbox, and much more. Going further, the “Pi” in Raspberry Pi stands for Python, so learning Python will instill more confidence when working with Raspberry Pi projects. Python is usually the first programming language people learn primarily because it is easy to learn and provides a solid foundation to learn other computer programming languages. In this webinar, • Learn what Python is and what it is capable of doing. • Install Python’s IDE for Windows and work in the Python shell. • Use calculations, variables, strings, lists, and if statements. • Discover Python’s built-in functions and understand modules. • Create simple programs to build on later. The recording is available at https://youtu.be/ThcWmJFf-ho.

3D Design FundamentalsSt. Petersburg College

This document provides an overview of 3D printing and 3D design fundamentals. It discusses the history and process of 3D printing, different 3D printing technologies, common 3D file types, the basic 3D printing process, and tips for 3D printing. It also covers basic 3D design concepts like navigating 3D space, modeling techniques, materials, and rendering. Additionally, it introduces several free and paid 3D design applications as well as 3D printing services and repositories.

STEM DemystifiedSt. Petersburg College

Are you being asked to do STEM activities in your classes and workshops and have no idea where to start or have little to no budget? STEM education refers to teaching and learning, mostly hands-on, in the fields of Science, Technology, Engineering, and Mathematics. Integrating STEM activities in any discipline teaches how all things relate to each other, in school and in life. As a result, librarians, media specialists, and teachers are being asked to incorporate STEM learning activities into their curriculum, regardless of the subject matter, and many of these educators are unsure how to proceed. There are several ways to mix engaging STEM activities into your library programs and curriculum and this webinar will touch on the following and more to help you demystify STEM: - Understand the importance of STEM education. - Practice the four Cs of learning: collaboration, communication, critical thinking, and creativity. - Collect best practices to create good and inexpensive (many free) STEM lessons. - Teach 21st Century skills without technology. - Learn strategies (e.g., productive struggle) to creatively solve real-world problems. - Assess the success of your activities.

Learn to Compose, Record, and Produce Songs and Podcasts Using GarageBandSt. Petersburg College

GarageBand is a Digital Audio Workstation (DAW) that includes a large sound library, software instruments, guitar amplifiers and effects, music lessons, and even a virtual session drummer that can adapt to your songs. Since GarageBand has an easy-to-learn interface and there are no formal music training and/or instruments required, you will be composing, recording, producing, and sharing professional recordings and/or podcasts for your library in no time! In this webinar: Learn what GarageBand is capable of doing (e.g., audio recording, music lessons, podcasts etc.). Become familiar and comfortable with GarageBand’s interface Understand basic recording terminology and practices that will translate to any DAW. Appreciate how easy it is to create a podcast to include sounds, images, and videos. See how GarageBand can be used to create multimodal assignments/activities. Find alternatives to GarageBand and learn ways to run it virtually within other Operating Systems.

Open Education Resources in LibrariesSt. Petersburg College

Learning Kodu: Basic Video Game Design for KidsSt. Petersburg College

According to a 2016 “Sales, Demographic, and Usage Data” report released by the Entertainment Software Association, 63% of U.S. households have at least one person who plays video games for 3 hours or more each week. This same report states that consumers spent $23.5 billion on games in 2015 and that games are “personal learning gateways” where we will start to see them more in schools and in professional life. Libraries that provide basic video game design classes can provide that spark that ignites the next wave of video game designers. In this webinar: • Learn the basic components of video games. • Receive step-by-step instructions for using Kodu Game Lab. • Discover a variety of alternative gaming engines (GameMaker, etc.) where people can learn to experiment and ultimately to design their own video games.

Learn to Code and Have Fun Doing It! St. Petersburg College

In today’s age, it is important to have a basic understanding of computer programming. Although not everyone will become a computer programmer as a result, it is helpful these days to understand how computers and various software applications run code behind the scenes; plus, troubleshooting esoteric messages becomes much easier with some computer programming essentials under your belt. Without a doubt, it can be difficult to teach coding skills, but if fun and engaging tools are introduced it won’t be too bad. Thinking like a programmer does involve problem solving, but it can enhance creative confidence and inventive learning. In this webinar: • Learn the basics of some visual programming languages like Scratch, Hopscotch, App Inventor, Raptor and others. • Understand basic code syntax to gain important mathematical, computational, and creative thinking concepts through playful learning! • Discover alternative tools and applications to give people practice programming while having fun! • Gain other programming ideas, computing devices, and apps to help children & young adults thrive in a world based on technology.

How to Think in the Information Age: Finding Facts in a Post-Truth WorldSt. Petersburg College

With an ever-increasing daily torrent of information raining on people from almost every perceivable angle, it is impossible to process it all and, more importantly, to “separate the wheat from the chaff.” It is vital for everyone to be able to verify the accuracy and authority of information found on the Web while being able to detect bad data and lies to achieve the final goal of making intelligent decisions. As 21st Century library and information professionals, it is essential that we know how to think in the Information Age and to be able to pass this skill on to our users. In this webinar: ~ discover what misinformation is and explore ways to combat it. ~ learn to recognize misleading news, statistics, graphs, infographics, and more. ~ understand basic fallacies and how to detect bias. ~ appreciate how fast information spreads on social media and gather tools to help you become a stronger digital citizen. ~ utilize the scientific method to become a critical thinker in the Information Age.

Introducing Immersive Technologies for Libraries St. Petersburg College

Introducing How to Build a Personal Voice Assistant (AIY Edition) St. Petersburg College

360° Tours and MoreSt. Petersburg College

Taking the Magical Leap with Immersive Technologies in LibrariesSt. Petersburg College

Open Education Resources in LibrariesSt. Petersburg College

How to Repurpose Library Space: Listening Lab EditionSt. Petersburg College

Using CoSpaces Edu to Create Virtual and Augmented Reality ExperiencesSt. Petersburg College

Understanding Artificial IntelligenceSt. Petersburg College

Web Design Trends: 2018 EditionSt. Petersburg College

What’s New With 3D Design and Printing?St. Petersburg College

Creating a Program to Assist Users Cutting CableSt. Petersburg College

Understanding Artificial Intelligence St. Petersburg College

Beginning Python ProgrammingSt. Petersburg College

3D Design FundamentalsSt. Petersburg College

STEM DemystifiedSt. Petersburg College

Learn to Compose, Record, and Produce Songs and Podcasts Using GarageBandSt. Petersburg College

Open Education Resources in LibrariesSt. Petersburg College

Learning Kodu: Basic Video Game Design for KidsSt. Petersburg College

Learn to Code and Have Fun Doing It! St. Petersburg College

How to Think in the Information Age: Finding Facts in a Post-Truth WorldSt. Petersburg College

Recently uploaded (20)

To study the nervous system of insect.pptxArshad Shaikh

The *nervous system of insects* is a complex network of nerve cells (neurons) and supporting cells that process and transmit information. Here's an overview: Structure 1. *Brain*: The insect brain is a complex structure that processes sensory information, controls behavior, and integrates information. 2. *Ventral nerve cord*: A chain of ganglia (nerve clusters) that runs along the insect's body, controlling movement and sensory processing. 3. *Peripheral nervous system*: Nerves that connect the central nervous system to sensory organs and muscles. Functions 1. *Sensory processing*: Insects can detect and respond to various stimuli, such as light, sound, touch, taste, and smell. 2. *Motor control*: The nervous system controls movement, including walking, flying, and feeding. 3. *Behavioral responThe *nervous system of insects* is a complex network of nerve cells (neurons) and supporting cells that process and transmit information. Here's an overview: Structure 1. *Brain*: The insect brain is a complex structure that processes sensory information, controls behavior, and integrates information. 2. *Ventral nerve cord*: A chain of ganglia (nerve clusters) that runs along the insect's body, controlling movement and sensory processing. 3. *Peripheral nervous system*: Nerves that connect the central nervous system to sensory organs and muscles. Functions 1. *Sensory processing*: Insects can detect and respond to various stimuli, such as light, sound, touch, taste, and smell. 2. *Motor control*: The nervous system controls movement, including walking, flying, and feeding. 3. *Behavioral responses*: Insects can exhibit complex behaviors, such as mating, foraging, and social interactions. Characteristics 1. *Decentralized*: Insect nervous systems have some autonomy in different body parts. 2. *Specialized*: Different parts of the nervous system are specialized for specific functions. 3. *Efficient*: Insect nervous systems are highly efficient, allowing for rapid processing and response to stimuli. The insect nervous system is a remarkable example of evolutionary adaptation, enabling insects to thrive in diverse environments. The insect nervous system is a remarkable example of evolutionary adaptation, enabling insects to thrive

Sinhala_Male_Names.pdf Sinhala_Male_Namekeshanf79

LDMMIA Reiki Master Spring 2025 Mini UpdatesLDM Mia eStudios

How to Manage Opening & Closing Controls in Odoo 17 POSCeline George

CBSE - Grade 8 - Science - Chemistry - Metals and Non Metals - WorksheetSritoma Majumder

Introduction All the materials around us are made up of elements. These elements can be broadly divided into two major groups: Metals Non-Metals Each group has its own unique physical and chemical properties. Let's understand them one by one. Physical Properties 1. Appearance Metals: Shiny (lustrous). Example: gold, silver, copper. Non-metals: Dull appearance (except iodine, which is shiny). 2. Hardness Metals: Generally hard. Example: iron. Non-metals: Usually soft (except diamond, a form of carbon, which is very hard). 3. State Metals: Mostly solids at room temperature (except mercury, which is a liquid). Non-metals: Can be solids, liquids, or gases. Example: oxygen (gas), bromine (liquid), sulphur (solid). 4. Malleability Metals: Can be hammered into thin sheets (malleable). Non-metals: Not malleable. They break when hammered (brittle). 5. Ductility Metals: Can be drawn into wires (ductile). Non-metals: Not ductile. 6. Conductivity Metals: Good conductors of heat and electricity. Non-metals: Poor conductors (except graphite, which is a good conductor). 7. Sonorous Nature Metals: Produce a ringing sound when struck. Non-metals: Do not produce sound. Chemical Properties 1. Reaction with Oxygen Metals react with oxygen to form metal oxides. These metal oxides are usually basic. Non-metals react with oxygen to form non-metallic oxides. These oxides are usually acidic. 2. Reaction with Water Metals: Some react vigorously (e.g., sodium). Some react slowly (e.g., iron). Some do not react at all (e.g., gold, silver). Non-metals: Generally do not react with water. 3. Reaction with Acids Metals react with acids to produce salt and hydrogen gas. Non-metals: Do not react with acids. 4. Reaction with Bases Some non-metals react with bases to form salts, but this is rare. Metals generally do not react with bases directly (except amphoteric metals like aluminum and zinc). Displacement Reaction More reactive metals can displace less reactive metals from their salt solutions. Uses of Metals Iron: Making machines, tools, and buildings. Aluminum: Used in aircraft, utensils. Copper: Electrical wires. Gold and Silver: Jewelry. Zinc: Coating iron to prevent rusting (galvanization). Uses of Non-Metals Oxygen: Breathing. Nitrogen: Fertilizers. Chlorine: Water purification. Carbon: Fuel (coal), steel-making (coke). Iodine: Medicines. Alloys An alloy is a mixture of metals or a metal with a non-metal. Alloys have improved properties like strength, resistance to rusting.

Multi-currency in odoo accounting and Update exchange rates automatically in ...Celine George

Ultimate VMware 2V0-11.25 Exam Dumps for Exam SuccessMark Soia

SPRING FESTIVITIES - UK AND USA -Colégio Santa Teresinha

Anti-Depressants pharmacology 1slide.pptxMayuri Chavan

Biophysics Chapter 3 Methods of Studying Macromolecules.pdfPKLI-Institute of Nursing and Allied Health Sciences Lahore , Pakistan.

This chapter provides an in-depth overview of the viscosity of macromolecules, an essential concept in biophysics and medical sciences, especially in understanding fluid behavior like blood flow in the human body. Key concepts covered include: ✅ Definition and Types of Viscosity: Dynamic vs. Kinematic viscosity, cohesion, and adhesion. ⚙️ Methods of Measuring Viscosity: Rotary Viscometer Vibrational Viscometer Falling Object Method Capillary Viscometer 🌡️ Factors Affecting Viscosity: Temperature, composition, flow rate. 🩺 Clinical Relevance: Impact of blood viscosity in cardiovascular health. 🌊 Fluid Dynamics: Laminar vs. turbulent flow, Reynolds number. 🔬 Extension Techniques: Chromatography (adsorption, partition, TLC, etc.) Electrophoresis (protein/DNA separation) Sedimentation and Centrifugation methods.

GDGLSPGCOER - Git and GitHub Workshop.pptxazeenhodekar

Presentation on Tourism Product Development By Md Shaifullar RabbiMd Shaifullar Rabbi

2541William_McCollough_DigitalDetox.docxcontactwilliamm2546

Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...Library Association of Ireland

Social Problem-Unemployment .pptx notes for Physiotherapy StudentsDrNidhiAgarwal

Unemployment is a major social problem, by which not only rural population have suffered but also urban population are suffered while they are literate having good qualification.The evil consequences like poverty, frustration, revolution result in crimes and social disorganization. Therefore, it is necessary that all efforts be made to have maximum. employment facilities. The Government of India has already announced that the question of payment of unemployment allowance cannot be considered in India

Unit 6_Introduction_Phishing_Password Cracking.pdfKanchanPatil34

Metamorphosis: Life's Transformative JourneyArshad Shaikh

Phoenix – A Collaborative Renewal of Children’s and Young People’s Services C...Library Association of Ireland

Odoo Inventory Rules and Routes v17 - Odoo SlidesCeline George

Handling Multiple Choice Responses: Fortune Effiong.pptxAuthorAIDNationalRes

To study the nervous system of insect.pptxArshad Shaikh

Sinhala_Male_Names.pdf Sinhala_Male_Namekeshanf79

LDMMIA Reiki Master Spring 2025 Mini UpdatesLDM Mia eStudios

How to Manage Opening & Closing Controls in Odoo 17 POSCeline George

CBSE - Grade 8 - Science - Chemistry - Metals and Non Metals - WorksheetSritoma Majumder

Multi-currency in odoo accounting and Update exchange rates automatically in ...Celine George

Ultimate VMware 2V0-11.25 Exam Dumps for Exam SuccessMark Soia

SPRING FESTIVITIES - UK AND USA -Colégio Santa Teresinha

Anti-Depressants pharmacology 1slide.pptxMayuri Chavan

Biophysics Chapter 3 Methods of Studying Macromolecules.pdfPKLI-Institute of Nursing and Allied Health Sciences Lahore , Pakistan.

GDGLSPGCOER - Git and GitHub Workshop.pptxazeenhodekar

Presentation on Tourism Product Development By Md Shaifullar RabbiMd Shaifullar Rabbi

2541William_McCollough_DigitalDetox.docxcontactwilliamm2546

Michelle Rumley & Mairéad Mooney, Boole Library, University College Cork. Tra...Library Association of Ireland

Social Problem-Unemployment .pptx notes for Physiotherapy StudentsDrNidhiAgarwal

Unit 6_Introduction_Phishing_Password Cracking.pdfKanchanPatil34

Metamorphosis: Life's Transformative JourneyArshad Shaikh

Phoenix – A Collaborative Renewal of Children’s and Young People’s Services C...Library Association of Ireland

Odoo Inventory Rules and Routes v17 - Odoo SlidesCeline George

Handling Multiple Choice Responses: Fortune Effiong.pptxAuthorAIDNationalRes

Fundamentals of HTML5

1. Fundamentals of

2. http://www.slideshare.net/chadmairn @cmairn

3. Virtual Petting Zoo/Discussion anymeeting.com/chadmairn Want to hangout? gplus.to/chadmairn

4. In this webinar, learn: • What HTML5 is and what it can do • New HTML5 tags/elements/attributes • Useful coding examples • Uploading Files to a Web server • Testing and validation of your site • Future of HTML5

5. HTML = Hypertext Markup Language • Displays web pages in a web browser. • Web browser uses the tags to interpret the content of the page. • HTML elements consisting of tags enclosed in angle brackets (e.g., <html>) • Tags most commonly come in pairs like <h1> and </h1> • Some elements are unpaired (e.g., <img>)

6. • HTML5 will be the new standard for HTML. • HTML 4.01 was born in 1999. • HTML5 is still a work in progress. • The major browsers support many of the new HTML5 elements and APIs.

7. HTML <!DOCTYPE> Declaration The <!DOCTYPE> declaration is an instruction to the Web browser telling it what version of HTML the page is written in. HTML5 is not based on SGML, and therefore does not require a reference to a DTD. [Source: http://www.w3schools.com] <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

8. Here is what a reference to a DTD looks like … <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

9. Source: http://goo.gl/Bclus

10. New HTML5 Elements <article> <mark> <aside> <meter> <audio> <nav> <bdi> <output> <canvas> <progress> <command> <rp> <datalist> <rt> <details> <ruby> <embed> <section> <figcaption> <source> <figure> <summary> <footer> <time> <header> <track> <hgroup> <video> <keygen> <wbr>

11. Live Demo

12. Creating an ebook using jQuery Mobile with <iframe> to embed video. No plugins!

13. Uploading Files 1. If you don't have an FTP application, then I recommend that you download and install the following: http://filezilla-project.org/download.php 2. Upload files to your directory (e.g., lastname_firstname). 3. When you begin to work with the FTP client, you will need to enter the following credentials: •Host: marcomponline.com •Username: chadm •Password: java_cookie1 A quick screencast video demonstrating how to login using the FileZilla FTP Client can be found at http://www.youtube.com/watch?v=9VaM_wv0aQ4. 4. You will need either a text editor (TextEdit on mac or Notepad on PC) or a tool like Dreamweaver. If you have problems, please contact Chad Mairn at (727) 537-6405 or at [email protected].

14. To test you work visit … http://marcomponline.com/chadtest/Class/ LastName_FirstName/

15. Homework … • Pick 2 HTML5 tags (experiment with their attributes) and add them to your practice Web site. • Test and validate your site at http://validator.w3.org/ • Please take good notes because I’d like to spend some time next week discussing any issues you may have had using HTML5.

16. Next Week … • Share with the group good/bad experiences (e.g., what worked, what didn’t etc.) • Other coding examples • Google Analytics • Discuss the future of HTML5 • Questions and answers …

17. http://www.slideshare.net/chadmairn @cmairn

18. Let’s Hangout! gplus.to/chadmairn

Fundamentals of HTML5

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Fundamentals of HTML5 (20)

More from St. Petersburg College (20)

Recently uploaded (20)

Fundamentals of HTML5