Introduction to Web Development: HTML, Images, File Paths, and GitHub

Comprehensive flashcards covering the basics of HTML5 structure, web image formats and optimization, file path navigation, and the Git publishing workflow.

HTML

HyperText Markup Language, the standard language used to create webpages by providing structure and content.

CSS

One of the three core web technologies, used for styling and determining the appearance of a webpage.

JavaScript

One of the three core web technologies, used to add interactivity and functionality to a webpage.

A declaration that tells the browser the document is an HTML5 document.

The root element that contains the entire webpage; the lang attribute specifies the page language.

An HTML element that contains information about the webpage, such as metadata, that is not displayed directly on the page.

An element that defines the character encoding used by the webpage.

An element that helps webpages display correctly on different devices by controlling the width and scale.

An element that sets the title shown in the browser tab.

An element that contains all visible webpage content such as headings, paragraphs, and images.

src

An attribute used in the tag that specifies the location of the image file.

alt

An attribute that provides alternative text for screen readers, SEO, and cases where an image fails to load.

href

The hyperlink reference attribute used in anchor tags to specify the destination URL.

Void elements

Elements such as that do not contain content and therefore do not require a closing tag.

JPEG/JPG

An image format best used for photographs and complex images, utilizing lossy compression to achieve smaller file sizes.

PNG

An image format best for graphics, logos, and transparent images, utilizing lossless compression.

GIF

An image format for simple graphics and animations, limited to a palette of $256$ colors.

WEBP

A modern image format that provides better compression than JPG and PNG, supporting both transparency and animation.

SVG

Scalable Vector Graphics, used for logos and icons because they can scale without losing quality.

Image Optimization

The three-step process of cropping, resizing, and reducing quality to improve performance and reduce page weight.

Course Image File Limit

The requirement that all images must be optimized and have a file size of less than $125\,kB$.

File path

A string that tells the computer or browser where to find a specific file.

Directory

Another term for a folder used in web development and software design.

Absolute Path

A file path that provides the complete location of a file, usually starting with a protocol like https://.

Relative Path

A file path that locates a file based on the location of the current file being edited.

./

A file path notation representing the current folder.

../

A file path notation used to move up one folder level toward the parent folder.

Commit

A snapshot of changes saved into the local Git repository.

Commit Message

A required description provided by the developer explaining what changes were made in a commit.

Push/Sync

The action of uploading committed changes from a local repository to GitHub to publish them online.

Pull

The action of downloading changes from the GitHub repository to the local computer.

GitHub Pages

A service that hosts and publishes a website directly from a GitHub repository.