First Website. Which Tools For Creating Content?

NegativeSpace · January 10, 2012

I bought a domain and a hosting plan as a gift for someone for Christmas. Along with the gift, I said that i would include a working website. I've never built a website. I've never had the time nor the reason to build one. I have always wanted to learn, and now I have the time and the reason to do so. All I need is some help, just to get started, and probably not a whole lot of it as I am self taught on many subjects. I don't understand how to create the content, how to upload that content to the web server on which I rented space, and how to manage my content.

I'll ask this as my first question here; Can anyone suggest a free tool for me to use to create my websites content? What will the outcome of my work be? In other words, will I have a simple file that I can upload to a web server?

For my next hurdle; What do I have to do to put my content onto a web server, and make it available for access from the internet?

I guess I'll leave the questions at that for now. I do want to add one more thing, though. I might seem like a 'beginner' and, where creating websites is concerned, I am a beginner, but I've also been a learning computer lover and hacker at heart since I ran my first DOS command to play Oregon Trail from a live 5 1/4" floppy on a Tandy2000 in the late 80's (just to give you an idea of my general level of understanding).

Thanks for any help that anyone can offer!

digip · January 10, 2012

Ok. Lets start with the basics. Tools you will need, text editor(my preference is Notepad++) and a web browser. Check, you should have both those things ;)

Now. Open your text editor and type in some text and save the file to your desktop as index.html Double click it and your browser will obviously open it.

You've just create a web page.

Now. I know what you are going to say, or think I am being a smart ass or something, but that much what you just did, is your start. Next thing you will want to do, style the page with some color. Change the background color, change the font color, font face, etc. This is where you will need to start reading up about html.

The following, is a blank template you can save to your index.html file. Along with that, create a new file called style.css. We will use style.css to add all the colors and styling of the site. This is one method of doing it, but not the only way.

&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Web Page Example&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=100" /&gt; &lt;!-- Force IE8 Compatibility mode OFF --&gt;
&lt;link rel="stylesheet" href="./style.css" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Hello World&lt;/h1&gt;

&lt;p&gt;This is some info.&lt;/p&gt;

&lt;h2&gt;This is an H tag.&lt;/h2&gt;

&lt;p&gt;Use H tags for titles. Use only 1 H1 tag per page. You can use multiple H2 -Hx tags, but generally, for SEO, you only want one H1 tag per page, with a unique title. This is usually indexed by search engines, and you will also want to make it a &lt;a href="#"&gt;link&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;

style.css file:

body {
background-color: #fff; /* White background in hex, normally is six characters, but if all hex codes are the same, you can shorten to 3 ie #ff6600 = red and needs all 3 hexadecimal codes*/
color: #000; /* Black Text in hex */
}

h1 {
font-family: georgia, arial, sans-serif;
color:#ff6600;
}

h2 {
font-family:tahoma,arial,sans-serif;
color:#555;
font-style:italic;
}

