Basic html and Website Design

Basic HTML and Website Design.

Learn about html in 12 minutes!

Learn more about html in 12 minutes.

Scroll to the bottom of this page to learn how to build a WordPress Website. (step by step)

Today I will be discussing the basics or bare bones file structure explanation of a website. I’ll cover some marketing and I also want to discuss folders, file location, more free downloads, provide some basic html and give you tips as well. I highly encourage beginners to start here, but even if you’re an avid web designer you may find the information regarding marketing or the free tools useful.

Free color code download-for picking colors on your page.
http://free-html-color-code-generator.en.informer.com/

Gimp Free Download – This can be used to Edit Images, Headers, Banners, etc. There are lots of free YouTube tutorials on how to use Gimp!
https://www.gimp.org/downloads/

Sourceforge.net-A great place to find free tools.

To find Copyright free Images I usually type “copyright free (and whatever specific kind of picture)images in Google and search. It would look something like this, “Copyright free food images”. I include “food” because in this example I’m looking for copyright free images of food to put on my website. I use this same method to find buttons, headers, decorative website images and more.

When the results come back I make sure to click on “images” at the top of the screen because usually the results come from the “Web”. You’ll want to see all of the images, so by clicking on images you’ll see more images than if you’re stuck in the web results. You can go to sites and find images. I’m not telling you you shouldn’t. This is just a quick way to find lots of pictures and helps me expedite the process. You may decide to add content or an article before your pictures? If I know what my website is going to be about, I like to go find pictures to decorate my before I start writing content. (I never want to add too many images, and this is just a personal preference.) You can do what works for you.

Once you’ve chosen the perfect image: “Right Click” on the images to save. Scroll down to “save as” and name your images.

Quick note: If you know what your website is going to be about, for example if your website was going to be about food, you can name your images (search engine friendly) names that are relevant to the content you plan on adding. This is where optimization begins!

One thing to keep in mind is that you don’t want to overload your site with keywords, (stuff it too full of the same phrases or words) The search engines will recognize this and you’ll be punished.

Basic html and website design.

My strategy is to use my keywords and phrases no more than 8-10 times on a single web page. More than 10 is overkill, and has greatly reduced my search engine rankings. The same thing can be said if you don’t use your keywords and phrases enough in a page. The bottom line is that you want to compete. In order to do so, you’ll need to make some extra effort.

Instructions-When a Search Engine looks for your website, it’s looking at codes and files that tell it what to do and where to find a particular image. In order to stay neat, clean, and organized you can put your Images in a separate folder. (that will later go inside of your website folder)

To create this new folder you’ll want to right click on your desktop screen (make sure not to click on any other files or programs, but in an empty space in the background.) Once you right click on the desktop, some options will come up.

Many people would disagree with creating a folder on your desktop. When I teach someone, I like the idea of them having quick and easy access to all of their files and folders. They have plenty to think about, without having to search their computer to find everything. The desktop in my opinion is just an easy and convenient place to save and find their new project.

On your Desktop, in an open space, you can right click anywhere and then follow the steps below.

1) You’ll click “New”. 2) Scroll to “Folder” and click. 3) You’ll want to name the folder. Most people name it images, but if you think you can remember a “search engine friendly file name”, that may be another option? I still name my folder “images” so that I can easily find them, but it’s possible that I’m missing out on a good search term name?

Unfortunately, once my images are linked to a specific page or file, I can’t change the name of the folder or the web editor and browsers wont know where to find my images. It will have the wrong path, and the links wont work.

Basic html and website design.

Note: If I was building a webpage about food, I could name my images folder something like food images”, recipes”, my restaurant name” etc. (whatever keywords or phrase I want to optimize my website for. Keep in mind that you can over optimize and be punished for using a keyword or phrase too many times. I want to say that 8-10 times per page is good, but if it’s in your title, meta tags, images, icon, folders, or text, it won’t take long to over optimize. In this case I’d urge you to choose a new keyword or keyword phrase and begin optimizing for that particular search also.

Keep in mind that you can and should research websites and search engines to try to figure out what phrases are popular and currently working for other websites. I also want to urge you (because Search engines seem to be constantly changing) to check articles, blogs, websites, google standards etc to figure out your specific search optimization strategy, (or which words and phrases you’ll want to use.)

4) You’ll need to create a website folder too.

