︎
︎Back DMD 2
Spring 2024 ︎︎︎Purchase College, SUNY ︎︎︎ (DES2460)DMD2

Knitting Circle:
What is CSS/HTML?




Introduction

This class is meant to (re)introduce you to CSS and HTML. 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. It allows us to meaningfully group our content. This is important when we want to style it later. 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>

  • The html tag just lets the browser know it is an HTML file (technically your page should still work without them, though as it gets more complicated it may display unpredictably). 

  • The head tag is where we place the title of our page, meta data, generally things that will not display on the page. We will place our css styles here for example.

  • The body tag is where the content we want to display will go.

Some other relevant tags

<h1 - h6> tags for headings (block level)
<p> tags for paragraphs (block level)
<br> for breaks
<div> for other “divisions” in your page (block level)
<span> for other inline elements within your page. 

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 look at. If you are lost however, SublimeText or replit 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

We will add style to our page, for now, with a style tag in the head of our html pages. 

<style>
  /* css goes here */
</style>

CSS is another scripting language with another syntax. For this reason we will go slow. CSS needs to have what are called selectors to know what it is we want to change.

We can simply specify tags to change and then start looking up aspects we can change about them. 

For example for a p tag we could change the text to be blue in this way: 
p
{
   color: blue;
}
or using hexadecimal colors

p
{
   color: #0000FF;
}

You can look through and start exploring the css selectors here, but you’d probably want to start looking at things like, font-family, font-size, display, background-color, margin, border, and padding

Some Relevant CSS Attributes

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

Exercise for next week (start in-class and finish for homework)

    • Create a basic “personal” website. There is not restriction on the content.
    • It should have (at least) three (html) pages (ie index.html, about.html, cool_stuff.html).
    • The pages should contain images of some kind (if they require a content warning of any kind for viewing in class, please state this in the Google Drive link)
    • The pages should contain text that has multiple different meaningful tags (p, h1, h2, etc.).
    •  The content should be styled in a meaningful way in CSS. 
    • Link to your repl.it from the Google Drive folder for now.

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.

Other Resources

Web development is a “cool” and lucrative field that people are interested in working with. It is also a field with a lot of historical information. Because of that you could find many long “crash course” type videos if that is helpful to you. In many cases it may not be helpful, especially to view an entire 4 hour video. 

The other thing that has been super helpful is to ask ChatGPT for help. This may not be helpful at first, but as you gain greater facility, you will know better what questions to ask.

︎Back DMD 2