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.

Created byTeachUcomp, Inc.

Last updated 3/2021

English

What you'll learn

Video Lessons
Printable Classroom Instruction Manuals
Learn HTML Language
How to Create a Website
Text, Links, Images, CSS, and much more!

Course content

27 sections • 128 lectures • 3h 20m total length

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

Introduction to the Internet3:27
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.
Introduction to HTML Terminology5:17
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.
Options for writing HTML1:53
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.
Unicode Transformation Format (UTF)0:39
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.
HTML5 Resources1:03
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.

What’s Different in HTML5?1:02
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.
<!DOCTYPE> in HTML50:40
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.

Design Considerations and Planning1:59
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.
Basic Tags and Document Structure0:54
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.
HTML tags <HTML>…</HTML>0:43
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.
Head Tags <HEAD>…</HEAD>0:34
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.
Title Tags <TITLE>…</TITLE>0:59
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.
Body Tags <BODY>…</BODY>0:49
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.
Metadata2:36
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.
Saving an HTML Page1:01
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.

Adding a New Paragraph0:41
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 Line Break0:58
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.
Inserting Blank Space0:47
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.
Preformatted Text0:46
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.
Changing a Page’s Background Color0:55
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.
Div Element0:38
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.

Headings0:52
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.
Comments0:43
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.
Block Quotes0:32
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.
Horizontal Lines0:55
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.
Special Characters1:01
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.

Numbered (Ordered) Lists1:35
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.
Bulleted (Unordered) Lists1:12
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.
Nested Lists0:55
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.
Definition Lists1:00
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.

What are Links?4:04
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.
Text Links0:54
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.
Image Links0:47
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.
Opening a Page in a New Window or Tab1:02
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.
Setting all Links on a Page to Open in a New Window or Tab0:48
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.
Linking to an Area on the Same Page (Bookmarks)1:30
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 E-mal Address1:43
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 Other Types of Files1:23
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.

Introduction to Images for Webpages2:25
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.
Adding Images to Webpages0:43
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.
Re-Sizing an Image1:01
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.
Alternative (ALT) Text1:17
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.
Image Labels0:50
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.

Inserting a Table2:44
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.
Table Borders1:26
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 Headers0:52
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.

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.

Our courses were developed from our original classroom trainings. This helped to develop the curriculum of course topics we present that address the student’s real-world concerns and usage.

Our course design helps maximize the learning retention of our self-study courses. Each course contains different learning modalities that help reinforce the topics. We initially present each topic’s information in a course manual in a written, conversational style to provide a conceptual overview. These overviews are followed by instructions, showing the specific actions required to perform the tasks related to the topic. These topic actions are then combined with each other into exercises at the end of each chapter to show their interconnected relationships.

Each course topic is also enhanced with an audio-visual lesson in the form of a video. The video lesson shows how to perform the topic’s actions as the instructor simultaneously narrates the topic’s overview.

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 this course is for:

Anyone wanting to learn more about CSS and HTML
Anyone wanting to learn how to build a website
Students upgrading from HTML4 into HTML5

Mastering Introductory HTML5 and CSS3 Training Tutorial

What you'll learn

Explore related topics

Course content

Course Introduction1 lecture • 1min

Getting Acquainted with HTML5 lectures • 12min

New for HTML52 lectures • 2min

Designing a Webpage8 lectures • 10min

Page Formatting6 lectures • 5min

Text Items and Objects5 lectures • 4min

Creating Lists4 lectures • 5min

Links8 lectures • 12min

Images5 lectures • 6min

Basic Tables3 lectures • 5min

Requirements

Description

Who this course is for: