01 Intro to the Web

Posted on by

ome to Web Design Basics

Official course description:

This course is an introduction to web design and development within an overview of current web environments. Projects will cover planning and implementation of websites that offer common functionality as well as adhere to good usability, accessibility, compatibility, and validation practices. HTML, XHTML, CSS, interactivity, information architecture and navigational structures will be explored, as well as usability and web design strategies.

That is a lot to teach in one semester.

What would you do in my shoes?

I created this comprehensive website where I’ve written out all the lectures. You will always know where we are and what we have covered.

Class links on the right.

I do not read from these pages, but they align pretty close to the lectures. If you do not understand a topic presented in class, you can go back and read it again, and follow the links and examples until you do understand the topic.

The best students read ahead, and implement things like responsive design from the beginning. They do really well, as everything is in the class website, and a lot more besides.

The class website is great if you missed a class or need a reminder later on.

Learning to build websites is cumulative: basic skills are necessary for building advanced ones. You need understand the basic skills, before you can build a website with them.

If you feel you have missed or do not completely understand a topic well enough to move on, reread the supporting material in this website.

Email me whenever you have questions.

You can read the book

Lynda.com is good resource.

You can search the web for solutions.

There are lots of ways that you can get the information. The important thing is that you get it, and that you practice writing code.

The only way to learn to how to code is by writing code. Making mistakes is part of the process. The mistakes that stop you dead in your tracks disappear after the first week or two. Please do not be discouraged if you get stuck at first.

About this Website

Each class is standardized, so you should be able to figure out the information you are looking for, and if not, you can use the search bar at the top of the window to search through all of the pages.

Each class page starts with a topic summary and the homework requirements, like this.

Week 1
1/29

Introduction to Hyper Text Markup Language. Brief history and overview of the web. Activity: Create HTML file. Cover basic HTML elements and page structure. Activity: Website Analysis —create a copydeck, style guide and wireframe for the site you have chooses to review, and compare and contrast the site to its competition. Why does it work for you? Why does the competition’s websites not work?

Homework

Analyze the design and content of a website in line with your main interest. Make a style guide that explores the intent, voice, tone, brand and persona(s) of the target audience for the site. Use images. Mark up the assignment if you can. Watch videos. Read chapters 1-3. Due: Next Week — Due Next Week means due by the following Thursday Morning (that way I can look over the assignments and provide feedback on your markup.). Email the assignments until you get your server space up.

The topic summary and homework assignment is followed by a materials section that has all of the linked files associated with the class.

Green and red colored links are required reading.

Green signifies conceptual overview that helps put the material in perspective.

Red signifies core knowledge that you need to know to continue. That means you should reread the material if you do not understand, or read the corresponding chapters in the book.

How much you understand is clearly displayed by the way you code. I will assess you ability to code throughout the semester.

Materials

Additional materials for this unit can be found by following these links (36 pages if printed out):

The materials section is followed by goals and outcomes. This is what you are to learn.

Much of the learning is scaffolded, meaning that this is a necessary part of a larger skill set that you are to learn. You need to acquire these learning outcomes before the next class. The next class assumes this knowledge and builds upon it.

Goals

The goals of this unit are to:

  • Introduce the World Wide Web.
  • Understand the content strategy that goes into creating web sites.
  • Learn how to mark up content.
  • Set up a server at Parsons/New School using Fetch.
  • Create a page on the web.

Outcomes

At the end of this unit, students will:

  • Be familiar with the web and the code that generates web pages.
  • Have a good idea of the elements that make a website work.
  • Learn basic HTML elements.
  • Mark up a simple page.
  • Set up server space at Parsons NewSchool or through a private host.
  • Publish a page on the web.

The estimated breakdown of time it should take for each topic to be adequately covered in class. Some topics are summarized in a few minutes. Others are demonstrated at length. Emphasis is on those topics that help you master skills needed to build web pages, which are usually done through in class activities.

Step-by-Step

15 Welcome, introductions and hand out syllabus
5 Overview of the course and class portal.
15 Hand Out: Diagnostic Assessment
5 Lecture: History of the web.
10 Exploration of the web. Peek behind web page to look at the code.
15 Discussion: What does the web means to you and your work?
10 Question and Answers
15 Activity: Create content by writing.
10 Break
30 Demo/Activity: Marking up the content. Writing HTML
15 Tools of the Trade
15 Get server space set up.
10 Exercise: publish essay.
5 Go over Homework assignment
10 Q&A

