Learn HTML - Create Webpages Using HTML5


$50.00
no certificate
- OR -
$75.00
with CEU Certificate*
Start Right Now!
Taking multiple courses? Save with our platinum program.
 
  • 15
    Lessons
  • 16
    Exams &
    Assignments
  • 10
    Hours
    average time
  • 1.0
    CEUs
  • 2,450
    Students
    have taken this course
 
 
Search Button
 
 
 

Course Description

This course teaches you how to create webpages from scratch using the most current standard in HTML -- HTML5.

HTML5 is the latest standard in web page coding. Whether you're a new or seasoned web designer, you need to know the latest in HTML architecture. HTML5 standards bring several new tags, including tags that enhance media and animations. Instead of clunky Flash applications, you use the canvas tag. Instead of embedding third-party software for users to view video or audio, you can use the video and audio tags. These are just a few of the new tags available to you.

This course teaches you all the basics of HTML including the latest in CSS styling. We discuss basic syntax and move forward to more advanced features such as JavaScript with animations, CSS3 and media queries, and styling with some of the new HTML5 tags. We don't just discuss HTML5, but we also tell you how to perform actual design elements using embedded CSS classes. We also discover the latest form field tags that make gathering information and input from your users much easier.

We start with creating a simple HTML web page and end with a list of miscellaneous tags that are new in HTML 5. We also give you a list of several deprecated tags that are no longer in use. You can still use them in HTML 5 website design, but deprecated functionality often gets dropped eventually. If you're new to HTML 5 or just want to extend your web design knowledge, this comprehensive course provides you a step-by-step tutorial and several hours of HD Video demonstrations to bring you up to speed with the latest in web application architecture and standards.

What is HTML?
 
HTML is the foundation for web pages. Your browser parses and translates the HTML code created by web developers and displays the code in the attractive page you see as a web application. HTML5 is the latest iteration of the language's format and syntax. HTML5 deprecates some older standards such as framesets, but the new syntax introduces some useful content tags such as "video" and "audio." This lesson gives you an introduction to HTML5 and the language in general, so you can get started with web design and programming.

How the Web Works

The Internet is one large network of computers. These computers mostly serve web-based content (HTML pages), but there are other types of computers networked on the Internet. Each computer (or server) is given an IP address. The Internet works with IP addresses to identify your website's server from millions of others. However, typing IP addresses into a browser isn't user-friendly. The friendly URL or website address you type into your browser is translated to an IP address using servers called name servers or domain name systems (DNS). Once the address is found on the Internet, the web server sends back an HTML-formatted page. This HTML code is translated using a web browser, and that's how you can view images, layouts, content, and videos on the Internet.

The Difference between the Internet and Web Browsing

When you first start out in web design, the Internet, web browsing, and the technical side to networking can be confusing. The Internet, as we said, is a network of computers. These computers can be servers, printers, routers, switches, and other forms of hardware (both virtual and physical) to communicate. You can also keep computers private behind a firewall to protect Internet traffic from entering a private network.

The Internet is sometimes called "the Web," but web browsing is different than the actual Internet. Web browsing is the term given to a web server providing browsers (Chrome, Internet Explorer, Firefox, for example) with content. You can think of the Internet as a library of content disbursed throughout the world. A web browser is the reader that lets you read the content stored on the Internet. Using HTML, you create that content in a presentable format. If that format is broken, the web browser cannot determine how to format and display content. For this reason, it's important that you write proper syntax when you create your web page HTML5 whether it's created dynamically through a back-end language or you write static pages that do not change.

Web Page URLs

Now that you understand how web pages are displayed in a web browser, you should also understand how a URL works. A URL is the address you type into the address bar. The domain is the basic address for your site (remember, the domain name is translated into an IP address). Your domain contains directories and files. The directories categorize and organize your site, and the pages are the physical files that contain your content.

URLs can also contain querystring variables. A querystring variable is a dynamic value that helps you display content dependent on input. When you see website URLs that contain a question mark ( "?" ) in the address, the variables contained after the question mark are querystring values. For instance, you might only want to show blue widgets after the visitor clicks a specific link. You could use a querystring variable such as "color=blue" after the question mark in the URL. The following is an example of a URL with this querystring variable.

