HTML5 for Beginners: Learn by Video

HTML Basics for Non-Programmers

After getting an overview of HTML and CSS concepts, you’ll work along with author and trainer Sally Cox to create a blog site from scratch. Starting with the concept, you’ll proceed to build a wireframe and add text, images, a header, a nav bar, an interactive form, and even multimedia content. Along the way you’ll learn about HTML basics for the non-programmer, as well as new tags in HTML5. You'll also get lots of tips on web design, such as which graphic formats to use and the best way to save your graphics for the web. This Learn by Video title is published in partnership with Peachpit Press.

Trainer: Sally Cox

ISBN Code: 978-0-321-81542-2

January, 2012

Duration: 2 hrs

Ready for iPad, Android, and HTML5

Powerful, Feature-Rich Interface

HD Video

HTML

Add to Cart Downloads

“ Great course, perfect to get started designing sites, using it as a educational foundation for future courses. ” — Jimmy S.

Similar Courses

Welcome to HTML5 for Beginners: Learn by Video

In this chapter you'll get acquainted with the terminology and basic concepts of web design as we begin to explore HTML5.

What Is HTML5?
- This lesson explores the origins of hypertext markup language (HTML) and how it is used to create web pages. You will gain a better understanding of how HTML code works with your browser to display the web pages you create.
  
  Understanding Hypertext Markup Language (HTML)
  
  07:47
- In this video we'll explore a basic web page, helping you gain a more thorough understanding of the key components of a web page and how they all work together in the browser.
  
  Learning the Parts of a Web Page
  
  05:15
- Let's get started by creating a few simple snippets of HTML code. In this video you'll learn to create your first HTML code and display it in your browser.
  
  Writing Your First Snippets of Code
  
  03:01
- What exactly happens when you open a web browser and load a web page? This video will show you. You'll also get some tips on how to get your pages to display faster.
  
  Understanding How Browsers Interpret HTML
  
  01:50
- The look of your content can vary greatly depending on which browser your end-user is working with. In this video we'll look at the five most common browsers and discuss how they display web pages.
  
  Comparing Web Browsers and How They Display Web Pages
  
  02:34
This chapter explores HTML5 tags and CSS3, and how they work together to give you greater control over how your web pages are displayed.

Understanding HTML5 Markup and CSS3
- A basic understanding of HTML tags can be a big help when you design for the web. In this video we'll examine the components of an HTML tag and how they function on the web.
  
  Examining HTML Tags
  
  02:14
- This video explores some of the tags that are new in HTML5, what their functions are, and which browsers support them.
  
  Incorporating HTML5 Tags
  
  02:42
- Just as styles are used to control text formatting in applications like Word or Adobe InDesign, we use CSS on the web to help maintain consistency. This video explores how CSS can be used to control everything on your page, including text color, font, and even object placement.
  
  Adding Style with CSS3
  
  02:44
- In this video you'll see how HTML5 and CSS3 are used in conjunction with each other to create consistency among your web pages.
  
  Working with CSS and HTML5 Together
  
  03:25
A good design begins with a wireframe that defines its structure. This chapter discusses how wireframes can help you lay out your design and make things easier as you begin to build your pages.

Beginning with Wireframing
- Before you can begin coding your site, you must have an idea of how it will work. This video will ask some of the key questions that you need to answer to get the most out of your website.
  
  Deciding How Your Site Will Work
  
  05:07
- We want our website to be easy for users to get around, don't we? This video explores how the within a site interact with each other and how to best implement design hierarchy to create user-friendly sites.
  
  Planning the Hierarchy of Your Site
  
  03:08
- Once you have an idea of how your site will work, it's time to create the wireframe. This video looks at some tools that you can use to create your wireframe and offers tips on creating the most efficient design.
  
  Creating Your First Wireframe
  
  02:36
- You want your website to be easy to use and not require the user to think too much to get where they want to go. In this video, we'll look at a sample web page and see how the content flows, which will help you learn some ways to build a user-friendly flow into your site.
  
  Thinking About Usability
  
  02:06
In this video you'll use the knowledge of HTML tags and basic web design that you have gained to begin creating a blog in our HTML editor. We'll also work with a template to add new content and modify existing content.

