How to Make a Website

By: PaperPlane 5200

Overview

To make a website, you will need some knowledge of basic HTML code. The less complex the page is, the less HTML you need to know. There are two other codes that you can use to style your page: CSS and Javascript, but I won't go into that much detail in this website. Then you will need a FTP client program, like FileZilla. Another type of program you will need is a text editor. One that supports HTML tags, like DreamWeaver, is helpful. You will need to buy a domain name from a website like Godady.com and hire someone to point the domain name to a server. Do you want to build a website? The first step is to learn HTML.

Learning HTML

HTML Structure

The basic structure in HTML is called tags. Tags are used to start headings, lists, paragraphs, etc. The first tag you will learn is the <p> tag. It is used to start a paragraph and is commenly used in HTML. Any tag is inclosed in carrots< >, and the end tag has a slash after the open carrot </. For example, if you wanted to display “Hello World” on your page, you would type:
<p>Hello World</p>

Some tags need attributes, like the <a> tag. The <a> tag is used to create hyperlinks, or links to other web sites. The attribute it needs is href, or the website's URL. When you are defining an attribute, you have the attribute, an equal sign, an open quote(single or double, it doesn’t matter), what you want the attribute to be, and then a close quote(it must be the same type as the first quote). When using the <a> tag, you enclose the hyperlink text in the open and close tags. A link to this webpage that says "this webpage" would look like:
<a href=’https://www.montegraphics.com>this webpage</a>

Some Common HTML Tags and Attributes

Head and Body Tags: In every HTML page, there is a <head>> tag and a <body> tag. In the head tag you put the title of your page, enclosed in <title> tags. The title is the name that appears on the top of the browser. You put favicons here, which we will get to later. You put <meta> elements between the open and close title tags, which we won’t get to later. In the body tag, you put all of the content of the webpage, even the top level heading.
Headings: There are 6 headings, <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> is the top level heading, <h2> is a subheading, <h3> is a sub-subheading, and so on. There are no attributes for these tags. One thing I thought was funny was that the size of a <h6> heading is the size of text without any resizing.
Line Breaks and Horizontal Rules: There are two things you would need to know before you can understand line breaks. One is how HTML handles whitespace, which is spaces, returns, and tabs. One space counts as one space, but two spaces also counts as one space. A return counts as a space. The other thing is that some tags don’t need an end tag. Sometimes those tags are used to define things, such as the <meta> tag. Other tags like these don’t make a change to a certain part of text, but rather a change in one spot in the text. The line break tag, or <br> tag, is one of these. It is equal to a return or an enter in normal text.
The horizontal rule tag, or <hr> tag, is also like the <br> tag, in the sense that it doesn't need a close tag. Unlike the <br> tag, it doesn't deal with whitespace. You know how in some books when there is a break in time there is a line through the middle of the page? That is a horizontal rule.
Divs: A div is a division of a page. You can assign a div an ID or class so you can target it using CSS. You can bypass the CSS by using the style attribute, making the attribute whatever type of style you want, a colon, the actual style, and a semicolon. You can repeat this as many times as you want.

Favicons

To create a favicon, you will need to know what one is. A favicon is the icon next to the title of the page. To create one, you will need an image editor, like Photoshop. Create a 32px by 32px canvas and save it as favicon.png in the directory of your website. In the head section of your code, put:
<link rel="icon" href="favicon.png" type="image/png">

Embedding Videos

To embed videos, you use the <iframe> tag. There are 4 attributes it needs: the width, the height, the web sites the video is on, and the frame border. You also need to tell it if you want to allow full screen. To get the code for a youtube video, you go to the video, click on share, go to the embed tab, and copy and paste the code into the HTML. You don't need to change anything about it; The <iframe> tag and attributes are already there. To embed this video, I used:
<iframe width="560" height="315" src="https://www.youtube.com/embed/NEWkZcp3650?list=PLDMK7KVSBbPfOYw9_wAZagnahjo-nvtgZ" frameborder="0" allowfullscreen></iframe>
Ignore the line breaks in the text; this is because one part couldn't fit on the rest of the previous line.