yourdomain.com/products?color=blue

You can use multiple querystring variables using the ampersand ( "&" ) to combine them. The following URL uses both the color variable and the size variable to determine what widgets to display to the reader.

yourdomain.com/products?color=blue&size=small

HTML does not parse these values, but you can use JavaScript or your back-end language of choice to parse and display page content based on these values.

What Does a Web Designer Do?

A web designer creates the layout for your web pages. Most websites use the same layout throughout the entire site with slight variances depending on the page. For instance, a home page would use the same color scheme and logo, but product pages would have a slightly different layout than the home page. Web designers are in the business of making sites attractive, easy to navigate for users, and search engine friendly for bots to properly read and parse content. Web designers must know HTML to work with design, but other languages that are good to add to your toolbox are jQuery or JavaScript, CSS, and a backend language such as PHP or C#.

What Do You Need for Web Design?

There are several tools on the market for web designers. You should first learn to recognize and work with HTML syntax before using any kind of tools that automatically create syntax. There are two major web design software on the market: Visual Studio and Dreamweaver. Visual Studio is a Microsoft product and is mainly used with .NET websites. Dreamweaver is a visual tool that helps designers create websites, and it's mostly used with PHP. Of course, there are other tools on the market, but these are the most popular. Most designers have a copy of Adobe Photoshop for editing images. You should also have a CSS editor handy. Notepad++ is great for editing several languages including CSS.

When you choose a designer, look for one that allows you to build CSS scripts, works with JavaScript, doesn't interfere with any back-end coding on the pages, and helps build responsive, mobile friendly designs.

What Should You Learn?

This class focuses on HTML5, which is the basic syntax and language of the web. However, you should learn several other languages when you want to work in the web design world. First, a dynamic back-end language is useful. If you prefer to work in a Linux environment (Apache), it's best to learn languages that are native to Linux such as PHP. PHP is also used with pre-package software such as Joomla and WordPress, so knowing this language will help you build designs for these types of sites. C# and VB.NET are the languages for Microsoft websites.

You'll need to add CSS to your languages, because CSS is the design language for the web. HTML5 displays the content, but CSS is the language that lays out the content in specific areas of the site.

JavaScript is another necessary language for the web. JavaScript (JS) is a client-side language that integrates with the browser and web page to create dynamic front-end designs. For instance, when a user clicks a button, you can open a menu item from which the user chooses another input option. These drop-down menus are controlled by JavaScript. JavaScript makes dynamic user interfaces (UIs) faster because the user does not need to wait for another web page to load as he navigates through your website.

The Need for Speed and Responsive Design

Speed should always be a consideration when designing your website. Since Internet speeds have improved through the years, users expect websites to serve content quickly. Mobile apps have increased the need for faster UI and user experiences. Mobile devices such as phones and tablets still don't support the bandwidth, storage and memory that desktops support. The success of a website is dependent on support of mobile devices, which means you need to design code and images for slower bandwidth and smaller screens.

Responsive design works with your desktop design. Responsive design uses HTML5 and CSS3 to respond to the screen sizes of your visitors. For instance, if a visitor on an iPhone opens your site, the design "responds" to the screen size, and the layout is readjusted to make it easier for the iPhone user to read your pages. If the same user opens your site on a desktop web browser, the site then readjusts again for the larger screen. The design is said to be responsive since it caters to different screen sizes without changing much code.

Responsive design works through variables called media queries. These queries speed up the load times of your pages. Your images should be reduced in size, text should be larger, and the layout should cater to the screen size. The HTML content on the site is generally the same. The only difference is that the content readjusts for smaller screens and lower bandwidth speeds.

Responsive design is a step up from standard HTML5. It takes a bit more skill to work with responsive designs, because you need to also understand how CSS works. You can incorporate responsive design with some tools. For instance, Twitter Bootstrap is a CSS and JavaScript download that helps you make responsive designs without too much coding. Before you use these tools, it's important to first understand how the CSS and HTML code works. This will help you work with the tools and edit the code where appropriate.

