We helped everyone setup GitHub accounts, where they wrote some basic HTML code to help them start their own websites! GitHub is essentially an online tool to help you program and upload your programs and anyone can access it like a real website! You can create a ‘repository’ which is a storage space where you can keep your projects, image files, code, text files etc.
Add a new repository: There should be a plus symbol in the upper right where you can choose to create a new repository. The name of the repository should be <your_username>.github.io.
When you create a new file, name it index.html and you can start coding in the text box below it! As we had discussed before, coding in HTML (Hyper Text Markup Language) allows you to easily make webpages that people can access and use (FUN!!)
Here is the full code, followed by explanations for each line!
<!DOCTYPE HTML>
<HTML>
<HEAD>
<title> WEBSITE </title>
</HEAD>
<BODY STYLE=”background-color:powderblue;”>
<h1> Welcome to my Web Site </h1>
<p> <font color=purple> Thank you for visiting my website. </font>
<a href=”http://www.netflix.com“>Click here to go to netflix! </a>
</p>
</BODY>
</HTML>
Explanation::
You start with a html doctype declaration, <!DOCTYPE HTML> ,which is the very first thing in your html document. It lets the browser know what kind of document to expect.
Then the html tag, <HTML> , is the heading and represents the root of the html document.
<HEAD> is a container for all the head elements like <title> <style> <link> etc.
<BODY STYLE=”background-color:powderblue;“> is used to define the style of the body. <style> lets you define the text color, font, font size, text alignment, etc.
The <h1> tag is an html heading. You can use html headings from <h1> to <h6>.
<p> signals the beginning of a paragraph/text.
<font color= purple> lets you change the color of the font inside the <p> tag to purple.
(there are a huge variety of colors you can use, just google it!)
<a href> lets you specify a URL of a link to a website.
Also note how each tag is closed by adding a ‘/’ in front of it, when its extent ends. </p>,</BODY> , </HTML>
After you’re done writing the code, scroll down and hit the big green button that says “Commit”, wait a few seconds and then open up a new tab, type in- username.github.io (where username is your specific username, that you chose when you setup your Git account)
You should now be able to see your very own website!!! In fact, anyone with access to the link will be able to see your website, so go ahead and tell your friends to check it out too!
Try it out and let us know if you need help with anything, we’ll figure it out together!
WiCS@CHS 