You Will Understand HTML By the End of This - A Tutorial for the Complete Beginner

Transcribed: 2017-07-24.

HTML Beginner Tutorial Intro

Hey everybody, welcome. Today we are going to change gears a little bit, and we're going to assume that you have no working knowledge of websites, web development, html, or anything.

Today we're going to talk to the complete beginner so if you have no idea how to make heads or tails of this web stuff, we're going to start today. With the very baby basics, which I would say is HTML.

And you will understand it by the end of this!

So if you are interested in building websites then good for you, you're in the right place. I have been building websites for over 8 years now professionally, full time and self employed. This is where it all starts.

Why Learn HTML?

I would say that building websites is an excellent choice of career and hobby time. Some of the reasons why it is so awesome: it is so fast and easy to take an idea to the publishing stage. You don't have to get things printed, you don't have to distribute thousands of fliers or books. You just push it to the web and it's there instantly.

It's also a highly valuable and marketable skill. Websites need to be built, people need to make them, that's not going away. It's not a street lamp lighter or carriage driver job - this is a good skill to learn.

And I would say that when you learn more about technology, and you get more versed in the way the world is going.... Even some of the analytical skills of programming. Today you'll notice that neatness is very critical, and I would say that these things change you as a person. You learn to think more critically and maybe smarter!

Why HTML is Awesome

HTML is a super awesome technology. It is the backbone of how everything gets set up and laid out, and why everything is pretty on the internet. Why everything isn't just plain text -- that courier font in the same size. Why we can link things together. How we can get around. I would say that for all those reasons, HTML is just a pretty awesome thing.

It stands for hyper text markup language and normally the words "hyper text" refer to links. If you can imagine the internet in its earliest days, it was primarily for research and scientific purposes, and you would be connecting all the documents on my computer with all the documents on your computer. And all the documents on our peers and unversities computers, and you would need a way to jump around and get around from place to place.

So, hypertext! That's the little link part that you can click on. So you've got to add those links, and make the page a little bit prettier, and here we are -- all that time has passed and all those upgrades have been made -- so we're here today with a very robust set of things that we can do just from our home computer. Just from a plain old text editor.

We'll learn HTML today and we'll get the basics. We'll get our feet wet.

This will allow us to make stuff that is pretty and easy to read. You can link to and from your website and you can get your users navigating around, and this will allow you ultimately to use all of the media that the internet offers. Photo, text, video, audio, the whole thing, once you learn HTML you can start using these to send your message.

Things That are Not HTML

Here are a couple of things that are not html. You have all opened a Word document right? And you can do some really pretty stuff - drag in images, make things bold. We've all written reports and we've all, I think, spaced our paragraphs out a little bit farther so that you can meet that minimum # of pages. Just by increasing the distance between paragraphs. Right?!

Well that is not html. That is letting Microsoft Word which is a proprietary product -- you only get to have Microsoft Word if you've paid for it, and obviously we don't have MS Word on all of our laptops, tablets, and phones. So anyone that doesn't have Word doesn't get to see what you see when you are editing that document.

And that's not really using HTML, although there are styling similarities.

Similarly, HTML is not a plain text document. If you've ever opened up something in Notepad or Wordpad, or some of those, that's not really HTML either. That's just raw text. And we don't want to read everything in 10pt Courier, a monospace font. That would be very boring and not exactly easy on the eyes. Not good for skimming either.

Spreadsheets are not HTML. Spreadsheets have cells and they do calculations, and it's not HTML either.

So you can see, we really need to know HTML to build a website.

We really need to know this markup and styling language to get a website together. But it's really not as hard as you think.

I would say by FAR the biggest thing to know is that every little word or sentence that is special is tagged. That means that it has something at the beginning, an opening tag, and something at the end to tell you when the tag is over.

If there's a piece of text that is a link and it says Click Here, then right before the word Click there is an opening tag. And right after the last word "here" there is a closing tag. So as long as you know that, that everything is tagged, so that you can display things in a special way, and that every tag has an open and a close component to it, you will be fine.

Likewise, you want everything to nest very neatly like the Russian nesting dolls. You can't have something start inside another tag and then finish never, or finish outside of it. So make everything very clean - like I said, like Russian nesting dolls - and it will totally work out for you.

Let's get started by opening up a text editing program

Here's the thing - when we are writing our HTML we want a very simple text editing type program. We don't want to use Word, we don't want to use .... I have forgotten what the Mac equivalent is... We don't want to use Wordpad either. If the program has options for bold an italic, we don't want to use that program. Those programs pass along little bits of extra data to keep those styles in place and we don't want that.

My recommendation for you would be to just use whatever the bare bones thing is on your computer right now. If you're on a PC that is going to be Notepad, on a Mac I believe it is TextEdit. I don't know if anyone out there is using Linux but me, but that might be Gedit.

Today I'm actually using a Windows machine - this is a Windows 7 machine, kind of old I know.

I'm going to open up Notepad. My trusty Notepad! And we are going to type the words Hello World into the open window. That's the standard learning phrase for everything involved in web development, programming, and html.