With HTML5, CSS, and responsive design, you can make a fully functional website that caters to visitors as well as bots. HTML5 is the foundation for web pages, so it's a good place to start when you want to learn web design. You might just want to understand your website better, redesign your own site, or take your development to a different level. Whatever your goals, this class is a good place to get started.

  • Completely Online
  • Self-Paced
  • Printable Lessons
  • Full HD Video
  • 6 Months to Complete
  • 24/7 Availability
  • Start Anytime
  • PC & Mac Compatible
  • Android & iOS Friendly
  • Accredited CEUs
Universal Class is an IACET Accredited Provider
 
 
 
 

Course Lessons

Average Lesson Rating:
4.6 / 5 Stars (Average Rating) 4.6 / 5 Stars (Average Rating) 4.6 / 5 Stars (Average Rating) 4.6 / 5 Stars (Average Rating) 4.6 / 5 Stars (Average Rating)
"Extraordinarily Helpful"
(1,212 votes)

Lesson 1: Introduction to HTML5 and Web Design

This lesson gives you an introduction to HTML5 and the language in general, so you can get started with web design and programming. 10 Total Points
  • Lesson 1 Video
  • Complete: Exam 1

Lesson 2: How to Create a Simple Web Page

This lesson will present some basic HTML5 code and explain how it works. 10 Total Points
  • Lesson 2 Video
  • Review 2 Articles: HTML5 Beginner?s Guide; Create a Responsive Website Using HTML5 and CSS3 ? Video Tutorial
  • Complete: Exam 2

Lesson 3: How to Format Your Text

In this lesson, we?ll give you some more content tags for formatting and styling across your pages. We?ll show you how to use heading tags, and we?ll add some organization to your pages. 10 Total Points
  • Lesson 3 Video
  • Review Article: HTML Text Formatting Elements
  • Review Video: HTML 5 : Text Formatting - bold, italics, subscript, superscript, underline and more
  • Complete: Exam 3

Lesson 4: Adding Web Links and Images

In this lesson, we cover hyperlinking and images within your pages. 10 Total Points
  • Lesson 4 Video
  • Review Article: HTML Images
  • Complete: Exam 4

Lesson 5: Creating Tables

You might also need to redesign a site that uses tables, so it?s good to understand how they work. 10 Total Points
  • Lesson 5 Video
  • Review 2 Articles: HTML Tables; HTML5 Table Tutorial ? Create Amazing Tables in HTML5
  • Complete: Exam 5

Lesson 6: Forms

Forms have been a standard since older HTML versions, but there are a few new tags included with the updated HTML5 standards. 10 Total Points
  • Lesson 6 Video
  • Review 2 Articles: HTML: HTML5 Form Validation Examples; HTML Forms
  • Complete: Exam 6

Lesson 7: Adding Styles and Classes to Your Web Pages

Basic styles format text, set columns in your page?s layout, and they set the base color set for your pages. This lesson reviews CSS styles and shows you how to add them to your HTML. 10 Total Points
  • Lesson 7 Video
  • Review 2 Articles: HTML5 Fonts: Adding Fonts to Your Webpage; Using HTML5 Today
  • Complete: Exam 7

Lesson 8: Borders, Backgrounds, and Floating Divs

In this lesson, we'll discuss some more advanced CSS styles such as using borders around div tags, background colors and images for HTML elements, and floating divs (also called ?floats?) for text positioning. 10 Total Points
  • Lesson 8 Video
  • Review Article: HTML background Attribute
  • Review Video: How to Float 3 DIV Boxes Side by Side in a Row. Stack and Align DIV Boxes Side by Side w/ HTML and CSS
  • Complete: Exam 8

Lesson 9: Building Web Page Layouts with CSS

In this lesson, we'll discuss complex CSS layout options such as positioning with relation and absolute property values and the z-index property. 9 Total Points
  • Lesson 9 Video
  • Review Article: Website Layout Using HTML5
  • Complete: Exam 9

Lesson 10: HTML5 -- What is It?

This lesson gives you an overview of HTML5 and what it brings to the web and your website design. HTML5 is the new standard for static website code, so you need to know how it works to stay current with your designs. 10 Total Points
  • Lesson 10 Video
  • Review Article: HTML5 Element Index
  • Complete: Exam 10

Lesson 11: Adding Videos and Graphics with HTML5

