Spring 2023 ︎︎︎Purchase College, SUNY ︎︎︎ (DES2460)DMD2

Knitting Circle:
What is CSS/HTML?

(CSS/HTML pt.1)

Introduction

This class is meant to (re)introduce you to CSS and HTML. This is not a new media class. Using code in this class is meant to help you understand the potential of creative expression through code, as well as help you understand the perspective of a developer or engineer so that you might be able to work on a project or team with them, understand how to find resources to learn more yourself, and provide viable prototypes.

Let’s Answer the Question That is the Title of This Page

HTML stands for HyperText Markup Language. CSS stands for Cascading Style Sheets. Those are the acronyms. What do they mean though?

HTML is a way for us to “mark up” or add things to text (called tags) that allow us to do things like, add images, and link to other text files, video, interactive elements and scripts. We create an HTML file by making a text file and giving it an .HTML extension. Basically it is a fancy text file.

CSS is a way for us to style aspects of our webpage and give it a more distinct look. Some elements have default styling (for example links are blue and underlined by default. We will encounter some of these incidentally. CSS files are denoted by ending with the file extion .css. They are also fancy text files, except they control how our other text files look.

What is a tag?

A tag is a way of denoting something that is not text. Some of them we need in order for our page to display, others give us something to “attach” our styles to, and yet others we need to display other kinds of media (pictures, video, etc.) Tags typically surround text like this:

<div> hello, this is a div </div>

Both things that say “div” with a caret on either side are “tags”. We’ll get into what a div is later, but a div needs one tag (on the left) to begin the div. The later tag with the slash denotes that this is the end of the div.

Some tags do not require a start and end to do what they are designed to do. For example to insert a line break we simply type <br>

Other tags require a little bit more information for example to create a link we need to tell it where to go. It would look something like this:

<a href = “http://pictureofhotdog.com"> let’s look at a picture of a hot dog </a>

Okay, so what do we need to start a web page. This is it:

<html>
<head>
</head>
<body>
</body
</html>

Good Habits
(comments + indenting)

Before we start doing things, you may note that the head and body tags are “nested” within the html tag and are indented. You don’t need to indent html for it to work, however it is a good idea to do this to make your files easier to parse. If you are lost however, SublimeText will highlight what it thinks is the enclosing tag. Additionally you can collapse tags to make things easer to view by clicking on the arrow next to the line number.

Another good habit to develop is to comment your code. To create a comment you do the following:

<!— THIS IS A COMMENT —>

Everything within the comment (“THIS IS A COMMENT”) will not be viewable on the page. This is good for describing how your page is structured or to separate elements.

Let’s Link Up (adding links)

w3schools HTML links︎

On this page you’ve already seen links. Here’s how that works:

<a href = “http://pictureofhotdog.com"> let’s look at a picture of a hot dog </a>

This is what is called an “absolute link.” That is to say, it links to somewhere else on the internet, the “http://” part makes it absolute. If you want to link to another file, you would need to create what is called a “relative link.” so if you had a file called hotdogs.html in the same folder as your main file, you would link to it by simply typing “hotdogs.html” in href. If anything is in a subfolder it will be relative to the .html file you are in, so if you have a photo in a folder called “img” called “hotdog.png” you would link to it as “img/hotdog.png”

Imaging Solutions (showing pictures/media)

w3schools images HTML︎

If you want to include an image you use the image tag, like so:

<img src="img/hotdog.png" alt=”lovely picture of a cool hot dog in this trying time”>

The src attribute is the link to the image, and the alt attribute is a description for accessibility purposes.

To display a video you would need a bit more code:

<video width="1920" height="1080" controls>
<source src="movie.mp4" type="video/mp4">
</video>

This is in order to specify the width, height, that it has playback controls and then the source of the actual file.

CSS, linking to your HTML

To use a .css file to style our html, we have to add a line like this into the “head” of our html page.

This will link a file, in the same folder called “styles.css” to our html page. Once we start editing it we can see if it is working.

Some Relevant CSS Attributes

CSS Background︎
CSS “box model” (margins, padding, border, etc.)︎
CSS Comments︎
CSS Using Google Fonts︎

Exercise #1

Create a basic “personal” website that links three pages and styles the content in a meaningful way. They must link to each other in some way. (This is due for next week)

Exercise#2

Create a basic set of pages (2-3) that introduces and houses your video from week 1 (AE Exercise #2) and styles it in a way that matches the aesthetic.
(this week create wireframe, resources and decide typographic system)

Resources

W3Schools HTML︎
W3 Schools CSS︎
This website is excellent and has a lot of good step by step explanation of most coding concepts (HTML, CSS, Javascript, Python, etc.)

HTML Color Picker︎
Use this to find colors to pick for your CSS.

HTML/CSS Crash Courses︎
I have not vetted every moment of all of these videos, but they look fine. You may enjoy these if you want something to pause and go back and forth with. This does not mean you cannot ask me questions or go ahead and look at any other material. You also do not need to view any of these to complete the class.

MEGA “Full Course”

︎Back DMD 2

Knitting Circle: What is CSS/HTML?