This commit is contained in:
BIN
site/introwebdev/cute-cat.jpg
Normal file
BIN
site/introwebdev/cute-cat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
@@ -1,10 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Intro Webdev</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Introduction to Web Development</h1>
|
||||
[!]
|
||||
[=title "Introduction to Web Development"]
|
||||
[=nohomelink]
|
||||
[=content-]
|
||||
<p>
|
||||
Welcome to the homepage for Trailside's Spring 2026 introduction to web development course!
|
||||
</p>
|
||||
@@ -19,6 +16,9 @@ If you ever have any questions about web development, feel free to email me at <
|
||||
Some parts of this course are intended to be self-study - you can always ask me for help about these, of course, but I recommend first checking out <a href="https://www.w3schools.com/">W3Schools</a>
|
||||
and <a href="https://www.khanacademy.org/">Khan Academy</a>, because they have some pretty great resources for web development.
|
||||
</p>
|
||||
<p>
|
||||
A rolling list of tags we've covered can be found <a href="rolling-tags-list.html">here</a>.
|
||||
</p>
|
||||
<h2>Grading</h2>
|
||||
<p>
|
||||
This is a graded course! The weights are as follows:
|
||||
@@ -46,6 +46,7 @@ TBD. Will post an announcement when this is worked out.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="week-1-homework.html">Week 1 Homework (short, no submission)</a></li>
|
||||
<li><a href="week-2-homework.html">Week 2 Homework</a></li>
|
||||
</ul>
|
||||
<h2>Lecture notes</h2>
|
||||
<p>
|
||||
@@ -53,11 +54,12 @@ I'll be posting these in advance of lectures, so you can review the material bef
|
||||
</p>
|
||||
<ul>
|
||||
<li>Week 1: <a href="week-1-setup.html">Getting Set Up</a></li>
|
||||
<li>Week 2: <a href="week-2-doctypes.html">Doctypes</a>, <a href="week-2-html-head-body.html">The HTML, Head, and Body tags</a>, <a href="week-2-metadata.html">Metadata</a>, <a href="week-2-web-inspect.html">Web Inspector</a></li>
|
||||
</ul>
|
||||
<h2>Generative AI policy</h2>
|
||||
<p>
|
||||
Don't use AI to do your assignments. You're here to learn web development, not to learn AI prompting. I will assign a 0 grade to any assignment
|
||||
that I suspect was written by AI.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
[/]
|
||||
[#template.html]
|
||||
|
||||
@@ -1,17 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
span.under {
|
||||
display: inline-block;
|
||||
width: 20ch;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
</style>
|
||||
<title>Public Website Consent Form</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Parental Consent Form</h1>
|
||||
[!]
|
||||
[=title "Public Website Consent Form"]
|
||||
[=content-]
|
||||
<p>
|
||||
As part of their course in introductory web development at Trailside, your child may be given the opportunity to
|
||||
create and maintain a public-facing website through GitHub Pages (a reputable free hosting provider). This gives them
|
||||
@@ -47,5 +36,5 @@ border-bottom: 2px solid black;
|
||||
Printed name: <span class="under"></span><br><br>
|
||||
Child's name: <span class="under"></span>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
[/]
|
||||
[#template.html]
|
||||
|
||||
47
site/introwebdev/rolling-tags-list.html
Normal file
47
site/introwebdev/rolling-tags-list.html
Normal file
@@ -0,0 +1,47 @@
|
||||
[!]
|
||||
[=title "Rolling Tags List"]
|
||||
[=content-]
|
||||
<p>
|
||||
This is a rolling list of the HTML tags we've covered in class.
|
||||
</p>
|
||||
<p>
|
||||
For more detail, check out W3Schools - they have pretty complete writeups on <b>all</b> of the basic tags.
|
||||
</p>
|
||||
<ul>
|
||||
<li><code><b> ... text ... </b></code>: The b tag makes the contained text <b>look like this</b>.</li>
|
||||
<li><code><i> ... text ... </i></code>: The i tag makes the contained text <i>look like this</i>.</li>
|
||||
<li><code><sup> ... text ... </sup></code>: The sup tag makes the contained text <sup>look like this</sup>.</li>
|
||||
<li><code><h1> ... text ... </h1></code>: This is a heading, like:</li>
|
||||
</ul>
|
||||
<h1>H1 Heading</h1>
|
||||
<ul>
|
||||
<li><code><h2> ... text ... </h2></code>: A subheading, like:</li>
|
||||
</ul>
|
||||
<h2>H2 Subheading</h2>
|
||||
<ul>
|
||||
<li><code><h3></h3>, <h4></h4>, <h5></h5>, <h6></h6></code>: Smaller and smaller headings. Using these is pretty goofy.</li>
|
||||
<li><code><br /></code>: A line break! Used to make<br>
|
||||
newlines like<br>
|
||||
these. (Remember HTML mostly ignores newlines unless you add a <br />)</li>
|
||||
<li><code><a href="https://example.com/"> Clickable Text </a></code>: A clickable link! Any URL works. The result looks like <a href="https://example.com/">Clickable Text</a>.</li>
|
||||
<li><code><img src="image.png" /></code> An image.</li>
|
||||
<li><code><p> ... content ... </p></code>: A <i>block-level</i> paragraph, used to organize text.</li>
|
||||
</ul>
|
||||
<h2>Don't Forget...</h2>
|
||||
<ol>
|
||||
<li>HTML tags start with <b>a less than sign (<)</b>.</li>
|
||||
<li>The name of an html tag immediately follows: <code><tag_name</code></li>
|
||||
<li><b>Optional</b> properties follow (like <code>href</code>, <code>src</code>, etc): <code><tag_name thingy="something" otherthingy="something else"</code></li>
|
||||
<li>HTML tags that <i>cannot accept content</i> - like line breaks or images - end with <code>/></code>, signifying that they end immediately.</li>
|
||||
<li>HTML tags that <i>can have content</i> - like italics, bolds, headers, links, etc - end with just a greater than sign, <code>></code></li>
|
||||
<li>If the tag has content, that follows, like <code><tag_name thingy="something" otherthingy="something else"> Content "inside" the tag</code></li>
|
||||
<li>Finally, if the tag has content, the <i>closing pattern</i> follows - something like <code></tag_name></code></li>
|
||||
</ol>
|
||||
<p>
|
||||
So the two ways an HTML tag can look are:<br>
|
||||
(without content) <code><tag_name thingy="something" otherthingy="something else" /></code><br>
|
||||
(with content) <code><tag_name thingy="something" otherthingy="something else"> ... content ... </tag_name></code><br>
|
||||
<b>Memorize these patterns! They are pretty important!</b>
|
||||
</p>
|
||||
[/]
|
||||
[#template.html]
|
||||
16
site/introwebdev/template.html
Normal file
16
site/introwebdev/template.html
Normal file
@@ -0,0 +1,16 @@
|
||||
[?]
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="universe.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
<title>[^title]</title>
|
||||
</head>
|
||||
<body>
|
||||
[i nohomelink not] <a href="index.html">Back to home</a> [/]
|
||||
<h1>[^title]</h1>
|
||||
[^content]
|
||||
</body>
|
||||
</html>
|
||||
69
site/introwebdev/universe.css
Normal file
69
site/introwebdev/universe.css
Normal file
@@ -0,0 +1,69 @@
|
||||
body {
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #0A0A30;
|
||||
}
|
||||
|
||||
h1,h2 {
|
||||
color: #EEEEEE;
|
||||
}
|
||||
|
||||
p,li {
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
||||
a, b {
|
||||
color: white;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgb(255, 255, 0);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace;
|
||||
background-color: #f3f3f3;
|
||||
padding: 2px;
|
||||
border-radius: 3px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
code.hljs span {
|
||||
font-family: monospace !important;
|
||||
}
|
||||
|
||||
span.under {
|
||||
display: inline-block;
|
||||
width: 20ch;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
span.goal {
|
||||
padding: 3px;
|
||||
padding-right: 25px;
|
||||
background-color: #CC8811;
|
||||
font-weight: bold;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
span.goal::before {
|
||||
content: "[goal]";
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
color: black;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid grey;
|
||||
padding-left: 2em;
|
||||
margin-left: 0px;
|
||||
}
|
||||
@@ -1,11 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Week 1 Homework</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="index.html">Back to home</a>
|
||||
<h1>Week 1 Homework</h1>
|
||||
[!]
|
||||
[=title "Week 1 Homework"]
|
||||
[=content-]
|
||||
<p>
|
||||
I didn't actually expect to get as far as we did in the first week, so homework is pretty short and spur-of-the-moment. Later homeworks will be much longer.
|
||||
</p>
|
||||
@@ -16,9 +11,7 @@ This homework is optional. You won't be graded on it, and there's nothing to sub
|
||||
<p>
|
||||
If you didn't get an image working, try to do that! Remember the image tag has peculiar behavior, and looks like this:
|
||||
</p>
|
||||
<pre>
|
||||
<img src="/path/to/image.extension">
|
||||
</pre>
|
||||
<pre><code><img src="/path/to/image.extension"></code></pre>
|
||||
<p>
|
||||
If your image is in <b>Downloads</b>, for instance, your image tag might look like <code><img src="Downloads/image.png"></code>.
|
||||
</p>
|
||||
@@ -34,9 +27,7 @@ This homework is optional. You won't be graded on it, and there's nothing to sub
|
||||
<p>
|
||||
Remember a link looks like:
|
||||
</p>
|
||||
<pre>
|
||||
<a href="https://example.com/">Link Text</a>
|
||||
</pre>
|
||||
<pre><code><a href="https://example.com/">Link Text</a></code></pre>
|
||||
<p>
|
||||
Links are pretty cool - for instance, you can actually put most tags inside them. Try making a website with a clickable image!
|
||||
</p>
|
||||
@@ -64,5 +55,5 @@ This homework is optional. You won't be graded on it, and there's nothing to sub
|
||||
<p>
|
||||
I'll make it 2% if you can bring in a tag <i>I haven't heard of</i>.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
[/]
|
||||
[#template.html]
|
||||
|
||||
@@ -1,20 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
blockquote {
|
||||
border-left: 3px solid grey;
|
||||
padding-left: 2em;
|
||||
margin-left: 0px;
|
||||
}
|
||||
</style>
|
||||
<title>Week 1: Getting Set Up</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<a href="index.html">Back To Homepage</a>
|
||||
<h1>Week 1: Getting Set Up</h1>
|
||||
[!]
|
||||
[=title "Week 1: Getting Set Up"]
|
||||
[=content-]
|
||||
<p>
|
||||
Welcome to intro webdev! Today we're going to get our computers set up for web development, cover basic file management and text editing, and make a Hello World project.
|
||||
</p>
|
||||
@@ -47,10 +33,9 @@ blockquote {
|
||||
<p>
|
||||
Paste the following into Notepad and save. We'll go over what this does later.
|
||||
</p>
|
||||
<pre>
|
||||
<!DOCTYPE html>
|
||||
<pre><code><!DOCTYPE html>
|
||||
<h1>Hello, World!</h1>
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>
|
||||
Finally, open index.html in your web browser - right clicking it in File Explorer, selecting "open with...", and clicking your web browser should work fine. You'll see something like this:
|
||||
</p>
|
||||
@@ -60,5 +45,5 @@ blockquote {
|
||||
<p>
|
||||
If it works, nicely done - that's your first website!
|
||||
</p>
|
||||
</head>
|
||||
</html>
|
||||
[/]
|
||||
[#template.html]
|
||||
|
||||
35
site/introwebdev/week-2-doctypes.html
Normal file
35
site/introwebdev/week-2-doctypes.html
Normal file
@@ -0,0 +1,35 @@
|
||||
[!]
|
||||
[=title "Week 2: Doctypes"]
|
||||
[=content-]
|
||||
<p>
|
||||
<i>This is only a part of week 2 - make sure to read through all of the companion pieces!</i>
|
||||
</p>
|
||||
<p>
|
||||
So far we've been doing HTML pretty minimally: we just open a text file, write some tags, save, and reload.
|
||||
This is all well and good, but there's a subtlety: when you just enter html immediately, the browser
|
||||
<i>has no idea what you're doing</i>. Browsers are pretty smart, so it <i>guesses</i> (by the filename,
|
||||
and by the presence of tags) that it's HTML, but the browser also guesses that you aren't really using
|
||||
HTML properly, and so some features are broken!
|
||||
</p>
|
||||
<p>
|
||||
This situation is known as <i>quirks mode</i>. It's actually mostly fine - most of the features that it breaks are pretty obscure -
|
||||
but to maintain full compatibility and avoid weird bugs, we should always declare an HTML5 doctype. In fact this is very easy. Just include the following
|
||||
tag at the top of all of your html files:
|
||||
<pre><code><!DOCTYPE html></code></pre>
|
||||
</p>
|
||||
<p>
|
||||
This will put your page into standards mode, ensuring correct HTML5 non-quirks behavior.
|
||||
Do not include any text on the same line, so your files should look like
|
||||
</p>
|
||||
<pre><code><!DOCTYPE html>
|
||||
<h1>Header!</h1></code></pre>
|
||||
<p>
|
||||
Instead of
|
||||
</p>
|
||||
<pre><code><!DOCTYPE html><h1>Header!</h1>
|
||||
</code></pre>
|
||||
<p>
|
||||
I <b>will not accept</b> any homeworks that don't have a correct doctype. Make sure to memorize the pattern!
|
||||
</p>
|
||||
[/]
|
||||
[#template.html]
|
||||
113
site/introwebdev/week-2-homework.html
Normal file
113
site/introwebdev/week-2-homework.html
Normal file
@@ -0,0 +1,113 @@
|
||||
[!]
|
||||
[=title "Week 2 Homework"]
|
||||
[=content-]
|
||||
<p>
|
||||
This homework will be done entirely as a single website file. Make sure that,
|
||||
</p>
|
||||
<ul>
|
||||
<li>You are using a DOCTYPE and the html/head/body tags correctly - check out <a href="week-2-doctypes.html">Week 2: Doctypes</a> and <a href="week-2-html-head-body.html">Week 2: Html, Head, Body</a>.</li>
|
||||
<li>You always close every tag correctly - use the <code> /></code> notation for tags that don't take content, and the closing tags (<code></tag_name></code>) for tags that do.</li>
|
||||
<li>You always write properties correctly in the <code>property="content"</code> format - you always need the <code>=</code>, you always need the double quotes, you always need the space after the tag name.</li>
|
||||
<li>Your code is decently readable with reasonable use of spaces and newlines - I won't be grading you on this yet, but it's a good habit.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Your grade will be the percentage of completed goals. Goals are highlighted like this: <span class="goal">Catch a bunny wabbit!</span>
|
||||
</p>
|
||||
<h2>Part 1: Warmup</h2>
|
||||
<p>
|
||||
Create a week-2-homework.html (not "index.html" this time!) and set it up in your web browser and text editor. Make sure you remember where it is so you can email the file to me at the end.
|
||||
</p>
|
||||
<p>
|
||||
Set up a <b>correct</b> HTML file with doctype, html, head, body, etc. Add a title - make it something clear that contains your name, like "Albert's Week 2 Homework".
|
||||
<span class="goal">HTML file with the correct standard layout</span>
|
||||
</p>
|
||||
<p>
|
||||
Add a heading (h1) to the body of the page, and make it display the same thing as the title. <span class="goal">Correct heading</span>
|
||||
</p>
|
||||
<p>
|
||||
Create a subheading (h2) named "Lorem" (or something like that) at the bottom of your page body. <span class="goal">Correct subheading</span>
|
||||
</p>
|
||||
<p>
|
||||
Read up on the <a href="https://www.lipsum.com/">Lorem Ipsum</a> and generate some lorem ipsum text!
|
||||
You don't have to use the boring default - there are a whole bunch of fun ones on the internet. A good list is <a href="https://github.com/templeman/awesome-ipsum">here</a>.
|
||||
Paste the lorem ipsum into a new <b>paragraph</b> - use the p tag correctly. <span class="goal">Paragraph with Lorem Ipsum text</span>
|
||||
</p>
|
||||
<p>
|
||||
Now add some emphasis! Add another paragraph of lorem, and use the b and i tags to emphasize specific words. Make sure there are a few words each in,
|
||||
</p>
|
||||
<ul>
|
||||
<li><i>Italic</i></li>
|
||||
<li><b>Bold</b></li>
|
||||
<li><b>Bold Italic</b></li>
|
||||
<li>Normal</li>
|
||||
</ul>
|
||||
<p>
|
||||
No style should take up more than a few words and most of the words should be normal. <span class="goal">Styled lipsum with all 4 styles used correctly</span>
|
||||
</p>
|
||||
<h2>Part 2: Web Inspect</h2>
|
||||
<p>
|
||||
Use the web inspector to find the comment located in this section. It contains the rest of the instructions.
|
||||
<!--
|
||||
Hi! Good work finding this!
|
||||
|
||||
Using a single paragraph and line breaks (<br>), make a list of your favorite foods,
|
||||
and explain why they're your favorite in invisible comments like this one.
|
||||
-->
|
||||
</p>
|
||||
<h2>Part 3: Debugging</h2>
|
||||
<p>
|
||||
Copy the following HTML into your project, and find and fix the problems with it. These fixes will include <i>syntax</i> (spelling the code correctly),
|
||||
<i>semantics</i> (using each tag's closing and properties right), and <i>appropriateness</i> (using the right tags for the job). Include comments briefly explaining each change you made.
|
||||
<span class="goal">The HTML is correctly formed (correct patterns for tags, properties, etc)</span><br />
|
||||
<span class="goal">Each tag is closed properly</span><br />
|
||||
<span class="goal">Each tag has the right properties</span><br />
|
||||
<span class="goal">Tags are semantically correct for their content</span><br />
|
||||
</p>
|
||||
<pre><code><DOCTYPE website>
|
||||
|
||||
<head>
|
||||
<html>
|
||||
>title< Web Page >/title<
|
||||
</html>
|
||||
<body></body>
|
||||
<h1> Web Page </h1>
|
||||
<p>
|
||||
<img source=cute-cat.jpg></img>
|
||||
<b>Bold Text!</b> <br />
|
||||
<i Italic Text! /i>
|
||||
<p>
|
||||
</head>
|
||||
</code></pre>
|
||||
<h2>Part 4: Art Project</h2>
|
||||
<p>
|
||||
This is the more free-form part of the assignment.
|
||||
Design a small, simple homepage for anything you want - you could pick for example your favorite movies, video games, animals, etc.
|
||||
Get creative with it!
|
||||
</p>
|
||||
<p>
|
||||
Make sure to use at least one link to another website, at least one image, several paragraphs with italic and bold text, and several headings of different sizes.
|
||||
</p>
|
||||
<p>
|
||||
<span class="goal">At least one link</span><br />
|
||||
<span class="goal">At least one image</span><br />
|
||||
<span class="goal">Several paragraphs with the typical text-styling elements</span>
|
||||
</p>
|
||||
<h2>Extra Credit</h2>
|
||||
<p>
|
||||
There are bonus points amounting to 3% added to this assignment's grade broken up like so:
|
||||
</p>
|
||||
<ul>
|
||||
<li>1% if you can make and add a favicon of the correct size (32x32)</li>
|
||||
<li>1% if you can figure out on your own how to make lists like this one</li>
|
||||
<li>1% if you can figure out how to set a background color</li>
|
||||
</ul>
|
||||
<h2>Submission</h2>
|
||||
<p>
|
||||
To submit your homework (no later than 2026-1-21), upload the HTML file as an <b>email attachment</b> and send it to plupy44@gmail.com. Include your name in the subject line.
|
||||
</p>
|
||||
<h2>Self-Study</h2>
|
||||
<p>
|
||||
For the self-study section, learn about the <code><style></code> tag - we'll be starting more advanced styling soon.
|
||||
</p>
|
||||
[/]
|
||||
[#template.html]
|
||||
47
site/introwebdev/week-2-html-head-body.html
Normal file
47
site/introwebdev/week-2-html-head-body.html
Normal file
@@ -0,0 +1,47 @@
|
||||
[!]
|
||||
[=title "Week 2: HTML, Head, Body"]
|
||||
[=content-]
|
||||
<p>
|
||||
We've covered a bunch of <i>basic tags</i> - tags that just show some text or an image.
|
||||
These are fun and useful, but there's a whole world of much fancier stuff out there, and to access it we need to start thinking about <i>document structure</i>.
|
||||
</p>
|
||||
<p>
|
||||
Immediately after the DOCTYPE (read <a href="week-2-doctypes.html">this</a> if you don't know what that is), almost every serious HTML page begins with the
|
||||
<code><html></code> tag. This is not technically required, but it's necessary to write clear code.
|
||||
It's also useful for some more advanced trickery that we most likely won't cover in this course. The tag works exactly how you think: you open with
|
||||
<code><html></code>, and you close with <code></html></code>. Your entire website goes inside it (minus the DOCTYPE - the DOCTYPE is always above everything else, including
|
||||
the <code><html></code> tag).
|
||||
</p>
|
||||
<p>
|
||||
Inside the <code><html></code> tag, you have two main sub-sections: <code><head></code> and <code><body></code>.
|
||||
</p>
|
||||
<p>
|
||||
The <b>header</b>, contained within the <code><head></code> tag, contains all of your <i>metadata</i> - this is information describing your
|
||||
page, that isn't actually part of the page content. For instance, if you want your tab to have a title, you use the <code><title></code> tag inside the <code><head></code>.
|
||||
</p>
|
||||
<p>
|
||||
You should only ever put invisible metadata in the header; don't put content there. You technically don't <i>have</i> to have a <code><head></code>, but it's a good practice.
|
||||
</p>
|
||||
<p>
|
||||
The <b>body</b>, contained within the <code><body></code> tag, contains all of your actual content that shows up in the page. You can put all the normal tags in it,
|
||||
and use them exactly as you would without all this fancy stuff!
|
||||
</p>
|
||||
<p>
|
||||
An example of a bare-minimum working page is thus:
|
||||
</p>
|
||||
<pre><code><!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<!-- metadata goes here! -->
|
||||
</head>
|
||||
<body>
|
||||
<h1>Actual content goes here!</h1>
|
||||
</body>
|
||||
</html>
|
||||
</code></pre>
|
||||
<p>
|
||||
This is a lot more complicated than what we've done so far! With practice writing all this out will become muscle memory; I won't expect you to have it memorized immediately.
|
||||
</p>
|
||||
[/]
|
||||
[#template.html]
|
||||
63
site/introwebdev/week-2-metadata.html
Normal file
63
site/introwebdev/week-2-metadata.html
Normal file
@@ -0,0 +1,63 @@
|
||||
[!]
|
||||
[=title "Week 2: Metadata"]
|
||||
[=content-]
|
||||
<!-- here's some metadata for ya! -->
|
||||
<p>
|
||||
Metadata is all the information <i>people don't see in the page</i>. In our previous pages there wasn't very much of it;
|
||||
we're going to change that!
|
||||
</p>
|
||||
<h2>Titles</h2>
|
||||
<p>
|
||||
The simplest type of metadata is the page title. This is set with the <code><title></code> tag (inside your header - read <a href="week-2-html-head-body.html">this</a> if you aren't sure what that is).
|
||||
It doesn't show up inside the page, but it shows up on search engines and in the web browser's top bar.
|
||||
</p>
|
||||
<p>
|
||||
You can set a simple title like so:
|
||||
</p>
|
||||
<pre><code><head>
|
||||
<title>This Is My Page Title!</title>
|
||||
</head>
|
||||
</code></pre>
|
||||
<p>
|
||||
Try it - you'll see it changes the name of the tab! Titles are very useful and necessary - a raw path is a really ugly name for a webpage.
|
||||
</p>
|
||||
<h2>Linking Icons</h2>
|
||||
<p>
|
||||
Perhaps the most dubiously-named tag in HTML is the <code><link></code> tag.
|
||||
It always goes inside a <code><head></code>, and does not have content.
|
||||
</p>
|
||||
<p>
|
||||
<code><link></code> always looks like this:
|
||||
</p>
|
||||
<pre><code><link rel="something" href="something" /></code></pre>
|
||||
<p>
|
||||
The "rel" property defines what this link <i>means</i>, and the "href" property defines <i>the file we're linking</i>.
|
||||
</p>
|
||||
<p>
|
||||
This does <i>not</i> create an anchor like the <code><a></code> tag - it is purely metadata. It's used to import styles (we'll cover these later)
|
||||
and favicons. Favicons are the little image next to the name of each tab. Let's import a favicon:
|
||||
</p>
|
||||
<pre><code><link rel="icon" href="favicon.png" /></code></pre>
|
||||
<p>
|
||||
This literally means "use favicon.png as the icon for this site". Note that "favicon.png" is not a magic name - you can use any image file,
|
||||
as long as it's a ".png" or a ".ico". Other formats might not be supported.
|
||||
</p>
|
||||
<h2>Aside: comments</h2>
|
||||
<p>
|
||||
Another type of hidden information is a <i>comment</i>. This is some text that html <b>completely ignores</b>. It's only there for human developers to read
|
||||
- or for scripts to process! You write comments sorta like a normal HTML tag:
|
||||
</p>
|
||||
<pre><code><!-- This is a comment! --></code></pre>
|
||||
<p>
|
||||
<!-- he's lying, this doesn't work ;) -->
|
||||
Note the normal tag less than and greater than signs, the exclamation mark (indicating a special tag - note that DOCTYPE is much the same way!), and the two dashes before and after.
|
||||
These must all be exact! If you do it wrong, <!-- trust me, I would know! --> your comment text will be rendered as normal text, which can be quite embarrassing.
|
||||
<!-- if you're reading this, you might be a turnip! -->
|
||||
<!-- spontaneous turnipification is a real concern! -->
|
||||
</p>
|
||||
<p>
|
||||
Comments are not generally considered <i>metadata</i> - they're information hidden from the user, but they don't actually
|
||||
do anything. Use comments to explain to other developers what your code does.
|
||||
</p>
|
||||
[/]
|
||||
[#template.html]
|
||||
22
site/introwebdev/week-2-web-inspect.html
Normal file
22
site/introwebdev/week-2-web-inspect.html
Normal file
@@ -0,0 +1,22 @@
|
||||
[!]
|
||||
[=title "Week 2: Web Inspector"]
|
||||
[=content-]
|
||||
<p>
|
||||
The Web Inspector is a cool little tool to analyze websites!
|
||||
</p>
|
||||
<p>
|
||||
Click Ctrl+Shift+I, and a bottom panel (or side panel on Chrome) will open. This panel contains
|
||||
the entire webpage HTML (editable!), and some other fancy stuff.
|
||||
We won't worry about the fancy stuff for a bit.
|
||||
</p>
|
||||
<p>
|
||||
Get in the habit of using the web inspector to debug your projects!
|
||||
It's usually the best first step - oftentimes, the web inspector will
|
||||
catch mistakes much quicker than manually reading through your code.
|
||||
</p>
|
||||
<p>
|
||||
Note that the web inspector often folds up tags to reduce clutter-
|
||||
you can unfold them by clicking the triangles.
|
||||
</p>
|
||||
[/]
|
||||
[#template.html]
|
||||
Reference in New Issue
Block a user