Welcome to How to Make a Website

Steps Before Vim

Hi if this is your first time making a website great. I am going to go through the procces of setting up and making your first website.

First you need to make sure you have a github repository, and make sure it's linked to terminal. If you have this done you're almost ready.
Finally make a file for all your websites to go in like Practice the practice folder is where all your websites will go. You can name your folder somthing else if you want but it will make following later steps a bit more difficult.

First Website

In the terminal, make sure you're in your practice folder, and then type this into the line

echo "your text" < practice.html Enter

Then type ls and make sure that you have a new file called practice.html

This will add the text to your website you can now visit your website name of repo.github.io/practice/practice.html, your website will look pretty bland right now don't worry we will make it colorful later.

Starting vim

Now we are going to be editing our website type vim practice.html this is going to send you to vim. Vim is a code editing software that allows you to edit your website.

You can type whatever you want on vim though certain things might not work so keep it simple just words for now.

When your done writing what you want hit escape and type :wq. This will save your work then send you back to terminal. These next steps are IMPORTANT do not skip them.

Once you're back in terminal type git add practice.html this will add you updates to github
Next you will type git commit -m "add text" this will tell github that you are certain that you want to add your update. REMEMBER TO ALWAYS ADD -M OTHERWISE TERMINAL WILL BE MAD.
Finally type git push that pushes your update to github to update your website. ALWAYS REMEMBER TO DO THIS.

Next time you want to edit your website just use the same steps as above.

Starting HTML

In this you will be typing the most minimal HTML you can type. Later we will add font color and more.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Homepage</title>
</head>
<body>
    <p>First website</p>
</body>
</html>

This code is the minimal HTML you can type. The building blocks for all websites. Without this you can't link stuff put images, and much more.

What about new lines, look below

<!DOCTYPE html>
<html lang="en">
<head>
<title>Homepage</title>
</head>
<body>
<p>To add new lines</p>
<p>Just add new lesser than and greater than signs with p in them</p>
</body>
</html>

Most of the code after this will be going into the body unless I say that it goes into the head.

More Advanced HTML

There are many different things you can do with HTML as I said it is the building blocks for everything. Now I am going to tell you some things you can do with HTML

Some Code to Make Your Page Look Better

First use <pre> to display preformatted text for things like music or poems.
<pre>Enter a poem</pre>
Second us <kbd> to show keybord inputs like ctrl commands Ctrl+shift+q.
<kbd>Enter Command</kbd>
Third us <br> to create a new line of text within one line. Or use <hr> to do the same thing but with a line in between
<br>

<hr>
Fourth use <del> to cross stuff out.
<del>Day</del>
Fith you can use <mark> to highlight stuff.
<mark>Enter Text</mark>
Sixth <sup> is for putting numbers or letters above the avarge text, and <sub> is for putting stuff under the original text as you can see below.
2<sup>nd</sup>

h<sub>2</sub>o
Seventh use <h1> you can use everything from h1 to h5these are headers, the numbers determain the size of the headers.
<h1>Enter Text<h1>
Eighth add hyper link to your webiste with this command
<"enter website url">Your Text</a>

This will add the url to your text.
Finally use <ul> and <li> to make a list. Also use <ol> for an ordered list use this instead of <ul>, and for a defintion list use these <dl> > <dt> > <dd>
<ul>

<il>Enter Text</li>

</ul>

<ol>
<li>Enter Text</li>

</ol>

<dl>

<dt>Enter Text<dt>

<dd>Enter Text<dd>

</dl>

In the code above there is the code for all the different types of lits.

These are some tips to format your website the way that you want. Like making a list or or adding headers.

These are essential if you want your website to look good

How To Tables

Now tables are very hard and take a long time to make so I am going to show you just how to make it so you don't get confused.

What you see below is the base code for a table. While it might be confusing I will try to explain.

<table>

<tr>

<th>Subject</th>

</tr>

<tr>

<td>Enter Text<td>

<td>Enter Tex<td>

</tr>

</table>

This is a simple graphs code that shows you how to make one. But it can be much more complicated depending what you want to add. Also I looks very complicated but once you understand it is much easier.

Some CSS

This is just a small bit of CSS to make your background and text color look better.

Body {

color: white;

background-color:black;

font-weight: Bold; }

This goes in the head.

HTML/CSS Valid

Always make sure your HTML and CSS code are valid.

by using this code <script src="js/validate.js"> use this if your js validator is in the practice folder.

If your js validator is not in the practice folder then use this <script src="../js/validate.js"> this will pull it from another file to use it.

Some Commands to use Vim Faster

Shift a insert at the end

$ to go to the end

Insert mode is I

Exit insert mode esc

:w to save

:q is to quit

:wq save and quit

:q! Delete all??

0 back to beginning

W skips words

Dd delete

U restoree

y y copie p paste

Use tab to autofill

Up and down to go through memory

Use shift V to enter visual mode from here use Y to copie and P to paste on the line below

Finally Link for a Site to Teach HTML Better Then I can

HTML Learing