Hyper Text Markup Language (HTML) is a wonderful place to start if you want to understand how to build and style websites. This guide will introduce you to HTML, a good starting language to understand the core concepts of web development, to build your very own personal website. Mastering the fundamentals is critical; after you've mastered the fundamentals, you'll be able to customize the website's look and add unique content. To follow along with this guide, you don't need any prior coding knowledge.

For this guide I will be making a webpage for my favorite hobby.

Supplies

Before we start some important tools have prepare:

Starting with a free code editor like Visual Studio Code or Atom is a terrific way to begin. We'll be using Visual Studio Code as our primary code editor for this guide, and also you may use any code editor you prefer. If you're using another editor, certain directions might have to be tweaked accordingly to achieve the same result.
Microsoft Edge or Chrome are examples of web browsers. We'll be using Chrome as our go-to search engine, but you're free to use anything you choose.

Step 1: Step 1: Making the File and Getting Started

To establish a new file in Visual Studio Code, open your chosen text editor and pick "New File" from the "File" menu item in the top menu as shown in the image.

To begin, prepare the file to be used as the website's homepage. Adding the declaration to the first line of a web document is the first step in structuring it. This statement informs the browser about the kind of HTML utilized, which is necessary because there are many forms of HTML. HTML5 is the existing web standard for HTML, as specified in this declaration.

The element will then be added by using the opening and closing tags. e.g. <html> </html>

Note: Closing tags always proceed the element with a /

The element informs the browser whether all of the material contained within it is meant to be viewed as HTML. We'll also add the lang property to this element, which indicates the language of the site. We'll use the en language tag to indicate that our webpage is in English in this instance.

The image above is what should be typed.

Note: All code that we insert into our webpage file from now on will be placed between the opening and closing tags.

Step 2: Step 2: Head Element

Now we will add the element to our webpage, this element generates a section where we may insert machine-readable information about our website. Browsers and search engines largely utilize this information to comprehend the page's material. The contents of the element are not accessible on the web page.

The HTML element is a semantic element in the sense that it informs the browser and the creator about the webpage content's purpose. Semantic elements have been used to enhance an HTML document's human interpretation, offer more data to the browser for comprehending the text, and improve site accessibility and placement.

It's worth noting that you'll now be nesting a number of HTML elements within each other.

Adding a <head> element to your site generates a section where we may insert machine-readable data about our web content. Browsers and search engines largely utilize this data to comprehend the page's content. The contents of the <head> element are not displayed on the web page.

The <title> and <meta> elements should be nested in the <head> element, while the <head> is nested in the <html> element.

Now, let's have a look at the significance of the code we just introduced. The line of code following the opening tag sets the document's character set to UTF-8, a unicode standard that accommodates the bulk of characters from a broad range of grammatical constructions.

The element is used to set the title of the HTML page in the line of code. The information you enter in this section will appear on the browser tab and in the search engine results as the webpage title, and it will not appear on the page itself. Change "Gunpla" with your own name or the title of the webpage you're creating.

element is used to set the title of the HTML page in the following line of code. The information you enter in this section will appear on the browser tab and the search engine results as the webpage title, and it will not appear on the page itself. Change "Gunpla" with your own name or the title of the webpage you're creating. At this point you would close off the html tag with (note every tag ending contains a forward slash before the tag itself) and have a starting webpage by saving the file as my first webpage then clicking the file to open with your preferred web browser. However, let's take it a step further and flesh out a fully formed webpage.

Step 3: Step 3: Header and Paragraph Tags

The HTML element is a semantic element that informs the browser that the content belongs in the webpage's body and is meant to be shown. We'll add a tag to our web page in this lesson so that we may add content afterwards.

Within this section between the body tags we will be adding two key element tags that are responsible for our webpage's content.

For our content we will start by adding a headers. The element defines a large heading usually located at the top of the webpage that often contains any logos or name for the webpage itself. Between the tags you can write any sort of heading, in the example above the use of the tag is used to signify the title of the webpage but also to indicate sections of information (note there can be more than one header tag that can indicated by the numerical number after the h). Like the tag a header tag is used to indicate the title of the web page and introduce new topics.

A paragraph is represented by the HTML element. In visuals, paragraphs are often portrayed as blocks of text divided by blank lines and/or first-line spacing, whereas HTML paragraphs can be any structured arrangement of related material, such as photos or input fields.

Step 4: Step 4: Lists

Aside from the usual text that we can put in our tags we can also nest lists in them as they are also blocks of text. There are distinctly two types of lists an unordered list and ordered list.

An unordered list is a grouping of objects with no particular order or succession, whereas an ordered list has a particular order and succession and is indicated numerically. In this example we will be using unordered list to list different types of item materials.

The <ul> element is used to create an unordered list. The <li> tag is used to begin each list item. The standard default, the list elements will be marked with bullet points and this list will be nested in the tags under a header for context.

Step 5: Step 5: Images

To give more visual information the <img> tag is used to add images to a Html file. The src property of the <img> element is required, because it lets you to specify the path of the image file. Note that the <img> tag does not require a closing tag like </img>

Along side this tag are styling properties that we can apply called height and width to modify the size of the image and this can be represented by height=" " and width=" " .

When uploading an image, always use the alt property to offer alternative text that describes the picture's content. Assistive technologies utilize this text to interpret material to visually challenged site users.

The alt property is represented as alt=" "

Note the quotations are important in specifying what is to be placed within these properties.

Step 6: Step 6: Links

Finally what we can do to give our webpage a little more content we can use hyperlinks. The href property (href=" "), which identifies the link's location, is by far the most significant attribute of the <a> (anchor) element. Within href we will include the url of what we want to link to for our webpage either for more information or example.

In the example above the <a> tag is nested in the along side text and this is important if we want to add text to give viewers an idea of where the link will take them.

Step 7: Your All Finished!

To wrap up your webpage locate file tab in visual studio code and on the drop down menu click 'save as' and save your file as "MyFirstWebpage" or any name you can identify the file and save to either documents or onto your desktop. Once you have successfully save your file locate it and double click to reveal a drop down menu and select open with to select your preferred browser to view your webpage.

Congratulations you have successfully created you first webpage!