Online Class: Learn HTML - Create Webpages Using HTML5

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

$95.00
no certificate
- OR -
$120.00
with CEU Certificate*
Start Right Now!
$120.00 (with CEU Certificate)
Taking multiple courses? Save with our platinum program.
 
  • 15
    Lessons
  • 17
    Exams &
    Assignments
  • 6,212
    Students
    have taken this course
  • 8
    Hours
    average time
  • 0.8
    CEUs
 
 

Course Description

"Mastering the Future of Web Design: HTML5 Essentials & Beyond"

In the rapidly evolving digital era, a website isn't just a digital address; it's the face of your brand, your digital storefront, and often the first point of interaction with your audience. And behind every captivating website is the robust, yet delicate, framework of HTML. But just like the digital world, HTML is evolving, and to truly shine in the web design domain, one must be well-acquainted with its latest, most advanced incarnation: HTML5.

Why HTML5? Let's Delve Deep:

  1. Future Ready: HTML5 isn't just another update—it's the future. As the newest and most powerful version of the HTML standard, it's geared up to meet the demands of modern web applications.

  2. Seamless Multimedia Integration: Gone are the days of cumbersome third-party plugins and Flash applications. With HTML5, integrating multimedia elements like audio and video is seamless, fluid, and natural, thanks to native tags like video and audio.

  3. Animation & Interactivity Reimagined: With the canvas tag and combined power of JavaScript animations, the possibilities for creating dynamic, interactive web components are limitless.

  4. Styling Evolved: Dive into the future of web aesthetics with the latest in CSS3. Learn how to create stunning design elements using embedded CSS classes, enriching the user experience and making your web pages come alive.

  5. Optimized User Interactivity: New form field tags in HTML5 have transformed the way websites gather user information, making interactions smoother and more intuitive than ever.

Course Journey: From Basics to Brilliance

  • Foundation First: Even if HTML5 is a completely new territory for you, fear not. We commence with the rudiments, crafting a basic web page, grounding your understanding before we elevate to complexities.

  • Comprehensive Learning: From advanced features like CSS3 media queries to integrating JavaScript animations, every lesson is meticulously curated to ensure a wholesome learning experience.

  • Deprecated Vs. Latest: While it's vital to understand the new, it's equally crucial to know the old. Learn about deprecated tags that might still be in circulation and how to transition from them, ensuring your web designs are always future-proof.

  • Engaging Multimedia Tutorials: Benefit from hours of HD video demonstrations, making learning interactive and engaging, perfect for visual learners.

In this expansive journey, we aren't just exploring the 'how-to' of HTML5, but the 'why' behind each element, setting you on a path not just to follow but to innovate.

If you aspire to be on the frontlines of web design, to craft digital experiences that are timeless and impactful, this course is your beacon. Step into the realm of "Mastering the Future of Web Design" and emerge as an adept web designer, ready to shape the digital landscapes of tomorrow. Whether you're a novice eager to dive into the world of web design or a seasoned designer aiming to polish your skills with the latest standards, this course is tailored for your success. Join us and redefine the digital narrative.

