One place for hosting & domains

      Website

      How To Set Up Your HTML Website Project



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      The first thing to do when creating a new website project is to create a project directory (or folder) to store all the files that will be created in the process. For this website project, we can continue using the html-practice project directory and index.html file we created earlier in the tutorial series. (If you have not been following along this tutorial series and need instructions for setting up a project directory and index.html file, please see our earlier tutorial in this series Setting Up Your HTML Project.

      Note: If you decide to choose your own name for the directory, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters, as these can cause problems later on.

      Next, we’ll format the index.html file to serve as the website’s homepage. The first step in formatting a web document is to add the <!DOCTYPE html> declaration to the first line. Make sure your index.html file is clear and then add <!DOCTYPE html>to the first line of the document.

      This declaration tells the browser which type of HTML is being used and is important to declare as there are multiple versions of HTML. In this declaration, html specifies the current web standard of HTML, which is HTML5.

      Next, we’ll add the <html> element by adding opening and closing <html> tags. The <html> element tells the browser that all content it contains is intended to be read as HTML. Your document should now look like this:

      <!DOCTYPE html>
      <html>
      </html> 
      

      From this point forward, all content that we add to our website will be added between the opening and closing <html> tags.

      We will begin adding content to our site in the next tutorial.



      Source link

      How To Add a Favicon to Your Website with HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      In this tutorial, we will walk through the steps involved in adding a favicon to your webpage using HTML. You can use any image you like for your favicon, but keep in mind that simple, high-contrast images often work best given the favicon’s small size. You can also generate a custom favicon through sites like favicon.cc.

      A favicon is a small image that is located in the browser tab to the left of a webpage’s title. The image below illustrates the location of a favicon.

      Image of Favicon

      To add a favicon to your site, create a folder in your project directory called images (if you don’t already have one) and save your desired favicon image in this folder. If you don’t have an image, you download this Sammy the Shark image that we have hosted on our demonstration website. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series.

      Next, add the <link> element (highlighted below) to your index.html file right below the <title> element. Your code should now be like this:

      ...
      <title> Sammy’s First Website </title>
      <link rel="shortcut icon" type="image/jpg" href=”Favicon_Image_Location”/>
      ...
      

      Make sure to replace Favicon_Image_Location with the relative file path of your favicon image. Save the index.html file and reload it in your web browser. Your browser tab should now contain a favicon image.

      You should now know how to add favicon images to websites using HTML.



      Source link

      How To Create and Link To Additional Website Pages With HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      When building a website, you may want to have more than one webpage. If you want to add and link to additional pages, you’ll need to first create a new html file in your website project directory. In this tutorial, we’ll learn how to create and link to an additional webpage on your website

      Our demonstration website includes an “About” webpage. In this tutorial, we’ll walk you through the process of creating and linking to an “About” webpage, but you may change the title and the content of this page to fit your needs.

      To add a new page to your website, create a new file named about.html and save it in your project directory html-practice. (If you have not been following the tutorial series, you can review instructions for setting up a new html file in our tutorial Setting Up Your HTML Project.)

      Note: If you decide to choose your own name for the file, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters as these can cause problems later on. You must also include the .html extension.

      Next, you’ll need to format the file by adding information that will help the browser interpret the file content. To format the file, add following code snippet at the top of the document:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title> About </title>
      </head>
      </html> 
      

      Make sure to change the highlighted text with a title you want for you page. For an explanation of each of the HTML tags, please visit the earlier tutorial in this series Adding an HTML <head> Element To Your Webpage. Save the file before you continue.

      Before adding any content to this page, let’s walk through the steps of adding a link to this page on your homepage.

      First, return to your index.html file and add the following snippet below the subtitle of your site and above the closing </div> tag:

      ...
      <p style="font-size: 20px; color:#1F9AFE;">
      <a href="https://www.digitalocean.com/community/tutorials/Webpage FilePath";> About this site </a>
      </p>
      ...
      

      Change the highlighted file path to the relative file path of your “about.html” file. The relative path refers to the file location relative to the current working directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) If you are using the Visual Studio Code text editor, you can copy the relative file path by CTRL + Left Click (on Macs) or right-clicking' (on Windows) on the file icon and selectingCopy Relative Path.`

      Note that we have also specified a font-size and color using the style attribute. Save your index.html file and reload it in the browser.

      You should now have a link that directs to your about.html web page like this:

      Webpage with link

      If you receive an error, make sure that your file is in the same project directory as your index.html file and that there are no errors in your project path.

      You should now know how to create and link to a new webpage on your website. You can use these same steps to create and link to additional webpages on your website. You can also add content to any new webpage in the same way you are learning to add content to your homepage.



      Source link