Writing HTML doesn’t have to be hard. It’s basically just text! You can type whatever you want in the source editor, and it will immediately appear on this page. 

So try adding some text in the editor! Go on, say something! Right now!



<p> However, there’s a problem. You’ll notice that you can't make separate paragraphs just by putting space between lines of text in the editor. All extra spaces and empty lines of text in HTML are automatically removed by your computer when displaying the page. This can actually be useful for reasons we’ll see later, but if you just want to make paragraphs it’s pretty annoying! </p>

<p> To start a new paragraph, you need to write something called a “p tag”. It’s just the letter p between less-than &lt; and greater-than &gt; symbols, like this: &lt;p&gt;. These symbols aren’t just for math! When writing HTML, they’re called angle brackets and they’re used for grouping stuff. (Kind of like parentheses.) The end of each paragraph also needs a similar tag with a slash that looks like &lt;/p&gt;. Check out how the tags are used in the editor to see what I mean. </p>

<p> (If you examine that previous paragraph in the editor, you’ll notice a difference between the “real” paragraph tags that actually mark paragraphs and some “fake” paragraph tags that I’m just using in this tutorial to show you how you would write them if you wanted to start a new paragraph. The fake ones have special ampersand &amp; and semicolon ; codes instead of less-than &lt; and greater-than &gt; symbols, but they show up as the correct symbols if you look at them on the page. You shouldn’t have to worry about this most of the time unless you also find yourself writing web pages about writing web pages, so relax and focus on the real tags in the angle brackets.) </p>

<p> Try adding a few paragraphs of your own to this page by writing them in the source editor, adding &lt;p&gt; and &lt;/p&gt; tags at the beginning and end of the text you added. If you enter all the symbols correctly, your tags should turn green in the editor and your new paragraphs will be displayed on the page with proper spacing around them. </p>

<p> (If you accidentally deleted something important, you can probably get it back by undoing, or by finding the “Show Original” button in the Tutorial menu.) </p>

<p> When you feel like you’ve got the hang of it, use the arrow → button at the top of the screen to continue. </p>

<!-- Hello, curious student! You found a secret paragraph! This text is hidden in the web page, but you can read it if you look at this source. Below this text is a little thing that changes the appearance of the web page. I’ll explain it later, but you can try deleting it to see what the web page would look like without it. -->

<link rel="stylesheet" href="tutorial_chapter_1_style.css" />