Tuesday, April 2, 2019

HTML: Basics Part-III

HTML ,
HTML: Basics Part-III

HTML: Basics  Part-III 

HTML Headings

These tags help us to give headings to the content of a webpage. These tags are mainly written inside the body tag. HTML provides us with six heading tags from <h1> to <h6>. Every tag displays the heading in a different style and font size. <h1> defines the most important heading. <h6> defines the least important heading.
Example:
<html>
<head>
                    <title> SumProgs </title>
</head>
<body>
          <h1> Hello SumProgs </h1>
          <h2> Hello SumProgs </h2>
          <h3> Hello SumProgs </h3>
          <h4> Hello SumProgs </h4>
          <h5> Hello SumProgs </h5>
          <h6> Hello SumProgs </h6>
</body>
</html>

Output:









HTML Paragraph
These tags help us to write paragraph statements in a webpage. They start with the <p> tag and ends with </p>. Here the <br> tag is used to break line and acts as a carriage return. <br> is an empty tag.
Example:
<html>
<head>
                    <title> SumProgs </title>
</head>
<body>
          <h1> Hello SumProgs </h1>
          <p>
                   An online portal for all future programmers <br />
                   An online portal for all future programmers <br />
                   An online portal for all future programmers <br />
          </p>
</body>
</html>

Output:




HTML Horizontal Lines
The <hr> tag is used to break the page into various parts, creating horizontal margins with help of a horizontal line running from left to right hand side of the page. This is also an empty tag and doesn’t take any additional statements.
Example:
<html>
<head>
                    <title> SumProgs </title>
</head>
<body>
          <h1> Hello SumProgs </h1>
          <p>
                   An online portal for all future programmers <br />
                   An online portal for all future programmers <br />
                   An online portal for all future programmers <br />
          </p>
          <hr />
<p>
                   An online portal for all future programmers <br />
                   An online portal for all future programmers <br />
                   An online portal for all future programmers <br />
          </p>
          <hr />
          <p>
                   An online portal for all future programmers <br />
                   An online portal for all future programmers <br />
                   An online portal for all future programmers <br />
          </p>
          <hr />
</body>
</html>

Output:

Read more »
By at No comments:
Labels:

Thursday, March 28, 2019

HTML: Basics Part-II

HTML ,
HTML: Basics Part-II

HTML: Basics  Part-II

Basic HTML Document

Below mentioned are the basic HTML tags which divides the whole document into various parts like head, body etc.
·         Every HTML document begins with a HTML document tag. Although this is not mandatory but it is a good convention to start the document with this below mentioned tag:
<!DOCTYPE html>
·         <html> : Every HTML code must be enclosed between basic HTML tags. It begins with <html> and ends with </html> tag.
·         <head> : The head tag comes next which contains all the header information of the web page or document like the title of the page and other miscellaneous information. These information are enclosed within head tag which opens with <head> and ends with </head>. The contents of this tag will be explained in the later posts of the course.
·         <title> : We can mention the title of a web page using the <title> tag. This is the header information and hence mentioned within the head tags. The tag begins with <title>and ends with </title>
·         <body> : Next step is the most important of all the tags we have learned so far. The body tag contains the actual body of the page which will be visible to all the users. This opens with <body> and ends with </body>. Every content enclosed within this tag will be shown on the web page, it can be writings or images or audios or videos or even links. We will see later in the upcoming posts how using various tags we may insert mentioned contents into our web pages.

The whole pattern of the code will look something like this:
<!DOCTYPE html>
<html>
<head>
                   <!-- Information about the page -->
                   <!--This is the comment tag-->
                    <title> SumProgs </title>
</head>
<body>
                   <!--Contents of the webpage-->
</body>
</html>
This code won’t display anything. It just shows the basic pattern of how to write the HTML code and will name the title of the page as SumProgs.

<! – – comment here – – > is the comment tag in HTML and HTML doesn’t reads the line present inside this tag. This tag is used for increasing the readability of code and for easy debugging.

In the upcoming post, the last part of the topic HTML: Basic, I would cover the basic writings tags that will be shown on the web page.
Read more »
By at No comments:
Labels:

HTML: Basics Part-I

HTML ,
HTML: Basics Part-I

HTML: Basics  Part-I


In this post, we will go through all the basic stuff of HTML coding. There are various tags that we must consider and include while starting to code in HTML. These tags help in organizing the basic formatting of elements in our script or web pages. These step by step procedures will guide you through the process of writing HTML.
Before mentioning the basics of HTML, you must familiar with the term HTML elements. Let’s understand this first:

HTML Element

An HTML Element usually consists of a start tag and end tag, with the content inserted in between:
<tagname> Content goes here… </tagname>
The HTML element is everything from the start tag to the end tag:
<p> This is a paragraph. </p>
HTML element with no content are called Empty elements. Empty elements do not have an end tag such as the <br> element (which indicates a line break).

Do Not Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag:
<html>
<body>
<p> This is a paragraph.
<p> This is a paragraph.
</body>
</html>
The example above works in all browsers, because the closing tag is considered optional.
Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.

Empty HTML Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break):
<p> This is a <br> paragraph with a line break. </p>
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.

Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but I would recommend using lowercase tags in HTML.

For better understand-ability of the topic HTML: Basics, I have divided this in three important posts. The next two posts will be up to you in upcoming days. Sorry for your inconvenience, pleas e go through them too.

Read more »
By at No comments:
Labels:

Saturday, March 23, 2019

HTML: Editor

HTML ,
HTML: Editor

HTML: Editor

       HTML text editors are used to create and modify web pages. HTML codes can be written in any text editors including the notepad. One just needs to write HTML in any text editor and save the file with an extension “.html” or “.htm”.

Some of the popular HTML text editors are given below:
·        Notepad: Notepad is a simple text editor. It is an inbuilt desktop application available in Windows OS.
·        TextEdit: TextEdit is also a simple text editor. It is an inbuilt application available in MAC.
·        Notepad++: Notepad++ is a text editor and source code editor. It supports tabbed editing, which allows working with multiple open files in a single window.
·        Brackets: Bracket is open-source software primarily used for Web development. It provides live HTML, CSS, JavaScript editing functionality.
·        Sublime Text 3: Sublime is a cross platform code editor tool. It supports all markup languages.
·        Atom: Atom is an open source code editor tool for MAC, Linux and Windows.

Steps to write HTML code in Editor

Follow the five steps below to create your first web page:
1.    Open any of the text editors of your choice. Here, we are using the notepad text editor.
2.    Create new file: File->New File or Ctrl+N.
3.    Write HTML code in text editor.
4.    Save the file with a suitable name of your choice with either .htm or  .html (There is no difference, it is upto you).
5.    Open the saved HTML file in your favorite browser (double clicks on the file, or right-click – and choose “Open with”).

The result will look much like this:
Read more »
By at No comments:
Labels:

Thursday, March 14, 2019

HTML: Page Structure

HTML ,
HTML: Page Structure
HTML: Page Structure
The Basic structure of HTML page is given below. It contain some elements like head, title, body, … etc. These elements are used to build the blocks of web pages.
<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be used inside the <head> element are:
·         <title>: Defines the title for your document.
·         <meta>: Describe metadata (information about data) in a document.
·         <base>: Specifies the base URL/target for all relative URLs in a document.
·         <style>: Defines the style information for an HTML document.
·         <link>: Defines a link between a document and an external style sheet.
·         <script>: Define a client-side script (JavaScript).
·         <noscript>: Defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.
<body>: Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.

Example: HTML page can be created using any text editor (notepad). Then save that file using .htm or .html extension and open that file in browser. It will get the HTML page response.

<!DOCTYPE html>
<html>
    <head>
          <title>Demo Webpage</title>
          <style>
                   h1 {
                             color: blue;
                             font-size: 46px;
                             margin-left: 30px; 
                         }
                   p {
                             font-size: 17px;
                             margin-top: -25px;
                             margin-left: 15px;
                      }
          </style>
    </head>
    <body>
          <h1>SumProgs</h1>
          <p>A online portal for all programmers.</p>
    </body>
</html>        


Output:






Don't worry about what the code means yet. We start to look at it in more detail on the coming posts so stay tuned. 
Read more »
By at No comments:
Labels: