VIDA Requirements - HTML5 – Semantic tags - HTML5 - Forms - HTML5 – CSS3.

Slides:



Advertisements
Similar presentations
MA foundation Creating webpages using XHTML (part 1) Simon Mahony CCH
Advertisements

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
PHP Meetup - SEO 2/12/2009. Where to Focus? Ensuring the findability of content Ensuring content is well understood by search engines Maximizing the importance.
Web Accessibility Guidelines Office of Web Services January 2012.
A guide to HTML. Slide 1 HTML: Hypertext Markup Language Pull down View, then Source, to see the HTML code. Slide 1.
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Course for teachers covering: HTML, CSS, JavaScript, JQuery PHP, PHP/MySQL
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Matt May | Accessibility Evangelist Geek to Geek: Universal Design.
 Pseudo-elements  Centering  Tables  Classes and ids.
COMP101 – Exploring Multimedia and Internet Computing LA2 (Thur 14:00 – 16:50) TA: Jackie Lo.
Search Engine Optimization With Rich Media Pete LePage Microsoft.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Semantic Markup and Search Engine Optimization Joseph R. Lewis Sandia National Laboratories.
  Just another way to collect pieces together (like div, section)  Anything can be in there  Formatting just like all other elements.
Search Engine Optimization With Rich Media Pete LePage Sr. Product Manager, Microsoft
SEO for Web Designers By Alfredo Palconit, Jr.. I. What is SEO? A process of improving a site’s traffic and rank from organic search engine results. Notes:
HTML 5 Tutorial Chapter 9 Form Attributes. New Form Attributes HTML5 has several new elements and attributes for forms. New form attributes : autocomplete.
Creating Tables in a Web Site Using an External Style Sheet
Microsoft Certification Exam Michael Van Cleave Planet Technologies.
Building the User Interface by Using HTML5: Organization, Input, and Validation Lesson 3.
Florida Coastal School of Law Using Drupal to Gain Visibility with Annual Top Law School Homepages report.
Programming in Html5 with Javascript and CSS3
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.
>> Introduction to HTML: Tags. Hyper - is the opposite of linear Text – words / sentences / paragraphs Mark-up – Marking the text Language – It is a language.
IDs versus Classes Naming Your Tags for Maximum Functionality.
HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –
HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,
Web Foundations TUESDAY, OCTOBER 22, 2013 LECTURE 16: WEB IMAGES.
Building a Search Engine Friendly ™ eCommerce Website ECMTA Webinar July 2008 Mountain Media is a trademarks of New Earth Technologies. All other logos/images.
Copyright © Osmosys O S M O S Y SO S M O S Y S D e p l o y i n g E x p e r i e n c e & E x p e r t i s e™ HTML Training.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
Daveandal.net Cascading Style Sheets 101 “How I learnt to love CSS and found my inner designer”
به نام خدا مهندسي اينترنت جوانمرد اسلايد پنجم.
Eslam Mahmoud 4 th IT
Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3.
HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.
HTML. Adding Background Color The bgcolor attribute lets you change the background color of the Web page. Located in the body tag See common Web Page.
Copyright © Terry Felke-Morris HTML5: TEXT BOX Accepts text information in address format Common Attributes: ◦ type=“ ” ◦ name ◦ id ◦
Is Your Site Accessible? Validating Your Web Site.
HTML5 Forms Forms are used to capture user input …
Introduction to HTML UWWD. Agenda What do you need? What do you need? What are HTML, CSS, and tags? What are HTML, CSS, and tags? html, head, and body.
HTML and CSS HTML is used for the content of web pages CSS is used for the style of the web pages You are going to learn how they can be combined to create.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
REEM ALMOTIRI Information Technology Department Majmaah University.
HTML Basic Structure. Page Title My First Heading My first paragraph.
2.4. Choose and configure HTML5 tags to organize content and forms Choose and configure HTML5 tags for input and validation. Building the User Interface.
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.
HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML.
Basic in Photoshop Tools in Photoshop Simple templates design menu in Photoshop different navigation bar image effects Design your portfolio page Design.
HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.
Week-11 (Lecture-1) Introduction to HTML programming: A web based markup language for web. Ex.
Introduction to Programming the WWW I CMSC Summer 2004 Lecture 8.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
TNPW1 Ing. Jiří Štěpánek.  Tags  Marks for elements ▪ Pair ▪ Start and end tag ( Paragraph text ) ▪ Single ▪ Only start tag, according to XHTML 1.0.
HTML CS 4640 Programming Languages for Web Applications
Accessible bar graphs In html and CSS
IS 360 Web Promotion.
Web-Development Not just Code !!
Basic HTML and Embed Codes
Web Accessibility Guidelines
Putting An Image on Your Web Page
Pertemuan 1b
Web Design and Development
SEO Hand Book.
HTML / CSS Mai Moustafa Senior Web Designer eSpace eSpace.
HTML5 - 2 Forms, Frames, Graphics.
HTML CS 4640 Programming Languages for Web Applications
© 2017, Mike Murach & Associates, Inc.
Presentation transcript:

VIDA Requirements - HTML5 – Semantic tags - HTML5 - Forms - HTML5 – CSS3

HTML5 – Semantic tags vs. vs. vs.

SEO priority Heading tags

HTML5 – Input attributes Placeholder Types: ◦ s ◦ Number ◦ Url ◦ Search Validation: ◦ required ◦ Pattern IE ‘hacking’: ◦ form-validation-html5.html form-validation-html5.html

HTML5 - Polyfills wiki/HTML5-Cross-browser-Polyfills wiki/HTML5-Cross-browser-Polyfills ◦ border-radius, box-shadow, multiple backgrounds, linear gradients, border- image json, storage…

HTML “fails” Duplicated ◦  Title ◦ Class & ID Alt text. Close tag

Summary Semantic tags ◦ Usage Form ◦ Inputs ◦ Validate Polyfills ◦ How to find? ◦ How to use?