1 of 29

L03: Intro to HTML

CSCI 344: Advanced Web Technologies

Fall 2024

1

2 of 29

Announcements

  1. Tutorial 1 due tonight at midnight
  2. Tutorial 2 this Friday
  3. Before Friday, please:
    1. Create a GitHub account (if you haven’t already)
    2. Register as a student developer
  4. Assigned readings:
    • Intro to HTML (for this week)
  5. Please open today’s slides on your computer (you can get to them from the Moodle) – you’ll need them for today’s activity.
  6. Programming crash course + exercises added (for folks who need a programming review)

2

3 of 29

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

3

4 of 29

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

5 of 29

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

5

6 of 29

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

6

7 of 29

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)

7

8 of 29

Install and Configure Node

  • Open a command prompt
  • Check to see if Node.js is installed:
    • 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.
    • On Mac: Open your terminal and type node – it will give you an error message if it’s not installed.
  • If node is installed, make sure you’re using at least version 18. You can check by typing: node -v
  • If it’s not installed install it here: https://nodejs.org/en/download/prebuilt-installer

8

9 of 29

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 lecture03 folder inside of your lectures folder.
  5. Today, you will be creating new files inside your lecture03 folder

9

10 of 29

Side Note: Organizing Files

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

​

csci344

├── tutorials

└── lectures

└── lecture03

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

​

​

10

11 of 29

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 lecture03 folder and select “New File…”
    1. Name the new file index.html (all lowercase, no spaces).

11

12 of 29

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

12

13 of 29

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.

14 of 29

How the Browser Interprets HTML

HTML File

Invisible section

(for metadata)

<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>

​

<html>

<title>

<head>

<body>

<link>

<main>

<h1>

<p>

Hello!

Welcome to this webpage.

<meta>

Visible section

(99% of your stuff goes here)

15 of 29

Lots of elements can go inside of the body element

15

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>

16 of 29

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

16

17 of 29

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.

​

17

18 of 29

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.

​

18

19 of 29

3. The browser ignores whitespace

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

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

<h1> My

Title

</h1>

​

19

20 of 29

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>

21 of 29

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>

22 of 29

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" />

​

22

No space between attribute, equals sign, and quotations

23 of 29

6. Last in, first out (LIFO)

​

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

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

23

<p> Welcome

​

​

​

​

​

​

</p>

<strong>

Leonard

</strong>

Think boxes inside of boxes inside of boxes

24 of 29

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>

​

25 of 29

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

25

26 of 29

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

26

27 of 29

Linking to Resources

Absolute links

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

27

28 of 29

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

28

29 of 29

Please see the�Activity 2 Instructions

29