Creating a Simple Blog Design with HTML5
- In this video you'll learn what a DOCTYPE is, why you need to use it, and how use your HTML editor of choice to change an older DOCTYPE to HTML5 compliance.
  
  Changing the DOCTYPE of Your HTML5 Document
  
  03:03
- A blog needs to have certain basic elements to work properly. This video will explore what those elements are.
  
  Understanding the Elements of a Blog
  
  01:53
- Headers and footers play a key role in web design. This video will show you how to create an attractive header to guide people into the content and a footer to give it a finished look.
  
  Adding a Header and Footer to Your Blog
  
  02:52
- Once you've got the basics in place, it's time to add content! This video will show you how to begin adding posts to your blog.
  
  Posting to Your Blog
  
  02:12
- The Aside element allows you to place text outside the container and format it with CSS to create a sidebar. You'll learn how to do it in this video.
  
  Adding a Sidebar with the Aside Element
  
  03:01
- Lists are useful for organizing and structuring similar content. This video shows how to add ordered and unordered lists to your blog site.
  
  Using Lists to Organize Content
  
  03:43
- Tables add structure to HTML documents. This video explains when you might want to use tables and when they are not appropriate.
  
  Creating Tables in a Web Page
  
  06:04
An HTML form is an essential part of a website if you want to interact with your users or get information from them. This chapter will introduce you to forms in HTML5.

Designing an HTML5 Form
- This video walks through the basics of creating a form on the web. You'll get a first look at the form template for this chapter and see how to examine the HTML5 code.
  
  Beginning to Design a Form
  
  03:10
- What elements will we need on our form? In this video we'll review the different form elements available and decide which ones to use in the HTML form for our blog.
  
  Understanding Basic Form Elements
  
  03:55
- Form fields have a new friend in HTML5: the Input tag. In this video we'll use this tag to add a text hint to our text fields.
  
  Adding an Attribute to the New HTML5 Input Tag
  
  04:09
- With the new Mark element, we can highlight text we want to stand out. In this video we'll use the Mark element to draw attention to a selection of text in our blog.
  
  Highlighting Important Content
  
  02:17
Graphics are a key component of a successful site. This chapter explores different graphic formats and offers tips on how to get the most vibrant and professional-looking graphics.

Incorporating Graphics
- In this video you'll be introduced to the three main file formats used for graphics on the web – JPEG, GIF, and PNG – and learn about the pluses and minuses of each one.
  
  Understanding Web Graphic Formats
  
  03:24
- What's the best way to save graphics so they look their best on our blog? In many cases, it's the Save for Web feature in Photoshop and Illustrator, which we'll look at in this video.
  
  Saving Graphics Properly for the Web
  
  06:58
- This video looks at the basics of using color on the web, including RGB, web-safe and web-smart colors, and color spaces.
  
  Working with Color on the Web
  
  03:03
- In this video you'll learn about some resources that are available to help you in working with color, including Kuler, an Adobe tool that lets you choose premixed color sets or create your own.
  
  Resources for Designing with Color
  
  03:36
- The new Canvas tag allows you to draw over an image like a map. In this video you'll see how to change the colors of some rectangles to match the color scheme of our blog.
  
  Exploring the Canvas Tag
  
  05:34
Multimedia can really add visual appeal to your site. This chapter will show you to why multimedia is so valued and how to get the most out of using it on your site.

Adding Multimedia
- This video will explore why multimedia can add so much to your web site.
  
  Why Use Multimedia?
  
  02:56
- Audio can be used for a variety of purposes, such as to add background music or walk your user through a series of steps. This video will acquaint you with the new HTML5 Audio element, which allows you to include an audio clip that plays automatically when the page loads.
  
  Adding Audio to Your Contact Form
  
  03:35
- This video will look at the new Video element, which does not require an external player to display your video in HTML5, as well as the different video types and which are best for your site.
  
  Understanding Video Types for the Web
  
  01:24
- This video walks you through adding the Video element to your site and previewing it in multiple browsers.
  
  Working with Video Controls
  
  03:30
In this chapter we'll review what we've covered in this course. You'll also get a few final tips on putting it all together and learn how update a site by changing the CSS.

