Week 2-intro-html

50 %
50 %
Information about Week 2-intro-html

Published on February 4, 2014

Author: shawncalvert

Source: slideshare.net

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

shawncalvert.com/webdesign-1 ! TO DO
 download 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-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., ! 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

php asp .net ! SERVER ! page.html ! BROWSER style.css java script.js etc 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.

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!


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 
 <tag>Content</tag> An HTML element includes both
 the HTML tag and everything between 
 the tag (the content).

Anatomy of an Element 
 The element tag gives the 
 content structure and meaning.

Anatomy of an Element 
 Tags normally come in pairs. The first tag is the start tag, and the second
 tag is the end tag. 

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

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

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

Tags: Basic Structure

doctype html head body 

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

 The <html> element defines
 the whole HTML document.

 The <head> element contains special elements that instruct the browser where to find stylesheets, provide meta info, and more.

<html lang=”en”></html>
 The <html> element should have a “lang” attribute to tell the browser what language your page is written in.

 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 

 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>

 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">
 The <meta> is a single tag —
 it does not require a closing tag.

 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">
 In the example above, the <link> tag
 has three attributes: rel (relationship), 
 type, and href (hypertext reference).

Tags: Headings

 through <h6></h6> 
 The header elements are block-level
 tags that give you the ability to assign
 semantic weight (importance) to your headlines.


Tags: Images

 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.

 <img src="images/logo.gif" alt=”Acme Corp”>
 All <img> tags should also contain an
 alt attribute. This is “alternate” text
 that will appear if for some reason the image link is broken or the file is unavailable.

Tags: Paragraphs

 The <p> element is a block-level tag 
 that contains default space-before and space-after properties (making indention


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.

<ul> <li></li> </ul>
 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.


<ol> <li></li> </ol>
 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).


Tags: Anchors (linking)

 The <a> element is an inline 
 tag that works anywhere in the 
 body to create a hyperlink.

 <a href="aboutme.html">About Me</a>
 <a href="http://www.colum.edu">My school</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://”.

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.


File Transfer Protocol
 (your computer)

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


 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.

Dynamic CMS 

WALKTHROUGH: Set up a theme in Wordpress

WALKTHROUGH: Create a post in Wordpress

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014


Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Week 2 INTRO | PSY 3165 PHYSIO

Read Discussion Starter. Write Discussion W2- What is the mind body problem and how does study of the brain reveal what we buy? Post in blackboard.
Read more

Week 2 Intro to. Theatre - Washington State University

During Week #2 we will do Project 2, plus read M. Butterfly: M. BUTTERFLY. Project 2: ACTING: M. BUTTERFLY:
Read more

Gabby Biltz - Week 2- Intro to HTML

Gabby Biltz . My name is Gabby Biltz and I am a student at Bio-Med Science Academy . I am very involved in my studies, and enjoy school. In addition to ...
Read more

Level 1 -- Week 2 -- Introduction

Aural discrimination of High and Low sounds, introduction and decoding the sound/symbol of the quarter note
Read more

Introduction to the Course

Introduction to the Course Welcome back to Birmingham, which has more canals than Venice ... The first meeting will be on Tuesday of week 2.
Read more

Introduction - SAMPLE Motown Bass Lesson 2 intro

Introduction. In this lesson we will look a some basic pitches used by James Jamerson. The "pitch sets" are little cells that make up a part of the Motown ...
Read more

Summer 2010 — R: ggplot2 Intro - Department of Linguistics

Summer 2010 — R: ggplot2 Intro-General: Graphics Home: Contents Intro. ... The Philadelphia counties data we looked at last week is a good example.
Read more


Hier sollte eine Beschreibung angezeigt werden, diese Seite lässt dies jedoch nicht zu.
Read more

Environmental Toxicology - Module 2 Introduction

Environmental Toxicology ©Copyright 2000 photography by David Stock ...
Read more