Learn By Doing

  • Paying attention in class is half the battle.
  • Putting into practice what’s covered in class is the other half.
  • Each class teaches a necessary skill. Learn it.
  • Code a little each day, not once in a while. You’ll get over the frustration soon enough, and find that coding web pages is not nearly so difficult, once you understand the little mistakes, that everyone makes in the beginning.
  • There is a lot of support for you to understand each step of the way, from this website, the book, Lynda.com and the web itself.
  • The entire process is scaffolded, meaning that each class builds on the previous class.
  • Missing classes leads to holes in your ability to code websites. Please stay current and go back to a topic till you know it, and can build on top of it.
  • Each assignment targets a skill. Homework is collected and graded and you are given detailed feedback at least four times during the semester, more if you email me and ask for it.
  • There are two main assignments: a midterm portfolio and a professional, standards compliant, website that sells a product for the final.
  • If you complete all the assignments, you will be well on your way to obtaining the knowledge required to build any website that you can design.
  • The focus in the class is on structuring content and its presentation, not on behavior. You need solid HTML and CSS skills to make the most of Javascript or jQuery. Everyone wants the flash and sparkle of an animated website, but without a foundation to build upon, it will be a cliche or worse.
  • Students should not implement jQuery unless they have grasped and are comfortable implementing CSS and HTML. I Ignore Javascript and jQuery implementation when grading, looking only at how well you understand HTML and CSS. That is as far as the aim of this course goes.
  • That does not stop students from using a jQuery template like Boxify as the base for their final, but be aware that I will be looking only at what you’ve added, in terms of CSS and HTML.

What can HTML5 and CSS3 be used for?

  • Create Web Pages and Web Sites for your self
  • Create Web pages and Web Sites for others
  • Customize existing Blogs and Tumbler Accounts, etc.
  • Publish Electronic Books: Calibre Ebook Editor
  • Develop Mobile App Interfaces

The list is longer, as HTML5 and CSS3 is the language of choice for marking up content and styling it. They have become the universal language of content presentation.

Learning a Langauge

The course covers a lot of territory. It requires learning a new language that you do not yet know. This always takes time.

Visit HTML & CSS primer for a brief rundown on what code is and how it works.

The class spends less time on HTML (hyper text markup language) and more time on CSS, (cascading style sheets). We only touch on Javascript (jQuery), PHP and wordpress.

Like any new language, it takes time before you become familiar enough to not make the basic mistakes that stop you cold. Overcoming this will allow you to attempt the larger assignments in the middle and at the end of the semester.

Stay on top of the little steps. The big steps will happen automatically. You will be creating websites by the end of the semester.

There is no magic solution that painlessly provides all you need to know. Like any language, you only get good if you practice.

Write code after every lesson and try, and possibly fail, but try again, to see what works and make what works your own. This can be frustrating at first, as stupid little mistakes can stop you dead in your tracks. That is when you will hate this course. No one likes to be frustrated.

Don’t stop when get stuck. Take a few moments off, and try again.

Validate!

Validate your work often! The validator is your friend that will point out your mistakes.

There are alternatives, like Validator.nu, an alternate address for CSS validator, and direct CSS input.

Do not be alarmed if there are 50 mistakes. That can happen when you have not been using the validator as you should. The problem is usually not major, but if you have not validated in a while, one mistake can trigger a lot of other problems. Fix the first problem that is flagged, and chances are that many of the other problems will disappear.

If using validator does not solve your problems, email me. Email me whenever you get stuck.

Grading

I grade each assignment, usually 100% if done correctly, 80% if it is missing some requirements, 50% if it needs work and 25% if it is merely set up. Your homework can deliver you 125% or even 150% if it goes beyond expectations.

You will not always know how to do an assignment right away. Start the homework on time and hand it in, that way you can go back and finish it at a later date.

By handing in the assignment on time, you can continue to work on it till it meets the requirements, till the end of the Semester. This means you can fix problems that you did not understand at the time with knowledge you gained since. 

This is not an excuse to not do your homework till the last minute. Experience has shown that the homework prepares you to do the main assignment.

Information Overload

Yes, I know, there is a lot of material to read here.

No one is held accountable for all of the reading, watching the videos and following all of the links to pages on the web. That would be insane.

For me, it is better to have too much information than not enough. I’ve done my best to make it accessible in layers.

Read the first page, follow the links. Read the supporting articles. There are a lot of links on the secondary pages. I can’t expect you to follow all of those, or even make sense of them all. Don’t dwell on what you do not understand, but be ready to come back when your more able to absorb the information.

You are responsible for putting the information presented in class to work. Should you need help, all the lectures are written out, the pages in the book are indicated, links to video are available, you can search the web (search for answers to the problem you are having by entering your question in a full sentence) or email me. I answer emails as soon as I am able, usually right away.

How well you know the material becomes apparent in the website you build.

Each unit will point to a number of websites that exemplify current practices. This helps you see how the web implements the topics discussed in class.

Current Practices

