Web Design 1: Introductions

22-3375 Web Design I // Columbia College Chicago
Introductions

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

A global network
of interconnected computers.

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.

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

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

Anatomy of an Element
An HTML element includes both
the HTML tag and everything between
the tag (the content).
<tag>Content</tag>

The element tag gives the
content structure and meaning.
<tag>Content</tag>

Tags normally come in pairs. The
first tag is the start tag, and the second
tag is the end tag.
<tag>Content</tag>

HTML has a defined set of tag
names (also called keywords) that
the browser understands.
<h1>Main Headline</h1>

Most elements can have attributes,
which provides additional informatin
about the element.
<html lang=”en”></html>

Attributes always follow the same
format: name=”value”. You can use
either single or double quotes.
<div class=”left-nav”></div>

<!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.

Web Design 1: Introductions

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Web Design 1: Introductions

Semelhante a Web Design 1: Introductions (20)

Mais de Shawn Calvert

Mais de Shawn Calvert (20)

Último

Último (20)

Web Design 1: Introductions