Conclusion
- To stay fresh, you will need to update your site occasionally. This video looks at updating your blog and why you might want to use a content managament system like WordPress for that purpose.
  
  Updating Your Blog
  
  02:17
- Thanks to CSS, updating the formatting of your content is a breeze. This video walks you through the process of opening the external CSS file, changing some formatting, and then watching it automatically update on your web pages.
  
  Changing the Look and Feel of Your Site
  
  02:15
- This video reviews the topics we've covered in this course and offers some final thoughts.
  
  Conclusion
  
  02:03

Welcome to HTML5 for Beginners: Learn by Video

This Learn by Video workshop teaches you the fundamentals of web design with HTML5, from the basic concepts and terminology all the way to the finished site. The contents of this course include:

What Is HTML5?
In this chapter you’ll get acquainted with the terminology and basic concepts of web design as we begin to explore HTML5.

Understanding HTML5 Markup and CSS3
This chapter explores HTML5 tags and CSS3, and how they work together to give you greater control over how your web pages are displayed.

Beginning with Wireframing
A good design begins with a wireframe that defines its structure. This chapter discusses how wireframes can help you lay out your design and make things easier as you begin to build your pages.

Creating a Simple Blog Design with HTML5
In this video you’ll use the knowledge of HTML tags and basic web design that you have gained to begin creating a blog in an HTML editor. We’ll also work with a template to add new content and modify existing content.

Designing an HTML5 Form
An HTML form is an essential part of a website if you want to interact with your users or get information from them. This chapter will introduce you to forms in HTML5.

Incorporating Graphics
Graphics are a key component of a successful site. This chapter explores different graphic formats and offers tips on how to get the most vibrant and professional-looking graphics.

Importing Multimedia into Your Blog
Multimedia can really add visual appeal to your site. This chapter will show you why multimedia is so valued and how to get the most out of using it on your site.

Conclusion
In this chapter we'll review what we’ve covered in this course. You’ll also get a few final tips on putting it all together and learn how update a site by changing the CSS.

The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn and a 48-page guide containing supplemental material.

System Requirements

Broadband internet connection
Up-to-date browser with Flash plug-in
Screen resolution 1024x768 or higher
Sound card with speakers or headphones attached
Pentium 4 2.6 GHz or higher, or Apple Mac G5
512 MB RAM

Ready for iPad, Android, and HTML5

It's easy to watch this course from your Android device, iPad, or iPhone (4 or later). Access videos straight from your browser, or, for Android devices or iPads, use this course in one of our free apps.

Project Files (Downloadable Feature)

Project files are included with this course so you can practice what you learn and work right along with the videos.

Powerful, Feature-Rich Interface

This course features video2brain’s interactive interface. As you navigate the course, rolling over a chapter or video brings up text describing that item.

Full-Screen mode provides a hi-def, immersive experience. And Watch-and-Work mode puts the video into a resizable window that you can shrink so you can watch the lessons on one side of your screen while you’re following along and applying what you’ve learned on the other.

HD Video

This course comes in crisp 1280 x 720 high definition video.

Bookmarks (Downloadable Feature)

Available in the downloadable version of our courses, this feature makes it easy to create a custom bookmark in any lesson to mark where you left off or to make note of something you want to refer back to later. You can even add a name or short note to remind yourself what the bookmark is for.

Test Yourself (Downloadable Feature)

Available in the downloadable versions of our courses, Test Yourself lets you reinforce what you’ve learned with a series of interactive test questions about the topics covered in the course.

Bonus Booklet (Downloadable Feature)

This course is accompanied by a full-color booklet that provides supplemental material to enhance the video training. (Downloadable PDF booklet for on-demand courses, print booklet when purchased at retail.)

HTML5 for Beginners

Jimmy S.

This comment was made on the following lesson: Understanding Hypertext Markup Language (HTML)

Great course, perfect to get started designing sites, using it as a educational foundation for future courses.

Recommended Courses

HTML5 for Beginners: Learn by Video

HTML Basics for Non-Programmers

About this lesson

Welcome to HTML5 for Beginners: Learn by Video

System Requirements

Welcome to video2brain!

Other sites. Andere Seiten. Otros sitios. Autres sites.