The Basics of HTML
HTML: the building blocks of the world wide web
Prior to starting at the Flatiron School, I couldn’t type a single line of code. But while starting the prework, I decided to learn HTML by myself to get started on the technical chapter of my life.
As an English language learner, the alphabet was the building block for the language. While the alphabet was the building block for the English language, HTML is the basic building block for the World Wide Web.
Objectives of this article
This article is meant to teach absolute beginners, those who don’t have any knowledge in HTML how to get started in programming HTML. I am not an expert and by no means will this be enough to get a job. Rather, it is just a small judge so that when you complete these tasks, you will be less intimidated by code as my peers are.
By the end of this article, you should be able to understand what HTML is, how the syntax works, what an HTML boiler is, and what tags are. Hopefully, you continue to practice as well as move on to CSS, which manipulates the styling of HTML.
What exactly is HTML?
HTML stands for HyperText Markup Language. The elements make up the structure and words on websites. Every word and every image you see on a page is bounded by tags and creates a visual representation of code. You can see for yourself by doing the following: right-click on an empty space and hover on inspect. This will let you access developer tools and see the HTML tags that make up this current page.
You will see this:
Don’t be intimidated, this is just the code that represents this page.
To get started on coding HTML, open up a text editor. This can be atom.io or VisualStudioCode https://code.visualstudio.com/
Then, click file and select the file new option and name this file: index.html
Awesome! you just created your first html file!
Now, in order to set up the file properly, you have to declare the document type. Type <!DOCTYPE html> on the first line. Then, create the html tag. Everything you see on the webpage and the structure exists between this tag. Use the image below as reference.
Then you want to create a head where your title will go. I don’t know exactly what <meta charset=”UTF-8"> means but it allows for different languages to be included and basically is an 8 bit representation of every language? Don’t hold it against me. And then you create a title for your document. This is basically what’s going to show up in the tab. Then the body is going to be everything you see on the page AKA where all the elements will show up. Again, use the image below as a reference.
Viewing what you create
Elements and Syntax
An element is everything from the beginning tag to the end tag. A tag looks something like this: <p></p>
Usually, they come in pairs where the second one has a / after the <.
Tags perform different functions and in HTML5, which is the current version of HTML, there are 110 tags. You don’t need to know all 110 to be great at HTML but you should practice and familiarize yourself with them.
Here is a link to all 110, go crazy with them.
Attributes
Every element can have attributes. Attributes are just extra info used to describe an element and they always get declared in the beginning tag of an element.
Disclaimer: The ones listed below are attributes but other tags can also have the same attributes.
Links use the href attribute. href is set equal to the link. The the stuff between the tags is what the user sees.
Images use the src attribute for the picture link.
Images can also have width and height attributes.
Here is a link to more attributes and their examples.
Classes
Classes are used to group elements into one kind of group. This is very useful for styling in CSS. Don’t worry about that for now.
You can declare a class like this:
This is also extra information but it will be easier for you to style later cause right now your stuff basically looks like a Microsoft word document.
Id
All elements can have an Id. An Id is basically used to make an element a special snowflake and to differentiate it. Although these are all snowflakes and all p elements, they are different because their ids are different.
This is all I have to teach, for now, please continue practicing it. When you feel like you are a master at it, you should try to look up CSS and then Javascript.
