Basic html, 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 images in Google and search. When the results come back 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, just how to expedite the process.

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 starts!

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 over-kill, 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.

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, and 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.

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 clicker.

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.

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” folder. They’ll all usually be separate files for separate pages and will stand alone in the folder. They will 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 on 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 your search. That would mean, how much content (related to the specific search) is on your page. It might check for page size, it might look at image size, 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 peoples images, page title, 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 million 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 different.) 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 index 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, etc.

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?

These are a few of the signs I personally look at whether I’m on the internet or viewing a 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!