5. HTML Continued

CSCI 344: Advanced Web Technologies

Spring 2025

1

Announcements

• HW1 due next Wednesday at midnight. You will be presenting during the first part of class on Friday
• Next week: HTML tutorial, CSS crash course.

2

Recap from Wednesday

Ideally, we should have all completed these tasks:

• Installed VS Code
• Installed the VS Code Plugins
• Installed Node.js
• Created your first HTML file, added stuff to it, and previewed it in the browser using live server

​

Any questions about any of these things?

3

Outline

1. Overview of some web concepts
2. Semantic Tags
3. Understanding Linking
4. Intro to git and GitHub

4

Please download today’s lecture files

5

Outline

1. Overview of some web concepts
2. Semantic Tags
3. Understanding Linking
4. Intro to git and GitHub

6

Some questions about the web...

1. Web servers’ job
2. Web browsers’ job
3. Bots – search engines, screen readers, and web crawlers

Web Servers

1. Web servers can host static files (HTML, CSS, and JavaScript files, images, videos, etc.) that are “served” as is at a particular location (URL)
2. Web servers can also generate HTML and other files by invoking functions written in other languages (e.g., Python, PHP, Java). For instance:
• User requests a resource for their favorite blogger – Waldo’s – recent posts at https://blogger.com/waldo
• Web server forwards the /waldo request to a Python function (or Java, PHP, C#, etc.)
• The Python function queries a database for Waldo’s top 5 most recent posts
• Using the data returned from the database, Python then dynamically generates an HTML file about Waldo and transmits the HTML file to the user (which the browser displays)

Web browsers

• A program that allows a user to locate, access, and display Web pages from one or more web servers
• They interact with servers to access resources (e.g., HTML, CSS, and JavaScript instructions, media files, data files)
• They can can also create, delete, and modify server resources (if you have permission)

Web Browsers (Contd.)

• Browsers interpret instructions (that you will write) and render (i.e. “draw”) text, images, and graphics to the screen.
• They respond to user events via default behaviors or via custom behaviors that are controlled by JavaScript
• Write local data (cookies, local storage, password storage, history to your hard drive)

10

Bots

When building web applications, you also have to think about how easy it is for a machine to consume your web content.

• What are some examples of bots that might interact with your web content?

11

Screen Reader considerations

• A screen reader reads the HTML markup (or underlying code that controls a user interface) and “reads” the content aloud.
• Make your web page screen-reader friendly by using semantic tags (in a few slides) and by using HTML attributes that describe visual elements.
• Example: by wrapping a section in a <nav></nav> tag, you can teach your screen reader that “this whole section is for the navigation.”
• If your user doesn’t want the reader to read every link in the aloud, they can skip to the next section.
• If you don’t thoughtfully use grouping tags, your user is stuck with a very annoying user experience.
• Try it:
• Mac: Command + F5
• Windows: Windows Logo + Control + Enter

12

Web Crawler Considerations (SEO)

“Search Engine Optimization” (SEO) refers to the tools and techniques you use to ensure that you are found by search engines (ideally at the top of search results). To optimize your page for bots (like search engines), make sure you:

• Consider how your user will search for your content (what keywords)?
• Put descriptive text about your website in the title, H1 tags, etc. for search engines
• Use semantic tags to markup specific parts of your page
• Use valid HTML
• Specify in the robots.txt what kinds of crawlers you are allowing / disallowing.

13

Outline

1. Overview of some web concepts
2. Semantic Tags
3. Understanding Linking
4. Intro to git and GitHub

14

Semantic Tags and Search Engines / Screen Readers

1. Semantic tags enable your web crawler / screen reader to understand your website: <h1>, <title>, <header>, <main>, <footer>, <article>, <aside>, etc.
2. Help the crawler / reader to “learn” the structure and organization of your site:�<nav>, <ul>, <li>, <a>
3. This is not only easier for machines: good organization benefits everyone! People, other programmers, etc.

15

https://www.bbc.com/bitesize/articles/ztbjq6f

What are some examples of semantic tags?

• Semantic tags were drafted in 2008, released as an official standard in 2014 via the HTML5 release
• Before: all content was grouped / styled using the generic <div> tag
• After: tags like <section>, <nav>, <article>, <aside>, <header>, <footer> and <main> make structuring content more clear / readable.
• Helps search engines and screen readers interpret websites more easily
• Demo on course website

16

A Semantic Web Vision

Tim Berners-Lee originally expressed his vision of the Semantic Web as follows:

“I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers. A "Semantic Web", which makes this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines. The intelligent agents people have touted for ages will finally materialize.

17

Outline

1. Overview of some web concepts
2. Semantic Tags
3. Understanding Linking
4. Intro to git and GitHub

18

Linking to Resources

Many tags use the concept of linking, including:

• CSS references:
• <link href="???" />
• Multimedia embedding:
• <img src="???" />
• <iframe src="???"></iframe>
• Hyperlinks:
• <a href="???"></a>

19

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.

20

Scenario:

• You are editing gallery.html.
• Add a hyperlink that points to contact.html

​

Answer:

​

my_website

├── files

│ └── gallery.html

├── home

│ ├── contact.html

│ ├── index.html

│ └── styles

│ ├── dark

│ │ └── new.css

│ └── my_style.css

├── images

│ ├── cat.jpg

│ └── dog.jpg

└── test.html

​

21

Scenario:

• You are editing gallery.html.
• Add an image that points to dog.jpg

​

Answer:

​

​

​

my_website

├── files

│ └── gallery.html

├── home

│ ├── contact.html

│ ├── index.html

│ └── styles

│ ├── dark

│ │ └── new.css

│ └── my_style.css

├── images

│ ├── cat.jpg

│ └── dog.jpg

└── test.html

​

22

Scenario:

• You are editing index.html.
• Add a hyperlink link that points to test.html

​

Answer:

​

​

​

my_website

├── files

│ └── gallery.html

├── home

│ ├── contact.html

│ ├── index.html

│ └── styles

│ ├── dark

│ │ └── new.css

│ └── my_style.css

├── images

│ ├── cat.jpg

│ └── dog.jpg

└── test.html

​

23

Scenario:

• You are editing gallery.html.
• Add a stylesheet link that points to new.css

​

Answer:

​

​

my_website

├── files

│ └── gallery.html

├── home

│ ├── contact.html

│ ├── index.html

│ └── styles

│ ├── dark

│ │ └── new.css

│ └── my_style.css

├── images

│ ├── cat.jpg

│ └── dog.jpg

└── test.html

​

24

Scenario:

• You are editing test.html.
• Add a stylesheet link that points to gallery.html

​

Answer:

???

​

​

my_website

├── files

│ └── gallery.html

├── home

│ ├── contact.html

│ ├── index.html

│ └── styles

│ ├── dark

│ │ └── new.css

│ └── my_style.css

├── images

│ ├── cat.jpg

│ └── dog.jpg

└── test.html

​

25

Outline

1. Overview of some web concepts
2. Semantic Tags
3. Understanding Linking
4. Intro to git and GitHub

26

Outline

1. Overview of some web concepts
2. Semantic Tags
3. Understanding Linking
4. Intro to git and GitHub

27

Git v. GitHub

• What is git?
• Git is a free and open source version control system
• Why is version control important?
• Allows you to track code changes (can help you version your code, revert changes, know who did what, and identify when bugs were introduced)
• What is GitHub?
• GitHub is a company that provides cloud-based hosting services for managing your git repositories.
• What are some of the services GitHub provides?
• Issue trackers, third-party integrations (e.g., CI/CD tools), website hosting, branch protection, tools for managing teams and organizations, tools / notifications to identify security issues (i.e., problematic node / python dependencies, accidentally checking in passwords and API keys, and more)

28

Simple Git Workflow: Solo Project

1. Initialize a git repository on your local computer
2. Edit / update / delete some files
3. Stage your changes to git
4. Commit your changes to git
5. Add a reference to a remote repository (so that your local computer can sync with another computer – like GitHub)
6. Push (upload) your changes to a remote repository.

29

Simple Git Workflow: Solo Project Commands

30

A few tips…

31

1. Don’t forget to add a commit message

If you issue the commit command without a commit message, VS code will hang. You’ll have to restart VS Code and try again with a commit message.

32

2. Don’t check in API keys, passwords, or dependencies

Use the .gitignore file to exclude files you don’t want under version control.

Files you typically want to exclude from version control:

• Third party modules / packages
• Protected information (e.g., passwords, API keys, etc.),
• Personal config files (e.g., .vscode settings file)
• System files (e.g., .DS_Store, etc.) that aren’t part of the shared codebase.
• Compiled files (e.g., *.pyc, *.class files)
• Virtual environment files

33

Activity 6: Configure git / GitHub

What you don’t finish today you can finish next Monday

34