This is part 3 of the article “How to build websites for free”, you can check part 1 and part 2. We are going to focus more, on our semantic element main. Then we will close this with our footer and that will be the end of our website. To summarize this chapter this is where most of the website’s content appears. Now that I’ve given you a hint let us get to business.
Add these 3 sections elements on your main element like I said previously the semantic elements have no effect; they just make it easy for someone who is going through your code. In our first section, the only element that I’ll say you are unfamiliar with is the p element which I think you can guess what it does. Yes, you are right it stands for a paragraph this is where you put your sentence inside p tags. In our second section is the img elements which stand for the image. As you can see some of these HTML elements are just self-explanatory.
Our img elements have 2 attributes the first one “src” stands for source this points to the location of the image that you want to show, which can be remotely or locally. In my case, the image is in the local directory which is the folder images. The “alt” attribute stands for alternate is what gonna show if it happens your image can’t be found or loaded. So the text you put there is what gonna show. If you didn’t put anything then nothing is going to show but it is always a good practice to put alt.
Then moving to our last section I’m going to explain the form element. The form element is a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, and many more. In our case let’s start with the input element it has 3 attributes, the first attribute is “type” with the value “text”. You telling the browser that you want to show the text field other values could be: button, checkbox, radio. The name attribute is not important for now, maybe I’ll explain it in a later article. Placeholder attribute with value is what you want to show on your text field if there’s no placeholder then nothing will show on the text field. Then last but not least we have a button element that is not different from the input element.
Lastly is the bottom of our page which doesn’t need much explanation as you’ve already seen most of those elements. The small element as the name suggests is going to make our text smaller. One last thing before I close this chapter is this “©”, this is called an HTML character entity go ahead and open your web page to see what it shows, if it shows this © then it is correct.
Our website now is finished all that is left is to make it beautiful which is what we going to do in the next article (CSS – part 1)
As homework, go and play around with input elements and use them to see the difference and try using different HTML character entities and see the results.
Learn more HTML elements on this website: w3schools