L04. Intro to HTML

CSCI 344: Advanced Web Technologies

Spring 2025

1

Announcements

1. Learning HTML is largely about self-study (see the readings)
2. Don’t forget to review programming concepts on your own time if you could use a refresher. Here are some resources:
1. The Complete JavaScript Course 2024: From Zero to Expert!
2. JavaScript Full Course for free 🌐 (2024)
3. JavaScript Tutorial Full Course - Beginner to Pro (2024)
4. Programming crash course + exercises added
3. Please open today’s slides on your computer (you can get to them from the Moodle) – you’ll need them for today’s activity.

2

Resume discussion of Net Neutrality & Content Moderation (10 minutes)

3

Outline

1. Overview of HTML, CSS, and JavaScript
2. Setting up your computer
3. Intro to HTML
4. Rules of thumb
5. Linking to resources
6. Activity

4

Outline

1. Overview of HTML, CSS, and JavaScript
2. Setting up your computer
3. Intro to HTML
4. Rules of thumb
5. Linking to resources
6. Activity

5

Most web pages use three technologies

HTML

• controls the content & structure

CSS (Cascading Style Sheets)

• controls the style, colors, layout, fonts, etc.

JavaScript

• controls movement and interactivity
• can communicate with and transmit data to and from servers without refreshing the page
• can interact with local data stores

​

Demo: https://codepen.io/vanwars/pen/MRaaXL?editors=1000

6

Outline

1. Overview of HTML, CSS, and JavaScript
2. Setting up your computer
3. Intro to HTML
4. Rules of thumb
5. Linking to resources
6. Activity

7

Install and Configure VS Code

1. Download and install Visual Studio Code (VS Code): https://code.visualstudio.com/
2. From within VS Code, install some plugins:
1. “Live Server” (Ritwick Dey)
2. “Prettier”
3. Together:
• Organize your files and folders (slides 5-6)
• Create a blank index.html page (slide 7)

8

Install and Configure Node

1. Open a command prompt
2. Check to see if Node.js is installed:
1. On Windows: Navigate to your command prompt (cmd, powershell or WSL – whatever you use) and type node – it will give you an error message if it’s not installed.
2. On Mac: Open your terminal and type node – it will give you an error message if it’s not installed.
3. If node is installed, make sure you’re using at least version 18. You can check by typing: node -v
4. If it’s not installed install it here: https://nodejs.org/en/download/prebuilt-installer

9

Side Note: Organizing Files

Now that you’re taking a computer science class, it’s important to think about where you’re storing your files. Please do the following EXACTLY as specified:

1. Create a course folder called csci344 somewhere on your computer. Many people store theirs in Documents or on their Desktop.
2. Create a tutorials folder inside of your csci344 folder.
3. Create a lectures folder inside of your csci344 folder.
4. Create a lecture04 folder inside of your lectures folder.
5. Today, you will be creating new files inside your lecture04 folder

10

Side Note: Organizing Files

When you’re done, your file structure should look something like this:

​

csci344

├── tutorials

└── lectures

└── lecture04

└── index.html <-- file you will make today

​

​

11

Create an HTML file in VS Code

1. Open VS Code
2. Click the “File” menu (top left) and select/click “Add Folder to Workspace…”
3. Then, navigate to your csci344 folder (wherever you saved it), select it, and click the “Add” button.
4. When you’re done, you should see all of the folders you just made in the left-hand panel.
5. Right-click the lecture04 folder and select “New File…”
1. Name the new file index.html (all lowercase, no spaces).

12

Outline

1. Overview of HTML, CSS, and JavaScript
2. Setting up your computer
3. Intro to HTML
4. Rules of thumb
5. Linking to resources
6. Activity

13

Intro to HTML (Hypertext Markup Language)

HTML is a way of creating web documents using “markup tags”

1. Each HTML tag has a set of rules that you have to follow to correctly use the tag.
2. Sometimes, tags need to be nested in a particular way to be understood by your browser.

How the Browser Interprets HTML

HTML File

<html lang="en">�<head>� <title>DOM Example</title>� <meta name="author" content="Sarah V.">� <link rel="stylesheet" href="main.css">�</head>��<body>� <main>� <h1>Hello!</h1>� <p>Welcome to this webpage.</p>� </main>�</body>�</html>

