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.

5.0
(1 rating)

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.

How taking a course works

Discover

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2014
English

Course 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.

What are the 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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

An Iframe (Inline Frame) is a separate HTML document that is embedded into your HTML document. The most common usage of the Iframe element is to insert content from another webpage, such as a video or an advertisement. Learn this and more during this lecture.

You can set a link on your page to open inside an Iframe by using the TARGET attribute. To do so you must name your Iframe using the NAME attribute. The target and name must have the same value. Learn this and more during this lecture.

Forms are used to collect information from people who visit your website. For example, you can use forms to find out details about your visitors through surveys and feedback, or engage in e-commerce by selling your goods and services to people. Learn this and more during this lecture.

If your Web server does not support CGI scripting, or if you prefer to avoid it altogether, you can send the form data directly to an e-mail address. Keep in mind that this is not a good solution if you are capturing sensitive data such as credit card numbers, as it is not a secure form of transmission. Learn this and more during this lecture.

Text boxes are the most basic elements that forms use in the collection of data. Text boxes are typically used when the input requires a single line of text. To create a text box, you use the <input> element tag and TYPE attribute with a value of “text” and place it between the <form>…</form> tags. You must also specify a unique name for the text box using the NAME attribute. Learn this and more during this lecture.

Sometimes, you will want to collect text from individuals that requires a larger box. This is common in situations where you ask for feedback that may require multiple sentences. In this case, you can insert a large text area using the <textarea>…</textarea> element tags and assigning a unique (and required) name using the NAME attribute. Learn this and more during this lecture.

Check boxes are used when you want visitors to select from one or more options that you present. To create check boxes, you use the <input> element tag and TYPE attribute with a value of “checkbox” and place it between the <form>…</form> tags. You can group the check boxes using the same NAME attribute for each element. Learn this and more during this lecture.

Menu lists are typically used when you have a long list of choices to give users. The menu list appears as a drop-down list and allows the user to select their choice. Between the <form>…</form> tags, use the <select> element tag, along with the NAME attribute and define a size for the box with the SIZE attribute (measured in character lines). Learn this and more during this lecture.

Radio buttons are the small circles (O) that appear in forms. Radio buttons allow you to present a series of choices (grouped under the same NAME attribute) but only allows the user to select a single choice. Learn this and more during this lecture.

The submit button is a required piece of your form since when it is clicked, it actually sends the data to be processed. You must have a submit button in your form in order to receive the data. Learn this and more during this lecture.

The reset button is used to allow a user to clear all of the information they have entered into a form. To insert a reset button, use the <input> element tag with a TYPE attribute and a value of “reset”, and the VALUE attribute with a value that is the text you want to appear in the button (typically “Reset”). Learn this and more during this lecture.

Users can navigate through the elements of your form by using the Tab key on their keyboard, jumping from one element to the next. By default, the order the Tab key follows is the order in which you entered the form elements in your HTML page. Learn this and more during this lecture.

You can add video and audio files to your webpage by either providing links to the files or embedding them directly into your HTML pages. Before the adoption of HTML5, there was no standard for showing video across multiple browsers. Videos could only be played with a “plug-in” like Adobe Flash, however different browsers used different plug-ins. HTML5 offers a new element, the <video> element, that does not require a plug-in to play video files. The <video> element is supported by most of the standard browsers used today. Learn this and more during this lecture.

The most basic way to provide audio and video files to your visitors is to link directly to the files. When clicked, the file will open and play in a separate window. Just as with other links, be sure to upload the video or audio file to your Web server to avoid broken links. Learn this and more during this lecture.

There are a few steps necessary when adding or embedding video into your webpage. In addition to the <video> element, you will need to supply a <source> element. The <source> element in conjunction with the SRC attribute, tells your webpage what video file to display. You must also tell your browser the type of file you are linking with the TYPE attribute. There are currently three major video file types supported. They are: MP4, WebM and Ogg. Learn this and more during this lecture.

There are a few steps necessary when adding or embedding audio into your webpage. In addition to the <audio> element, you will need to supply a <source> element. The <source> element in conjunction with the SRC attribute, tells your webpage what audio file to play. You must also tell your browser the type of file you are linking with the TYPE attribute. There are currently three major audio file types supported. They are: MP3, Wav and Ogg. Learn this and more during this lecture.

The easiest way to display videos on your webpage is using a link to YouTube. You can upload your own videos to a YouTube account or use any other video from YouTube. This method is easy because you don’t have to worry about file types and browser support. Learn this and more during this lecture.

If you have ever visited a website that does no function properly, you can relate to the frustration that a user experiences when they run into problems. It is critical that you test your website to avoid such problems. Learn this and more during this lecture.

Cascading Style Sheets (CSS) are separate text files you create that contain rules and definitions which you can apply to other parts of your website. Once the style sheet is created, you link it to your HTML documents, allowing you to control the look and feel of several pages by changing a single source. Learn this and more during this lecture.

The syntax of CSS looks very different from HTML. Each rule within CSS has two components: Selectors and Declarations. The Selector is the element to which the rule applies and is followed by a space. Then, the declaration (surrounded by curly brackets) identifies the formatting to apply and consists of a property and a value. CSS Declarations always end with a semicolon. Learn this and more during this lecture.

To create an external Cascading Style Sheet, start a new document in your text editor and type your rules, keeping one rule to each line for future editing. Once you have listed your rules, save the document as a text file and assign the extension .css. Learn this and more during this lecture.

Just as you can in your HTML pages, you can also insert comments into your Cascading Style Sheets as a form of documentation or as notes to yourself or other designers viewing your code. Comments only appear within the CSS code and are not displayed in the Web browser. Learn this and more during this lecture.

Style sheets can also be internal, meaning the rules are contained within the HTML page instead of a separate text file. This can be useful if your website consists of a single, long page with many elements you wish to control from a single location. Learn this and more during this lecture.

There are two different ways to change the formatting on different elements in your HTML page. They are ID and Class. The ID selector is used when you want to change the style for a single, unique element. The Class selector is used when you want to change a group of elements within your HTML page. Learn this and more during this lecture.

Inline styling takes your CSS coding and inserts it into the tag of your HTML code. To do this you use the STYLE attribute inside the tag you want to work with. It is a good idea to keep inline styling to a minimum as you lose much of the advantage of style sheets. Learn this and more during this lecture.

To bold text in a CSS style rule, use the FONT-WEIGHT property. You can use the default value of “bold” or you can assign a degree of boldness with a numerical value in multiples of 100, with 100 being the lightest and 900 being the darkest bold. Learn this and more during this lecture.

The TEXT-DECORATION property is used to add strike-through marks, underline and overstrike marks to your text. Generally this property is used to remove underlines from links. Learn this and more during this lecture.

To indent the first line of a paragraph use the TEXT-INDENT property. The value you assign can be in the form of pixels (px), inches (in), millimeters (mm), centimeters (cm), points (pt), picas (pc) or x-height (ex). The most commonly used is pixels (px). Learn this and more during this lecture.

The TEXT-TRANSFORM property is used to define the case your text is displayed in. There are three values available: uppercase, lowercase and capitalize. Uppercase turns all letters into uppercase (similar to using the caps lock key), lowercase turns all letters into lowercase, and capitalize sets the rule to capitalize the first letter of each word. Learn this and more during this lecture.

You can use the TEXT-ALIGN property to control the horizontal alignment of any block-level text. Block-level text are paragraphs, tables and other elements that have a blank line before and after them. The value you assign to the alignment is either “left”, “right”, “center” or “justify”. Learn this and more during this lecture.

To control the fonts in a CSS style rule, use the FONT-FAMILY property. When using the FONT-FAMILY property you want to list several fonts as not all fonts are supported by all browsers. Your user’s browser will attempt each of the fonts, in the order they are listed. When listing multiple fonts they are separated by a comma. Learn this and more during this lecture.

The FONT-SIZE property allows you to create a CSS rule that controls the size of the font. The value you assign can be a numerical value in the form of pixels (px), inches (in), millimeters (mm), centimeters (cm), points (pt), picas (pc), x-height (ex), em (the height of the current font, 1 em is equal to 16px) or in a percentage. The default font size for browsers is 16px. Learn this and more during this lecture.

Kerning is a term that refers to controlling the horizontal spacing between characters of text. You can control the kerning of text by using the LETTER-SPACING property. Learn this and more during this lecture.

Leading (pronounced ledding) is a term that refers to controlling the vertical spacing between lines of text. You can control the leading of text by using the LINE-HEIGHT property. The value you assign is typically expressed as a multiple of the height of the font. Learn this and more during this lecture.

Students Who Viewed This Course Also Viewed

SHARE

Instructor Biography

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.