--- title: "Tutorial - Creating your personal webpage at OVHcloud" description: "Find out how to create your first webpage with a free hosting plan" url: https://docs.ovhcloud.com/en/guides/web-cloud/web-hosting/create-your-personal-webpage lang: en lastUpdated: 2026-06-08 --- # Tutorial - Creating your personal webpage at OVHcloud ## Objective Find out how to create the first page of a website on a 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](https://partner.ovhcloud.com/en-gb/directory/) and/or discuss the issue with our community on if you have difficulties or doubts. You can find more information in the [Go further](#go-further) section of this guide. ::: ## Requirements - A [domain name](https://www.ovhcloud.com/en-gb/domains/) - An [OVHcloud web hosting plan](https://www.ovhcloud.com/en-gb/web-hosting/) or a [free hosting](https://www.ovhcloud.com/en-gb/domains/free-web-hosting/) - A text editor (Notepad, TextEdit, Notepad++, etc.) - An FTP client (such as [Cyberduck](https://cyberduck.io/), [FileZilla](https://filezilla-project.org/download.php), etc.) installed to transfer files to your hosting storage space ## Before you begin ### What is a web page made of? 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 `

` tag starts a paragraph, with the same paragraph closed by the `

` 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. ### Which tools to use? 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++](https://notepad-plus-plus.org/), [Brackets](https://brackets.io/), [Sublime Text](https://www.sublimetext.com/) or [Micro](https://micro-editor.github.io/). You can also use an IDE (Integrated Development Environment) such as [Visual Studio Code](https://code.visualstudio.com/) or [Geany](https://www.geany.org/). 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 **static** or **dynamic** site? 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.). ### What is PHP? 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. ## Instructions Use the steps below to create your first web page. ### Design your page content by structuring it using HTML 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. :::info 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. ::: #### Composing a typical HTML page HTML pages are always structured in the same way: - A `DOCTYPE` declaration that instructs the browser to read the following content in full compliance with the standards - A `` tag that will frame all other tags in the document - A `` tag that will contain information about the page encoding and its title - A `` tag that will contain the body of your HTML page You can copy and paste this code into your `index.html` file: ```html My Home Page ``` Some tags have more information than others, such as the `` 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 `` tag includes elements that will not be displayed on the screen. The `` 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 `` 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. #### Complete with title, subtitle, and content 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. ```html <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: ```html <body> <h1>Welcome to my personal page</h1> <h2>Create your website quickly and easily</h2> <p>OVHcloud offers 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: ```html <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 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. #### Add pictures to make your page more attractive The web is primarily a visual medium. In this section, we will look at how to insert images into your content. 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](https://www.ovhcloud.com/en-gb/web-hosting/), 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. ##### **Optimise your images** 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 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. ##### **Store your images on your web hosting plan** For readability reasons, you should store your images in a dedicated directory: ![File and Folder Tree](/images/assets/screens/other/web-tools/vscode/create-your-personal-webpage-1.png) Consider a file in _PNG_ format. Place it in the “images” directory: ![File and Folder Tree with Image](/images/assets/screens/other/web-tools/vscode/create-your-personal-webpage-2.png) 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. ```html <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 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 : ![Browser HTML Result](/images/assets/screens/other/browsers/web-pages/create-your-personal-webpage-3-en.png) ### Format your content using CSS styles 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. #### Principles ##### **Creating a CSS file** As with HTML files, CSS files can be created with any text editor. The extension of these files must be in _.css_. ![CSS File Placement](/images/assets/screens/other/web-tools/vscode/create-your-personal-webpage-4.png) 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: ```html <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 ``` To check, we will declare in our style sheet a colour defined for each element `

` of our web page. Edit the _style.css_ file by adding these lines: ```html h1 { color red; } ``` This set of instructions is called a CSS rule and means: all HTML elements `

` will have the colour _(color)_ _(red)_. You can test another colour on the `

` element, paragraphs, and list items: ```html 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: ```html * { 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: ![CSS Box Template](/images/assets/schemas/web-hosting/create-your-personal-webpage-5.png) ### Improve the HTML structure of the document We have positioned basic elements in your `` tag: `h1`, `h2`, `p`, `ul` and `li`. In its latest iteration, [HTML5](https://html.spec.whatwg.org/) 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 `
` tag (not to be confused with the `` tag) - Primary content, defined by a `
` tag - A footer, described by the `