A lot of websites deserve to be looked at as standard bearers for the web. A few that have stood the test of time:

  • CSS Zen Garden Original CSS experiment in 2003 that explores what is possible using CSS and galvanized the web toward standards compliant web sites.
  • The Rijks Museum opened the floodgates for the new single page jQuery web design experience. Others had come before, but it pushed this over the top. The user interaction and content are impeccable.

    See the design sensibility spreading Global Change from US.gov.

  • NY Times The New york Times soon followed. A standard setting newspaper that helped move the web away from its addiction to tables in 2007 has just been using jQuery animation. Follow the link to see how design considerations led to a more engaging web experience.
  • The New School Jumped onboard with the JQuery look in 2014 as well. The Parsons Web Site Remained conventional
  • Apple Apple helped define design as the central tenet of computer usage, and did so agains the establishment for many years. Its website is sparse, to focus on what is important, while hiding a site of vast complexity.
  • Facebook Not for what it looks like, but for having taken over a big part of the web. It walled off a large section of the web and privatized the experience. The privacy is good for users, who feel free to share their experiences with friends and family, except the back door, which shares the details with corporations to target advertising and government spy agencies. That’s not all they collect, so watch out what you say or do. That’s the price of freedom, or so they say.
  • Then there is the future of the web. Where is it going? Browser manufacturers are pushing the envelope, trying to create an entirely new interactive medium, using just HTML, CSS and Javascript. Microsoft’s Internet Explorer demo. Read about how it is done.

Community

So what can you do once you learn HTML and CSS?

We start with two websites built in class, but by the end, you should be able to pick up a template like this and create a modern website. It was created by Peter Finlan who uses what he has learned to promote himself in his site.

This exhibits what’s best about the web, which is a global community that shares and cares about web design. They are there for you. All you need is HTML and CSS to join.

There is nothing like examples to motivate your own work. Please be motivated to do your very best. You are the one who gains from learning these skills.

I’ve had several students who have successfully pursued a career in web design, the most recent is Urara Ito (Current Portfolio Site and Student Portfolio Site), who landed a job with Yahoo! Japan just a year after taking the class. Everything is here for you to make this a reality. All you need is to put in the time.

Previous Semester Work

Communication Design: kathryn lawrence

Design Marketing: Yvonne Yeh

Communication Design: Francesca Davoren-Britton

My desire is for you to expand your horizon beyond what is taught in class. The News and External Resources Links are a gateway in that direction. This section include links to external resources. It is highly recommended that you explore and make use of them.

Sometimes the information is pertinent to skills I expect you to have, like visual literacy and typography for students who have not been exposed to the general principles used in designing visual communication. Other links list important resources or important blogs and magazines that you can subscribe to.

News and External Resources

design notes from a design course included for students who are not primarily design majors and have not been exposed to the elements and structure of visual communication. Visual Literacy is taken for granted in this course. Learn about that here:

  1. color
  2. concept
  3. form
  4. content
  5. figure & ground
  6. balance
  7. proportion
  8. unity
  9. elements

The readings are from the book, 7th edition. HTML5 & CSS3 Visual QuickStart Guide (8th Edition) ($24.29 at Amazon) by Elizabeth Castro and Bruce Hyslop. You can read the book cover to cover, or just those sections in which you need help.

It does not matter if the class material compliments the book, or if the book compliments the class material. One way or another, you need to practice till you understand the material well enough to make it your own. If reading this book helps, then by all means, buy it.

The contents of the book are loosely followed in class. This gives you a quick reference as to the topics covered in each chapter. If you elected to rent the book from Pearsons, you can use the links below to go to the content directly.

Readings

Chapter 1: Web Page Building Blocks

  1. A Basic HTML Page 3
  2. Semantic HTML: Markup with Meaning 6
  3. Markup: Elements, Attributes, and Values 13
  4. A Web Page’s Text Content 16
  5. Links, Images, and Other Non- Text Content 17
  6. File Names 19
  7. URLs 20
  8. Absolute URLs 21
  9. Relative URLs 22

Chapter 2: Working with Web Page Files

  1. Planning Your Site 26
  2. Creating a New Web Page 28
  3. Saving Your Web Page 30
  4. Specifying a Default Page or Homepage 33
  5. Editing Web Pages 35
  6. Organizing Files 36
  7. Viewing Your Page in a Browser 37

Chapter 3: Working with Web Page Files

  1. Starting Your Web Page 43
  2. Creating a Title 46
  3. Creating Headings 48
  4. Understanding HTML5’ s Document Outline 50
  5. Grouping Headings 58
  6. Common Page Constructs 60
  7. Creating a Header 61
  8. Marking Navigation 64
  9. Creating an Article 68
  10. Defining a Section 72
  11. Specifying an Aside 75
  12. Creating a Footer 80
  13. Creating Generic Containers 84
  14. Improving Accessibility with ARIA 88
  15. Naming Elements with a Class or ID 92
  16. Adding the Title Attribute to Elements 95
  17. Adding Comments 96

