HTML Tutorial

HTML Tutorial
Flipped Coding Workbook

Intro To HTML
HTML stands for hyper text markup language.
It's the foundation for every web page out there because without HTML
there would be no web pages.
You'll create HTML elements using different tags.
These tags represent different pieces of content like headings,
paragraphs, lists, and images.
When you open a web page, you aren't going to see these tags.
The tags are kind of like placeholders for the content that you put inside
of them.
Here's what a basic HTML document looks like.

Intro To HTML
Let's go over each of these elements.
The <!DOCTYPE HTML5> tells the browser that this is an HTML5
document.
The <html> element is the root element of the page.
The <head> holds all of the meta information about the web page.
The <title> sets a title for the page.
The <link> element links another file to your HTML file.
The <script> element is where you put your JavaScript.
You can either add a reference to it like in this example or you can write
the code inside of the <script> tags.
Next is the <body> and it holds all of the content you see on your page.
Then there's the <h1> which is a the most important and largest heading
you can have.
After that is the <h2> and it is the second most important and largest
heading option.
Lastly is the humble <p>.
It just defines paragraph elements.
Here's what this file looks like in your browser.

Intro To HTML
Most HTML elements have both opening and closing tags.
The majority of the tags you use will be in this format:
<tagname>whatever your content is</tagname>
You might also hear these tags called the start tag and the end tag.
There are a few exceptions to this and you've already seen one.
The <link> element is one of the few HTML elements that is self-closing.
It doesn't need a closing tag at all.
Sometimes you'll see tags like these closed like this: <link />.
That's because HTML used to required you to put that forward slash.

Intro To HTML
Now you can use it if you're familiar with it or are more comfort seeing a
closing of some sort, but you don’t need to.
I want to touch on web browsers for a second.
The sole purpose of all the web browsers is to read HTML documents so
you can use the website.
Browsers translate the HTML code into the text, graphics, and data that
you can see on a website.
But to get started, you need to write an HTML document.
In the next section you'll learn a little about text editors and you'll get a
few free text editor options to choose from.

Text Editors
In order to write HTML, you need a text editor and you can't use
something like Word for that.
The good news is that there are a lot of good, free text editors out there.
My favorite is Atom because of how customizable it is.
There are other options like Sublime Text and Visual Studio Code if you
wanted to look around.
After you have your text editor installed and opened, open a new file and
name it "index.html".
Make sure you include the .html extension because if you don't this won't
be an HTML file.
Once you have that done, you need to write some HTML.
You can copy the code from the previous section or you can take a stab at
writing your own by referencing that code.
Once you have that code in the file go ahead and save it.
Then you go to the folder where you saved it and click on the file.
It should open in your browser.
If it didn't, try to drag and drop the file into your browser.
That's how we got the that image in the last section.

Text Editors
Now that you have a text editor and you've played with it a bit, let's go.
In the next section you'll learn about some of the basic HTML elements
and you can play with them in your editor.

Basic HTML Elements
You've already seen three of the basic HTML elements, but I want to go
over those in a little more detail and show you a few others.
Keep in mind that there are way more HTML elements than you will learn
about in this tutorial, but they all work about the same way.
Let's talk about the heading elements.
Headings are defined with the tags <h1> through <h6>.
<h1> represents the most important heading and <h6> represents the
least important header.
Honestly, you'll rarely see a heading below <h3> but they do pop up
occasionally.
Then there's the good old <p> tag.
This tag is responsible for defining every paragraph on the page.
It's also used to make block level elements.
A block level element is one that starts on a completely new line and takes
up the full width of the screen.
There are a few inline elements and you'll see one soon.
<p> tags are also used for more than just text.
You can put pictures in them, videos, polls, anything.
One that we haven't gone over yet is the <img> element.
This element is responsible for showing images on the page.
You have to set a source for this element.
We'll talk about attributes in the next section.

Basic HTML Elements
The <img> element has one of those special self-closing tags so you don't
have to worry about two tags here.
Now let's go over one of the most important elements in HTML.
The <a> element.
This element is responsible for linking to other web pages.
Without <a> elements, you wouldn't be able to go to different pages on
the same website without knowing the individual URLs.
These tags are the reason we can wander around the internet so
effortlessly.
<a> has both opening and closing tags.
In between the two tags is where you put the content that people will
click on to go to another specified web page.
The last element we'll cover in this tutorial is the <div>.
When you get into the depths of building websites or you start working on
teams you'll see these a lot.
The <div> is normally used to group elements together for styling or
functionality purposes.
Basically they make it easier to work with the HTML in your CSS and
JavaScript files.
That's all for the basic elements.

Basic HTML Elements
In the next section you'll be learning about some of the most commonly
used HTML attributes.
With your knowledge of the basic HTML elements, the attributes should
help make more sense of how everything ties together.

Basic HTML Attributes
Every HTML element you ever learn about has attributes that you can
give it.
Attributes are there to give the browser extra information about the
element.
You'll always add attributes inside of the opening tag of an element.
In most cases you can expect attributes to have two parts: the attribute
name and the attribute value.
Of course there are a few exceptions to this although the majority of the
attributes will have that name and value combo.
The href attribute is one used in the <a> and the <link> and others.
The href attribute tells the browser the link to follow in order to get the
content it needs.
You need to give this attribute the URL it needs to follow for its value.
The src attribute is very similar to the href attribute because it also tells
the browser the location of something it needs.
In this case it an actually file location instead of just a URL.
You'll see this used in the <img> and <script>.
Another attribute is the style attribute.
With this attribute you can start making your web page look like you want
it too.
You can write CSS code as the style value.
You can learn more about CSS code in my CSS Module.

Basic HTML Attributes
Now it's time for a super important attribute.
This is one that can be used on all HTML elements and you'll use them
quite a bit.
The id attribute is used to give a unique id to an HTML element.
That means that no two HTML elements can have an id attribute with the
same value.
Multiple elements can have different id attribute values though.
You usually want to use an id attribute if you plan on styling an element in
a distinct way or if you plan on using it for something specific in the
JavaScript.
The last super important attribute is the class attribute.
This is similar to the id attribute except you can have the same class
attribute value for multiple elements.
The reason you would want to use a class attribute is because you need to
style multiple elements the same way or you need to target multiple
elements in your JavaScript.
Alright!
That's it for the HTML attributes.
In the next section you'll learn the next steps you need to take and get a
small assignment.

Next Steps
You made it through the basics of HTML!
Hopefully it doesn't seem that bad because it's not.
It'll take some time to learn the different tags and attributes, but not as
long as you think.
The next thing you need to learn is how to properly structure your HTML
documents.
After that learning CSS is the next step.
That's where you'll learn how to style your pages and make them look
good.
Then you definitely need to learn JavaScript.
Once you know some JavaScript you can start making your pages more
interactive and easy to use.
Now your assignment is to make a simple web page using the tags you
learned about in this tutorial.
This is the best way for you to really learn this stuff.
If you get stuck, need help, or just have some general questions you can
always ask me in the forums.

Call To Action
Go make a simple web page with the elements you
learned about in this tutorial.
Tell me how it goes in the forums!

HTML Tutorial

More Related Content

What's hot

Similar to HTML Tutorial

More from Milecia McGregor

Recently uploaded

HTML Tutorial