glasses on laptop
Overview

 

Begin the semester right; read the syllabus and class schedule fully. You will be asked to agree to the course policies  as listed in the syllabus. Visit the website that is a companion to your text:  HTML & CSS Design & Build Websites code samples

Objectives
  1. Write HTML code by hand
  2. Understand HTML syntax
  3. Download Brackets text editor
  4. Explore  https://www.w3schools.com/
  5. Explore  code samples and  extras & tools  associated with your text
Reading & Watching

 

https://www.w3schools.com/html/html_quiz.asp — a self-test on HTML

 

Janene McMahan

About your instructor

I am a programmer, web designer, instructional designer, and adjunct faculty. I’ve been teaching online since 2011 and in the classroom since 1993. If you’d like to know more visit:

During a 16-week semester you need to accomplish 9-12 hours worth of reading, watching, writing, testing, studying, practicing, reflecting and building.

Helping you schedule your work. Supporting your success. If I can do more to assist you, please send email! When this week is completed you will be this far through the course.  

%

How far are we through the course?

%

15/500 points possible

Week 1: Getting Started

Welcome

Your goal this week is to get to know your classmates, the syllabus, the schedule, buy or rent your book, grab TWO different editors, and test out materials in the first few chapters of HTML & CSS: design and build websites.


Before you watch the screencast below, please view the Course Schedule.

 

HOW TO NAVIGATE THIS COURSE

Each week has a corresponding web page on this external site. For each week there are set objectives, reading assignments, and resources provided in the left-hand expandable boxes. Click the “+” to see the content.

There are lecture materials in the main body of the page, including items to watch or listen to in addition to those links on the left under “Reading & Watching.”

At the bottom of the page are required assignments. There may be required activities or practice work just above the required assignments. These activities are there to help you get the most out of this class. In many cases they prepare you for the assignment. Assignments are designed to help you learn core web design skills.

You may think the first few weeks’ assignments are easy.
Read ahead and plan accordingly as the course materials, tasks, and assignments increase both in value and difficulty as the course goes on.

This structure allows you to put together and practice everything you are learning while rounding out what can fit into a semester’s web design course.

TEXT EDITORS

You need to try out several text editors. During this week you need to try Google’s app text. You are welcome as you move through this course to use any text editor you like. Do not use Microsoft Word as a text editor. Do not use Dreamweaver or a similar product to create your materials. You should be hand-coding your work.

I primarily use TextEdit for quick things (mac) and TextWrangler for more in-depth items. Need  a quick interface to try something out? Go to any w3schools.com ‘try it’ pages. Not going to develop it into anything? Use jsFiddle. See links below to all of these resources. Students who use pcs report liking Notepad++ .

basic html page

HTML BASICS

1. NAMING CONVENTIONS

See the sample first HTML document below. Name your file index.html or index.htm to suppress the directory listing.

Why is this important?  In general you don’t want people to see the content of your directory.

Sometimes YOU might want to see the contents while you are making your site, but when it is time for others to see your finished work, you don’t want them to see a list of the images and the html documents, essentially everything visible in the directory or folder you are working in.

You want viewers to see the web page you’ve created.

Name a file index.html to make it the default file for that directory. IE htttp://www.godiva.com shows https://www.godiva.com/index.html if an index file exists in the top/main directory.

  • Use comments.
  • Keep to a convention–use all uppercase or all lowercase for your code; use white space and consistent indentation.
  • Do not use spaces in your filenames: “index.html” is perfect “try two.html” is not. More on this down below in  Naming/coding recommendations
  • Include the DOCTYPE definition, head and body commands in every html file.

Here’s a bit more from a very dated article, that still says it well.

“A recent DOCTYPE that includes a full URI (a complete web address) tells these browsers to render your page in standards—compliant mode, treating your (X)HTML, CSS, and DOM as you expect them to be treated. Using an incomplete or outdated DOCTYPE–or no DOCTYPE at all–throws these same browsers into ‘Quirks’ mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s.’

Jeffrey Zeldman, A List Apart
Fix Your Site with the Right DOCTYPE

The head of the document contains information for the browser, as well as the title; these items are also used by catalogs and search engines. The body section sets apart what the viewer will see.

2. CODING CONVENTIONS

  • Use all lower case.
  • Use the extension .html
  • DO NOT USE SPACES in your file names!

Spaces result in %20 being exchanged for every space in your file name. If you use “try two.html” as a file name it will work fine on your own system. When you upload it to the server it will be translated into this: https://yourdomainname.com/try%20two.html  and thus all of your links will break.

  • Files submitted into Blackboard need to include your last name as part of the file name

Keep your code simple and clean to experience fewer problems. HTML tags/command are not case sensitive.  Many web sites use uppercase HTML tags. W3Schools use lowercase tags because the World Wide Web Consortium (W3C)  recommends lowercase in HTML 4, and demands lowercase tags in XHTML. https://www.w3schools.com/html/html_elements.asp

View your materials in multiple browsers!

The most basic html code is displayed in a similar fashion across different platforms and applications.

INSTRUCTOR NOTES FROM CHAPTER ONE

1. GOOD CODING PRACTICES

  • Use a title for search engine optimization and so viewers know at a glance what the page is about.
  • Use whitespace and indenting when hand-coding your html so you can find things.

cits-html-goodpractices
This is what the .html document shown above looks like in your web browser:

sample html page

REQUIRED ACTIVITIES

DOWNLOAD the Chrome app called < txt >  and (if you want to jump ahead the Adobe free product Brackets  ). You are strongly encouraged to test out all of the code in chapters one. Have you started reading chapter two? Test it too!

Use   the Chrome app or the editor of your choice  to create a correctly formatted html document.

This means using the DOCTYPE, html, head, title, and body tags. Remember to close any open tags that have corresponding closing tags. Don’t let the automatically generated code cause you a problem. Read your code before you turn it in. Test it in a browser.

How do I test my code in a browser?

  1. Save your .html file
  2. Open your web browsers of choice (test it in two different ones)
  3. Find the File menu and choose open file (Chrome and Firefox)
  4. Navigate to where you stored your .html file on your own machine

If you cannot navigate your own machine, please review the recommended course prequisite. This class is not focused on teaching you about your device.

Using the Chrome app < txt >

If you do not see a YouTube video below, please follow the link to “Using txt for hints!”  It’s less than a minute long, but good.

OPTIONAL ACTIVITIES

Test out Codepen and JS Bin

GRADED ASSIGNMENT

HELLO WORLD!   –  15 points
Participate in the Blackboard Discussion #01: “Hello World’

Introduce yourself to your fellow classmates inside of the Blackboard Discussion Board.  Some of our discussions occur in our class WordPress site (this one.) If you have concerns about working in the open, please speak with me–Janene McMahan–about this.

  • Include a photo (insert or embed it, don’t attach it) that you feel represents you. (3 pts.)
  • Please provide 1-3 links to favorite spaces you visit on the web.  (3 pts.)
  • Include any relevant background in design, coding, writing, etc.  (3 pts.)
  • What would you like to accomplish in this course? How’d you hear about it (or) why do you want to do this course online? (2 pts.)
  • Respond to at least two of your classmates using discussion guidelines – see Rubrics   (4 pts.)