CIS195 Web Authoring 1: HTML

Week 1, Session 2

Topics by Week for the Eight-Week Term
1. Intro to HTML	5. Layout with CSS
2. More HTML, file paths	6. HTML Tables
3. Site structure and navigation	7. HTML Forms
4. Formatting with CSS, Midterm	8. Multimedia, Final

Topics by Week for the Ten-Week Term
1. Intro to HTML	6. Layout with CSS
2. More HTML, file paths	7. CSS Flexbox and Grid
3. Site structure and navigation	8. HTML Forms
4. Formatting with CSS	9. Multimedia
5. Midterm, Project Propposal	10. Tables, Project Completion
	11. Final

IntroReviewVisual Studio CodeMore about HTML Tags and ElementsHTML element attributesEmpty TagsMore HTML ElementsParagraphBold and Italicized TextImageLinkListsLab Assignment

Intro

Review due dates and what you need to do this week.
- Take the reading quiz, if you haven't already done so. Since this is the first week, I'll re-open it for you if you ask.
- Start Lab 1, it is due on Thursday of next week.
Review the due dates and the weekly learning cycle shown in the Moodle fly-out on the right side of the page.

Review

HTML “boiler plate”


<!DOCTYPE html> 
<html lang="en">
  
   <head>
      <title>Some Title</title>
   </head>
  
   <body> 
    This is some text.
   </body>
  
</html>

HTML elements
- What is a tag?
- What is an element?

Visual Studio Code

Install VS Code Instructions are here: Setting up Visual Studio Code
Create an HTML file
- Create a new file, then rename it with the html extension.
- Add the HTML "boiler plate".

More about HTML Tags and Elements

HTML element attributes

Pattern: <element attribute1=”value1” attribute2=”value2” ...>
Example: <meta charset="UTF-8">
The two parts of the attribute form a "key-value pair"

Empty Tags

Also known as one-sided or self-closing tags.

 
<img src="kitten.png" alt="A very cute kitten">

More HTML Elements

Here are some elements that we haven’t covered yet:

Paragraph

 some text 

Bold and Italicized Text

Bold: some text
Italics: some text

Image

<img alt="description" src="photo.jpg">

Put image files in the same folder with the html file for now.
Reduce the size of the image files.
- So that your web pages will load quickly.
- Moodle has a 10 MB upload limit, so when uplaoding web sites to Moodle, the combineds size of all images and web pages must be less than this.
- Windows and Mac OS both have built-in apps you can use to shrink image files.

Link

Use the anchor element to create links

<a href="https://lanecc.edu">Lane Community College</a>

Lists

Ordered list:


xxxxxxxxxx
    <ol>
      <li>First item</li>
      <li>Second item</li>
    </ol>

Unordered list:


xxxxxxxxxx
    <ul>
      <li>First item</li>
      <li>Second item</li>
    </ul>

Lab Assignment

The lab 1 instructions are posted in the week 1 section on Moodle.

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