Course Motivation

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.5 / 5 Stars (Average Rating)
"Extraordinarily Helpful"
(2,539 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. Additional lesson topics: HTML5: The Missing Manual 12 Total Points
  • Lesson 1 Video
  • Lesson discussions: Reasons for Taking this Course
  • Complete Assignment: Introduce Yourself
  • Assessment: Exam 1

Lesson 2: How to Create a Simple Web Page

This lesson will present some basic HTML5 code and explain how it works. Additional lesson topics: HTML5 Beginner's Guide; Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial 10 Total Points
  • Lesson 2 Video
  • Assessment: 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. Additional lesson topics: HTML Text Formatting Elements; HTML Several : Text Formatting 10 Total Points
  • Lesson 3 Video
  • Assessment: Exam 3

Lesson 4: Adding Web Links and Images

In this lesson, we cover hyperlinking and images within your pages. Additional lesson topics: HTML5 Video Tutorial Part 3; HTML Images 10 Total Points
  • Lesson 4 Video
  • Assessment: 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. Additional lesson topics: HTML Tables; HTML5 Table Tutorial – Create Amazing Tables in HTML5 10 Total Points
  • Lesson 5 Video
  • Assessment: 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. Additional lesson topics: HTML: HTML5 Form Validation Examples; HTML Forms 10 Total Points
  • Lesson 6 Video
  • Assessment: 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. Additional lesson topics: HTML5 Fonts: Adding Fonts to Your Webpage; Using HTML5 Today 10 Total Points
  • Lesson 7 Video
  • Assessment: 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. Additional lesson topics: How to Float Several DIV Boxes Side by Side in a Row. Stack and Align DIV Boxes Side by Side w/ HTML and CSS; HTML background Attribute 10 Total Points
  • Lesson 8 Video
  • Assessment: 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. Additional lesson topics: CSS Tutorial Part 1- Basic Webpage Layout; Website Layout Using HTML5 9 Total Points
  • Lesson 9 Video
  • Assessment: 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. Additional lesson topics: HTML 5 Style Guide and Coding Conventions; HTML5 Element Index 10 Total Points
  • Lesson 10 Video
  • Assessment: 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. Additional lesson topics: HTML Audio/Video DOM Reference; Everything You Need to Know About HTML5 Video and Audio 10 Total Points
  • Lesson 11 Video
  • Assessment: 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. Additional lesson topics: Start Using CSS3 Today: Techniques and Tutorials; Several Awesome CSS3 Features That You Can Finally Start Using 10 Total Points
  • Lesson 12 Video
  • Assessment: 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. Additional lesson topics: Beginner's Guide to Responsive Web Design; Several Useful Responsive Web Design Tutorials 9 Total Points
  • Lesson 13 Video
  • Assessment: 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. Additional lesson topics: HTML [canvas] Tag; Canvas tutorial 10 Total Points
  • Lesson 14 Video
  • Assessment: 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
  • Lesson discussions: What is your opinion of this course?; Course Comments; Program Evaluation Follow-up Survey (End of Course)
  • Assessment: Exam 15
  • Assessment: The Final Exam
224
Total Course Points
 

Learning Outcomes

By successfully completing this course, students will be able to:
  • Describe introduction to HTML5 and what basic web design is.
  • Identify how to create a simple web page.
  • Identify how to format your text.
  • Identify adding web links and images.
  • Demonstrate creating tables.
  • Identify forms.
  • Identify adding styles and classes to your web pages.
  • Demonstrate borders, backgrounds, and floating divs.
  • Identify building web page layouts with CSS.
  • Identify adding videos and graphics with html5.
  • Summarize using fonts and effects in HTML5 and CSS3.
  • Describe responsive web design with HTML5 and CSS3.
  • Demonstrate mastery of lesson content at levels of 70% or higher.
 

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
Lessons Rating: 4.5 / 5 Stars (2,539 votes)
Languages: English - United States, Canada and other English speaking countries
Availability: This course is online and available in all 50 states including: California, Florida, Georgia, Illinois, New York, Pennsylvania, Ohio, Texas, and Washington.
Last Updated: June 2023
Course Type: Self-Paced, Online Class
CEU Value: 0.8 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
Syllabus: View Syllabus
Course Fee: $120.00 U.S. dollars

Choose Your Subscription Plan

Course Only
One Course
No Certificate / No CEUs
$95
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
$120
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
ALL COURSES
Certificates & CEUs
$189
per year
 
Billed once
Includes all 600+ courses
Includes certificate Yes
Includes CEUs Yes
Self-paced Yes
Instructor support Yes
Time to complete 12 Months
No. of courses 600+
Platinum 2 Years
ALL COURSES
Certificates & CEUs
$299
for 2 years
You save $79.00!
Billed once
Includes all 600+ courses
Includes certificate Yes
Includes CEUs Yes
Self-paced Yes
Instructor support Yes
Time to complete 24 Months
No. of courses 600+
 

Student Testimonials

  • "This course was very helpful and I can not wait until I put this specialized knowledge to use! Thanks!" -- Jennifer Y.
  • "This course was exactly what I was hoping for. Working through the video examples really helped to reinforce what was taught in the lessons." -- Roblyn K.
  • "I found the info presented in the course extremely helpful, even for total beginners like me." -- Christine W.
  • "Great Course. Tough going. I would love to repeat it in the future. Great Teacher." -- Eleanor C.
  • "Great introduction. Easy to follow." -- Amanda E.

Related Courses