HTML Basics: Learn How to Create Web Pages from Scratch

TABLE OF CONTENTS:

.What is HTML?
.What is HTML used for?
.What are the basic concepts of HTML?
.Tools needed to start writing HTML code.
.Creating your first HTML web page.
.HTML tags and semantics.

Have you ever wondered how websites are made? Have you ever wanted to create your website, but didn't know where to start? If so, you're in the right place! In this blog post, we're going to cover the basics of HTML, the language used to create web pages. If you've never seen HTML before, don't worry - I will start from the beginning and explain everything you need to know. By the end of this post, you'll have a solid foundation in HTML and be on your way to creating your web pages!

1. What is HTML

   HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It's a set of instructions that tell a web browser how to display content on a web page, including text, images, videos, and links.HTML is a language used to create web pages on the internet. It's a set of instructions that tell web browsers (like Chrome or Firefox) how to display content on a web page. HTML works by using tags, which are little pieces of code that tell the browser how to display content. Without HTML, web pages wouldn't exist as we know them today. It's the foundation of every website on the internet, and understanding how to use HTML is a crucial first step toward becoming a web developer. By learning HTML, you'll be able to create web pages with text, images, videos, links, and more.

   A web page is a page on the internet that you can see on your computer or phone. It has pictures, words, and links to other pages. It's like a page in a book, but you can access it from anywhere with an internet connection.

2. What is HTML used for?

   HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It's a set of instructions that tell a web browser how to display content on a web page, while also enabling the linking of multiple pages through the use of Hyperlinks. it is also used to create an avenue for sharing information, selling products, or providing a platform for discussion.

3. The basic concept of HTML

   In this beginner's guide, I will go over the main basic concepts of HTML that you need to know to get started, which include tags, elements, attributes, hyperlinks and many more. let's start with the:

   .Tags and Elements:
   HTML tags are used to define and structure the content of a web page. Tags are enclosed in angle brackets (< >) and are written in pairs, consisting of an opening tag and a closing tag. For example, the <h1> tag is used to define a heading, and it is closed with the </h1> tag.
   HTML elements are composed of tags and the content in between them. For example, the

   element defines a paragraph and contains the text within the paragraph.

   .Attributes:
   HTML attributes provide additional information to an HTML element. They are written within the opening tag and have a name and a value. For example, the <img> tag for an image has an attribute called "src" that specifies the location of the image.

   .Hyperlinks:
   Hyperlinks are used to link one web page to another. They are created using the tag and the "href" attribute, which specifies the URL of the page being linked to.

   .Document Structure:
   An HTML document is structured with the, , and elements. The element wraps around the entire document, while the element contains information about the page, such as the title and meta tags. The element contains the content of the page.

4. Tools needed to start writing HTML code.

   Before you can start writing HTML, you'll need a few tools to get started. Thankfully, the tools needed to create and edit HTML are easy to find and use. In this article, we'll take a look at the essential tools you'll need to start writing HTML including Text Editor and a Web Browser.

   TEXT EDITOR: There are many text editors available for writing HTML, ranging from simple editors to advanced integrated development environments (IDEs). Some of the most popular text editors for HTML include:
   .Notepad++
   .Sublime Text
   .Visual Studio Code
   .Atom

   For beginners, a simple text editor like Notepad++ or Sublime Text is often the best choice. These editors are easy to use and offer basic functionality for writing HTML. As you become more experienced, you may want to explore more advanced text editors or IDEs with additional features and functionality.

   WEB BROWSER: A web browser is a software application used to access and view web pages on the internet. It is the main tool that people use to navigate the internet, allowing them to access and interact with various websites, web applications, and other online content.

   For web development, web browsers are essential tools for testing and debugging web pages. They provide developers with the ability to preview changes in real time, inspect and edit the HTML, CSS, and JavaScript code, and diagnose any issues that may arise. There are several web browsers available that can be used to test HTML code. Some of the most popular browsers include:
   .Google Chrome
   .Mozilla Firefox
   .Microsoft Edge
   .Safari

   For beginners, any of these web browsers will work well for testing HTML code. However, Google Chrome is often the most recommended browser for web development due to its popularity and the range of developer tools it offers.

5. Creating your first HTML web page.

First, let's learn how to create our very first HTML file step-by-step and test it in our browser.

i. Open your chosen text editor.

ii. Start a new file: Click on "File" and select "New" to start a new file.

iii. Add HTML code: Type the basic HTML structure in the new file. The basic structure should include the HTML document type declaration, the opening and closing HTML tags, and the opening and closing head and body tags. Here's an example:

<!DOCTYPE html>
<html>
<!-- Head Section content -->
  <head>
<!-- Page title -->
    <title>My First HTML Page</title>
  </head>
<!-- Body Section content -->
  <body>
<!-- Used to display heading content -->
    <h1>Hello World!</h1>
<!-- Used to display paragrapg content -->
    <p>This is my first HTML page.</p>
  </body>
</html>

iv. Save the file: Save the file with a .html extension. For example, "myfirstpage.html".

v. Open the file in a web browser: Open your preferred web browser and navigate to the file location on your computer. Double-click on the file to open it in the browser, or drag and drop the file into the browser window. The HTML code you wrote will be displayed as a web page in the browser.

Congratulations, you've just created and displayed your first HTML file!

After creating an HTML file, it's important to understand how HTML tags work. HTML tags are used to define the content and structure of a web page. Each tag represents a specific type of content and consists of a start tag and an end tag. However, there are also self-closing tags that do not require an end tag. The text to be displayed on a web page is included within the tags.

<! DOCTYPE html> - The <!DOCTYPE html > declaration at the beginning of an HTML document indicates the version of HTML being used. It is not an HTML tag but rather an instruction to the web browser about what type of document it is processing. The declaration is the only one needed in HTML5 and informs the browser that the document is written in HTML5 markup language. Earlier versions of HTML had different DOCTYPE declarations, which are now no longer needed.

<html> - The <html> tag defines the root element of an HTML document and tells the browser that it's an HTML document. It's the second outer container element that encloses all other elements.

<head> - The <head> tag defines the head portion of an HTML document and contains information related to the document. Elements within the tag are not visible on the front end of a webpage.

<body> - The <body> tag encloses all the visible content of a webpage. It's the part that the browser displays on the front end.

Let's now delve into HTML tags. While we'll cover only a few important ones here, feel free to explore more here (here). HTML tags fall into two types: Inline and Block. All tags can have multiple attributes.

• HTML tags and semantics.

  INLINE ELEMENTS: Inline elements are HTML elements that take up only as much space as required to display their content. They are commonly used for formatting smaller content pieces within larger blocks of text, such as bold or italicized text, images, or links. Examples of inline elements include <a>, <strong>, <em>, <img>, and <span>. Inline elements can be nested within each other or block-level elements, but cannot contain block-level elements. They do not start on a new line and do not create a new line after the element. Inline elements are frequently used together with block-level elements to create more complex layouts.

  SEMANTIC TAGS: Semantic HTML refers to the use of HTML tags and elements to describe the structure and meaning of content within a web page. It improves accessibility for users with disabilities and helps search engines and other machines understand the content and context of a web page. Semantic HTML tags, such as <header>, <nav>, <main> and <footer> provide meaningful structure to content, and using them instead of generic tags can improve search engine optimization and assistive technology for visually impaired users. It can also provide more meaningful information to screen readers, such as using the tag with the "alt" attribute to describe an image.

  BASIC TAGS:
  <html> : Defines an HTML document
  <head>: Defines information about the document
  <title> : Defines the title of the document
  <body>: Defines the document's body
  <h1>,<h2>,<h3>.....<h6>: Defines headings from largest to smallest
  <p>: Defines a paragraph
  <a>: Defines a hyperlink
  <img>: Defines an image
  This is not an exhaustive list, but it covers some of the most commonly used tags.

  HTML is the foundation of every website on the internet, and understanding how to use it is a crucial first step toward becoming a web developer. This blog post has covered the basics of HTML, including its definition, uses, and basic concepts such as tags, elements, attributes, hyperlinks, and document structure. To start writing HTML code, you need essential tools such as a text editor and a web browser, which are easy to find and use. With this knowledge, you can start building your online presence by creating your web pages from scratch.

  Thanks for reading this article, Follow us for more informative content on technology and development.

  We value your opinion, so please don't hesitate to leave your thoughts in the comments section below. We are always looking to improve and provide our readers with the best content possible.

  If you found this article helpful, please consider giving it a clap and sharing it with your peers. Your support means a lot to us and helps us reach a wider audience.

  About the Author:

  Abubakar Muhd Ala is a Frontend Software Engineer and a Computer Science student at Aliko Dangote University Of Science and Tech, Kano. I am passionate about technology and communication, and I enjoy simplifying complex concepts into easily understandable language for everyone. Follow me for more insightful content on technology and development.

  Want to connect? 📲

  📸 Instagram | 💼LinkedIn |🐦Twitter

  📩youndsadeeq10@gmail.com

  ¡Thanks! ❣️