Yesterday I made an introduction into the HTML and website building world but today i want to go further into the HTML syntax so it's crystal clear before we move forward.
As we discussed before, HTML syntax is a pretty basic one and once you master it you can easily go further and add another complementary languages to it to make your website look professional.
The head section further explanation
In the previous lesson I stated that the head section contains visible and not visible data associated to a website. Now I will give a example. And we will dive and analyze each component. (don't freak out okay?)
<!DOCTYPE html>
<html>
<head>
`<meta charset="utf-8">`
<meta name="viewport" content="width=device-width">
<meta name="description" content="Best way to showcase your profile">
<meta name="keywords" content="shoutout, fame, famous,tmeloti, the most expensive list of fame, instagram, get famous, get followers, advertise, the most expensive list">
<meta name="author" content="Dragos">
<title>The most expensive list</title>
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link rel="icon" type="image/ico" href="ico.png">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="https://use.fontawesome.com/212ee3b2a8.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
The Explanations
I know, you might think: "WHAT THE HECK IS THIS STUFF I'M OUT!". No, stay just a bit. Is extremely easy once you understand it. Now the real question? WHAT IS THIS?
This is a basic set of elements in the head section. You can see that this code contains only information between the head tags and that's it. The body is left empty.
So I will pick one by one, and talk about each element in the head section. Please note that every good website has those codes written into the head section. And it could be easily more. But for a beginner this would do.
The META tag.
<meta> is useless without an attribute. And my friends, an attribute is code written INSIDE a tag. Not BETWEEN tags. What is written BETWEEN tags is seen on the website (mostly) and what is written IN the tag is more of a back end story.
The meta tags are used to describe a website. This shows essential information about a website like the author, the description of a website, the language and so on.
You might noticed that the meta tag doesn't have closing tags, and it is a single tag. This is one of the tags which are single.
<meta charset="utf-8">This is the basic encoding of a website. When we save an html file to our computer this tells the computer this is an html file. (even though the extension is .html). We can see that attributes are written like this: <tagName attribute="bla bla bla"> This is more of a general example. The tagName is basically any possible tag and the attribute is separated by the tagName with a space, and after the atribute name an equal sign is mandatory followed by double quote signs. On your text editor if you mess up, the mistake might be highlighted so you can solve the issue before rendering the actual page.
<meta name="viewport" content="width=device-width"> This meta tag is used for the responsive design of a webpage. This is a another huge topic. Don't worry about this, we will cover this later.
<meta name="description" content="Best way to showcase your profile"> This is basically the description that appears below the link of a page in a search engine. I explained this in the previous tutorial.
<meta name="keywords" content="shoutout, fame, famous,tmeloti, the most expensive list of fame, instagram, get famous, get followers, advertise, the most expensive list"> Those are tags for your website, or keywords. If someone types this on a search engine your website might pop up. ( if it's popular enough) Tags work identical like steem tags do.
<meta name="author" content="Dragos"> Here you can state the author of the webpage.
<title>The most expensive list</title> This title shows up on the tabs in your browser, I made a picture with this in the previous tutorial.
<link rel="stylesheet" href="./css/style.css"> Now this is a super important part. Linking your HTML page to a CSS page. This basically allows you to style your webpage on a different file. You can also style your page on the html code page by using the <style> </style> tags in your HEAD section. We will cover styling once we are finished with HTML tutorials.
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> This is a font family from google fonts. This is just extra, you absolutely don't need to include this on your website. But if you enjoy a non default font this should be handy.
<link rel="icon" type="image/ico" href="ico.png"> This is the favicon. The favicon is the little logo that appears on the tab. Just like the steem logo: 
<link rel="stylesheet" href="css/font-awesome.css">
<script src="https://use.fontawesome.com/212ee3b2a8.js"></script> Those two elements in the head section are related with the usage of a icon family which is free. Using those elements make using icons on your site much more feasible. The easiest example of an icon is the search icon on steemit: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> And the last element is the integration of JQuery. JQuery is a Javascript library used to add functionality to a website. This topic will be covered after the styling tutorials.
The wrap up
At first it might seem extremely complicated but once you use those your life would get much easier and you will understand coding HTML much better. Remember, those elements are very important and every website has those kinds of elements. Even though they are important I don't advise you to learn them. You can always copy and paste them at the beginning of your project.
Tomorrow we will learn how to make a clickable link on HTML! Thank you so much for reading and have a nice day!
great post, dragos0897 as usual!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations @dragos0897! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPDownvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
i am upvoted and reply your post plz visit me
upvoted,reply,follow and resteem when you work in steemit thanks alot,
my id = https://steemit.com/@pranashroy
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit