Section 1: Webpage templates

We will create a simple website to help understand how html based websites work. To note: Text written in "/* [text] */" are for explanation. no need to include it in yours.

<!DOCTYPE html> /* To Declare what kind of page this is */ <html> /* the start of your page */ <head> /* to tell the website what appears at the tab */ <title>Your title</title> /* what shows at your tab's title*/ </head> <style> /*tells you what style the page has*/ body {background-color: lightgrey;} /*tells website that the background color of website is black*/ p {color: black;} /*tells website that font color for "p", which is "paragraph", is black.*/ </style> /* ends the stlying section of the page */ <body> /*beginning of the main content of the page */ <h1>Content</h1> /* h means header, goes from 1 to 6, increasing number = smaller font size */ </body> /* end of main content */ </html> /* end of page */

That will only create a basic layout, however. You should use "css" to spice up your webpage.

You need to name the file which contains what format you want the webpage to ".css". Then, you reference it in <Header> as "<link rel="stylesheet" type="text/css" href="directory to the file"/>".

this is how it works for the ".css":

body /* what you want to format */ { background-color: #000000; /*things you want to change */ font-family: Helvitica, Arial, sans-serif; } table, th, td /*you can format more than one at a time */ { border: 10px solid blue; } /*opening and closing brackets " { " and " } " */

Section 2: Useful Attributes

We can add images through the use of <img>

<img src="z" height="x" width="y" alt="text in case you cannot locate image"> src = source image, can be a .gif too z = where your image file is with respect to the page you are at OR a link x = a number or "auto" (auto = auto sizing) y = same type of value as x alt="" is important to show an alternative

for example, this(you can right-click the image and click inspect element to investigate it):

praying for a chance

another thing you can add is links, through the use of <href>

<a href="link">[what the link should say]</a> OR <a href="link" [target]> <img src="images" alt="text" width="value" height="value"></img> [target]=how the page will be opened, i.e. new tab, new window, on the same window/tab, etc what you can put into [target]: _self , _blank , _parent , _top

here is an example:

a surprise

Section 3: Hosting your own website

Now that you have made your own website, you can host it on a hosting website! I strongly recommend using github.com to upload your creations. You can upload any of your works there, be it a code, a website, or even an app. You can also track your progress, learn from other github users and restore from an older version. Create a repository and upload your contents in the repository.

Tips:

You should always keep an easily ascessible template of your website's general layout, so that you can save time in creating webpages.

You can go to w3schools and youtube to furthur learn how to add other stuff in, like audio and interactive content.