Create a new document by either pressing ⌘N or by going File → New Document. Type something into the editor and save (⌘S) the file inside of your “www” folder as index.html

This is what your file structure should look like:

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548283734364_Screen+Shot+2019-01-23+at+5.27.06+PM.png

Your first website

The index.html file is the main page of any website. All websites start with an index.html file. When you create a new project, you’ll have a new index.html file inside of a new project folder. The “.html” ending signifies that the text is written in HTML, or Hyper Text Mark Up Language. HTML is not a programming language; it is a a markup language that provides the means to create content and structure from text.

Paste the following into your text editor:

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>Mindy's Page</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

Open up your index.html file by opening web browser Chrome and dragging the index file into the window. All browsers are document viewers. You can view PDFs, JPGs, and other file formats in the browser, but we use it primarily to view rendered webpages. This can be viewed locally or pull from a server.

⭐️Additionally, enter the following into a tab in chrome:

http://artfiles.rutgers.edu/~your-username@art.rutgers.edu

for example, mine is: https://artfiles.rutgers.edu/~fisher@art.rutgers.edu/

What’s going on? Let’s take a step back and try uploading from an FTP client.

For getting access to your www folder from home

Download Cyberduck.

Press Open Connection in the top left.

Select “WebDAV (HTTPS)” from the dropdown. (By default its FTP)

Fill out the server as “artfiles.rutgers.edu” and the port as “5006” log in with your username and password (the same one you used today to get in on your computer).

At home, connect as described above. Download the folders by either right clicking on them or dragging them to your desktop. Work locally on those files. When you’re ready, re-upload the files by dragging them into Cyberduck. You will be asked if you want to overwrite your file – yes you do, but make sure you’re overwriting the correct file in the correct directory.

To check if it worked, log on to your url:, for example, mine is:

https://artfiles.rutgers.edu/~fisher@art.rutgers.edu/projects/survey/index.html

This is only how you’ll work when you’re not at the school. At the school, there’s no need to do this because your www folder is linked to the server already.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548303563074_Screen+Shot+2019-01-23+at+5.26.17+PM.png

What’s going on here?

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548303651698_Screen+Shot+2019-01-23+at+11.20.41+PM.png

Look familiar? Let’s discuss.

__

back to the live file…

This page is going to be your portfolio site, which is our first project, and is also how you’ll turn in all of your exercises and projects for this class. More on that later. For now, let’s take a closer look at what’s going on. Open up the source of the page:

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548285176762_Screen+Shot+2019-01-23+at+6.12.43+PM.png

What do you see? It should look exactly like your index.html file. You can do this with any website.

This is one way of viewing the source, but I use the developer tools more often. To open them up, you can go to view/developer/developer tools, or right/⌘ click on an element on the page and select “Inspect”

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548285331530_Screen+Shot+2019-01-23+at+6.15.06+PM.png

Now you should have an interactive window that allows you to view and test out different things right from here! Pretty nifty. When we’re working, we’ll always have this up to troubleshoot.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548285453194_Screen+Shot+2019-01-23+at+6.17.11+PM.png

Let’s watch a quick video that introduces the basics of HTML produced by Laurel Schwulst, a designer, artist and another faculty at Rutgers.

https://youtu.be/CkzbI1Tv_rQ

Elements

As mentioned in the video, HTML is made up of various elements. Most elements need to be opened closed. Take a look at our example:

<body>

<p>Hello World!</p>

</body>

The <p>, or paragraph, tag is nested inside the body. This type of indentation should also be maintained while you’re writing code.

For a full list of HTML elements, you can explore this page. But for now, let’s stick to a few basics:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<p>This is a paragraph</p>

To break<br>lines<br>in a<br>paragraph,<br>use the br element.

<hr>

The hr tag creates a horizontal line in an HTML page.

<em>This is emphasized text</em>

<strong>This is strong text</strong>

<ol>

<li>This is an</li>

<li>Ordered</li>

<li>List</li>

</ol>

<ul>

<li>This is an</li>

<li>Unordered</li>

<li>List</li>

</ul>

The <code>code element</code> example

The <pre> * p r e* * </pre> example

The <em>em element</em> example

The <mark>mark element</mark> example

The <small>small element</small> example

The <strong>strong element</strong> example

The <sub>sub element</sub> example

The <sup>sup element</sup> example

<input type="radio" name="rad"> Radio input

<input type="checkbox"> Checkbox input

Text input <input type="text" value="default value that goes on and on without stopping or punctuation">

<a href="http://www.newschool.edu">This is a link</a>

This is an image <img src="assets/favicon.png" alt="Eye favicon">

Check out the above example on codepen.io https://codepen.io/nikafisher/pen/MLwvPr

Note

These documents are created from a series of semantics blocks (HTML tags). When crafting HTML pages, always keep in mind the semantics of the tag to best reflect the intent of the text. For example, a list of items makes more sense as an unordered list of list items <ul><li> than as a series of paragraph tags <p>.

⭐️ Keep in mind that as you’re writing code, you always want to make it as readable as possible. This means using the proper line breaks, indents (not spaces), and comments.

Links

In the above example, the image didn’t load properly. If we look at what’s happening, the code is saying look inside the assets folder for “favicon.png”, but as we saw on codepen, there wasn’t an assets folder and there certainly wasn’t a favicon.png.

Let’s find an image. Open up google images and find a picture. Save it to your “imgs” folder. I found a panda photo named “panda.jpg.” Your file structure should look like this:

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548287574231_Screen+Shot+2019-01-23+at+6.52.30+PM.png

Now let’s go back to our index.html file. To place an image on the page use the img tag:

<img src="assets/imgs/panda.jpg" alt="A cute panda">

Let’s take a look at this…

the src=”” section is telling the computer: the source of this image is here. In HTML, forward slash means go one folder deeper.

To go one step backwards, you’d use “../” rather than “/”

This type of link is called a local link, because the destination is saved locally (on your server).

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548287809625_Screen+Shot+2019-01-23+at+6.56.44+PM.png

Cool!

You can also link to an external destination using a url. For example, try changing the src to this: https://www.boostability.com/wp-content/uploads/2014/09/Panda-Update.jpg

<img src="https://www.boostability.com/wp-content/uploads/2014/09/Panda-Update.jpg" alt="A cute panda">

See, it still works. Generally speaking, linking locally is better because you’ll have control over how long the items are hosted and it’s easier to maintain.

Exercise: Student Survey

Let’s get to know each other a little better.

Navigate to your projects folder and create a new folder titled “survey”

Open a new document in your text editor and paste the following inside:

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>Student Survey</title>

<link rel="icon" type="image/png" href="assets/imgs/favicon.png">

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

</head>

<body>

<h1>All About Me</h1>

<div class="question-container">

<div class="question">What is your name?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Where are you from?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">When is your birthday?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Which major are you studying? Why did you choose it?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">What year will you graduate?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">What has been your favorite class so far? Why?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">What are you hoping to learn in this class?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">What does “creative computing” mean to you?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">When you imagine a graphic designer, what do you think they do on a day to day?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">When you imagine a developer, what do you think they do on a day to day?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

        <div class="question">Where do you see yourself after graduating? What kind of job do you want to have?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Do you consider yourself an artist, a designer, both, or neither?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">What kind of design classes have you taken before this one?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">How much typography have you studied?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">List your favorite typefaces.</div>

<div class="answer">

<ul>

<li>Unorderdered item #1</li>

</ul>

</div>

<br/>

<div class="question-container">

<div class="question">What are you top 3 favorite artists?</div>

<div class="answer">Your answer goes here!</div>

<ol>

<li>Unorderdered item #1</li>

</ol>

</div>

<br/>

<div class="question-container">

<div class="question">Which artists do you like?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">List out some music that you like to listen to</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">What do you like to do outside of class?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Have you ever built a website?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Do you have any questions for me?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Do you have a favorite website?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Do you have a favorite place to visit?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Do you speak any other languages?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">What is your favorite food?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">What is your favorite animal?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Do you have a pet?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

<div class="question-container">

<div class="question">Is there any other information you’d like me to know?</div>

<div class="answer">Your answer goes here!</div>

</div>

<br/>

</body>

</html>

Instructions

Fill out the survey by editing the text that says “Your answer goes here!”

Include at least one image in one of your answers. Hint:

<img src="smiley.gif" alt="Smiley face">

Introduce yourself to the person to the left and to the right of you. Create a link on your survey to each of their surveys.

<a href="https://artfiles.rutgers.edu/~fisher@art.rutgers.edu/projects/survey/index.html">Nika's Survey</a>

Create a link to your survey from your personal homepage. Once finished, paste the url to your portfolio page below.

Directory

Nika https://artfiles.rutgers.edu/~fisher@art.rutgers.edu/

Resources. Read through these later:

Introduction

Text editors

Basic examples

HTML Elements

Attributes

Headings

Paragraphs

Text formatting

Comments

Links

Lists

Blocks

Classes

Let’s save the surveys and move on to something else. Be sure to have everything linked and saved, we’re going to do something else with the surveys either later today or next week!

Exercise – Breaking News!

Let’s go back to the inspector. Visit any news website. Inspect element. Let’s see how these pages are structured. By hovering over the HTML, different parts of the website will highlight. If you open dropdown arrows, you’ll start to see how different elements are nested. Let’s find a H1 or text tag. This can look like <p></p> or <span></span>, nested in <div></div>.

Instructions

Change some of the headlines. You can write directly into the inspector. This will not permanently edit the page. If you refresh, you’ll see that the page goes back to the original. Inspect tool is typically used for debugging.

Edit five different headlines or text on the page.

Take a screenshot.

Add this to your class site under “Exercise: Breaking News!”

Looking…

Let’s take a look at some of the early net-art pioneers and what they did when programming was more limited than what it is today:

http://wwwwwwwww.jodi.org/ – Jodi Art Collective

http://www.teleportacia.org/war/ – My Boyfriend Came Back from the War , Olia Lialina (1996)

http://easylife.org/form/competition/competition.html – Form Art, Alexei Shulgin (1997)

http://www.easylife.org/desktop/ – Desktop Is, Alexei Shulgin (1997–1998)

Create a new folder within your projects folder titled “practice” and then another folder within that one titled “week-1” create an index.html file in this folder.

Exercise – Pick 10

In a 2012 project titled The Last Pictures, artist Trevor Paglen compiled 100 images onto a disc and blasted it into space. The idea was that technological artifacts will outlive mankind. While aliens might never come across this capsule, its existence (and the fact that it went into space) reflect our desire to preserve history and share it with the universe.

As a way to introduce yourself to the class, I’d like you to create an abridged time capsule online containing 10 images. Consider what’s important to you, where you spend your time, what inspires you and in general, what tells the story of you, specifically, in this moment. How will your time capsule obviously be from you? What can you add to your time capsule to help communicate this idea?

House your images on a website. It can be single page or multi-page, but either way, devise a system for navigating through the items. You should be able to navigate forwards and backwards. Brainstorm a few different ideas. How can you create an unexpected result?

Steps

First, come up with 3 concepts for your Pick 10 Collection. Describe your concept in one sentence. Figure out what your intention with this project is and brainstorm different ideas. Remember, you’re going to blast a little piece of yourself into space (hypothetically). Your concepts should be very different from one another.

Next, start brainstorming what types of content would help bring your concepts to life. Photos? Videos? Drawings? Poems? Start iterating on this and collect them in a google doc or dropbox paper. Aim to have around 15 images/content items per concept.

Begin editing your list – are all of your items unified or totally different? Do they work well together? If they’re all different, how can you modify them so they feel more coherent? What are the top 10 items? You can decide this by how clearly they help communicate your concept. Go back to your first sentence.

Begin assembling your ideas into a document. Before you get too far into programming, consider the best navigation system. We’ll talk more about navigation in future classes, but for now, think about how someone can access your website. Can you create a memorable system for doing this? What is the most obvious solution? Is there anything more unexpected that ties back to your first sentence?

Please only use HTML for this assignment.

References for putting links on your class homepage to your two activities:

<body>

<h1>My Student Work</h1>

<h2>In-Class Exercises</h2>

<ul>

<li><a href="projects/survey/index.html">My Awesome Survey</a></li>

<li><a href="projects/pick10/index.html">Pick 10</a></li>

</ul>

</body>

Source

Nika Simovich +Week 1

​​Getting Started

​​Setting up your Rutgers website

​​Your first website

​​Elements

​​Links

​​Exercise: Student Survey

​​Exercise – Breaking News!

​​Looking…

​​Exercise – Pick 10

​​Source

Getting Started

Setting up your Rutgers website

Your first website

Elements

Links

Exercise: Student Survey

Exercise – Breaking News!

Looking…

Exercise – Pick 10

Source