Introduction to HTML

Introduction to HTML

0%

1. Basics Introduction

The main goal of HTML is to make webpages traversable like a tree where every piece of content is wrapped in its meaningful container.

Nesting Elements and Comments

Anatomy of an HTML Document

2. Basic Elements

Now that we have gone over the basic understanding of HTML documents, the mandatory structure they should have, and how tags and attributes work. We will move on to some important elements used in a typical HTML page.

Emphasis and Bold

3. Metadata and the Head Element

Now that we have gone over the basics of HTML about commonly used elements and how the attributes are used. We will now move on to another important part of an HTML document that isn't mostly displayed on the web page but is a metadata container, which is the head tag.

Social Network Metadata

CSS and Javascript

4. Advanced Text Formatting Elements

By the end of this section, participants will have a solid understanding of these HTML concepts and be able to apply them to create well-structured and formatted web pages.

Code Markup in HTML

Miscellaneous Elements

Non-Semantic Wrappers

5. Advanced Concepts

So now that we have a good grip on most of the basic topics of HTML along with familiarity with basic text elements, now, we will move on to somewhat advanced topics which cover things necessary for developing any starter web page, be it a portfolio or a full-fledged e-commerce store.

ID and Class Attribute

Responsive Images

Course Content

Introduction to HTML

Introduction to HTML

1. Basics Introduction

What is HTML?Elements Attributes Nesting Elements and Comments Anatomy of an HTML Document

2. Basic Elements

Headings Paragraphs Emphasis and Bold Image Details Links Lists Nested Lists

3. Metadata and the Head Element

Adding a Title Social Network Metadata Custom Icons CSS and Javascript

4. Advanced Text Formatting Elements

Quotes Abbreviations Code Markup in HTML Miscellaneous Elements Entities Non-Semantic Wrappers

5. Advanced Concepts

Table Element ID and Class Attribute Forms Basics Form Fields Responsive Images Video Audio

Nesting Elements and Comments

Block-level Elements

Block-level elements are those that, when used in an HTML code, is displayed by the browser on another line, and they have a certain margin around them that separates them from other elements around them.

index

index

index

Inline Elements

Inline elements don't start on a new line and don't have any margin around them.

index

index

index

Note
span is an inline markup element holding no specific meaning in the markup but used as a convenient representation of any inline area that you want specifically styled or behave differently.

Nesting Elements

As shown in the above example of inline elements, the element span is nested within the p element. Some elements can be added to other elements.

Both block and inline elements can be nested inside block elements;
Inline element can be nested inside the block and inline element;
Block element cannot be nested inside an inline element.

Comments

Comments help record what is happening in the code. This can be useful when you look at your code after some time. Also, it's helpful for another developer to know what happens with each code block when he inspects your code.

index

index

index

<b> is an inline element used to bolden part of the text in the document;
<em> is an inline element used to emphasize part of the text in the document.

Task

Add tags needed.
Add your name.
Bold and italicize text.

Everything was clear?

Section 1. Chapter 4

some-alt