HTML and CSS terms and definitions

What do we use in defining the <img> element?

< > (angle brackets) = (assignment operator) img (the element name) " " (quotes) alt (the alternate attribute) src (the source attribute ex: <img src="Image Address" alt="Descriptive text of image">

Which is the proper syntax for leaving comments in HTML?

<!-- --> The space in between is where you include your comment(s)

Which of these is an entire HTML element?

<h1>Jesus Loves you!</h1>

<div> tag

A <div> is a generic container. It defines a division or a section which can then be styled with CSS or manipulated with JavaScript. Can help us group or separate out our data — any sort of content can be put inside a <div>.

CSS selectors

A CSS selector is what selects the HTML element(s) you want to style. It's also the first part of a CSS rule. Writing "h1" before you use your opening curly brace means that you want whatever code follows to apply to the h1 HTML element and to style it accordingly.

URL

A URL is just the address of web page. Just like you need an address to find a physical location in the world, you'll need an address to access a digital location on the internet.

Unicode

A computing standard for consistently encoding symbols (used to display any symbol or character). It's a universal standard that assigns a code to every character and symbol in every language in the world. You can take this unicode, drop it into your HTML, and your browser will render the image. Pretty useful.

Pixels

A pixel is the smallest unit of a digital image that can be displayed, represented by a dot or square on a monitor/screen. We combine a bunch of pixels to form a complete image, video, text — really any visible thing on a computer display.

HTML attribute

An attribute helps describe an element: provides additional information about it. They're like special words that control the element's behavior. You'll always specify your attributes in your opening tag. Attributes usually come in name/value pairs like: name="value"

Why is syntax important when writing code?

Because without proper syntax, the computer will not know how to interpret your code.

Curly braces { }

Braces mark the beginning and end of the CSS code that's specifying your style. You need both an opening curly brace and a closing curly brace to write valid CSS (remember — syntax matters!)

CSS declarations

In CSS, a property and value pair is called a declaration. In the example "color: red;" the property is "color" and the value is "red." The property and value are separated by a colon, and each declaration is closed by a semi-colon.

display: block

In CSS, this means that the element is displayed as a block, starting on a new line and taking up the whole line (stretching as far to the left and right as it can). Block-level elements span the entire width of the page unless another width is specified; this means that a block will have some whitespace above and below it and won't allow other HTML elements next to it (except when ordered otherwise — by adding a float declaration to another element, for instance). Some examples of block-level elements include <div>, <p>, <form>, <h1> (or any header), <footer>, and <section>.

display: inline

In CSS, this means the element can be displayed with floating content on its left and right side (a block element fills the entire line — nothing can be displayed on its left or right). Inline elements don't start on a new line and only take up as much width as necessary. They don't break the flow of content — multiple inline elements can exist on the same line if there's space. Some examples of inline elements include <span>, <a>, and <img>.

Deploy

In programming, deploy means moving a system from the testing phase to the production phase. In development, "production" means — real people are using it to do real work. So deploying a website means doing everything you need to do to make your website available for use — getting it up and running. You know it's been deployed when it's been delivered from developers to users.

<section> vs. <div>

In terms of its difference from a <div> tag, <section> means that the content inside is grouped (i.e. relates to a single theme), and would appear as an entry in an outline of the page. <div>, on the other hand, does not convey any meaning in itself.

Target attribute

It will look something like this: <a target="_blank"> (this particular value will open the link in a new window or tab). The <a> target attribute specifies WHERE to open the link. Depending on what you tell it to do, it can open your link in the same window, a new window, a new tab, etc.

JavaScript (JS)

JavaScript is a programming language used in web development that helps make web pages interactive. Where HTML and CSS are languages that give a web page structure and style, JavaScript gives a web page engaging and dynamic interactive elements. Web pages would be pretty boring if they just sat there displaying static information all the time.

CSS comment (/* */)

Just like comments in HTML, the browser will not display any comments you leave in your CSS code. In CSS, comments start with /* and end with */.

src (source)

The src attribute in the <img> element tells us where the image is coming from. Remember, web pages don't literally contain the images, they link to them. The src attribute specifies the path to the image you're trying to embed (points you to the external file or resource).

CSS values

The value is what the chosen CSS property will be changed to. So if the value of a property/value pair is "red," then it would look like this: "color: red;". It would change whatever HTML element you selected (with your selector) to the color red. Every time you use a property (like "color"), you must give it a value (in this case "red") — and certain properties can only accept certain values.

CSS values

The value is what the chosen CSS property will be changed to. So if the value of a property/value pair is "red," then it would look like this: "color: red;". It would change whatever HTML element you selected (with your selector) to the color red. Every time you use a property (like "color"), you must give it a value (in this case "red") — and certain properties can only accept certain values.

<img> tag

This is the tag you use to add an image to your HTML page The <img> tag has two required attributes: 1). src — this specifies the path to the image 2). alt — this specifies "alternate" text that describes the image, in case the image can't be displayed for some reason. Image tags <img> are SELF-CLOSING

