` tag, the `![]()
` tag uses attributes to provide more information about how you want to use the tag.
168 |
169 | Use the `src` attribute to tell your image tag the _source_ of your image, that is, where it’s located. In this example, we’re saying the image is in the same folder as our `index.html` page (as opposed to a subfolder) and specifying that the image's filename is `space.jpg`.
170 |
171 | We also need to describe the image in case some visitors to our website cannot see it. This could happen for several reasons—maybe our visitor is blind and uses a screen reader to access websites. Or maybe a glitch causes the image not to load for some reason. If that happens, our _alternative_ text, or `alt` text, will be shown instead.
172 |
173 | Let’s save and refresh the browser.
174 |
175 | 
176 |
177 | I resized the window so the whole page would fit in the screenshot, but if you're seeing a scrollbar, that’s totally fine!
178 |
179 | Depending on your image, you might want to make it smaller or larger. You can use the `width` and or `height` attributes for this. If you specify _either_ the width or height, the browser will maintain the image's _aspect ratio_—it won’t stretch or squish it. To set a width or height for the image, you provide a number which represents an amount of pixels.
180 |
181 | ```html
182 | 
183 | ```
184 |
185 | If we set the `width` to `300`, it looks like this:
186 |
187 | 
188 |
189 | ## Add notes to your code
190 |
191 | Sometimes, you want to put notes in your code—text that isn't displayed on the page but remains visible in the code. You might do this to help organize a document, leave notes (like todos) for your future self, or even hide some work-in-progress code you don’t want displayed yet.
192 |
193 | For example, I could leave a note to return and update my favorite board games.
194 |
195 | ```html
196 | Favorite board games
197 |
198 |
200 |
201 |
202 | - Dungeons & Dragons
203 | - Risk
204 | - Pandemic
205 |
206 | ```
207 |
208 | The browser will ignore anything between `` and will not render it on the page. This type of text is called a _comment_. Comments give you a nice way to annotate code since they're only visible in the code—not on the rendered webpage.
209 |
210 | Here’s another example of how I've wrapped multiple HTML tags inside a comment. Nothing in the comment will appear on the page—only in the source code.
211 |
212 | ```html
213 |
224 | ```
225 |
226 | **Your HTML code is public, even the comments.** Anyone can view the source code of your website, so don’t put anything secret or sensitive inside comments. To view the source code of a page, you can press a keyboard shortcut or find the option in your web browser's menu. It varies by browser. Check out this [reference on Lifewire](https://perma.cc/3WP3-R9XL).
227 |
228 | ## Give your website a head and a body
229 |
230 | I haven’t been totally honest with you so far. We’ve been taking a shortcut. We’ve been writing _only_ the stuff the browser will display in our `index.html` file. But every website has an invisible section. And now yours needs it.
231 |
232 | Remember how we wrap most elements in tags? We actually need to wrap the whole page in the `` tag. An HTML page is further divided into an invisible `` section containing information about your site, and the ``, where all your content goes.
233 |
234 | ```html
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 | ```
245 |
246 | To make our HTML document official, let's add a `doctype` line at the very beginning. The doctype is mainly needed for historical reasons, but it tells the browser, “Hey, I’m an HTML document, so please proceed to display me accordingly!” It’s okay to copy and paste that line and move on—don't feel like you need to memorize every little thing.
247 |
248 | ```html
249 |
250 |
251 |
252 | ...
253 |
254 |
255 |
256 | ...
257 |
258 |
259 | ```
260 |
261 | For now, let’s include two things in the ``: a title tag and a meta tag.
262 |
263 | ```html
264 |
265 |
266 | Blake's Homepage
267 |
268 | ```
269 |
270 | The `` tag controls the text that appears in your website's browser tab and the name of your site when it appears in search results. Nice!
271 |
272 | We can use the `<meta>` tag multiple times to give the browser extra info about our page. In this case, we’re telling it which _character set_ to use. All you need to know here is that UTF-8 text means special symbols like emojis will appear as expected. We'll include it first, before any other text elements, to make sure all our text is displayed properly.
273 |
274 | {% aside 'Note' %}
275 | If you’re getting confused by all the extra tags here, know that you can copy and paste this starting code structure so that you don’t have to remember it all right now!
276 | {% endaside %}
277 |
278 | Here’s the whole `index.html` file for reference:
279 |
280 | ```html
281 | <!doctype html>
282 | <html>
283 | <head>
284 | <meta charset="utf-8">
285 | <title>Blake's Homepage
286 |
287 |
288 |
289 | Blake's Homepage
290 |
291 |
292 |
293 |
294 | My name is Blake. I enjoy making websites and teaching others to do thesame.
295 |
296 |
297 |
298 | Check out these cool web games at
299 | Neal.fun!
300 |
301 |
302 | Favorite board games
303 |
304 |
305 | - Dungeons & Dragons
306 | - Risk
307 | - Pandemic
308 |
309 |
310 | How to make a website
311 |
312 |
313 | - Create an HTML file
314 | - Write some HTML in it
315 | - Open it with your web browser
316 |
317 |
318 |
319 | ```
320 |
321 | ## Update your live website
322 |
323 | These changes are looking pretty good. Let’s publish this page to the world. Head over to [your Neocities dashboard](https://neocities.org/dashboard). You’ll see the starting files plus the `index.html` file you uploaded in chapter 1 of this book. To make things a bit cleaner, I’m switching to the list view and deleting the PNG image and CSS file that were there initially.
324 |
325 | 
326 |
327 | Now click the _Upload_ button or just drag your updated files (the index page and the image) onto the file list.
328 |
329 | Once you’ve done that, click the link to your site at the top of the dashboard. That’s your newly updated LIVE website, which you made from scratch. How cool!
330 |
331 | 
332 |
333 | ## Up next
334 |
335 | In the next chapter, we'll take a brief intermission and get a text editor made for writing HTML.
336 |
--------------------------------------------------------------------------------
/src/03-intermission-upgrade-your-text-editor.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Intermission: upgrade your text editor'
3 | summary: 'Learn about and download a code editor like Visual Studio Code that provides syntax highlighting and other features specifically for coding.'
4 | permalink: 'intermission-upgrade-your-text-editor/'
5 | tags: chapter
6 | layout: 'chapter.njk'
7 | ---
8 |
9 | # Intermission: upgrade your text editor
10 |
11 | You’ve come a long way. Let’s take a second to appreciate that you opened up a simple text editor and created a freaking website by writing some HTML code. Way to go!
12 |
13 | Speaking of simple text editors, keeping everything indented nicely in HTML can get annoying. It can also be challenging to distinguish HTML code from our written content.
14 |
15 | 
16 |
17 | It’s not terrible, but we can do better. Let’s download an editor that’s made for writing code.
18 |
19 | {% aside 'Note' %}
20 | I’m using Windows for this part just for kicks, but everything I do can be done on Mac, Windows, and Linux.
21 | {% endaside %}
22 |
23 | ## Download Visual Studio Code
24 |
25 | Head over to . This free code editor from Microsoft works on Mac, Windows, and Linux. It can do many things, but we’ll keep it nice and easy for this book.
26 |
27 | Don’t let the busy screenshot on the homepage scare you. We don’t need all those advanced features for what we’re doing.
28 |
29 | Once you download and install VS Code, start it up. You may see a few instructional screens, but then you’ll be presented with a screen like this:
30 |
31 | 
32 |
33 | ## Open your project
34 |
35 | On the VS Code welcome screen, click _Open Folder_, then select the folder containing your web project. You’ll see your website files in the sidebar. When you open the `index.html` file, you’ll see your code in a nice view with line numbers and what is called _syntax highlighting_—parts of the code are colorized to be more easily distinguished from other parts.
36 |
37 | 
38 |
39 | VS Code also helps by making it easier to write code. It understands HTML and many other languages. When you start to type, it will give you code completion suggestions, which you can accept by clicking or pressing enter. It’ll also automatically indent when you create a new line, so you don’t have to manually enter tabs or spaces.
40 |
41 | VS Code opens your files in tabs. This is convenient later when your website has multiple pages.
42 |
43 | {% aside 'Note' %}
44 | VS Code lets lines of text scroll off the side of the page by default. If you would rather have text wrap to the following line, click the _View_ menu and choose _Word Wrap_.
45 | {% endaside %}
46 |
47 | ## Explore when you’re ready
48 |
49 | There are many cool things VS Code can do, but what we have covered here is enough to get you started. Think of it as a fancier Notepad. At the end of the day, it’s still just text in a file. We started our journey with Notepad or TextEdit to show that you can make a website with simple tools you already have installed on your computer—no magic or expensive software required.
50 |
51 | That said, using a code editor makes the HTML writing process nicer and more manageable. And when you’re ready, you can explore all the features VS Code offers. You can also try other code editors to see how you like them.
52 |
53 | For now, let’s get back to making our website!
54 |
55 | ## Up next
56 |
57 | Now that we’ve leveled up our text editor, let’s learn how to add _style_ to our website.
--------------------------------------------------------------------------------
/src/04-a-website-with-style.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'A website with style'
3 | summary: 'Learn about CSS and see how to link an external stylesheet like Simple.css to your website.'
4 | permalink: 'a-website-with-style/'
5 | tags: chapter
6 | layout: 'chapter.njk'
7 | ---
8 |
9 | # A website with style
10 |
11 | I think our website is nice. Its quiet simplicity is welcoming in a world full of distractions. However, it does look very plain and _un-styled_.
12 |
13 | We’re seeing the browser’s default styles—how it displays text and images without further instructions on how they should look. But most websites you visit don’t look this way. They have been designed to look differently. Their designers have given instructions for what fonts to use, what colors, and what page layout.
14 |
15 | In the land of HTML, we are only concerned with _what things are_—this thing is a heading, this other thing is a paragraph, here is an image, and so on. To define _how things look_ the browser uses HTML’s sibling language, Cascading Style Sheets, or CSS.
16 |
17 | One way to include CSS is by using the `
25 | ```
26 |
27 | If you included this code somewhere on your webpage, it would change the font of the `` tag—in effect, all of the visible text on the page. This CSS _ruleset_ says, "Set the body font to Gill Sans or, if that font isn't available, set it to whatever your default sans-serif font is."
28 |
29 | {% aside 'Note about fonts' %}
30 | Serif fonts look like this. They have small strokes, called _serifs_, that protrude a bit from the larger ones. You will typically find these in books and newspapers.
31 |
32 | Sans-serif fonts are those without serifs and typically have a more simplified shape to their serif counterparts. They look like this. They are popular on the web and for user interfaces.
33 |
34 | Monospaced fonts look kind of like typewriter text. Each letter takes up an equal amount of width, which is handy if you want to line things up. They are a popular choice for displaying computer code.
35 | {% endaside %}
36 |
37 | That's a totally valid way to use CSS. But you will often find people putting their style rules in a separate file. Something like `styles.css`. The main reason for doing that is that it makes it easier to share styles across multiple pages—it prevents you from copying and pasting your `
44 |
45 |
46 | {% block scripts %}{% endblock %}
47 |
48 |
49 |
54 |
55 |
56 |
57 |
58 | {% block header %}
59 |
69 | {% endblock %}
70 |
71 |
72 | {% for chapter in collections.sortedChapter %}
73 | {{ chapter.content | safe }}
74 | {% endfor %}
75 |
76 |
77 |
105 |
106 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
32 |