-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathNotes.html
117 lines (116 loc) · 8.11 KB
/
Notes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Notes on CodeAcademy</title>
<link href="/NotesPretty.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Headings serve to introduce and title text </h1>
<p>Paragraphs denote the paragraph style and should be kept readable</p>
<p>Unordered lists:</p>
<ul>
<li>Make it easy to separate out information</li>
<li>Have neat bullet points</li>
<li>Make things tidy and awesome</li>
</ul>
<p>Ordered lists:</p>
<ol>
<li>Give you pretty numbers</li>
<li>Make it easy to organize thoughts in numbered form</li>
<li>Did we mention the pretty numbers?</li>
</ol>
<a href = "https://www.wikipedia.org/" target = "blank">
This is a link to Wikipedia. Yay!</a>
<p>The target = "blank" function tells the browser to open the link in a new tab.</p>
<p>To add an image, img src is how it's done. Give the url of the image, then close it with a slash and we're good to go!</p>
<img src = "https://upload.wikimedia.org/wikipedia/commons/3/3a/Madeleine_Paris.jpg" class="img" />
<p> The "alt" attribute gives a description of the image in case it doesn't load or for visually impaired people. If the image isn't pertinent to the topic at hand tho, alt isn't necessary. </p>
<img src = "https://upload.wikimedia.org/wikipedia/commons/1/12/%27Ruins%27_of_Herstmonceux_Castle%2C_Sussex_%28late_1800s%3F%29_%28265440044%29.jpg" alt = "A pretty old castle" class = "img" />
<p> The image can also be a link! Just wrap it in a a href.</p>
<a href = "https://commons.wikimedia.org/wiki/Aviation_accident#Military">
<img src = "https://media.defense.gov/2004/Oct/08/2000588115/-1/-1/0/040929-F-0684C-109.JPG" alt = "A tornado caused two C-130 Hercules to collide" class = "img"/></a>
<p> Adding in br / will create a break in the text/formatting <br /> like this!</p>
<!-- this makes a comment! woo!-->
<h1 id = "cheerfulmuse">CheerfulMuse's Coding Corner</h1>
<p>This is where we write things and learn! Huzzahhhh!</p>
<h1 class= "pandawhimsy">Pandas and How Weird They Are</h1>
<p>Pandas are pretty darn weird</p>
<div class ="boxeseverywhere">
<h1>We Puts Things in Boxes</h1>
<p>Things we put in boxes:</p>
<ul>
<li>Cats</li>
<li>Secrets</li>
<li>Thumbtacks</li>
<li>Ungents</li>
</ul>
</div>
<h2 id = "cheerfulmuse">Borders are neat!</h2>
<p>Border Styles have the following types:</p>
<ul>
<li>solid - border is a solid line.</li>
<li>dashed - border is a series of lines or dashes.</li>
<li>dotted - border is a series of square dots.</li>
<li>double - border is two solid black lines.</li>
<li>groove - border is a groove (or carving).</li>
<li>inset - border appears to cut into the screen.</li>
<li>outset - border appears to pop out of the screen.</li>
<li>ridge - border appears as a picture frame.</li>
<li>hidden or none - no border.</li>
</ul>
<p> Border widths (in addition to being denoted in px) can also be thin, medium, thick, but is usually in px. They can also be modified to have different widths (in px) around the box (clockwise: top, right, bottom, left). Finally, they can also use border-top-width/border-right-width/border-bottom-width/border-left-width to modify the borders more specifically.</p>
<p> When doing padding, it can either be done equally on all sides (eg padding: 30px), or with different values around (clockwise from the top), or top/bottom and left/right (eg padding: 30px 10px). You can also specify with: padding-top, padding-right, padding-bottom, padding-left. </p>
<p> Margins dictate how much space is on the outside of the box (preventing other elements from coming within a certain amount of that element). The same conventions apply to margins as padding and borders. Margins also have an "auto" property that centers the object on the page and relative to its container. The width must be dictated for this element, otherwise it'll just take up the entire page/container.</p>
<p> In order to set the default css to "blank" and override the default/user agent stylesheets, use this code: * {
margin: 0;
padding: 0;
}</p>
<p> In-line and block-elements behave differently, in that line-elements behave link links and block-elements to behave like divs. From the course: Inline elements are elements that display inline with text, without disrupting the flow of the text (like links). Block-level elements are those elements that use an entire line of space in a web page and disrupt the natural flow of text. Most of the common HTML elements are block-level elements (headings, paragraphs, divs, and more).</p>
<p> The display property can take on one of four values:</p>
<ul>
<li> inline - causes block-level elements (like a div) to behave like an inline element (like a link).</li>
<li> block - causes inline elements (like a link) to behave like a block element (like a div).</li>
<li> inline-block - causes block-level elements to behave like an inline element, but retain the features of a block-level element.</li>
<li>none - removes an element from view. The rest of the web page will act as if the element does not exist.</li>
</ul>
<p> Hiding elements is fun and can be done using the "visibility" property. The values for this can be either hidden or visible.</p>
<p> Box positioning can be done with position: static, relative, absolute, or fixed. </p>
<p>Position:relative can make it so that it can be positioned relative to the main box (with top, right, bottom, left, etc with px, em, or percentages as position measurements). Relative must be used to make this work though.</p>
<p>Position: absolute will make the other elements on the page ignore this element and move as if it's not there.</p>
<p>Position: fixed will make the object stick to where it is.</p>
<p>Z-index makes it so that the elements interact with each other buy being on top or on bottom of each other. The measurements are in integers.</p>
<p>Float is either right or left and makes the element either... right or left. Surprising. These elements must have a width set. This also works for images.</p>
<p>Clear sets up how objects should interact with each other on the page and what they do when they collide. The properties are left, right, both, and none.</p>
<p>When doing background images, they can be set to repeat a certain way. Repeat is the default, it will repeat on both the x and y axis. Repeat-x and repeat-y do that, but only on the specified axis. No-repeat does what it says on the tin.</p>
<p>When images don't repeat, they can be set up to be aligned on a 3x3 grid. The grid positions are:
<ul>
<li>left top - top left corner of the element's box.</li>
<li>center top - top center of the element's box.</li>
<li>right top - top right corner of the element's box.</li>
<li>left center - left column, center row.</li>
<li>center center - the center of the element's box.</li>
<li>right center - right column, center row.</li>
<li>left bottom - bottom left corner of the element's box.</li>
<li>center bottom - bottom center of the element's box.</li>
<li>right bottom - bottom right corner of the element's box.</li>
</ul>
<p> All of these properties can be declared under the "background" property to make things easier and cleaner. </p>
<p>Background-size works to size the image to the size of the div or container. Its values are either cover or contain. Cover covers the entire div, contain letterboxes it. Background-attachment says how the images moves. It's either fixed or scroll. </p>
<p>Images can also be gradients, and use -webkit-linear-gradient() to make the gradient work with two hexcode colors placed within the parentheses.</p>
<p>Tables are done by using the table, tr, td commands.</p>
<table>
<tr>
<td>Table part 1</td>
<td>Table part 2</td>
<td>Table part 3</td>
<td colspan = "2">Table colspan</td>
<td rowspan = "2">Table rowspan</td>
</tr>
</table>
<p>Long tables can be sectioned off using the table body element: tbody.</p>
<p>Tables can get headings with thead.</p>
<p>Tables can get footers with tfoot.</p>
<p>All the css stuff that works with other stuff works with tables too.</p>
</body>
</html>