That should get you started on the basics. Now go read up on DOCTYPE, and why it is important, and how it controls aspects of CSS (IE: margin:0 auto; in css, will center an item in doctypes of XML/XHTML 1.0 and up. Doctype html 4 for example, that css will not work(or should not in compliant browsers who use strict standards).

For making this show up on your web host, this depends on the type of web-server you purchased with your hosting. Generally, most sites are linux and apache based, and the easiest to work with in my opinion. When you bought your hosting, you should have a login to your hosts control panel, whether it be cPanel, or some other custom interface, most host providers have an area you login via the web to set things up. From there, you can setup various users, email addresses, and set up the files to be hosted on your site. If your site offers the options, enable sftp/scp/ssh only, and disable all stadnard ftp logins. Also make sure if your hosting comes with php, that they don't have any default scripts preinstalled, such as would show phpinfo(). Worry about that later since you are just getting started, bur be aware of what you do, upload, etc, will play a role in your sites security and how you keep it secure.

Ok, so you have all your sftp or scp info ready, you can use 1 of many programs to connect to your host with these credentials. Personally, I like WinSCP for windows and FileZilla for sftp. If on linux, you can just open a terminal and connect via sftp from the command line and work from there. Once you login with the ftp credentials, you will upload your files to your www directory. Depending on the host, when you login, this may be the default location and the only place you will have access to. If not, you generally will look for 1 of a few locations. Shared vhosts usually work from your home directory such as /home/username/sitename.com. if this is your setup, then put your index.html in /home/username/sitename.com/index.html and then open a browser and go to your site. You should then see your web page. Be sure to uplaod the style.css file in the same directory. Web servers are also case sensitive, so STYLE.CSS is not the same file as style.css to a website. Windows is not case sensitive, but linux is, and if you look at the above html, I call "style.css" specifically.

The rest is up to you, read up on how to add images, arrange them on the page, etc.

Sites to help you W3 schools, http://www.w3.org/, php.net and just google and get yourself some books on html, xhtml, php, javascript and the like.

Have fun!

Edited January 10, 2012 by digip

Infiltrator · January 10, 2012

W3C should get you started too.

How to web program using HTML

http://www.w3schools.com/html/

How to style a webpage using CSS

http://www.w3schools.com/html/html_css.asp

telot · January 10, 2012

If you want to see an example of a website created entirely in notepad++, checkout my awful website at telot.org!

Haha seriously, don't make a website entirely in notepad++...its really shitty - both the process of making it, and the result :)

If you're looking for a WYSIWYG (what you see is what you get) or GUI based website creator - checkout NVU. Its free, easy to use, and has a section where you can upload the page you just created to your web server. So no need to upload via SCP or SFTP or anything. Enjoy!

telot

digip · January 10, 2012

Haha seriously, don't make a website entirely in notepad++...its really shitty - both the process of making it, and the result :)

Let me ask you this, websites like backtrack-linux.org, hackersforcharity.org, social-engineer.org, secmaniac.com, lares.com, makeiturz.com, etc, what do they all have in common? They were created in notepad++, not a wysiwyg program. I code all my sites by hand. Would you say the results of those sites are "really shitty"?

WYSIWYG is just that, but if you want you want to make web pages without having to know how to code and make a web page, then buy Photoshop and Dreamweaver and it pretty much does all the work for you. If you want to learn how to code custom websites, then use notepad and read up on coding in xhtml, css, php and javascript.

Edited January 10, 2012 by digip

NegativeSpace · January 11, 2012

Ok. Lets start with the basics. Tools you will need, text editor(my preference is Notepad++) and a web browser. Check, you should have both those things ;)

Now. Open your text editor and type in some text and save the file to your desktop as index.html Double click it and your browser will obviously open it.

You've just create a web page.

Now. I know what you are going to say, or think I am being a smart ass or something, but that much what you just did, is your start. Next thing you will want to do, style the page with some color. Change the background color, change the font color, font face, etc. This is where you will need to start reading up about html.

The following, is a blank template you can save to your index.html file. Along with that, create a new file called style.css. We will use style.css to add all the colors and styling of the site. This is one method of doing it, but not the only way.
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Web Page Example&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=100" /&gt; &lt;!-- Force IE8 Compatibility mode OFF --&gt;
&lt;link rel="stylesheet" href="./style.css" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Hello World&lt;/h1&gt;

&lt;p&gt;This is some info.&lt;/p&gt;

&lt;h2&gt;This is an H tag.&lt;/h2&gt;

&lt;p&gt;Use H tags for titles. Use only 1 H1 tag per page. You can use multiple H2 -Hx tags, but generally, for SEO, you only want one H1 tag per page, with a unique title. This is usually indexed by search engines, and you will also want to make it a &lt;a href="#"&gt;link&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;
style.css file:
body {
background-color: #fff; /* White background in hex, normally is six characters, but if all hex codes are the same, you can shorten to 3 ie #ff6600 = red and needs all 3 hexadecimal codes*/
color: #000; /* Black Text in hex */
}

h1 {
font-family: georgia, arial, sans-serif;
color:#ff6600;
}

h2 {
font-family:tahoma,arial,sans-serif;
color:#555;
font-style:italic;
}
That should get you started on the basics. Now go read up on DOCTYPE, and why it is important, and how it controls aspects of CSS (IE: margin:0 auto; in css, will center an item in doctypes of XML/XHTML 1.0 and up. Doctype html 4 for example, that css will not work(or should not in compliant browsers who use strict standards).

For making this show up on your web host, this depends on the type of web-server you purchased with your hosting. Generally, most sites are linux and apache based, and the easiest to work with in my opinion. When you bought your hosting, you should have a login to your hosts control panel, whether it be cPanel, or some other custom interface, most host providers have an area you login via the web to set things up. From there, you can setup various users, email addresses, and set up the files to be hosted on your site. If your site offers the options, enable sftp/scp/ssh only, and disable all stadnard ftp logins. Also make sure if your hosting comes with php, that they don't have any default scripts preinstalled, such as would show phpinfo(). Worry about that later since you are just getting started, bur be aware of what you do, upload, etc, will play a role in your sites security and how you keep it secure.

Ok, so you have all your sftp or scp info ready, you can use 1 of many programs to connect to your host with these credentials. Personally, I like WinSCP for windows and FileZilla for sftp. If on linux, you can just open a terminal and connect via sftp from the command line and work from there. Once you login with the ftp credentials, you will upload your files to your www directory. Depending on the host, when you login, this may be the default location and the only place you will have access to. If not, you generally will look for 1 of a few locations. Shared vhosts usually work from your home directory such as /home/username/sitename.com. if this is your setup, then put your index.html in /home/username/sitename.com/index.html and then open a browser and go to your site. You should then see your web page. Be sure to uplaod the style.css file in the same directory. Web servers are also case sensitive, so STYLE.CSS is not the same file as style.css to a website. Windows is not case sensitive, but linux is, and if you look at the above html, I call "style.css" specifically.

The rest is up to you, read up on how to add images, arrange them on the page, etc.

Sites to help you W3 schools, http://www.w3.org/, php.net and just google and get yourself some books on html, xhtml, php, javascript and the like.

Have fun!

This is great stuff! I can't say it's exactly what I was looking for, but this kind of instruction is perfect for me. I need to have a basic website (pretty much something like a full page advertisement in a magazine) working pretty soon. I haven't started in with following any of your instructions yet, so I' not sure if I'm going to be able to do that using HTML and 'from scratch' programing within the next week or so, but I'm going to try. If I can't learn enough in a week to get a basic website going, then maybe I'll try to go the 'mostly automated' route until I have learned enough to go from scratch.

Thanks digip! Keep the suggestions/instructions/help coming everyone!

telot · January 11, 2012

Let me ask you this, websites like backtrack-linux.org, hackersforcharity.org, social-engineer.org, secmaniac.com, lares.com, makeiturz.com, etc, what do they all have in common? They were created in notepad++, not a wysiwyg program. I code all my sites by hand. Would you say the results of those sites are "really shitty"?

WYSIWYG is just that, but if you want you want to make web pages without having to know how to code and make a web page, then buy Photoshop and Dreamweaver and it pretty much does all the work for you. If you want to learn how to code custom websites, then use notepad and read up on coding in xhtml, css, php and javascript.

Ok ok ok, you got me. Let me rephrase it. If you don't know what you're doing and you code it in notepad, it'll be really shitty. I didn't at all mean to step on any notepad enthusiasts toes. I was more addressing the OP, and his want to quickly and easily come up with a decent looking webpage. If you want to really excel at it, by all means notepads the way to go - if you just want to make a quicky website for a friend/family member - wysiwyg is the best bet.

telot

Infiltrator · January 12, 2012

If you don't have the experience and want to get it done as quickly as possible, than Photoshop and Dreamweaver are what you need.

That's what I did in the past, now if you have the time and is willing to learn how to code webpages, than just use notepad as simple as that.

Edited January 12, 2012 by Infiltrator

digip · January 12, 2012

If you don't have the experience and want to get it done as quickly as possible, than Photoshop and Dreamweaver are what you need.

That's what I did in the past, now if you have the time and is willing to learn how to code webpages, than just use notepad as simple as that.

Only problem with that, is most people need to learn how to use Photoshop and Dreamweaver as well, two things that in themselves take time to master. I think for the person who learns to code by hand first, Dreamweaver helps afterwards. But thats just my opinion. As a web designer, I find dreamweaver slows me down and just gets in the way. Doing this long enough, I can see the web page in my head as I am coding them in notepad++.

NegativeSpace · January 14, 2012

Ok ok ok, you got me. Let me rephrase it. If you don't know what you're doing and you code it in notepad, it'll be really shitty. I didn't at all mean to step on any notepad enthusiasts toes. I was more addressing the OP, and his want to quickly and easily come up with a decent looking webpage. If you want to really excel at it, by all means notepads the way to go - if you just want to make a quicky website for a friend/family member - wysiwyg is the best bet.

telot

I really have two objectives here. One of them is to learn how to create a high quality website from scratch, and to learn to update and expand upon it with new functions. The other objective is to get a website working as soon as possible. I would never be happy with using WYSIWYG tools and leaving it at that, but I am happy to use them to get a website going, and then using genuine coding skill to make it a great website, that I created.

I'm the very curious type of person. When I start learning a new skill, I can't stop going hard at the learning until I feel like I am skilled enough that I will be able to continue to learn without much outside help. I faced a similar situation (though a much less complicated and drawn out one) a month or so ago, when I needed to recover a Vista Admin password for a friend. I just needed someone to tell me that I needed to boot live BackTrack on the machine, extract the hashes, and put a hash cracker to work, a process with which I wasn't familiar. After that, I was pretty much good to go on my own. This situation is pretty much the same, just need the pilot of the airplane to tell me when to jump. I'll pull the cord and hike back to the car when I hit the ground.

NegativeSpace · January 15, 2012

Only problem with that, is most people need to learn how to use Photoshop and Dreamweaver as well, two things that in themselves take time to master. I think for the person who learns to code by hand first, Dreamweaver helps afterwards. But thats just my opinion. As a web designer, I find dreamweaver slows me down and just gets in the way. Doing this long enough, I can see the web page in my head as I am coding them in notepad++.

.....and honestly, I wouldn't want to take the time to learn Photoshop, even if I was willing to pay a license fee. I would much rather take the time to learn GIMP instead. I want to start my journey (after I get a working webpage using WYSIWYG tools) by learning HTML, followed by the next most common language (which is ?) and so on, until I can do anything with a website that any other non professional can do. I'm sure that somewhere down the line I'll have to learn some design software of some kind, but I'm hoping that's later rather than sooner.

dtp · January 15, 2012

I think if you do not know how to code programming languages in notepad, then check out a windows application called "Kompozer" then you will need Gimp or Photoshop to create & edit images for the site, or you could use a template to make it easier but be careful a lot of templates contain evil code. Also while building the website make sure you use as many SEO things as possible like Key Word placements, Alt image names, Different headers for each pages containing the keywords you want for search engine result.. another good app is Wordpress, I find it better for SEO then Joomla or Drupal CMS, check out "CMS" (Content management systems) for more info, I am pretty sure your webhost has some kind of easy install of a CMS for free, but beware of the free templates for them, I have found some bad codes hidden in pics and all types of stuff.

Jamo · January 17, 2012

I hadn't time to read everything, but just form experience I have a few suggestions.

1. Some universities have all their course materials publicly online, and usually free for personal use. I haven't in this context used any, but at least fro programming I'v found plenty of university course materials to read.

http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/ might have something interesting to read.

2. Actually reading html code from other sites (prefer small and sitest that you except to be may by humans, not content management systems, like drupal)

Also firbug for firefox is a nice tool to explore code, in Chrome right click and "Inspect element".

NegativeSpace · January 18, 2012

I hadn't time to read everything, but just form experience I have a few suggestions.

1. Some universities have all their course materials publicly online, and usually free for personal use. I haven't in this context used any, but at least fro programming I'v found plenty of university course materials to read.

http://ocw.mit.edu/courses/electrical-engineering-and-computer-science/ might have something interesting to read.

2. Actually reading html code from other sites (prefer small and sitest that you except to be may by humans, not content management systems, like drupal)

Also firbug for firefox is a nice tool to explore code, in Chrome right click and "Inspect element".

I really like the "Inspect Element" function in Chrome. I don't use it very often so I wasn't aware of that. I suspect that the first couple weeks of learning are probably going to be the hardest, which is why I'm going to read a book about HTML before I sit at the notepad.

Anyone know a good HTML book?

digip · January 19, 2012

Anyone know a good HTML book?

Honestly, best book is not a book, its your browser. Want to see how something is done, go to the page itself, view source, delete some stuff, rearrange, etc, break it, then fix it. That in a nutsehll, is more or less how I learned, + google and some key sites like w3schools, php.net, javascript.com, etc.

I did buy a book back in the day, which was at the height of Internet Explorer 3 and IE4 just came out(1997 ish??), called "Dynamic HTML 4" or something like that. Not sure what I did with the book. Thats severely old, but the basics are there for anyone starting out, just don't expect most of that code to work, since it was geared mainly at IE4 or internet explorer. They put out another book jsut for Netscape at the time, and because I never used Netscape, I don't know how much they differ.

Personally, I would start with any books on XHTML 1.0 1.1 transitional. HTML 5 is the current standard, but aside from the doctype, its 90% XHTMl syntax for all of the html, which in itself is HTMl 4, just with proper tag closing (ie: <br /> vs old html <BR>) and everything must be lowercase. HTML 4 won't render current CSS standards, and some XHTML documents require specific doc type directives(for example, drawing vector lines on a map like google maps to plot points). HTML 5 has some cool stuff you can do with canvas, like program with OpenGL and even embed NES game emulaters via Javascript and Canvas, but thats more programming related ad higher end stuff.

Sign In

First Website. Which Tools For Creating Content?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members