HTML
SVG

The <svg element is a container which is used to define a new coordinate system and viewport.

SVG Breakdown

Here is the breakdown of HTML SVG

SVG Circle

Example by Code


<!doctype html>  
<html>
    <head>
        <title>SVG Circle</title>
    </head>

    <body>
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="#212529" stroke-width="5" fill="#f5f2f0" />
        </svg>
    </body>
</html>

SVG Rectangle

Example by Code

Copy Code


<!doctype html>  
<html>
    <head>
        <title>SVG Rectangle</title>
    </head>

    <body>
        <svg width="200" height="100">
            <rect width="200" height="100" style="fill:#f5f2f0;stroke-width:10;stroke:#212529" />
        </svg>
    </body>
</html>

SVG Rounded Rectangle

Example by Code

Copy Code


<!doctype html>  
<html>
    <head>
        <title>SVG Rounded Rectangle</title>
    </head>

    <body>
        <svg width="400" height="180">
            <rect x="50" y="20" rx="20" ry="20" width="110" height="110” style="fill:#f5f2f0;stroke:#212529;stroke-width:5;opacity:0.5" />
        </svg>
    </body>
</html>

SVG Star

Example by Code

Copy Code


<!doctype html>  
<html>
    <head>
        <title>SVG Star</title>
    </head>

    <body>
        <svg width="300" height="200">
            <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:#f5f2f0;stroke:#212529;stroke-width:5;fill-rule:evenodd;" />
        </svg>
    </body>
</html>

HTML
Span

<span> tag provides an additional structure to HTML document. It is used to group and apply styles to inline elements.

Span Breakdown

Here is the breakdown of HTML Span.

Span Example

Below example will demonstrate the basic architecture of HTML Span.

Copy Code


<!doctype html>  
<html>
 
    <head> 
        <title>Span Example</title> 
    </head>
  
    <body> 
        <span>You can learn programming languages from PHPDocs.</span>
    </body>

</html>

HTML
Blockquote

The blockquote element is used to indicate the quotation of a large section of text from another source.

Browsers generally render blockquote text as indented text.

Blockquote Breakdown

Here is the breakdown of HTML Blockquote

Blockquote Example

Below example will demonstrate the basic architecture of HTML Blockquote.

Copy Code


<!doctype html>  
<html>
 
    <head> 
        <title>HTML Blockquote Example</title> 
    </head>
  
    <body> 
        <blockquote>
            Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.
        </blockquote>
    </body>

</html>

HTML
Paragraphs

Paragraphs are used to add text to a document in such a way that it will automatically adjust the end of line to suit the window size of the browser.

HTML automatically adds an extra blank line before and after a paragraph.

Paragraph Breakdown

Here is the breakdown of HTML Paragraph.

Paragraph Example

Below example will demonstrate the basic architecture of HTML Paragraph.

Copy Code


<!doctype html>  
<html>
 
    <head> 
        <title>Paragraph Example</title> 
    </head>
  
    <body> 
        <p>You can learn programming languages from PHPDocs.</p>
    </body>

</html>

HTML
List

HTML can display different items in the form of lists. Lists are used to present text in more readable form.

List Breakdown

Here is the breakdown of HTML List

Ordered List

An ordered list is a list of items in which each item is marked with a number or letter. Ordered list is also known as numbered list.

<ol> tag creates an ordered list and <li> tag is used with each item in the list.

Example

Copy Code


<!doctype html>  
<html>
  <head> 
      <title>Ordered List</title> 
  </head>
  
  <body> 
      <h3>Initial Web Development includes the languages:</h3>
      <ol>
          <li>HTML</li>
          <li>CSS</li>
      </ol>
  </body>
</html>

Unordered List

An unordered list is a list of items in which each item is marked with a symbol. Unordered list is also known as unnumbered list.

<ul> tag creates an unordered list and <li> tag is used with each item in the list.

Example

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Unordered List</title> 
    </head>
  
    <body> 
        <h3>Initial Web Development includes the languages:</h3>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </body>
</html>

HTML
Links

Links are a significant part of HTML, which are used to define a relationship between two resources on the web. In general, these links, jointly with browsers’ functionalities, enable users to move from one document to another in a direct way.

There are two major ways of performing Links in HTML.

The ‘a’ Element / Hyperlink / Anchor Text
The Link Element / Link Tag

Hyperlink

