Udemy logo

html5tutorialforbeginnersThe latest standard in HTML is the release of the powerful HTML5 version that allows web designers and programmers far more freedom and power in terms of creating websites that are both visually stunning and interactive. This tutorial will cover what you need to know to get started in HTML5. If you want to get a jumpstart on your HTML5 tuition, check out the HTML5 for Beginners course now. This step-by-step course will teach you how to design your own elegant blog site using HTML5, teach you how to code using HTML5 and CSS3, and how to wireframe your site. The course shows you how to design an HTML5 form for your website, how to incorporate graphics and import multimedia into your site to create an interactive experience for your users.

Internet 101 – HTML5 Web Design

HTML is the language computers use to speak to one another on the internet. It is a pre-agreed set of instructions that tell computers how to communicate with one another, how to display elements, how to format the pages you see and how to interact with the user. HTML is an acronym for Hyper Text Markup Language. There have been a number of versions of HTML that have been released over the past few years with HTML5 being the latest release.

When you interact on the web, whether you are reading your facebook posts or loading a website, there are always at least two computers involved in that communication. The information is held on a server somewhere in the world and your computer allows you to access the server. Communication on the internet is therefore divided into server-side communication and client-side communication. The client is the computer that is surfing the web and the server is the computer hosting the information.

Scripts are small code sets or routines used by the server, or the client, to perform certain instructions. Scripts can be written in various scripting languages including Java and JavaScript. API’s are Application Program Interfaces and these are specialized pre-written programs you can use in HTML5 to add various features to your website like geolocation.

The terms “server-side” and “client-side” therefore refer to the computer that does the work. In client-side scripts, the server send instructions to the user’s computer to do something. Server-side scripts are executed on the server and the results are then sent to the user’s computer.

So essentially, your computer, the “client,” communicates with the host computer–called the “server”-using HTML as the communication language. HTML can contain various items including scripts, which are essentially small programs that include instructions to do something.

If you are interested in learning more about HTML5, enroll in the Learn HTML 5 course and join thousands of students learning to harness the power of HTML5 to build impressive websites that wow your clients. This course contains over 44 lessons that include a brief introduction to HTML and its history. The course includes a demo HTML site to help you learn the basics of HTML5, teaches you how to style your page and how to add forms and images. You will learn to work with frames, iFrames and framesets. The course also includes a number of tutorials on API’s and working with API’s like geolocation and web storage.

HTML5 Tutorial – Elements and Tags

htmlprojectsMost HTML5 pages contain a number of elements on each page. Elements include headings, images, columns, paragraphs of information, forms, etc. An element is a group of instructions to the client or server that indicate what needs to be done or what needs to be shown on the client. Elements are generally grouped together in the order in which they appear.

Let’s say for example, we have a simple webpage we would like to create; it has a heading, an image, a paragraph describing the image, and then a contact form. The elements on the page would therefore be:

·         A Header

·         Image

·         Paragraph

·         Form

Tags in HTML are used to define the elements that tell the client or server how to display the information, or they contain information about the specific function. Tags appear at the start and end of an element. The “<>” are used to denote a tag in HTML5. Tags can also contain other tags, for example, where you want to use the same font for the whole page, your font tag may be defined at the start of your page and span the entire page to ensure your font remains the same throughout the page.

For our website we would use the following HTML5 tags:

<header> Our Heading </header>

<image> ourImage.jpg </image>

<p> Our Paragraph information </p>

<form> Our contact form </form>

There are literally hundreds of HTML5 tags that you can use to format the look and feel and function of your webpages. If you would like to learn more about HTML5 and HTML5 elements and tags, check out the HTML5 Fundamentals course and join hundreds of students who are learning to code in HTML5. This course is designed to teach you the basics of HTML. It will teach you how to use text elements. It will show you how to create lists and links. The course includes lessons on how to work with tables and images and the course includes all of the website basics you need to create and design your own HTML5 sites.

HTML5 Web Page Essentials

There are a number of elements that each HTML5 document needs. The first essential element for every HTML5 page is the DOCTYPE tag. This tag tells the client that this page is designed using HTML5. If this tag is not specified then some of the other HTML5 tags contained in your pages may not work properly.

The DOCTYPE tag only appears at the top of the page:

<!DOCTYPE html>

The next tag that is essential for every webpage is the HTML tag. This tag tells the client that everything between the HTML tags is written in the HTML language. This tag is opened using the <html> tag and closed at the end of the html on the page using the </html> tag.

Each page must also contain a head element. The information in the head element tells the client about the page and the information is not displayed on the page. The head element contains the title of the page, the meta-description that is used by search engines, the keywords, etc. The head element can also contain mini programs written in JavaScript that the page can use. The head element is opened using the <head> tag and is closed using the </head> tag.

Every HTML page must also contain a set of body tags to indicate the elements and information that must be displayed on the page. The body section is opened using the <body> tag and closed using the </body> tag.

Take a look at the following basic HTML page:

<!DOCTYPE html><html><head></head><body><h1>My HTML5 Heading</h1><p>My first HTML5 paragraph.</p>
</body>
</html>

HTML5 – Learn to Harness the Power TodayTo learn about the various elements required on an HTML5 page, sign up for the HTML5 Beginners Crash Course now and join thousands of students learning to create websites using HTML5. This course offers 46 lectures designed to learn HTML5 from scratch. It includes a number of lectures on HTML for newcomers. It also includes lessons on how to use the canvas and drawing elements offered in HTML5. There are lectures on geolocation, local storage and advanced HTML5 forms and how to use them in your web pages. The course will show you how embed both audio and video in HTML5 and finally the course covers working with microdata and offline web apps.

This tutorial was designed as a brief introduction to HTML5. The real power of HTML5 is found in the new tags offered in this release. For more tutorials on HTML5, try the following links:

If you are excited about the potential offered by HTML5, then join hundreds of students who are learning to program games using HTML5. HTML5 is not only for webpages but has been designed for mobile devices too. Sign up for the HTML5 Mobile Game Development for Beginners course and learn to take your HTML5 programming skills to the next level. This course is designed for those who are new to web programming. It contains step-by-step lessons on how to create a game that will work on iPhones, iPads, Android devices, as well as desktop PCs. It will teach you how to include touchscreen elements in your games. You will learn to create cool animations and transitions for your games. It will show you how to add sound to your game. You will learn to create your first spaceship game and how to use 2D physics in your games. The course will also teach you how to create your first virtual pet game and a farming game. Finally, the course will teach you how to use appcelerator to sell your game in the App stores.

Page Last Updated: May 2014

Top courses in HTML

HTML students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.

Request a demo