Introduction to Web Development: HTML

Learn how to build web pages with HTML, including syntax, major elements, and new HTML5 features and capabilities.
4.2 (302 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,777 students enrolled
$20
Take This Course
  • Lectures 55
  • Contents Video: 3 hours
    Other: 0 mins
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2014 English

Course Description

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

What are the requirements?

  • 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

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Welcome to the course
06:18

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.

06:16

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.

02:14

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'.

00:59

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!

Section 2: Syntax and Page Layout
03:37

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.

03:32

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.

04:10

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.

01:23

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.

02:52

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.

01:40

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.

Section 3: Text
01:50

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

01:57

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.

02:38

In this video, we browse out to a site "http://www.lipsum.com" 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.

01:37

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.

02:05

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.

Section 4: Special Characters
03:52

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.

04:09

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.

03:34

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.

Section 5: Lists
01:57

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.

04:05

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.

Section 6: Links
04:13

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.

02:21

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.

Section 7: Tables
01:11

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.

05:37

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.

06:55

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.

05:27

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.

05:06

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.

Section 8: Images
04:05

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.

02:22

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-->

03:12

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.

06:16

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.

Section 9: Input, and User Submission
05:21

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.

02:50

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 ASP.net 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.

05:34

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.

03:30

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.

01:15

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.

05:18

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.

03:21

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.

03:06

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.

Section 10: HTML 5 Enhancements
04:55

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!

02:50

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.

01:40

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.

01:37

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.

02:25

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).

02:25

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.

02:01

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.

Section 11: HTML5 Media And Graphics
02:18

In this video, we discuss how we can include audio within our HTML5 pages using the <audio> tag with the 'controls' attribute added to make sure the controls render.

For the video, I downloaded a free audio file and all of the links and attributions are included on the page. As stated, I will not be making the audio files available, so when you want to test this out you can use any .wav or .mp3 file in your collection to easily render and listen to your audio on your webpage.

02:24

In this video, we take a look at adding the <video> tag to our page in order to render video. Once again, I'm not including the video file here, but you could easily take a video with a cell phone or some other device and save it as .mp4 to render on your page.

02:56

In this video, we look at creating graphics on our HTML5 pages using SVG [Scalable Vector Graphics].

The code is taken and modified from tutorials at W3Schools, and the pages contain links to some examples and tutorials.

As stated in the video, SVG is well beyond the scope of our course, but I wanted to make you aware of this new tool in case you are interested in pursuing this route for your own personal development growth.

02:39

In this video, we take a look at the HTML5 <canvas> element, which allows for drawing and rendering graphics on our pages. One difference in canvas from SVG is that canvas does rely on javascript to be more heavily integrated with the page.

Once again, HTML5 canvas is outside of the scope of the course, but there are links on the page that should direct you to some tutorials if you wish to pursue this technology for your own personal growth and needs.

Section 12: Further Exploration and Wrap Up
06:50

This video is a brief discussion about CSS. We've seen styles throughout our course as we needed to build some nicer looking tables and pages. In this video, we see how we can extract the styles into a .css file, and reference the file on any page.

It is important to note that this is not an 'all-encompassing' overview of CSS as we just barely have touched the surface on the power and usefulness of styling our pages in CSS. CSS not only allows us to have a flexible color scheme and uniform fonts but also gives us control over content positioning and rendering.

In the video we do a whirlwind discovery of the difference between coding a class for the 'class' attribute (.classname) of an html tag, the 'id' attribute (#classname), and finally the ability to style any tag in general (i.e. <table> or <nav>).

As stated in the video, it is my hope that you will continue your endeavor to learn with a course in CSS!

08:32

In this video, we examine how to include a javascript file into our pages so our code can be extracted and used on any page. This will also help us to understand how to include other javascript files in our pages.

Script files can be included in the <head> section or at the end of the body section.

As with CSS, we only scratch the surface as to using javascript in our pages and I stress the importance to understand that to do javascript well you need to be able to program. Javascript has objects, events, variables, functions, loops, and other programming constructs that you can learn about by learning any programming language. Please be very aware that HTML development and Javascript programming are completely different in nature in this way. HTML is a markup language, which is tag-based and not very tightly coupled or structured. Javascript is an object-oriented programming language that is tightly ordered and coupled and will not work if certain elements are not correctly setup.

That being said, as I assume you want to continue to grow as a programmer/web developer, my next recommendation for you is to find a good course on Javascript and learn it, or, even better, take a course in Java or C# and learn how to program in an object-oriented, structured style, then learn how to apply those skills within the syntax and confines of Javascript.

06:32

In this demonstration, we quickly look at a couple of the ways adding JQuery into our pages can give us the ability to quickly and efficiently work with javascript and JQuery to make our pages come to life for the user, as well as help to prevent the user from doing things we don't want them to do.

There are two ways to incorporate javascript libraries like JQuery on our page -
  1. Use a CDN like Google
  2. Download the library and store it locally and reference it locally

Each method has its own advantages and disadvantages. Locally may take more overhead, but will always be available when your pages are available. CDN will be a bit more efficient but will also not be available if the third-party hosting site (i.e. Google) happens to go away or become unavailable for some reason.

02:34

This video is just a wrap-up of our course. There is no new information presented here, but we briefly recollect about the topics we've studied in this course and some suggested next steps for you as a web UI developer.

I hope you have enjoyed the course! If so, I would greatly appreciate your feedback via a review. If you didn't like the course, at least it was free :).

I wish you all the best in your endeavors as a web UI developer!

Article

This is a bonus lecture and has nothing to do with the course.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Brian Gorman, Software Engineer and Computer Science Instructor

I am an experienced .Net developer, certified as an MCSD .Net in C#.net. 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 technology. I have created many online technical training courses that can be purchased here or on other various platforms like O'Reilly/InfiniteSkills, and my own site at training MajorGuidanceSolutions

Ready to start learning?
Take This Course