Skip to main content

This is my blogs

harry bhai

By
  HTML Tutorial For Beginners In Hindi (With Notes) Chapter – 0 (Introduction)   HTML – Hyper Text Markup Language Html is the language of the web. It is used to create websites. We use HTML tags to define the look and feel of a website. With an understanding of these tags and How to put them together, we can create beautiful websites easily!   Then why CSS and JavaScript        HTML is used for defining the layout of a page – A barebone page structure.        CSS is used to add styling to that barebone page created using HTML.        JavaScript (JS) is used to program logic for the page layout. E.g. what happens when a user hovers on a text when to hide or show elements etc?   A Beautiful analogy HTML = Card body (only metal) CSS = Car paint, design, etc. JavaScript = Car engine + Interior logic   We will start learning how to build beautiful layouts in this course.   Installing VS Code We can use...
Post a Comment

harry bhai

Image
By

 

HTML Tutorial For Beginners In Hindi (With Notes)

Chapter – 0 (Introduction)

 

HTML – Hyper Text Markup Language

Html is the language of the web. It is used to create websites.

We use HTML tags to define the look and feel of a website.

With an understanding of these tags and How to put them together, we can create beautiful websites easily!

 
Then why CSS and JavaScript
  •       HTML is used for defining the layout of a page – A barebone page structure.
  •       CSS is used to add styling to that barebone page created using HTML.
  •       JavaScript (JS) is used to program logic for the page layout. E.g. what happens when a user hovers on a text when to hide or show elements etc?

 

A Beautiful analogy

HTML = Card body (only metal)

CSS = Car paint, design, etc.

JavaScript = Car engine + Interior logic

 

We will start learning how to build beautiful layouts in this course.

 

Installing VS Code

We can use any text editor of our choice. Here, I am using VS Code because it is lightweight, open-source & from Microsoft.

  •       Go to google, search for VS Code, download and install it.

NOTE: You can write HTML even in Notepad. Text editors like VS Code just makes things easier.

 

 

Chapter – 1 (Creating our first website)

 We start to build a website by creating a file named index.html, index.html is a special filename that is presented when the website root address is typed.

 

A Basic HTML Page

<!Doctype html> - Specifies this is an html5 document

<html> - root of an HTML page

<head> - Contains page metadata

<title> Harry’s Website </title>  - Contains title

</head>                                                   

<body> - Main body of the page (rendered by browser)

<h1> This is a heading </h1>  - heading tag

>p> My paragraph </p> - paragraph tag

</body> - closing body tag

</html> - closing html tag

 A tag is like a container for either content or other HTML tags.

Important Notes:

  •       Head & body tags are children of HTML tag.
  •       HTML is the parent of Head and Body tags.
  •       Most of the HTML elements have opening & closing tag with content in between opening and closing tags.
  •       Some HTML tags have no content. These are called Empty elements. For example, <br> tag
  •       We can either use .htm or .html extension to save our html code.
  •       You can use the “Inspect Element” or “View Page Source” option from chrome to look into a website’s HTML code.

 

HTML element = Start tag + Content + End tag

 

Comments in HTML

Comments in HTML are used to mark text which should not be parsed. They can help during documentation of the source code.

<!-- HTML Comment -->

 

Case Sensitivity

HTML is a case insensitive language. <H1> and <h1> tags are the same.

 

Chapter – 1 Practice Set

 

  1.   Inspect your favorite website and change something on the page which is displayed.
  2. Go to your favorite website and try to view the page source and write the exact lines of code. Does it clone the website? Why?
  3. Write any HTML code inside a text file. Does it work if you write it using notepad?

 

 

Chapter – 2 (Basic HTML Tags)

 

We can add elements inside the body tag to define the page layout.

 

HTML Element

Everything from starting to the ending tag

<body>    - Opening tag

-Content-

</body>   - Closing tag

 

HTML Attributes

Used to add more information corresponding to an HTML tag.

Example: <a href=”https://codewithharry.com/”> Harry’s Site </a>

<a = anchor tag

href is the attribute of above element

We can either use single or double quotes in attributes.

 

The Heading Tag

Heading tag is used to mark heading in HTML. From h1 to h6, we have tags for the most important to the least important heading.

<h1> Most important heading </h1>

<h2> Another heading H2 </h2>

<h3> Another heading H3 </h3>

<h4> Another heading H4 </h4>

<h5> Another heading H5 </h5>

<h6> Least important heading </h6>

Note: We should not use HTML headings to make text thick or bold.

 

The Paragraph Tag

Paragraph tags are used to add paragraphs to an HTML page.

<p> This is a paragraph </p>

 

The Anchor Tag

The Anchor tag is used to add links to existing content inside an HTML page.

<a href=”https://codewithharry.com/”> Click Me </a>

 

