Html5 Tutorial Pdf

Would you like to learn some HTML?

Examples in Every Chapter. This HTML tutorial contains hundreds of HTML examples. With our online HTML editor, you can edit the HTML, and click on a button to view the result.

Sounds like a great idea. Hence the reason why I've put together this HTML tutorial for beginners. Show language bar windows 7.

There are at least 1.2 billion websites in the world today. Practically all of these websites use HTML in one way or the other.

P.S: If you don't want to learn HTML and start building your website right away, without coding required, take a look at this guide: How to Make a Website for FREE (without learning HTML).

Introduction to HTML

What is HTML?

HTML, an acronym for HyperText Markup Language, is a computer language for creating websites and web applications. Consisting mainly series of codes usually written in a text file and saved as HTML, code written in the HTML language translates into a beautiful, well-formatted text or a combination of text and media when viewed through a browser.

HTML was first developed by British physicist Tim Berners-Lee in 1990, and it has gone through so many evolutions since then that the most recent version can achieve far more than was imagined possible when the language was first invented.

In this tutorial, we will go through the basics of the HTML language and all you need to know to get started with HTML as a beginner.

HTML Versions

First, a quick rundown of all the HTML versions since HTML was invented.

• HTML 1.0: This was the barebones version of HTML and the very first release of the language.
• HTML 2.0: This version was introduced in 1995. It gradually evolved, allowing extra capabilities including form-based file upload, tables, client-side image maps and internationalization.
• HTML 3.2: In an attempt to ensure development of standards for the World Wide Web, the World Wide Web Consortium (W3C) was founded by Tim Berners-Lee in 1994. By 1997, they published HTML 3.2.
• HTML 4.0: Later in 1997, the W3C released HTML 4.0 — a version that adopted many browser-specific element types and attributes.
• HTML 4.0 was later reissued with minor edits in 1998.
• HTML 4.01: In December 1999, HTML 4.01 was released.
• XHTML: The specifications were introduced in 2000 and it was recommended to be used as the joint-standard with HTML 4.01. It incorporated XML to ensure code is properly written and to ensure interoperability between programming languages.
• HTML5: The W3C published HTML5 as a recommendation in October 2014 and later released HTML 5.1 in November 2016.

Choosing Your HTML Editor

If you are thinking of creating web pages in HTML, you need an HTML editor. There are several benefits to using an HTML editor.

A good HTML editor will keep your code clean and organized. It will also detect when you open a new tag and automatically close it to avoid you having a buggy code and as a result reducing how much typing you have to do. Most HTML editors today allow you to preview your web page to see how it will look like in a web browser using their WYSIWYG feature.

There are many free and paid HTML editors, below are some of the top options you can choose from:

Basic Building Blocks of HTML

Once you've decided on the HTML editor you want to use, the next step is to understand the building blocks of HTML. When coding in HTML, it is essential to understand these building blocks. They include tags, attributes and elements. We will take a basic look at them below:

Introduction to Tags

Once you're into HTML, the first thing you need to understand is tags. In essence, tags separate normal text from HTML code.

Consequently, when it comes to HTML, tags make the difference between whether your document is displayed as ordinary text or 'transformed text' which is basically a code of text which appears to display a series of things (hyperlinks, images, media, or other methods of formatting) based on what it is instructed to display based on tags.

Let's take a look at the word 'He is a boy' as an example:

• In ordinary text format you get: He is a boy.
• In bold text format you get: He is a boy

To achieve what we have in the bold format you have to use the tag.

In raw HTML we have He is a boy which the browser then translates to this: He is a boy.

'He is a boy' could also come out italicized.

This is achieved using the tag.

We have: He is a boy which then comes out as He is a boy.

Hyperlinked is achieved using the tag.

In raw HTML we have: He is a boy which shows as He is a boy.

There are a few things you should understand about tags:

• Tags are practically the building block of HTML – you can't do HTML without tags! If you're stuck on which tag to use, be sure to check out our HTML periodic table.
• Almost every open tag must be closed. Keep in mind that there are exceptions. An example of a tag that does not have to be closed is an empty tag, such as the line break:
  .
