If someone had told me 35 days ago that I would be able to share my technical knowledge with a community of developers, I would not believe them as I am more of a product manager and designer. As someone with no technical background, I decided to learn front-end development because I wanted to get familiar with technical terms. I have been learning for about 30 days and I decided to share my learnings from a product manager's perspective.
HTML
HTML is short for Hyper Text Markup Language. It is regarded as the standard language for web page creation. It enables developers and anyone to create paragraphs, and links using HTML elements such as tags, and attributes. To display the content of a webpage, the code is usually written within two tags known as the opening and closing tags {although it is important to note that some tags are self-closing}.
The tool that I use and that is widely used to code is called Visual Studio.
HTML finds application in the following:
Web Development: HTML is used to design how a browser displays elements such as text and hyperlinks on a webpage.
Navigation: HTML makes it possible to easily insert links and navigate between web pages and websites.
Documentation: HTML makes it possible to organize and format documents.
Some Notable Tags
Body Tag: Every content of a webpage including links, images, and videos is usually contained within this tag. When writing a tag, the body tag is written as:
<body></body>
Heading Tags: The heading tag is used to display particular contents of a webpage. The tags range from h1 to h6 depending on how bold/big the heading should appear. If I want to make the sentence 'My First Website' appear as a heading on a web page, depending on how big I want it to appear, I would write any of the following code:
<body>
<h1>My First Website</h1>
<h2>My First Website</h2>
<h3>My First Website</h3>
<h4>My First Website</h4>
<h5>My First Website</h5>
<h6>My First Website</h6>
</body>
Paragraph Tag: The paragraph tag signifies the beginning and end of a paragraph on a webpage. To display the sentence 'Welcome to my website' on a webpage, the following code will be written.
<body>
<p>Welcome to my Website</p>
</body>
List Items: To create list items, 2 tags can be used. They are known as the ordered list tag and the unordered list tag.
The ordered list tag creates a numbered list of items on a webpage using the <ol></ol> tag. For example, we have been given this grocery list:
Seasoning
Cornflakes
Banana
Cream
Toiletries
To display the above as it is numbered on a webpage, we would write the following lines of code:
<body>
<ol>
<li>Seasoning</li>
<li>Cornflakes</li>
<li>Banana</li>
<li>Cream</li>
<li>Toiletries</li>
</ol>
</body>/
To write the same grocery list as an unordered list {with no numbering}, the <ul></ul> tag will be used.
<body>
<ul>
<li>Seasoning</li>
<li>Cornflakes</li>
<li>Banana</li>
<li>Cream</li>
<li>Toiletries</li>
</ul>
</body>/
Attribute Tag: The attribute tag <a></a> makes it possible to link and navigate to web pages. For example, to make it possible to link to Hashnode's website by clicking on 'Go to Hasnode', the following code will be written.
<body>
<a href='https://www.hasnode.com'>Go to Hashnode</a>
</body>
Image Tag: The image tag makes it possible to display an image on a webpage or document. It is self-closing and usually contains an alternate text which will be displayed in cases where the image is not visible to the webpage viewer. The width will also be specified to specify the size of the image that will be displayed on the webpage. If we were to display an image of a running cat saved as cat.jpg in an image file within our code editor: the following code will be written:
<body>
<img src='images/cat.jpg' alt='a running cat' width='200px'/>
<body>
In conclusion, knowing how to write HTML is the starting point for building functional webpages and websites.