-
Notifications
You must be signed in to change notification settings - Fork 0
/
index1.html
149 lines (141 loc) · 5.91 KB
/
index1.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<title>Intro to Programming Notes </title>
</head>
<body>
<div class="header">
<h1>
Intro to Programming Highlights
</h1>
</div>
<div class="Lesson">
<h1>Stage 1: Lesson 1 Notes</h1>
</div>
<div class = "Lessontext">
<p>
Programming is very literal. You have to tell the
computer exactly what to do so that you get the
results you want.
No doubt this is a challenge because our thought
processing in our work and personal lives use
assumptions and skip steps to quickly make decisions
and act on them. I look forward to retraining my
brain to be more literal, to think and work like a
programmer.Here is what I've learned so far:
</p>
<p>
<a href="https://en.wikipedia.org/wiki/HTML">HTML</a>
is a type of document for web content.
It contains a <em>Title, Header and Body</em> structure.
</p>
<p>
The body of an <a href="https://en.wikipedia.org/wiki/HTML">HTML document</a>
is made up of text that has markup language. This text
can be
<em> inline </em> or <em>block</em>. <b>Block</b>
places a box around the text<br>
much like a text box drawn in Word or Power point.
</p>
<p>
<b>Void</b> tags,such as <em>break</em>, do not
require closing tags whereas other tags such as
the one used for <em>italics</em> requires a closing
tag with an /
at the end of the text. If a closing tag is not used
where appropriate,<br>
then <b>everything after the opening tag will take on
the same style or attribute and there will be no
terminating point.<br>
Like shown here.</b>
</p>
</div>
<div class="Lesson">
<h1>Stage 1: Lesson 2 Notes</h1>
</div>
<div class = "Lessontext">
<p>Where to begin? I remember most what I learned
last and that is <em>"Boxes Boxes Boxes!!!"</em>
Breaking down pages into boxes to be identified,
sized, and characterized is an important step to
web development.
</p>
<p>Think of HTML as the house or structure, CSS as
the styling or decor or architecture of the house,
and Java Script as the Interactive components that
can change the attributes of the structure.
</p>
<p><b>DOM</b> is a reference to the Tree Structure of
an HTML document. It is hierarchical in nature and
HTML creates the elements of the <b>DOM</b>.
</p>
</div>
<div class="Lesson">
<h1>Stage 1: Lesson 3 Notes</h1>
</div>
<div class = "Lessontext">
<p>Contrary to popular opinion <a href= "https://en.wikipedia.org/wiki/Cascading_Style_Sheets"
>CSS</a>
here <b>does not</b> refer to The College of St.
Scholastica which is an independent private college
based in Duluth, Minnesota with campuses across the
state.
What it does refer to however is the styling--
Cascading Stying Sheets-- used to apply to HTML
documentation. It uses the concept of <em>inheritance
</em> where descendant elements inherit text related
properties of ascendant elements. This, however, does
not apply with box related properties.
</p>
<p> CSS allows you to assign attributes to elements
of your document in a number of ways. For example by
setting font, font size, color, background color, etc. It
also allows you to control the size of the boxes in your
document.</p>
<p> You can assign those attributes in groups using class
selectors such as "<div class=h1>". This allows the
user to ascribe styling to everying that is in the header
elements</p>
<p> There are two recommended ways to include CSS in your HTML
document.
<ul>
<li>Write CSS in the "<head>" of your
HTML
<li>Link your HTML to a separate CSS
file
</ul>
<p>Setting box sizes can be tricky. There are two ways to
do this.
<ul>
<li>Set sizes in terms of percents rather than pixels.
<li>Set the box-sizing attribute to border-box for every
element.
</ul>
Divs by default will take up the entire width of the page.
Using display: flex; will allow the divs to appear side
by side
<p>
Images should include an alt to describe what should
appear if the browser prohibits the image from appearing.
</p>
<p><b>Code, Test, Refine</b> are important steps to
creating your web page. Looking for natural boxes,
repeated styles and semantic elements, write your HTML
and apply styles from biggest to smallest.</p>
<p>It is also important to avoid repetition by using CSS. This is achieved by using CSS styles to apply to sections throughout the document such as title, header, and text. This ensures document consistency and allows you to easily add to or update HTML without repetitively ascribing specific attributes throughout the document</p>
<p> Developer Tools are a nifty way to view you site,
code and changes at the same time. Also use these
links to verify your page complies with HTML and CSS
standards.Click here <a href="http://validator.w3.org/#validate_by_input">
To verify HTML</a> and here
<a href="http://jigsaw.w3.org/css-validator/#validate_by_input">
To verify CSS</a>
</p>
</div>
<div class=image> <div class ="app.png"><img src="app.png"
alt="This is a screenshot">
</div>
</div>
</body>
</html>