HTML & CSS Training
Module 1
In this module you will:
- Familiarize yourself with HTML and create a basic HTML document
- Learn how to work with a code editor and upload/download files via FTP
This week you will learn a how to create an HTML document and you will post your introduction as an HTML document and upload it to your server.
- You will download the code editor Sublime Text 3, which you will be using for all of your future assignments, as well as downloading the FTP client FileZilla, and making sure you can connect your server space.
- You will read the introduction and Chapter 1 of the text for this course. In case you are still waiting for your book to arrive, I have provided the this portion of the book for for this week only a PDF so that you won’t get behind in the course – we have a lot to cover, so order the book now if you haven’t already!
- You will complete Assignment 1, which will be to write your self-introduction and create it as an HTML document that you will upload to your MADArts server space.
Get Set Up
About Code Editors:
The first thing you’ll need to get, if you don’t have one already, is a Code Editor. When you “code” it just means you’re creating a text file like any other, except that the language you’re writing in isn’t English, Spanish or French, it’s a computer programming language. This means any app that lets you type text into can be used to write code. That said, just like there are editors that come w/extra features to make it easier to write in English (for example Microsoft Word) there are editors that come w/extra features to make it easier to write code. The one we’ll be using in class is called Sublime Text. This is what I will be using when I post assignment and project demonstrations.
If you already have a code editor that you are really committed to, feel free to use it – although just remember it wouldn’t hurt to try new things and expand your software proficiency!
Download Brackets:
You can download Brackets here: https://sublimetext.com
Connect to the server with an FTP Client:
You will also need an FTP Client to upload + download files onto your server, the one we’ll be using in class is called FileZIlla.
You can download FileZilla here: https://filezilla-project.org/ (Links to an external site.). Be sure to click on the first button to download the Client not the Server.
Once you’ve downloaded and installed FileZilla, open it and go to File>Site Manager. In the new window that opens, click on the “New Site” button on the bottom left section of the window and name the site whatever you choose, like “My KRDM Server”. You will need to enter the following information in the section on the right to connect to your server space:
Protocol: SFTP – SSH File Transfer Protocol
Host: ftp.krdmstudio.com
Username: krdmstudio
Password: (your password)
The port you will be using is 22, but you shouldn’t need to enter that as it is the default port.
You will then be connected to your server space.
Open the “public_html” folder.
Create a new directory called “training” (please use lowercase). This is where you will put all of your files for this course.
View the video below to see a demonstration of the entire process (I’ve skipped to the relevant section for you, and again, please use the information above and NOT what is in the video to connect to your server):
Read:
Introduction & Chapter 1 of the textbook. You will learn more about how the web works, and how HTML code is structured.
W3Schools HTML Tutorial. There are several HTML tags to learn, but they all pretty much work the same. You can read through Chapters 3 and 4 to learn more tags that deal with formattiing, and I’ll be demonstrating some of those tags in this week’s assignment demonstration video. The W3Schools website is a great website to use as a reference for all of the tags available, and it even has a built-in code editor that will allow you to tryout code for yourself in the browser. Note: this link is just for reference, there aren’t any specific pages that you need to read on this website.
Assignment:
You are going to create a web page that will serve as an introduction of yourself to me and your classmates, as well as give you hands on experience working with an HTML file and a few tags.
Please include the following information about yourself (in no particular order):
- Your educational background.
- What fields of digital media are you interested in?
- Links to any of your work .
- Why do you want an advanced degree in Digital Media/Art & Technology? What are your career goals?
- Do you have any experience with HTML and CSS?
- Anything else you’d like for us to know – what do you do for a living? Where do you reside now, where are you from? Favorite… anything?
Your HTML file should include the following tags at minimum: html, head, title, body, h1, h2, p, and a.
Watch the Assignment 1 Demonstration. In this video, I will show you how to create your HTML Self-Introduction. I will walk you through creating the file, demonstrate a few basic tags, and show you how to upload the file to your server.
Module 2
In this module you will:
- Learn how to add media files (images, video, and audio) to an HTML document
- Learn how to optimize media files for quick load time and display on all devices
Navigating this Week
- Read Chapters 5 & 9 in the textbook
- Complete Assignment 2, which will have you practice adding various multimedia files to an HTML document that will display media quickly and on all devices.
Read:
Chapters 5 and 9 of the textbook. You will learn more about adding images, video, and audio to your site and how to optimize each for quick loading and proper display on all devices.
**Note, we will not be covering Flash in this course, so you may over skip pages 203-204, 212, 216, and 218. These pages deal with adding Flash players to your website, and possibly having Flash as a “fallback” to HTML5 video/audio, however, Flash does not play on iOS devices, and HTML5 is now compatible with all modern browsers.
Watch:
Watch the Assignment 2 Demonstration. In these videos, I will walk you through Assignment 2, including adding media your web page and optimizing your media files.
Working with images:
Working with videos (native and embedded):
Working with audio:
Uploading to your server: