Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course...
Transcript of Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course...
![Page 1: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/1.jpg)
Lesson 1
Introduction To Web Design
Presented by:
Bryan Hurley Web Design Educator
Diploma in Web Design – Part I
![Page 2: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/2.jpg)
Lesson 1
About us
Course Agenda
Member Area & Community
Course Engagement
The field of Web Design
The Internet & The World Wide Web
The HyperText Markup Language
Summary
Course Interaction
Q & A
![Page 3: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/3.jpg)
About Us
• 4+ Years / 2012
• Largest LIVE Educator on the Planet
• 400,000+ new students per month
• Offices All Over the World
• 350+ full time employees (Shawsters)
• 10+ languages
• EGBET
![Page 4: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/4.jpg)
Course Agenda
Week 1: The Language Of The Web
Lesson 1 : Introduction To Web Design
Lesson 2 : HTML & CSS
Week 2: Website Project Management
Lesson 3 : Planning A Website
Lesson 4 : Modern Web Design
Week 3: Website Additions
Lesson 5 : Website Enhancements
Lesson 6 : Graphics & Media on the Web Important
Week 4: What Happens Next
Lesson 7 : Going Live Important
Lesson 8: Past, Present, Future Important
![Page 5: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/5.jpg)
Webinar Interaction
• Any questions?
Our support team are here to help
• Chat box
Comment and ask us questions
• Bonus Q&A at the end of every lesson
• How do I access recordings?
• www.shawacademy.com – login top right
![Page 6: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/6.jpg)
Social Media
https://www.facebook.com/shawacademy https://twitter.com/shawacademy
![Page 7: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/7.jpg)
Our new YouTube channel
https://youtube.com/theshawacademy
Check out my video
![Page 8: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/8.jpg)
Final Assignment
• Multiple Choice Questions
• Certificate - €9
• Diploma - €19
![Page 9: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/9.jpg)
The Truth is…
Achieving Results Takes Hard Work
• Foundation = “What is” ……
And Most Are Not Willing To Do It!
• Attend LIVE = Learn
![Page 10: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/10.jpg)
Let’s Begin
![Page 11: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/11.jpg)
The field of Web Design
![Page 12: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/12.jpg)
The field of Web Design
• What is a Web Designer?
• What do you need to get started with Web Design?
• What are the other aspects of Web Design?
![Page 13: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/13.jpg)
What Is A Web Designer?
• A Web Designer uses HTML and CSS to structure and style websites.
• They are in charge of front-end Web Building; colours, fonts, layouts,
images, etc.
• Usability and the UI (User Interface) play a big role in Web Design.
HyperText Markup Language Cascading Style Sheets
![Page 14: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/14.jpg)
Web Designer Essential Tools
• A good web browser:
• Google Chrome (Largest market share)
• Mozilla Firefox (Great for developers)
• Safari (Great for compatibility)
• Do not use Internet Explorer. (Just don’t)
• A plain text editor:
• Notepad++ for Windows
• TextWrangler for Mac
![Page 15: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/15.jpg)
Aspects Of Web Design
Website Navigation
Home
Contact
AboutServices
Gallery
N a v i g a t i o n
H e a d e r I m a g e
I m a g e I m a g e T e x t
C a l l T o A c t i o n
F o o t e r
![Page 16: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/16.jpg)
The Internet&
The World Wide Web
![Page 17: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/17.jpg)
The Internet & The World Wide Web
• Where is the Internet?
• What is the World Wide Web?
• How is information sent over the Internet?
![Page 18: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/18.jpg)
Where Is The Internet?
![Page 19: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/19.jpg)
The Internet & The World Wide Web
The Internet is a global network of networks.
The World Wide Web is a model built on top of the Internet.
The Cloud is a term used to encompass the Internet and all the services built on top of it (WWW, Mail, Voice, File Transfers, etc…)
Protocol Domain Name Of Server Machine Location Of Resource
![Page 20: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/20.jpg)
HTTP(HyperText Transfer Protocol)
FTP(File Transfer Protocol)
VOIP(Voice Over Internet
Protocol)
POP(Post Office Protocol)
![Page 21: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/21.jpg)
Just One Network
![Page 22: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/22.jpg)
The Internet
A Network of Networks.
![Page 23: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/23.jpg)
The World Wide Web uses HTTP(Hyper Text Transfer Protocol)
HTTP is just one of the
protocols for transferring
data on the Internet
![Page 24: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/24.jpg)
World Wide WebThe Origin Story
![Page 25: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/25.jpg)
![Page 26: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/26.jpg)
![Page 27: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/27.jpg)
http://www.shawacademy.com
HTTP Request & Response
Step 1: Browser requests
information from server.
Step 2: Server Responds by sending
back requested information and
closes connection.
S e r v e r
![Page 28: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/28.jpg)
So Who Owns The Internet?
• The Internet is more of a concept than an actual tangible entity.
• It relies on physical infrastructure that connects networks to other
networks on a global scale.
• Because of this, no one can, or does own the Internet in its entirety.
![Page 29: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/29.jpg)
W3C-The World Wide Web Consortium
• Want to know everything about HTML?
• www.w3.org
• Is your code up to the W3C’s standards?
• validator.w3.org
![Page 30: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/30.jpg)
The HyperText Markup Language
![Page 31: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/31.jpg)
The Internet & The World Wide Web
• Where is HyperText?
• What is a Markup Language?
![Page 32: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/32.jpg)
HTML
Ability to create
links with published
materials on the
internet
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10|
11|
12|
![Page 33: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/33.jpg)
<p> </p>Less Than Sign
(Left Angle Bracket)
Greater Than Sign
(Right Angle Bracket)
Tag’s Purpose
Forward Slash
Opening Tag Clos ing Tag
HTML Tags
![Page 34: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/34.jpg)
HTML & Tags
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10|
11|
12|
![Page 35: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/35.jpg)
Summary
• What a Web Designer is and does
• The Internet & The World Wide Web
• Tim Berners-Lee and the HyperText Mark Up Language
• HyperText & Markup
• HTTP Request & HTTP Response
![Page 36: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/36.jpg)
Summary
The field of Web Design
The Internet & The World Wide Web
The HyperText Markup Language
Congratulations you have just laid the foundations
Tús Maith Leath na hOibreo Now we can start building on practical web design skills
o Attend all of the lessons live to ask Questions in real time
and benefit the most
o We’re here to help, so contact us anytime!
![Page 37: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/37.jpg)
Next Lesson
• The next session is “HTML & CSS”
• 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
![Page 38: Diploma in Web Design Part I - Amazon S3 1 About us Course Agenda Member Area & Community Course Engagement The field of Web Design The Internet & The World Wide Web The HyperText](https://reader031.fdocuments.in/reader031/viewer/2022022510/5adaec477f8b9a52528d81d4/html5/thumbnails/38.jpg)
Q&A
• We begin to design our first web page!
• You will learn how to structure and style a webpage
• Covering these topics will allow us to move into
more application focused areas
Next Lesson is
www.facebook.com/shawacademy
www.twitter.com/shawacademy
www.shawacademy.com
HTML & CSS
See local numbers on website