Creating Your Own Website

Let's start by creating a personalized About Me webpage! 🙂

In the Learning Tools below, click on the Template menu and select the About Me Website template.

The HTML <img> tag is used when you want to add a picture or image to your webpage. The <img> tag can be used as follows:

Copy
<img src="image file path" alt="image description" />

The most important attributes of the img tag are the following two:

• src: This attribute indicates the location where the image file is stored, shown as a URL. This URL can point to another image on the same website or an image hosted on an external website.

• alt: This attribute provides "alternative text" for the image in case it fails to load or for voice services intended for visually impaired users. While not a mandatory attribute, it plays a crucial role in improving web accessibility and significantly aids in SEO (Search Engine Optimization).

For example, the code below displays an image file named "profile.jpg" and shows "Profile Picture" as the alternative text.

Copy
<img src="profile.jpg" alt="Profile Picture" />

Now, let's update the profile section.

First, find the following code in the central code editor.

Press the Ctrl + F shortcut (or Command + F for Mac) to activate the search bar, and search for header-container to easily find the code.

Copy
<section class="header-container">
  <img
    class="profile-image"
    src="https://assets.codefriends.net/assets/images/bio-website/hero-image.png"
    alt="hero-image"
  />
</section>

Next, use the Upload Tool in the lower left to upload an image file. Click the upload button and select the cloud icon at the top to upload your image file.

Once uploaded, the file will be displayed at the bottom, and you can click the copy icon on the right to copy the image URL.

The image URL starts with https://assets.codefriends.net/.

Paste the copied image URL into the src attribute of the img tag, and you can insert any desired alternative text, like "Profile," in the alt attribute as shown below.

Copy
<section class="header-container">
  <img
    class="profile-image"
    src="https://assets.codefriends.net/assets/images/bio-website/hero-image.png"
    alt="hero-image"
  />
</section>

You can now see your profile picture displayed on your website :)