COMPUTER-PDF.COM

HTML and HTML5 tutorial for beginners

Don't try to memorize anything. Try to do it yourself where I will show you how to do it. Learning HTML is impossible without practice.

What is HTML?

HTML is a web language used to create web pages. The text you are reading now is made with HTML. HTML is also needed to create the Facebook you use. The equivalent of HTML: Hypertext Markup Language. No need to memorize what the HTML equivalent is. To understand HTML, imagine what a newspaper looks like.

The picture above is a newspaper picture. Note that the contents of the newspaper are arranged according to a rule. The headers are slightly larger and bolted. Detailed news written in short. The entire newspaper is divided into 2 columns. The right-side column is again divided into two more columns and these 2 columns have text on the left and image on the right. This way you can extract many parts of the entire newspaper. Now, if you want to display this newspaper on the web, you need to take the help of HTML. The elements of HTML used to create each part of a newspaper are called tags. The tag looks like below:

Here start means but not actually start. Suppose you write a sentence: I am bold, and you want this text to appear in bold as follows: I am bold

To do this, HTML has a tag called b, here the tag is created with the first letter of the word bold. That is, start will be replaced by b and the tag should be seen: . Now I am bold This text will become bold if you write it between and . That is, the text with tags should look like below:

I am bold

In this part you learned: What is HTML? What is HTML tag or short tag? It is said that knowing HTML tags is enough to learn HTML. really so You've seen how text can be bolded using the tag. Now you just need to know the remaining tags. Usage is exactly like the tag. Many go to memorize all the tags. This is very wrong. I will demonstrate the use of tags with examples throughout my course. Before that, in the next part we will see how HTML works, i.e., why any text between is bolded.

It is better to say, I have given the example of newspaper to understand HTML, it does not mean that only newspaper-like structure can be created with HTML. Any type of structure can be created with HTML.

How HTML Works

We have seen how to change a text by writing html tags. Now we will know how this works i.e. how HTML works.

There is a thing called HTML Parser to process the HTML code we write. Where is this HTML Parser? It's in every browser. We have filmed a bit to make the whole thing easier to understand. All the web sites we see we see with some browser or app. HTML Parser comes with that browser and app. The HTML Parser parses the HTML code before it's visible to your eyes. For example: I am bold To understand how this HTML code catches your eye as I am bold, we have filmed it as follows: HTML tags

HTML is a collection of tags. An HTML document is made up of many tags. That's why HTML is sometimes called tag language. In the basic discussion of HTML, an idea about HTML tag has been given. Now HTML tags will be discussed in sequence.

Types of HTML tags

There are 2 types of HTML tags.

  1. paired tag
  2. unpaired tag

Paired tag: Those tags which have two parts are called paired tag. For example: tag is a paired tag. Because it has two parts, the first part is: and the last part is:
Unpaired tag: Those tags which have only one part are called unpaired tag. For example: tag is an unpaired tag. The tag has nothing to say. A tag consisting of only one part is called unpaired tag or unpaired tag.

HTML Attribute

HTML tags contain attributes. attribute is used to add different properties to an HTML element. Two parts of attribute:

  1. attribute name
  2. attribute value

It is written as follows:

attribute 

name = “attribute value”

For example, there is an attribute called id and the value of this attribute can be anything. For ease of understanding, take the value of attribute: abc. Then the attribute will look like below:

id = “abc”

The attribute is written inside the tag. In the case of paired tag, the attribute is written inside the tag of the first part. For example, if you want to add the id =”bold” attribute to I am bold, do the following:

I am bold

If you want to add the id=”profile_pic” attribute to the do the following:

Creating web page structure with HTML

Let's use what we've learned so far to create a basic structure of what a web page looks like today. Remember what a tag looks like? . The HTML tag here should be used to replace start. Consider, a tag in HTML is named: Mango. The tag will then be . There is no tag called Mango, just a fun attempt to get your head around what a tag looks like. Note one more thing, each tag has 2 parts. For example: is the first part, it is called the opening tag. Again is the second part. It is a closing tag. The primary structure of a web page consists of 3 tags. There are three tags: tag, tag and tag. The head tag and body tag are placed inside the html tag. One more line should be written at the very beginning with these three tags. The line is:. That is, the structure of an HTML web page looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>

Here line implies: DOCUMENT TYPE of whatever is going to be written here is: html.

Related tutorials

HTML5 Canvas: Drawing and Animation Basics

HTML5 Semantic Elements: A Closer Look

HTML 101: The Ultimate Beginner's Guide to Building Websites