• Tags are contained in less than ('<') and greater than ('>') angle bracket. Closing tags contain a trailing slash that becomes before the name of the tag being closed. Example of an open tag: . Example of a closed tag .
• Every HTML file begins with the opening tag and ends with the closing tag . The first line of the HTML file should declare the type of document so that the browser knows what HTML flavor you use. This is why you see HTML pages start with '' before the HTML code begins.

Before content is added, most HTML files basically look like this:

The section that follows the tag usually contains information about the document such as its title, meta tags and where to locate its CSS file – content which is not visible directly on the browser page. The section between ' and ' (which we represented with 'MAIN CONTENT') is where the main content of the HTML file, that the viewer will see in the browser, is located. This includes everything from the first paragraph to hyperlinks to formatting to multimedia and everything else.

Introduction to Elements

In HTML, an 'element' consists of the opening and closing tag as well as the content between the tags.

In the 'He is a boy' (in bold) example, we have this in HTML: He is a boy. The text 'He is a boy' is surrounded by an open and closed tag. Everything, including the opening tag, the content and the close tag is an element.

When a tag is opened, content is introduced and the tag is closed, we have an element.

Epson tm t20ii driver download. An element could be in a basic form or in a complex form. Why? Because anything in between an open tag and a closed tag as well as those tags is an element. It means that we can have elements within an element. In our current example, 'he is a boy' (He is a boy) is an element.

You will notice that we said earlier that the HTML documents contain the tag before the content begins. The content could include hundreds of different elements, but all these elements are part of the 'body' element (since the body element is open, contains content and is then closed).

Introduction to Attributes

While HTML documents basically use tags for everything, we sometimes want to communicate additional information inside an element. In this case, we use an attribute. The attribute is used to define the characteristics of an element, it's used inside the opening tag of the element. Attributes are made up of a name and a value.

Note that the value of an attribute is placed inside a quotation mark using the format Your Text.

Example:

In this example, we are instructing that 'He is a boy' is aligned in the center of the document.

Getting Started With HTML

Assuming you want to create your own basic HTML document today, how do you get started? From creating page titles to creating forms, we will walk you through how to get started with HTML below.

Creating The HTML Element

When creating an HTML document, one of the first things you will create is the element. This contains metadata (or data about the HTML document). This includes information such as the character set, document title, document styles, scripts, etc.

Some of the elements in the include the title, which is created with the tag.</p><p><strong>Example</strong>:</p><p>This title will be displayed in the browser tab. It's also what will be indexed as the title for the page when the search engine bots crawl your website.</p><p>This also includes the <meta> element, which is often used to specify information search engines can use to describe the content in their listings. This includes the description, keywords, author information, etc. The <meta> element also specifies the character set the HTML document uses.</p><h3>Creating Headings in HTML</h3><p>Headings play a major role in the success of a website. Firstly, they make it easy for readers to scan the content of your pages. Secondly, and perhaps more importantly, they communicate the structure of your web pages to search engines and therefore often impact how your content is ranked in search engine results.</p><p>That said, it is important to avoid using heading tags to make your text big or bold. There are other tags that can be used for that (which we'll get to later in this section). Instead, heading tags should be used solely for structure.</p><p>There are six heading tags in HTML: <h1> to <h6>, with the <h1> tag indicating the most important heading and the <h6> tag indicating the least important heading.</p><p>To create headings, simply decide what heading you're creating, open the heading with the regular heading tag and always remember to close the tags once you're done.</p><p><strong>HTML Headings Example</strong>:</p><ul><li><h1>This is Your First HTML Heading</h1> (the largest)</li><li><h2>This is Your Second HTML Heading</h2></li><li><h3>This is Your Third HTML Heading</h3></li><li><h4>This is Your Fourth HTML Heading</h4></li><li><h5>This is Your Fifth HTML Heading</h5></li><li><h6>This is Your Sixth HTML Heading</h6></li></ul>

Creating paragraphs

The next step is to start creating paragraphs. Paragraphs can be created with the

tag.

Example:

Keep in mind that writing in HTML is very different from writing in pure text. Therefore, if you break up text inside HTML without starting a new paragraph, it won't really matter when the text is displayed by the browser. Instead, you want to use a line break, which is represented by the
tag.

