Writing HTML is commonly thought of as coding. It is more correctly defined as markup. We will use some freely available web resources to learn the building blocks of developing websites.
- CSS Deck.com – Develop web applications faster with real-time preview and enhanced debugging.
- Code Academy – We’ll use the course content from Code Academy. It’s good enough for NYC Mayor Michael Bloomberg.
Careers in Web Development A place for everyone
- Project Manager
- Information Architect – Dominique Zhao
- Interaction Designer – Hanna Jung
- User Experience Designer – Kat Christiansen
- User Interface (UI) Designer – Jared Spool, Martin Oberhäuser
- Mobile Interface Designer – Luke Wroblewski
- Web Content Strategist – Karen McGrane
- Social Media Manager
- Usability Analyst – Jakob Nielsen
- Mobile App Developer
- Rich Media Developer
- Accessibility Expert – Sharron Rush
- Web Developer – Eric Meyer
- Web Designer – Ethan Marcotte, Andy Clarke
- Ghost Blogger – Sharon Hurley Hall
- Creative Director – Michael Griffith
- Design Consultant – Stephen Anderson
- Icon Designer – John Hicks, Jan Kovarik, Susan Kare
- Technology Evangelist – Bruce Sterling
- Typographer – Jonathan Hoefler and Tobias Frere-Jones, Jason Santa Maria
You’ll find that many jobs in web development are non-discrete: the responsibilities and roles of these careers overlap.
Join https://join.slack.com/t/mclinclass/signup This channel has all current students in my ATCM course.
- Use your UTD email.
- You can have any (SFW plz) username you want, but your FN and LN must match the class roll.
Submit for credit: your Slack username
1-2 Code Academy
Create an account on Code Academy
- Complete the following under “Learn HTML“:
- HTML Elements and Structure
- HTML Tables
Submit for credit: a link to your profile – https://www.codecademy.com/yourusernamehere
1-3 Semester Project Planning
I’m going to use Trello to keep track of your progress during the semester on your final projects.
- Join and create a Trello board at https://trello.com/
- Create a board with the following lists (see example board)
- Add other lists as the need arises.
- Change the background color/images from the default.
- This is your Semester Project Planning Board. You can create as many boards as you wish on Trello, and use them to plan your long-term or short-term assignments and goals.
- Create Cards for:
- Choose Topic for Semester Project
- Choose & Purchase Domain Name
- Choose & Purchase Web Hosting
- On each of the cards, add a due date of 1/22/2018
- On the Domain Name card add a checklist:
- Dependency: Select Hosting Provider
- Select hosting plan
- Point to Nameservers on hosting provider (This’ll make sense later.)
- On the Web Hosting Card add a checklist:
- Select Hosting Provider
- Select hosting plan
- Add purchased domain to hosting (This’ll make sense later.)
- Install WordPress on host
Submit for Credit: a link to your Trello Board with the above tasks completed. You will be using this board to track your work this semester, and several homework assignments will refer to this board.
1-4: Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors, however, with many older systems still in use, you will need to know how to use a simple text editor like Notepad (PC) or TextEdit (Mac) to edit/create/troubleshoot HTML and CSS.
Follow the four steps below to create your first web page with Notepad or TextEdit.
Step 1: Open Notepad (PC) or TextEdit (Mac)
You’ll need to change some preferences to get the application to save files correctly.
For a mac, in the app’s Preferences > Format > choose “Plain Text” Then under “Open and Save”, check the box that says “Ignore rich text commands in HTML files”. Then open a new document to place the code.
Step 2: Write or copy some HTML into the text editor (you can just copy this code):
Step 3: Save the HTML Page
Save the file on your computer.
- Select File > Save as in the Ntext editor’s menu.
- Name the file “index.html” and set the encoding to UTF-8 (which is the preferred encoding for HTML files). You can use either .htm or .html as file extension. There is no difference any longer.
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with”).
The result will look much like this:
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:
<img src=”/images/html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>
Images on Another Server
Some web sites store their images on image servers. Actually, you can access images from any web address in the world:
<img src=”https://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com”>
HTML File Paths
A file path describes the location of a file in a web site’s folder structure. File paths are used when linking to external files like:
- Web pages
- CSS Style sheets
Absolute File Paths
An absolute file path is the full URL to an internet file:
<img src=”https://www.w3schools.com/images/picture.jpg” alt=”Mountain”>
Relative File Paths
A relative file path points to a file’s location as compared to the current page.
In this example the file path points to a file in the images folder located at the root of the current webpage:
<img src=”/images/picture.jpg” alt=”Mountain”>
In this example the file path points to a file in the images folder located in the current folder:
<img src=”images/picture.jpg” alt=”Mountain”>
In this example the file path points to a file in the images folder located in the folder one level above the current folder:
<img src=”../images/picture.jpg” alt=”Mountain”>
- It’s a best practice to use relative file paths (if possible). When using relative file paths, your web pages will not be bound to your current base URL.
- It’s considered poor form, and bandwidth-theft, to link to an image hosted on another website unless the owner of that site intends that image to be used for that purpose (web ads, etc.). You should store that image (with the original site’s permission) on your own server. Memes don’t count 😉
SUBMIT FOR CREDIT: A simple webpage you have created in a text editor with clean tags and accurate syntax that has the following:
- Basic HTML document structure (doctype, head, body).
- An image in the same folder as your HTML page.
- An image hosted on another website (Imgur, GIPHY, or other free image sources intended to be shared are a good choice)
- A paragraph describing the image you’re inserting.
1-5 Required Reading
- 20 Things I Learned About Browsers and the Web
- Evolution of the Web
- How the Internet Works
- Intro to HTML
Submit for credit: Create a simple web page that explains three things you learned from the readings. Save your work in a .txt file and upload.