Beginners Guide To HTML

• What is HTML?
• <p> Tags
• <h1-6> Tags
• <a> Tags
• <img> Tags
• Putting it all together
• Hosting it on Cybrancee

What is HTML

HTML stands for HyperText Markup language. HTML is used to format and structure websites. For example, add headings, text and images. You can think of HTML as the skeleton. In the sense that like all mammals have an underlying skeleton, all websites have an underlying structure, that being HTML.

HTML uses elements called tags. When we want to add text to a website we wrap it in a tag.

Here is the order most tags follow:

<HTML-TAG>Some Text Here</HTML-TAG>

You might be wondering, what are the strange opening and closing angle brackets (<, >)? These brackets are part of the syntax of HTML, they symbolise when our tags open and close. If this sounds confusing to you, you can think of angle brackets as full stops (.) in English. Without full stops we wouldn’t know when a sentence starts and ends. Without angle brackets we wouldn’t be able to instruct HTML when our tags start and end.

<p> Tags

Almost every website will have at least one paragraph, and to add one of these to a website, I would use something called a ‘p’ tag.

Here is what a p tag looks like:

<p>Welcome to my amazing new blog</p>

The p stands for paragraph. It tells HTML to display a paragraph, this is useful as it not only declares that our text is of type paragraph, but it also applies specific HTML styling to our text.

<h1-6> Tags

Now what if we wanted to have some larger text and declare it as a heading? We’d use a heading tag. Heading tags make the text larger and bold. Unlike p tags, there are multiple heading tags, six to be precise. Each different heading tag represents a different size.

Here is an example of all the heading tags we can use:

<h1>Welcome to my amazing new blog</h1>
<h2>Welcome to my amazing new blog</h2>
<h3>Welcome to my amazing new blog</h3>
<h4>Welcome to my amazing new blog</h4>
<h5>Welcome to my amazing new blog</h5>
<h6>Welcome to my amazing new blog</h6>

Like paragraph tags are declared with a p, heading tags are declared with a h tag. p for paragraph, and h for heading, simple right? 

However, unlike p tags, heading tags also have a number in the declaration. This number represents the size of the heading, 1 being the largest and 6 being the smallest. In our example above, the h1 tag is the largest and h6 the smallest.

<a> Tags

There are two types of links on any website, internal links and external links.

Fortunately, the HTML syntax for both internal and external links is essentially the same!

Following on from the previous section, we used the p tag to add paragraphs, and the h(1-6) tag to add headings. To add links to our website we use the a tag, the a stands for anchor.

Here is what an anchor tag looks like:

<a href="">Some Text here</a>

We can link multiple different tags with the anchor tag, for example images, text and paragraphs.

So how would I go about adding a link to a website?

Currently we have a heading tag:

<h1>Welcome to my amazing new blog</h1>

To add a link to the heading tag we need to wrap it in an anchor. Wrapping a HTML tag essentially means we add the opening tag above the tag being wrapped, and the closing tag below the thing being wrapped. Here is what it looks like in practice:

<a href=”https://cybrancee.com/”>
  <h1>Welcome to my amazing new blog</h1>
</a>

