Embed Size (px)
Citation preview
Lesson 3
User Interfaces with HTML
Presented by:
Tadhg Deeney Mobile App Development Educator
Bsc (Hons) in Computing in Game Development
Diploma in Mobile App Development – Part I
Lesson 2 Recap
Designing our App
What are the Most Popular Apps?
What is the best idea?
Creating a Paper-Prototype
Software Layout
Course Interaction
Q & A
Today’s Lesson
Introduction to HTML
Introduction to CSS
Exploring a Framework
Creating our First App
Summary
Q & A
Let’s Begin
What is HTML?
What is HTML?
What is HTML?HTML5 – The language of the Web
What is HTML?HTML5 – The language of the Web
“Hypertext” – content you navigate through“Mark Up” – labelling the content
<h1> Do you want to learn Mobile App Development?</h1><p>Tags usually come in pairs. The start tag & the end tag</p>
What is HTML?
Advantages Supported on all browsers Free – No additional software needed Easy to learn & code for beginners
What is HTML?
Disadvantages It cannot produce dynamic content alone Limited security features Structure can be difficult to grasp
What is HTML?
Tags Description
<!DOCTYPE> Defines document type & HTML version
<html> This tag encloses the complete html document
<head> Keeps the documents tags that are NOT displayed on the screen
<title> Displays the Documents Title in the Browser
<body> Displays all of the content on the screen
<!-- --> Defines a Comment
What is HTML?
What tag is used to create a comment in HTML?
#ShawMAD
What is CSS?
What is CSS?
What is CSS?Cascading Style Sheets
What is CSS?
CSS is an extension to basic HTML that allows us to style our Web PagesCSS can control multiple pages all at once.
Selector {property : value }p{color : red}
What is CSS?
AdvantagesPages load fasterSuperior StylesMultiple Device Compatibility
What is CSS?
DisadvantageFragmentation – CSS renders different
dimensions with each browser
What is CSS?
External CSS Linked to your HTML:<link rel=“stylesheet” href=“style.css”>
Selector, Selector {
property: value;property: value;
}
h1, h2 {
color: red;border-bottom: 1px solid red;
}
What are we Making?
HTML Layout
Header Here
Content
Footer Here
<div class=“header">
<div class=“content">
<div class=“footer">
Index.html
What is Bootstrap?
What is Bootstrap?
What is Bootstrap?
A Free front-end Framework for faster and easier web development
Summary
Introduction to HTML
Introduction to CSS Bootstrap
Exploring a Framework
Creating our First App
o Now we can start building onwards …..
o Attend all of the lessons live to Ask Questions
We’re here to help, so contact us anytime!
Next Lesson
• The next session is “Coding Functions”
• Introduction to Javascript
• Creating a variable
• Creating a function
• Adding User Interaction
• Attend all of the lessons LIVE and your knowledge will grow
• Shaw Academy Lifetime Membership Prize during Lesson 6
• Recordings are available within 24 hours
Go to www.shawacademy.com and then the Top Right Corner – Members Area
Q&A
• We begin again……..
• You will learn to create a User Interactive App
• We will discuss variables & functions
• Create a Sample App
Next Lesson is
www.facebook.com/shawacademy
www.twitter.com/shawacademy
www.shawacademy.com
Coding Functions
See local numbers on website