The img Tag

img tag is used to add images in an HTML page.

<img src=”image.jpeg”>

Note: In src attribute, we have to specify the relative path of the image.

 

Bold, italic and underline Tags

We can use bold, italic and underline tags to highlight the text as follows:

<b> This is bold </b>

<i> This is italic </i>

<u> This is underline </u>

 

br Tag

The br tag is used to create line breaks in an HTML document.

 

Big and small Tags

We can make the text a bit larger and a bit smaller using big and small tags respectively.

 

hr Tag

<hr> tag in HTML is used to create a horizontal ruler often used to separate the content.

 

Subscript and Superscript

We can add subscript and superscripts in HTML as follows:

<sub> this </sub> is subscript

<sup> this </sup> is superscript

 

pre Tag

HTML always ignores extra spaces and newlines. In order to display a piece of text as it is, we use pre tag

<pre>

       This        is written

       Using  pre

       Tag

</pre>

Note: Above text will get rendered as it is.

 

Chapter – 2 Practice Set

 

  1.   Create an HTML page with a heading (title heading), a primary heading, and a subheading.

Which tags did you use?

  1. Create a page with 5 wallpaper images taken from the internet
  2. Use br and hr tags to display a piece of text with line-breaks
  3. Try to write the following chemical equation using HTML

C + O2 -> CO2

  1. Try to write a Wikipedia article using HTML

 

 

Chapter – 3 (Creating a page layout)

 

When we use the right tag in right place, it results in a better page layout, better indexing by search engines, and better user experience.

We use the following tag to get the job done

<header>  #It contains nav tag (Navigation bar)

<main>

<footer>

Above tags are used for website layout

 

Inside the main tag we insert the following tags:

<main>                  #The main opening tag

<section>              #A page section

<article>               #A self-contained content

<aside>                 #Content aside from the content (e.g. Ads etc.)

</main>                #the main closing tag

 

Creating a page like this is not necessary but it creates a readable and structured layout. Also, they are useful for SEO.

 

Link attributes

<a href=”/contact”> Contact Us </a>         

#above tag will allow the contact page to open in same tab

 

<a href=”/contact” target=’_blank’> Contact Us <a>                 

#above tag will open contact page in new tab

 

We can put any content inside an anchor tag (images, headings, etc. are all allowed)

 

If the page is inside a directory, we need to make sure that we link to the correct page. [Same applies to img tag as well]

 

We can add links to images like this

<a href=”/about”><img src=”a.jpg” width=”120”></a>

[Height of image will be set automatically]

 

The Div tag

div tag is often used as a container for other elements.

div is a block-level element. [Always takes full width]

 

The span tag

span is an inline container. [Takes as much width as necessary]

 

Chapter – 3 Practice Set

 

  1.   Create an SEO friendly website using HTML
  2. Create an HTML page which opens google when clicked on an image
  3. Create a website which has your 5 top used websites bookmarked. The links should open in a new tab.

 

Chapter – 4 (Lists, Tables & Forms)

 

Lists

Lists are used to display content which represents a list

 

Unordered list: Used to list unordered items

<ul>

<li> Home </li>

<li> About </li>

.

.

</ul>

 

Ordered list: Used to list ordered items

<ol>

<li> Phone </li>

<li> PC </li>

<li> Laptop </li>

</ol>

 

Tables

The <table> tag is used to define tables in HTML.

It is used to format & display tabular data.

tr tag: used to display table row

td tag: used to display table data

th tag: used in place of table data for displaying table headers

We can define as many table rows as we want.

 

To add a caption to the table, we use <caption> tag inside the table.

thead tag: used to wrap table head (caption & tr with th)

tbody tag: used to wrap the table body

 

Colspan attribute

This attribute is used to create cells spanning multiple columns.

<th colspan=”3”> Harry </th> [Spans 3 columns]

 

HTML Forms

An HTML form is used to collect input from the user.

form tag is used for the same

<form>

-Element of the form-

</form>

There are different form elements for different kinds of user input.

  •       input element: Can be of type text, checkbox, radio, button and submit. We also have a ‘file’ type
  •       textarea element: Defines a multi-line text input. Cols and rows attributes can be used to size the textarea.
  •       select element: Defines a drop down list

Note: You don’t have to remember all the tags, you will automatically memorize them with practice.

 

Embedding Videos

Video tag is used to play videos in HTML

<video src=”harry.mp4”> Error </video>

 

Attributes for video

We can use:

  •       Width: To adjust width of a video (Height automatically adjusts)
  •       We can use autoplay/loop to autoplay or loop the video.

 

Chapter – 4 Practice Set

 

  1.   Create an HTML page with video embedded inside it.
  2. Replace the video in question-1 with a YouTube video.
  3. Create an HTML form for a travel website to book a vacation.
  4. Create a table displaying score of cricket players in a match using HTML.

 

 