A hyperlink is an element in a hypertext markup language (HTML) document that links to either another portion of the document or to a different document altogether.

Browsers highlight the content of this element as blue and underlined and permit users to follow the link with a click.

Basic syntax of hyperlink:

Copy Code


<a href="url">Link Text</a>

Hyperlink Breakdown:

Following are some types of links.

Local: A page on the same server or directory

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Local Link</title> 
    </head>
  
    <body> 
        <p>This is my <a href="my-profile-picture">Profile Picture</a>.</p>
    </body>
</html>

Internal: A section on the present page or document

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Internal Link</title> 
    </head>
  
    <body> 
        <h3 id="C5">Chapter 5</h3>
        <a href="#C5">Jump to Chapter 5</a>
        OR
        <a href="html_demo.html#C5">Jump to Chapter 5</a>
    </body>
</html>

External: A page or website on a different server or directory

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>External Link</title> 
    </head>
  
    <body> 
        <p><a href="https://phpdocs.com/html">Learn HTML from </a>PHPDocs</p>
    </body>
</html>

Image: Use image as link

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Image Link</title> 
    </head>
  
    <body> 
        <p>This image is a link. You can click on it.</p>
        <a href="html-homepage.html">
            <img src="https://www.lvsys.com/pub/photo/thumb/512px-HTML5-logo.svg_fitbox_700x700.png" alt="HTML 5 Logo">
        </a>
    </body>
</html>

Email: Opens the visitor’s e-mail program

Copy Code


<!doctype html>  
<html>
    <head> 
        <title>Email Link</title> 
    </head>
  
    <body> 
        <a href="mailto:xyz@gmail.com">E-mail me!</a>
    </body>
</html>

Link Tag

The <link> tag is employed to outline a relationship between a HTML document and an external resource. This element is most commonly used to define the relationship between a document and one or a lot of external CSS stylesheets.

Basic syntax of Link tag:

Copy Code


<link rel="stylesheet" type="text/css" href="theme.css">

Link Tag Breakdown:

Link Tag Example:

Copy Code


<!doctype html>  
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
  
    <body>
        <p>I am formatted with a linked style sheet</p>
        <p>Me too!</p>
    </body>
</html>

HTML
Line Break

<Line Break> tag provides an additional structure to HTML document. It is used to group and apply styles to inline elements.

Line Break Example

Below example will demonstrate the basic architecture of HTML Line Break.

Copy Code


<!doctype html>  
<html>
 
    <head> 
        <title>Line Break</title> 
    </head>
  
    <body> 
        Section One. <br>
        Section Two
    </body>

</html>

HTML
Layout

Webpage layout is the part of designing that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.

Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but it can be created using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

Layout Example

Most modern websites and blogs consist of a header, footer, navbar, perhaps another sidebar, and the main content area. Something like this:

Above layout can be marked up as follows:

Copy Code



<header>Header</header>

<aside>Sidebar</aside>

<div>Content</div>

<footer>Footer</footer>

Example with Code

Copy Code


<!doctype html>  
<html>

    <head>
        <style>
            body{
                font-family: Segoe UI;
            }

            section {
                width: 80%;
                margin: auto;
            }

            header {
                background-color:black;
                color:white;
                text-align:center;
                padding:5px;   
            }
            aside {
                line-height:30px;
                background-color:#eeeeee;
                height:300px;
                width:173px;
                float:left;
                padding:5px;        
            }

            li{
                list-style: none;
            }
            .content {
                width:350px;
                float:left;
                padding: 0 0 0 30px;     
            }
            footer {
                background-color:black;
                color:white;
                clear:both;
                text-align:center;
                padding:5px;     
            }
        </style>
    </head>

    <body>
        <section>
                
            <header>
                <h1>Header</h1>
            </header>

            <aside>
                <ul>
                    <li>Menu Item 1</li>
                    <li>Menu Item 2</li>
                    <li>Menu Item 2</li>
                </ul>
            </aside>

            <div class="content">
                <h1>PHPDocs</h1>
                <p>PHPDocs is an online learning platform. Learn the programming skills you need for the job you want.</p>
            </div>

            <footer>
                Copyright @phpdocs.com
            </footer>

        </section>
    </body>

</html>

HTML
Input Types

Different input types for the <input> element are:

Text Field

Text fields are used to get input from the user in the form of letters, numbers etc.

Example

Copy Code


