Skip to content

HTML for greens - HTML

Tutorial

Theory without practice is nothing. That's why I encourage you to constantly experiment with HTML code while reading the course. This way, the information you've learned will be better retained in your memory. Moreover, often it's only during practical exercises that we realize we haven't fully understood the theory. But most importantly, practice is what makes us better in a given field. This, in turn, stimulates and develops our passion, allowing us to become true masters - "practice makes perfect." So, don't neglect this stage of learning. Install an HTML editor and start practicing systematically.

As part of developing your practical skills, I recommend doing a series of exercises. These exercises will involve creating a simple webpage based on the information you've learned. In the following chapters, we will gradually expand this webpage, so don't forget to save it on your computer. At this stage, publishing the page on the internet is not yet necessary.

  1. Find a topic that particularly interests you. It could be your favorite book, video game, music band, a sports discipline, etc.

    If you plan to use information from the internet for your webpage, remember to respect copyright laws! You can't always freely copy any text to your site without the author's permission. Each quotation should be clearly marked with its source.

    You can also create a webpage about yourself, where you briefly describe your biography, interests, hobbies, etc.
  2. Open an HTML editor. If you're using a graphical editor, switch to direct source code editing mode.
  3. In the editor, create a new HTML file and paste the skeleton of the webpage, filling in the necessary parts.
  4. Start entering the actual content of the webpage. You can preview your work in a web browser as you go. To do this, save the file as index.html, and then locate it on your disk using any file browsing program (in Windows, you can use File Explorer, for example) and double-click on the newly created document's icon. This way, your webpage will open in a browser. Every time you make changes to it, simply save the file in the editor, then switch to the browser and refresh the page (press F5) to see the effects.
  5. Return to the HTML editor. Divide the text into paragraphs to make it more readable.
  6. Select parts of the text that you believe the reader should pay particular attention to and place them in bold tags.
  7. Add illustrations to the webpage.

    When it comes to photos and graphics, it's essential to remember to respect copyright laws! You can't freely copy every image to your webpage without the author's permission.

    If you're creating a webpage about yourself, it can simply be your photo.
  8. Create a subpage named links.html (a new HTML file in the editor) and include a link to it on the homepage (in the index.html file). You can learn more about what subpages are and how to create them in the chapter: Document Structure.
  9. On the links.html subpage, insert links to interesting websites on the topic you're describing. If you're creating a webpage about yourself, you can place links to your profiles on social media such as Facebook, Twitter, YouTube, LinkedIn, etc.
  10. Create a subpage named contact.html (a new HTML file in the editor) and include a link to it on the homepage (in the index.html file). On this page, add an email link with your email address.