-
Notifications
You must be signed in to change notification settings - Fork 0
/
notes-01.html
154 lines (138 loc) · 5.77 KB
/
notes-01.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
150
151
152
153
154
<!DOCTYPE html> <!-- first thing in any html document -->
<html lang="en"> <!-- root element of a web page -->
<head> <!-- contains metadata about the document. typically invisible to the user -->
<meta charset="utf-8" /> <!-- defines the character set for this document. utf-8 is standard and includes a lot of non-english characters -->
<title>HTML and CSS Foundations, class notes 2019-10-10</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<script src="https://kit.fontawesome.com/a630078c3b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<ul>
<li><a href="index.html"><i class="fas fa-hippo"></i> Home</a></li>
<li><a href="notes-01.html"><i class="fas fa-hippo"></i> Class notes</a></li>
<li><a href="css-basics.html"><i class="fas fa-hippo"></i> CSS Sandbox</a></li>
<li><a href="bash-examples.html"><i class="fas fa-hippo"></i> Shell Command tips and tricks</a></li>
<li><a href="calendar.html"><i class="fas fa-hippo"></i> My schedule</a></li>
<li><a href="mailto:realchriscasey@gmail.com"><i class="fas fa-hippo"></i> Contact</a></li>
</ul>
</nav>
<h1>
<!--
Everything I know I learned in the '90s.
-->
uw pce html and css foundations, first day, 2019-10-10
</h1>
as taught by sheyna watkins
<h2>Recommended software:</h2>
<table>
<tr>
<td>Atom</td>
<td>Simple text editor, preferred for HTML</td>
</tr><tr>
<td>Git</td>
<td>Required to push to GitHub for turning in assignments</td>
</tr><tr>
<td><i><u>not</u></i> vim</td>
<td>well I'm not learning emacs...</td>
</tr>
</table>
<h2>Git examples</h2>
<pre>
<i># create a new repo in the current directory</i>
$ git init
<i># add a file to the staging area</i>
$ git add <file>
<i># show current state of stage</i>
$ git status
<i># commit changes to the local branch</i>
$ git commit -m "message"
<i># point local repository at remote origin</i>
$ git remote add origin https://github.com/me/project.git
<i># ruin a coworker's day</i>
$ git push origin master
</pre>
<h2>GitHub</h2>
<ul><li>A for-profit "social network" for git users</li>
<li>Public repos for free, private for pay</li>
<li>Free hosting for small web projects</li>
<li>Convention for repo naming is "kebab-case"</li>
</ul>
<h2>HTML</h2>
<ul><li><b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage
<ul><li>Text not constrained to be linear</li></ul>
</li>
<li>Not a programming language</li>
<li>Defines the structure of a web page
<ul><li>Text is <i>"marked up"</i> to define how it should be displayed</li>
<li>For example, <p> represents a paragraph</li>
</ul>
</li>
<li>Invented by Tim Berners Lee, first published in 1991</li>
<li>HTML 5 was introduced in 2014</li>
</ul>
HTML 5 is defined by:
<ol><li><b>HTML</b>: structure</li>
<li><b>CSS</b>: appearance</li>
<li><b>JavaScript</b>: functionality</li>
</ol>
Example:
<pre>
<tagname attribute="value">content</tagname>
</pre>
<h2>Atom</h2>
<ul><li>autocomplete and syntax highlighting for HTML</li>
<li>use <a href="https://validator.w3.org">validator.w3.org</a> to validate code</li>
</ul>
<h2><i>Burning Questions</i></h2>
<ul><li>What if a file is modified after staging?</li>
<li>Can I launch atom from the command prompt?
<ul><li>yes. professor will provide this later
<ul><li>and I promised to figure it out on Windows...</li></ul>
</li>
</ul>
</li>
</ul>
<h2>Homework</h2>
<ul><li>Write a <a href="#semantics">paragraph</a> about <i>semantic elements</i></li>
<li>Create an HTML document that uses at least 15 HTML elements, submit to GitHub</li>
<li>Do "Lesson Zero" from Canvas <i>(overdue)</i>
<ul><li>Get NetID set up</li>
<li>Download Atom and git</li>
</ul>
</li>
<li><s>Create GitHub account</s> <i>(existing personal account is ok)</i></li>
<li>Figure out how to launch <b>Atom</b> from <b>git Bash</b> on Windows <i>(brownie points)</i></li>
<li>Find a good terminal and shell for macOS <i>(self improvement)</i>
<ul><li>Searchable history</li>
<li>Command prompt with branch name</li>
<li>Intuitive copy/paste</li>
<li>Keyboard shortcuts (word skip, clear line, scroll...)</li>
<li>256 color, decent themes</li>
<li>Tabs, tearable and joinable</li>
<li>zsh on hyperterm?</li>
</ul>
</li>
</ul>
<h2 id="semantics">Semantic Elements</h2>
<p>
Semantic Elements are <i>meaningful</i> tags that have an explicit effect
on the way a page's content is rendered by the browser. Their names are
human-understandable and they have similar effects on all compliant web
browsers. Using appropriate tags helps screen readers and other
accessibility tools better understand the page's structure.
</p>
<h3>block outline</h3>
<p>
Block level semantic elements define a separate group of content. These
groups are rendered as different visual elements. Some examples include
<p>, <pre> and <article>
</p>
<h3>inline</h3>
<p>
Inline semantic elements affect text within a line. They don't cause a
line break and don't indicate that the text is a different set of context.
Some examples include <b>, <i> and <span>
</p>
</body>
</html>