Week 1 (8/21 + 8/23)
Topics
- Overview/Introduction to the class and syllabus
- Some web basics and history
- The technologies empowering the web: HTML, CSS, and JS
- Basic HTML Tags
- Hard-coding web pages with HTML
- HTML structural tags
- HMTL markup for text
- HTML for content/structure vs. CSS for presentation
Exercise #1: <I AM IN HTML> (PART 1, DUE 8/30)
With Notepad (PC) or Text-Edit (MAC), hand-code a web page using HTML that provides a brief introduction to who you are, such as a biographical description of yourself, your careers goals/major, your educational background, your interest in the course, things you enjoy, your hobbies, your pets, something unusual about you, and/or any other information that you'd like to share. This content can be whatever you like and as long as you like.
Use the exercise to play around, explore, and learn the HTML elements covered in the lectures and reading and find a way to integrate them in your page.
At minimum, your HTML page should include:
- A page title (<title>) with your name and "Exercise 1"
- A header (<h1>) with your name
- Some form of narrative about yourself within paragraph (<p>) tags
- Sub-heads to divide up the content (<h2> or <h3> as needed)
- An ordered (<ol>) or unordered (<ul>) list (<li>) of some of your favorite websites
- A least 3 of the structural block elements: <header>, <main>, <footer>, <section>, <article>, <aside>
- At least 3 of the following additional block elements: <blockquote>, <hr>, <address>, <pre>, <div>
- At least 8 of the following inline text elements: <strong>, <em>, <br />, <abbr>, <cite>, <code>, <q>, <dfn>, <sub>, <sup>, <mark>, <time>, <wbr>, <span>, <bdo>, <b>, <i> ,<s>, <u>
- At least 4 of the following character references: < > & “ ” © ® ™ – — • … á ñ
- Comments in the code (<!-- comments -->)
Try to use the above tags for their correct, semantic purpose, even if you have to invent some content to support them. Beyond what is listed above, you're welcome to explore other HTML elements, such as adding links and images, etc. but these are not required and will be covered later in the class. Similarly, you do not have to style the page or use any CSS (that's coming next week). Rather, focus on exploring and coding HTML elements and trying to use them correctly.
Create a root folder/directory called "exercise1". Save the file as "index.html" within your "exercise1" folder . Bring the file to class with you next week on a USB drive. In class next week, we will review how to use FTP to upload your file(s) into your "Lastname_Firstname" folder on the MAT server.
Links and Resources
- FAQs (Questions and Answers about the Class)
- Index of Instructor Video Tutorials (Lecture and Demo Review)
- Sample Content for Exercise 1 (about me)
- Excericse #1 - HTML Elements Reference/Cheat Sheet
- HTML Dog: HTML and CSS
- W3 School Tutorials (HTML & CSS)
- HTML Elements Reference (MDN)
- HTML Reference (MDN)
- Mozilla Developer Network (HMTL)
- Bravenet HTML Tutorials
- http://store.collegebuys.org (for best pricing on Adobe CC)
Homework and Lab tasks
- Review the class syllabus and grading details
- Read the FAQs
- Get the required textbook (via Safari Books Online or at Amazon)
- Review/skim Chapters 1-4
- Read Chapter 5 - Marking Up Text
- Review the HTML Beginner Tutorial at HTML Dog
- Acquire the Recommended Software including Brackets and FileZilla
(Note: for FileZilla, choose FileZilla Client and choose to "Show Additional Download Offers" to choose to download the software without additional software bundles or "junk ware").
- Complete Exercise #1 (Part 1, due 8/30)