<!doctype html>  
<html>
    <head> 
      	<title>Input Text Field</title> 
    </head>
	
    <body> 
    		<form>
    		 	  Name:<br>
      			<input type="text" name="username">
    		</form>
	   </body>
</html>

Password Field

Password fields are used to input passwords in the form. Each character inserted in this field appears as *.

Example

Copy Code


<!doctype html>  
<html>
    <head> 
      	<title>Input Password Field</title> 
    </head>
	
    <body> 
    		<form>
     			  Type Your Password:<br>
    		    <input type="password" name="password">
    		</form>
  	</body>
</html>

Submit Button

Submit field is used to create a button for submitting form data to a form-handler.

Copy Code


<!doctype html>  
<html>
  	<head> 
        <title> Submit Button</title> 
    </head>
	
    <body> 
		    <form>
 			      <h3>This is submit button</h3>
            <input type="submit" value="Submit">
		    </form>
    </body>
</html>

Reset Button

Reset button is used to clear all data entered by the user in different form elements.

Copy Code


<!doctype html>  
<html>
  	<head> 
      	<title>Reset Button</title> 
    </head>
	
    <body> 
		    <form>
 			      <h3>This is reset button</h3>
			       <input type="reset">
		    </form>
    </body>
</html>

Radio Button

Radio buttons are used when the user has to choose one option from multiple choices.

Copy Code


<!doctype html>  
<html>
	<head> 
    	 <title>Radio Button</title> 
    </head>
	
    <body> 
    		<form>
       			<input type="radio" name="gender" value="male" checked> Male<br>
      			<input type="radio" name="gender" value="female"> Female<br>
        		<input type="radio" name="gender" value="other"> Other 
    		</form>
    </body>
</html>

Checkbox

Checkboxes are used to provide many options to the user. The user can choose one or multiple options from available choice.

Copy Code


<!doctype html>  
<html>
    <head> 
       	<title>Checkbox</title> 
   	</head>
	
   	<body> 
    		<form>
      			<input type="checkbox" name="language1" value="java"> I like Java<br>
      			<input type="checkbox" name="language2" value="php"> I like PHP 
    		</form>
  	</body>
</html>

Button

Button is used to process the form data.

Copy Code


<!doctype html>  
<html>
 
   	<head> 
      	<title>Button</title> 
   	</head>
	
  	<body> 
    		<form>
      			<input type="button" value="Click Me!">
    		</form>
  	</body>
</html>

File Upload Field

File upload field is used to get files from the user in a form. The visitors can select a file from the disk using this field.

Copy Code


<!doctype html>  
<html>
   	<head> 
    	 <title>File Upload Field</title> 
   	</head>
	
  	<body> 
    		<form>
      			<input type="file">
    		</form>
  	</body>
</html>

HTML
Images

The <img> tag is used to insert a picture into a document. This element should not contain any content, and does not require a closing tag.

Working

It is essential to comprehend that images are not technically “part” of the website page file, they are isolated files which are embedded into the page when it is seen by a browser.

So, a basic web page with one image is actually two records or files – the HTML file and the image file.

Image Breakdown

Here is the breakdown of HTML Image

Image Example

Below example will demonstrate the basic architecure of HTML Image

Copy Code


<!doctype html>  
<html>
    <head>
        <title>HTML Image</title> 
    </head>
  
    <body>
        <img src="img/logo.png" alt="HTML 5 Logo">
    </body>
</html>

HTML SVG

SVG Breakdown

SVG Circle

Example by Code

SVG Rectangle

Example by Code

SVG Rounded Rectangle

Example by Code

SVG Star

Example by Code

HTML Span

Span Breakdown

Span Example

HTML Blockquote

Blockquote Breakdown

Blockquote Example

HTML Paragraphs

Paragraph Breakdown

Paragraph Example

HTML List

List Breakdown

Ordered List

Unordered List

HTML Links

Hyperlink

Link Tag

HTML Line Break

Line Break Example

HTML Layout

Layout Example

Example with Code

HTML Input Types

Text Field

Password Field

Submit Button

Reset Button

Radio Button

Checkbox

Button

File Upload Field

HTML Images

Working

Image Breakdown

Image Example

HTML
SVG

HTML
Span

HTML
Blockquote

HTML
Paragraphs

HTML
List

HTML
Links

HTML
Line Break

HTML
Layout

HTML
Input Types

HTML
Images