CIS195 Web Authoring 1: HTML

Intro to the Course

Week 1, Session 1

Contents

Introductions

• Introduce myself

  • Why I love software development

  • My experience as a software developer

  • What I teach at LCC

• Students introduce themselves

  • Everyone, especially online students use the Moodle introductions forum.

Computer Skills and Software

Skill Expectations

This is a beginning class with no prerequisites, but you should be able to do some basic things on a computer such as:

• Create and edit a file using an application like Microsoft Word.

• Manage files and folders using File Explorer (Windows), or the Finder (MacOS).

  You should be able to move, copy, rename or delete files and folders.

• Install an application.

Software Needed

The minimum you need is:

• A text editor

  • Any text editor will do:

    • Notepad on Windows

    • TextEdit on a Mac

  • A code editor gives you more help with coding. We will use Visual Studio Code.

• A web browser

Web Sites, HTML and CSS

• Why we make web sites.

  • What are some reasons you might want to make a web site?

• HTML (Hypertext Markup Language)

  • It provides a way to structure the content of pages.

  • It lets us link pages together.

  • A markup language is different from a programming language.

• CSS (Cascading Style Sheets)

  • Provides formatting and styling for the HTML pages.

• Full blown example: Chennai web page

  • View the source to see what the HTML looks like.

  • You will be able to make a site like this by the middle of the term.

Discussion

• What web page or site do you especially like?

• What kind of web page would you like to make?

Making a Basic Web Page

The skeleton of every web page

• The simplest example: Empty page

  • View the source to see what the HTML looks like.

    This is the stuff you need in every web page!

• When you make a web page, you need to define html, head and body elements.

• Explain the syntax of HTML

  • tags

  • elements

  • hierarchy

Adding some content and structure to the skeleton

Now we're going to modify the empty page to make our own first web page. You can use Notepad on Windows, or TextEdit¹ on a Mac.

• Copy the empty HTML page and edit it to make your own page.

• Add text with no formatting.

• Add paragraphs using the <p> tag.

• Add some basic Formatting Elements

  • Headings use the <h1>, <h2>, <h3>, etc. tags.

  • Text-level elements including strong, <b> and emphasized <i> text.

     

Course Overview

Syllabus and Learning Activities

• Syllabus – posted on Moodle

• Reading and Quizzes

  • Purpose of quizzes isn’t testing, it’s focus and accountability.

  • Look at the reading for this week.

  • Look at the quiz for this week.

• Lab assignments

  Most labs have two parts (not Lab 1 though):

  • Part 1 is the warm-up.

  • Part 2 requires more problems solving.

  • Upload the web sites you make to:

    • Moodle

    • A web server (we'll do this later in the term).

  • Look at this week's lab assignment.

   

Next Class

• Learn to use Visual Studio Code (and help with installing VS Code).

• Make a simple web page using VS Code.

• Learn how to use some more HTML elements.

• Get started on the lab assignment in class.

Web Authoring Lecture Notes by Brian Bird, 2018, revised 2023, are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.