The Bone Structure of HTML
You may not believe me when I tell you, I fell in love with coding because of HTML and CSS! Weird right? I mean they aren’t even languages , like the infamous JavaScript, Python, Ruby or Java. HTML stands for “Hyper Text Markup Language” and CSS stands for “Cascading Style-Sheets”, which in normal people talk just means that html is the bones, blood & veins, and structure of creating a website, while css is the hair, skin and nails of it. With the power of the two, a beginner like myself was able to explore a snippet of the visual magic that coding can display!
As I mentioned, HTML is like the bone structure of creating a website! HTML was written in 1993 by Tim Berners-Lee, a contractor at CERN, (European Organization for Nuclear Research).
“The first publicly available description of HTML was a document called “HTML Tags”, first mentioned on the Internet by Tim Berners-Lee in late 1991.It describes 18 elements comprising the initial, relatively simple design of HTML. Except for the hyperlink tag, these were strongly influenced by SGMLguid, an in-house Standard Generalized Markup Language (SGML)-based documentation format at CERN. Eleven of these elements still exist in HTML 4.”
— (wikipedia, HTML)
To help you get more acquainted with html here are a few tags you should get familiar with in order to understand how to structure your next basic website!
The first thing you’ll notice is this <!DOCTYPE html> this is a document type declaration which is an instruction that that tells the browser what mark up language the page is written in. It is neither a tag or an element, only an indicator of what markup language that is being used. Leading after that is the <html> </html> tags that must be placed in between the rest of your code to help structure your website.
Now to introduce you to the blood and veins of an Html website! Inside our <html> opening / closing tags we have the <head> </head> tags which contains our <meta> tag information about the HTML page! The meta data that I am referring to are the descriptions, character set, page description, keywords, author of the document, and viewport settings. These are not visible to the user and are useful for browsers, search engines and other web servers. What you should always include in your <head> tags is the <title> HTML ROCKS! </title> , this is because the title page is visible in your search engine, so whatever you decide to define your page will show in the browser’s title bar.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> I Love HTML</title></head>
</html>
Now for the good part! After you have defined what document the page will be, what meta data you want to use and what title you would like to display for the page. We can now talk about the body structure of our HTML page! I like to think of the <body> tags as the muscles that holds the bones together, as in, these tags are what holds all of the elements needed to really keep our html page standing strong!
Inside our <body> </body> tags there are a huge assortment of elements, we can use to create our page, but for now I want to focus on a few of the basic elements you will encounter more often than not!
Lets start off with the h1, h2, h3, h4, h5, h6 tags. They are called header tags and they vary from the largest being h1 to the smallest being h6. You would normally use an h1 tag to define your main opening heading of your html page!
In order to write content inside of our <body> tags we need the <p> </p> tags. These tags are simply for paragraphs that you see in every webpage. A few great things you can do to make your paragraph pop out more are:
<b> or <strong> - This gives your words a more bolder look to them.
<i> - This italicizes the words in your paragraph
<u> - Is for underlining text
<small> - this can be used to make text smallerThere are a plethora of tags you can use to give your html page a little razzle- dazzle for your user to appreciate.
If you are curious on how web pages can have links and images included, there are tags for them as well! To have an image show in your webpage you simply use the <img> tag. What’s cool about this tag is that it is self closing, so you never have to worry about and ending </img> , thats not necessary!
To properly display your image you simply copy / paste the image address into your image tags like this:
<img src="https://i.pinimg.com/236x/01/c6/f4/01c6f460f860a0c5d6a6c22d01716951.jpg">Which will display as:
The same concept will go for a <a> tags. This called an anchor tag, this defines a hyperlink, which is used for linking one page to another like this:
<a href="https://www.w3schools.com/html/">
