I have been studying Software Engineering for more than a year now. In that time, I learned some Java and MySQL. Now that a new block has started, we are diving head first into web development. More specifically, HTML, CSS, C# and ASP.NET.
Unfortunately, since I have no prior knowledge nor experience with any of the aforementioned markup and programming languages, I decided to take it upon myself to also take some courses in my own time, besides all the material from school.
Since this is the first official post on Iconic Devs, I want to make clear what my intentions are: I want to share what I have learnt in order to help others, and I hope to get questions and feedback to improve upon myself and , again, help others who might run into the same or similar problems.
Some general information
Now that we’ve got that introduction out of the way, let’s go through some of the basics of HTML. HTML stands for Hyper Text Markup Language and is used to describe the structure of a webpage. The other “half” of the equation is called CSS which stands for Cascading Style Sheets. Like HTML, CSS is a markup language. The key difference here is that CSS is used to describe how HTML is presented. Think of things like colors, fonts and layouts.
HTML5 is the fifth and most current version of HTML, which brings a host of changes and improvements over the older versions. I will talk more about those another time, but for now just remember that when I say HTML, I am talking about HTML5.
When using HTML to build a webpage, you use elements, which are in turn represented by tags. An HTML element is a individual component of an HTML document or web page. Tags are the keywords that define how your browser should format and structure your content. For example, using the “strong” tag makes text appear bold:
This text is strong!
You might have noticed that you open with <strong> and close with </strong>. As a result, the first tag can be seen as an opener, while the second with closes the strong markup using the forward slash. There are many more elements/tags available. A great resource to use is the Mozilla Developer Network. They have pretty much all the information you need when it comes to HTML, as well as many other subjects. You can find a list of all the HTML elements for example, therefore you should be sure to use it as you continue learning HTML.
HTML Basics: Boilerplate, Comments and Basic Tags
All HTML pages should follow a basic boilerplate. This is a template that contains every basic element and declaration that each and every HTML document must have. It all starts with the doctype declaration. This declaration tells your browser that it is reading an HTML document and should be treated as such. That’s why it must be the first line in your HTML document. If it isn’t, your browser won’t know how to read and translate your document to actual content. This is the doctype declaration for HTML5:
After the doctype deceleration follows an html tag, a head tag, a title tag and a body tag. In the image below you can see a basic boilerplate. The <html> tag contains all HTML. The head contains the metadata, for example the page title. Then comes the body, which will contain all the content that is actually displayed when the HTML document is viewed in a browser. A lot of tags need to be closed properly, while some don’t need to be closed (no </tag>). Using the element list as a reference, you should be able to work your way around properly formatting and closing your code to ensure everything is displaying correctly when viewing your HTML document in a browser.
Lastly, you see some grayed out text. These are called comments. Comments are not visible normally through a browser. Instead, they are used as notes as to what something is used for, why it’s there, what it does or something related that either you or another developer can work with.
How can I try this out myself?
Hopefully you feel confident enough to try and make a very simple HTML page by now using the information and resources given above. The question is, then, how do you start? Well, the great thing about HTML is that you can pretty much use any text editor you are comfortable with! However, I recommend going with Sublime Text. Sublime Text is a text editor made for coding. It can make the boilerplate for you and it highlights all HTML tags so that you can easily spot every single one of them. When done, you save the HTML document as nameHere.html (the name doesn’t matter, but it should end in .html) and voila! You can open it with any browser and see what you have created.
Be sure to use the list of all the HTML elements from the MDN to try different tags. Also, when using a browser like Chrome or Firefox, you can easily view the page source of web pages that you visit. Using both Chrome and Firefox, you can use CTRL + U to view the page source. I recommend that you use it on a few pages, and see if you can recognize some of the things that you’ve learned here.
It should be noted that while Sublime Text can be used for free infinitely, you do get asked to purchase a license from time to time. As someone who is on the road to become a developer himself, I strongly encourage that you do actually buy a license if you are planning on continued use.
We’ve come to the end of my very first post here on Iconic Devs. Hopefully you’ve learned something new or reaffirmed what you already knew. If you think it was good, have any tips or simply found a mistake, let me know what you think in the comments below! Be sure to also share this post if possible, as it will greatly help with the growth of this blog. If you want to get in touch with me for any reason and want to do so directly, feel free to shoot me an e-mail at firstname.lastname@example.org
In my next post about HTML, we’ll cover more of the basics and dive deeper into some elements. Hopefully you’ll be here to check it out. Until then!