Author Archives: onno

03 Applying CSS

Posted on by
Reply


There are many CSS properties. You do not have to memorize them all. You will remember the ones you use most often, and the other ones you can always look up. I’ve separated many of the properties into a number of interactive demos so that you can try them out. Spend some time in this sandbox, change the values of the properties or add new properties. This is where you can play and learn while it is still fun.

Color

Color is always RGB. That is how computers work. These are additive colors, you can call them by name or RGB value, both by percentages, decimal number or hexadecimal shorthand (Hexadecimal is base 16, or 1,2,3,4,5,6,7,8,9,a,b,c,d,e,f ), which is the most common form, introduced by a # hash mark, and allows each value (red, green and blue) to be represented by two Hexadecimal values, like #000000 is black or #ff0000 is red, #00ff00 is green and #0000ff is blue. Can you guess what the value of white is? If you guessed #000000, you are correct!

Here are the names of the colors, with their Hexadecimal and decimal numbers as an example:

Color Color name Hex rgb Decimal

    aliceblue #f0f8ff 240,248,255

    antiquewhite #faebd7 250,235,215

    aqua #00ffff 0,255,255

    aquamarine #7fffd4 127,255,212

    azure #f0ffff 240,255,255

    beige #f5f5dc 245,245,220

    bisque #ffe4c4 255,228,196

    black #000000 0,0,0

    blanchedalmond #ffebcd 255,235,205

    blue #0000ff 0,0,255

    blueviolet #8a2be2 138,43,226

    brown #a52a2a 165,42,42

    burlywood #deb887 222,184,135

    cadetblue #5f9ea0 95,158,160

    chartreuse #7fff00 127,255,0

    chocolate #d2691e 210,105,30

    coral #ff7f50 255,127,80

    cornflowerblue #6495ed 100,149,237

    cornsilk #fff8dc 255,248,220

    crimson #dc143c 220,20,60

    cyan #00ffff 0,255,255

    darkblue #00008b 0,0,139

    darkcyan #008b8b 0,139,139

    darkgoldenrod #b8860b 184,134,11

    darkgray #a9a9a9 169,169,169

    darkgreen #006400 0,100,0

    darkgrey #a9a9a9 169,169,169

    darkkhaki #bdb76b 189,183,107

    darkmagenta #8b008b 139,0,139

    darkolivegreen #556b2f 85,107,47

    darkorange #ff8c00 255,140,0

    darkorchid #9932cc 153,50,204

    darkred #8b0000 139,0,0

    darksalmon #e9967a 233,150,122

    darkseagreen #8fbc8f 143,188,143

    darkslateblue #483d8b 72,61,139

    darkslategray #2f4f4f 47,79,79

    darkslategrey #2f4f4f 47,79,79

    darkturquoise #00ced1 0,206,209

    darkviolet #9400d3 148,0,211

    deeppink #ff1493 255,20,147

    deepskyblue #00bfff 0,191,255

    dimgray #696969 105,105,105

    dimgrey #696969 105,105,105

    dodgerblue #1e90ff 30,144,255

    firebrick #b22222 178,34,34

    floralwhite #fffaf0 255,250,240

    forestgreen #228b22 34,139,34

    fuchsia #ff00ff 255,0,255

    gainsboro #dcdcdc 220,220,220

    ghostwhite #f8f8ff 248,248,255

    gold #ffd700 255,215,0

    goldenrod #daa520 218,165,32

    gray #808080 128,128,128

    green #008000 0,128,0

    greenyellow #adff2f 173,255,47

    grey #808080 128,128,128

    honeydew #f0fff0 240,255,240

    hotpink #ff69b4 255,105,180

    indianred #cd5c5c 205,92,92

    indigo #4b0082 75,0,130

    ivory #fffff0 255,255,240

    khaki #f0e68c 240,230,140

    lavender #e6e6fa 230,230,250

    lavenderblush #fff0f5 255,240,245

    lawngreen #7cfc00 124,252,0

    lemonchiffon #fffacd 255,250,205

    lightblue #add8e6 173,216,230

    lightcoral #f08080 240,128,128

    lightcyan #e0ffff 224,255,255

    lightgoldenrodyellow #fafad2 250,250,210

    lightgray #d3d3d3 211,211,211

    lightgreen #90ee90 144,238,144

    lightgrey #d3d3d3 211,211,211

    lightpink #ffb6c1 255,182,193

    lightsalmon #ffa07a 255,160,122

    lightseagreen #20b2aa 32,178,170

    lightskyblue #87cefa 135,206,250

    lightslategray #778899 119,136,153

    lightslategrey #778899 119,136,153

    lightsteelblue #b0c4de 176,196,222

    lightyellow #ffffe0 255,255,224

    lime #00ff00 0,255,0

    limegreen #32cd32 50,205,50

    linen #faf0e6 250,240,230

    magenta #ff00ff 255,0,255

    maroon #800000 128,0,0

    mediumaquamarine #66cdaa 102,205,170

    mediumblue #0000cd 0,0,205

    mediumorchid #ba55d3 186,85,211

    mediumpurple #9370db 147,112,219

    mediumseagreen #3cb371 60,179,113

    mediumslateblue #7b68ee 123,104,238

    mediumspringgreen #00fa9a 0,250,154

    mediumturquoise #48d1cc 72,209,204

    mediumvioletred #c71585 199,21,133

    midnightblue #191970 25,25,112

    mintcream #f5fffa 245,255,250

    mistyrose #ffe4e1 255,228,225

    moccasin #ffe4b5 255,228,181

    navajowhite #ffdead 255,222,173

    navy #000080 0,0,128

    oldlace #fdf5e6 253,245,230

    olive #808000 128,128,0

    olivedrab #6b8e23 107,142,35

    orange #ffa500 255,165,0

    orangered #ff4500 255,69,0

    orchid #da70d6 218,112,214

    palegoldenrod #eee8aa 238,232,170

    palegreen #98fb98 152,251,152

    paleturquoise #afeeee 175,238,238

    palevioletred #db7093 219,112,147

    papayawhip #ffefd5 255,239,213

    peachpuff #ffdab9 255,218,185

    peru #cd853f 205,133,63

    pink #ffc0cb 255,192,203

    plum #dda0dd 221,160,221

    powderblue #b0e0e6 176,224,230

    purple #800080 128,0,128

    red #ff0000 255,0,0

    rosybrown #bc8f8f 188,143,143

    royalblue #4169e1 65,105,225

    saddlebrown #8b4513 139,69,19

    salmon #fa8072 250,128,114

    sandybrown #f4a460 244,164,96

    seagreen #2e8b57 46,139,87

    seashell #fff5ee 255,245,238

    sienna #a0522d 160,82,45

    silver #c0c0c0 192,192,192

    skyblue #87ceeb 135,206,235

    slateblue #6a5acd 106,90,205

    slategray #708090 112,128,144

    slategrey #708090 112,128,144

    snow #fffafa 255,250,250

    springgreen #00ff7f 0,255,127

    steelblue #4682b4 70,130,180

    tan #d2b48c 210,180,140

    teal #008080 0,128,128

    thistle #d8bfd8 216,191,216

    tomato #ff6347 255,99,71

    turquoise #40e0d0 64,224,208

    violet #ee82ee 238,130,238

    wheat #f5deb3 245,222,179

    white #ffffff 255,255,255

    whitesmoke #f5f5f5 245,245,245

    yellow #ffff00 255,255,0

    yellowgreen #9acd32 154,205,50

Change the Color of the Background

CSS Code View

Live Demo


Font Properties

Basic properties that style the font. Children inherit these properties from parents.

CSS Code View

Live Demo

Font Style Properties

More stylistic properties to change the appearance of fonts.

CSS Code View

Live Demo

Font Style Properties


Text Layout Properties

These properties have to do with the inline flow of the characters. The children inherit all of these properties from their parents. I have created three selectors, one for the header h3., one for the body text p and one for the superscript inside the body text.

CSS Code View

Live Demo

Text Layout Properties

Change the text by applying different styles. Notice that when you make a mistake, the style reverts to the default style. The 1st selector is an h3. The 2nd selector is a p. The 3rd selector is a span acting like a superior (sup) tag and the 4th selector selects an actual sup tag and colors it red.


Box Properties

box model

Each HTML element is a box. The size of this box is determined by its inheritance, the content, or by a CSS rule. By default, the width of the box is inherited from the parent and the height is determined by the content. That makes the box is as wide as its parent, or the width of the window when the parent element is the body tag.

The box remains invisible unless it has a border or a background.

The box has four sides. You can target each side’s margin, border and padding at once padding: 10px; the vertical and horizontal sides separately padding: 0 auto or each side independently, starting at the top and moving clockwise: top, right, bottom and left padding: 0px 30px 60px 90px;.

CSS Code View

Each element is a box. The size of the box is determined by the parent element, or if CSS is used, the box can have a width, height, padding, border and margins. Padding and the border is added to the size of the content.


Border Properties

The border usually uses a shorthand where the width, color and style are given in this order: border: 10px solid #f68;. Leaving any one of these out breaks the border. Here is a list of the styles:

none: No border. Color and width are ignored (i.e., the border has width 0 unless the border is an image.
hidden: Same as none but has different behavior in the border conflict resolution rules for border-collapsed tables.
dotted A series of round (square?) dots.
dashed: A series of square-ended dashes.
solid: A single line segment.
double: Two parallel solid lines with some space between them.
groove: Looks as if it were carved in the canvas.
ridge: Looks as if it were coming out of the canvas.
inset: Looks as if the content on the inside of the border is sunken into the canvas.
outset: Looks as if the content on the inside of the border is coming out of the canvas.

CSS Code View

Live Demo

You can change the border attributes including the style yourself.


Thematic Break

The Thematic Break, also knows as the horizontal rule in previous version of HTML has the following CSS for the default style. You can change that.

CSS Code View

Live Demo


Margin and Padding Properties

These properties belong to the box model, and are similar, in that they create or subtract space from the sides of the box. I created two elements to show how border collapse works when two margins overlap and only the largest margin is used.

CSS Code View

Live Demo

BOX 1: The margin is set for 20px auto, meaning that the box has 20 pixels of margin on top and bottom, and the left and right margins are automatically adjusted to center the box, possible only because the box has a declared width

BOX 2: Notice that even though both boxes have a 20px margin, that margin collapses between the boxes. If you play around with the numbers, you will see that it collapses the smaller margin into the larger margin.


List Properties

Lists are used for any element that acts like a list. Many elements are styled as lists, and when that happens, its important to take control over the list element, so that the items styled take on the look that does not necessarily look like a list. Menus are a great example of this but many other items are also considered candidates for being styled as lists. If the list-item-style is turned to one of the automatically incrementing counters, the un-ordered list is automatically turned into an ordered list.

CSS Code View

Live Demo

  • List Item
  • List Item
    • List Item
    • List Item
    • List Item

The HTML for the unordered list

<ul>
<li> List Item </li>
<li> List Item </li>
	<ul>
		<li> List Item </li>
		<li> List Item </li>
		<li> List Item </li>
	</ul>
</li>
</ul>

Live Demo

Have numbers span ordered lists by using the attribute start="3" or 55 or 77

  1. List Item
  2. List Item
  1. List Item
  2. List Item
  1. List Item
  2. List Item
  1. List Item
  2. List Item

You can style the bullets of the list with gradients As Eric Meyer demonstrates.

CSS Code View

Live Demo

  • This is a list item.
  • So is this.
  • The list is unordered.
  1. This is a list item.
  2. So is this.
  3. The list is ordered.
  1. This is a list item.
  2. So is this.
  3. The list is ordered.


Tables

Tables used as tables are part of the HTML/CSS landscape. Tables used for layout purposes are to be banished. That said, if you want to style a table, its best to create as many hooks in it as possible. This means that a table can have table header, a table footer and multiple table bodies. It is also possible to style columns. The code and an explanation of how the table works is reproduced below:

CSS Code View

The Caption Holds the Title of the Table
Head 1 Head 2 Head 3
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
table cell item table cell item table cell item
The Footer is a Place for Information About the Table. 
<table id="table">
 <caption>The Caption Holds the Title of the Table
 </caption>
 <col><col><col>
 <thead> 
  <tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr>
 </thead>
 <tbody>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
 </tbody>
 <tbody>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
  <tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
 </tbody>
 <tfoot>
 <tr><td colspan="3">
	The Footer is a Place for Information About the Table.
  </td></tr>
 </tfoot>
</table>

The HTML code for the table can be divided into parts, and each can be styled separately. There are table headings, footers, data cells and captions and rows, all of which can be styled. The even and odd table rows are styled using pseudo selectors. If you look at the code, you can see that the table caption comes first, then the table header, two table bodies that contain the table rows and the table data cells and finally a table footer. The row tags allow the three rows to be styled individually, though that too could be handled by pseudo selectors.


Pseudo Classes

Pseudo classes are additional classes that belong to the same element. They are most frequently applied to the link element for navigation, where hover and click or visited states can be applied to that link, though any element can have hover states applied:

CSS Code View


Pseudo Classes: not

A collapsable guide to the layout modes. All of the work is being done by the last CSS rule using the pseudo class not, as in not target or hover li:not(:target):not(:hover) .

CSS Code View

Live Demo

Here you will find links to the layout modes article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties.

HTML

  <nav>
    <ul>
      <li id="nav-about"><a href="#nav-about">Layout Modes</a>
        <ul>
          <li><a href="#layoutModes" target="_blank">Layout Modes</a>
          <li><a href="#block" target="_blank">Block Display</a>
          <li><a href="#inline" target="_blank">Inline Display</a>
        </ul>
      <li id="nav-projects"><a href="#nav-projects">Positioning</a>
        <ul>
          <li><a href="#positioning" target="_blank">Normal</a>
          <li><a href="#relative" target="_blank">Relative</a>
          <li><a href="#absolute" target="_blank">Absolute</a>
          <li><a href="#fixed" target="_blank">Fixed</a>
          <li><a href="#floats" target="_blank">Floats</a> 
          <li><a href="#tables" target="_blank">Tables</a>
        </ul>
      <li id="nav-interact"><a href="#nav-interact">Other</a>
        <ul>
          <li><a href="#display" target="_blank">Display</a>
          <li><a href="#zindex" target="_blank">Z Index</a>
          <li><a href="#over-flow" target="_blank">Overflow</a>
        </ul>
    </ul>
  </nav>
  <div>
   Here you will find links to the <a href="http://b.parsons.edu/~dejongo/04-the-layout-modes" target="_blank">layout modes</a> article, including the document flow, the positioning of the elements within the document flow and display, z-index and overflow properties. 
  </div>
</div>


Pseudo Elements

Pseudo classes add elements to existing elements, in CSS rather than in the document. They can be first letter and line in an inline element and the before and after a block element.

CSS Code View

Live Demo

Pseudo Elements

A pseudo element I use often is the first-line pseudo element.

But other pseudo elements, particularly the before and after, are powerful, as you can see in this posted notes look complete with a page curl above right, created by the before element on the div above, without additional elements in the HTML. Quotes as in <q>quotation marks</q>can be given quotation marks using the before and after pseudo elements.

See more such wizardry in the creation of 84 icons, using nothing but such CSS tricks.

The trick with the folded corner is a really thick border that surrounds the empty content between the quotes of the css content property. The corners of the border meet at a 45° angle, and when the content is nothing, all four corners meet at the middle in a sharp point. Put two such corners together and you get the triangle used to shape the page curl. All you have to do is fill those two sides with the color of the page curl, and fill the other two sides with the background color to block out the corner of the note, which would otherwise stick out.

Cursor

Give the user feedback. Changing the cursor is an instruction away. Roll over the square to see the change.

CSS Code View

Live Demo

Roll the cursor over this square to see it change to a little hand with a pointing finger cursor. Change the cursor in the CSS view to check out all of the cursors.

So much more

30 Seconds if CSS. Ready made CSS snippets to help you build your website.

01 Intro to the Web

Posted on by
Reply

Clicking on the introductory text brings you down to the materials section.

The Original course title was Web Design Basics. The official description and title have changed, but the topic matter is still what it was, and better described by the old title.

Official Description

CD FOUNDATIONS: INTERACTION is designed to introduce students to programming as a creative medium—as a way of making and exploring. The coursework focuses on developing a vocabulary of interaction design principles which can then be applied across a range of platforms. Students are encouraged to experiment with various media, tools, and techniques, ultimately producing a portfolio of interactive and visual projects designed for the screen. An emphasis is placed on typography as it applies to a screen context, research-based problem solving and a “learning through making” approach to technical skill building. Historical and current interaction design precedents will be discussed.

Welcome to Web Design Basics

 

CSS is in the middle of changes that will eventually require me to adjust the way I teach the course. The changes have not yet settled down as I wait for best practices to become clear. In addition, artificial intelligence is changing the landscape, providing editorial, image, and design solutions and code to students where there had been none. It will take a while before the dust has settled. In the meantime, I’ve accumulated a lot of material through the years, so changing the course is easier said than done. I’ve integrated some of the new topics along with making sure that the old ways remain available. Extra credit to anyone giving me useful feedback on improving the website.

Collaborate, be compassionate, and creative!

Tim Berners-Lee, the person who founded the World Wide Web, posted an open letter on the web’s 35’s birthday (March 23, 2024) discussing the state of the web, affirming his original intention, the three Cs: the intention for collaboration, to foster compassion, and generate creativity, and criticizing its commercialization and monopolization. That is what the web is about. This is your community. Collaborate, be compassionate, and creative!

What do you hope to achieve this semester? What kind of learner are you?

Write a sentence or two expressing what you hope to achieve this semester. Also let me know if you are a self learner or not. Post this on the landing page you will create next week.

Inspiration

Building a website opens you up to your target audience. Exposure to what you perceive to be your target audience is the biggest benefit of this course. Capitalize on that opportunity! It is not learning how to build websites, which is easy enough, and gotten easier with AI, but to use that knowledge to discover, target, and convert your target audience: to sell yourself. Use this course to position yourself within your professional horizon. It is an opportunity to organize, test out, innovate, secure and professionally develop yourself. The future will be shaped by AI. What is AI? AI will only become more ubiquitous, so you might as well get to know it. I expect you to use AI to help you confront AI, and to come out on top.

Let’s say your major is product design. When the instructor asks you to come up with a product idea, those ideas most likely originate out of your own interests, of what you want to do, or out of what you think your teacher requests. But by building a website to sell that project, you start thinking about the target audience. Who is the product for? How will they use it. How are similar products marketed? What can I learn from the competition? Do the research. Check out other websites. As the competition is established, they probably know a thing or two about how to reach their customers. This is the market you have to enter.

Working to define your target audience, figuring out how to best capture their attention, and selling your product will impact how you communicate whatever commercial art you are working on here at Parsons. Being attentive to the real world and targeting your work is the best way to initiate any product. Doing so will make you more competitive. A marketing strategy for your product will force you to create a more thorough and complete job from the outset.

The course demands you to think about your target audience. Who will use your website? Who are you building it for? This is an opportunity to think about, investigate, and target your work. Whatever your major: photography, illustration, fashion design, etc, your work will improve when you take your target audience into consideration. Building a website around that goal can only reinforce your concentration as to who your target audience is. Haven’t thought about it much? This is a commercial design school. You are being educated to solve the problems that other people want solved. You need to be clear as to what the problems are, so you can solve them. A website gets you into that space, so you can test things out.

What are my expectations?

I hope this course primes you to always consider your target audience for all your creative commercial work while at Parsons and beyond. It keeps you on target to develop meaningful creative website and marketing materials for whatever projects you will create long after you leave this class.

I recently ran into the son of a friend of mine who picked up a new girlfriend who recently graduated from the fashion design program at Parsons. She did develop a generic website, using SquareSpace or Wix, I’ve forgotten. She did not investigate her target audience until the very last year, and was not prepared to market her work until the last moment. After explaining what this class is about, she wished she had taken something like this early on in her student career, so she could have been up and running by the time she graduated rather than figuring out how to do that at the last moment. This course is about developing who you are and your professional career. Think of it as an opportunity and treat it that way. The real grade for this course is earned by what you make of yourself outside of this class, not some letter grade on a transcript that few will ever take note of.

Communication Design Attendance Policy

In order to foster a studio learning environment where we all learn from peers and through dialogue, timely and regular attendance is a strict expectation for all Communication Design students. Students who are not present in class are unable to meet the learning outcomes of a Communication Design course. Thus, it is an expectation of the program that students attend all classes. We recommend that students reserve the use of absences for unexpected situations.

Should students need to miss class for personal reasons, students are allowed the following number of absences:

For classes meeting once a week, students are allowed 2 absences. For classes meeting twice a week, students are allowed 4 absences. Any absence beyond the allowed absences will result in an automatic failure (F) for the course. There are no excused absences, and doctor’s notes are not necessary.

A student is deemed tardy if a student fails to arrive within 15 minutes past the beginning of class. 2 tardies will result in an automatic absence. A student who arrives an hour past the beginning of class will be deemed absent.

Per Parsons policy, faculty are asked to notify the student’s advisor and program director if the student has missed a significant portion of class time: 2 absences for a once/week class or 4 absences for a twice/week class.

Expectation of Students

  1. Students are expected to adhere to the CD Attendance Policy. Save your absences for unexpected events. Missing class for any reason (including quarantining) will count as an absence.
  2. Students are responsible for ensuring their computers are working
  3. Students are expected to fully and actively participate in class.

Grades

Officially, three absences is failure. That is school policy. It is up to my discretion to enforce that, and I have been known to be a little more lenient with students demonstrating superlative work.

There are 20 assignments I use to grade your progress, but the main deciding factor is the progress you exhibit between the midterm assignments and the final. I expect visually informed, creative, professional looking, websites that take user experience into account. Use validator to catch your errors and fix them before I grade your work. I provide feedback on your work throughout the semester, but calculate a final grade only at the end, which allows for revisions to earlier or incomplete work without penalty. Contact me if you have any questions as to your standing in the course. 

Everyone will not have had the same exposure to the plastic language required to solve visual problems in art, photography, graphic design, and the other Parsons design related fields. Experience has taught me that just because a student can illustrate does not mean that they are effective at solving problems in communication design required to present their work effectively. Students from other parts of the New School may require more visual literacy studies. To help amend any visual literacy deficiencies, there is supplementary information and the vignelli Canon to help everyone achieve effective communication. I expect the Communication Design Minors to be educated visual and communicative problem solvers. These resources will help you achieve visual literacy. I will not grade you on your limitations. Each person is evaluated on their own terms and will not be compared to other students’ fluency in design, etc. Seek help and advice from me or your peers, not only to solve problems in your code, but for visual and design issues as well.

Learning how to Code

My job is to get you to code. Coding for the web is a vast and growing field, and I could never teach it all. Instead, I provide a good foundation that you can build upon as you make coding for the web your own.

Learning to code requires internalizing the rules and methods associated with HTML and CSS. JavaScript will not be covered. You learn by coding. Internalize HTML and CSS by creating websites. Be ready to explore how to code. The World Wide Web is the teacher that has every answer. Effective web searches are a great way to understand the problems that you encounter.

Start with these basic video if you have no clue at all. Follow along and try it yourself. Take the initiative and build websites. The magic is in the repetition. Your ability to problem solve with code improves with each website you build. The more websites you build, the better you become.

Chat GPT and an increasing number of AI competitors are available to help you code, create pictures, write copy, etc. Get to know them and take advantage of these resources. But be familiar with the basics of HTML and CSS, or you will have difficulty integrating the code they produce. For that reason, hold off from using AI to code the website for you until the second half of the course. Then you AI to help create websites that go beyond what you can code on your own, but do not be surprised if the results are generic. Your websites need to stand out, to be different from other websites, to reflect who you really are, and catch the attention you deserve. AI will not do that, or at best help you once you have helped yourself. You need to learn how to hand code to make that unique and special website.

There are other ways to expedite the creation of a website, like using Twitter’s Bootstrap to realize your site. But you still need to have the basics down to take advantage of Bootstrap, and it takes time to learn Bootstrap that is not spent learning HTML and CSS. Though Bootstrap websites are professional, you cannot generate a totally unique site the way you can by hardcoding it. Once again, hold off with Bootstrap or any other web-site-builder software till after the midterm.

Other programs don’t require that you know any HTML or CSS, and provide an InDesign-like interface experience. I’ve had students use Webflow. The websites look professional but generic. The time it takes to learn such a program is better spent learning how to code. It provides you with more flexibility in the end, to create something that stands out.

I haven’t used Adobe Dreamweaver, “what you see is what you get,” in a long time. You are better off using your time to learn to code by hand.

Plagiarism

You are free to use any and all artificial intelligence and other web and code services to create your work. You can beg, borrow, and steal, just let me in on it by including your sources on your landing page, and be able to defend it, if I ask questions. By that I mean that you understand what the code is and what it is doing. The one requirement, if you use outside help, that you document where your code comes from. I will consider it plagiarism if you don’t, which can result in a) failure of the assignment or b) failure of the course, with multiple instances leading to possible suspension or even being expelled from the school. This is from the The New School Academic Honesty And Integrity Policy, so don’t pass off as yours what someone else created.

Document everything that you have not directly created and let me know what services you have used, etc. There is a place in the landing page for you to do that. Most every service can be traced back in the structure of the code, but I prefer to know ahead of time where everything came from, rather than having to figure it out. That makes it easier for me to evaluate you on the basis of the code you write, and not the code you did not write.

Course Design

⁃

You only learn to code by doing it. My aim is to get everyone coding by the midterm, so you can practice coding on your own projects for the rest of the semester, with the strategy that you grow secure in your ability to code by the time you leave this course. I front-load the course. That means the first half of the course is demanding and requires you to keep up with the work. I ease up in the second half of the course, to give you the freedom to apply what you have learned on your own projects, or to catch up if they did not fully finish everything by the midterm. This format works for most students. Some students wish I would continue to provide guidance in the second half of the semester. I may figure out additional projects, but if I don’t, and if you are one of those students, ask me, and I’ll be happy to assign additional guidance, projects, and whatever it takes to keep you engaged. 

Seniors can choose to spend the entire course developing their portfolio or senior projects (instead of the final assignment, where everyone else has to sell something other than themselves.) I recommend you to sell something other than yourselves, as that allows for a more effective application of your creative talents. By completing the course successfully, you should be able to build a better portfolio website in short order. You’ll learn more when you’re not stuck on the same project for the entire 15 weeks, and portfolio websites are rarely complicated enough to warrant the extra time. But I understand the pressure to build out and perfect one’s portfolio site, so the option is there.

Communication Design Minors are held to department standards for coding by the end of the semester.

Easy access to artificial intelligence (AI) transforms this course, since it is possible to get the chat bots to write code for you. But to take advantage of that, you need to understand how to code, to integrate what it produces. While there are no restrictions of the use of chat bots to create code for you, you are to attribute where the code came from whenever you do not write the code yourself, be it from a website, or if a chatbot helped you write the code. This can be done using the comment element.

Why learn how to code websites by hand for the web? There are many website builders that allow a person without much prior knowledge to create a good-looking website without hand coding HTML or CSS. The tradeoff is that these web experiences use templates, making it more difficult to differentiate yourself from other web experiences. In today’s competitive world, to stand out in a captivating way is a plus. 

You should be able to follow me in class and glean most everything you need to learn how to code. If not, the course portal has your back.
 

This website is here to help you. Use this portal to help you catch up when you’ve missed a class or need a reminder later on. All the lectures are written out. If you have trouble with a topic as presented in class, read the topic on the website, and follow the links and examples. 

Make up the material of a missed class before the next class. Students entering the course after the first or second lectures need to read all the material as soon as possible and complete all assignments to catch up with the rest of the class. 

Much of the learning takes place as you write code. Learning to build websites is a cumulative effort: basic skills are necessary for building advanced skills. Watching me write code is not the same as writing code yourself. You start learning when you try to overcome the mistakes you have made. Don’t be intimidated. Start simple and you will become more adventurous as you gain confidence. Most of you will be wondering what all the fuss was all about by the time the midterm arrives. 

The scope of this course is coding HTML and CSS with a smidgin of PHP and JavaScript thrown in. A student needs a solid foundation in designing and developing HTML and CSS before they deploy JavaScript to develop behaviors. That makes it optional. Anyone can use existing JavaScript code, and if you already know the language, don’t let me stop you.

If you missed a class or do not completely understand a topic well enough to move on, go back to the supporting material. If you have difficulties understanding the material or completing your homework, email me or visit the Learning Center. I recently found out that the department has students available for you to ask questions at the Design Lab located on 10th Floor of 2 W 13th Street. Just go in and there should be people there to help you with your code. This may be better help than the university learning center.

In-Class Code Checking

Class Assignments require me to personally check your code in class for correctness. Many of you have laptop screens and display the code in small type, or reverse the color. While I want you to set your preferences that work best for you, these issues make it difficult for me to find that needle in a haystack, which is what it is like to discover errors in existing code. To facilitate my correcting your work, please increase the size of the code so I can easily see it, use black text on a white background, and move your laptop to the side, so I can sit directly behind it. The corrective glasses I wear operate optimally at a specific distance two or so feet from the screen.

I mention this because it is possible that I encroach on your personal space as I situate myself to read your code, and I would prefer not doing that. This is especially important if you are sensitive about your space. Some people are more sensitive than others. I work to be respectful of everyone, knowing that there are many personal and cultural differences at play. Please make sure I can view your code in a way that is both comfortable for me and for you.

Do not hesitate to ask or email me if you have questions.

I am always surprised by the number of students who do not ask me for help when they are having problems. You can always ask me. Email me, and if I can’t answer the question over email, we can schedule a zoom meeting to figure out what the story is. Remaining silent when I ask, if anyone has any questions, communicates to me that you understand what the story is, and that you have no questions. Speak up if that is not the case. If you do not like to speak up, email me.

Most answers can be found in this website, or on the web. Write full sentences in Google Search to ask your question, as in “how do I create a link in HTML.” Or just ask a chatbot. If you can’t figure out the problem on your own, ask me. There is so much information that it’s not always easy to connect it all with what you need at that moment. So you get stuck. Know that most of the mistakes happen in the first four weeks of the course. Use validator with some frequency to catch any issues as you code. Sometimes in CSS the mistake happens right before the css code that does not work. By the midterm, the mistakes will mostly disappear.

Do a through job on the first assignment and the worksheet. The writing you complete provides the repetition necessary to make marking up content second nature, and that makes coding web pages a lot easier. I’ve had students who skimped and the result was they did not internalize marking up the content, and without that foundation, their progress was slow, and coding remained difficult.

Book time at the Learning Center. How to make an appointment. and schedule an appointment.. They can help you understand and overcome the problems you are facing, help you code your final project, and keep you organized and working. Or check out the Design Lab located on 10th Floor of 2 W 13th Street. Just go in and there are people there help you with your code.

There are many resources on the web from which to learn how to code. Do make sure that the information is current or you will be learning ways that are no longer practiced. A comprehensive resource is Mozilla’s Mozilla developer network (MDN) which includes individualizedAI Help. Also look into Google’s Chrome Developer Relations web.dev. The important thing is that you practice writing code and to do it often. The only way to learn to write code is by writing code. Making mistakes is part of the process. The mistakes that stop you dead in your tracks disappear after a week or two of doing the work. Do not become discouraged when you get stuck. There are many ways to solve most problems. Take a step back and try again. Use validator to help you avoid mistakes. 

And what if you do not like my teaching style or this website?

There are people who cover the basics from the beginning. CSS Tricks is Chris Coyer’s website and a great resource for all things for building websites. His Where do you learn HTML & CSS is 2020 is a great place to start. But many people attempt to communicate the basics, like How to Build a Website with HTML to help you learn the basics. I googled that and there is so much more so finding alternatives to me is easy enough.

The real grade for the course

The grade that goes on your transcript is not as important as learning the basics of web design well. You could gain a career out of front-end web development, as previous students have. You are planning to enter the workforce, a good website can only help. Whatever you want to do with your life is at stake. Work as if that is the case, and your grades will be fine. Everyone is different. Not everyone needs to sell their creativity on the open marketplace. I will be grading you on your work, and will not be comparing you to others in the course. I look to see how much each person improved from the first assignments to the last. It is easy to see the effort in your projects, and effort counts.

Getting Help:

  1. Ask questions during the lectures and code demonstrations in-class.
  2. Read and watch videos on the website.
  3. Do the homework.
  4. Validate your work often. This will keep you from making mistakes.
  5. Email me whenever you have questions.
  6. Search the web for solutions. Type the solution you’re looking for in complete sentences.
  7. Visit the Design Lab located on 10th Floor of 2 W 13th Street. Just go in and there should be people there to help you with your code.
  8. ask a chat-bot for help, or to solve the problem for you.
  9. Visit the Learning Center. They will help you with your homework. Slots are limited, so sign up in advance.
  10. Watch Lynda.com video instruction. 
  11. Book is optional. It is ancient and I don’t refer to it in the course. HTML5 & CSS3 Visual QuickStart Guide (8th Edition). Some students like to read a book, and if you are one of those students, please use this or any other HTML/CSS book to do so. 

About this Website

 

I present each class systematically. Figuring out the topic, the information you need, the homework, and support files, is straightforward. Otherwise, you can use the search bar at the top of the window to find what you are looking for.

The fixed menu on the right-hand side covers every class, in addition to often used reference websites. Clicking on the link loads the class page. I structure each page in the same way, except this one, as it has welcome information. 

A shortcut to each class, the associated pages, and to the homework is available on the top menu.

Week 1
8/27

Introductions. Overview of course, course objectives, outcomes and expectations. Go over syllabus. Introduce hypertext markup language. Activity: Analyze Website. Activity: Create HTML file, start first assignment in class.

Homework

Write out expectations for the course. Use OpenAI to interrogate your future plans. Read Why Do All Websites Look the Same? Watch introductory videos. Analyze the elements of a website. Create a content sheet for the main page of a site that epitomizes the design field you are in. Write down the goals of the site. Use images. Mark up the assignment.. Due: Next Week. Email me if you have questions.

Next up are the goals and outcomes of this course. This is what you are to learn.

Much of the learning is scaffolded, meaning that what you learn is a necessary part of a larger skill set that you need to be familiar with. These learning outcomes need to be acquired before the next class meets, as it likely assumes this knowledge and builds upon it. If you miss a class, you are responsible for making up the class you missed by going over all of the information.

Goals

The goals of this unit are to:

  • Introduction to the World Wide Web.
  • Understand the content strategy that goes into creating websites.
  • Learn how to mark up content.
  • Set up a server at Parsons/New School using Fetch.
  • Start first assignment 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.
  • Understand the elements that make websites work.
  • Learn basics of HTML and CSS.
  • Mark up a simple page.
  • Set up server space at b.parsons.edu.
  • Publish a page on the web.

    If the class did not cover all of these topics, relax. They will be covered next week.

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

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.

Links without color are suggested readings, but not required.

The homework link takes you to the homework for the week.

Additional material for this unit can be found by following the following links:

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 the skills needed to build web pages, which are usually done through in-class activities. What is said and done in class overrides what is written here.

Step-by-Step

15 Welcome, write a few sentences about your expectations for the course as we go through the introductions, and go through the syllabus
5 Overview of the course and class portal.
25 Exploration of the web. Peek behind web page to look at the code.
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.
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. It is your responsibility to learn it. 

  • Code a little each day, not a lot once in a while. You’ll get over the frustration soon enough. Coding web pages is not so difficult once you get over the minor mistakes that everyone makes when they start. 
  • There are two major assignments: a midterm portfolio and a professional, standards compliant, website that sells a product for the final.

    • Validate!

           

    Why validate?

    The core reason to run your HTML documents through a conformance checker is simple: To catch unintended mistakes—mistakes you might have otherwise missed—so that you can fix them.

    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.

    Go beyond validation by measuring your page quality using web.dev’s web page audit. It will measure your performance, accessibility, best practices, and Search Optimization, give you hints on how to fix it, and teach you how to do it better as well.

    Do not be alarmed if there are 50 mistakes. That can happen if you haven’t been using the validator as you should. One mistake can flag a lot of other issues. Fixing one problem can make other problems disappear.

    Many of the units 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 websites.
    • The Rijks Museum opened the floodgates for the new single page jQuery web design experience. Others had come before but it pushed behaviors over the top. The user experience and content interaction are impeccable.
    • 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 redesigned 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. It’s redesigned the website several times since then. The Parsons Web Site.
    • Apple helped define design as the central tenet of computer usage and did so against the establishment for many years. Now it is the establishment. Its website is has remained similar for many years. It 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 such a big part of the web. It has 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 there is a back door. Facebook shares 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.
    • The Bulletin of Atomic Scientists: How a nuclear war would kill you — and almost everyone else.
      In a nuclear war, hundreds to thousands of detonations would occur within minutes, resulting in tens to hundreds of millions of people dead or injured in a few days. But a few years after, global climatic changes caused by the many nuclear explosions could be responsible for the death of more than half of the human population on Earth. Good use of multimedia and paralax effect to tell the story.
    • The Armed Conflict Location & Event Data Project exemplifies information design.

    There is nothing like examples to motivate your own work. Be motivated to do your best. You are the one who gains from learning these skills. I’ve had students, like Urara Ito, who entered the industry after taking the class.

    The last item on the first few pages contains definitions for 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 Hypertext Markup 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 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.

    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.

    01 Tools of the Trade

    Posted on by
    Reply

    All that is needed to code for the web is a text editor. Everything we do is coded by hand. For learning how to code, it is best to write the code itself with a simple Text Editor so that the repetition helps you to remember. Once you know what you are doing, you can use amore advanced editors. No authoring programs like Adobe Dreamweaver or Muse.

    It’s our preference to use a text editor, like HomeSite, TextPad or TextMate, to “hand code” everything, rather than to use a wysiwyg what you see is what you get HTML and CSS authoring program, like Dreamweaver. We just find it yields better and faster results.

    Khoi Vinh, Design Director at NYTimes.com from NY Times Article

    Text Editor

    The text editor, the browser and FTP program are all you need to build web sites. Do not use Microsoft Word or another word processor. There are many text editors. I prefer a simple HTML/CSS dedicated editor with live preview. Brackets is the most straightforward, simplest, and easiest editor with a built in preview. You can also use the Phoenix in browser editor (currently only works with the Chromium based browsers). Atom and BBEdit are other HTML centric editors.

    Other editors are for general programming, and target all kinds of programming languages. They are good but can be more confusing to use, like Microsoft’s Visual Studio and SublimeText.

    The Browser

    Any of the standards compliant browsers can be used. Chrome is most popular, Firefox is the best, and Safari plays nicest with the OSX operating system. Every other browser runs on the Chrome engine. In Safari, go into the Preferences -> Advanced tab and select Show Develop Menu in the menu bar to get the development goodies to show. All browsers allow you to inspect the code with the browser development tools. Right click, select Inspect, to zoom into the code that describes the document at the point where you click. If you have never done that before, please explore the code behind the websites you browse.

    HTTP

    Hypertext Transfer Protocol (HTTP) is a protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but can be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response.

    SFTP using Fetch or FileZilla

    Uploading your files to the server requires a Secure File Transport Protocol (SFTP). The application that does that for Mac users is Fetch. With it you can upload and download files onto your web space at school. Fetch was created at a university and is free to all students. You can get your free license here. Fill out the form, use the Parsons mailing address 66 5th Avenue, New York 10011, and they will send you a serial number to use with Fetch.

    FileZilla is a cross platform SFTP program for students using windows. Instructions for connecting and transferring files using Fetch and FileZilla are available near the bottom of the page. 

    Other SFTP programs available on both the Mac and Windows operating systems are CyberDuck, WinSCP, Fugu, and Transmit.

    Publishing Your Work using Fetch

    Everyone will publish their work on the web. We start by making sure that everyone can. The software most of you will use is Fetch. Don’t forget to register the product. It is free to all students.

    The server space is a lot like your desktop, only instead of folders, like on OSX, they are called directories. These servers are usually run by computers running Unix or Linux. These operating systems do not tolerate spaces. Lower case letters and capitalized letters (a and A) are not the same. Follow those rules to minimize problems uploading files to the web.

    You can drag and drop between the Finder window and Fetch. When you drag the same document into Fetch, the existing document will be overwritten without warning. This is default behavior. Always keep your latest version on your hard disk, where it can be backed up, rather than online, where you can accidentally over-write it.

    If you need more help, visit the Fetch help pages

    Setting Up Your Domain

    The domain is the name that you type in to get to the website. All websites are known by their number, but to make it easier for humans, they allow us to connect a domain name to that number. You can get you own, or by default, you will use the Parsons.edu domain.

    Everyone has server space at Parsons. The domain is hosted on the Parsons B Server. It looks like http://b.parsons.edu/~dejongo/. I have already created a page that has a link to the parsons folder I want you to set up. You can mask a domain name to that space. Alternatively, you purchase your own server space, you will need to register a domain name. Cost is approximately $15 a year for the domain name and renting server space ranges from $12 to $120 a year. Many hosting services include the cost of the domain name with the hosting plan.

    Setting Up Your Server Space at Parsons

    Art, Media, and Technology B.PARSONS.EDU user accounts are set up when I send a list of student names to the IT Department. They use the standard New School identification: last name with first initial and numbers that you are familiar with, prefaced by http://b.parsons.edu as your user account.

    You will be sent an email once the IT department has created your account. The email is from: root and the subject is something like: Important AMT B.PARSONS.EDU [user ID]. SAVE THIS E-MAIL!

    This email may have entered your spam folder, which can make it difficult to find. Please find the email and follow the instructions to set up your server space.

    The email will contain your B Server address, user, and password. You need to have your b.parsons.edu address and your B Server password to access your server space.

    If you have questions, or if it does not work, you should check to make sure address, name and password are typed in correctly. If it still does not work, enter a service request. Click on the link to Submit an IT Service Request at the top right of the page. Please have tickets assigned to Enterprise Systems group. Include your Last Name, First Name, Net ID, email and a request to ask about your server space on the b.parsons.edu server. You can also email the IT department to create a ticket.

    Getting your Own Host and Domain Name

    A lot of hosts give you a free domain if you subscribe. I personally use DreamHost, as they host non profit sites I work on for free. Their price is more expensive.

    One host I’ve run across is Ebound hosting, which has a great intro plan that costs only $1 a month. They also have an unlimited plan that gives you everything for under $5 a month including domain name for the year, multiple domains and all the usual goodies in spades. Their help response was quick and resolved all problems the one time I had to use them. Give them a try.

    Their cost, with a three year plan, is $4 a month, and that includes a lot of goodies, including a domain free for the first year. Search the web for a discount. There is a 25% discount using this code: EBH25 at the time I write this. I have no connection with Ebound hosting but in calling them to solve a problem, a real human answered on the second ring. That’s amazing these days.

    Finally, to get you started, you can host for free at biz.nf but their plans are more expensive over the long run than what you get with Ebound hosting. I’ve kept a number of domains for over 20 years, so the costs add up.

    Purchasing a Domain Name

    Registrars like name.com or Moniker, both of which I’ve used. there are a lot of accredited registrars

    You cannot point a domain to your New School or Parsons server space but you will be able to mask your domain to these accounts. That means a frame is created with your domain name above the address bar but it actually shows the school website, which appears in that frame.

    Connecting and Uploading Files to your Server Space

    To access your files using Fetch, fill out the Hostname with “b.parsons.edu” then fill out Username with your Newschool ID, set your connection to SFTP. Fill in your password. It can be found on the email from root. Set the port to “222” and your initial folder to “public_html”. You should be able to log on.

    how to fill out Fetch

    On Windows using FileZilla or on Macs that have trouble connecting to the server using Fetch from school or home, enter sftp://b.parsons.edu for Host, your username with your New School ID, the password as found on the email from root, and port: 222. That should work. In the left hand pane locate directories on your hard disk which contain the files to be transferred, and transfer them to the right pane representing your server space.

    how to fill out Filezilla

    You will be asked to confirm overwriting the file, which is the standard option. Check “Always us this action” and “Only apply to uploads”.

    how to fill out Filezilla

    The server is laid out much like your hard disk. You will drag files from the finder into Fetch, as if it were a local window. The main difference is that Fetch will not warn you when you are overwriting your files. This is a good thing, as you will be dragging your files from your desktop to the server and overwritten the old files with new files the whole semester long.

    The second difference is that upper and lower case letters are completely different, and have nothing to do with one another. On your hard disk, it makes no difference. On the server, your links will not work. My suggestion is to name all files using lower case. Do not use spaces in file names!

    On the parsons B Server, you need to place all your files in the public_html folder. Different hosts can designate different names for this folder.

    Setting up your Server Space

    I expect you to use your root — public — directory for your own purposes. The class works out of a folder called “parsons” with a lower case p. Case matters! Create a new folder and call it parsons lowercase p in the root directory. That is where you will develop all of your work for this class. As there is a midterm with associated assignments and a final, create two folders a portfolio and a final folder.

    Web Site Organization

    web site organization

    Index.html and Worksheet.

    You will create an index.html page inside of the parsons folder done in-class during the second week that will contain the links to each of your assignments, a photograph of yourself, along with your name and your major and minor, if you have one, so I can associate your work with you as a person.

    Your first assignment example counts as research for your portfolio. It could go in the portfolio folder or stand alone. A work-file inside of the portfolio example and final assignment folders example will serve as your worksheet. This is where you document your creative development in at least seven steps. Update these work-files with all of the work you do to get to your final. This includes old ideas even when you change your mind and start working anew. That way I can assign credit where credit is due.

    The landing page for each student needs to work exactly the same. This is how I make contact with your work. I will be going to this page to check up on your progress, so keep it current. Your grade depends upon it. Homework needs to be up the day before class — so I have some time to check it before teaching, for issues that can then be addressed in class.

    01 HTML5 Template

    Posted on by
    Reply

    Select all the text and paste into blank text editor document. Template 1 contains most used HTML5 elements. Template 2 does not. Text is at 25% so it can be easily copied. Make sure you copy all of the text.

    Template 1

    <!DOCTYPE html>
<html lang="en"> 
    <head>
<meta charset="utf-8">
<title>title</title>
<!-- Sets viewport to the device screen size -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Link an external style sheet-->
<link href="css/styles.css" rel="stylesheet">
<style> 
	main { max-width: 1500px; }
	section { max-width: 1000px; margin: 10px auto; padding: 0 20px; }
	img {width: 100%}
	figure {width: 25%; margin: auto;}
/* Overrides desktop style when viewport is less than 600px (for smart phones) */
@media only screen and (max-width: 600px) {
    
}
</style>
</head>
    <!-- body -->
<body>
<main>
<section>
	<header>
		<h1>Heading 1</h1>
		<nav>		
			<ul>
				<li>
					<a href="#">
						navigation as unordered list item
					</a>
			</ul>		
		</nav>	
	</header>	
	<article>
		<h2>Heading 2</h2>
		<p>The <strong>template</strong> contains <em>most used</em> HTML5 elements. Replace this text with the content written for the first assignment. Notice that there is no closing tag for this paragraph or for the list item in the navigation above.
		<figure>
			<img src="http://b.parsons.edu/~dejongo/12-fall/stuff/01-blocks.gif" alt="blocks" >
			<figcaption>Blocks. The figure tag make adding a caption below the picture possible. The picture tag makes multiple pictures possible, and places the img, an inline element, in a block element. </figcaption>
		</figure>
	</article>	
	<footer>
		<hr>
		<p>Resources
		<ul>
			<li> HTML <a href="http://b.parsons.edu/~dejongo/01-writing-html5/#inline_elements"  >inline</a> and <a href="http://b.parsons.edu/~dejongo/01-writing-html5/#block_elements"  >block</a> elements. 
			<li> Writing <a href="http://b.parsons.edu/~dejongo/03-the-mechanics-of-css/" >CSS</a>, <a href="http://b.parsons.edu/~dejongo/03-applying-css/"  >examples</a>, <a href="http://b.parsons.edu/~dejongo/04-the-layout-modes/" >layout</a> and <a href="http://b.parsons.edu/~dejongo/05-styling-the-navigation/" > styling the navigation</a> 
			<li><a href="https://validator.w3.org" >Validate your page</a>
			<li><a href="https://web.dev/measure/" >Page quality audit</a>
		</ul>
	</footer>
</section>
</main>
</body>	

    </html>

    Template 2

    <!DOCTYPE html>
<html lang="en"> 
    <head>
<meta charset="utf-8">
<title>title</title>
<!-- Sets viewport to the device screen size -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Link an external style sheet-->
<link href="css/styles.css" rel="stylesheet">
<style> 
/* Overrides desktop style when viewport is less than 600px (for smart phones) */
@media only screen and (max-width: 600px) {
    
}
</style>
</head>
    <body>
</body>	

    </html>

    01 Writing HTML5

    Posted on by
    Reply

    HTML stands for Hyper Text Markup Language. If you wish to see the entire specification in a one page version (large document), visit the living standard

    Content is “marked up” using tags to designate the structural significance of that content. Each piece of content so marked up constitute an HTML element, of which there are many.

    A first level header is designated by opening and closing tags: <h1> 01 Writing HTML5 </h1>. All parts of the document are marked up with such tags to create HTML elements, even parts that you cannot see but still describe the document, such as the meta tags found in the header, or the <style> and <script> tags that contain CSS and Javascript.

    To create an HTML page, open a text processor. Creating a new file and call it index.html when saving. The file needs to be called index.html with a lower “i”. It is the index of the directory in which it is located. It will be the file that is opened upon entering that directory.

    Every directory should have an index.html file, as some web servers allow visitors to see the content of the directory when there is no index.html file present. Other files in the directory can be reached by placing links connecting that page on the index.html page.

    The following elements make up the HTML page:

     

    The Structure of an HTML Document

     

    The Doctype

    The doctype has been greatly simplified in HTML5. The DOCTYPE tells the browser the version of the HTML rules the document will follow. Using the following DOCTYPE tells the browser you will be using HTML5. This is the only DOCTYPE I expect to see.

    <!DOCTYPE html>

    The HTML Element

    The HTML elements contains all other elements. It is the root element, and the language attribute is specified as English.

    <html lang="en">

    The Head Element

    The head element contains information about the content but not the content itself. This is known as the document;s metadata. The head element does not get displayed in the browser window.

    The Character encoding declaration specifies the encoding used to store or transmit the document. The Meta tag charset=”utf-8” tells the browser to use the unicode universal character set transformation format—8-bit.

    The title shows up as the title of the browser window.

    <head>
	<meta charset="utf-8">
	<title>Name</title>
</head>

    The header element closes before the body element opens.

    The Body Element

    Markup written in the body element shows up in the viewport, or browser window. Think of this element as encompassing everything that appears in the browser window.

    Everything you write comes between the opening and closing body tag. In the following, only “Hello World!” will show. Comments are not rendered by the browser.

    <body>
<!-- Comment your Work! -->
<p>Hello World!</p>
</body>

    The body element closes before the html element closes.

    The Closing HTML element

    Closing the HTML element is the last tag on the page. It closes the tag that holds all of the other elements in the document.

    </html>



     

    Element or a Tags?

     

    An element is a single “chunk” of code comprising of a start and ending tag. They are representations of a thing for the browser, an object. Elements have all kinds of properties for the browser, like firstChild, etc.

    <div>This is a div element</div>

    Tags is the opening and closing code of the elements. <div> is a tag. <div>content</div> is an element.

    “Elements are not tags. Some people refer to elements as tags (e.g., “the P tag”). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.” From W3 HTML specification

     

    The Inherent Structure of HTML

     

    HTML is concerned with the structure of the content, and not with how the content should be displayed.

    The natural flow of content is inline, meaning that content flows horizontally, like the letters on a line of text. In English, that is from left to right but it could be in any direction.

    In addition to the horizontal inline flow of content, elements can be determined to be block like and flow vertically. Block elements do not flow like characters but like paragraphs, as entire blocks of text. By default, their width expands to fill the parent element and the flow is vertical. They flow down the page, starting from the upper left hand corner.

    In HTML, block elements cannot descend from (be a child of) inline elements. Inline elements are the content of a block element.

    CSS can change the display property of an element. It can make inline elements display as block elements, and block elements display as inline elements. That is very useful, usually to make inline elements act like block elements.

    Valid HTML requires that block level elements do not descend from inline elements. Changing the elements displays with CSS does not change the validity requirements of the HTML document.

    Tag Attributes and Values

     

    Tag Attributes

    HTML tags can take attributes, which describe certain aspects of the elements, with different elements having various assigned attributes. There needs to be a space between each attribute. Attributes for the img tag, for example, are src, width, height, class, and alt.

    Example: <img src="file_name" alt="logo">

    Example: <a href="file_name">File Name</a>

    Values

    Every attribute has a value, even if it is an empty value. For example, the value of the src (source of the image) is the location and name of the image. While it is no longer a requirement to put either double or single quotes, as long as there are no spaces or other non-alphanumeric characters, it still best practice to do so.

    Example: <img src="file_name" alt="logo">

    Example: <a href="file_name">File Name</a>

    Role Attributes

    The role attribute describes the role(s) the current element plays in the context of the document. In the official language of the W3 “The XHTML Role Attribute allows the author to annotate XML Languages with machine-extractable semantic information about the purpose of an element. Use cases include accessibility, device adaptation, server-side processing, and complex data description.”
    Example: <nav roll="navigation">

    Understanding the Tag Hierarchy

     

    DOCKTYPE

    html

    head

    meta
    title
    style

    body

    main

    header

    nav

    ul

    li
    li
    li
    li

    section

    article

    h2
    p

    p

    img

    figure

    img
    figcaption
    p
    footer

    HTML is a collection of elements arranged in a kind of containment hierarchy. This is a parent – child relationship, where the enclosing tag is the parent of the enclosed tag, which is its child. The entire structure can be likened to a tree, with the <html> tag as the single trunk from which the rest of the branches arise, first splitting into the two main branches, the <head> and the <body>. inside the body tag are all of the other branches that make up the document.

    After the <doctype>, the HTML document starts with the <html> element that contains all other elements. It contains only two tags, the <head> and the <body> tags.

    The <head> tag contains information about the page (meta-information) but that is not visible, like the <title> tag, <meta>tags and <html>, <style> and <script> tags and links <link>to styles and scripts.

    The <body> tag contains all of the content, everything that’s visible in the browser window. The tags are usually several levels deep. Nesting tags is very useful, for it groups elements together. This makes it easy to create the different parts of the layout.

    In the figure on the right, the <wrapper> contains all of the other visible content. This element is usually given automatic margins that center it horizontally in its parent tag, the <body>. If the <wrapper> is moved to the right, all the child elements contained within it are moved to the right as well.

    Because each element is a child of another element, there are only clearly determined paths. For example, the <img> is a child of <p>, which is a child of <article>, which is a child of <section>, which is a child of <wrapper>. The complete path of the <img> tag is html body wrapper section article p img. This path would select all images in the paragraphs contained in article, section, wrapper, body, html. Since there are no other images, only the image with the red background is targeted by this path. The <img> in the figure has a different path, for example.

    How to Write the Code

     

    A tab is used to show how many levels the code is nested from the <html> element. This results in a visual way to check if the code is nesting properly. The code should look like :

    <html>
	<head>
		<title>title </title>
	</head>
	<body>
		<main>
			<section>
				<header>
					<h1>Headline for Page</h1>
				</header>
				<article>
					<p>content
				</article>
				<footer>
				</footer>
			</section>
		</main>
	</body>
</html>

    To make it easy on you, there are tools that let you clean up your hierarchies automatically. You’ll want to remember this link right before you hand in your midterm and at the end of the semester, when you hand in your final.

    The DOM

     

    how your browser renders websites
    how your browser renders websitessource

    The HTML file with all of its codes and content gets parsed by the browser. The syntax of each tag will be analyzed to see how it fits together according to the HTML rules. This results in a document object model where each node represents a branch on the tree.

    General Rules To Follow

     

    HTML5 has loosened up the rules somewhat but it is still desirable to follow these rules for well formed HTML documents.

    Close Every Tag
    Most Tags contain content, meaning that there is an open tag and a closing tag to signify where the content starts and where it ends. Some tags do not need to close, like <img>because there is no content. These tags are pointer to content, and get replaced by that content. Other tags are self closing, like the <meta /> and <br /> tags. List of self-closing tags: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, and wbr.

    Accidentally not closing a tag can cause all kinds of havoc and will be flagged when validating. It is a common occurrence in the first few weeks of writing code.

    Correctly Nest Every Tag
    If a tag opens before a preceding one closes, it must be closed before that preceding one closes. <header><h1>Title</h1></header> not <header><h1>Title</header></h1> CSS relies on proper nesting to target styles to elements, so you have to get this right. In this example, the </h1> tag is nested in the </header> tag, and is the child of the header, which is the parent tag. As a container, a tag acts like a group, and moving a parent also moves all of the enclosed children. Likewise, absolute positioning is based on the coordinates of the parent element.

    If you visualize each element as a node on a tree, it is obvious that you cannot open a tag before the previous tag is closed. If you make a mistake, the browsers can sometimes repair the damage, and everything still displays correctly but don’t count on it, and different browsers have different levels of damage control.

    Inline Tags Cannot Contain Block Level Tags.
    Block-level elements follow one another according to the document flow, one below the other. Inline elements follow one another as characters in a paragraph. While it would seem obvious to not mix these two up, the validator will catch you if you do.
    Keep Tags Lower Case
    This is a requirement of XHTML5, which we will not concern ourselves with but its a good idea anyway.

     

    Tags Used to “Mark Up” the Content

     

    Learning HTML comes through writing HTML. The more you code, the easier it becomes till it’s second nature. The content is divided into inline and block tags.

    • Block elements display like paragraphs, coming one after the other vertically down the page in the document flow.
    • Inline elements display just like characters, coming one after the other horizontally till the end of the line. The line then breaks and resumes at the beginning the next line down, and so on.
    • CSS allows you to override the object’s default display and make inline elements display like block elements or vice versa. You’ll learn about that later.

    There are many HTML elements. Mozilla organizes them according to function. That’s helpful. Don’t memorize them. You will remember the ones you use most often and you can always look up the other ones up. Here are all the elements you’ll most likely use:

    Inline Elements

     

    These elements display just like characters, coming one after the other horizontally, till it comes to the end of the line.

    span

    The span tag selects inline content.

    So much information.

    So much <span style="color: red;">information</span>.

    strong

    increases importance

    So much information.

    So much <strong>information</strong>

    emphasis

    for emphasis

    So much information.

    So much <em>information</em>

    line break

    Breaks the line without creating a new paragraph.

    So much
    information.

    So much <br />information.

    Inline Quotations

    Quotations inside of a paragraph can get automatic quotes when you use this tag and the following CSS pseudo elements. (q:before {content: ““”; } q:after {content: “””; }).

    So much information.

    So much <q>information</q>.


    Anchor Tag (Links)

    The anchor element anchors a URL (uniform resource locator, or a unique web address) that targets the destination id or web page by using the href (hypertext reference) attribute.

    Any tag can be a target, within any document on the world wide web. To target a tag, it has to contain an id <h3 id="anchor">.

    To target the id, you need to use the id identifier, the hash tag # and the id name itself. <a href="#anchor">.

    Hyperlink to destination on the same page

    Click the example below and you’ll see the page jump just a little.

    Hyperlinks to other pages

    A hyperlink can address any unique webpage on the world wide web. It can use an absolute address, or a relative address, if the page is on the same server.

    Absolute Hyperlink Address

    An absolute address starts with http://, as in the address of the page that you are on (look up at the address bar)<a href="http://b.parsons.edu/~dejongo/01-writing-html5/">Writing HTML5</a>.

    Relative Hyperlink Address

    If the page is on the same server, it is possible to omit the absolute reference, and specify the path to the document from the location of the document containing the link.

    Links to a location on the same page are always relative to the page itself.

    Targeting tags on other pages

    Links to a location an another page come at the end of a absolute or relative address.

    and

    Image Tag

    The image tag gets replaced by the image. The img tag does not have a closing tag.

    If the image is not at the location specified by the src attribute you will see a generic missing image icon.

    There has to be an alt attribute so that text will appear if the image does not show up. The img tag will be flagged by the validator if it does not have an alt tag. The information is used by screen readers to explain what the image is about to blind people who listen to web pages. It is also a good idea for illustrators, designers, photographers and other people relying on images to load up the description of each image so search engines can include that in people’s searches.

    The title attribute is optional. The title shows up when you hover over the image for a second or more.
    description of image for screen readers or when images are turned off

    <img src="image_location/name_of_image" alt=“required description of 
image for screen readers or when images are turned off" title="Final Thumbnail" >

    Comments

    Comments are a way to add notes or hide code. Comments are not displayed by the browser. Use them to notate your document with a description of what’s going on in each part of the document.

    Comments will help remind you why you did something a certain way (or help someone else figure out how to read your code).

    You can also use comments to temporarily hide code that you do not want to use but do not yet want to delete.

    Do not use two dashes in a row — within the comment, as that causes confusion in some browsers.

    <!--
Comment your Work! 
-->


    Block-level Elements

     

    Block elements display like paragraphs, coming one after the other vertically down the page in the document flow.

    div

    div stands for division. It is the generic block element, used when an element is needed for styling purposes, or as a convenience for scripting. The <div> element represents nothing, has no semantic meaning. Do not use in place of elements that have semantic meaning. It is not equivalent to the HTML5 section element.

    content
    <div style="background: pink; padding: 10px;">content</div>

    Headlines

    How a headline looks depends on how they are styled. You should use headlines to structure your content, not based on how they look.

    Headline h1

    Headline h2

    Headline h3

    Headline h4

    Headline h5
    Headline h6
    <h1>Headline h1</h1>
<h2>Headline h2</h2>
<h3>Headline h3</h3>
<h4>Headline h4</h4>
<h5>Headline h5</h5>
<h6>Headline h6</h6>

    paragraph

    paragraph bla bla bla bla.

    paragraph bla bla bla bla.

    <p>paragraph  bla bla bla bla.</p>
<p>paragraph  bla bla bla bla.</p>

    Block Quote

    Used to style quote that takes up an entire paragraph. It is indented and given a different style.

    paragraph bla bla bla bla.

    So much information.

    <p>paragraph  bla bla bla bla.</p>
<blockquote>So much information.</blockquote>

    Thematic Break (Horizontal Rule)

    Although previous versions of HTML defined the hr element only in presentational terms, as in horizontal rule, the element has now been given the specific semantic purpose of representing a “paragraph-level thematic break” which is to be styled using CSS. For legacy reasons, browsers still render the <hr> as a horizontal rule.

    <hr>

    CSS:

    hr {
	display: block;
	margin-before: 0.5em;
	margin-after: 0.5em;
	margin-start: auto;
	margin-end: auto;
	border-style: inset;
	border-width: 1px; 
}

    ordered list

    Ordered lists are numbered sequentially.

    Ordered List

    1. list item
    2. list item
    3. list item
    4. list item
    5. list item
    <h3>Ordered List</h3>
<ol> 
<li> list item </li> 
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
</ol>

    Continuation of the Ordered List

    If you plan on breaking the list into several lists but want them to be numbered sequentially, use the start attribute start="5". This would start the list at 5 instead of 1.

    1. list item
    2. list item
    3. list item
    4. list item
    5. list item
    <ol start="6"> 
<li> list item </li> 
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
</ol>

    Unordered List

    Unordered lists is for a collection of unordered items, where the order would not change the meaning of the list. It is always used for navigation, with each menu item considered as part of the list. The unordered list is styled to remove the list style.

    • list item
    • list item
    • list item
    • list item
    • list item
    <ul> 
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
</ul>

    Definition Lists

    Definition lists is for a list of terms and corresponding definitions. The term to be defined is listed first with the definition coming after the term. A term can have multiple definitions, and a definition can have multiple terms. A definition header can precede the definition.

    List Header

    Term 1
    This is the definition of the first term.
    Term 2
    This is the definition of the second term.
    <dl>
<lh>List Header</LH>
<dt>Term 1</dt>
<dd>This is the definition of the first term.</dd>
<dt>Term 2</dt>
<dd>This is the definition of the second term.</dd>
</dl>
    term
    definition1
    definition2
     
<dl>
  <dt>term</dt>
  <dd>definition1</dd>
  <dd>definition2</dd>
</dl>
    term1
    term2
    definition
     
<dl>
  <dt>term1</dt>
  <dt>term2</dt>
  <dd>definition</dd>
</dl>

    Interactive Elements: details

    The details disclosure element does exactly what you think it does. It toggles information that is initially hidden, disclosing it. It takes two tags, the <disclose> tag and the <summary> tag. The summary tag has a triangle in front of it that when clicked discloses the hidden information.

    Details

    Something small enough to escape casual notice.

    <details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

    table

    The HTML table layout mode allows authors to arrange data — text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.

    Simple Table

    table cell item table cell item
    table cell item table cell item 
    <table> 
<tr> 	<td> table cell item </td>
<td> table cell item </td> 
</tr> 
<tr> 	<td> table cell item </td>
<td> table cell item </td> 
</tr> 
</table>

    Fully Loaded table

    A table can have a head, multiple table bodies and a table footer. You can span both rows and columns with the rowspan="2" or colspan="2" attribute. This allows for the header to expand down and the footer to expand across in the following example.

    The Caption Holds the Title of the Table
    Head 1 Head 2a Head 3
    Head 2b
    table cell item table cell item table cell item
    table cell item table cell item table cell item
    table cell item table cell item table cell item
    table cell item table cell item table cell item
    The footer is a place for information about the table. 
    <table id="table">
<caption>The Caption Holds the Title of the Table</caption>
<col><col><col>
<thead> 
<tr><th rowspan="2">Head 1</th><th>Head 2a</th><th rowspan="2">Head 3</th></tr>
<tr><th>Head 2b</th></tr>
</thead>
<tbody>
<tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
<tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
</tbody>
<tbody>
<tr> <td> table cell item </td>  <td> table cell item </td>  <td> table cell item </td></tr>
<tr> <td> table cell item </td> <td> table cell item </td> <td> table cell item </td></tr>
</tbody>
<tfoot>
<tr><td colspan="3">The footer is a place for information about the table.</td></tr>
</tfoot>
</table>

     

    Iframe

     

    An inline frame places another HTML document in a frame. The inline frame can be the “target” frame for links defined by other elements, and it can be selected by the user agent as the focus for printing, viewing its source, and so on.

    The iframe is exhibited with attributes that are determined using the equivalent CSS in the demo width: 98%; height: 300px; border: 1px solid #f000; overflow: scroll;.

    <iframe src="01-html-css-primer/">height=300 width=200 frameborder=1 scrolling=yes >You need a Frames Capable browser to view this content.</iframe>

    Writing HTML, Absolute and Relative Addresses, Tools of the Trade

    Target iframe from Link

    You can target any page to appear in the iframe by naming it and using the target attribute with the name target="iframeDemo" as demonstrated above. Click on the links above to load different documents.

    A destination anchor is used to position the Writing HTML document at the iframe section. That requires an anchor with the same name <a id="i-frame">. See the link tag above.

    <a href="01-writing-html5/#i-frame" target="iframeDemo" >Writing HTML</a>
<a href="01-absolute-and-relative-addresses/" target="iframeDemo" >Absolute and Relative Addresses</a>
<a href="01-tools-of-the-trade/" target="iframeDemo" >Tools of the Trade</a>

     

    HTML5 tags

     

    Before HTML5, the generic markup elements, <div> and <span>, were used to mark up the page. That means the code itself had no way of determining what the content was.

    HTML5 changed that.

    HTML5 standardized a lot of best practices to create semantically relevant block level tags that help organize the document. It is now possible to tell header content from the content of an article by looking at the tags alone. The most important of the new elements are: <main>,<section>, <header>, <nav>, <article>, <aside>, <footer>, <figure>, <figcaption>, <hgroup>, <wbr>.

    Document Layout

    <main>
<section>

    	<header>

    		<hgroup>
			<h1>Name</h1>
			<h2>Name</h2>
		</hgroup>

    	</header>

    	<article>
		<p>content <wbr> content</p>

    the <wbr> tag, or Word Break Opportunity tag, is an inline tag that specifies where in a text it would be ok to add a line-break.

    		<aside>
			<p>content</p>
		</aside>

    	</article>

    	<footer>
	</footer>

    </section>
</main>

    Adding Navigational Links

    Using an unordered list.

    <nav>
	<ul>
		<li><a href="#">link to homework</a></li>
		<li><a href="#">link to homework</a></li>
		<li><a href="#">link to homework</a></li>
	</ul>
</nav>

    Adding a Picture

    With a caption.

    <figure>
	<img src="example.jpg" alt="example" >
	<figcaption> Caption </figcaption>
</figure>

    Copy and paste this basic HTML5 template into a blank Textwrangler file. It has most of these elements and a basic header, so you can start coding the content right away. Repetition will acclimate you to writing HTML.

     

    01 History of the Web

    Posted on by
    Reply

    The Prophet of the Computer Age.

    In 1945 Vannevar Bush published an article, As We May Think that helped set the stage for the pioneers who actually developed hypertext, twenty or so years later. By then, the future of the internet could more or less be predicted.

    Apple comes out with the Macintosh computer in 1984. A few years later in the mid 1980’s it releases HyperCard for free to all Macintosh users, a condition specified by its creator, Bill Atkinson. Hypercard instantly provided a simulation of what the web would be in easily editable hyper-text stacks. It was a successful hypermedia forerunner to the WWW. It came with a programing language called HyperTalk that is the inspiration for javascript.

    Apple’s HyperCard was used to implement an AppleTalk networked based hypertext information database system in the office of CERN where Tim Berners-Lee developed the WorldWideWeb, the very first browser to edit and see what would become the world wide web. Here is the first web site.

    Tim Berners-Lee created the browser on a Next computer, using its innovative software to both render and edit web pages. It was later renamed Nexus, to differentiate it from the World Wide Web, and was released as open source in August 1991.

    The World Wide Web

    The very first popular browser was also inspired by HyperCard. ViolaWWW was developed that same year, and was an attempt to recreate HyperCard in X Terminals. ViolaWWW was adopted as the basis for the Web’s development till Mosaic was released, which was the first widely adopted web browser.

    Netscape Navigator was created by the same people who created Mosaic, and was released just as the internet was coming out of the universities and into the public realm. Its popularity exploded and by 1994, industry pundits talked about the birth of a new ubiquitous computer experience that would be computer platform agnostic.

    I still remember the heady claims in 1995, that this new medium would undercut Microsoft’s monopoly and that everything would be moved onto the web. Remember, all we had back then were slow and finicky modems that the changed the data-stream into sound, so any communication was very slow.

    This challenged Microsoft’s bid for world domination, and it quickly licensed code from Mosaic to build Internet Explorer, bent on making sure that this new paradigm would never happen, or if it did, that it would be on their terms. This resulted in the historic fight for control of the web: Netscape Navigator vs Internet Explorer.

    Web Standards

    At the time, the visual presentation of the content was delivered by the HTML tags themselves, generally using frames and tables. Pictures took a long time to download, so they were carefully optimized and used sparingly.

    CSS1 was introduced in 1996 to separate the presentation from the markup, and was further refined by the release of CSS2 in 1998. The browser manufacturers were slow to integrate these standards, as they were too busy adding proprietary features to ensnare users.

    Microsoft’s forceful ways worked. It trounced Netscape Navigator’s domination of the web browser market. Internet Explorer reached 93% market penetration by 2003.

    It did this by leveraging its 95% of installed computer operating system base to lock users in. Microsoft gave Internet Explorer proprietary access to the rest of the operating system.

    Some think that it almost committed suicide by tying the browser into the Windows Operating System. Microsoft made the entire operating system vulnerable to all kinds of hacks.

    Having lost the battle, Netscape Navigator gives up. With the race won and no competition, Microsoft stops development of Internet Explorer with version 6.5, having achieved a monopoly, but the victory would not last. Standards compliant browsers slowly began to make inroads into Microsoft’s world domination.

    CSS 2.1, released in 2002, further refined this standard. It was fully embraced by the new browsers on the market.

    Apple released Safari in 2003 and Firefox was born out of the ashes of what was left of Netscape Navigator in 2004, and Opera was there as well. This adoption is the beginning of standards based web design so prevalent today.

    You can read the story as a comic strip presented below:

    The New World

    The plan was to sock it to Microsoft by creating stable web applications that could challenge both Microsoft Office and the Windows operating system. With web applications, the new paradigm would make the operating system underneath agnostic, not just for web pages, but for all computer usage.

    That was the design goal of HTML5. Google developed Chrome, a browser where each window runs independent from other windows, bringing operating system like stability to the browser for the first time.

    The next evolution is a change from computer based browsers to all kinds of handheld devices. Apple’s iPhone, iPad and Google’s Android operating systems are essentially internet devices that replace the desktop computer. To this end, both Apple and Google contributed much to the new HTML5 and CSS3 standards.

    This is what Microsoft was afraid of, for its office suite and windows operating system generated most of its money. Though still a lumbering giant, Microsoft is no longer the monopoly it once was, and it decided to get on board.

    Everyone wondered what was up when it released a public beta of a mostly standards compliant IE 9. It has since shown that is committed to open standards by releasing the IE10 beta right on the heels of IE 9.

    It has joined in, helping to create new standards. That’s a solid affirmation that the future belongs to open, standards compliant computing.

    It’s entirely feasible that HTML5 & CSS driven devices will be the future, and that it’s only a matter of time. Jeffrey Zeldman, a pioneers standards based web design, envisions that all interfaces will use such open standards.

    A Glimpse of the Old World

    The following two videos and the Zen Gardens web site are a snapshot of what the web was like in 2003. Molly E. Holzschlag demonstrates what the web looked like before CSSand after. This new world was brought into focus by the CSS Zen Gardens web site, which demonstrated the power of CSS with the separation of content from form.

    The Existing Standards

    While development of Internet Explorer stood still, a new crop of browsers aimed toward compliance of the HTML4, XHTML and CSS 2.1 standards, as set forward by the W3 organization, which brings us up to today.

    The New Standards

    Very exciting changes are here with the next generation, HTML5 and CSS3. This is, in part, because more and more interface elements are being created with HTML5 and CSS3, like the iTunes store interface, iOS apps, Android and others, so it’s possible that in the future, most interfaces will be using this most universal of languages, which places the scope of you learning HTML5 and CSS3 well beyond the browser.

    HTML5 and CSS3 examples.

    01 Homework

    Posted on by
    Reply

    What do you hope to achieve this semester?

    Write a sentence or two expressing what you hope to achieve this semester. Include something about the teaching style that aligns best with how you learn. Are you a self learner or do you prefer everything to be structured? You will post this on the landing page you will create next week in class.

    What do you Hope to Achieve Professionally?
    Discuss this with A.I.

    Explore and strategize your future, or at least, how you plan to prepare for it by the time you do your graduation exhibition. Use OpenAI: chat or any of the many other AI large language model chats. Follow the Open AI v.3 example. Place it at the bottom of the landing page.

    Your Presence on the Web

    The web is a medium, like print or video. The web as medium is fluid like water running down the creek or sand held in by the walls of an hourglass. Communication and design is responsive to the many devices that may exhibit the work (from a tiny watch to the largest screen) and many circumstances as the mobile experience can happen anywhere. Print and video are passive in comparison. Web design can reach out and grab its audience through behaviors that elicit responses tailored for interactive engagement. This makes web design immediate, dependent upon satisfaction and gratification or the user will click away. A lot goes into web design.

    Assignment #1: Pick a Website to Inspire Your Portfolio, and analyze it

    You are to make a website. To make it stand out, pick a website that you find compelling, and analyze it. Please read Why do most websites all look the same? This is an opportunity for you to stand out. Differentiate your work. Your career depends on it.

    The midterm assignment is to sell yourself. This homework is part of the research you will do for the second of seven steps of next week’s assignment, Designing for the WebChoose a professional website that represents your aspirations. For example, if you’re a photo major, pick a photographer’s website. It should be a website that represents the future you want to build for yourself.

    Once you have found website(s) that represent your aspirations, analyze it. This is the starting point for thinking about your own portfolio.

    Articulate who the primary target audience is. The content strategy? How should the navigation work? The visual design? Answering these kinds of questions makes you aware of the elements that go into building your own portfolio. Writing them down provides you with content to mark up.

    Ideally, you become more focused on delivering your work to your target audience. That will help you focus your work in ways that can only benefit you as you leave Parsons for the real world. In the mean time, you can prepare for that day by learning to build good websites.

    Creating a Website Style Guide

    Check out the example by Jaeeun Jessica Jeong.

    1. Intent: What is the intent of the website? Use the intent to inform all of the other qualities. This should be a short and concise statement, as in to sell skills.
    2. Voice: What is the voice of the website? Is the site’s voice impassioned, assured, energetic, or conversational? Pick a number of descriptive adjectives that capture the experience that whoever had the site built attempted to convey the intent.
    3. Tone: Whereas voice is consistent for the site as a whole, the tone is a contextual refinement that helps convey the content. An about page may have a different quality about it than the home page or a page in the shopping cart.
    4. Brand: How does the website establish its brand? Is it consistent? Is it upscale, casual, youthful, objective?
    5. Persona: Think of the many different users this website is addressing. If we were to write down the characteristics of any of these users and the label them, we would create a persona. Personas are composite sketches that reflect real-world behaviors, attributes, and attitudes of end users.

      You can start with yourself, as you are one of the audiences targeted by the website. Take, for example, Naoto Fukasawa‘s website, a Japanese industrial designer. The audience can be personas representing museums, corporate clients, architects that may use his products in their work, end users, students doing assignments for a web basics class, and the list goes on.

    6. Create 3 Personas: Personas are composite sketches that reflect real-world behaviors, attributes, and attitudes. Create a character sketch for at least three personas.

      Go into the details why they would be attracted to the site, how the site informs them, and what can they do with this information. Would each of these people come back and be a repeat customer? Show how the site addresses these concerns.

      Tell a story, assign each of these personas a name and personal details. By making them real, you can visualize the audience and walk them through the website. Stories activate many areas in the target audience’s brain, facts do not.
    7. Wireframe: Draw a wireframe for the main pages.

      wireframe
    8. Copy Deck: In developing a website for a client, the content is often done by different people and the designer requires that all the copy for the website be assembled into a copy deck. Copy the content of the first page, break it down and label it as if it were part of a copy deck. Take a look at the SAMOCA copy deck example for guidance.
    9. Competition: How does this website stack up against the competition? What does it have that competitor websites do not, in terms of voice, tone, brand, style, design and so on? Can anything be learned from the competition?

    This exercise is meant to get you into the development process of building a website — your portfolio!

    You will mark up your answer and create an index.HTML page with links and linked images that you will bring to class next week.

    Posting the Assignment on your Domain

    You will post the assignment on the b.parsons.edu server. Some of you may not gain access to this server right away. don’t worry about it. Just do the work and you will get on soon enough.

    Turn to the Tools of the Trade article for instructions on how to set up your website.

    Use Fetch to upload your files.

    Put a “parsons” folder inside the public_html folder.

    Fetch acts like a finder window, so when you drag files into the window, they end up on your server. Unlike your finder, you replace the file when the names are the same. This is how you update files to a newer version.

    Within the “parsons” folder, create a folder called “assignment-1”. The title of your web site profile should be “index.html”. It should end up in the “assignment-1” folder.

    Review Writing HTML article to help you create the HTML file. I have an old assignment as a homework sample.

    Visit Interactive Video Introduction to HTML course to learn all about HTML or watch the video series below.

    Watch Video Series Do Not Fear the Internet

    These videos (about half an hour) are much more fun and direct than my lectures or the Lynda.com videos. Many if not all of your basic questions will be answered by listening to either my lecture or watching these videos. Please let me know in class or email me if there is still something that is not clear. To go on without resolving what is not clear will cascade into many problems later on.

    A fun introduction to the basics of HTML and CSS.

    1. Don’t Fear the Internet

        

          

    2. HTML: Hamburger Text Markup Language

        

          

    3. Don’t Fear the Browser

        

          

    4. Starting from Scratch: HTML

        

          

    06 Web Typography

    Posted on by
    Reply

    The web changed completely when it comes to typography. For the first twenty years we could specify only a few fonts. There were 18 fonts to use in 2008. The core fonts licensed by Microsoft are: Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Apple added Helvetica and Times. That was it. By 2010, there were thousands of fonts available. What a change. Since then they introduced open type variable fonts.

    While typography’s been around for hundreds of years, it’s only been in the last hundred years or so that it became both art and science. The art and science of typography forced typographers to ply their craft in the service of the end user who reads it. That makes them the original user experience designers, so take heed.

    The web is different from print. The user is in charge in a way that is foreign to print. The attention span is different, and the typography should facilitate the user experience as soon as they arrive on the page. The typographic defaults that taken for granted took their shape from the years of experience in the print world. Do not blindly accept these defaults by which to express your content on the web. The web is different from print.

    You will be required to deviate from the standard web fonts like Arial, Helvetica, Verdana and Georgia in the final. These are common fonts supplied by the operating system that have defined typography on the web for far too long. They are safe, legible and entirely predictable. It is possible that legibility may suffer in favor of better expression of the content. It’s a brave new world. Please push the typography if you can. It has been documented that legibility isn’t all that its been cracked up to be when it comes to retaining information.

    On the one hand, the legibility of a typeface is its invisibility, that is, just like the cuts in a movie and they are not supposed to draw attention to themselves but convey the content in service to the story. The typeface and the way it is laid out should transparently facilitate the content to the user, whose focus, after all, is on what is being said. But if you want the delivery of the content to express something, it better have style. It’s possible to do both, and in the name of communication, even if you forgo some legibility, I encourage you to do so for the sake of communication, if that is what it takes.

    Adobe added in access to all of the open type features exhibited in the following demo of comprehensive CSS font-feature-settings .

    For the love of type, explore what’s possible

        

    David Carson famously did this twenty years ago, designing, among other things, covers for HOW magazine which I was writing for. If we need an expanded vision to counterbalance all of the rules, we can visit his work, with the understanding that rules are meant to be broken, with intelligence and purpose, and if the content demands it.

    Honor the content with your typography, so that it aids in the facilitation of that content. After all, it is only through reading the letterforms that the content can be transmitted. As a designer, you have the power to determine that gateway.

    Balance function and beauty, or whatever emotion grabs you to fulfill that function with style. Be playful, lively, think your way through the problem but let the solution be surprising, and just have fun! Having fun is contagious, and if you exhibit joyful creation, it is bound to be infectious.

    Here’re two spreads on intuition from David Carson’s 2nd Sight, his influential book on graphic design after the end of print. There is a TED talk and another one of his creations in the homework. Let that get you started.

    David Carson from 2nd Sight

    The Fundamental Skill of a designer is talent. Talent is a rare commodity. It’s all intuition. And you can’t teach intuition. — Paul Rand
    David Carson from 2nd Sight
    Intuition doesn’t look at things as they are: that is prison, that is anathema to the intuitive. He looks, oh, so ever so shortly at things as they are and moves off into an unconscious process, at the end of which he has seen something nobody else would have seen — C.G. Jung