Lynda.com is a resource for instructional videos. She has been at it for a long time, and there are a lot of videos on Web Design (36). They are a great resource.

Signing on to lynda.com

Lynda.com HTML Video Tutorials

Web Design Fundamentals and HTML Essential Training.

The last item on each page contains the definitions, words used in the class that you should be familiar with.

Definitions

These are the terms that participants should be familiar with during this unit:

The W3 organization definitions of HTML, XHTML and CSS:

HTML (the HypertextMarkup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Webpages. HTML provides the structure of the page, CSS the(visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and WebApplications.

What is HTML?

HTML is the language for describing the structure of Web pages. HTML gives authors the means to:

  • Publish online documents with headings, text, tables, lists, photos, etc.
  • Retrieve online information via hypertext links, at the click of a button.
  • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
  • Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.

What is XHTML?

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).

What is CSS?

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or:content) from presentation.

The remaining definitions are from Wikipedia

Internet

The Internet is a global system of interconnected computer networks that use the standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies. The Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support electronic mail.

HTTP

The Hypertext Transfer Protocol (HTTP) is a networking protocol for distributed, collaborative, hypermedia information systems.[1] HTTP is the foundation of data communication for the World Wide Web.

FTP

File Transfer Protocol (FTP) is a standard network protocol used to copy a file from one host to another over a TCP-based network, such as the Internet.

HTML

HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. HTML is the basic building-blocks of webpages.

HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like <html>), within the web page content. HTML tags normally come in pairs like <h1> and </h1>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tables, images, etc.

The purpose of a web browser is to read HTML documents and compose them into visual or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

XHTML

XHTML (eXtensible HyperText Markup Language) is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language (HTML), the language in which web pages are written.

While HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. Because XHTML documents need to be well-formed, they can be parsed using standard XML parsers—unlike HTML, which requires a lenient HTML-specific parser.

XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C Recommendation on May 31, 2001. XHTML5 is undergoing development as of September 2009, as part of the HTML5 specification.

CSS

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C).

Javascipt

JavaScript, also known as ECMAScript,[6] is a prototype-based, object-oriented[7] scripting language that is dynamic, weakly typed and has first-class functions. It is also considered a functional programming language[1] like Scheme and OCaml because it has closures and supports higher-order functions.[8]

JavaScript is an implementation of the ECMAScript language standard and is primarily used in the form of client-side JavaScript, implemented as part of a web browser in order to provide enhanced user interfaces and dynamic websites. This enables programmatic access to computational objects within a host environment.

HyperLinks

In computing, a hyperlink (or link) is a reference to a document that the reader can directly follow, or that is followed automatically.[citation needed] A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. A software system for viewing and creating hypertext is a hypertext system, and to create a hyperlink is to hyperlink (or simply to link). A user following hyperlinks is said to navigate or browse the hypertext.
A hyperlink has an anchor, which is the location within a document from which the hyperlink can be followed; the document containing a hyperlink is known as its source document. The target of a hyperlink is the document, or location within a document, to which the hyperlink leads. Users can activate and follow the link when its anchor is shown, usually by touching or clicking on the anchor with a pointing device. Following the link has the effect of displaying its target, often with its context.
The most common example of hypertext today is the World Wide Web: webpages contain hyperlinks to webpages. For example, in an online reference work such as Wikipedia, many words and terms in the text are hyperlinked to definitions of those terms. Hyperlinks are often used to implement reference mechanisms, such as tables of contents, footnotes, bibliographies, indexes and glossaries.

Web Browser

A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece of content. Hyperlinks present in resources enable users to easily navigate their browsers to related resources.

Standards Compliant Web Design

Standards-compliant is a term often used in describing websites and user agents’ (often web browsers) relative compliance with web standards proposed by the World Wide Web Consortium (W3C); also used for emphasizing that one doesn’t use proprietary methods or features of those browsers to ensure interoperability. Although there is no perfect browser that seamlessly adheres to all standards at the time being, huge advancement has been made by several major web browsers (such as Mozilla Firefox and Opera) in the past few years that will ensure better interoperability in the future.
Current use of the term “standards-compliance” generally refers to the adherence to coding practices in relation to the use of HTML or XHTML, with Cascading Style Sheets (CSS) to define the layout, colors, and fonts of a web page. The Web Standards Project (WaSP) is a group, mainly composed of experienced web developers, whose mission is to encourage the use of these standards globally. Their recent efforts have been to promote the use of and adherence to the CSS 2.0 web standard by browsers, including how browsers respond to invalid markup and styles. The tests developed by WaSP are called Acid1, Acid2, and Acid3, with each testing CSS1, CSS2, and CSS2+ (CSS2 + Client-Side Scripting), respectively.