Part 9 - Learning HTML for BeginnersWritten by Eric Muss-Barnes, 12 December 2018
Before we start on the basics of building an HTML page, there are 4 things I want to explain:
1.) Get a good text editor.
2.) Download a .ZIP file of the lesson.
3.) Learn to "refresh" a browser page.
4.) Learn to "view source" in a browser.
Let's go over those 4 points, one at a time...
GET A GOOD TEXT-EDITING PROGRAM...
I suggest using Notepad++ if you are using Windows.
I suggest using jEdit if you are on Apple macOS.
I have provided links below to both of those programs.
Here are a few other options...
2.) Note Tab Lite
3.) Em Editor
5.) Note Pad (comes with Windows, but has no syntax-highlighting)
5.) TextEdit (comes with macOS, but has no syntax-highlighting)
The reason you want to use a good text-editor is because the better programs have "syntax-highlighting" features. Syntax-highlighting will colorize sections of code, to make it easier to identify the section you are working with. Let me give you two examples below. I know you are not going to understand the code, but that's not the point. I just want you to see the visual difference between working with and without syntax highlighting. This first image features syntax highlighting.
As you can see from the example above, even if you can't read the code or understand it, the color-coding makes different sections stand out more than others.
Below is an example of the same code, without syntax highlighting.
Looks far more confusing without the colorized code, doesn't it? This is why I suggest you use a program offering syntax-highlighting. It simply makes it easier to identify and isolate the blocks of code you are working with.
Make sure you are using a text-editor and DO NOT use a word-processor.
Because word-processing programs (e.g. Microsoft Word, Apache Open Office, etc.) will often monkey around with your code, and change it when you save the file. Since you want complete control over the code you are writing, I can not suggest you use ANY word-processing programs.
There are some specialized web-building applications/programs which tie the visuals of the browser into a text-editor feature. These are called "WYSIWYG" programs. WYSIWYG (pronounced "whizzy-wig") in an acronym for "What You See Is What You Get" and they were very popular and trendy for a time. I do not recommend using any WYSIWYG software either.
You may think it's a good idea to build a page the way you want visually, then study the code written for it. That could be a fantastic way to learn! Yes, that sounds like a great theory on paper. Unfortunately, WYSIWYG programs don't allow you to do that, because WYSIWYG programs are notorious for writing horrible code. They are clunky and inefficient and create very complicated and bloated files, for even the most simplistic of webpages. So, to learn this the proper way, stick with a text-editor and a browser.
DOWNLOAD THE .ZIP FILE OF THE LESSON..
At the bottom of the page, you will see another download link called ".ZIP File of Lesson Code". Please download that file before we begin, and open it on your computer. When you run the .zip file, it should automatically create a folder containing all the files we will use in this lesson.
LEARN TO "REFRESH" YOUR BROWSER...
For these lessons, you are going to need two programs running simultaneously. You will want to open the .html files in your syntax-highlighting text-editor and your favorite web browser, at the same time. You want the .html file opened in both, so you can alter the file in the text editor, then refresh your browser and see your changes instantly. Anytime you change the code in the text-editor, you will hit CTRL+S to save the page, then switch to your browser and refresh the page to see your changes. In order to refresh your page in a browser, there are two options:
1.) Hit the "F5" key at the very top of your keyboard.
2.) Click the "refresh" button near the URL field.
The refresh button is typically a spiral arrow, or a double-arrow of some sort, indicating a reload of the page. Below are some examples of what the refresh button looks like in various browsers.
LEARN TO "VIEW SOURCE" YOUR BROWSER...
For these lessons, you will often want to view the sourcecode inside your browser. In most browsers, you can do this by right-clicking on the page and selecting "View source..." or "View page source..." or something similar. Alternatively, you can use the CTRL+U keyboard shortcut. This will pop-up a new browser window, displaying the HTML code for that page. See below for an example:
LET'S GET STARTED!...
Finally, we can begin to program an HTML page!
First, let's make the most simplistic page we can, with a "comment" on it.
If you click the View Demo button, you will see the webpage that this code creates.
PART 9 - LESSON A - COMMENTSI am always going to show you the example code in a black box with green text, like you see below. You can either copy-and-paste this code into your text editor, or you can view the demo by clicking the button beneath the black box, or you can follow along by finding this lesson in the .zip file you downloaded. Whichever method you prefer to use is fine. I want to make sure you have plenty of options, then you decide which workflow is best for you.
Next, let's go over some basic functionality of HTML tags. What are "tags"? I will explain them in the next lesson. Keep on reading, buckaroo!
PART 9 - LESSON B - TAGS
You may have noticed something very important is missing. All webpages should have a title in the title-bar of the web browser. So far, the two example pages above have not had titles. Let's show how to add titles in the next lesson.
PART 9 - LESSON C - TITLE
The comments can make things a little cluttered. Let's take a look at the page without comments.
PART 9 - LESSON D - WITHOUT COMMENTS
Now you have seen some basic text on the page. Let's see how to format a large block of text.
PART 9 - LESSON E - PARAGRAPHS
The previous pages had all the text flowing together. Note that
your sourcecode, you will not see a linebreak on the webpage unless you use HTML tags to create those breaks. Be sure to look at this paragraph in your text editor and in your browser and note the difference in the formatting. In this paragraph, you will see linebreaks in the text editor, but not in the browser - because the linebreaks are not using HTML tags.
Alternately, you can use a "line break" tag instead of a "paragraph break" tag - the "line break" tag simply jumps
line, instead of into a new paragraph. Computer-nerds will tell you "paragraph break" tags are outdated, so you must only use double "line break" tags to get the same effect.
That is computer-nerd hogwash! Don't listen to them. Regardless of any edicts handed down by the pretentious Oracle Of Computer Nerds, the "paragraph break" tag functions perfectly in all webbrowsers and therefore is not "outdated" in any way. Feel free to use "paragraph breaks" and "line breaks" as you see fit to control your text spacing. One more important note to defy the computer-nerd crowd - paragraph and line break tags DO NOT require a closing tag. Many computer-nerds use closing tags for paragraphs and line breaks, saying that is the "proper" way to write your code... but those close tags don't actually do anything. Don't use them. Let the computer-nerds waste more time typing. You and I have other things to do, so we want our code to be fast and efficient.
So, to review - you can control the line-spacing of text with 2 different tags - "paragraph" or "line break" - which jump text into a new paragraph or a new line respectively.
These pages have been pretty boring up until this point. Next, let's spice things up by adding pictures! Woohoo! We will also add some simple navigation by showing you how to make links, so getting to new pages becomes a little easier. Since the concept of "HTML tags" is hopefully a little easier to understand at this point, the explanations will be slightly less detailed and we'll start to speed things up a tad. Ready? Onto the next page...
Okay. We have gotten fancy with formatting text and paragraphs. Next lesson will add pictures...
PART 9 - LESSON F - LINKS AND PICTURES
Adding a picture to a page is very simple. If you view the sourcecode for this page, you will see the code used to display the image shown below.
Note the sourcecode after "src=" gives the filepath to the image based upon the folder structure from the point where the current page resides. In this case, there is an "images" folder which contains an image called "sunset-palm.jpg" and that is the image displayed on the page. Also take note that there is no closing tag for an image.
This text links to the next page and uses code that is very similar to the image tag. Below, you will find links to all of the previous pages we have viewed. Again, the code is fairly self-explanatory when you view the source:
Note, you can also force links to open in the same bowser window, or in a new window, using the "target" attribute.
So, remember, we use "IMG SRC" for image tags and "A HREF" for link tags. IMG tags do not have a close. A HREF tags do have a close. You can also make an image a link, simply by wrapping the link tag around an image tag, like so:
So far, we just have plain, small text on the screen. The default size and font of text is kind of boring. What happens when you want to do some more fancy formatting to the text? There are a lot of commands you can use in HTML to make your text different. That is in the next lesson.
PART 9 - LESSON G - TEXT FORMATTING
This sentence uses an italic tag.
This sentence uses a bold tag.
This sentence uses a strong tag. As you can see, "strong" and "bold" do the exact same thing. "Strong" is the newer version of "bold" tags. Computer-nerds will tell you not to use "bold" and only use "strong" instead. Do not listen to them. Use whichever one you want. They both work fine. I prefer "bold" simply because it's a lot less to type.
This sentence uses a strong tag. As you can see, "em" and "italics" do the exact same thing. "em" is the newer version of "italics" tags. Computer-nerds will tell you not to use "italics" and only use "em" instead. Do not listen to them. Use whichever one you want. They both work fine. I prefer "i" simply because it's a lot less to type.
Note that you can also "nest" these tags inside each other, in order to cumulatively add parameters to a font. That's a fancy way to say "make 'em do a bunch of stuff at the same time"...
For example, this sentence is bold AND italic.
Pay close attention when viewing the sourcecode for the previous sentence and see how the tags are nested. The most important thing to remember when nesting tags is to CLOSE THEM IN EXACT REVERSE ORDER. You can start with bold or italic - it doesn't matter which order you open them - just be sure to close them in the reverse order you opened them with.
Why is it important to close your tags in exact reverse order? Two reasons:
1. It's a lot easier to read the code and understand what is going on when things are organized in order.
2. Browsers will sometimes get confused and start acting all wonky if you start closing your tags in a haphazard order. This is especially true when you start using more powerful and sophisticated tags which control things like page layout. If you start opening and closing page layout tags in the wrong order, your whole page can break. So, get into the good habit of always closing things in reverse-order.
By the way, if you aren't viewing the sourcecode on this page yet, now might be a good time to start. Lots of instructions are starting to get buried in the comments here.
Fonts can also be colored to any color you want. And again, colors and other parameters can be combined - for example, colored fonts with bold and italics or both italic and bold simultaneously.
Font colors use a # symbol, followed by 6-digit code (called a "hexadecimal" or "hex") to determine the color being shown. How do you find the hexadecimal code (or "hex value") to create the color you want? There are many options - various image editors give hex values, a Google search for "hex color", there are even small applications that can help you out. Quick little side note - you can use a hex value to change the background color of an entire page too - click here to see an example.
Similar to "bold" and "paragraphs", there are 2 ways to color your fonts. You can use a "font tag" or you can use an "inline style" to get the same result. I highly recommend learning the "inline style" method.
Why use "inline styles" instead of "font-tags" for coloring your font?
Because "inline styles" are a direct relative to "cascading style sheets" (known as "CSS") which are a very robust and powerful way to control numerous aspects of your page such as text parameters. While both an "inline style" and a "font tag" only apply to a single instance of text, CSS can control text all over multiple pages of an entire website. In other words - if you change a specified CSS font color from red to blue, it will change all instances of that font, all over your site, instantly! If you use "font tags" or "inline styles" you'd have to change each font color individually. Hence, during the learning process, I suggest you apply customization to your text with "inline sytles" because by learning those, you will already understand 80% of CSS when it comes time to learn CSS functionality.
Not only can you make text bold using a bold tag or a strong tag, but can also do it with an inline style as well - in fact, this sentence uses all 3 methods. View the source and check it out.
This sentence is using an "inline style" for making this text bold and blue and for making this text italic.
This sentence is using "font tags" for making this text bold and blue and for making this text italic.
As you can see, the two sentences above look identical in a browser, but the code looks very different when you "view source" for this page. The "inline style" approach is a little more complicated, but, again, I recommend that you learn "inline styles", simply because it will make CSS far easier to understand, and you will really enjoy the power and flexibility you get from CSS.
Another HTML tag for text formatting is called a "headline" tag. One of the unique features of a "headline" tag is providing an automatic paragraph-break, underneath the text, once the tag is closed.
This uses a "H1" headline tag. Note the automatic paragraph break beneath this line.
This uses a "H2" headline tag. Note the automatic paragraph break beneath this line.
This uses a "H3" headline tag. Note the automatic paragraph break beneath this line.
This uses a "H4" headline tag. Note the automatic paragraph break beneath this line.
This uses a "H5" headline tag. Note the automatic paragraph break beneath this line.
Once again, the below text illustrates how an HTML tag for text formatting (namely the "headline" tag) can be "recreated" using an "inline style" instead. However, an "inline style" does not provide the automatic paragraph break - when using inline styles, the line breaks must be inserted manually.
This uses an "inline style" to attain a similar effect as a H1 "headline tag."
This uses an "inline style" to attain a similar effect as a H2 "headline tag."
This uses an "inline style" to attain a similar effect as a H3 "headline tag."
This uses an "inline style" to attain a similar effect as a H4 "headline tag."
This uses an "inline style" to attain a similar effect as a H5 "headline tag."
Now, let's cover another common need in text layout - numbering lines and bullet points. This is very simple code too. Be sure to view source and see how it was done. Here are examples of each:
- First number item.
- Second number item.
- Third number item.
- Fourth number item.
- Fifth number item.
- First bullet item.
- Second bullet item.
- Third bullet item.
- Fourth bullet item.
- Fifth bullet item.
Finally, let's show you how to change the font itself. We have just been using the default "Times New Roman" font. But, by using a font tag, we can change the font to be anything a user has on their system. For example...
This sentence uses the "Arial" font tag.
This sentence uses the "Courier" font tag.
This sentence uses the "Verdana" font tag.
This sentence uses the "Tahoma" font tag.
With the dawn of HTML5 (the latest and greatest iteration of HTML) the "font face" tag is no longer officially supported. Therefore, you should use an inline style instead. That looks like this...
This sentence uses the "Arial" font style.
This sentence uses the "Courier" font style.
This sentence uses the "Verdana" font style.
This sentence uses the "Tahoma" font style.
So far, we have covered a lot of basics in a very short time. We covered many variations of formatting text, changing the color of a whole webpage, adding images to the page, linking text, and linking images. Of course, all our content simply runs down the lefhand side of the page and that's not a very compelling way to build a website. The next step is to start some real formatting and page layout.
This text links to the next page. Below, you will find links to all of the previous pages we have viewed.
The final lesson on basic HTML is to show you some page layout and formatting.
PART 9 - LESSON H - PAGE LAYOUT
Before we begin - a fair warning - this is where HTML starts to get a little more challenging and confusing. Learning basic tags and structures which are solid and unchanging is easy. I mean, you can only make italic text in 2 possible ways. That's pretty straightforward. There are no variations. No options. No variables.
Tables are a different story.
Think of tables in HTML like Lego bricks - their structure is solid and unchanging, but the options in which they can be creatively combined are endless and can become very intricate. Therefore, if you have been sailing through this learning process with ease, don't become discouraged if tables suddenly "slow you down" and get really confusing. Tables certainly have the potential to be quite befuddling. So, just take it easy and know that you may need to re-read this page and study this code a little bit more than the previous material.
Also, like Legos, you can build HTML tables in a very "clean" and streamlined way, or you can build a near-identical-looking structure in a rather "sloppy" way. Just like learning to build with Legos, your first HTML tables will likely be poorly constructed. That's okay. Give youself permission to screw up and do it badly. In time and with experience, you'll learn to make things more elegantly and efficient.
In the simplest terms, "tables" are made up of rows and columns to create a grid on the page which holds your content. The squares of the grid are called cells. The content in your table cells can be anything from text to images to video to whatever. Tables can have visible or invisible borders. For this course, we will obviously leave the borders visible most of the time, so you can see where the tables are on the page. This is another page where viewing the comments in the sourcecode will teach you far more than what you see in the browser.
|This text is inside a single table cell with a 1-pixel border.
|This text is inside a single table cell with a 5-pixel border.
|This table has all of the sourcecode in a single line. It displays in a browser the same as the first tables above, but it gets harder to read when you view source.
|This text is inside a table with 2 columns.
|This text is inside the second column.
|This text is inside a table with 2 rows.
|This text is inside the second row.
|This text is inside a table cell.
|This is another cell, with a table nested below this sentence.
The "cells" within table can also "span" rows and columns. This is where table layout can get really intricate. Let's start simply:
|This text spans 3 columns.
|This text spans 3 rows.
As you can imagine, between nesting tables and "colspan" and "rowspan" attributes, you have an enormous amount of diversity and control over your table layouts. Tables can also have many, many cells and rows and columns, like you can see below:
Below is the same table as the previous one, but with the borders turned off. To achieve this, note I simply changed the border from border="1" to read border="0" instead...
|This table has added attributes of "cellspacing" and "cellpadding" which are set to "0". If you do not declare a "cellspacing" and "cellpadding" amount, the default for cellspacing and cellpadding is "2" pixels.
|This table has an added attribute of "cellspacing" which is set to "10" and "cellpadding" which is set to "0".
|This table has an added attribute of "cellspacing" which is set to "0" and "cellpadding" which is set to "10".
|This table has a width of "100%".
Resize your browser window and this table will always stretch across the whole screen.
|This table has a width of "50%".
Resize your browser window and this table will always stretch across half the screen.
Okay, I know that was a LOT to absorb all at once. Don't fret. As I said earlier - tables are one of the areas where beginners often get really perplexed and intimidated by HTML. Since tables are pure "customization", they can become very confusing. However, learning HTML tables is the big "cornerstone" of HTML layout. Tables are very powerful tools which provide a large amount of controls. There isn't much "creativity" involved in a bold tag. But tables? Tables are pure creativity. I can show you how they work, but you need to figure out what to do with them to suit your own needs.
"Tables" are another feature of HTML which computer-nerds consider to be "outdated" and will tell you not to use them.
Why? Because it all depends on your reason for using them! There are a number of very popular websites still using tables for certain types of information, because sometimes a big old chart or graph is the best thing to use.
Well, that about covers all the basics of HTML!
Below, you will find links to all of the previous pages we have viewed.
Congratulations! You made it through the first step of the process. Those are the basics of HTML and simple web pages. There are a lot more HTML tags which I didn't cover, but again, the purpose of this course is to teach the basics. This is not intended to make you an expert. I just want to share the fundamentals and let you start to learn and expand your knowledge from there.
My philosophy of code has always been that old adage of K.I.S.S. - "Keep it simple, stupid."
Build all your websites using HTML. Period.
If HTML is incapable of accomplishing what you need, add the next-most-complicated technology.
Will it be easier to build using CSS? Then add some CSS.
Does your website have to use PHP and a database?
Fine. Then add that.
But don't ever use technology that is overly-complicated or unnecessary.
Always. Use. What. Is. The. Most. Simplistic. Technology. For. The. Task. At. Hand.
And one more thing...
Remember, the guest, the users are the MOST IMPORTANT THING. We build websites for the users.
Computer nerds don't.
Computer nerds like to show off their knowledge of the latest and greatest technology. They think it's "cool" to waste away their weekend, learning the hip and trendy new framework, or library, or building out a new server technology.
That's not cool.
That's a pathetic waste of time. Get a life, you nerds!
Don't misunderstand. I'm not saying a person shouldn't learn new technology. Obviously, I wouldn't be building an educational website teaching technology, if I didn't think people should learn it! I'm simply saying, don't learn technology because you think it's "neat" or "cool"; learn technology that will benefit the users. Because users don't care about the technology you have learned. Users don't care if a website is built with HTML or XHTML. Users don't care if a site uses CSS or PHP or jQuery libraries or the latest framework. Users just want a website that works and provides the information they need in a timely manner.
Does the website crash?
Does it take forever to load?
Is it easy to navigate?
Can they find what they are looking for?
Can they save the page?
Can they print it out?
Can they bookmark it to reference later?
Those are the issues and features users care about. Make sure you are building websites which allow users to do those things. Respect the needs of the users, first and foremost. This isn't about you. This isn't about your ego. This isn't about your skills or your knowledge. This isn't about impressing your coworkers and peers. Only computer nerds care about that irrelevant popularity contest.
Computer nerds are jerks.
Because computer nerds only care about what they think is cool.
Computer nerds don't care about users or the needs of the users.
Don't be a computer nerd.
Care about the users above all else. Respect the users. The users are what matter. Your own ego is not relevant. Unless you're a socially-inept computer nerd, who puts your own arrogance above the needs of those you are supposedly trying to help.
And remember, kids, the world owes you nothing... until you create things of value.
refresh/reloadForcing the web browser to display a new or updated version of the webpage code it is currently showing.
syntax-highlightingText editing programs which use color-coding to distinguish different sections of computer code.
view sourceHaving a browser display the HTML code it is rendering, in order to create the webpage you are currently viewing.
WYSIWYGAn acronym for "What You See Is What You Get" and is pronounced "whizzy-wig".
.zip fileA compact file containing a batch of other files. .ZIP files are used to share and transfer a group of files together, so users do not have to download one file at a time.
Microsoft Windows Software
Apple macOS Software