This lesson reviews both tags and gives you some fallback options in case you choose that video and audio tags aren?t for you. 10 Total Points
  • Lesson 11 Video
  • Review 2 Articles: HTML Audio/Video DOM Reference; Everything You Need to Know About HTML5 Video and Audio
  • Complete: Exam 11

Lesson 12: HTML5 and CSS3 - Fonts and Effects

HTML determines what elements show in a browser, but CSS determines each element?s style. CSS3 is the latest version of cascading stylesheet code, and the latest version comes with several different functions that make styling your layouts much easier. 10 Total Points
  • Lesson 12 Video
  • Review 2 Articles: Start Using CSS3 Today: Techniques and Tutorials; 12 Awesome CSS3 Features That You Can Finally Start Using
  • Complete: Exam 12

Lesson 13: Introduction to Responsive Web Design with CSS3 and HTML5

Responsive designs use CSS3 and HTML5 to cater to mobile device screen sizes. To dive into the ocean of web design topics, you must know responsive design whether you?re designing your own website or someone else?s. 9 Total Points
  • Lesson 13 Video
  • Review 2 Articles: Beginner?s Guide to Responsive Web Design; 30 Useful Responsive Web Design Tutorials
  • Complete: Exam 13

Lesson 14: Drawing with the Canvas Tag

The canvas tag is becoming a permanent replacement for third-party tools but remember that older browsers don?t support HTML5. Therefore, any viewer with an older browser won?t be able to view your canvas drawings. 10 Total Points
  • Lesson 14 Video
  • Review Article: Canvas tutorial
  • Complete: Exam 14

Lesson 15: Summary of New Elements and How to Use Them

It?s still good to recognize less popular elements and know how to work with them in case you ever need to edit someone else?s code. This lesson uncovers some of the extra elements that we haven?t discovered yet. 84 Total Points
  • Lesson 15 Video
  • Take Poll: What is your opinion of this course?
  • Complete: Exam 15
  • Complete: The Final Exam
222
Total Course Points
 

Additional Course Information

Online CEU Certificate
  • Document Your Lifelong Learning Achievements
  • Earn an Official Certificate Documenting Course Hours and CEUs
  • Verify Your Certificate with a Unique Serial Number Online
  • View and Share Your Certificate Online or Download/Print as PDF
  • Display Your Certificate on Your Resume and Promote Your Achievements Using Social Media
Document Your CEUs on Your Resume
 
Course Title: Learn HTML - Create Webpages Using HTML5
Course Number: 8900337
Languages: English - United States, Canada and other English speaking countries
Category:
Course Type: Computer Skill (Self-Paced, Online Class)
CEU Value: 1.0 IACET CEUs (Continuing Education Units)
CE Accreditation: Universal Class, Inc. has been accredited as an Authorized Provider by the International Association for Continuing Education and Training (IACET).
Grading Policy: Earn a final grade of 70% or higher to receive an online/downloadable CEU Certification documenting CEUs earned.
Assessment Method: Lesson assignments and review exams
Instructor: UniversalClass Staff Instructors
Syllabus: View Syllabus
Duration: Continuous: Enroll anytime!
Course Fee: $50.00 (no CEU Certification) || with Online CEU Certification: $75.00

Choose Your Subscription Plan

Course Only
One Course
No Certificate / No CEUs
$50
for 6 months
 
Billed once
This course only
Includes certificate X
Includes CEUs X
Self-paced Yes
Instructor support Yes
Time to complete 6 months
No. of courses 1 course
Certificate Course
One Course
Certificate & CEUs
$75
for 6 months
 
Billed once
This course only
Includes certificate Yes
Includes CEUs Yes
Self-paced Yes
Instructor support Yes
Time to complete 6 months
No. of courses 1 course
Platinum Yearly
Best Value
ALL COURSES
Certificates & CEUs
$189
per year
You save 50%!
Billed once
Includes all 500+ courses
Includes certificate Yes
Includes CEUs Yes
Self-paced Yes
Instructor support Yes
Time to complete 12 Months
No. of courses 500+
Platinum Monthly
ALL COURSES
Certificates & CEUs
$59 first month
$29.00 / each consecutive month thereafter
 
Billed monthly
Includes all 500+ courses
Includes certificate Yes
Includes CEUs Yes
Self-paced Yes
Instructor support Yes
Time to complete Monthly
No. of courses 500+