Understanding HTML Document Structure: Beginner's Guide

HTML Headings, Text Formatting, and Lists: Beginners Guide

HTML and HTML5 tutorial for beginners online learning

A Guide to HTML5 and CSS3

Download free A Guide to HTML5 and CSS3 course material tutorial training, PDF file by Ashley Menhennett, Pablo Farias Navarro.


HTML5 Notes for Professionals book

Download free course HTML5 Notes for Professionals book, pdf ebook tutorials on 124 by GoalKicker.com.


HTML5 Canvas Notes for Professionals book

Download free course HTML5 Canvas Notes for Professionals book, pdf ebook tutorials on 180 pages by GoalKicker.com.


HTML a Crash Course

Download free HTML a crach course material and training (PDF file 41 pages)


Carnival of HTML

Learn HTML with the free Carnival of HTML PDF ebook tutorial. Ideal for beginners, covers all basics in simple language. Download & start learning.


Learning HTML

Download free ebook Learning HTML for web development, PDF course and tutorials extracted from Stack Overflow Documentation.


HTML, CSS, Bootstrap, Javascript and jQuery

Download free tutorial HTML, CSS, Bootstrap, Javascript and jQuery, pdf course in 72 pages by Meher Krishna Patel.


Building an E-Commerce Website with Bootstrap

In this chapter, we will create an e-commerce website that will help you get to grips with web designing using Bootstrap.


Creating a website using Dreamweaver MX

The aim of this course is to enable you to create a simple but well designed website to XHTML standards using Dreamweaver MX. PDF file by university bristol.


Access 2016 - Reports & Queries

Download free Microsoft Access 2016 - Reports & Queries, course tutorial, training, PDF file made by Kennesaw State University.


Adobe Captivate 9 - Quizzes

Download free Adobe Captivate 9 - Quizzes, course tutorial, training, PDF file made by KSU Division of University Information Technology Services.


Front-end Developer Handbook 2018

Download Front-end Developer Handbook 2018 ebook, client-side development with client-side development is the practice of producing HTML, CSS and JavaScript. free PDF on 168 pages.


Access 2016 - Relational Databases & Subforms

Download free Microsoft Access 2016 - Relational Databases & Subforms, course tutorial training, PDF file made by Kennesaw State University.


Uploading files to a web server using SSH

You are strongly recommended to use SSH Secure Shell Client for connecting interactively and for file transfer whenever possible. PDF file.


Windows 8 Essentials

Download free Windows 8 Essentials course material and tutorial training, PDF file on 54 pages.


Easy Web Design

Download Tutorial Easy Web Design Creating basic web pages with Netscape Composer/SeaMonkey, free PDF ebook.


JavaScript Front-End Web App Tutorial Part 2

Learn how to build a front-end web application with responsive constraint validation using plain JavaScript, PDF file by Gerd Wagner .


Basic HTML elements: Quick Reference

This document is intended to be used in conjunction with Introduction to web page creation in XHTML (document web-t3) and can also be used as a quick reference guide


CSS Crash Course

Download free CSS Crash Course material and training written by Daniel D'Agostino (PDF file 40 pages)


PHP Programming

Download free PHP Programming language for dynamic web course material and training (PDF file 70 pages)


ASP.NET Web Programming

Download free ASP.NET a framework for creating web sites, apps and services with HTML, CSS and JavaScript. PDF file


Creating web pages in XHTML

Download free Creating standards-compliant web pages in XHTML course material and training (PDF file 36 pages)


PHP Crash Course

In this book, you’ll learn how to use PHP by working through lots of real-world examples taken from our experiences building real websites. PDF file.


Introduction to jQuery

Download free Introduction to jQuery, javascript course material and training, PDF file by Girl Develop It


ASP.NET and Web Programming

ASP.NET is a framework for creating web sites, apps and services with HTML, CSS and JavaScript. PDF course.


Building a mobile application using the Ionic framework

Download free tutorial Building a mobile application using the Ionic framework, free PDF course on 49 pages.


Responsive Web Design

Download free CSS3 Responsive Web Design With fluid grids for desktop, tablet and mobile course material, tutorial training, a PDF file by Tim Davison.


Tangelo Web Framework Documentation

Tangelo is a web application driver, implemented as a special-purpose webserver built on top of CherryPy. PDF file by Kitware, Inc.


Basic CSS

Download free pdf course on Basic CSS (cascading style sheet) concepts, training and tutorial


The Ultimate Guide to Google Sheets

Download free ebook The Ultimate Guide to Google Sheets, everything you need to build powerful spreadsheet workflows in Google Sheets.