Html5 Tutorial Pdf For Certification

Example:

This will not come out as the following:

This is a new paragraph.
And I want to use a number of new lines.
So I'm breaking it up.

Instead, it will come out as this:

This is a new paragraph. And I want to use a number of new lines. So I'm breaking it up.

So, how do you break texts into new lines so that it would show like this:

This is a new paragraph.
And I want to use a number of new lines.
So I'm breaking it up.

By using line breaks.

Example:

That said, it is important to note that the line break (
) tag is an empty tag, so you don't have to close it.

Formatting Text in HTML

The next step is to format your text in HTML. This is where you can indicate whether you want your text to come out bold, italicized, underlined, subscripted, superscripted, etc. This is a basic guide, so this section won't be the be-all-end-all for formatting. Instead, we will only include some basic formatting tags. The process for using other forms of formatting is simple – just find the tag you want and go ahead:

Using bold: He is a boy comes out as He is a boy

Using italics: He is a boy comes out as He is a boy

Underlining text: He is a boy comes out as He is a boy. It's worth noting that the tag was deprecated in HTML 4.01 and was redefined to represent stylistically different text in HTML5. As a result, it is recommended to use CSS to indicate text that should be underlined. Since this article is a basic guide, we're keeping it simple.

Using subscript: _{He is a boy} comes out as _{He is a boy}

Using superscript: ^{He is a boy} comes out as ^{He is a boy}

For other tags that can be used to format, you might want to take a look at the glossary at the end of this resource where we have included plenty of relevant HTML tags.

Ordered and Unordered Lists

Sooner or later you will have to create lists. Lists could be ordered (i.e. numbered) or unordered (i.e. unnumbered).

Here is an example of an ordered list:

1. Item 1
2. Item 2
3. Item 3

Here is how to create it:

Here is an example of an unordered list:

• Item 1
• Item 2
• Item 3

Here is how to create it:

If it is not already obvious. Here's a breakdown:

The

Creating paragraphs

The next step is to start creating paragraphs. Paragraphs can be created with the

tag.

Example:

Keep in mind that writing in HTML is very different from writing in pure text. Therefore, if you break up text inside HTML without starting a new paragraph, it won't really matter when the text is displayed by the browser. Instead, you want to use a line break, which is represented by the
tag.

Html5 Tutorial Pdf For Certification

Example:

This will not come out as the following:

This is a new paragraph.
And I want to use a number of new lines.
So I'm breaking it up.

Instead, it will come out as this:

This is a new paragraph. And I want to use a number of new lines. So I'm breaking it up.

So, how do you break texts into new lines so that it would show like this:

This is a new paragraph.
And I want to use a number of new lines.
So I'm breaking it up.

By using line breaks.

Example:

That said, it is important to note that the line break (
) tag is an empty tag, so you don't have to close it.

Formatting Text in HTML

The next step is to format your text in HTML. This is where you can indicate whether you want your text to come out bold, italicized, underlined, subscripted, superscripted, etc. This is a basic guide, so this section won't be the be-all-end-all for formatting. Instead, we will only include some basic formatting tags. The process for using other forms of formatting is simple – just find the tag you want and go ahead:

Using bold: He is a boy comes out as He is a boy

Using italics: He is a boy comes out as He is a boy

Underlining text: He is a boy comes out as He is a boy. It's worth noting that the tag was deprecated in HTML 4.01 and was redefined to represent stylistically different text in HTML5. As a result, it is recommended to use CSS to indicate text that should be underlined. Since this article is a basic guide, we're keeping it simple.

Using subscript: _{He is a boy} comes out as _{He is a boy}

Using superscript: ^{He is a boy} comes out as ^{He is a boy}

For other tags that can be used to format, you might want to take a look at the glossary at the end of this resource where we have included plenty of relevant HTML tags.

Ordered and Unordered Lists

Sooner or later you will have to create lists. Lists could be ordered (i.e. numbered) or unordered (i.e. unnumbered).

Here is an example of an ordered list:

1. Item 1
2. Item 2
3. Item 3

Here is how to create it:

Here is an example of an unordered list:

• Item 1
• Item 2
• Item 3

Here is how to create it:

If it is not already obvious. Here's a breakdown:

The