As you can see the h1 tag has been wrapped with our anchor tag, if we click on our h1 heading it will take us to the Cybrancee homepage. Anything below the opening a tag (<a href=”https://cybrancee.com/”>) , and above the closing a tag (</a>) will be linked. 

To explain this further lets say your friend also has an amazing new blog, and you want to let people navigate to it. To achieve this we can add another heading tag to our links, as follows:

<a href="https://cybrancee.com/">
<h1>Welcome to my amazing new blog</h1>
  <h2>Check out my friends amazing new blog</h2>
</a>

As you can see both heading tags have been wrapped by the anchor tag, this means both headings will now link to the same place.

<img> Tags

In the world of web development, sometimes you need more than just text to make your content engaging. That’s where the <img> tag comes into play. 

Let’s start with the basics. The <img> tag is used to embed images on your web page. It’s a self-closing tag, meaning you don’t need a separate closing tag.

Remember earlier on in this article, we mentioned that most HTML tags have a closing tag? The <img> tag is an exception to this rule. Here’s what it looks like:

<img src="image.jpg">

The src section of the snippet is referred to as the source attribute. This specifies the path to the file. It is usually in one of the following formats:

• Image.jpg
• /public_html/assets/img/image.jpg
• https://cybrancee.com/demo/image.jpg

A src (source) can either be a local file path, or a network location, such as an image hosted on another website. 

When adding an img tag to your website, it is really important to define what is known as an alt tag. This is an attribute which is crucial for SEO (search engine optimization)  and for accessibility. The alt attribute is a defined piece of text which is displayed in the event that an image fails to load, or if the image cannot be read by the user’s device.

An example alt attribute would look like this:

alt=”A large blue coach on a motorway”

Put this into practice with the full img tag, and it would look like this:

<img src="/public_html/assets/img/image.jpg" alt="A large blue coach on a motorway">

It is important to know that the img tag can hold more than just a jpg. You can put a jpeg, png, gif and more. 

Let’s recap:

• p is used to declare a paragraph tag.
• h followed by a number from 1 to 6 is used to declare our heading tag
• We need to let html know when our tags start and end, so we use angle brackets.
• img is used to display an image
• a tags are for creating links

Now let’s put this all together! 

Putting it all together

HTML is simple to run on your computer. Unlike many other programming languages, you don’t need to install additional software to turn your HTML into an application. 

The most important thing you’ll need is a good text editor. For this tutorial, we are going to use Visual Studio Code, we recommend downloading it if you haven’t already. 

1. Open Visual Studio Code
2. Create a new folder (this is where we’ll be storing the project) 
3. Create a file called index.html (i’ll explain what this means soon!)

The reason we created the file as index.html is because this is the default filename that is loaded when you visit a website. https://cybrancee.com/ actually takes you to the file “index.html”. 

In your new index.html file, we’re going to create a header, a paragraph, links and then a couple of images.

At the top of the page, let’s put a big header:

<h1>My first website!</h1>

And then, let’s put a smaller header tag, top act as a subtitle:

<h2>Made by: your name</h2>

Now, let’s add a paragraph to the website by declaring my opening p tag <p>. Now I can fill this p tag with my content <p>Welcome to my amazing new blog. Lastly, I need to tell HTML when my p tag closes, so I add a closing tag </p>. It should look like the below:

<p>Welcome to my amazing new blog.</p>

Now let’s put a bit of linked text below

<p>This website is hosted on: <a href="https://cybrancee.com">Cybrancee</a></p>

Finally, we’ll add an image to the website. We’re going to use the Cybrancee logo as an image

<img src="https://cybrancee.com/learn/wp-content/uploads/2023/05/fullLogo.png">

The final output will be:

<h1>My first website!</h1>
<h2>Made by: your name</h2>
<p>Welcome to my amazing new blog.</p>
<p>This website is hosted on: <a href="https://cybrancee.com">Cybrancee</a></p>
<img src="https://cybrancee.com/learn/wp-content/uploads/2023/05/fullLogo.png">

Save this file, and then open your file explorer, go to the folder where the index.html file is saved, and then double click it. The file will open in your browser, and you will see the black text on a white background, following the same order that you wrote it.

Setting up your website on Cybrancee

1. Visit https://cybrancee.com 

2. Select one of our web hosting services. We recommend the Starter plan for a full web hosting service, or if you’re on a budget, select our Free Web Hosting plan (you can always upgrade later).

3. You will be asked to select an option for your domain. For the purpose of this article, we will register a new domain. (Alternatively, you can choose a cybranceehost.com subdomain for free)

4. Once you have selected the domain option, you’ll be taken to the Order Summary page. This page will give you 3 options for your billing. You can either pay monthly, Annually or Triennially (the longer you pay for, the higher the discount). If you have a promotional code, you will need to select the Monthly option, you can apply the promo code on the next page.

5. This next page is the checkout, where you will input your promo code, billing details and create your Cybrancee account. If you are using a CybranceeHost.com subdomain, or are using the Free Forever Web hosting, we strongly suggest you review the Terms Of Service as there are specific rules for using these resources.

5a. If you have a promo code, enter it into the Promotion field, and press Validate Code. If it isn’t applying the discount you were expecting, please get in touch with us via Live Chat, or through our Contact Us form.

6. Once you have completed filling out the details, press the Checkout button. Payment will be taken and you’ll be directed to your Cybrancee Client Area

7. Click on the box labelled “Services”

8. Click on the listed product that you want to access. Don’t click on the URL as that will open your website in a new tab

9. Click on the “Login to Plesk” button and you will be directed to your Plesk Control Panel

10. Go to the “Files” menu item on the left hand side

11. Navigate to the folder where you want to upload your files to

12. Click on the blue + symbol and select the Upload Directory option

13. Drag and drop the files and folder that you want to upload into your Plesk panel

If you purchased a new domain, transferred a domain, or want to use a domain with a different provider, you will need to ensure that you have configured your Name Servers (or A records) to point to Cybrancee.

 If you have registered a domain with Cybrancee or are transferring a domain to Cybrancee: https://cybrancee.com/learn/knowledge-base/managing-nameservers-in-cybrancee/

If you have a domain registered elsewhere, please refer to the emails received regarding your order from Cybrancee. The email will advise on what Name Servers to use.

If you are using a free subdomain, this will be done automatically.

After the domain has propagated, you will be able to go to your domain and see your website!