web design 1: introductions
Post on 28-Jan-2015
104 Views
Preview:
DESCRIPTION
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-speci!c
Build on your existing skills
Dif!culty 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), andreturns 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 boththe 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!rst tag is the start tag, and the second
tag is the end tag.
<tag>Content</tag>
Anatomy of an Element
HTML has a de!ned 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 sameformat: 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 browserwhat kind of html you are using. The
doctype above declares HTML 5.
<html></html>STRUCTURE
The <html> element de!nesthe whole HTML document.
<head></head>
The <head> element contains special elements that instruct the browser
where to !nd 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 !rst 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.
top related