#6 HTML Paragraphs

The <p> tags define a paragraph in HTML.

A paragraph always starts on a new line, and browsers automatically add some margin before and after a paragraph.

The content of paragraph written inside the <p>..</p> tag.

example :

<p>This is a simple paragraph contains 

       many lines and browsers automatically add some margin before and after          this  paragraph.



     the browser ignores the spaces                  and a line break      and display the content
  like a simple paragraph......
</p>

Other important tags which helps in writing a text content:-

• <pre> tag - It defines preformatted text.  Inside this  tags the text                              formatted same will be displayed on browser..

       Example :-

      <pre>

               This is an example of pre tag.

              It defines preformatted text.

             Hello,

                     welcome to this blog !!!

                    thanks to visit this blog ....😊

     </pre>

• <br> tag - defines a line break. Using <br> we can break a line without                      using new paragraph (<p> tag).  <br> is empty HTML element                  that doesn't contain end tag....

       Example:-

                    

                      <p> This is an example of <br> br-tag </p>

============================================================

Codepen link is here:- 🔗https://codepen.io/arwazkhan189/pen/NWxaPW

Next we will learn HTML Text Formatting..........😊

Keep learning !!!

#5 HTML Headings

HTML Headings are the titles or subtitles that you want to display on screen.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1 (main heading) to the least level h6 (least important heading).
Examples :-

<h1>Heading 1</h1>                  Heading 1

<h2>Heading 2</h2>                  Heading 2

<h3>Heading 3</h3>                                                        Heading 3

<h4>Heading 4</h4>                                                                       Heading 4

<h5>Heading 5</h5>                                                                                               Heading 5

<h6>Heading 6</h6>                                                                                                                               Heading 6

Codepen link is here:- 🔗https://codepen.io/arwazkhan189/pen/yLeMRQm 

Previous codepen links:-

• A simple HTML Document :- 🔗 https://codepen.io/arwazkhan189/pen/bGEqmJz

Next we will going to learn About HTML Paragraphs ....... addio 😁

Quick Tips #2: CodePen - a Online Code editor

Hello , guys !!! 

CodePen is a online Code editor where you can code and check the output instantly ...
here the link 🔗https://codepen.io/

or you can follow me because i am uploading all the html codes of this blog in the CodePen 
here's the link 🔗https://codepen.io/arwazkhan189

________________________________________________________________

#4 HTML Attributes

HTML attributes are special words used inside the opening tag to control the element's behaviour ...

Important points:

• Attributes are always specified in the start tag .. i.e. <a href='https://wdforbeginner.blogspot.com/' >.....</a> here href is a attribute.
• Attributes usually comes in name/value pairs like: name="value" 
• Attributes provide more information about elements ....

Examples 

• href attribute - specifies the URL of the page.                                        eg.<a href='https://wdforbeginner.blogspot.com/'>Web Development for Beginner</a>                                                    here <a> is anchor tag.If some one's click on the text he/she go to the link..
• src attribute- specifies the path of a file .                                            eg. <img src="image.jpg"/>                                                          here <img > is a image tag. it loads the image 
• width and height attributes -  eg. <img src='image.jpg' width='200' height='100'>    (specifies width and height in pixels )
• alt attributes - alt attributes is always use with <img> tag that specifies alternate text for an image , if the images not shown due to some error..    eg. <img src='image.jpg' alt='image of a boy'/>  
• style attribute - style attributes is used to add styles to an element ,such as color , background color,font ,size , and more ...                                    eg. <p style="background-color:grey;font-size:10px;">Hello world!</p> 

Like tags ,we can't remember all the attributes at once but we will go through all the possible attributes in this blog ...

here's the list of attributes in HTML ,go through the below link

🔗  https://en.wikipedia.org/wiki/List_of_system_quality_attributes

Next we will learn about HTML Headings....So if you have any doubt comment below..

and share this blog ,follow and subscribe for more updates.....

Quick Tips #1:Setup Your Environment

Don't know How to start ?🤔💭 ,Don't worry i am here to solve your problem and i am Batman 🦇 (just kidding 😁i am Arwaz Khan)...

Follow the below steps to setup your environment:

Step 1: Download a browser

boo! , this step is not for you (yes you!) .. Chrome is always available for you...   (Other browser also available like Safari, Firefox .....)

Step 2: Download a Code editor

