Novice Web Design: My first website
I strongly suggest skimming through the basic html tags and their function, here. Please note, this is not an article about HTML5. Everything you learn here, however, can be used in HTML5.
Me nostalgia’ing
I remember when I first laid eyes on HTML source code, back in the day when Myspace was popular. I would make things bold, underlined, and italic. The simplest HTML you can use is font style, such as <b>, <i>, <u>, <h1>, <p>, <li>, etc.. However, in order to use these you must either be editing your myspace, posting a comment, posting on a forum, or writing your own .html web page.
From the ground up
This is the first time, ever, you have created an html page from scratch. That’s okay. We’ve all been there. By the end of this article, you will be able to create a basic website, and understand how it functions.
In this tutorial, I will be creating a personal website that has details about myself and my logo.
Time to hit up paint
If you are using a windows computer, open up paint and make a logo- If you are using Linux, pull up gimp- and if you are a Mac user, you can get Gimp here for free. Create a 75×75 graphic. In my case I made an eyeball logo (left). Save it as “logo.jpg” in a new folder called “mywebsite”.
Open notepad, or something similar
I have used Notepad++ for many years now, and think it is the best for web design. If you have windows, I strongly suggest you give it a look. When we create .html pages we want to be sure to use the most basic word processor. For example, do not use Word, as it is used to make html files half assed. We are going to be writing html code, and not simply building it with a program. If you are on windows use word, and mac/linux users should use its equivalent.
We will be saving our file as index.html in the same folder as our logo
By naming it index we are telling the browser “this is my websites index/main-page”. This is the home page of the website, were you links to your other pages. The .html extension tells the browser to interpret the code in the file as HTML.
Lets not get carried away, we still need to write some code to create our website.
Coding
Every html document should have the <html></html> tags encasing the entirety of your code. Nothing falls out of these tags. These tags tell the browser “this is where the html code is”. Next, we want to show the world our text, images, etc. – and to do this we need to tell the browser to display it. We use the <body> </body> tags to encase what we want to display visually on our website.
I use an <h1>, header, tag to display my name, and use the <img> tag to display my logo:
<html> <body> <h1>Shane's First Website</h1> <img src="logo.jpg" width="75" height="75" /> </body> </html> |
Save the file as index.html and open it up with a browser. Wallah! You have created a very basic html page! I will add in a paragraph about myself using the <p> tag, and use the <a> tag to include my email address (in href”" use mailto:youremail@email.com to create a link that opens the users email program).
<html> <body> <h1>Shane's First Website</h1> <img src="logo.jpg" width="75" height="75" /> <p>I am a young entrepeneur and web designer from Las Vegas. You can contact me at <a href="mailto:enash131@gmail.com">enash131@gmail.com</a></p> </body> </html> |
Blaaaaah posting up in your website