-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlab2.php
362 lines (241 loc) · 13.5 KB
/
lab2.php
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html>
<head>
<title>Lab 2 - First Tags - Directions</title>
<meta charset="utf-8" />
<link rel="icon" href="images/favicon.ico" type="image/ico"/>
<link rel="icon" href="images/favicon.gif" type="image/gif"/>
<link rel="icon" href="images/favicon.png" type="image/png"/>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<div id="wrapper">
<?php include("includes/header.php"); ?>
<div class="clearfix">
<section id="main">
<h1 class="lab-header">Lab 2: First Tags</h1>
<p>So, here we go. Your first real Lab. Are you ready for the big time?</p>
<p>You are going to start by first making five starter" HTML files that
will act as shells for your content. I will let you know when to copy and paste.
If I don't say anything,
don't do it. When it comes to typing in the tags, DEFINITELY do not copy and
paste!!</p>
<p>When you are done with this Lab, your 5 files will look like the HTML files
listed below. But by "look"
I am talking about the source code. Make sure to compare what you did with
what I did. We are after good coding practices here, so we can do more interesting
- and fun - stuff down the road.</p>
<div class="thumbnail">
<img src="images/peek.jpg" alt="Sneak A Peek " class="peek" />
<ul class="nav">
<li><a href="labs/2/index.html" target="_blank"><i class="icon-file"></i>index.html</a></li>
<li><a href="labs/2/prep.html" target="_blank"><i class="icon-file"></i>prep.html</a></li>
<li><a href="labs/2/plant.html" target="_blank"><i class="icon-file"></i>plant.html</a></li>
<li><a href="labs/2/harvest.html" target="_blank"><i class="icon-file"></i>harvest.html</a></li>
<li><a href="labs/2/blog.html" target="_blank"><i class="icon-file"></i>blog.html</a></li>
</ul>
<p id="note"><strong>NOTE:</strong> You
may copy and paste the content for your files as explained below or, alternatively,
, you may
<a href="dl/content.zip">down load all of the content</a> in this .zip file.
This will save you a bunch of time.</p>
</div>
<h2>Step 1. Copy and paste this <a href="labs/2/base.txt">starter code</a> into a text editor.</h2>
<p>Save the file 5 different times, each time with one of the following
file names:</p>
<ul class="nav">
<li>index.html </li>
<li>prep.html </li>
<li>plant.html </li>
<li>harvest.html </li>
<li>blog.html </li>
</ul>
<p>Once that is done just make sure that these files which you have just made
are closed.</p>
<p>Just think of each of these files as a vessel into which you are about to
pour some content that will be unique to each page.</p>
<h2>Step 2. Let's do the markup first for index.html since that will be the home page.</h2>
<p>The filename for all home pages is always index.html</p>
<p>Open <a href="labs/2/index.txt">index.txt</a> and copy all of the content.
Then open index.html in a text editor and paste the copied content into
index.html between these tags:</p>
<p><code><h2></code>Getting Addicted To Growing Good Things To Eat<code></h2></code></p>
<p>and</p>
<p><code><address></code></p>
<p>You can see I've left a lot of white space for you to paste the content in.</p>
<p>Most of the content for the home page is paragraphs, but there is one heading
tag to go in there. There is also a quote tag (<code><q></code>) for the quote from
my Father.</p>
<p>Do NOT copy and paste the tags. Type them into your file. </p><hr />
<p><code><p></code>I have been growing vegetables at my home in Nutley,
New Jersey, for over 25 years. A big reason why we bought our home was just
so I could grow a few crops every summer. What I could not know then was how
much I would love vegetable gardening. It's a passion that now borders on an
obsession.<code></p></code></p>
<p><code><p></code>As a kid in Pepper Pike, Ohio, I watched my Father every
year tend to his garden that measured 30 X 50. I could not understand why he'd
spend so much time in the yard and in the garden growing staples such as corn,
carrots, and tomatoes every year<code>.</p>
</code></p>
<p> <code><p></code>Here's what my Dad said about what he liked about
gardening...<code></p></code></p>
<p><code><q></code>The place where I could get away from you, your Mother,
and your sister was the garden. I had full control unless you factor in sunlight,
rain, and the weeds that grew no matter what.<code></q></code></p>
<p><code><p></code>Each year the rituals are the same. From early preparation
to planting and harvesting, what I do is what I've learned over the years. I've
especially gotten good at keeping out little animals that like to eat what's
not for them. I always wonder what my life would have been like had I lived
on a farm.<code></p></code></p>
<p><code><p></code>Whether you live in an apartment with a balcony or on
30 acres or have a tiny patch of land to grow fresh vegetables as I do, gardening
is fun, easy, cheap, and rewarding. Nothing like picking herbs and food from
the garden for tonight's dinner. These pages are about what I've learned and
what you can do to have fun and fresh food at the same time.<code></p>
</code></p>
<p><code><h1></code>Poll Of The Day<code></h1></code></p>
<p><code><p></code>Do you like working in the yard?<code></p></code></p><hr />
<p>For every open tag - like <code><p></code> there must be a matching close tag which in
this case is <code></p></code>.</p>
<p>Notice how the browser adds the start and end quotation marks just by using
the q tag. You certainly can change the appearance of these marks with CSS.</p>
<p> Remember to save your file often as you work. Let's continue adding tags.
</p>
<p>Now add the content for the title of your document. Titles are very important for a lot of reasons, especially the role they play in Search Engine Optimization (SEO).</p>
<p>Each page must have its own unique title. The <code><title></code> tag
can go any where between the <code><head></head></code> container.</p>
<p>For the home page it's:</p>
<p><code><title></code>Growing A Vegetable Garden - In My Garden<code></title></code></p>
<p>We have one last thing to do and that is to add the character entity for the
copyright symbol. A character entity will always start with an ampersand
and end with a semi-colon. Currently we have this content in the address section:</p>
<p><code><address><br>
</code>Bud Kraus<br>
888 MY GARDEN<br>
[email protected]<code><br>
</address> </code></p>
<p>Now I need you to add:</p>
<p><code>&copy;</code> IMG, Inc. All Rights reserved.</p>
<p>below [email protected] and just above <code></address></code>.</p>
<p>As we do the other 4 files, you can add this copyright information to
those files too, but I'll leave that up to you.</p>
<p>Save your index.html file. </p>
<p>If you haven't already, check the source code of your file with the source
code of my <a href="labs/2/index.html">index.html</a> file.</p>
<p>Close your index.html file. Take a deep cleansing, breath</p>
<h2>Step 3. Now let's work on the prep.html file. </h2>
<p>The process will be just like that in Step 2.</p>
<p>Open <a href="labs/2/prep.txt">prep.txt</a> and copy the text. Open prep.html
in a text editor and paste the copied content into it between:</p>
<p><code><h2></code>Getting Addicted To Growing Good Things To Eat<code></h2></code></p>
<p>and</p>
<p><code><address></code></p>
<p>Save prep.html.</p>
<p>With the exception of the first word (Preparation), all of this content forms paragraphs. You already know how to do that.</p>
<p>For "Preparation" use the Heading 1 tag as follows:</p>
<p><code><h1></code>Preparation<code></h1></code></p>
<p>Add your content for the title:</p>
<p><code><title></code>Early Spring Preparation For A Vegetable Garden - In My Garden<code></title></code></p>
<p>As a reminder you can add:</p>
<p><code>&copy;</code> IMG, Inc. All Rights reserved.</p>
<p>to the address section just as you did for index.html. Save prep.html.</p>
<p>If you haven't already, check the source code of your file with the source
code of my <a href="labs/2/prep.html">prep.html</a> file.</p>
<p>Once you are done, save and close your prep.html file. </p>
<p>Feel free to look at the first two pages you have made in your browser.</p>
<p>So far, so good, right? That wasn't so bad!</p>
<h2>Step 4. Now let's do the plant.html file.</h2>
<p>Open the <a href="labs/2/plant.txt">plant.txt</a> file. Copy and paste the
contents into your plant.html file and save it.</p>
<p>Let's get out the <code><p></code> again as it remains in heavy use. Except for
the following heading tags, all the content is paragraphs.</p>
<p>Now here is the <code><h1> </code>and<code> <h2></code> content:</p>
<ul>
<li><code><h1></code>Planting The Garden<code></h1>
</code>
<ul>
<li><code><h2</code>>What We Plant<<code>/h2></code></li>
<li><code><h2></code>Getting Started<code></h2></code></li>
<li><code><h2></code>Sowing Seeds<code></h2></code></li>
<li><code><h2></code>In A Few Weeks<code></h2></code></li>
</ul></li>
<li><code><h1></code>To Do List<code></h1></code></li>
<li><code><h1></code>Where To Get Seeds And Supplies<code></h1></code></li>
</ul>
<p>Notice how I am using the tags to form a hierarchy with my content. That is
exactly the purpose of HTML which uses hierarchies to give mean to content.</p>
<p>Lastly, add this title to your document:</p>
<p><code><title></code>Planting A Vegetable Garden - In My Garden<code></title></code></p>
<p> By now you know to add the copyright info. Check the source code of your
file with the source code of my <a href="labs/2/plant.html">plant.html</a> file.</p>
<p>Save and close this file.</p>
<h2>Step 5. Next, let's set up the harvest.html file</h2>
<p>Open <a href="labs/2/harvest.txt">harvest.txt</a>. Copy and paste the content
into harvest.html and save it.</p>
<p>Same old thing. All the content is paragraphs except for:</p>
<ul>
<li><code><h1</code>>The Harvest<code></h1>
</code>
<ul>
<li><code><h2></code>The Fruits Of Labor<code></h2></code></li>
</ul></li>
<li><code><h1></code>Recipes<code></h1</code>></li>
</ul>
<p>Then, add the content for your title:</p>
<p><code><title></code>>Harvesting A Vegetable Garden - In My Garden<code></title></code></p>
<p>If you haven't already, check the source code of your file with the source
code of my <a href="labs/2/harvest.html">harvest.html</a> file. They need to
be the same. </p>
<p>Once you are done, save and close your plant.html file.</p>
<h2>Step 6. Let's add some content to blog.html</h2>
<p>Open <a href="labs/2/blog.txt">blog.txt</a>. I think by now you know what to do.</p>
<p>Like the other pages, most of the content requires paragraph markup.
Also like the other pages, I use <code><h1></code> and <code><h2></code> tags for headings
and subheads like this:</p>
<ul>
<li><code><h1></code>Garden Blog<code></h1></code></li>
<li> <code><h1></code>How Much?<code></h1> </code>
<ul>
<li><code><h2></code>Leave A Comment<code></h2></code></li>
</ul>
</li><li><code><h1></code>Something I'll Pay Attention To Next Year<code></h1></code></li>
<li><code><h1></code>Keeping Out The Pests<code></h1></code>
<ul>
<li><code><h2></code> Subscribe<code></h2></code></li>
</ul>
</li>
<li><code><h1></code>About My Blog<code></h1></code>
<ul>
<li><code><h2></code>Categories<code></h2></code></li>
<li><code><h2></code>Previous Articles<code></h2></code></li>
</ul>
</li>
</ul>
<p>Time now to add <code><strong></code> and <code><em></code> tags. Here is where they
go. Remember. DO NOT copy and paste this!! Type in the code yourself. </p>
<p><code><strong></code>"How much should I water? How much should I fertilize?"<code></strong></code></p>
<p><code><em></code>A pinch of this, a handful of that<code></em></code></p>
<p><code><strong><em></code>never paid any attention to is the pH
factor<code></em></strong> </code></p>
<p>Notice how these inline elements (<code><strong></code> and <code><em></code>) go inside
of a block level element (in this case <code><p></code>).
<p>That pattern is important to writing good HTML.
With inline elements the order of the tags is not important but you always
want to close the tags in the reverse order from which they are opened.</p>
<p>Add the content for the title of the document:</p>
<p> <code><title></code>A Vegetable Garden Blog - In My Garden<code></title></code></p>
<p>Finally, because I have 3 articles on this page, I used the Horizontal Rule
(<code><hr /></code>) to separate the articles. Look at my source code to see where to
place the two <code><hr /></code> tags.</p>
<p>If you haven't already, check the source code of your file with the source
code of my <a href="labs/2/blog.html">blog.htm</a>l file.</p>
<p>Save and close your blog.html file.
<p>Time for an adult beverage!!
</section>
</div> <!-- end clearfix -->
<?php include("includes/footer.php"); ?>
</div> <!-- end wrapper -->
</body>
</html>