Many newbies in programming are often overwhelmed with the technical jargons they encounter in the early stages of their journey. As they dive from material to material , they become ever more confused as it dawns on them that their learning path lacks structure and it feels like they are stumbling in a maze. This article is my way of ushering them into the first gate of web development.
For every web developer a knowledge of HTML, CSS and javascript is essential. The very first language that must be learned remains HTML. i won’t bore you with the other two because in this article i would be focused exclusively on html.
HTML is an acronym for hypertext markup language. it describes the structure of the webpage. It does this through the aid of elements. it also tells the browser how to display content. so anytime you see words and headings as well as images or paragraphs they were done with the aid of HTML.
HTML consists of two main parts. The body and the title tag. The body is where the page contents is visible. while the head tag contains other relevant information like the title of your webpage and other contents you will have to learn later.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>The above HTML code you are seeing is just a website that outputs an hading titled “My First Heading” and a paragraph that contains the words “My First Paragraph” . we will start analysing line by line to fully understand what is happening.
On the first line we see a <!Doctype Html> this just tells the browser that we are using a version of html called html 5 . As you go deeper into programming you would come to understand the differences between it and other previous versions.
The second line starts up with a tag named <html> that is the opening tag of our html file and it tells the browser that whatever is between those tags are the contents of our html file and should be read as such. You would find the closing tag at the end of the file </html>. Closing tags of html elements have a / before the element name. An html element is in charge of telling the browser exactly how you want the words or pictures to appear. for example we can see a head tag . it specifies that whatever is inside that tag should be regarded as code written for head. The title tag is in charge of naming our webpage document. The titles you see of websites in our browser window is done using the title tag.
The body of the html document is in charge of what we see on the actual webpage. Everything you see on a website was written inside a body tag.
Different tags abound depending on what you want to do, an H1 tag shows that the words written inside should be regarded as a header and the size and boldness of the text should increase. the p tag stands for paragraph. Infact there are lots tags just like this and i won’t teach you here so i encourage you to go to freecodecamp.org and learn in more details.
Some tags do not need more than one tag , for example </br>. it signifies a line break. eg.
this is a new </br> beginning
output: this is a new
beginningthere is the img tag that lets you bring pictures and svgs into your html document and hence into website.
HTML remains one of the simplest languages to pick up and you should never feel dissapointed if learning it makes your brain cringe from entering unknown terrain.
if you have any question or suggestion i would be delighted to hear. contact me on twitter @rake_code
