Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GRA422-W14 Lecture 1

Ahmed Sagarwala
January 10, 2014
Design
0
800

GRA422-W14 Lecture 1

Introduction to HTML and CSS

Ahmed Sagarwala

January 10, 2014
Tweet

More Decks by Ahmed Sagarwala

See All by Ahmed Sagarwala
GRA422 W14 Lecture 11
artform
0
160
GRA422 W14 Lecture 10
artform
0
170
GRA422-W14 Lecture 9
artform
0
130
GRA422-W14 Lecture 7
artform
0
630
GRA422 W14 Lecture 6
artform
0
410
GRA422 W14 Lecture 5
artform
0
440
GRA422 W14 Lecture 4
artform
0
780
GRA422 W14 Lecture 3
artform
0
940
GRA422 W14 Lecture 2
artform
0
1.5k

Other Decks in Design

See All in Design
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
MiKS inc. Company PR en_202404
zakkerooni
0
210
Portfolio 2023.07.28
helemarudesu
0
590
Sociotechnical design for software and human systems
xinyao
2
500
Wolf and the seven goatkids
_limex_
PRO
0
460
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
160
TrollsTopia: Funtography- Part 1
kenijam
1
220
Goodpatch Tour💙 / We are hiring!
goodpatch
28
700k
B/43プラスカードができるまで
putchomsmartbank
0
480
Jeremy's First Day
myates3
1
130
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
100
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170

Featured

See All Featured
Practical Orchestrator
shlominoach
183
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
Typedesign – Prime Four
hannesfritz
36
2.1k
A designer walks into a library…
pauljervisheath
201
23k
Code Review Best Practice
trishagee
56
15k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
How to name files
jennybc
65
93k
Side Projects
sachag
451
41k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
The Cult of Friendly URLs
andyhume
74
5.7k
Agile that works and the tools we love
rasmusluckow
325
20k

Transcript

  1. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web // HTML Winter 2014 Instructor: Ahmed Sagarwala

  2. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Our Goal Create & possibly sell a website Learn the tools involved Conception, design, development HTML / CSS / JavaScript Reverse Engineering Find a guinea pig!

  3. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Housekeeping Opening remarks on GRA422 Resources Lynda.com Lectures vs. Labs Course Outline Group Project @GRA422 // gra422.com

  4. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web You know you’re from GCM when... You get a compliment on your stock

  5. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Your Instructor Ahmed Sagarwala Born in Dubai 2008 GCM Grad Harmony Printing Artform.ca Founded RyeTAGA Student Union Marketing TA/RA

  6. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web In 30-seconds What does it take to make a web page? Make a text file, write code, save as .html Concepts > Code Why HTML?

  7. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Reverse Engineering Dissecting a website About open-source Don't reinvent the wheel Web pages are open-source

  8. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web History The World Wide Web + HTML 1945: Concept of document linking (Memex) 1980: Tim Berners-Lee (CERN) bidirectional links 1989: Tim Berners-Lee invents HTML (based on GML) to help researchers collaborate 1990: Berners-Lee creates hypertext browser called WordWideWeb using NeXTStep 1993: Mosaic (NCSA), Arena (Dave Raggett, HP) Lynx (Lou Montulli, Netscape) browsers released
  9. None

  10. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web 1994: WWW traffic load increases 1,000 fold World Wide Web Consortium (W3C) forms 1995: HTML 3 is published, Internet Explorer released 1996: Cascading Style sheets 1997: HTML 3.2, HTML 4.0 2000: XHTML 2010: HTML5, Steve Jobs says Flash no longer necessary History The World Wide Web + HTML
  11. None

  12. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Servers Types & Uses Domain Name Server gra422.com => 64.86.220.69 Web Server Local vs. Remote

  13. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web 1. Browser is opened 10. User interacts 2. URL typed in 3. Browser prepares DNS & HTTP Request 4. Requests sent 5. DNS server provides IP address and routers send requestion to web server 6. Web server receives and interprets requests 7. Response is routed back 8. Code is received by browser 9. Browser renders code according to its rules and standards

  14. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web HTML Tags/Elements <html> ... </html>

  15. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web HTML Elements, Attributes & Values <img src='photo.gif'> <img src="photo.gif" alt="My cat photo" width="300">

  16. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web HTML Structure <!doctype html> <html> <head> <title>Some Page</title> </head> <!-- This is a comment --> <body> <h1 class="red">Title</h1> <p>Info &amp; <a href="#here">more</a></p> </body> </html>

  17. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web HTML Parts of a Page Head: hidden from user, used by machines* do not confuse with header title, meta tags, styles, links, scripts Body: visible content in browser article, nav, headings, links, lists, tables, divs

  18. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web HTML The Head <head> <title>About Snails</title> <link href="favicon.ico" rel="icon" type="image/x-icon"> </head> Result:

  19. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web HTML Block & Inline Elements <body> <h1>Title</h1> <p> <span>Info</span> &amp; <a href="#">more</a> </p> </body>

  20. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Styles Changing an element's appearance <body style='background:black; color:white'> <h1 style='color:blue'>Title</h1> <p style='background:pink; color:black'> Here is some text</p> <p>More Text</p> </body>

  21. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Coding General Guidelines Tabs and whitespace Semantics Modular logical blocks Reuse, reduce, recycle

  22. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Initiating Design The chicken or the egg? We can begin with design, content or structure/wireframes We already know design & create content What kind of site will we create as a class? Vote! GCM, print company, restaurant, portfolio, cats

  23. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Our Design Components Sitemap, wireframes and pages required Photo gallery & image slider Contact form with validation Table containing ?? Dropdown navigation, social media links Mobile & tablet friendly (responsive)

  24. GRA422 Electronic Document Design II — Lecture #1 Introduction //

    History of the Web Summary What we covered Course requirements & tasks History of WWW & HTML How a website is accessed HTML structure, elements, attributes, values CSS syntax and styles