Making a Farley Basic HTML CSS JS Web page, that will take a VERY long time to make
Coding an HTML CSS JS Website (How to Code) Part One: Teaching the Basics of HTML
I’m going to start by saying this is going to be HTML, so I hope you know the basics of that. Also, it’s going to get very boring, with me just repeating the same thing over and over again, so you can just copy and paste everything in if you’re following along, otherwise, you might just want to skip reading the code. I hope you have a fun time!
So, we’re going to start with the basics of HTML. This is going to teach the user h1 - 6, p, id, comments, and class: This will teach the user how to do h1. But first we need to know some entity names.
". Those are the basic names you need to know besides
&, which is
& (for ampersand). So let’s write out the first line of code.
We need to start by typing the body, head, html, and doctype of are repl. So let’s get started:
<!doctype html> <html> <head> </head> <body> </body> </html>
That’s really it. So you can type or copy and past (
ctrl + c to copy
ctrl + v to paste) that code into your repl (or whatever code editor you’re using, I’m just supposing that you used repl, since you’re on repl.it right now). Next, in the head, we’re going to start on the first page. We’re going to type the title:
<html> <head> <h1> How to code in HTML, CSS, JS </h1> </head> <body>
I also added some of the things we have already typed, just to show you where we’re typing it. Later, in chapters two - four maybe, we’ll add a table of contents. So, now we’re going to type the title for the paragraph about h1 - 6.
</h1> </head> <body> <h2> H1 - 6 </h2> </body> </html>
And now what we say about it. This
<p> is going to have an id. This is what an id tag looks like:
<p id = “this-is-the-id-it-cant-have-special-carrecters-or-spaces”>that was a long id</p>
<p id=”text”> can be used for
h1 also. We will use them when we get into using CSS to give our webpage style.
Right now, I’m going to take the time to tell you what HTML, CSS, and JS stand for right now:
I’m sorry if the highlighted letters look weird to you. Now let’s get on to coding the
<p> with the
<h2> H1 - 6 </h2> <p id=”p1”> h stands for header. The number afterwards tells the browser how big it is. h1 is the biggest, and h6 is the smallest. You would type them like this: <h3> This is where the text goes </h3> Also, make sure you type </h3>, just so the browser knows that that was the end of the h1! </p> <!--that was all inside of the p. this is a comment by the way--> </body> </html>
That was a lot! We had a bunch of entities, but basically that would explain how to use the
<h1> tag. And that’s all it did. And it took like ten lines of code (or something). The others won’t take as long, and that’s why I’m saving this for a new post. I hope you check it out soon! I’ll attach the finished repl to this post. If you want to see the original post, just follow this link: https://docs.google.com/document/d/1p9ZqYYY9MdpwnJmCLFfiwvmMJc9bnquJfVC5Y0hnXMk/edit, which is to a google doc which I originally. You will have to ask for permission, and I will let you in as soon as I can. Or you can give me your email address, and I can share it with you. I, sadly, won’t be able to give you editing permission, just because I don’t want anybody to delete everything on it. Goodbye! And have a good day.