Welcome to the CodeBabes HTML virgin course. HTML stands for HyperText Markup Language, and is the underlying foundation for all websites. For this course you’re going to need a computer, and your brain. The bar is set pretty high.
Creating an HTML page is super easy. Create a folder on your desktop called website. Inside, we create a file called index.html, and add some text. This will be the home page of our site.
We’ll stick some lorum ipsum in here. Lorem ipsum is filler text web developers use before there is actual content.
If you want to preview how an HTML file looks, you can open the file in your browser.
Let’s talk about how to write HTML. There are three things you need to know, tags, elements, and attributes. HTML is made up of a bunch of different tags that let the browser know what’s going on. We’ll do an H1 tag as an example. This tag identifies the first level header element of an HTML page. So usually the H1 would be the main title of the page. Tags look like this, the tag name, enclosed by two angle brackets. That’s the opening tag, then your text comes next. The closing tag looks the same, but there is a forward slash added right before the tag name. With all these pieces together, we now have an HTML element.
Let’s create a paragraph element for comparison. You’ll notice that the H1 text is bigger than the paragraph text. This is because of default styles that come with the browser. They will change the look of different tags by default. As you progress, you’ll learn how to change this look with CSS.
Speaking of CSS, lets talk about attributes. HTML attributes are most commonly used in conjunction with CSS. They help CSS choose which HTML elements need their appearance changed. They are added like this, attribute equals value, within the brackets of the first tag. Attributes are used for stuff like id’s and classes which CSS and javascript use to target certain elements.
So, we’ve got some HTML, but we need a few more tags in our file to make this page technically correct. First we’ll add the doctype tag to the top of the page. This tells the browser what type of HTML to expect. There are many types of HTML. This doctype means HTML 5. HTML 5 is all the rage, you’ve probably heard about how it can cure cancer and bring your dead dog back to life. For now don’t worry about it; there will be other lessons about all of the amazeballs things it can do. The things we’re discussing apply to all versions of HTML.
An HTML document consists of two main parts. The head. And the body. The head tag contains information about the page, such as the title, description, and in more advanced lessons, references to css files. Things in the head don’t appear on the page, but they still have important uses. The title is displayed on the browser tab, and is used as the name of bookmarks. Search engines can use the title in search results.
Next comes the body element, which encloses the visible HTML content, like the header, paragraph and anything else we plan on adding to the page. And of course we have to close all these tags. And boom goes the dynamite, we’ve got ourselves a legit page of HTML. Next, we’ll talk more about text tags and things will heat up!
Questions or Comments?