Chapter – 5 (SEO)

 

We will focus only on HTML standpoint of SEO. We will not be looking into keyword building and content optimization aspect of SEO

 

Types of SEO

  •       On page SEO   [Can be done by HTML developers]
  •       Off page SEO

 

HTML SEO

HTML developers can implement SEO using the following techniques:

  1.   Set the title very nice & to the point
  2. Set the meta description

<meta name=”description” content=”………….”>

  1. Set a nice URL Slug
  2. Set the meta keyword tag
  3. Set the meta author tag

<meta name=”author” content=”Harry”>

  1. Set a favicon
  2. Compress images & other resources
  3. Remove unused HTML/CSS & JS files + Compress them
  4. Add alt text to images
Labels:

Comments

Post a Comment

If you have no doubt then comment here!

Popular posts from this blog

Learn MS-Access in this blog.

By
MS Access – Database Management System by Microsoft MS Access or Microsoft Access is a Database Management System (DBMS) by Microsoft. In Microsoft Access, Jet Database Engine is merged with the Graphical User Interface (GUI) and Software development tools. You can create customizable database applications using MS Access with many  built-in functions  like string, numeric, date, and information functions. MS Access 2016 is a part of the  MS Office  suite. Here we will learn the basics of MS Access and its design and implementation in context as an  accounting system . Let us get started.  Suggested Videos   Objectives of Business Levels of Management   MS Access – What is Microsoft Access? As we have learned before a Database Management System is software that helps its users store and effectively manage databases. It is a systematic system/software to create, store, manage, manipulate, retrieves, and update any kind of data.  One of the mai...
Post a Comment
Read more

Learn About MS-Office in shortly...

By
   1. -    What is MS-Office? -    It is a Microsoft Company developed application software.it's used for office work.       It is a very helpful software for men who work in a very big or small office. It did the office work very simply.  2.-   Its version.  -  It had many versions but the same best version is here.        1 MS-Office 2003     2 MS-Office 2007     3 MS-Office 2013 3.-  Its parts. -  It's 4 important parts.    These are here.   1 MS-Word   2 MS-Excel.   3 MS-Powerpoint.   4 MS-Access.                              ➤  1. Let's know about the MS-Word...     -    This is a very important application. It's used to give the user comfort. It is application software and its use only to  edit your letter, formatting differe...
Post a Comment
Read more

Learn About The MS-Powerpoint

By
 Microsoft PowerPoint is a presentation program,[7] created by Robert Gaskins and Dennis Austin[7] at a software company named Forethought, Inc.[7] It was released on April 20, 1987,[8] initially for Macintosh System Operating system based computers only.[7] Microsoft acquired PowerPoint for about $14 million three months after it appeared.[9] This was Microsoft's first significant acquisition,[10] and Microsoft set up a new business unit for PowerPoint in Silicon Valley where Forethought had been located.[10] PowerPoint became a component of the Microsoft Office suite, first offered in 1989 for Macintosh[11] and in 1990 for Windows,[12] which bundled several Microsoft apps. Beginning with PowerPoint 4.0 (1994), PowerPoint was integrated into Microsoft Office development and adopted shared common components and a converged user interface.[13] PowerPoint's market share was very small at first, prior to introducing a version for Microsoft Windows, but grew rapidly with the growth...
Post a Comment
Read more

Learn Microsoft Excel shortly.

By
Introduction to Microsoft Excel 101 What is Microsoft Excel? Microsoft Excel is a spreadsheet program that is used to record and analyze numerical data. Think of a spreadsheet as a collection of columns and rows that form a table. Alphabetical letters are usually assigned to columns and numbers are usually assigned to rows. The point where a column and a row meet is called a cell. The address of a cell is given by the letter representing the column and the number representing a row. Let's illustrate this using the following image. Why Should I Learn Microsoft Excel? We all deal with numbers in one way or the other. We all have daily expenses that we pay for from the monthly income that we earn. For one to spend wisely, they will need to know their income vs. expenditure. Microsoft Excel comes in handy when we want to record, analyze, and store such numeric data. Introduction to Microsoft Excel Where can I get Microsoft Excel? There are several ways in which you can get Microsoft Ex...
Post a Comment
Read more

Learn about MS-Word in shortly.

By
     1.- What is WS-Word? -  The WS-Word is application software. It's used to do office work easily.      It's used to change letter formatting, editing text, editing text style & It had many  options for doing office work easily.  there are two ways to open the WS-Word on the computer.                                        these are here below.                                                                                        This is the first way to open WS-Word.     1. go to the  "Start Menu " on the computer.     2. Now go to the " All Program " on the computer.     3. Now go...
Post a Comment
Read more