You can download any code editor like Visual Studio , VS Code , Sublime text editor , Atom , Notepad++ and many more Code editor available in internet.But, i prefer VS Code editor because it is a free source-code editor  and supported by many OS like windows , mac , Linux ...Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git  ... 

  Download link  VS Code👇👇👇 (Download Community version) 
🔗https://az764295.vo.msecnd.net/stable/a5d1cc28bb5da32ec67e86cc50f84c67cc690321/VSCodeUserSetup-x64-1.46.0.exe
   
                    or download latest version from below link
                                 🔗https://code.visualstudio.com/download

Step 3: Install VS Code 

After downloading , run the setup and just click next , next ... and click ☑  (checkbox) open with code or after installation you can use below method..

Step 4: Setup Environment 

Create a folder and right Click on window and click on open VS Code ..

Now Create a new file and save with .html extension (eg. file.html  <filename>.html)

Step 5: Installing Required Extension

                                           Click on this icon

                                                        or 
      
                    press Ctrl+Shift+X  for  installing extension.
Install following extension:

• HTML CSS Support
• HTML Snippets
• Live Server 
• IntelliSense for CSS class names in HTML
• ESLint

Ok, i Setup my Environment.. Go and Setup Your Environment..

Please Comment below if you have any doubt regarding this .... 

#3 HTML ELEMENTS

Bonjour !😁 (Hello in French Language ....)

Let's learn more about HTML elements..

Nested HTML Elements

HTML allow us to keep one HTML element inside another HTML element.

 Ex.

<!DOCTYPE html>

<html>
<body>

<h1>First Heading</h1>
<p>first paragraph.</p>
</body>
</html>

Important Points:- 

• HTML is not case sensitive i.e. <A> is same as <a>  ,but it is good practice to use lowercase . 
• Never forget to put End tag (eg. <a>.....</a>) unexpected result and errors occurs if you forget the end tag....(Like little-bit IOC 🧪 exception is also here 😀  i.e. Empty HTML Elements)
•  Empty HTML Elements , Tags with starting tag but not with end tag. Eg.  <br> , <input> , <img> , <meta>, <link> , <area>,<col>,<hr> and more...... (Google it !!😅 i don't remember all the tags..)  
• Go through the link for more tags https://en.wikipedia.org/wiki/Category:HTML_tags   you can't remember all the tags at once or you  need not to remember all the tags .... just practice more and more and we will go through all the necessary tags..
• Remember a HTML file starts with <!Doctype html><html> and ends with </html>  .. and the content to be display should be written inside body tag..i.e.  <body>...........</body>.

Next we will going to learn Attributes ....... addio 😁 (bye in italian )

*IOC -Inorganic Chemistry

#2 HTML INTRODUCTION

HTML is the standard markup language for Web pages.With HTML you can create your own Website. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content

This blog follows the latest HTML 5 standard.

HTML is easy to learn - You will enjoy it!😀😀😀

A Simple HTML Document

<!DOCTYPE html>             

After saving the file with .html extension

  <html>
    <head>
      <title>Page Title</title>
    </head>
    <body>
      <h1>First Heading</h1>
      <p>first paragraph.</p>
    </body>
  </html>

This will look like on Browser...

• <!DOCTYPE html>declaration defines that this document is an HTML5 document
• <html> element is the root element of an HTML page
• <head> element contains meta information about the HTML page
• <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
• <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• <h1> element defines a large heading
• <p> element defines a paragraph

What is HTML Element ?

An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag.

Some examples are:

•    <p>.......</p>
•   <h1>......</h1>
•  <div>.....</div>

There are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> elements.

Next we are going to learn more about HTML Element .....  😊

#1 What is Web Development?

Web development refers to building, creating, and an maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management.

Websites are created using a markup language called HTML. Web designers build web-page using HTML tags that define the content and metadata of each page. The layout and appearance of the elements within a web-page are typically defined using CSS, or cascading style sheets. Therefore, most websites include a combination of HTML and CSS that defines how each page will appear in a browser.

What We are going to learn in this Blog?

 The following things we are going to learn from basic to advance:

• HTML - Hyper Text Markup Language
• CSS - Cascading Style Sheet
• JavaScript
• Bootstrap
• Advanced Styling with Responsive Design

So are you ready for next post ? .....
 we start with HTML basics .......

NotificationsAdvanced Styling with Responsi