The beginners guide to html.
Thank you for visiting our page, “The beginners guide to html“. I hope you find the information valuable and useful!
Before we begin there are a few things I’d like to explain. The first is that when I first started learning how to code, I had no idea that there were free tools and software all over the Internet. Many can be downloaded. Many can be used on a website, and many come in codes that you can copy and paste. (Such as Java script.) Copy and paste has become second nature to me. It saves me a ton of time.
If I create a layout that I’m happy with, I can model my whole website after it. I do this by either copying the code and pasting it in a new text document, or I can simply right click on the document itself, click copy, and paste it where I want it. I’ll also need to rename it so that it doesn’t have the same name as the original document. (If you don’t rename your files, your computer will assume that because they have the same name, they’re the same document. It will try to replace your original copy with the new one you’re trying to create.)
To rename a file simply right click on the document and scroll down to rename. Click rename, and name the file whatever you’d like. Just remember that if you’re building a website, the file name should always end in .html Example-Page2.html
Example-Your first page, also known as your home page, will always be named index.html. index.html tells the browser that this is your home page. Other than your home page, all of the other pages can be named anything you’d like.
Tip-When I name a document I try to name it something relevant, (to the content it contains) something I can remember, and I often think about search friendly terms that people might type into their search bar. This is the first step to SEO or Search Engine Optimization. I can keep this in mind when I’m naming my folders and images as well! It helps draw more organic traffic to my website.
The second thing I want to bring up, (this is why I often recommend that beginners think about building a website with WordPress. WordPress is one of the most beginner friendly platforms available, because it doesn’t require you to learn 5 different coding languages. The only thing required to build a WordPress website, is for you to become familiar with the way things work in WordPress. Basic html has changed big time since I began coding. Now there’s an html5, CSS, Java script, responsive design, and more involved with building a professional website.
The above are basically different coding languages that have to do with the page structure, functions, layout, and more. A responsive design layout, is a website that will appear wonderfully whether someone is browsing on their personal computer, laptop, tablet, cell phone, etc. You can think of these different languages or codes as instructions that a computer or browser will read and follow to build your page. Java script is usually a function that needs to be performed or an action you want to take.
The beginners guide to html.
In basic html there are codes inside of these two brackets. < and >
html-is hyper text markup language. The html tells the browser what kind of document it’s looking at. You can create a new web page in your text pad or notepad. You change the name of the document to name.html instead of name.txt to make it a web page or html document. By adding .html to the end of your page name, you let the browser know what kind of file or document it is. Example–homepage.html or index.html (The index.html page is the first page of your website!)
The < html > element is always the first tag on a web page. So to start building your first web page you’ll open up notepad and type this code exactly as it appears.
< html > This element means that it’s Hyper Text Markup Language.
Now the browser knows that it should read this document as an html document or web page.
There is an opening element <html> (which means this web page starts here, and a closing </html> element, which means that ” this is where the html or “web page” ends.
The brackets represent a rule or function. If you’re done with the page you’ll want to close it with the closing element. </html>
Tip-Anytime you want to close an element you’ll add a forward slash like this </title></head></body></html> inside of the brackets.
Some other elements that are always present in a web page are the-
- Title element-<title> This is the title of your page.
- Head element-<head>is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more.
- Body element-<body> This is the body of your page, or where most of your content is usually found. Just like in the example above, to open your the body of your web page you need a <body> element, and to close, you’ll need to specify that you’re at the end of the body by closing it. </body> Now the browser or computer know that this is the end of the body of your page. The body as a general rule always contains most of the content that makes up your web page.
- Meta elements-<meta> Meta tags are tags that can be used to give a description of your web page or website, add keywords, and basically tell the browser or computer more about your pages and website. They are rumored to be vital to search engine optimization, and thus good to learn.
- Closing elements-Whenever you’re done with a section of your page you need to close that section. You do this by adding a forward slash.
Example–</html>This is the html closing element or the last element or code on my web page.
</head>This is where the head section of my web page ends.
</title>My title goes between my opening head element and closing head element.
<html>This is an html read document. This element means open this page here, and follow my code.
<head><title>beginners guide to html</title>
<body>You’ll find most of my content between the opening body element and closing body element.
</body>I’m done with the body of my web page.
</html>This is the close section of my html document. I must include it for my web page to load correctly.
To close any section always add a forward slash before the section name in the brackets.
</html> close the html document.
</head> close the head section of my document.
</title> close the title section.
</body>close the body section of my document.
There are lots of other elements that you can use to achieve certain results on a web page. For example <u> means underline this text, <b> means make this text bold.
Example-<b>Now this sentence is bold</b>
Notice that I had to close it when I want it to stop being bold by adding the </b> element.
Example-<b><u>Underline this sentence.</u></b>
I wanted the sentence above to be bold and underlined so I added both of the codes or elements. <b>bold</b> and <u>underline</u>I also made sure to close them when didn’t want the rest of my page to be bold or underlined.
The only difference between opening elements <html> <head> <title> <body> and closing elements, is that when you’re done with that particular section of your web page you have to close it by adding the forward slash to the element or tag.
<br>This is a break tag or element. It tells the browser and computer that I want to skip to the next line here.
Here’s a sentence. <br><br>
<center>This means center everything between this tag and this.</center>
I told my computer that I wanted to skip two lines or to make two breaks. </br>And here I turn it off, to go back to regular editing.
<br>Skip a line.
Skip a line, or skip to the next line. (like hitting enter when typing.)
<center>Center everything between these two tags.</center>
It’s like feeding your computer or the browser the instructions for your web page! I’ve never used most of the elements or tags that are available to build my websites, but if you’d like to see most of them, and what they do you can click here.
The beginners guide to html.
Below I’ve provided a list of free tools, and a couple of videos you can watch. There are all kinds of free resources on the Internet.
Tip-If you want to know what code was used to build a website you can-
- Go to a website.
- Right click somewhere blank on the page, (in other words you won’t want to right click on a link or banner, but you’ll want to click on a blank space or on regular text on the website. Now that you’ve right clicked on a web page–
- Scroll down to the option that says “view source” or “view page source“.
- The code that was used to build the page you’re looking at should appear.
Quick Tip-In marketing I want to know what people are doing right and what they’re doing wrong. I can apply these things to my own work. If I go to Google and type in a search, the first 10-50 or so results are the most popular. When I view a pages source code, it can give me an idea about what the top 10 or so websites (for my search query) are doing to be ranked so high in Google, Yahoo, and other search engines. That’s very valuable.
I’ll often go directly to the page, study the home page, links, meta tags, keywords, and source code to try to find out what’s working for them. If I know what’s working for them, I know what I should do to be successful. Research and hard work are more valuable to me than putting in lots of effort and doing things wrong. The moral of the story is that it pays to do things right.
To open a text document–
- Right click on your desktop screen. (in a blank space) and scroll down to “New”
- Once your mouse pointer is over the new option, click new. A new box should appear that has several options. You’ll want to scroll down to where it says “Text Document” and click on Text Document. It will create a new document, which you’ll need to name. Remember above when we said we need to name things according to the content it contains, or possible search queries? Keep this in mind when naming your files and documents.
In the beginners guide to html I provide a lot of color coded “Tips” to emphasize what I think is important for you to remember. Below is a basic or bare bones web page or html document.
<html> This is an html file.
<head> This is the head of my document.
<title>This is where my title goes.
</title>This is where my title ends
<meta>These are my meta tags.
</meta>This is the end of my meta tags.
</head>This is where the head of my document ends.
<body>This is the body of my document.
The body is where most of the content on
my website goes.
</body>This is the end of the body of my
</html>This is where the html ends on my
page. I close everything out with this one.
As you can see above your elements need to be in order for the browser or computer to read them correctly. The above is a general blueprint of a basic websites code, (the skeleton, or instructions) or the codes needed to make a basic website function properly. Whatever is between the opening and closing tags is that part of your web page.
Tip-When I do things I like to stay organized. Because I have so many files, Images, accounts, and passwords, I like to store all of the information in a text document that I keep on my desktop.
When you build a new website, you’ll need to create a new folder to store all of your website files and documents. I often make a separate folder for images, (to stay organized) and then “drag and drop” my images folder into my website folder. I make this separate folder to keep everything nice and neat.
Your “website folder” contains all of the files, images, web pages, notes and more that are your website. It’s the files that create the website.
To make new folders–
- Right click on your desktop. (on a blank space)
- Scroll down and click “New”
- In the new box that appears, you’ll click “folder” and your computer will make you a new folder, which you’ll need to name. (Remember to name your folders so that you’ll know what they contain, and/or are search engine friendly names. (Search friendly names are keywords that people are likely to type into their search bar) In other words if your website was about food, you could name your new files with food relevant and page relevant names.
Below are two images of me creating a new folder to hold my documents.
So above I made a new folder to store all of my website files. I can make a new folder for anything I want to store. All you’d need to do in the example above is rename your folder something relevant, so that you’ll remember what’s inside of it. You can store text files, html files, an image folder, and more inside of this folder.
Tip-To drag one folder into another folder, left click on a folder and drag it to the folder you want it to go in. This is called “drag and drop”. In the below example I want to drag a folder that has videos in it, into my new folder. I left click and hold on the “videos folder” and now I can drag it to my “new folder”. When I have the folder where I want it, (right over the new folder I simply let go of the mouse or clicker. My videos folder can now be found inside of my “New folder”.
A website is basically a bunch of files inside of a folder. Browsers and computers are familiar with the code languages so they’ll know how to read your files as long as the code is written correctly, the files are named correctly, and follow the right destination path.
An image file might end like this image.jpg, image.jpeg, image.png, the extensions just tell the computer and browser what kind of file it is. Most of the images I use are .jpg images.
Want to make a link to another page? Highlight the text you want to link to (By left clicking and scrolling over it in an editor, and then hitting the link icon.) To write the link code yourself type the code below with your link url.
<a href=”theurlpageaddress.com”>Click here to visit the page.</a>
Tip-When you name a file it can’t have any spaces or breaks in the name. If it does, it simply won’t work.
Example-Thisisanimagefile.jpg would work fine, and be recognized as an image file because it contains the .jpg (At the end of the image name.)and has no spaces in the name. Now I’ll just need to store it where I can find it. (Usually I store mine in a separate image folder, inside of my website folder.) Now when I need to find the right directory or destination file I’ll easily be able to find it. This is why organization is so important.
Tip-In order to tell the browser or computer where to start, you need a “home page“. The way to tell your computer and browser which page is your home page, is to name your home page index.html
The browser or computer always knows that index.html is where it’s supposed to start from, so your first page will always be called index.html
The index.html document is the starting point or home page and links to the rest of your website pages. So no matter what, don’t forget to name your first page index.html. It will give browsers a reference point.
Tip-YouTube has tons of lessons, tutorials, and guides that you can watch for free. If you ever get stuck and need help, I’d search YouTube and the web for free lessons.
Tip-There are many free tools that you can use by either downloading them or going directly to the website and using their tools. Below I’ve provided a list of free downloads.
Notepad++ – Notepad++ is a free tool that many people use to build Websites. It’s an open source program with lots of functionality. People add to it or improve it pretty regularly. If you can learn how to use it, it’s a great tool. Please note that you’ll need to choose the version that’s compatible with your computer. You can download it by clicking here.
NVU– NVU is the editor I’ve been using for probably fifteen years or more. It’s a free wysiwyg (what you see is what you get editor.) What I like is that I can create a page without writing a lot of code. What I don’t like is that it seems to have a mind of it’s own sometimes, and possibly some serious bugs. The reason I recommend that people start out with notepad++ instead of NVU is because the support material is amazing with notepad++ and a lot of professionals use it. Notepad++ also provides you with a lot of extra options or added bonuses compared to a lot of editors. As far as wysiwyg editors go, there are several free editors available for download. .If you’d like to try the NVU editor click here.
Color picker– When you want to design your website in many different colors sometimes it’s nice to have a tool, instead of trying to remember all of the exact color codes. a color code looks something like this #ffggyy and there are too many for me to list here. If you download a color picker it will help you choose your unique colors without knowing the exact code for every color. There are probably several free ones on the internet. Just type in “free color pickers” in google or yahoo, until you find the one that’s right for you. Note-Most of the editors may have a color picker already installed. If you’d like to try a free one click here.
Below I’m going to provide a video about learning html, and another video about how to build a WordPress website. I urge you to watch several videos before deciding on a particular software or program to use.
You want to do what works for you.
Tip-If you want to get great marketing tips and free information, I provide SEO, traffic tips, tricks, secrets, and more in many of my blog posts. You can either come back here, or bookmark this page and come back later if you’d prefer. I try to provide useful, relevant, and helpful information in all of my blog posts. This is often information that other sites charge good money for, or leave out all together. Sometimes it’s hard to find the exact information you’re looking for! I cover many things on this website.
Please watch the short 12 minute video below that explains a little about basic html.
beginners guide to html
Tip-If you plan on doing things like writing multiple blogs or web pages, optimizing your website (SEO) for search engines, and more, that is what’s known as functionality. There are a lot of ways to build a website that are very easy, but they don’t allow you to do much as far as editing your pages or optimizing your pages goes. These are the reasons I generally recommend that new web designers and beginners try WordPress. WordPress offers lots of options, plugins (tools to improve your website or add and improve functionality)
Having more control over your website can be the difference between having a million visitors or NO visitors. The control allows you to always make improvements. I don’t get paid for recommending WordPress and have nothing to gain by doing it. I’m recommending WordPress for your benefit! Another benefit to using WordPress is that it’s very popular. What that means to you, is that there is plenty of support information and free video tutorials that you can watch on YouTube, if you run into trouble.
It’s been estimated that up to 25% of all websites on the internet are now WordPress websites!
I’ve provided a video tutorial below that takes you step by step through the process that this guy (Tyler) used to build his WordPress website. When you learn how to use WordPress, you don’t have to know all there is to know about coding!
There are a few things that I think every web designer or business person should consider before deciding what they want to do.
- You can hire a professional web designer to build a website for $200-$300-$500-$1000 dollars or more. You might end up with a nice website, but what if it’s not optimized? If it’s not optimized, easy to edit, easy to add pages to, easy to update, and more, that’s quite an investment for a website that isn’t guaranteed to get any traffic.
- You can always plan on handing out business cards, putting out ads, or telling all of your clients and relatives about your business, but if you’re missing out on organic search traffic, that’s a lot of lost potential business and customers. (What I love about WordPress is that I’m in control.)
- Once I’ve learned what I need to, I can do all sorts of other things. I can build new websites, get into a different market or niche, and I’m never tied down. I’m fully in control.
Thank you for visiting our page, “The beginners guide to html.“. I hope you’ve found the information valuable and useful.
Have questions, need answers? Leave a question in the comments section below or contact me at one of the following email addresses.
firstname.lastname@example.org or email@example.com