​

Lots of elements can go inside of the body element

16

Body

<body>

​

​

​

​

​

​

​

​

​

​

​

​

​

​

</body>

​

Image�<img src="??" />

Embedded Video

<iframe src="??"></iframe>

Hyperlink

<a href=”??”>my link</a>

Containers

<div></div>

<span></span>

<nav></nav>

<article></article>

<header></header>

<section></section>

<footer></footer>

Table

<table>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</table>

Outline

1. Overview of HTML, CSS, and JavaScript
2. Setting up your computer
3. Intro to HTML
4. Rules of thumb
5. Linking to resources
6. Activity

17

1. Avoid spaces, capital letters, and special characters when naming files

When creating new HTML files, it is important to follow the naming conventions listed below:

1. No whitespace�Rename page 1.html → page_1.html or page1.html
2. No capitalization; all lowercase�Rename Page1.html → page1.html
3. No special characters (‘,*!^%#). Dashes & underscores are OK�Rename Jenny's Page!.html → jennys_page.html In addition, all HTML files end with either the .htm or .html file extension.

​

18

2. Most tags have an opening tag and a closing tag

<h1>My Heading</h1>

But some don’t:

1. Images: <img src="dog.png" alt="Photo of a dog" />
2. Line Breaks: <br />
3. Horizontal Rules: <hr />
4. Stylesheet Links: <link rel="stylesheet" href="my_style.css" />

�You’ll eventually figure out the rules as you continue building web pages. You can also consult the HTML Reference to learn more about the rules of each individual tag.

​

19

3. The browser ignores whitespace

The browser ignores whitespace:��<h1>My Title</h1>�

...is interpreted the same way as...�

<h1> My

Title

</h1>

​

20

4. Make your code readable by indenting and using line breaks

Make your code readable by indenting and using line breaks. Please don’t do this:��<main><p>Welcome, <strong>Leonard</strong></p><ol><li>item 1</li><li>item2</li><li>item 3</li>�</ol></main>

4. Make your code readable by indenting and using line breaks

Instead, do this:��<main>� <p>� Welcome, <strong>Leonard</strong>� </p>� <ol>� <li>item 1</li>� <li>item 2</li>� <li>item 3</li>� </ol>�</main>

5. Attribute syntax

​

Many tags have required or optional attributes (e.g. a tags, img tags, input tags, etc).

Ensure that your attributes are always followed by an equals sign and values are surrounded by quotation marks.

Example: �<img src="my_image.jpg" alt="description of image for screen reader" />

​

23

6. Last in, first out (LIFO)

​

Correct��<p>Welcome, � <strong>Leonard</strong>�</p>��

Incorrect��<p>Welcome, � <strong>Leonard</p>�</strong>

24

Think boxes inside of boxes inside of boxes

7. Use comments to help you understand your code

​

​

<!-- Welcome Section -->�<section>� <p>� Welcome, <strong>Leonard</strong>� </p>� <ol>� <li>item 1</li>� <li>item 2</li>� </ol>�</section>

​

Outline

1. Overview of HTML, CSS, and JavaScript
2. Setting up your computer
3. Intro to HTML
4. Rules of thumb
5. Linking to resources
6. Activity

26

Linking to Resources

Linking is perhaps the biggest idea of the web: documents link together creating a “web” of networked resources.

Many different HTML tags use the concept of linking:

1. Stylesheet references
2. JavaScript references
3. Multimedia embedding (e.g., images, videos, audio files)
4. Hyperlinks

27

Linking to Resources

Absolute links

• When the file isn’t on your computer, you have to specify the server name, and then the path to the file.
• Example: https://i.pinimg.com/originals/ac/f4/9b/acf49bd0f42b441160a9363dce88b243.jpg

Relative links

• When the file is on your computer, you specify the file path relative to your current file.
• Example: ../images/my_puppy.jpg �Go up one directory, then into the images directory, and then access the “my_puppy.jpg” image.

Internal links

• When you want to jump to a spot on your current page.
• Example: #contacts

28

Outline

1. Overview of HTML, CSS, and JavaScript
2. Setting up your computer
3. Intro to HTML
4. Rules of thumb
5. Linking to resources
6. Activity

29

Please see the�Activity 4 Instructions

30