Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Design 1: Introductions


Published on
Web Design 1
Columbia College Chicago

Published in: Education, Technology, Design
  • Be the first to comment

Web Design 1: Introductions

  1. 1. 22-3375 Web Design I // Columbia College Chicago Introductions
  2. 2.
  3. 3. Q. Name Major HTML/CSS experience What are some things you hope to accomplish this semester (outside this class)?
  4. 4. Why you should want to succeed in this class: “Graphic Design” is not media-specific Build on your existing skills Difficulty of learning these skills outside of a structured environment More jobs, better pay It really is fun and empowering to code!
  5. 5. How you will succeed this class: Take it week-by-week Be an active learner: don’t just copy and paste, ask lots of questions, make sure you understand the underlying concepts, and be open to changing your assumptions about web design and coding If you miss classes, be serious about contacting me (or classmates) and catching up on your work Allow yourself time to get frustrated and start over on your assignments
  6. 6. Internet
  7. 7. A global network of interconnected computers.
  8. 8. WWW
  9. 9. The web is just one service of the internet. It is system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia, and navigate between them via hyperlinks.
  10. 10. URL / DNS / IP / HTTP
  11. 11. User types a URL (Uniform Resource Locator) into a browser, e.g., The URL is sent to a DNS (Domain Name Service), which translates the URL into an IP address, e.g., The correct server is found through the IP address, which is sent an HTTP request (get), and returns the requested html pages, images, etc, back to the browser
  12. 12. Static Pages / Dynamic Pages
  13. 13. A static website is a group of self-contained, individual pages (or page), sent to the browser from the server one-page-at-a-time. SERVER page.html page.html page.html
  14. 14. Three layers of web design: Structure, Style, Behavior
  15. 15. Three layers of web design
  16. 16. Three layers of web design
  17. 17. Three layers of web design
  18. 18. Let’s get started!
  19. 19. HTML Elements
  20. 20. Anatomy of an Element An HTML element includes both the HTML tag and everything between the tag (the content). <tag>Content</tag>
  21. 21. Anatomy of an Element The element tag gives the content structure and meaning. <tag>Content</tag>
  22. 22. Anatomy of an Element Tags normally come in pairs. The first tag is the start tag, and the second tag is the end tag. <tag>Content</tag>
  23. 23. Anatomy of an Element HTML has a defined set of tag names (also called keywords) that the browser understands. <h1>Main Headline</h1>
  24. 24. Anatomy of an Element Most elements can have attributes, which provides additional informatin about the element. <html lang=”en”></html>
  25. 25. Anatomy of an Element Attributes always follow the same format: name=”value”. You can use either single or double quotes. <div class=”left-nav”></div>
  26. 26. Basic HTML Structure
  27. 27. doctype html head body
  28. 28. <!DOCTYPE html> EXCEPTION The doctype is not actually a tag, but a declaration, telling the browser what kind of html you are using. The doctype above declares HTML 5.
  29. 29. <html></html> The <html> element defines the whole HTML document.
  30. 30. <head></head> The <head> element contains special elements that instruct the browser where to find stylesheets, provide meta info, and more.
  31. 31. <body></body> The <body> element contains the document content (what is shown inside the browser window).
  32. 32. Nesting The use of our first three tags (html, head and body), introduces and important concept: Nesting, which is when tags “wrap” other tags. When you create markup, you should indicate nesting by indenting the nested tags with 2 spaces (preferred) or a tab. <html> <head> </head> <body> <h1><h1> <p></p> </body> </html>
  33. 33. Where did those text styles come from? All browsers have what is called a “client stylesheet” that applies formatting to your html elements, such as text size, font, color, margins, line-height, and much more. Your custom css overrides some of these default styles.
  34. 34. But it is ugly! Before we begin learning how to add visual design to our pages, it is crucial that we understand how to create a foundation of solid structural design.