Assignment operator (=) You may hear developers refer to the equals sign as an "assignment operator."

This just means that they're using the equals sign to assign a value to something — like an attribute. So by typing, <img src="where the image is"...> you're simply assigning the value (the link or path to your image) of the image location, to the src attribute.

Is the following statement true or false? You can use the <p> (paragraph) tag to set apart a chunk of text in HTML

True The p stands for paragraph. Paragraphs are usually blocks of text, but they can be any group of related content, like images or form fields. When you surround a chunk of content with <p> tags, your browser will automatically add a blank line before and after it to give it a little space from the other stuff — since you said it was its own paragraph.

In HTML, what is nesting?

When an element is contained within another element. Nested elements are referred to as "children" and their top-level elements as "parents."

Cloud-hosted

When people say "the cloud" they really just mean "the internet." When you hear about something being hosted in the cloud, that means the data or program they're referring to is stored on internet servers rather than your personal computer's hard drive (a server is just a computer that serves information to other computers)

Typography

When we talk about typography in CSS, we're talking about how your text looks on screen. Typography encompasses a lot — and not just which font you use or whether it's italic or not.

alt

When you embed an image in your web page, you'll use this attribute to include alternate text for when the image can't be displayed (due to a slow connection or an error in the src attribute) or for people who may not be able to see it (the visually impaired use screen readers).

Angle brackets

You've noticed that HTML contains little pieces enclosed in angle brackets (< >) These angle-bracket-enclosed pieces (called tags) aren't visible to the user, but rather convey to the browser information about the page's structure. These brackets let the browser know where our tags start, and where they end.

<h1> tag — This is the tag for the top-level heading in HTML. Guess what the 2nd level heading is?

Yup, <h2>. And header 3 would be <h3>, and so on through <h6>. <h1> defines the most important heading — the main heading/subject for the whole page — and <h6> would define the least important heading. You should only use one <h1> per page.

Browser

a browser is really just a software application that we use to access the internet (someone just like you has to develop and maintain them).

What is an "href" (hypertag reference)?

an attribute of the <a> (anchor) tag; it is what specifies your links destination. The most important attribute of the <a> element is the href attribute, that's what indicates the link's destination. (Without an href attribute, the <a> tag is just a placeholder for a hyperlink.)

HTML - HTML stands for "hypertext markup language." So what's hypertext? And what's a markup language?

the fundamental building block of every web page and web application on the internet. Hypertext is the text displayed on a computer that links you to somewhere else when you click on it ("link" is just short for hyperlink). A "markup language" is a language you use to annotate a document so it displays a certain way on your computer. Unlike a "programming" language, which is used to execute tasks, a markup language is simply designed to format or graphically display your content. Your web browser reads the HTML on a web page to know what information it's supposed to display and how.

Syntax

the rules we follow to accurately express ourselves in a language. Computer languages require precisely accurate syntax in order to understand. If we don't write our code according to the rules, the computer or browser won't know how to interpret it.

CSS code/rules

CSS is a different computer language than HTML, so its look and syntax are different. A segment of CSS code is referred to as a CSS rule (similar to how a piece of HTML code is called an HTML element). A CSS rule consists of a selector, and a declaration block. The selector (like "h1") points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons (see image below). Each declaration includes a CSS property and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. As you're writing a CSS rule, remember to frame it using three things: What HTML element(s) the code applies to — Also known as the selector. This will be the first part your CSS code. Curly braces { } — The opening curly brace comes right after you declare the HTML element you want this CSS to apply to. The stuff in these curly braces specifies the style you want that HTML element to have. The code inside the curly braces — which consists of properties and values (each property/value pair makes up a declaration). example: h1 { Properties: values; }

