One place for hosting & domains

      How To Add Images in 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’ll learn how to use HTML to add images on a website. We’ll also learn how to add alternate text to images to improve accessibility for site visitors who use screen readers.

      Images are added to an HTML document using the <img> element. The <img> element requires the attribute src which allows you to set the location of the file where the image is stored. An image element is written like this:

      <img src="https://www.digitalocean.com/community/tutorials/Image_Location">
      

      Note that the <img> element does not use a closing </img> tag. To try using the <img> element, download our image of Sammy the Shark and place it in your project directory html-practice.

      Note: To download the image of Sammy the Shark, visit the link and CTRL + Left Click (on Macs) or Right Click (on Windows) on the image and select “Save Image As” and save it as small-profile.jpeg to your project directory.

      Next, erase the content of your index.html file and paste <img src=”Image_Location”> into the file. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.

      Then, copy the file path of the image and replace Image_Location with the location of your saved image. If you are using the Visual Studio Code text editor, you can copy the file path by using CTRL + Left Click (on Macs) or Right Click (on Windows) on the image file small-profile.jpeg in the left-hand panel and selecting “Copy Path.” For an illustration of the process, please see the gif below:

      Gif of how to copy an image file path

      Note: Make sure to copy the relative or project file path of the image rather than the absolute or full file path of the image. 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.) While both paths will work in this instance, only the relative path would work if we decided to publish our website online. Since our end goal is to create a publishable website, we will start using relative paths now when adding <img> elements to our document.

      Save your index.html file and reload it in your browser. You should receive something like this:

      Image in browser

      Technically, you can also use links to images hosted online as file paths. To understand how this works, try replacing the image location with a link to our image of Sammy the Shark like this:

      <img src="https://html.sammy-codes.com/images/small-profile.jpeg">
      

      Save your file and reload it in the browser. The image should still load in your web document, but this time the image is being sourced from its online location rather than your local project directory. You can experiment with adding other online images by using their location links as the src attribute in the <img> tag.

      However, when building a website it is generally better to host your images in your project directory to ensure the sustainability of the site. If the image is taken down by its host or if its address changes, it will no longer render on your site.

      Alternative Text for Accessibility

      HTML provides an option for adding alternative text to images to improve accessibility to site visitors who are visually impaired or use screen readers. This text should describe the content of the image and is added with the alt attribute:

      <img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="This is an illustrated image of Digital Ocean’s mascot, a blue smiling shark." >
      

      You should now have familiarity with how to add images to your HTML document and how to add alternative text to aid with accessibility. We’ll learn how to change the image size and style in the tutorial How To Add a Profile Image To Your Webpage later on in the series. In the next tutorial, we’ll learn how to add links to an HTML document.



      Source link

      How To Add Hyperlinks in 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.

      Hyperlinks can be added to text or images with the anchor link element <a>. The <a> tag requires the attribute href, which is used to specify the destination link. The <a> element is used like this:

      <a href="https://www.digitalocean.com/community/tutorials/www.DestinationLink.com">The text you want to link</a>
      

      Try adding the code snippet below to your “index.html” file and changing the sample highlighted text with a real link, such as https://digitalocean.com/community:

      <a href="https://www.digitalocean.com/community">The text you want to link</a>
      

      (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project. Save the file and load it in your browser.

      You should receive an output like this:

      HTML Link

      You can also link images by wrapping an image element with an <a> element like so:

      <a href="https://www.digitalocean.com/community">The text you want to link
      <img src="https://html.sammy-codes.com/images/small-profile.jpeg">
      </a>
      

      Try testing the code snippet in your browser to check that it works. You should now understand how to add hyperlinks to text and images on your webpage.



      Source link

      How To Add an HTML <head> Element To Your Webpage



      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.

      This tutorial will walk you through the steps of adding a <head> element to your webpage, which creates a section for us to include machine-readable information about our web document. This information is primarily used by browsers and search engines to interpret the content of the page. Content placed inside the <head> element will not be visible on the web page.

      Note:The HTML <head> element is a semantic element in that it tells the browser and the developer the meaning or purpose of its content. Semantic elements are used to aid human readability of an HTML document, provide the browser further information for interpreting the content, improve site accessibility (screen readers use semantic tags), and can assist with SEO positioning.

      Add the opening and closing <head> tags inside of the <html> tags. Next, add two additional lines of HTML code inside the <head> tags like this:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title> Sammy’s First Website </title>
      </head>
      </html> 
      

      Note that you have nested a variety of HTML elements inside one another. The <title> and <meta> elements are nested inside the <head> element, and the <head> element is nested inside the <html> element. We will nest elements frequently as the tutorial proceeds.

      Let’s now pause briefly to understand the purpose of the code we’ve just added. The line of code after the opening <head> tag—<meta charset="utf-8">—specifies the document’s character set to UTF-8, a unicode format that supports a majority of characters from a wide variety of written languages.

      The next line of code sets the HTML document’s title using the <title> element. The content you insert into this element will be displayed on the browser tab and as the website’s title in search results, but it will not show up on the web page itself. Make sure to replace “Sammy’s First Website” with your name or the name of the website you’re building.

      Though developers often add additional information in the <head> section, we now have sufficient information for creating a basic HTML webpage. Save your file before moving onto the next section. If you try loading the file in your browser, you should receive a blank page.

      You should now know the purpose of HTML <head> elements and how to add one to an HTML file.



      Source link