SlideShare a Scribd company logo

Web Design 1: Introductions

•
•
Shawn Calvert
Shawn Calvert

This document provides an introduction and overview of topics that will be covered in a Web Design I class, including: - The basics of HTML elements, tags, and page structure with headings, paragraphs, and nesting tags. - Key concepts like the difference between the Internet and World Wide Web, how URLs and IP addresses work, and the difference between static and dynamic web pages. - The three layers of web design: structure with HTML, style with CSS, and behavior with JavaScript. - A preview of upcoming topics like HTML elements, client style sheets, and learning solid structural design before adding visual design.

Related slideshows

HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
 
Basic Html for beginners.
Basic Html for beginners.Basic Html for beginners.
Basic Html for beginners.
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
 
1 of 39
Download to read offline
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
Web Design 1: Introductions
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.
Web Design 1: Introductions
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>
Web Design 1: Introductions
Web Design 1: Introductions
Web Design 1: Introductions
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.

More Related Content

Web Design 1: Introductions

  • 1. 22-3375 Web Design I // Columbia College Chicago Introductions
  • 3. Q. Name Major HTML/CSS experience What are some things you hope to accomplish this semester (outside this class)?
  • 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. 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
  • 8. A global network of interconnected computers.
  • 9. WWW
  • 10. 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.
  • 12. URL / DNS / IP / HTTP
  • 13. 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
  • 14. Static Pages / Dynamic Pages
  • 15. 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
  • 16. Three layers of web design: Structure, Style, Behavior
  • 17. Three layers of web design
  • 18. Three layers of web design
  • 19. Three layers of web design
  • 22. Anatomy of an Element An HTML element includes both the HTML tag and everything between the tag (the content). <tag>Content</tag>
  • 23. Anatomy of an Element The element tag gives the content structure and meaning. <tag>Content</tag>
  • 24. 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>
  • 25. Anatomy of an Element HTML has a defined set of tag names (also called keywords) that the browser understands. <h1>Main Headline</h1>
  • 26. Anatomy of an Element Most elements can have attributes, which provides additional informatin about the element. <html lang=”en”></html>
  • 27. 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>
  • 30. <!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.
  • 31. <html></html> The <html> element defines the whole HTML document.
  • 32. <head></head> The <head> element contains special elements that instruct the browser where to find stylesheets, provide meta info, and more.
  • 33. <body></body> The <body> element contains the document content (what is shown inside the browser window).
  • 34. 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>
  • 38. 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.
  • 39. 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.