INTRODUCTION TO HTML5 New HTML5 User Interface and Attributes.

Slides:

Advertisements

Similar presentations

Introduction to HTML & CSS

Advertisements

CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.

HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.

Project 8 Creating Style Sheets.

Slide 1 MIS3023 Professor: Akhilesh Bajaj The University of Tulsa.

Creating and Editing a Web Page Using Inline Styles

MASTERY OBJECTIVE: Learn parts of an html document Learn basic html tags HTML-An Introduction.

Tutorial 6 Creating a Web Form

1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Chapter 8 Creating Style Sheets.

Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.

Microsoft Expression Web-Illustrated Unit L: Using Code Tools.

Chapter 3 Working with Text and Cascading Style Sheets.

CSS Basics LIS Webteam April 8, Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like.

Web Page Development Identify elements of a Web Page Start Notepad

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.

Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.

Chapter 12 Creating and Using XML Documents HTML5 AND CSS Seventh Edition.

Basics of HTML.

© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.

© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.

SIG WEB January 31, 3PM. What is HTML5? What it is: Allows for better intergration of media consumption. A new open standard Provides new APIs.

XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.

Chapter 3 Working with Text and Cascading Style Sheets.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

Integrating JavaScript and HTML5 HTML5 & CSS 7 th Edition.

Creating Styles and Style Sheets.  CSS styles don’t communicate in nice clear English, they have their own language.  P { color: red; font-size: 1.5.

IT204 - Web Scripting and Authoring I Introduction to Dreamweaver Unit 6.

© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.

Introduction to Cascading Style-sheets (CSS) Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 1.

PHP Form Introduction Getting User Information Text Input.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

MTA EXAM HTML5 Application Development Fundamentals.

INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.

© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.

1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.

Cascading Style Sheets CSS. Source W3Schools

Jozef Goetz, STEM Summer Camp Dr. Jozef Goetz.

CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.

HTML Overview Part 5 – JavaScript 1. Scripts 2  Scripts are used to add dynamic content to a web page.  Scripts consist of a list of commands that execute.

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,

INTRODUCTION JavaScript can make websites more interactive, interesting, and user-friendly.

Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.

Creating and Editing a Web Page Using Inline Styles

Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.

Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.

Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.

XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.

INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.

Working with Cascading Style Sheets

Web Basics: HTML/CSS/JavaScript What are they?

Project 1 Introduction to HTML.

Getting Started with CSS

>> Introduction to CSS

Creating Visual Effects and Animation

Intro to CSS CS 1150 Fall 2016.

Cascading Style Sheets - Building a stylesheet

Intro to CSS CS 1150 Spring 2017.

Web Design and Development

Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.

Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.

Brandon Roman CS300.

Cascading Style Sheets - Building a stylesheet

Presentation transcript:

INTRODUCTION TO HTML5 New HTML5 User Interface and Attributes

Display a Fixed-Meter Bar  The meter element enables you to display a gauge graphic to the user at any point on a web page.  For example, if you were hosting a fundraiser, you could display a fundraiser goal gauge easily with meter.  Just set the maximum and current values, and the browser will show the progress to the goal.  If the meter element is unsupported by the browser, the fallback display within its start and end tags will appear.

Display a Fixed-Meter Bar

 Open your CSS definitions file and apply a rules for the meter element.  Note: the color of the meter will change depend on the current value.

Display a Moving Progress Meter  A progress element differs from the meter element in that it moves to convey an in-progress task.  This could be something such as downloading a file, processing a command.  In order to make use of this, you will need some additional JavaScript code to control the progress meter’s current level.  If the progress element is unsupported by the browser, the fallback display within its start and end tags.

Display a Moving Progress Meter

Add a Caption to a Figure  Place the tag within the group.

Add a Caption to a Figure  Apply styles to the and

Add a Caption to a Figure

Highlight Text  You can highlight text in a web page using the new element in HTML5.  You can change the color by using a CSS declaration that overrides the mark selector.

Highlight Text

Allow the User to Edit Content  You can configure any static text block to become editable by the user within any HTML5 web browser using the new contenteditable attribute  When activated, the text block will appear normal, but when it is clicked, it will transform into a form input field.

Allow the User to Edit Content

Spell-Check User Content  Most web browsers provide a useful built-in spell-check feature available to any website that allows the user to type text.  This feature is enabled when a spellcheck attribute is enabled on an editable text block.

Spell-Check User Content