Classroom Assistant: HTML Tutorials

Pin It

In this Classroom Assistant, you will learn what HTML is and how it applies to your education. We have also provided you with 15 tutorial videos that cover a variety of tools and techniques of HTML.
html-basics

Table of Contents:

1. What is HTML?
2. How HTML Applies to Your Education
3. HTML Tutorial for Beginners 
4. HTML5 Tutorial For Beginners – Getting Started
5. HTML Tutorial 1 – Designing A Website In Notepad – Basics and Beginnings
6. Learn HTML and CSS Tutorial. Howto make website from scratch
7. HTML Tutorial 5 – Links & Menu Bars – Website Design Tutorial
8. HTML Tutorial 3 – Adding Images & Backgrounds To Your HTML Website
9. HTML Tutorial 4 – HTML Website Tables & Layouts Tutorial
10. HTML Tutorial 6 – Putting Your Website Online – Website Design Tutorial
11. XHTML and CSS Tutorial – 1 – Downloading a Text Editor
12. HTML Tutorial 2 – Colours, Fonts, Backgrounds Website Design
13. HTML Tutorial for Beginners – part 2 of 4
14. Slice and Export a Website Layout + HTML: Photoshop Tutorial!
15. Designing A Pro HTML Site In Minutes
16. HTML5 Tutorial – 1 – Introduction
17. HTML Animated Backgrounds CSS Layer Position Tutorial with Flash or Javascript

1. What is HTML?

HTML stands for HyperText Markup Language. It is the main markup language for creating web pages. This language is written in the form of HTML elements that is composed of tags that are enclosed in angle brackets. HTML tags have to appear in pairs, which are referred to as an opening tag and a closing tag. For instance, if you want to make text into a headline you would use the h1 tag, enclosed in <>, in front of your text. You would also need to close your text with a /h1 closing tag, enclosed in <>, so the command is limited to just the text you wish to make a headline.

Web browsers read HTML documents and transform them into the website pages that you see. Specific HTML code will also allow you to see graphics, videos, flash files, and audio. HTML works together with CSS (Cascading Style Sheets) which allows you to apply code to many like instances on your website. This will minimize the styling code that you would need to write on each of your HTML sheets. Both HTML and CSS are maintained by the W3C coding regulations. These regulation help you to ensure that your written code will be accepted by all web browsers.

2. How HTML Applies to Your Education

HTML will be the most important language you will learn in your Graphic Design Degree studies. This code will be essential for you to create your website. Throughout your education, you will be challenged to create many websites as part of your course assignments. Some schools will allow you to use Adobe Dreamweaver to create your web pages, which is a web design and development application that provides a visual WYSIWYG editor. In addition to supplying coding tips to it’s users, Dreamweaver also comes with prepackaged code for common website scenarios. Dreamweaver is an amazing program that saves designers a considerable amount of time. It is also ideal for the designer that does not enjoy coding as much as they do creating the visual aspects of websites. However, it is very beneficial for you to learn what the code means and how it works with other coding tags. Understanding HTML code will only allow you to be more productive when using web design editors. HTML code is written in text editors such as Notepad. Notepad is a free program that is downloadable from the web.

Coding your websites can be very complicated when you are first learning. There are a lot of intertwining pieces and a lot of elements to remember. To assist in your HTML learning, we have researched some tutorials that will help you understand your assignments as you are earning your Graphic Design degree. Below you will find the top 15 tutorials on our list.

***************************************************************************************************************

3. HTML Tutorial for Beginners – part 1 of 4

How to make a website: HTML Tutorial – Basics. Start off with a solid foundation by learning some of the basics of HTML – XHTML. In this HTML tutorial you will learn how to make a simple webpage.
The tutorial starts off with definitions for both HTML and XHTML. It then goes on to demonstrate how you can use Microsoft Notepad to create your HTML file. It explains what HTML tags are and how to use some of the basic ones. This tutorial also shows how to display the HTML file in a web browser.

Speaker: tutor4u

***************************************************************************************************************

4. HTML5 Tutorial For Beginners – part 1 of 6 – Getting Started