You can think of a website folder as the folder that holds all of your other folders, files, images, scripts, html, etc. Many call it a root folder, but for the purposes of this tutorial, you can just think of it as the folder that holds everything. It’s where all of your website folders and files can be found.

Use the same process I explained above for creating the images folder. This time you’ll want to name your folder something like “My Website”, or website. This is like a directory where all of your files for your Website can be found. The next step is to drag your “images” folder into your “my website” folder.

(Or whatever name you’ve given it?)

Simply left click on the images folder and drag it until it’s right on top of the “my websites” folder and click again or simply let go of the mouse.

If for some reason this doesn’t work, (it should) try opening the “my website” folder and then left click on the image folder and drag it inside of the “mywebsites” folder.

Note: In order for this to work correctly, all of your folders can be saved on your desktop. This way they’re easy to access and find.

Note: Many files don’t allow spaces in the file name. If you had an image for example named my best friend, you would have to call it mybestfriend.jpg without any spaces. Otherwise the browser wont recognize the file, because spaces are illegitimate in this case as in all cases when using an image file.

Basic html and website design.

Your very first web page will also go in your “my website” folder. The first page is always called index.html. This tells a browser to start at this page. It’s the beginning. Remember the first page is always known as your “index.html”. Additional pages can be named whatever you desire as long as you always remember to add .html at the end of every page. Don’t forget the period, and definitely don’t forget the html tag “.html” tells your browser that this is a hyper text mark up language (web page) It’s the basic instructions of how a browser should read the code in a website.

Note: Most web editors automatically add the .html tag for you.

So in this basic instructional blog we’ve basically covered how to build a directory and organize your files so that the search browser knows how to read the contents of your folder.

Just make sure that your images always go in your images folder, that your images folder is always inside of your “directory” or in this example the “my website” folder.

It’s very important to keep the right path to all of the files so that they link together correctly. Once your image folder is inside of your my website folder, you can start adding images to your images folder and begin planning your website design.

Your website pages or .html pages will sit separately in the “directory” or “my website” or “root” folder. They’ll all usually be separate files for separate pages and will stand alone in the folder. They’ll create navigation and link to the other pages of your site.

Note: It’s not uncommon for people to build their index.html or starting page, and then use the same design for the rest of the pages. It makes everything uniform, organized, and clean. It also makes navigating your site easier for visitors, is more professional, and may even help with search rankings?

This can be very beneficial to you, because once you build one index.html page and are happy with your page layout, you can keep this design for every page of your website.

In order to do this, you can right click on index.html, click copy, click paste and paste it where you want it. (inside of your website folder) You’ll want to rename it because it’s a copy and you’re already using the name for another web page.

Today’s lesson is on basic html and web design. Please come back for more free tutorials, strategies, tips, tricks and insider secrets!

(You can’t have lots of pages named the same thing or the browser wont know which one to load.) Once you’ve renamed it (and I hope you name it a search relevant and/or friendly term which could result in more traffic to your site) Simply copy and paste it into your “my websites” folder. If you want to make ten copies so that you have lots of pages to work with that’s easy to do. You may decide that one copy is going to be on your second page where you keep specific information. For example we’ll say you want to put recipes on the second page. It would then make sense to rename this page recipes.html.

I hope this makes sense to you? Most of your images have a .jpeg or .jpg at the end of them. This tells your browser that it should open the file as an image. If I had a picture of my house, it might be named house.jpg. Without this .jpg, it wont be recognized as a picture. They generally come with these extensions when you download and save them. Your web editor also need to recognize what kind of file images are, and what directory to go to and pull the image out of.

Basic html and website design.

When I think about a search engine, (we’ll use Google as an example) I think about someone typing a specific word or phrase into their search bar. The search bar (being a robot) is instructed to go find that word or phrase. While looking for it, I’m assuming that the search engine is looking for the most relevant information related to the search. That would mean, how much content (related to the specific search) is on the page. It might check for page size, it might look at image size, and it might look at whether or not someone can view my site on any device?

(This is known as responsive design, and my guess is that the search engine can determine the difference between a professional website, and an amateur site.)

Some other things I believe they look at are spelling, grammar, punctuation, page size, broken links, spam (information that’s not relevant) file sizes, etc.

They may want to make sure that your page is secure. Many sites offer an ssl certificate that encrypts your information and may possibly give your website better credentials with search engines.

You may also want to check your code with an html validator before you upload it to your host just to make sure you cover all of your bases?

Basic html and website design. Strategies, tips, tricks, insider secrets and tools!

There are free code validators online. Just type in free code validator. There are probably also several free download versions. https://www.htmlvalidator.com/download/

Is your Website linked to other Websites that cover the same topics and contain relevant information? A search engine may also be looking at your “network”. Your network is the other sites you’re linked to. The search engines love relevant content. They will be looking at (crawling) things like images, page titles, meta tags, network, site security, spelling, code, links, comments, design, and functionality.

They may also possibly rank based on page load time, which will depend on file sizes and page length?

Why not use Google to find out what Google currently uses to rank websites? There are probably a thousand websites, blogs and articles on search engine optimization alone. Research is your friend! You’ll learn what others are doing and what is working now.

If you really want to get technical, I’d go visit several high ranking web pages. (That aren’t paying for advertising) You’ll know whether or not they’re paying to be ranked at the top of the page because they’ll actually say “AD” or will be sitting in the sidebar. They may also be highlighted?

You want to go to the first website that isn’t paying for Ad placement on the first page of search engines. Obviously, the first page that isn’t paying for advertising and is still on the first page of Yahoo, Google, Microsoft, Bing or any other search engine is doing something right. You want to go to the site and look at their layout, keywords, etc to get an idea about what is working for them.

You may even decide to check multiple search engines to find out what’s working for specific ones and specific keyword terms. I believe that most use universal ranking standards, but you never know. You might find a niche in Yahoo or Bing that doesn’t exist in Google for particular search words, websites, or phrases? This would happen because of a large number of these websites and businesses in Google, that weren’t as common elsewhere. (Although, from my personal experience I’ve found them to be quite similar and often the results are almost identical.) This type of research can tell you how certain search engines work, how they index websites, and more.

Sometimes you can “right click” on a website (where there are no links or content) and scroll down to where it says “view source”. Click “view source” and many times the actual code used to build the page is revealed.

Quick Note: This doesn’t always work because many pages are now encrypted.

Quick Note: You NEVER want to copy someone else’s material. This is known as a copyright violation or infringement. They take it very seriously. I use the “view source” option to study what’s working in search engines right now. Good research equals good results.

Basic html and website design. Strategies, tips, tricks, insider secrets and tools!

Research can save you tons of valuable time and money. For example: If I wanted to sell something in the classifieds section of a magazine by mail order, I could go view the ads in the advertisement section of the magazine. (usually located in the back) These ads contain clues. The wording is known as ad or sales copy. I can study the ads to see whether or not they sound enticing or effective. Another strategy is to view the ad for several weeks, months, or years. Advertising costs money. Isn’t it unlikely that someone would spend money advertising if they weren’t making money?

Hint: Many libraries carry older magazines, that could be beneficial to my marketing research. Websites may archive some of their classified ad sections, which allows me to look at what was selling then, and what I think is selling now.

These are a few of the things I would personally look at whether I was on the internet or viewing the classified section of a newspaper or magazine.

I’m in a particular Business to make money, not to sell a particular item. That’s why I love the Internet. Your potential audience is huge. If you research and choose the right Market before you “start selling” random things that nobody is looking for, your success becomes more of a science, and less of a guessing game.

In future articles I’m going to get into actual html codes, ad copy, more tools and will probably dedicate an entire page to SEO or search engine optimization.

Build a wordpress Website step by step with a checklist
Approx 2 1/2 hours. How to build a WordPress Website.

Basic html and website design. Strategies, tips, tricks, tools, and insider secrets!

Have a great day!

1 thought on “Basic html and Website Design”

Leave a Reply