Introduction to Web Development: HTML
4.6 (345 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
26,814 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Introduction to Web Development: HTML to your Wishlist.

Add to Wishlist

Introduction to Web Development: HTML

Learn how to build web pages with HTML, including syntax, major elements, and new HTML5 features and capabilities.
4.6 (345 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
26,814 students enrolled
Created by Brian Gorman
Last updated 8/2017
English [Auto-generated]
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 3 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Introduce HTML
  • Review HTML
  • Get knowledge of the Key components of HTML for Web Pages
  • Position the learner to continue moving forward as a web developer
  • Discuss some of the new features and standards of HTML5
View Curriculum
  • A computer
  • Time committment
  • Desire to learn
  • Ability to understand basic computer commands
  • Ability to solve problems and think analytically
  • Willingness to take what is presented and work with it to practice in your own way

This course is an overview of the HTML web programming standard. The course is intended for those who have never done anything with HTML or web pages and would like to build this basic knowledge for starting a career as a web developer or for learning how to program HTML for web pages. By no means will you be a world class UI developer at the end of this course, but you will have the basic understanding of building pages with HTML and HTML5, and at the end of the course you'll gain knowledge about where to go next to further your front-end web development skills

Who is the target audience?
  • New HTML developers
  • New Web Developers
  • Anyone who wants to build simple HTML pages and would like a refresher or information on the tags available through HTML
  • Anyone who has never learned about HTML5 and just wants a quick look at new HTML5 features
Compare to Other HTML Courses
Curriculum For This Course
55 Lectures
Welcome to the course
4 Lectures 15:47

This course overview gives us a brief introduction to who I am, who this course is for, and talks about the things we will learn throughout the course.

Preview 06:18

This video introduces us to the idea of an editor for use in our development. The discussion talks about some of the benefits of using the editor and also compares what code looks like in a regular program like notepad versus an editor like Microsoft Expression Web.

Preview 06:16

This video shows the installation of one potential editor, Microsoft Expression Web, which you can try for free. If you use this editor, once you get it installed and open, make sure to switch to the 'code' tab on the bottom of the page, where there are three choices 'Design', 'Split', or 'Code'.

Installing Microsoft Expression Web [Free Version]

Adobe Brackets is a very powerful, free editor from Adobe [think Flash, Dreamweaver,etc] that allows you to do all of the HTML editing you would need in this course and more. Although the videos are already produced using MS Expression Web, I believe many of you would prefer this editor, and there is no reason you can't easily translate the material for what is going on (loading a page into the editor, etc) to be able to do all of your HTML editing in Brackets.

Also, a special thanks to Joseph C. Caswell, who brought this editor to my attention and shared it with us in the discussions for our course!

Preview 00:59
Syntax and Page Layout
6 Lectures 17:14

This video gives us our first look at the markup language and points out a couple of things that are required for creating markup tags. The ideas of matching closing tags and self-closing tags are introduced and a couple of tag types are used to talk about this syntax.

Markup Language -- Tags

This video discusses attributes on markup tags in more detail. Here, we'll note that all attributes have a specific name and the value for the attribute needs to be wrapped in quotes.


This video examines the head section of the html document. We quickly talk about the fact that we have a doctype declaration and also the html tag that wraps the entire document, and then move into the head section. Although we aren't ready to do things like javascript and css, we note that this head section will be important when we want to include CSS or Javascript files in the future. Also, it is possible as we are learning to just write Javascript or CSS "in-line" using <script> and <style> tags.

The Head

This video takes another quick look at the <body> tag section of the html document, addressing the fact that our html markup will live in this section of the page. Additionally, an important note is that often advanced pages will include more scripting at the bottom of the body, which is a way to allow for a more efficient page operation.

The Body

This video introduces the html <form> tag. We'll use this once we start submitting from one page to another later in the course, but I wanted to cover it in the syntax portion before we get started.

One other note is that in the video I mention multiple forms are possible in some types of web programming and not possible in others. When working with HTML I mentioned we can add the 'id' attribute to differentiate between forms. I wanted to also mention that there is a 'name' attribute which may be used in the same way, even though I did not show the 'name' attribute in this video. In some instances, using 'name' instead of 'id' may be preferable, and vice versa. Because I have written a lot of JQuery, I tend to default to 'id' over 'name.'

A final note -- I also noticed that while I was lecturing I put the ending </form> tag inside of the <div></div> tags. Obviously, this is not correct, so I fixed the code on the attached supplementary material.

The Form

This lecture fixes a small error in the code from 'The Form' lecture and addresses the use of comments. Essentially, forming comments in HTML is easy, using the 'bang' operator (the exclamation point): <!-- anything you want goes here -->. Just make sure to close the comment so your page works.

5 Lectures 10:07

In this video we set up a folder to store our projects going forward.

Get Setup

In this video we create a new page called "Headings.html" in our project directory and show the use of the 6 heading tags -- <h1></h1> through <h6></h6> and view the page to see the difference in the generated text.

In the end I have decided to include the files so you will be able to directly reference them if something is going wrong on your end. However, you should not rely on these files. Instead, you should attempt to do the coding/development yourself. Just like any skill, the more you actually physically do it, the more it will register and you will be able to remember and repeat it later when you need to.


In this video, we browse out to a site "" to grab some standard lorem ipsum text. We'll place the text in a few <p></p> tags in order to get paragraph blocks for our page.

Paragraphs and Line Breaks

In this video we take a look at a couple of different tags that allow us to italicize text. The first way is by using <i>...</i>. We note, however, that another tag will often render as italicized in the browser, the <em>...</em> tag. The <em> tag is intended for emphasis on a word or phrase, and is friendly for screen readers when considering accessibility on our web pages.

Italic Text

In this video we take a look at a couple of different tags that allow us to embolden text. The first way is by using <b>...</b>. We note, however, that another tag will often render as emboldened in the browser, the <strong>...</strong> tag. The <strong> tag is intended for calling attention to the weight or importance of a word or phrase, and is friendly for screen readers when considering accessibility on our web pages.

Bold Text
Special Characters
3 Lectures 11:35

This video takes a look at using the special characters &amp;, &gt; and &lt; to create correct characters to render on our web pages and not cause any issues in our html code.

Ampersand, Greater Than, and Less Than

This video examines some special characters we can use if we want to specifically position text with whitespace. Since whitespace we enter is virtually ignored when the page is rendered, if we want to create indentations we need to use "&nbsp;" or "&emsp;" in order to render spacing in regular text.

Nonbreaking Space, Tab

This video takes a look at adding a copyright symbol to our pages, as well as looks into a couple of ways we can find the special characters and codes for the characters going forward. As there are many, and they all work the same, we won't cover them anymore in this course.

The link to the ASCII table that we took a look at in the video is: ASCII Table

Please remember that there are many available ASCII tables which can easily be found through a simple Google search.

Copyright and more to explore
2 Lectures 06:02

This video takes a look at creating a list of items that is ordered. We see that an ordered list actually renders with numbers in front of each item in the list. The ordered list uses the tags <ol>...</ol> to wrap all list items, and each list item is wrapped with the <li>..</li> tags to let the browser know about each list item.

Ordered Lists

This video takes a look at the other list type -- Unordered lists. The unordered list uses the tags <ul>...</ul> in order to wrap the list items. Just like the ordered list, the unordered list uses <li>...</li> tags to store each list item.

Since the concept is nearly similar to the ordered list, this video also gives us a chance to see our first "inline style." Any html tag can be styled as we so choose, and using style="list-style:none;" allows us to remove the bullets from the ul (or the numbers from the ol as well).

As you grow as a developer, you may write many different stylesheets where you'll apply the styles to classes, so each <ul> or <li> might be specifically covered and wouldn't need a direct inline style. This concept is out of the scope of our course, but I like to make you aware of how this would most likely be done in a real-world scenario.

Unordered Lists
2 Lectures 06:34

This video takes a look at creating Anchor tags to direct users to a different page. We also take a look at how we can control where the link is opened -- whether it is in the same tab or window, or in a new tab or window.

Anchors [Links]

This video takes a look at using the anchor tags to allow the user to send an email to a specified address. Additionally, we look at setting the subject on the email as a way to create a better idea of where the user sent the email from.

Anchors [mailto]
5 Lectures 24:16

This video is just a brief discussion about proceeding forward for our lectures. Going forward we'll be building more robust items, so we'll need to do the videos for these sections in order. Make sure to keep backups of your work in case you make a mistake and need to go back to where you were before, as well as set up a good folder structure if you have not done so to this point.

One other note: I've changed the template going forward to be html5 compliant and minimized the amount of information to help us easily see what we are working on. If for some reason you are on a non-html5 compliant browser, you may need to go back and get the files we were using to this point to make sure everything will render. All of the table code will work in the older styles as well.

Going Forward

In this video, we show how to create a table and add rows and cells to the table. The table header rows uses <th>...</th> for each cell, while each row after uses <td>...<td> for table cells. Rows are tagged with <tr>...</tr>. The table itself is tagged with the <table>...</table> tag.

Tables, Rows, Columns, and cells

In this video, we show how to add borders to the table and cells in our table. We start by showing how to style each table and cell to have a border. We then discuss a way to globally apply borders.

Global application of styles is much more desirable, even though it is more difficult to understand at first. The reason it is more desirable is because the global style can be easily changed and maintained, and we want to reduce the amount of work we have to do to restyle our pages in the future.

Finally, during the video I made a couple of mistakes, but the big mistake I made is talking about hexidecimal numbers. Hexidecimal numbers go from 0-9 and then from a-f with 0 being lowest and f being highest (a = 10, b = 11, c = 12, ..., f = 15). An HTML color with the hexidecimal code can be anything from #000000 [black] to #ffffff [white]. You can do a Google search to easily find the color(s) you want to use on your pages.

Cell and Row Styling - Borders

This video takes us through a great way to color our cells in rows so that we can visually distinguish the rows without having to really think about them. We'll once again show that the styling can be accomplished at the row level, however it will be beneficial to color at the global level. This presents a problem, however - as we don't want to color all the rows.

To solve the problem we learn about creating a style class that can be applied to specific rows using a class="ourstyle" attribute. This is a great introduction into how styles can be created right on the html page and used throughout. You should also start to visualize how this style could be created in a CSS file and included on our page so that we don't have to write styles for every html page we create. CSS is mostly beyond the scope of the course, but in the last section we'll show how to create a global CSS file to handle our styles for the entire website.

Cell and Row Styling - Colors

This video gives us a final look at styling tables so that we can have a nice table that is easy to read. There are many other things that could be done that we have not yet explored, but by now we should be able to apply styles across the table and understand how to include borders or not, coloring, and spacing of the cells and items in the cells.

I highly encourage you to take some time and change things around on your own to try to learn more and solidify your understanding of this material.

Cell and Row Styling - Padding and Spacing
4 Lectures 15:55

This video introduces the <img> tag, with attributes for src [source] and alt [alternate text]. When selecting the source, we can use a relative path - which means a path from the directory where the page is stored to the image - rather than having to reference the full path. We see this when we link the larger image from the subdirectory "img" by referencing the path as src="img/basketball.jpg."

The second image is purposefully not stored in the 'img' directory to show that an image at the same directory can be referenced by directly naming the image -- src="basketball_small.jpg"

Although we do not show it here, we can actually link any image from the web directly using a valid http://... address. This is useful if you are linking images from picasa or shutterfly or another photo service online, and don't have the images directly stored in your local folder.

Download the zip file below and extract to a folder for section 08 where you are storing your projects. The starter pack contains default.html, UsingImages.html, basketball_small.jpg, and the img folder with basketball.jpg in it.

Using Images

This video addresses the issue that our first image is showing up on the page but it is too large. We take a look at how we can use the style tag on the image to change the width and the height. When we are changing the width and the height of the image, we need to be careful not to skew the image dimensions.

All images have a pixel size for width and height. If you want to guarantee you do not skew the image but you want to set specific image sizes, you should use math to create a simple ratio. Set the original width over the original height. Then set the new height or width and use the ratio calculation to solve for the missing element.

For example an image of 1280X720 pixels [1280 width, 720 height] resized to 960 pixels wide:
1280 960
------- x --------
720 (960x720/1280) = 518 <!--[517.5] rounded up-->

Styling Images: Sizing

This video takes our two images and resizes the larger one a bit smaller to more easily see the two images side by side. We also have a style included in the head section for 'roundedCorners' which will allow us to easily apply some rounding on corners of an object.

For the first image, we add a simple border by using the 'border=30' attribute. For the second image, we first round the corners by applying the style -- style="roundedCorners" and then we add the border=30 attribute to see if the border is also rounded.

Styling Images: Border And Corners

In this video, we take a look at applying links with our images. We'll see two ways to easily put images on our page that a user can click to be directed to a new web address. Additionally, we'll take a look at mapping a specific part of an image to a web address using an image map.

Using Images With Links
Input, and User Submission
8 Lectures 30:15

This video gives us our first look at getting input from the user. Here, we'll create a simple <input type="text"... /> object that will allow the user to give us details like a username and password.

After going through the input tag, we'll then take a look at how we can use a table layout to make sure that our form looks more professional.

Text Input

This video takes a brief look at the Results page. We'll be relying on the results page to show us our information from the user so that we can see it is working for the next few lessons. Each lesson will build on the Results.html page so if you use the end version from the end of the section it should work for all videos. Although it is a bit out of scope for the course, there is some javascript in place to make sure this happens.

The main point of understanding that we need to take away is that using a "get" method on a form will render the parameters and variables in the querystring (which we'll see in the next video). Ultimately, in a real-world scenario, you'd often have a server-side language like PHP or that would render the data from the posted values from a form using the "post" method.

Please also note I discovered a small error in the Results page after recording this video, and the code is corrected in the file, but not in the video itself -- so if for some reason you are attempting to type the code yourself just fix the userName parameter in the javascript code on the Results.html page. You can look at the source file attached to see the working version.

Final note: The attached results file contains all results code for the entire section. If you use this file, all the other files should work as expected, so you don't need to worry about matching the correct results file to each video.

Results Page - why and how quick look

In this video, we learn how to create a submit button so that we can process the input from the user for their username and password. We discuss why I removed 'id' from the text input tags for the time being, and look at the query string on the results page to understand where the values were passed using a "get" method on the submit action.

Submit Buttons

In this video, we take a look at the <textarea> tag, including styling it to width=100% and setting the rows="5". We then can see the results on the Results.html page, but note that they are not parsed in our javascript to take out the line breaks we entered on the form.

Text Area Input

This video shows us how to change the input type to type="password" so that we can protect the password as the user enters it into the form.

Password Input

In this video, we look at checkboxes (<input type="checkbox"...>) in order to give the user the ability to select one or many options which we can respond to.


In this video we take a look at using radio buttons (<input type="radio"...>) in order to give the user multiple options but allow only one selection per group.

Radio Buttons

In this video, we look at using the select list with options (<select ...><option ...><option ...></select>) in order to present the user with a list of options and allow only one selection from them. We also take a look at how we might set one option to the default selected option.

Dropdown List [select -- option]
HTML 5 Enhancements
7 Lectures 17:53

In this video, we browse to W3 Schools New HTML5 Input Types [Try It] to see how some of the new input types for HTML5 work.

This page is really nice because it gives us the ability to change the code if we want or try out the controls. In addition, the page also tells us what browsers we can expect the controls to work with. This is extremely important to consider when developing anything with HTML5 -- just make sure your clients will be able to use the page as intended!

Input Types

In this video, we'll look at the <header>...</header> tag in HTML5. The header tag shown in this portion is used to store the banner information for the top of the page.

Important to note, however, is that we will most likely use multiple header tags in our pages. Therefore, we should make sure to give each header tag an id="something" attribute so that we can easily access and style the specific header when doing our final layout and design.


In this video we take a look at the <nav>...</nav> HTML5 tag. The nav tag can be used to group any set of links, however I personally recommend using the nav tag only for the main site navigation. It is possible to create other lists of links on the pages without having to use the <nav> tag.

If you do decide to use multiple nav tags, I would again recommend giving each a unique id attribute so that each could be individually styled or selected for manipulation.


In this video, we discuss the <section>...</section> HTML5 tag. We can think of the section tag like a section in a newspaper -- i.e. the news section or the editorial section or the sports section.

Each page can have multiple sections, if so desired. When creating a section, however, you should keep in mind that a section should contain all the related content for that section [so you should not spread information across sections]. If you think about this it makes sense -- you wouldn't want the article about the local sports team in the classified ads section of your news paper.

All of the tags we're creating are able to be styled, so we can easily add id attributes or class attributes at will in order to make our final page look the way we desire. Since CSS styling is a bit beyond the scope of this course, we're not taking a big look at the styles and layout right now, but we are putting the correct id and class attributes in place as we go to make sure we are able to manipulate the elements when it is time to style the pages.


In this video, we look at the <article>...</article> HTML5 tag. The article tag should exist to group content that represents a subsection of content you want to create. In our video, we create two articles, one for player stats, and the other for team stats.

Just like our other tags, we can place articles throughout the page so we should definitely give each one a specific id as we add them, unless every article is planned to be styled exactly the same way throughout our page(s).


In this video, we look at the <aside>...</aside> HTML5 tag. The aside tag is intended to be used for tangential or secondary content. A good rule of thumb is to ask yourself "if this content is removed, will it affect the article to which it is associated?" Once again with multiple asides, it is a good idea to give each an id for easy selection.

We create a couple of asides in our page. One aside will hold average player stats as secondary content to the main article for player stats. The second aside will be an ad block for serving up sponsorship ads for providing stats to our users. Either could be removed without having any effect on the original content.


In this video, we take a look at the <footer>...</footer> HTML5 tag. Like the header, the footer tag is not necessarily just for the bottom of the page, however that is definitely an intended use. Since we have multiple footers, we'll once again give each a unique id to make sure it is easy to select the correct footer when styling or using any javascript.

We create three footers in this video, just to show how they might be used. One footer is the main footer for the whole page, containing copyright information. We also put a footer in the ad aside to actually hold the ad details. Finally, the team article contains a footer with information about how to reach the team and where the team is located.

2 More Sections
About the Instructor
Brian Gorman
4.3 Average rating
2,020 Reviews
48,406 Students
6 Courses
Software Engineer and Computer Science Instructor

I am an experienced .Net developer, previously certified as an MCSD .Net in [expired]. I have a masters of science degree in computer information systems, and a bachelor of science degree in computer science. I also have many years of experience instructing college courses online in SQL databases, C#/VB .Net programming, Java programming, and Microsoft Office. I have created many online technical training courses that can be found on various platforms like O'Reilly/InfiniteSkills, Udemy, and others. I also run MajorGuidanceSolutions, a training and consulting company ,while working fulltime as a .Net developer.