| title | excerpt | updated |
|---|---|---|
Tutorial - Creating your personal webpage at OVHcloud |
Find out how to create your first webpage with a 100M free hosting plan |
2023-07-16 |
Find out how to create the first page of a website on a 100M free hosting plan, available for free with every domain name purchase from OVHcloud.
Warning
OVHcloud is providing you with services for which you are responsible, with regard to their configuration and management. You are therefore responsible for ensuring they function correctly.
This guide is designed to assist you in common tasks as much as possible. Nevertheless, we recommend that you contact a specialist service provider and/or discuss the issue with our community on if you have difficulties or doubts. You can find more information in the Go further section of this guide.
- A domain name
- An OVHcloud web hosting plan or a 100M free hosting plan
- A text editor (Notepad, TextEdit, Notepad++, etc.)
- An FTP client (such as Cyberduck, FileZilla, etc.) installed to transfer files to your hosting storage space
The content of a website often consists of several web pages. A web page displays static or dynamic content that has been formatted to serve a browsing experience. The pages you view on your browser are the result of three components that we will detail:
- HTML (HyperText Markup Language): Language used to structure your pages. "Structure" refers to the elements and their organisation.
Example: A document title will be followed by a subtitle and one or more paragraphs.
The elements used to structure your content are called "tags" and are written between a less-than sign and a greater-than sign.
Example: The <p> tag starts a paragraph, with the same paragraph closed by the </p> closing tag.
Warning
For any open tag, a closed tag must be created. Tags do not overlap (they close in reverse order of opening) and cannot be interpreted other than by HTML tags.
More than a hundred tags are available but you can perfectly realise your site with some of them.
-
Cascading Style Sheet (CSS): Language describing how the HTML elements will be positioned, sized, behaving, coloured, or displayed. These rules can apply for generic elements (the same colour for all titles on the site, or the font that will be used for all texts) or for specific elements (the text contained in the footer, the behaviour at the top of the navigation menu).
-
JavaScript: Language that can be used to enrich interactions on a website (or web application). Although essential for web developers, it is not mandatory to create your website.
If you are not familiar with the code in the different languages mentioned, you can copy and paste the code examples provided in this guide, they will allow you to have a usable website on your hosting.
To create a web page, start by writing your source code from one of the three languages mentioned above into a file. Here are their main extension names: *.html" (for your HTML files), .css (for your CSS files), .js (for your JavaScript files).
Files can be written in text editors, including those available by default on your operating system (notebook, TextEdit). Many free Open Source solutions offer additional features: Notepad++, Brackets, Sublime Text or Micro. You can also use an IDE (Integrated Development Environment) such as Visual Studio Code or Geany.
To view and adjust your pages before they are placed on your hosting plan, use your web browser. To do this, open your file from its local location directly on your browser.
A website is said to be static when the pages you view with your browser are always identical and do not offer any particular interactions other than effects (drop-down menus, for example), animations, and videos.
By contrast, a dynamic website implies that the pages you view are generated by the web server that executes code, accesses a database, etc. This allows you to deliver a result based on the requests made by the user (viewing topics, authentication, sending data via a form, viewing stocks or inventories, etc.).
PHP (PHP Hypertext Preprocessor) is a language mostly used in web development. It works exclusively on the server side, so it is not necessary to build the visible elements on your browser. However, it will be useful for retrieving messages sent to you via your website’s contact form, for example.
Use the steps below to create your first web page.
To create your first web page, create a directory anywhere on your computer, where you will place all your files.
Name the initial file index.html; it will contain HTML code. This is the first file to be created, because the HTTP servers are configured by default so that the request made on your hosting (by typing your domain name in the address bar of a browser) displays the file index.
Open your text editor and save your work file.
[!primary]
We recommend that you keep multiple copies of this working directory for backups. The site will be available on your hosting, but it is safer to keep a local copy as well as backups on other media, such as external hard disks.
HTML pages are always structured in the same way:
- A
DOCTYPEdeclaration that instructs the browser to read the following content in full compliance with the standards - A
<html>tag that will frame all other tags in the document - A
<head>tag that will contain information about the page encoding and its title - A
<body>tag that will contain the body of your HTML page
You can copy and paste this code into your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Home Page</title>
</head>
<body>
</body>
</html>Some tags have more information than others, such as the <html lang="en"> tag in the example above.
In this case, we are talking about attributes that will allow us to specify certain elements. Here you can declare the main language of the web page. Some of these attributes are universal and can be used on all tags (with some exceptions), others are specific.
The <head> tag includes elements that will not be displayed on the screen. The <meta> tags will give directions to the browser, but also to search engines, such as the encoding of the characters used in the document (UTF-8 in the example above) or information about the mobile display (“viewport” in the example above).
The <title> tag is very important. It is not only the title of your page that will appear on the tab of your browser, but will also be indexed by search engines.
This title will allow your website, for example, to appear in search results on Google, DuckDuckGo, etc.
Getting to the top in these results is an exercise defined by Search Engine Optimisation (SEO) rules. We will not deal with this topic in this tutorial.
The <body> tag will contain the other HTML tags that will structure your document.
We will now edit the text content of your page, always following the standard HTML structure, to add a title, subtitle, paragraphs and text lists.
- Tags
<h1>through<h6>
Titles are written in <h...> tags, which are prioritised as on any document: first <h1>, then <h2>, and so on, with the last tag being <h6>. The <h1> tag is therefore required if you want to write a <h2> tag. If you do not follow this rule, the browser will display the result without errors.
<body>
<h1>Welcome to my personal page</h1>
<h2>Create your website quickly and easily</h2>
</body>You can observe the result by opening the HTML file in an Internet browser (Firefox, Chrome, Safari, etc.): the two strings will be displayed with different sizes.
- Tag
<p>
This tag is used to put text (p for paragraph). You can position several of them:
<body>
<h1>Welcome to my personal page</h1>
<h2>Create your website quickly and easily</h2>
<p>OVHcloud offers 100M free hosting for every domain name purchase for free.</p>
</body>- The
<ul>and<li> tags
You can use lists in HTML. We will take the example of simple lists, called unordered (like those available in a word processor). To declare a list, use the <ul> tag (unordered list). This tag will frame other elements, the <li> tags, that will contain the content of your lists:
<body>
<h1>Welcome to my personal page</h1>
<h2>Create your website quickly and easily</h2>
<p>
<img src="images/logo-ovhcloud.png" alt="Logo OVHcloud">
</p>
<p>OVHcloud offers 100M free hosting for every domain name purchase for free.</p>
<p>The domain name offer includes:</p>
<ul>
<li>Free 100 MB web hosting</li>
<li>Free 5 GB email account</li>
<li>DNSSEC: cache poisoning protection</li>
<li>Easy Redirect: accessing social networks from your domain name</li>
</ul>
</body>You can see the result in your browser: by default, list items are displayed with bullet points.
The web is primarily a visual medium. In this section, we will look at how to insert images into your content. 100M free hosting comes with 100 MB of storage. This is enough for your HTML and CSS pages, but it can be limited if you want to put a lot of images on your site. If this is the case, we recommend opting for an OVHcloud web hosting plan, as this would give you more storage.
The HTML tag used to display an image is the <img> tag. Unlike the tags we saw earlier, there is no opening and closing of this item. We'll call it a self-closing tag. The attributes of this tag will provide the link to the file location and the descriptive text of the image.
A large image will take time to load in a browser, especially if your visitors use a smartphone or tablet connected to the 4G or 5G network. In general, you should optimise your images and limit their size. Their "weight" is expressed in bytes. Typical units are kilobytes (1 KB = 1,000 bytes) or megabytes (1 MB = 1,000,000 bytes). An image larger than a few dozen KB is considered "heavy" and deserves to be optimised.
Example: if your images each weigh 1 MB, you will be limited to less than 100 images on your free 100M hosting. If you manage to reduce their size to between 50kb and 200kb, you could display up to several thousand of them on your web page.
Some tips to make your files as light as possible:
- Resize the definition of your images to the size at which they will be displayed on your site.
- The size is expressed in pixel width×height (for example, 300×250 pixels is the width of a standard advertising image).
- Modify the resolution (the Web uses a default resolution of 72 dpi).
- Choose compressed formats such as JPEG, PNG or Webp.
- You can use a vector format (SVG).
- Avoid uncompressed BPM and TIFF formats.
For readability reasons, you should store your images in a dedicated directory:
{.thumbnail}
Consider a file in PNG format. Place it in the “images” directory:
{.thumbnail}
We will now create a new paragraph in which we will place the image (in this example, we do not specify the image display size in pixels. The browser will then display it in its original file size.
<body>
<h1>Welcome to my personal page</h1>
<h2>Create your website quickly and easily</h2>
<p>
<img src="images/logo-ovhcloud.png" alt="Logo OVHcloud">
</p>
<p>OVHcloud offers 100M free hosting for every domain name purchase for free.</p>
<p>The domain name offer includes:</p>
<ul>
<li>Free 100 MB web hosting</li>
<li>Free 5 GB email account</li>
<li>DNSSEC: cache poisoning protection</li>
<li>Easy Redirect: accessing social networks from your domain name</li>
</ul>
</body>The result on your browser should be :
{.thumbnail}
We've seen how to structure your HTML content. The result is minimalist with a style that is limited to default title and subtitle sizes. Style sheets can change the appearance and behaviour of HTML-encoded elements.
As with HTML files, CSS files can be created with any text editor. The extension of these files must be in .css.
{.thumbnail}
We now need to link this CSS file, which we named by convention style.css, to our HTML page. This link is done by adding a <link> tag in the <head> tag of the index.html file:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Home Page</title>
<link rel="stylesheet" href="style.css">
</head>To check, we will declare in our style sheet a colour defined for each element <h1> of our web page. Edit the style.css file by adding these lines:
h1 {
color red;
}This set of instructions is called a CSS rule and means: all HTML elements <h1> will have the colour (color) (red).
You can test another colour on the <h2> element, paragraphs, and list items:
h1 {
color red;
}
h2
color blue;
}
p {
color: slategray;
}
li {
color: slategray;
}Refresh your browser page by pressing the F5 key on your keyboard: your title will now appear in red.
Browsers have default styles, including specific rules for positioning elements. We will modify the CSS file accordingly and specify a rule that will apply to all HTML elements displayed by the browser. The * (asterisk) selector, called the universal selector, is used and is placed at the beginning of the CSS file:
* {
padding: 0;
margin 0;
}You will see that the text is now glued to the edges of the browser.
The padding property defines the revolving edge (padding), which is the space outside the frame that contains the text (or any element). The following diagram illustrates the correspondence of these terms in the so-called "box model" in CSS:
{.thumbnail}
We have positioned basic elements in your <body> tag: h1, h2, p, ul and li.
In its latest iteration, HTML5 provides new tags to help structure a document and enrich it semantically. A standard document (including a traditional medium) includes visually identifiable blocks that can be reproduced in HTML:
- A header, which will appear in a
<header>tag (not to be confused with the<head>tag) - Primary content, defined by a
<main>tag - A footer, described by the
<footer>element
Each of these elements can be used for specific uses:
- The
headerwill contain, for example, the navigation menu (itself framed by a<nav>tag). - The
mainwill contain all content-related elements, which can also structure the document even more precisely (section,article,aside,div, etc.). - The
footerwill contain more generic information, such as links to social networks, legal notices, general conditions of use and possibly another navigation menu.
Your HTML code will look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Home Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="images/logo-ovhcloud.png" alt="Logo OVHcloud">
</header>
<main>
<h1>Welcome to my personal page</h1>
<h2>Create your website quickly and easily</h2>
<p>OVHcloud offers 100M free hosting for every domain name purchase for free.</p>
<p>The domain name offer includes:</p>
<ul>
<li>Free 100 MB web hosting</li>
<li>Free 5 GB email account</li>
<li>DNSSEC: cache poisoning protection</li>
<li>Easy Redirect: accessing social networks from your domain name</li>
</ul>
</main>
<footer>
<p>© 2022 My personal page</p>
</footer>
</body>
</html>Links to navigate a site from page to page are essential elements of the Web. To implement them, use the tag <a> (anchor), which makes an element interactive, along with an href attribute that will contain the URL to point to. In the following example, we will make the logo contained in the <header> tag interactive:
<header>
<a href="index.html">
<img src="images/logo-ovhcloud.png" alt="Logo OVHcloud">
</a>
</header>We can do it the same way to make text interactive:
<p>Offer <a href="https://www.ovhcloud.com/en-ie/domains/">domain name</a> includes:</p>To display the link target in a new tab, simply add a target attribute to your <a> tag:
<p>Offer <a href="https://www.ovhcloud.com/en-ie/domains/" target="_blank">domain name</a> includes:</p>To make your pages, and therefore your website, visible to everyone, you will need to upload them to your hosting plan (you will need to activate your hosting plan as detailed in this guide).
You can transfer files via a dedicated protocol: FTP (for File Transfer Protocol) Use dedicated software for this operation, such as FileZilla or Cyberduck.
To upload your files to your hosting, please refer to our guide on using FileZilla.
Once the files have been transferred to your web hosting plan, you can view the results by typing your domain name in the address bar of your browser, or by pressing the F5 key on your keyboard to reload the page if you are already on your website.
Warning
Our infrastructure includes a cache system that allows your pages to display with as little latency as possible. When you deploy, you may not be able to view changes made to your browser immediately. In this case, wait a few seconds and do not hesitate to refresh your browser cache with the Ctrl + F5 key combination.
CSS and HTML are easy to understand languages for quick results. However, these languages, particularly CSS, have evolved considerably. While cascading style sheets offer more functionality (animations, gradients, position of elements on the page, etc.), they have become more complex to code.
To save time on the appearance of your site and allow you to focus on the content, and therefore what will be referenced, it is common to use templates to save time and have a quality result both graphically and functionally (design, ergonomics, visibility on smartphone and tablet).
A template is a guideline or an example that can be reused, whether or not you can adapt it. Using templates saves time on site design by adapting elements that have already been designed, while offering the qualities that can be demanded of a "professional" site. The word theme can also be used.
There are free "Open Source" solutions available on the internet, such as Bootstrap, Materialize, Foundation or Semantic UI. These tools are called “frameworks”: libraries that make it easier to create websites or web applications. They offer standardised, customisable and reusable elements, and the entire community offers reusable templates.
Among the tools used by web developers, Bootstrap is the most common framework. Originally developed in 2010 by engineers working for Twitter to harmonise the development of in-house interfaces. Available under an open-source licence since 2011, Bootstrap has been continuously evolving with technological changes (technological and usage changes) and remains essential.
Some examples of websites and web applications made with Bootstrap:
- https://themes.getbootstrap.com/
- https://bootswatch.com/
- https://bootstrapmade.com/
- https://bootstraptaste.com/
- https://bootstrapthemes.co/.
You will find many resources on the web to learn and improve your practice, to copy entire elements of code or portions of code, to add features to your site without risking errors or malfunctions. Here are some reference sites:
- Start with HTML
- HTML Tag Reference
- W3Schools HTML Tutorial
- Mozilla CSS Tutorials
- CSS Tutorial W3 Schools.
Many free tools allow you to rework your illustrations:
- The Windows 10 and 11 Photos app
- The macOS Photos app
- Paint.Net, GIMP, darktable
- Photo editing applications available on Android or iOS smartphones
You will also find online resources:
For specialised services (SEO, development, etc.), contact OVHcloud partners.
If you would like assistance using and configuring your OVHcloud solutions, please refer to our support offers.
Join our community of users.