So type Hello World and we're going to save it with a filename of index.html. So let's do it! Hello World. Then I'll Save As to my desktop, index.html, and you will see that we have to change the type to All Files.

Okay, now let's go find it and double click on it and see what happens. I'll go ahead and ask it to open specifically with Chrome today since I already have Chrome open. And you can see, we have an HTML file - that's hyper text markup langauge, we did make an HTML file - and it is giving us our words back out.

That is totally legit! I promise you, we are doing it, it was really that easy.

Now what we want to do is start to put some content on our page. We're going to add a paragraph of text, so we're going to type in a sentence -- you can even just type random things -- then we'll hit the return key and type in another sentence.

The first tag we're going to learn today is called the Paragraph tag. You'll see that all of our tags start with the open (well it's actually the less-than sign) angle bracket. It starts with the angle bracket, then the name of the tag. And these are all predetermined names, they're not made up. Well, somebody made them up, but we only pick from a select palette of those that exist.

So we're going to use P today which means Paragraph. And then we're going to finish the opening tag. So we'll add hard bracket, P, then the end hard bracket. Then at the end of our text we'll do the same thing but with this slash in front of the p, which means that the tag is over.

So let's go ahead and do that today. I'm going to continue my sentence... Hello world, this is my first html page. Isn't it grand? I knew you would love it.

Okay we're going to go ahead and save that. After every step together we'll reload the browser - just pop back over to index.html and reload it.

Ah, I forgot to add our paragraph tags but this is good. You can see it's all on one line right now, and the thing to know is that white space doesn't matter with HTML. That's why we have to use those tags. Because the white space isn't considered at all. It's just for us. It's just for you and me and our readability.

So we're doing an open paragraph on the front, and a closed paragraph on the back. We're gonna save it and reload. And the reason nothing has changed is because we have to go to the next slide...

Where we are going to separate our respective pararaphs. So if we have two lines - you'll notice we wrote our text on two lines - and if these are supposed to be separate paragraphs we actually have to tag them separately. Every paragraph must be tagged individually.

So let us go ahead and make these two paragraphs, one on top of the other. We're going to do that by closing the tag P, and since it's just you and me with this white space, I'm going to go ahead and add an extra line so it's easy to read. And now I've added the second P tag, right there.

We've got our HTML document with two paragraph tags in it, we'll go ahead and save it, and we're going to reload it. And there we go! Now we have two paragraph elements and they are being displayed just like we want them to be. With a nice bit of space in between them.

So since we are going to learn to speak the language of the browser, let's start creating some headings. Let's create some dynamism. Let's make it really easy to read. Every document has a heading, right? Everything has a title, so let's get that going.

We have a series of H tags for this kind of event, this tool that we want to do, where we break up the text. We have from numbers 1 to 7, although usually people use 1-3 and sometimes even 4, because I mean... If you're a reader, then you know, how often do things really get THAT granular and specific?

What we're going to do is put this series of Heading 1 tags at the top of our page. We'll put the H1 open tag, then the title of our page, and then we will close that tag with this closing H1 tag. And while we're at it let's go ahead and put in a subheader for great readability, and also so we can see the difference. We'll put it between our two paragraphs and we're going to use H2, and we'll see what happens.

So let's give some spaces, and we'll say H1 "this is my cool page". And then we will close it with that slash H1 tag. And then let's go ahead and add a subheader - h2, which will be a little bit smaller - and we'll say "welcome to the page". Close the tag, save the file, jump back over and reload it.

And you can see, we've started to get this page hierarchy going. Now you might think, oh, this doesn't look like a lot yet. But I promise you, the HTML is the very first step. This is the skeleton and underneath every website you have every been to, if you took away the graphics, and you took away the colors and styling, it would look JUST like this. I promise you it would.

This is our very first step on the road to understanding websites and being able to build them, and just being super awesome.

Here's How We Make Links in HTML

So the next thing you're going to want to be able to do is make some links. The tag we use is called an Anchor tag, and the actual syntax is an A. It's just an "a", and anything we put in the middle of these A tags is going to be our link text.

We're introducing this tag now because it has what we call attributes, they are little extra bits, and in this case we need to know where the link should go. Today we're just going to link to Google but if we had other pages then we would certainly want to link to the other page on our own website. So we're going to type in this A tag and make some link text, and we're also going to give it a very special attribute that only applies to these anchor link "a" tags.

That's going to be href (probably Hypertext Reference). Type href equals, then put a set of double quote marks, and put any url - any url at all - and that's where the link will go. This will go right after the open <a tag. Let's do that together.

I'm actually going to make a new paragraph... So we're going to start the paragraph, and say "<a", space, and now the attribute. We'll do href equals http://google.com and close the double quote. Remember we have to close everything, all of our attributes, all of our tags.

Then we will finish the opening anchor tag and type in our text. This is a link to google. Now you can see we've set up a situation where we have an anchor tag inside a paragraph tag, so now it is important that we close them in the same sequence. Since the P is the outer thing, we'll close it last. The A is the inner thing, so we'll close it first. So close the anchor and then the paragraph, making sure those are nested properly.

Now we'll click Save, and jump on over to our webpage, and you can see it's added a link with the default link treatment (blue). When we click it we do indeed go to Google.

So I don't know about you but I am totally dazzled by this kind of stuff!

Let's Make This Whole HTML Page Legit

Now we have to take this a little more towards the professional side. We've got to make it totally legit. We have to start our document correctly. So what we're going to do is tell the browser that this whole document is html. We'll do that by wrapping our entire document in opening and closing HTML tags.

Let's go ahead and do that now. So I'll just give a couple blank new lines up there... We'll write &lt;html&gt; at the top. Then a couple of new lines on the bottom - remember, white space doesn't really matter.

The other thing we're going to do is that, there is some extra information that every webpage carries along. And so to tell the browser which part is our page and text for display, like where our headings and copy and images are, we're going to use what is called the Body tag. That's going to be the body of the document that will actually show up, so we will also wrap everything we just wrote in body tags. And that will nest inside our HTML tags.

We're going to do an open body tag, and a close body tag. Go ahead and save it. And really nothing changes on the refresh because we don't have a lot going on here, and so far we've been writing pretty good valid markup. So you won't see a visible change there.

Want a Title in the Tab?

Now here we're seeing a title in this current tab, which is really useful and cool, but on our page we're just seeing "index.html". So let's add that other element. If it's not going to be shown, so if it's not in the Body, it's got to be in the Head.

So we also have a Head element that is available to us, and it'll go right inside the HTML tag as the first thing in your document. The very first thing. And that's going to carry some extra data like what you want the title to be called on this document. This can also be used to include other files, other assets for the whole site.

It can be used to specify what you want people to see when the page shows up in search. You can actually custom write those kinds of things, and today we're going to add the Head tag right there in the front, and we'll also add the Title tag which is going to let us choose right here (the tab) what we want this to be.

So let's go ahead and do that. So right after HTML we're going to add HEAD. And what I'm going to do is go down a couple more lines and close my tag right now. This is a good practice to do because it helps you keep really neat, and so you don't have quite so many nesting problems. Let's go ahead and also do that with the title tag. I'll just close it right now as I'm writing it. This is a very common thing, you'll see a lot of people immediately write the open and close tag, and then backtrack into the middle of them.

I'm going to call it My Cool Page, then save. Run back over to Index in the browser, reload it, and you can see that it's now filled out that little piece here (tab name). And there's all kinds of little things... They're not easter eggs, because they aren't secrets waiting to be discovered... But there's all kinds of little things waiting to be discovered. I've got a little icon here.

These are just all the things you learn as you go along and study all the different things.

Last Thing Today

The last thing we're going to do today together is to make sure that everybody's browser knows that we wrote this document in the modern times. So we're going to add a little piece of code at the very top of our whole document, and this one is actually going to be a bit confusing because it's not a tag. It's just a tiny tiny bit that is going to help everybody's browser to figure out when we wrote this and what kind of rendering, what kind of standards it should hold our code to.

As you can imagine, the web has been around for a really long time. Things have really evolved in that time. There are different tags, there are different styles, a lot has changed to say the least. And for backwards compatibility so that those really old websites don't break, the browsers will try really hard. And sometimes they will do some quirky and patchy things.

But we are writing our code today in, you know, modern web times. And so we are going to add this little snippet so that the browsers understand that, and they don't try to back patch or back port... They won't do anything funny with our layouts. So it's just going to be Exclamation mark "doctype" space "html". And that's it, and it doesn't have a closing tag. And it goes right at the beginning of our document.

And you're going to start out every HTML document just like that, so that everything renders the way you expect to across everybody's browser. So let's add that in. Exclamation mark, docytpe html. You do have to spell it right.

Save it. And ooh, a little space appeared, that's cool. This is one thing that will help everything render the same.

This is our finished HTML page, and this is a legit HTML page! This has everything you need and nothing you don't.

So we did it, right?! That's not bad. Not bad at all. And we actually made a page with hierarchy, and it's readable. You could just add so many paragraphs and so many headings. I know you can see how this would flow if you had a document you wanted to represent. Any kind of data that you wanted to represent.

How dod you do?

I hope you did well! I hope that was easy to follow for you. I would love to know how you did on that. You can upvote if you are seeing this on Reddit, you can email me if you found this on my website. Please feel free to share, please feel free to comment.

The next thing I want you to do, and that would be on your own time, is follow some of the many resources for this. I wanted to get you started today with a friendly voice who remembers how hard it was to get started and get your struthers about you. But the next thing I want you to do is go and read about some more of these HTML elements. There is a whole standard, so look for "html element spec" - that's a good term to google.

There are going to be so many elements you can use, so many attributes, so start getting familiar with those. Today we just went over paragraphs and headings, and the more that you know -- the more of those that you can learn -- the more interesting pages you can create. Line breaks, list items, articles, sidebars, all kinds of cool stuff.

If you would like to give this presentation please feel free to do so and inspire more people.

Here is the subreddit, reddit.com/r/ladydevs. Thanks guys and have a great day.