Agenda

• Learn broad, high-level concepts of HTML, CSS, Javascript
• Create a simple index.html file and host it on Knuth
  • Filezilla for file transfer
  • ssh into knuth
  • change permissions with chmod
• Use an AI model of your choice to develop a static website
  • Share prompt and screenshots for a discussion activity

Section 1: HTML, CSS, JS

HTML (HyperText Markup Language)

• HTML provides the structure of a webpage
  • headings, paragraphs, lists, images, links, forms, etc.
• HTML uses tags with arrow brackets.
  • <h1>HEADER</h1>
  • <p>PARAGRAPH</p>
  • <img src="URL">
  • <a href="URL">LINK TEXT</a>
• More HTML resources are at the end of this presentation

HTML div containers

• <div> containers are the basic building blocks in HTML. They usually have an ID or class that is styled in your .css

HTML is like the foundation, walls, and rooms of a house

CSS (Cascading Style Sheets)

• CSS controls how the HTML elements look on the screen
  • colors, fonts, layouts, spacing, sizes, responsive design (mobile vs desktop)
• CSS is usually defined in <style> [css code] </style>
• You should keep your CSS in a separate file and import it/reference it in your HTML file

CSS would be the paint color, type of flooring, furniture arrangement, and overall interior design of a house

JavaScript (JS)

• JS controls the behavior and interactivity of your website
  • Handles complex features such as content updates, animations, form validation, and communication

JS is like the electricity, plumbing, and appliances in a home. It adds functionality.

For a personal website, you shouldn't really need JS (which we will not focus on today)

Section 2: Learning to transfer files to knuth

Creating your starter index.html

• Q: For those who have never used HTML, what patterns do you notice in this code?
• Q: How do you write comments in HTML?

• Create a file called "index.html" in a folder of your choice
  • You should keep things organized and create a folder called "personal website" (more on this later)

• Copy the code on the right (yes, type it out into your index.html); these are very basic elements for an HTML file
  • You don't have to copy the comments

You should edit your website locally on your computer, and then transfer those files to the server

• This is typical practice for development so that changes you make don't get updated in real time.
• To transfer files, we'll focus on a simple method using an application

Download FileZilla

• https://filezilla-project.org
• Download the application (choose the client download)

• Open it and enter:
  • Host: knuth.cs.hmc.edu
  • Username: [your username without @knuth.cs.hmc.edu]
  • Password: [your password]
  • Port: 22
• It will connect and you can then drag and drop files between your computer and the server
  • Move your "index.html" file from your computer to the server's "public_html" folder

We're going to manually change permissions through the terminal

• Open up your terminal (Mac use the terminal app, Windows use WSL)
• ssh into knuth
  • type in ssh [username]@knuth.cs.hmc.edu
  • type in your password
• type ls to list what's on your server
  • We're looking for the "public_html" directory
• type cd public_html to change directory to the public_html folder

Give permission for people to read your index.html file

• chmod is the command that changes file/directory permissions
• File permissions have 10 characters; the first character indicates file type and most of the time it will be a regular file (-) or directory (d).
• type ls -l into the terminal to list your directory contents with more meta data
• Exampes of what file perissions look like
  • -rw-r--r-- which means this is a regular file with certain permissions
  • drwx-r-x-r-x which means this is a directory/folder with certain permissions
• The next slide will show how to read the last nine characters

• Take a look at this chart and make sense of it

• chmod uses binary! Do you recognize how 1 corresponds with --x?
• You can look up more on chmod on your own

• On the server, we want to change permissions for "groups" and "others"
  • "groups" are the people who are in the same "team," like the student group on the knuth server or multiple users on a computer
  • "others" are everyone else outside of that, which would be the public viewing your website in this case

• In the terminal, you should be located in the public_html folder

• type ls -l and you'll see something like "-rw------ 1 [username] .... index.html"
• type chmod 644 index.html
• type ls -l again and you'll see that the permissions changed to "-rw-r--r--"

• chmod 755 [directory name] is needed for directories
• Use the graphic on the right
  1. What does 755 stand for?
  2. Why do you think directories need this permission?

You'll need to chmod every new file or directory that you move into your server to make sure it's viewable to the public

Also, I made you do all that work to make you learn something. You can change permissions through FileZilla if you care to mess around with the app

Section 3: Editing your website

Check that your website is public!

• Type in your internet browser cs.hmc.edu/~[username]
  • your index.html is the homepage

As you start creating more pages and subpages, make sure to organize your website on your local machine and on your server. The next slide shows an example

Personal Website
|____ index.html
|____ page1.html
|____ images
...........|____ img1.png
...........|____ img2.png
|____ style.css
|____ page2.html

How you organize your website is how your URLs will be determined

• cs.hmc.edu/~[username]/page1.html
• cs.hmc.edu/~[username]/images/img1.png
  • You can use this URL to embed your image on another page, but it's also all "relative" to where they are located within your server
    • <img src="https://cs.hmc.edu/~ccalingo/images/img1.png"> OR
    • <img src="images/img1.png">

What could be on a professional, personal website?

• Name, pronouns, how to pronounce it
• contact info, but protect if from webscraping with this format: name [at] hmc [dot] edu
• Basic educational history
• Projects and experience highlights
• Be creative!

Customize your website using AI

• Use AI to help you generate a personal website, and make sure to specify that you want your style.css to be a separate file (because it's good practice)
  • In your index.html file, you will have to import your .css file

Discussion activity:

• Share your prompt and screenshots of your initial website in these google slides:
  • [insert link]

• Let's discuss what we're seeing!
  • How similar/different are our websites?
  • Is the code readable? Can you understand it?
  • Do you like/dislike the results?
  • What are some tips you would suggest to everyone here for improving your website?

Try not to use AI every time to make small tweaks. Try to edit the files yourself and ask AI quesitons if you're wondering what certain code means

The next slides will show some very basic HTML code

W3schools is a really good source to learn HTML

Links

• <a href="URL" target="_blank">text here</a>
  • _blank will open the link in a new tab

Images

• <img src="URL" alt="description">
  • Writing alt text to describe the image is good practice for accessibility. It allows screen readers to describe the image

Ideally, your styling is done in style.css. But sometimes you might want to do some text styling as one-off things

• <b>Bolds the text</b>
• <i>Italicizes the text</i>
• <u>Underlines the text</u>
• <code>Allows you to show code</code>

Creating ordered and unordered lists can be helpful

Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Summary

Did you meet these learning goals?

1. I know how to organize my website on my local machine
2. I know how to transfer files to the knuth server
3. I know how to change file and directory permissions
4. I feel confident in my own ability to explore webdev

If you did not meet these goals, or think, "kind of... but..." or interpret them a certain way, I would like to know!

Do you have feedback for this presentation?

What other workshops do you want to see????

• Please let me know
  • ccalingo@hmc.edu