Introduction: How to Make a Webpage Using HTML and CSS.

We will be explaining how to create a website from scratch using HTML and CSS code!

All websites are programmed in HTML (Hyper Text Markup Language). It provides the structure of the webpage. While CSS (Cascading Style Sheets) are used for styling the webpage and making it look nice. If you learn HTML to make websites, It can be used to potentially get a job for a business that operates a website.

Your webpage you are creating will be private. If you want to make it into a public website, then you need to use a web hosting service.

Supplies

To start off, you will need to download a Text/Code editor. Some examples are:

  • Visual Studio Code: This is a free code editor and we will be using this program for this tutorial.

Download: Visual Studio Code - Code Editing. Redefined

  • Notepad++
  • Windows Notepad
  • (Any other HTML editor)

Step 1: Set Up

Start off by creating a new folder in your desktop named HTML. This is where all your images and HTML documents will be stored.

Once you are done, Open the folder in Visual Studio Code.

Step 2: Begin a HTML File

We can now create our HTML file. Start by clicking on the New File icon, and name it Index.html.

Step 3: Begin Writing HTML

HTML uses tags to describe what different parts do what. it consists of a opening tag and a closing tag

this is the standard way a tag is written:


<name>

""Code Goes Here"

</name>


The opening tag is the name of the tag along with box brackets around it.

The closing tag is the same as the opening tag but has a slash before the name.

Visual Studio Code writes the closing tag for you.

all your code/text should be in between the opening and closing tags.

________________________________________________________________________________

  • <!DOCTYPE html> explains the HTML document type. In this case this is an HTML5 Document. This should ALWAYS be at the beginning of the code.
  • <html> The tag that contains ALL of your code.
  • <head> is the tag for containing <meta> tag data, CSS code, and the title of the webpage
  • <body> Is the tag for containing code for what is displayed in the webpage.
  • <h1> Through -><h6> Are the tags for headings, <h1> being biggest and <h6> being smallest.
  • <p> This is for adding paragraph text.
  • <br> Line break (Does not require a closing tag)
  • <hr> Horizontal Line (Does not require a closing tag)
  • <div> Divider for organizing code.
  • <style> This is only for containing your CSS code.
  • <script> This is only for containing Javascript code.


  • <a href="Nameofwebsite.com">Text Displayed</a> This is for creating a link to another webpage.
  • <img src="Name of Image" alt="Text to display if image does not appear"> This is for displaying an image in the webpage.

*make sure your image is in the HTML folder that we created earlier.

________________________________________________________________________________

Step 4: Save Your HTML Document

press Ctrl-Shift-S on your keyboard. It will bring you to a save window.

Make sure the document is saved as an HTML file and make sure it is in the HTML folder.

You can also name your document before saving.

Step 5: Test Your Webpage

Click on the the html folder and click on the HTML document you created.

*If you don't see a image that you put in your code, Then make sure that the image is in your HTML folder.

Step 6: Begin Styling Your Webpage With CSS

Now that we know the basics of HTML. We will now move on to CSS. CSS (Cascading Style Sheets) is the language for styling your webpage. For example: We can change the color/font of the text in our webpage.


CSS uses a different syntax than HTML. For our CSS code to run, we need to put it in a HTML tag called <style>. To start off. We first need to learn about "Class Definitions".

Class definitions are placed inside of a HTML tag and are used to give a name to refer to for the CSS code.

ex. <tag class="classname">

Now that we gave a class to a tag, we can refer to it in our CSS code. Here is the example of what it will look like:

<style>

.classname {

"CSS Code";

}

</style>

*Note that CSS requires a semicolon (;) at the end of each line.

Also make sure that the classname has a period (.) before the name is written in the CSS code.

Class definitions are not required for the closing tag.

________________________________________________________________________________

Here are some of the basic CSS code for text and images.

Text:

  • font-family: Name of font; - This describes the font of the text.
  • font-size: Numberpx; - This describes the size of the text (in pixels).
  • color: Name of color; - This describes the color of the text (with Hexa-Decimal, RGB, or just its name).


Image:

  • border-radius: numberpx; - This describes how round the corners of the image should be (if the border-radius is half of the width, then the image will be completely round).
  • Margin-left: Numberpx; - This moves the image to the left of any text


  • <img src="Image" alt="Text" width: Numberpx;>

To change the color of the background:

<body bgcolor="Name of Color">

________________________________________________________________________________

Step 7: Misc.

Example of a webpage[Credit: Elliot Pickard: Zyklios]


Now that you have learned the basics of HTML and CSS, you can now create your own webpages! If you want to continue farther, you should learn JavaScript which will add functionality to your webpage. For example it can animate images and control multimedia!