Glossary of Terms

attribute: Refers to HTML attributes, which is a name/value pair that goes inside of an HTML tag. It provides additional data or functionality related to an HTML tag. Many HTML tags have attributes specific to the tag type that help are only valid for that type, such as href for anchor tags or src for image tags. IDs and classes are also attributes.

bracket - left bracket, right bracket, curly bracket: Left and right bracket refers to the "<" and ">" characters respectively. They are also called angle brackets. We will be using them primarily in HTML to enclose our tags. Curly bracket refers to the "{ }" characters which we will use in CSS and Javascript syntax.

branch: A Git term, refers to a separate “folder” or “section” of the main branch of code that can be created, meant to make updates without interfering with the main code

commit: A Git term, When you “save” your code to your repo (where the code lives) on your computer, you are committing that code. If a Git repo is not set up, you're just saving code, not committing it.

class: As used in CSS, a class is used to define a specific style you want to apply to elements. In css, you designate a class with a period followed by the styles you want to apply to that class within curly brackets, like this .my-classs-name { styles go here }. To then attach that class to an HTML element, you would do this <p class="my-class-name">. Note that the HTML does not include the period, just the class name. The difference between a class and an ID is that a class can be used to style multiple elements, while an ID should be unique and only used once. IDs are often used for forms, Javascript, and linking, so for styling purposes it's best to use a class.

clone: A Git term, when you make an exact copy of a repo for collaborating you can clone it.

closing the tag: You might hear me say "make sure to close that tag". This means that in HTML, you open a tag by writing that HTML element, such as <p> You can then proceed to put content in that tag, but you need to remember to close it by adding </p> to the other side. Some HTML tags are self closing, meaning they cannot have content inside of them, and so they don't need a closing tag. Examples of this are the <img> and <input> tags. (Remember that while these tags don't have content inside of them, they do have attributes such as src and type that define their qualities.)

CSS: Stands for "cascading stylesheets", this is a language made for styling a webpage. CSS is a rule based language, meaning you write rules to specify elements and then what styles you want applied to those elements.

css selectors: Part of the CSS rule that designates what part of the HTML document you would like to style. Looking at this code: p { color: green; font-size: 16px; } p is the selector. In this case the CSS would be applying to all paragraph tags. You can select in a number of different ways, such as by class, ID, child, attributes, states, and more.

css properties: A style characteristic defined in the CSS rule that accepts a value. Looking at this code: p { color: green; font-size: 16px; } color and font-size are properties. What comes after the colon is their values. Together they are a property/value pair.

file path: A file path specifies the location of a file in a computer's file structure. HTML elements like anchor tags (links), img tags, and stylesheet references all need file paths to tell the browser the source or destination of the content. You should define a file path relative to where it is being requested from. Reference this slide for more background.

fork: A Git term, when you make a copy of a repo that you can make your own changes to independent of the original, that is a fork.

href: "hyperlink reference" or pronounced h-ref, it is an attribute of an anchor tag or link tag that specifies the file path to reference.

HTML: Stands for Hypertext Markup Language. It defines the structure of a webpage through HTML elements.

HTML elements and tags: HTML elements tell the browser how to display content. They say "this is a paragraph, this is an image" etc. An HTML element consists of a starting tag (the name of the html element in brackets), content, and a closing tag. Some elements are self closing and don't need a closing tag but most do. HTML tags have attributes.

id: An attribute used to specify a unique ID for an html element. Every ID on a page should be unique. An ID can used to target a specific HTML element through CSS for styling or Javascript to perform a specific action regarding that element. In CSS, an ID can be referenced with the "#" symbol.

index.html: index.html is the main page of a website. If someone goes to a website without specifying a file path beyond the domain, index.html is the page that will be brought up. When coding website we usually start with index.html as the first or home page.

Javascript: Often abbreviated JS, Javascript is a very popular programming language used across the web. 98.7% of websites use javascript. With javascript, website are able to become interactive and dynamic, displaying and updating content based on user interactions.

Java: Though it sounds very similar to Javascript, Java is a completely different programming language. Java is used more for applications and software rather than web development like Javascript is. We won't be touching on Java in this class.

merge: A Git term, when you combine a branch with another branch, or code from two sources, you are merging them.

Name / value pair: Sometimes called key / value or property / value depending on what you are working with, it simply refers to the combination two related piece of data in which one equals the other. Examples of this in the work we'll be doing include html attributes and their values, such as "type=textbox", CSS property / values like color:blue or Javascript variables such as x = 5;

Nesting: In HTML, elements may contain other elements, and this is called nesting. To do it properly, the entire element (the child) must be within the start and end tags of the containing element (the parent).

push/pull: Git terms. When you "push" your code, you are sending committed code to a remote repo. When you "pull" you are requesting are updates from that remote repository to be merged into your copy of the repo.

rel: Stands for relationship when used as an attribute for the link html element. Has values like "stylesheet" or "icon" referencing the relationship of the linked reference.

repository or repo: A git term. A repository is essentially where your code lives and where changes to your code are tracked. You have to initialize a repository to begin tracking changes. "Repo" is a nickname for repository.

stylesheet: Referring to CSS, this is the file type for css that sets the styling rules for the HTML document.

syntax: The rules that dictate the structure, conventions, punctuation, and words used for programming languages. HTML, CSS, and JS each have different syntaxes you will have to learn. Syntax keeps code neat and readable. Sometimes code will not work if the syntax is not right.

svg: Stands for scalable vector graphic. It is an image type that is comprised of code rather than pixels, and is therefore infinitely scalable without losing quality. CSS and JS can be used to manipulate SVGs as well, making it the preferred format for icons and other graphics used online.

semantic: Referring to semantic HTML. In HTML 5 (the current version of HTML) semantic elements were introduced. These are HTML elements that give meaning to the content based on their name. For example <header> , <footer> , and <nav> are semantic elements that give you an idea of what type of content they house.