22-3375 Web Design I // Columbia College Chicago

Introductions / HTML pt1

shawncalvert.com/webdesign-1 !

TO DOdownload assignments folder,

type out answers to ex1/questions.txt

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), and

returns the requested html pages, images, etc, back to the browser

!

Server-side / Client-side

Client-side coding is what we will be doing in this class, using HTML, CSS and Javascript. This

just means that our code will be downloaded from the server and then compiled entirely in

the browser.

!

!SERVERpage.html

asp

.net

java

etc

php

!!!BROWSER

style.css

script.js

You do not need any special software to create html, css or javascript files, just a plain text editor. I

recommend using bbedit in class. Check out the resources page on the class site for other options.

The file extension defines the type of language of the file (file.html, file.css, file.js).

Your html/css/js files do not need to be on a server to be opened in a browser.

!

!

Rich Text to Plain Text

Just as with InDesign, when you receive text from someone that has already been formatted (e.g. from Word), you should always paste that text into TextEdit, and convert to plain text.

Rich Text to Plain Text

In TextEdit, go to ‘Format’ to ‘Make Plain Text.’

Rich Text to Plain Text

Copy and paste the plain text into your HTML and start typing in tags to recreate the document structure.

Let’s get started!

HTML

Hyper Text +

Markup Language

Hyper Text

Markup Language

A markup language is a set of markup tags.

The purpose of the tags are to describe page content.

Markup Language

Without any markup to give your content structure, the browser renders unformatted and unstyled text, also known as “plain text”.

Markup Language

HTML tags give structure and meaning to your content. “Semantic markup” refers to the use of meaningful tags to describe content (e.g. using header tags for header content).

Markup Language

Once your content is marked up, the browser applies built-in default styles to the tags. While you can override these styles with css, your marked up, non-css styled document should be readable and have a clear hierarchy.

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 sameformat: name=”value”. You can use

either single or double quotes.

<div class=”left-nav”></div>

Tags: Basic 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> STRUCTURE

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.

<html lang=”en”></html>STRUCTURE

The <html> element should have a “lang” attribute to tell the browser what language

your page is written in.

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

Document Hierarchy: Parents, children and siblings

Just as in a genealogy tree, the family hierarchy is described in terms of relationships. All elements in the document have a parent (up to ‘document’, which is at the top), and may have children (nested inside) or siblings (placed alongside).

<parent x>

<child and sibling y> </child and sibling y>

<child and sibling z> </child and sibling z>

</parent x>

Tags: Head Tags

title base meta link

script style

<title></title> STRUCTURE

The title element:• defines a title in the browser toolbar, • provides a title for the page when it is added to favorites • displays a title for the page in search engine results.

<title>My Portfolio</title>EXAMPLE

<meta>STRUCTURE

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but

will be machine readable.

<meta charset="utf-8"> STRUCTURE

The <meta> is a single tag — it does not require a closing tag.

EXAMPLE

<link>STRUCTURE

The <link> tag defines the relationship between a document

and an external resource. It is a single tag.

<link rel="stylesheet" type="text/css" href="stylesheet.css">

STRUCTURE

In the example above, the <link> tag has three attributes: rel (relationship), type, and href (hypertext reference).

EXAMPLE

Tags: Headings

<h1></h1> through

<h6></h6>

The header elements are block-leveltags that give you the ability to assign semantic weight (importance) to your

headlines.

EXAMPLE

Tags: Images

<img> STRUCTURE

The <img> element is a single, inline tag that works anywhere in the body

to insert a jpg, png, svg or gif file.

The <img> tag is empty; it requires a src (source) attribute to

“pull in” the image into the page. It does not require an “alt” tag, but if the image

is essential to the content (e.g. not a background or decorative element), it

should have one.

NOTE

<img src="images/logo.gif" alt=”Acme Corp”>

STRUCTURE

All <img> tags should also contain analt attribute. This is “alternate” text

that will appear if for some reason the image link is broken or the file is unavailable.

EXAMPLE

Tags: Paragraphs

<p></p>STRUCTURE

The <p> element is a block-level tag that contains default space-before and

space-after properties (making indention unnecessary.)

EXAMPLE

Tags: Lists

<ul>

<ol>

<dl>

List tags are always used in nested pairs. !

The wrapping tags define the list type, and indicate where the list series begins

and ends.

NOTE

<ul> <li></li>

</ul>STRUCTURE

The <ul> (unordered list) element is a block-level tag that wraps a series of <li> (list item) elements. The default property

for the list items is a bullet.

EXAMPLE

<ol> <li></li>

</ol>STRUCTURE

The <ol> (ordered list) element is a block-level tag that wraps a series of <li> (list item) elements. The default property

for the list items is decimal (1, 2, 3).

EXAMPLE

Tags: Anchors (linking)

<a></a> STRUCTURE

The <a> element is an inline tag that works anywhere in the

body to create a hyperlink.

EXAMPLE

<a href="aboutme.html">About Me</a>

<a> tags are always used in pairs, wrapping the content you want to activate

as a link. If you use an absolute URL, it must start with “http://”.

<a href="http://www.colum.edu">My school</a>

Relative vs Absolute links

Whenever you link to a file with an ‘href‘ (hypertext reference ) or ‘src’ (source) attribute, you are providing the browser and address to the resource. That address can be relative or absolute.

root directory (www.mysite.com)

index.html

images

logo.png

report.pdf

stylesheet.css

!

Relative vs Absolute links

A relative link is relative to the resource’s location in its directory. It is like saying “the restaurant is 2 blocks away.” In the example below, if ‘logo.png‘ were linked from the homepage (index.html), the tag would be:

<img src=”images/logo.png”>

root directory (www.mysite.com)

index.html

images

logo.png

report.pdf

stylesheet.css

!

Relative vs Absolute links

An absolute link is the full address to the resource’s location in the entire web. It is like saying “the restaurant is at 222 West Grand, Chicago IL 60625.”

<img src=”http://www.mysite.com/images/logo.png”>

root directory (www.mysite.com)

index.html

images

logo.png

report.pdf

stylesheet.css

!

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.

FTP

File Transfer Protocol

Local(your computer) Host

(www)

FTP Software

All premium code editors have ftp built in, which allows you to sync your project files to the server easily.

You will often need to post or download files from the server manually. For this you can use dedicated ftp software:

Fetch, Transmit and FileZilla & Fireftp (both free) are all good choices for Mac.

WALKTHROUGH: Set up a project in bbedit

Wordpress

CMS

A Content Management System (CMS) is a computer program that allows publishing, editing and modifying content on a web site as well as maintenance from a central page.

index.php database

Dynamic CMS

WALKTHROUGH: Set up a theme in Wordpress

WALKTHROUGH: Create a post in Wordpress