Downloaded 54 times
Uploaded byShawn Calvert
Web Design 1: Introductions
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.
More Related Content
Similar to Web Design 1: Introductions
Web Design 1: Introductions
- 1. 22-3375 Web DesignI // Columbia College Chicago Introductions
- 2.
- 3. Q. Name Major HTML/CSS experience What aresome things you hope to accomplish this semester (outside this class)?
- 4. Why you shouldwant 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 willsucceed 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
- 7.
- 8. A global network ofinterconnected computers.
- 9.
- 10. The web isjust 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 aURL (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 websiteis 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 ofweb design: Structure, Style, Behavior
- 17. Three layers ofweb design
- 18. Three layers ofweb design
- 19. Three layers ofweb design
- 20.
- 21.
- 22. Anatomy of anElement An HTML element includes both the HTML tag and everything between the tag (the content). <tag>Content</tag>
- 23. Anatomy of anElement The element tag gives the content structure and meaning. <tag>Content</tag>
- 24. Anatomy of anElement 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 anElement HTML has a defined set of tag names (also called keywords) that the browser understands. <h1>Main Headline</h1>
- 26. Anatomy of anElement Most elements can have attributes, which provides additional informatin about the element. <html lang=”en”></html>
- 27. Anatomy of anElement Attributes always follow the same format: name=”value”. You can use either single or double quotes. <div class=”left-nav”></div>
- 28.
- 29.
- 30. <!DOCTYPE html> EXCEPTION The doctypeis 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> elementdefines the whole HTML document.
- 32. <head></head> The <head> elementcontains special elements that instruct the browser where to find stylesheets, provide meta info, and more.
- 33. <body></body> The <body> elementcontains the document content (what is shown inside the browser window).
- 34. Nesting The use ofour 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 thosetext 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 isugly! 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.