Mastering Introductory HTML5 and CSS3 Training Tutorial
4.8 (5 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.
144 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering Introductory HTML5 and CSS3 Training Tutorial to your Wishlist.

Add to Wishlist

Mastering Introductory HTML5 and CSS3 Training Tutorial

Learn the basics of HTML5 and CSS3 with this video tutorial. Includes video lessons and printable classroom manual.
4.8 (5 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.
144 students enrolled
Created by TeachUcomp, Inc.
Last updated 4/2014
English
Current price: $10 Original price: $20 Discount: 50% off
2 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Video Lessons
  • Printable Classroom Instruction Manuals
  • Learn HTML Language
  • How to Create a Website
  • Text, Links, Images, CSS, and much more!
View Curriculum
Requirements
  • There are no course requirements, however it would be helpful for students to have a basic knowledge of HTML and CSS. Also, a word processing program can be helpful in practicing the techniques in this tutorial. Whatever level you are at, this course will take you through the basics into more advanced material in HTML5 and CSS3!
Description

Learn HTML5 and CSS3 with this comprehensive course from TeachUcomp, Inc. Mastering HTML5 and CSS3 Made Easy features 125 video lessons with 3.5 hours of introductory through advanced instruction. Watch, listen and learn as your expert instructor guides you through each lesson step-by-step. During this media-rich learning experience, you will see each function performed just as if your instructor were there with you. Reinforce your learning with the text of our printable classroom instruction manual, additional images and practice exercises. You will learn the HTML language from scratch, while exploring all of the techniques to add the various elements of a website – text, links, images, CSS and much more.

If you are completely new to HTML or CSS, or just need a refresher, this course will empower you with the knowledge and skills necessary to be a proficient user of HTML. We have incorporated years of classroom training experience and teaching techniques to develop an easy-to-use course that you can customize to meet your personal learning needs. Simply launch the easy-to-use interface, click to start a video lesson or open the manual and you’re on your way to mastering HTML.

Who is the target audience?
  • Anyone wanting to learn more about CSS and HTML
  • Anyone wanting to learn how to build a website
  • Students upgrading from HTML4 into HTML5
Students Who Viewed This Course Also Viewed
Curriculum For This Course
128 Lectures
06:30:25
+
Course Introduction
1 Lecture 01:05

This lecture provides a brief summary of the topics covered throughout the course and offers suggestions for further reading and learning materials.

Preview 01:05
+
Getting Acquainted with HTML
5 Lectures 12:19

What began as a military research project in the 1960s, has evolved into the phenomenon today known as the World Wide Web (“the Web”) – connecting almost 2.5 billion users across the planet through a vast network of computers. The Internet has transformed the way people share information and revolutionized commerce by opening the global marketplace to businesses and individuals alike. Learn this and more during this lecture.

Preview 03:27

HTML is the language used to create webpages. HTML stands for Hypertext Markup Language. HTML documents written with this text (or coding) tell browsers how to interpret and display the data. Learn this and more during this lecture.

Preview 05:17

When it is time for you to start creating your HTML documents, you must decide which program you will use to write your code. Learn this and more during this lecture.

Preview 01:53

Unicode Transformation Format (UTF) is a set of standardized characters used to create HTML documents and was created to replace existing character sets to make a universal character set across all platforms. Learn this and more during this lecture.

Unicode Transformation Format (UTF)
00:39

There is a wealth of information available at your fingertips to help guide you in writing your own HTML code – in the form of webpages that currently exist on the internet. You can view the HTML code of a webpage (unless the developer has protected the code), allowing you to learn from others and spark new ideas in your own development efforts. If you like, you can save the webpage and even print the HTML code, providing you instructions on how to replicate the desired effects on your site. Learn this and more during this lecture.

HTML5 Resources
01:03
+
New for HTML5
2 Lectures 01:42

There are many changes to HTML5 that make it much easier to work with. The semantics and structure are clearer and more straight forward than previous versions of HTML. New Elements have been added and redundant Tags have been removed. The insertion of media has been streamlined and it has been updated to work across a multitude of platforms, i.e. home computers, tablets and mobile phones. We will cover the new additions in the relevant Sections that follow in this course. Learn this and more during this lecture.

What’s Different in HTML5?
01:02

The <!DOCTYPE> tag is not actually a "Tag" in HTML5.It is a declaration to let the browser you are using know what version of HTML you have written your code in. This MUST be the first thing on any page you are creating before the <html> tag. <!DOCTYPE> is not case sensitive and it does not have an end tag. Learn this and more during this lecture.

<!DOCTYPE> in HTML5
00:40
+
Designing a Webpage
8 Lectures 09:35

Before you sit down to design your first webpage, you should have an idea of what you want your end result to look like. Take out a piece of paper and pen or pencil and draw a rough sketch of your page. Lay out where you want to place your pictures, text and other elements. Your draft will be your blueprint as you develop your page. If you are designing an entire website (that is, a collection of webpages at a single URL), your planning is especially important. Learn this and more during this lecture.

Design Considerations and Planning
01:59

Once you have decided on your content and layout, it's time to design your first HTML page.Start by opening the text editor of your choice. While every webpage is different in terms of content and layout, each page has a basic structure and tags as the building blocks. Learn this and more during this lecture.

Basic Tags and Document Structure
00:54

The <html> and </html> tags are the main tags and identify your page as an HTML document. When a Web browser reads your document, it knows that everything between these two tags is an HTML document. Learn this and more during this lecture.

HTML tags <HTML>…</HTML>
00:43

The <head>…</head> tags are used to define your document header. This is where you add basic information about your webpage such as the title and metadata (author information, keywords, etc). These document header tags immediately follow the opening HTML tag <html> in your document. Learn this and more during this lecture.

Head Tags <HEAD>…</HEAD>
00:34

Title tags allow you to give your HTML page a name which is displayed in your browsers’ title or tab bar, depending if you have more than one tab open. It is also the name that appears when a user adds your webpage to their “Favorites” or “Bookmarks” folder.A “Favorites” or “Bookmarks” folder is a collection of pages that a user saves to quickly locate pages at a later time. Your title helps users identify your page, so it should be concise and relevant. Learn this and more during this lecture.

Title Tags <TITLE>…</TITLE>
00:59

The <body>…</body> tags identify the area in your webpage where all of your content is stored. Everything you place between these tags appears in your HTML document.Within these tags, you will place your text, images, lists, tables, forms and other elements. In addition, you can use attributes in this area to define default colors for the text and links. Learn this and more during this lecture.

Body Tags <BODY>…</BODY>
00:49

Metadata is a term used to describe the details of your webpage, such as a page description, keywords, copyrights and more. Metadata does not appear on the actual webpage when it is displayed in a browser. Instead, it is used to identify information about your webpage. More importantly, search engines such as Google and Yahoo use the information in your metadata tags (primarily keywords and page descriptions) to help determine where your pages will be ranked in search results. Learn this and more during this lecture.

Metadata
02:36

If you are using an advanced editor such as Dreamweaver or CoffeeCup, your documents will be saved as HTML pages by default. If you are using a simple text editor such as Notepad or Wordpad, save your files as a text document under “Save as type. ”Type your file name, followed by the .htm or .html extension. Learn this and more during this lecture.

Saving an HTML Page
01:01
+
Page Formatting
6 Lectures 04:45

Now that we understand the basic building blocks of an HTML page, let’s examine page formatting. When you are working in a word processing program such as Microsoft Word, you press the “Enter” (or Return) key on your keyboard to begin a new paragraph. Learn this and more during this lecture.

Adding a New Paragraph
00:41

By default, browsers ignore many formatting keystrokes that we take for granted. Examples include the “Enter” and “Tab” keys and multiple uses of the spacebar. To accomplish the same tasks in HTML, we use page formatting tags. Learn this and more during this lecture.

Adding a Line Break
00:58

Any blank spaces that you type in your text (beyond a single space between words) are ignored by browsers. You must code your desired blank spaces into your document. You can insert blank spaces into any lines of text. Learn this and more during this lecture.

Inserting Blank Space
00:47

If you want to avoid some of the repetitive coding that comes with multiple spacing in your document, you can use the preformatted tags <pre>…</pre>.The <pre>…</pre> tags allow you to maintain the integrity of the spacing and formatting of your text so that browsers will display it as you have typed it. Learn this and more during this lecture.

Preformatted Text
00:46

HTML coding uses hexadecimal values to assign colors. Hexadecimal values are assigned by typing a number sign (#) followed by a six character value (see Appendix). For very basic colors, you can also replace the six character value with the color name (red, yellow, green, etc.) see Appendix. Learn this and more during this lecture.

Changing a Page’s Background Color
00:55

The <div> tag is used to define a section or block on a webpage and can also be used in conjunction with CSS, for styling purposes, on large blocks or sections of content. Learn this and more during this lecture.

Div Element
00:38
+
Text Items and Objects
5 Lectures 04:03

Headings are used to help organize information on your webpage or to create a structural hierarchy or even add visual interest. HTML offers you six different levels of headings. These levels are the opposite of text levels. For headings, <h1> is the largest and <h6> is the smallest. Learn this and more during this lecture.

Headings
00:52

You can insert comments into your HTML code as a form of documentation or as notes to yourself or other designers viewing your code. Comments only appear within the HTML code and are not displayed by the browser. Learn this and more during this lecture.

Comments
00:43

Block quotes are typically used for quoted text from other sources. To create block quotes, use the <blockquote>…</blockquote> tags around the text. Learn this and more during this lecture.

Block Quotes
00:32

You can insert a solid horizontal line (sometimes called a horizontal rule) into your webpage to break up information or add visual interest. HTML requires that horizontal rules occupy a line by themselves. Learn this and more during this lecture.

Horizontal Lines
00:55

There are times when it becomes necessary to display characters and symbols that are not available on a standard keyboard such as © or that may have special meaning in HTML (<,>,&, etc). To accomplish this, HTML uses the Special Character Entity tag. Learn this and more during this lecture.

Special Characters
01:01
+
Creating Lists
4 Lectures 04:42

You can insert lists into your HTML documents to display ordered lists of items. Numbered lists (sometimes called Ordered Lists) are generally used to list items by their priority or their sequence in a process. For example, you might use a numbered list to display instructions in completing a specific task. Learn this and more during this lecture.

Numbered (Ordered) Lists
01:35

The other type of list you can create is called a bulleted (also called unordered) list. Bulleted lists are typically used when items require the reader’s attention, but do not need to be listed in any particular order. Learn this and more during this lecture.

Bulleted (Unordered) Lists
01:12

A nested list is simply a numbered or bulleted list that is contained within another list. This can come in handy when you wish to display items at different levels within a list hierarchy. Learn this and more during this lecture.

Nested Lists
00:55

Definition Lists are used to display text in a form that resembles a dictionary or glossary of terms. When you create a definition list, you must use three different tags. Learn this and more during this lecture.

Definition Lists
01:00
+
Links
8 Lectures 12:11

One of the most dynamic features of HTML is its ability to display selectable hyperlinks (or links for short) which allow the user to navigate from one topic or page to the next. By clicking on a link, the user “jumps” to the desired location. Links most often take the form of underlined text, but you can also turn images (see “Images” chapter) into links. Learn this and more during this lecture.

What are Links?
04:04

The tag used to define a link is actually an anchor tag. It takes the format of <a href=“…”>, where the “a” defines it as an anchor tag and the HREF attribute defines the “Hyperlink Reference” or action that will occur when the user selects the link. The <a href=“…”> tag is followed by the text that will be displayed to the user for their selection. The display text, and the anchor tag, are then terminated with the </a> end tag. Learn this and more during this lecture.

Text Links
00:54

You can also turn images (see next chapter “Images”) into links. This is accomplished in the same manner as text links, with the image coding replacing the text that gets turned into a link. Learn this and more during this lecture.

Image Links
00:47

By default, when you link to another page, the new page opens in the existing browser window. There may be times when you wish to open the page in a new browser window or tab. A tab is considered a “new window” in the same browser. This is considered good practice when linking to pages outside of your own website so that your users have access to the information but do not actually leave your site. Learn this and more during this lecture.

Opening a Page in a New Window or Tab
01:02

You can also set all of the links on an HTML page to open in a new window or tab each time the link is clicked. Learn this and more during this lecture.

Setting all Links on a Page to Open in a New Window or Tab
00:48

Sometimes, you may want to create a link that takes the user to another area on the same page. Also called bookmarks, these links are helpful for especially long pages, or when you want to make navigation easy on the page and organize information for the user. Learn this and more during this lecture.

Linking to an Area on the Same Page (Bookmarks)
01:30

You can create links onyour page to e-mail addresses. When the link is clicked, the user’s default e-mail editor will open with the e-mail address you specified in the “To” address area. To create an e-mail link, you use mailto:? as the value, replacing ? with the e-mail address you want the message sent to. Learn this and more during this lecture.

Linking to an E-mal Address
01:43

You can create links in your page to all types of files other than HTML, such as a Microsoft Word file, a PDF document and so on. One important thing to keep in mind is that the user must have the correct program in order to properly open the file. If you provide a link to a Microsoft Excel file and the user does not have Microsoft Excel on their computer, they will encounter problems. Learn this and more during this lecture.

Linking to Other Types of Files
01:23
+
Images
5 Lectures 06:16

Images are a terrific way to add interest to your webpage and come in different forms such as photographs and graphics. There are many different file types used for images in webpages, the most common being JPEG, GIF and PNG. It is important to understand the different file types and how browsers display them. Learn this and more during this lecture.

Introduction to Images for Webpages
02:25

To add an image to your webpage, use the <img> tag and specify the file name with the SRC (source) attribute. The value is the name of the image, including the file extension. If the image is hosted on a different server, you must list the full path of the image. Learn this and more during this lecture.

Adding Images to Webpages
00:43

You can adjust the size of your image in your HTML page by using the WIDTH and HEIGHT attributes. Use caution when re-sizing your image using HTML coding. If you don’t adjust the dimensions appropriately, you can distort your image. Learn this and more during this lecture.

Re-Sizing an Image
01:01

Alternative text (also known as placeholder text) serves two purposes. First, it provides a description of the image. Some users turn images off in the browsers to increase download speeds. When this is done, any ALT text you have inserted appears in the image’s place and gives the user an idea of what the image is. Users who have images turned on in their browser do not see the ALT text. Second, some search engines use ALT text when indexing pages and assigning rankings to search results. If part of your goal is to optimize your webpage for search engines, adding keywords into ALT text is a common technique. Learn this and more during this lecture.

Alternative (ALT) Text
01:17

You can add a label (or title) to your image so that when a user moves their mouse pointer over the image, the label will appear in a small box next to the pointer. Learn this and more during this lecture.

Image Labels
00:50
+
Basic Tables
3 Lectures 05:02

A table is a container that allows you to present data in an orderly arrangement. A table starts with the basic structure of a square with four borders. Inside the table are intersecting columns (vertical) and rows (horizontal) which create cells. Each cell has four borders and can store text, images and other data. Table and cell borders can be made to be visible or invisible. It is now considered bad form to use tables to set the structure of your webpage and tables should therefore be used to list data only. Learn this and more during this lecture.

Inserting a Table
02:44

By default, tables that you create do not have visible borders (a line around the table that visually defines the table). Borders can help to make your table stand out more and adds visual interest. To assign a border, insert the BORDER attribute into the <table> start tag and assign a thickness to the table border, measured in pixels. The thickness will only be applied to the table border and not the individual cells. Learn this and more during this lecture.

Table Borders
01:26

You can add a header to the top of the table to help identify or label the contents of the table. Table headers appear at the top of the table, within their own cell and with text that is both bold and centered. Learn this and more during this lecture.

Table Headers
00:52
17 More Sections
About the Instructor
TeachUcomp, Inc.
4.2 Average rating
2,559 Reviews
100,844 Students
67 Courses
Quality Software Training

Founded in 2001, TeachUcomp, Inc. began as a licensed software training center in Holt, Michigan - providing instructor-led, classroom-style instruction in over 85 different classes, including Microsoft Office, QuickBooks, Peachtree and web design, teaching staff at organizations such as the American Red Cross, Public School Systems and the Small Business Association.

At TeachUcomp, Inc., we realize that small business software can be confusing, to say the least. However, finding quality training can be a challenge. TeachUcomp, Inc. has changed all that. As the industry leader in training small business software, TeachUcomp, Inc. has revolutionized computer training and will teach you the skills to become a powerful and proficient user.

In 2002, responding to the demand for high-quality training materials that provide more flexibility than classroom training, TeachUcomp, Inc. launched our first product - Mastering QuickBooks Made Easy. The enormous success of our first tutorial led to an ever-expanding product line. TeachUcomp, Inc. now proudly serves customers in over 80 different countries world-wide including individuals, small businesses, non-profits and many others. Clients include the Transportation Security Administration, NASA, Smithsonian Institution, University of Michigan, Merrill Lynch, Sprint, U.S. Army, Oracle Corporation, Hewlett-Packard and the U.S. Senate.

Our full-time staff of software training professionals have developed a product line that is the perfect solution for busy individuals. Our comprehensive tutorials cover all of the same material as our classroom trainings. Broken into individual lessons, you can target your training to meet your needs - choosing just the lessons you want (and having the option to watch them all if you like). Our tutorials are also incredibly easy to use.

You will listen and watch as our expert instructors walk you through each lesson step-by-step. Our tutorials also feature the same instruction manuals (in PDF) that our classroom students receive - and include practice exercises and keyboard shortcuts. You will see each function performed just as if the instructor were at your computer. After the lesson has finished, you then "toggle" into the application and practice what you've learned - making it the most effective interactive training solution to learn on your own.