Web Design 1: Introductions
Upcoming SlideShare
Loading in...5
×
 

Web Design 1: Introductions

on

  • 2,620 views

http://shawncalvert.com/webdesign-1

http://shawncalvert.com/webdesign-1
Web Design 1
Columbia College Chicago

Statistics

Views

Total Views
2,620
Views on SlideShare
1,559
Embed Views
1,061

Actions

Likes
0
Downloads
23
Comments
0

1 Embed 1,061

http://www.shawncalvert.com 1061

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Design 1: Introductions Web Design 1: Introductions Presentation Transcript

  • 22-3375 Web Design I // Columbia College Chicago Introductions
  • shawncalvert.com/webdesign-1
  • Q. Name Major HTML/CSS experience What are some things you hope to accomplish this semester (outside this class)?
  • 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!
  • 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
  • Internet
  • A global network of interconnected computers.
  • WWW
  • 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.
  • URL / DNS / IP / HTTP
  • User types a URL (Uniform Resource Locator) into a browser, e.g., www.amazon.com The URL is sent to a DNS (Domain Name Service), which translates the URL into an IP address, e.g., 18.12.23.1 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
  • Static Pages / Dynamic Pages
  • 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
  • Three layers of web design: Structure, Style, Behavior
  • Three layers of web design
  • Three layers of web design
  • Three layers of web design
  • Let’s get started!
  • HTML Elements
  • Anatomy of an Element An HTML element includes both the HTML tag and everything between the tag (the content). <tag>Content</tag>
  • Anatomy of an Element The element tag gives the content structure and meaning. <tag>Content</tag>
  • 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>
  • Anatomy of an Element HTML has a defined set of tag names (also called keywords) that the browser understands. <h1>Main Headline</h1>
  • Anatomy of an Element Most elements can have attributes, which provides additional informatin about the element. <html lang=”en”></html>
  • 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>
  • Basic HTML Structure
  • doctype html head body
  • <!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.
  • <html></html> The <html> element defines the whole HTML document.
  • <head></head> The <head> element contains special elements that instruct the browser where to find stylesheets, provide meta info, and more.
  • <body></body> The <body> element contains the document content (what is shown inside the browser window).
  • 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>
  • 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.
  • 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.