If you haven't created a website or are a novice, it can be very frustrating. Like PC's years ago changed every other month, web design has changed many times over the years. Although the shell of the site known as HTML (Hypertext Markup Language) hasn't really changed all that much over the years, new concepts evolved outside the language. The trick is to design the site with the look you want, usually by drawing it on paper, then creating that exact look on the Internet. Here's where CSS (Cascading Style Sheets) and Java Scripts come into play. Yes, there are many other languages for structure and design such as Python, Ruby, PHP, XML, JSON, SVG, and more but we won't confuse you with that now. Most of today's sites use CSS and Java Script.
Years ago sites didn't do much until you clicked a link. They were created using simple HTML. CSS and Java Scripts changed the way web sites look and act. CSS tells the page where to place items like images, banners, etc. with deadly precision. It sets the colors, font styles and sizes, backgrounds, exact placement of images and so much more. It also tells the page how to act when opened. Java Script also tells the page how to act but goes far beyond CSS. It tells banners how and when to slide or fade, it navigates the transitions of pages, it can be used to countdown to a time or date and much much more. The uses for both CSS and Java Scripts are endless. But enough about that. If you know basic HTML you've got the easy part down.
If you ever left clicked on any site then clicked on View Page Source what you see is just the shell known as HTML (Hypertext Markup Language). CSS and Java Scripts takes that much farther. If you're not familiar with HTML you're about to get your first lesson. Looking at the source code can be daunting with all the HTML language, Java Scripts, etc. But if you take the time to look through you will notice what is called the Shell. You will notice the tags that make up the Shell and it will look like this:
<html>
<head>
</head>
<body>
</body>
</html>
There is an opening tag and a closing tag. The backslash (/) indicates a closing tag. Between the <Head> tags are elements that are invisible to the user. There the page calls the CSS Style Sheet that contains the language used to write code that instructs web browsers how to display elements on the page. Inside that <Head> tag will look something like this:
<link rel="stylesheet href="assets/css/mycode.css">
The mycode.css is the name of the file that contains the code styles that render the displays on the page.
The elements between the <Body> tags is converted by the browser's Rendering Engine. It then parses the code and displays what the user sees on the screen. Within the <Body> tags you will see something like this:
<div class="mypage">my text</div>
mypage is a class that can be found in the CSS file (mycode.css). It tells the text (my text) what color it should be, the font size, letter spacing, how far it should be above or below the relative element and so much more. The CSS file is usually an exterior file within the root of the directory usually placed inside a folder. The point is that there's a lot that goes into a web page to make it appear as it does on your screen.
If you haven't yet worked with HTML here's a quick basic lesson:
Open Notepad or Text Document. Start by creating the HTML Shell. It should look like this:
<html>
<head>
</head>
<body>
</body>
</html>
Now we're gonna add a CSS style. The CSS style can either be added to the <Head> section of the page like we did above or in a separate file known as the CSS (Cascading Style Sheet) file. We're going to add it directly to the page. Between the <Head> tags add the following exactly as you see it here:
<style>
.text {
font-size: 30px;
font-weight: 800;
text-transform: capitalize;
color: #4771cb;
}
</style>
Your shell should now look like this:
<html>
<head>
<style>
.text {
font-size: 30px;
font-weight: 800;
text-transform: capitalize;
color: #4771cb;
}
</style>
</head>
<body>
</body>
</html>
Anything that is placed between the <Head> tags is invisible to the user. What they will see is placed between the <Body> tags. So, we're going to now place some text there. Place the following between the <Body> tags:
<div class="text">This is my colored text</div>
The backslash (/) indicates a closing tag. Your page should now look like this:
<html>
<head>
<style>
.text {
font-size: 30px;
font-weight: 800;
text-transform: capitalize;
color: #4771cb;
}
</style>
</head>
<body>
<div class="text">This is my colored text</div>
</body>
</html>
Div is short for Division. It is simply a container that groups styles with website content. Inside the <style> tag is a class element: .text. The <div> tag uses that class elelment to tell the text how to appear on the page. What you see in the <style> tag is self explanatory. The text size will be 30px, the font-weight is the boldness of the text. The higher the number the bolder the text. Text-transform capitalizes the entire sentence and the color of the text should be blue. Although there's much more to learn regardig HTML & CSS we just showed you a very simple one sentence page.
Now that we've created the page let's save it & check it out in a browser. You should have the above code in your text document. If not, feel free to copy it the paste in your text document. It is always better to actually write the code. You'll learn quicker that way. If you're not sure how to open a text document here's how. In Windows, open Documents then right click in the body section. Click on New, then Text Document. It should be blue so click outside of it so it turns white. Double click on it to open it.
You're now ready to write the code or paste it. Once your code's finished click on File, Save as then change the Save as type to All files. Click Save and save to Documents as index.html. Double click on it and it should open in your browser as a web page. If the code was done correctly you should see the sentence (This is my colored text) in all blue capital letters.
If you're not savvy with web development it's best to leave it to the "pros." If you have created your own site and it looks good, the next step is to upload the files to your hosting service. But before you do that there are some other things to consider. You need to answer some very important questions. Is the site optimized well enough to be found on search engines and rank at or near the top of searches? Does it load correctly and flow with all screen sizes? Do all the links work correctly? Are all the images sized correctly, load fast and have the necessary ALT tags? Is the HTML cleaned up so the page loads at the proper speed? All these questions are important when it comes to SEO optimization. They all play a part.
As always, we are here to help. We sweat the big stuff so you don't have to. We go far beyond just creating the site. We educate you so you can avoid high fees. Take the next step and contact us today. Call or text us at: 484-538-8958, email us at: info@spidergraphicdesigns.com or use the handy form.
Go to Step 4 - Upload files to hosting server.