Closing tag (or "end tag")

Closing tags tell the browser that this particular piece of HTML content, this element, is done. You can tell most closing tags by the backslash </tagname>. Not all tags have closing tags that look like this, and some are self-closing, but this is by far the most common way to encounter them an HTML tag (either opening or closing) is used to mark the start or end of an element..

What does the <a> (anchor) tag do?

Defines a hyperlink (used to link from one page to another) Users click on the anchor text to reach the link target

<section> tag — Guess what the <section> tag does?

Defines sections! Don't you love that? The content on your web page may contain chapters, headers, footers, or other sections that could benefit from a more organized <section> tag.

HTML element

Elements are the building blocks of HTML. An HTML element is simply a start tag, whatever content you have, and an end tag. Everything that falls between the start tag and end tag (including the start tag and end tag) is the element. an HTML element is the collection of start tag, its attributes, an end tag, and everything in between.

Hypertext

Hypertext is the text displayed on a computer that links you to somewhere else when you click on it. It's the text that's been turned into a link.

margin: auto

In CSS, "margin: auto" instructs the browser to adjust the horizontal margin automatically based on the viewable area (remember, margins are used to create space around elements). This is often used to center an element.

Normal flow

Normal flow (or flow layout) is simply the standard way in which elements are positioned on a web browser (before you've made changes to the layout with CSS). Generally, the elements are positioned from top to bottom and left to right. The elements in CSS are either block-level elements or inline elements. In the normal flow, block-level elements stack on top of one another and inline elements fill the available space (multiple inline elements can occupy the same line, but each block-level element takes up its own line). Objects in the normal flow influence the position of the surrounding content (sibling elements).

Path

Path just means 'where a computer searches for a file or a program.' A "file path" for example could describe the location of a file in a web site's folder structure. So when we talk about a "source path" for our src attribute in the <img> element, we're just talking about the "path" the browser takes to get us to the source (the external link).

Semantic HTML/tags

Semantic HTML just means HTML whose function or content is obvious by its name. The term "semantic" refers to how we draw meaning from words, so "semantic elements" are elements that clearly describe their meaning to the developer and the browser. Semantic tags aid with accessibility and readability.

Serifs

Serifs are details or small decorative flourishes on the ends of certain strokes that make up letters and symbols.

Code - What even is code?

Simply put, code is program instructions that tell a computer what to do. Just as we've developed a "code" for understanding each other in life (the English language in this particular case), we've also developed code to communicate with computers. Once you learn to the speak the language, you can tell each other almost anything!

CSS margin

The "white space" around the outside of the box. Margins are used to create space around elements. To help keep them straight, remember that the border is what separates the padding (on the inside of the box) from the margin (which is the space around the outside of the box). You can add margin to specific sides (margin-left, margin-bottom, etc.) or around all four sides with the shorthand property "margin."

DRY principle

The DRY principle ("don't repeat yourself") is a development concept aimed at reducing repetition and redundancy in coding patterns.

CSS display property (display type)

The display property sets the element's display type. That is, it defines how the components (like divs, hyperlinks, headings, etc.) are arranged on the web page. Every HTML element has a default display value depending on what type of element it is (for example: inline).

Font-family

The font-family property in CSS specifies the font for an element. You can add multiple font name values for each font-family property — alternatives the browser can use if it doesn't support your first choice.

CSS properties

determine which aspect of the selector you want to change (visually). Properties are defined within selectors (see image below). In the video, we saw an example of this property/value pair: "color: red;". The word "color" is the property. It's the piece of the declaration that determines which aspect of the selector will be changed visually. You can choose to have as many properties as you like.

Opening tag — (or "start tag")

goes at the beginning of your HTML element. It's what get's your element started. The basic structure of an HTML document includes tags, which surround content and apply meaning to it. The opening tag is what kicks things off and tells the browser that everything between this opening point, and the </html> closing tag, is an HTML element to interpret. an HTML tag (either opening or closing) is used to mark the start or end of an element.

CSS - (stands for Cascading Style Sheets)

is a computer language for laying out and structuring web pages. CSS is the language that tells the computer how to present all that HTML (including colors, layouts, fonts, and instructions for display on different devices). It gives the HTML some personality. Like HTML and JavaScript, it's a cornerstone of the internet.