This is 1 of 6 in a series of videos that demonstrate how to write HTML code that is compliant with the new HTML5 standards. These videos are good for beginners. This video describes HTML tags, elements, and attributes. The new HTML5 doctype declaration, method for specifying the character encoding for the document, and the basic structure of an HTML document is shown. This video introduces the html, head, meta, title, body, and p tags.

Speaker: tutor4u

***************************************************************************************************************

5. HTML Tutorial 1 – Designing A Website In Notepad – Basics and Beginnings

In this HTML website design tutorial you will learn how to write and format your very first web page using HTML. this tutorial is for beginners.

Speaker: EdzJohnson

***************************************************************************************************************

6. Learn HTML and CSS Tutorial. Howto make website from scratch

In this #1 requested tutorial you will learn how to make your own site.

Speaker: Jimmy Ruska

***************************************************************************************************************

7. HTML Tutorial 5 – Links & Menu Bars – Website Design Tutorial

In this HTML website design tutorial you will learn how to add links to text and images. You will also learn how to make a very simple menu bar using text style. This tutorial is intermediate skill level.

Speaker: EdzJohnson

***************************************************************************************************************

8. HTML Tutorial 3 – Adding Images & Backgrounds To Your HTML Website

In this HTML website design tutorial you will learn how to add images to your website/html document and how to add an image to the background. The skill level on this tutorial is beginner.

Speaker: EdzJohnson

***************************************************************************************************************

9. HTML Tutorial 4 – HTML Website Tables & Layouts Tutorial

In this HTML website design tutorial you will learn how to add tables into your website and layouts for text separation. This tutorial is on the intermediate skill level.

Speaker: EdzJohnson

***************************************************************************************************************

10. HTML Tutorial 6 – Putting Your Website Online – Website Design Tutorial

In this HTML website design coding tutorial you will learn how to place your very own webpage/website online totally free. This is an intermediate level tutorial.

Speaker: EdzJohnson

***************************************************************************************************************

11. XHTML and CSS Tutorial – 1 – Downloading a Text Editor

This tutorial will help you create a website with XHTML and CSS.

Speaker: thenewboston

***************************************************************************************************************

12. HTML Tutorial 2 – Colours, Fonts, Backgrounds Website Design

In this HTML website design tutorial you will learn how to change background and text colours/colors with microsoft notepad. This is a beginner level tutorial.

Speaker: EdzJohnson

***************************************************************************************************************

13. HTML Tutorial for Beginners – part 2 of 4

This is the second in a series of videos designed to teach the basics of HTML. This video will introduce the break tag, the paragraph tag, and heading tags. It will also show an easy way to test the various HTML tags.

Speaker: tutor4u

***************************************************************************************************************

14. Slice and Export a Website Layout + HTML: Photoshop Tutorial!

You learn how to take a Photoshop created web page layout template and slice it into individual pieces and then export it with an HTML file. This tutorial will cover user slices, layer based slices, auto slices, naming slices, assigning links to slices, alternate text for slices, creating multiple slices at one time, previewing our file in a web browser, saving individual slices as gifs or jpgs from the same document, and exporting a fully functional HTML file to go along with all of it.

Speaker: tutvid

***************************************************************************************************************

15. Designing A Pro HTML Site In Minutes

In this tutorial I you will learn the basis for a professional looking website. The tutorial is quite fast flowing so if you get confused at all please go back to some beginner tutorials listed above.

Speaker: EdzJohnson

***************************************************************************************************************

16. HTML5 Tutorial – 1 – Introduction

In this tutorial you will learn tips and tricks for HTML5 programming.

Speaker: Thenewboston

***************************************************************************************************************

17. HTML Animated Backgrounds: CSS Layer Position Tutorial with Flash or Javascript

In this tutorial you will learn how to create cool animated backgrounds for HTML CSS content containers or for the whole page background. You can choose to use either Flash animations or Javascript animations. We apply strategic CSS to layer and position our elements to create the effect.

Speaker: Adam Khoury

***************************************************************************************************************

For additional tutorial help, please see these tutorial sites:

Photoshop

Illustrator

Flash

 CSS

Pin It