02 | Build the User Interface Christopher Harrison | Content Developer, Microsoft Rachel Jones| Microsoft Certified Trainer, SourceDev.

Slides:



Advertisements
Similar presentations
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Advertisements

HTML. The World Wide Web Protocols Addresses HTML.
MASTERY OBJECTIVE: Learn parts of an html document Learn basic html tags HTML-An Introduction.
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
Introduction to HTML CPS470 Software Engineering Fall 1998.
HTML FORMATTING. CONTENTS HTML Formatting Formatting Example Formatting Example Output Summary Exercise.
Chapter 14 Introduction to HTML
HYPERTEXT MARKUP LANGUAGE (HTML) Vijaya K Pandey.
Introduction to HTML academy.zariba.com 1. Lecture Content 1.What is HTML? 2.The HTML Tag 3.Most popular HTML tags 2.
Tutorial 1: Getting Started with HTML5
HTML. We’ll learn … What HTML is What tags are What a basic web page looks like What 3 HTML tags are required What HTML comments look like How to title.
Define html document byusing Example : Title of the document The content of the document......
Building the User Interface by Using HTML5: Text, Graphics, and Media Lesson 2.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
11 HTML5 sharing St Bonaventure College & High School 31 May 2012.
The New Elements © Main Menu Structure Media Canvas Form Click on one of the categories below to view information about the new HTML5 elements in.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
B.Y.O.L.: Building jQuery Mobile Apps in DreamWeaver Jeff Batt eLearning Brothers Product Development Manager.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
McLean HIGHER COMPUTER NETWORKING Lesson 5 HTML Description of HTML web page Creating a simple HTML web page.
MTA EXAM HTML5 Application Development Fundamentals.
Getting Started with Marking Up Page Content. Tag defines a paragraph Automatically creates some space before and after itself Code Browser Display.
INTRODUCTION TO HTML ENGL 307 March 28 th, Hyper Text Markup Language What is HTML?
Introduction to HTML Year 8. What is HTML O Hyper Text Mark-up Language O The language that all the elements of a web page are written in. O It describes.
The Expression Web Environment Module 5: Beyond the Basics with Expression Web LESSON 1.
Exploring Microsoft Microsoft FrontPage Chapter 21 Exploring Microsoft FrontPage 2002 Chapter 1 Creating a Home Page: Introduction to MS FrontPage.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
HTML World Wide Web Consortium What does HTML stand for? – – –
HTML: Hypertext Markup Language The language to make web pages 0.
HyperText Markup Language (HTML) Developing a Web Page.
HTML NOTES October 6, Starting a document and saving  Always use notepad  Use _ for spaces otherwise it won’t work  When saving make sure you.
HTML Basic Structure. Page Title My First Heading My first paragraph.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
04 | Code by Using JavaScript Christopher Harrison | Content Developer, Microsoft Rachel Jones| Microsoft Certified Trainer, SourceDev.
WEB DESIGN Presentated By Amit Kapri Contact No
Week-11 (Lecture-1) Introduction to HTML programming: A web based markup language for web. Ex.
06 | Summarize and Prepare for Exam Christopher Harrison | Content Developer, Microsoft Rachel Jones| Microsoft Certified Trainer, SourceDev.
Christopher Harrison | Content Developer, Microsoft Rachel Jones| Microsoft Certified Trainer, SourceDev.
03 | Format the User Interface Christopher Harrison | Content Developer, Microsoft Rachel Jones| Microsoft Certified Trainer, SourceDev.
2.1. Choose and configure HTML5 tags to display text content Choose and configure HTML5 tags to display graphics Choose and configure HTML5.
HTML Basics Text, Images, Tables, Forms. HTML Structure HTML is comprised of “elements” and “tags” – Begins with and ends with Elements (tags) are nested.
Online PD Basic HTML The Magic Of Web Pages
Internet Exploration: HTML Basics
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
INTRODUCTION TO HTML AND CSS
Chapter 4: HTML5 Media - <video> & <audio>
HTML Formatting.
Internet Exploration: HTML Basics
Introduction to Web Page Design
HTML HYPERTEXT MARKUP LANGUAGE.
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
INTRODUCTION TO HTML AND CSS
Anatomy of HTML5 sites and Metro style apps using HTML5
Introduction to HTML5.
HTML Basic Structure.
HTML 5 SEMANTIC ELEMENTS.
HyperText Markup Language
The Most Basic HTML Page
The language of the internet
Creating a web page.
Introduction to Web Application Design
Creating a Basic Web Page using HTML
The language of the internet
Getting Started with Marking Up Page Content
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

02 | Build the User Interface Christopher Harrison | Content Developer, Microsoft Rachel Jones| Microsoft Certified Trainer, SourceDev

Choose and Configure Common Tags for: Displaying Text Displaying Graphics Playing Media Organizing Content Module Overview

A Simple Primer: HTML Example This is a sample page. This page includes some nested elements.

DEMO Creating a simple HTML page using Notepad

Choose and Configure Tags for: Displaying Text Tag:Use: top heading next-level heading Bold Italic / alternative voice Paragraph Stress emphasized text (pronounced differently) Title of a document Footer section of a document Important text

DEMO Using WebMatrix to Create Web Apps Choosing and Configuring Tags to Display TextWebMatrix

Choose and Configure Tags for: Displaying Graphics Additional resource: SVG vs canvas: how to choose

Choose and Configure Tags for: Playing Media Additional resource: HTML5 Audio and Video

Choose and Configure Tags for: Organizing Content Semantic HTML

DEMO Choosing and Configuring Tags to Play Media Choosing and Configuring a Semantic Tag

Choose and Configure Common Tags for: Displaying Text Displaying Graphics Playing Media Organizing Content Module Summary

Additional Resources: Tools comparison and download Getting Started Using HTML5