Learn HTML with me. 😎
Hello people!! It’s been a while since I posted anything. Well as I decided to learn front-end web development skills, I thought why not write down what I learnt each day and walk you all through it. How sweet am I?
So first fundamental skill to develop any website is to know what is HTML?, How to use HTML?
WHAT IS HTML?
HTML stands for Hyper Text Markup Language, HTML is the standard markup language for creating Web pages. I will add few more points in the later section of this blog.
HOW TO USE HTML?
Well, this is why I am here. The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document.
First of all, let me show you a basic HTML structure and explain the elements. By elements I mean, An HTML element that is defined by a start tag, some content, and an end tag:
<tagname>Content goes here…</tagname>
I have used VS Code here since I already use it as an IDE for my ML models. But while I was exploring, I found Brackets which is a open source text editor that understands web design. I mean you can literally see the changes in the web preview without having to save changes and run the file every time.
Coming back to understanding HTML.
- The
<!DOCTYPE html>declaration defines that this document is an HTML5 document - The
<html>element is the root element of an HTML page - The
<head>element contains meta information about the HTML page - The
<title>element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) - The
<body>element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. - The
<h1>element defines a large heading - The
<p>element defines a paragraph
Tags that are useful to add small detailing/formatting are <b>,<br>,<hr>,<i>,<em>
The <b> element defines a bold text, <br> defines a line break, <hr> defines a horizontal rule/line, <i> defines italic text, <em> is similar to italics used to emphasize a piece of text.
Let’s see how our HTML code looks like in a browser.
LISTS, PARAGRAPHS, TEXT STYLING
HTML lists allow web developers to group a set of related items in lists. There are 2 kinds of list in HTML that you can define.
- Unordered List
- Ordered List
I’ll show you how to define unordered list first and maybe ordered list later.
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default. The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to. You can see in the picture above that I have mentioned “#” for href since I currently do not have other web pages to link. I could provide my github link for the 3rd list item though.
Let’s see how this looks like in a browser.
SUMMARY
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.
Wow! I cannot believe we have come to end of this blog already. I’m gonna come up with a new blog about how to create tables and forms. Keep in touch.
