Section 1

Preview this deck

Single or double quotes on attributes?

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

0

All-time users

0

Favorites

0

Last updated

6 years ago

Date created

Mar 14, 2020

Cards (66)

Section 1

(50 cards)

Single or double quotes on attributes?

Front

Can use either. If the values contains a single quote, use double quotes around it or vice versa.

Back

Italic text element

Front

<i>Signature</i>. Italic without any extra importance.

Back

HTML tags

Front

<tagname>contenet goes here.</tagname>. Element name surrounded by angle brackets. Start tag, then content then end tag. End tag has forward slash at the beginning of it.

Back

disabled attribute

Front

<button disabled>Can't Click Me</button>. Used on input elements in order to disable them.

Back

Root Element of HTML document

Front

<html></html>

Back

HTML element that contains visible page content

Front

<body></body>

Back

Strong text element

Front

<strong>Very important</strong> Bold and extra strong importance.

Back

Smaller text element

Front

<h2> HTML <small>Small</small> Formatting</h2>

Back

Highlighted or marked text element

Front

<mark>This is yellow by default</mark>

Back

Short quotation element

Front

<q>This is a quote</q>. Browsers usually insert quotation marks around it.

Back

HTML paragraph element

Front

<p></p>. Browsers add a margin before and after a paragraph.

Back

Width and height attributes

Front

<img src="test.jpg" width="132" height="144"> The numbers in the value specify number of pixels.

Back

Font style property

Front

style="font-family:verdana;"

Back

address attribute of a link element

Front

<a href="www.espn.com">ESPN</a>

Back

Text color style property

Front

style="color:blue;"

Back

Title element of HTML document

Front

<title></title>. Inside the <head> element.

Back

Bold text element

Front

<b>Bold</b>. No extra importance

Back

HTML line break element

Front

<br/>

Back

Address element

Front

<address>Line 1<br/>Line 2</br></address> Make's it italic and adds maybe a line break before and after but doesn't really do anything but let browser/screen reader know that it's an address

Back

HTML unordered list element

Front

<ul> <li>Item 1</li> </ul>

Back

Language attribute

Front

<html lang="en-US">. The language of the document

Back

Subscripted text element

Front

<sub>This is lower</sub>

Back

Background color style property

Front

style="background-color:powderblue;"

Back

HTML heading elements

Front

<h1> ... <h6>. <h1> being the biggest/most important down to <h6>. Used by search engines so use appropriately. Browsers add a margin before and after a heading.

Back

Alternative text attribute

Front

<img src="test.jpg" alt="test">. Text used to describe image when image in the source attribute cannot be found/displayed.

Back

Abbreviation element

Front

<abbr title="World Health Organization">WHO</abbr>. Doesn't really do anything. probably best used with title but it tells browsers or screen read that this is an abbreviation instead of just a word.

Back

Text alignment style property

Front

style="text-align:center;"

Back

Blockquote element

Front

<blockquote cite="http://www.whocares.com">Long quote</blockquote>. Browsers usually indent block quotes.

Back

Style attribute

Front

style="property:value;property:value2;". For example style="color:red;" The property is a CSS property and the value is a CSS value.

Back

Preformatted text element

Front

<pre>Text with breaks and lots of spaces</pre>. Preserves link breaks and extra spaces between words. Usually uses a Courier font.

Back

Image source attribute

Front

<img src="test.jpg">

Back

HTML ordered list element

Front

<ol> <li>Item 1</li> </ol>

Back

ID attribute

Front

id="p1". Specified a unique id for an element.

Back

HTML list item element

Front

<li>Item 1</li> <li>Item 2</li>

Back

Superscripted text element

Front

<sup>This is squared to the power of 2</sup>

Back

HTML image element

Front

<img src="w3schools.jpg" alt="Text if no image" width="104" height="142">

Back

Emphasized text element

Front

<em>This is emphasized</em> Italic and it adds extra semantic importance.

Back

Horizontal rule element

Front

<hr/>. Adds in a break, or a line.

Back

Cite element

Front

<cite>The Scream</cite> Makes it italic but really doesn't do anything other than let browser/screen readers know you are citing the title of some work.

Back

Text size style property

Front

style="font-size:300%;" style="font-size:50px;"

Back

Basic HTML page structure

Front

<!DOCTYPE> <html> <head> <title>Page Title</title> </head> <body> <h1>The is a heading</h1> <p>This is a paragraph</p> </body> </html>

Back

HTML5 declaration

Front

<!DOCTYPE html>

Back

Basic HTML attribute

Front

name="value". Inside the start tag.

Back

Meta data element of HTML document

Front

<head></head>. This has nothing to do with HTML headings. Defines title, character set, styles, links, scripts and other information.

Back

Title attribute

Front

<p title="I'm a tool tip">The is a paragraph</p>. Create a tooltip when hovering over an element.

Back

HTML link/anchor element

Front

<a href="https://www.w3schools.com">This is a link.</a>

Back

Meta element

Front

<meta charset="UTF-8"> <meta name="Keywords" content="HTML,CSS"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="Description" content="Examples of HTML and CSS">

Back

Inserted text element

Front

<ins>I was inserted</ins>. Will be underlined.

Back

Deleted or strike through text element

Front

<del>Line through me</del>

Back

HTML button element

Front

<button>Click me</button>

Back

Section 2

(16 cards)

Internal CSS

Front

<style> element inside <head> element. <head> <style> body {background-color: powderblue;} </style> </head>

Back

Picture element

Front

<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(mind-width: 465px)" srcset="img_white_flower.jpb"> <img src="img_orange_flowers.jpb" alt="Flowers" style="width:auto;">

Back

Style element

Front

<style></style> Defines style information.

Back

Image map circle area

Front

<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">

Back

Inline CSS

Front

using the style attribute on an element. <p style="color:red;">This is a red paragraph</p>

Back

External CSS

Front

An external style sheet is used to define the HTML pages. Add a link in the <head> element <head> <link rel="stylesheet" href="styles.css"> </head>

Back

HTML comment

Front

<!-- Comment here -->

Back

Bi-directional override element

Front

<bdo dir="rtl">Right to left</bdo>

Back

HTML File Paths

Front

picture.jpg = same as current page images/picture.jpg = images folder located at current page /images/picture.jpg = at the root ../pictures = one level up

Back

HTML Colors

Front

style="background-color:rbg(255,99,71);" style="background-color:#ff6347;" style="background-color:hsl(9,100%,64%);" style="background-color:rbg(255,99,71,0.5);" a of .1 would be barely visalbe, where 1 is just normal. HSL = hue, saturation, lightness

Back

Link element

Front

<link rel="" href="">. Defines a link between the document and an external source.

Back

Image map example

Front

<img src="workplace.jpb" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect..........> </map>

Back

Target attribute

Front

target="_blank" New window or tab target="_self" Same window or tab as clicker (default) target="_parent" Opens in parent frame target="_top" Opens in full body of window framename opens in the named frame.

Back

Border style property

Front

style="border:2px solid red;"

Back

Create a link bookmark

Front

<a href="#C4">Jump to Chapter 4</a> <h2 id="C4>Chapter 4</h2>

Back

Image map rectangle area

Front

<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

Back