HTML Cheat Sheet - A Primary Information to HTML

[ad_1]

What’s HTML ?

HTML(HyperText Markup Language) is essentially the most fundamental constructing block of all internet pages. It offers construction to the content material showing on a web site, corresponding to pictures, textual content, or movies by making a fundamental skeleton. HTML continues to be very helpful immediately, the reason is irrespective of the framework, or language we use to develop the online web page, the output could be rendered in HTML.

HTML Cheat Sheet

What’s HTML Cheat Sheet ?

Net builders beginning generally want a easy, fast reference checklist of fundamental HTML tags, codes, and attributes, that’s when HTML Cheat Sheet comes into the image. The entire goal of the Cheat Sheet is to offer you some fast correct ready-to-use code snippets and crucial HTML tags and attributes that will help you along with your webpage.

Desk of Content material:

Principal root: The <html> ingredient represents the foundation (top-level ingredient) of an HTML doc additionally known as the doc ingredient because it defines the entire HTML doc. It has a begin tag <html> and an finish tag </html>All different components have to be descendants of this ingredient.

<html> … </html>

Boilerplate:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>

Geeks For Geeks

</title>

</head>

<physique>

Welcome to Geeks for Geeks

</physique>

</html>

Sectioning Root:

Physique: The HTML <physique> Factor represents the content material of an HTML doc. There could be just one <physique> ingredient in a doc.

Headings: There are six headings obtainable in HTML.

Heading Tags	Description	Syntax
<h1>	That is the biggest heading amongst all.	<h1>….</h1>
<h2>	That is the second largest heading amongst all.	<h2>….</h2>
<h3>	That is the third largest heading amongst all.	<h3>….</h3>
<h4>	That is the fourth largest heading amongst all.	<h4>….</h4>
<h5>	That is the second smallest heading of all.	<h5>….</h5>
<h6>	That is the Smallest amongst all.	<h6>….</h6>

HTML

<!DOCTYPE html>

<html>

<head>

<title>Heading Tags</title>

</head>

<physique>

<h1>GeeksforGeeks</h1>

<h2>GeeksforGeeks</h2>

<h3>GeeksforGeeks</h3>

<h4>GeeksforGeeks</h4>

<h5>GeeksforGeeks</h5>

<h6>GeeksforGeeks</h6>

</physique>

</html>

Container: The container tags are tags which have some information corresponding to textual content, the picture between their opening and shutting tags. There are a number of container tags in HTML.

Tags	Description	Syntax
<div>	The <div> tag is a block ingredient. It defines a division or a bit in an HTML doc. Any form of content material could be put contained in the <div> tag.	<div>… </div>
<span>	The <span> tag is an inline ingredient. It’s used to mark up part of a textual content, or part of a doc.	<span>…</span>
<p>	The <p> tag represents a paragraph. HTML paragraphs could be any structural grouping of associated content material, corresponding to pictures or type fields.	<p>…</p>
<pre>	The <pre> tag represents pre-formatted textual content which is to be introduced precisely as written within the HTML file. . It preserves the textual content areas, line breaks, tabs, and different formatting characters that are ignored by internet browsers.	<pre>…</pre>
<code>	The <code> tag is used to characterize supply codes. It’s primarily used to show the code snippet into the online browser.	<code>…</code>

HTML

<!DOCTYPE html>

<html>

<head>

<title> GeeksforGeeks </title>

<meta identify="key phrases"

content material="Meta Tags, Metadata" />

<meta identify="description"

content material="Geeksforgeeks is a pc science portal." />

<model kind="textual content/css">

physique {

background-color: powderblue;

}

h1 {

coloration: black;

font-family: arial;

}

</model>

</head>

<physique>

<p>

GeeksforGeeks is a

<span model="coloration:pink;font-weight:bolder">

laptop science</span> portal for

<span model="background-color: lightgreen;">

geeks

</span>

<pre>

This

is a pre tag.

</pre>

</p>

<pre>

code tag: Shows code snippets.

<code>

#embody<stdio.h>

int important() {

printf("Hiya Geeks");

}

</code>

</pre>

<p>

Click on on the next hyperlink

GeeksforGeeks

</a>

</p>

</physique>

</html>

Doc Data: This part includes tags that are used to explain the HTML doc by giving an outline of what it consists of.

Tags	Description	Syntax
<head>	The <head> ingredient is a container for metadata which is information about information. It’s the first part within the code containing details about an internet web page’s properties and hyperlinks to exterior associated information	<head>…</head>
<hyperlink>	The <hyperlink> tag is an empty ingredient, it defines the connection between the present doc and an exterior useful resource. The <hyperlink> tag is most frequently used to hyperlink to exterior model sheets in your web site.	<hyperlink>
<meta>	The <meta> tag defines metadata about an HTML doc. It’s usually used to specify the character set, web page description, key phrases, writer of the doc, and viewport settings.	</meta>
<title>	The <title> HTML ingredient defines the doc’s title that’s proven in a browser’s title bar or a web page’s tab.	<title>…</title>
<model>	The <model> tag is used to outline model data (CSS) for a doc. It’s used to specify how HTML components ought to render in a browser.	<model>…</model>

HTML

<!DOCTYPE html>

<html>

<head>

<title>Title goes right here </title>

<hyperlink rel="stylesheet"

kind="textual content/css"

href="model.css">

<meta identify="key phrases"

content material="Meta Tags, Metadata" />

<model>

#first {

font-family: Castellar;

background-color: inexperienced;

coloration: white;

}

.second {

text-align: middle;

background-color: white;

font-size: 30px;

coloration: pink;

}

</model>

</head>

<physique>

<p id="first">Hiya GeeksforGeeks.</p>

<p class="second">Welcome Geeks</p>

</physique>

</html>

Sectioning Content material:Sectioning Content material components by default outline ARIA landmark. These components are principally descendant of HTML physique ingredient.

Tags	Description	Syntax
<header>	The <header> HTML5 ingredient is used to provide introductory content material concerning the doc. It might include some heading components and in addition a brand, a search type, an writer identify, and different components.	<header>… </header>
<important>	The <important> HTML ingredient represents the primary dominant content material of the <physique> of a doc. The primary content material space consists of content material that expands upon the central subject of a doc, or the primary performance of an software.	<important>… </important>
<part>	The HTML5 <part> ingredient represents a standalone part. It’s a structural HTML ingredient used to group collectively associated components. Every <part> usually consists of a number of heading components and extra components presenting associated content material.	<part>… </part>
<nav>	The <nav> HTML ingredient represents a bit of a web page whose goal is to offer navigation hyperlinks, both throughout the present doc or to different paperwork	<nav>…</nav>
<article>	The HTML5 <article> ingredient represents a self-contained composition in a doc, web page, software, or web site, which is independently distributable or reusable.	<article>… </article>
<apart>	The <apart> tag defines some content material apart from the content material it’s positioned in. Its content material ought to be not directly associated to the encompassing content material. The <apart> content material is ,most frequently positioned as a sidebar in a doc.	<apart>… </apart>
<footer>	The <footer> HTML ingredient represents a footer for its sectioning root ingredient. It usually accommodates details about the writer of the part, copyright information or hyperlinks to associated paperwork.	<footer>… </footer>
<tackle>	The HTML <tackle> ingredient signifies that the enclosed HTML offers contact data for an individual or folks, or for a company. It should not include data apart from contact data.	<tackle>..</tackle>

HTML

<!DOCTYPE html>

<html>

<physique>

<h3>HTML Header Tag</h3>

<hr>

<article>

<header>

<h3>GeeksforGeeks Studying</h3>

<h3> HTML nav Tag</h3>

<nav>

<a href="#">Dwelling</a> |

<a href="#">Interview</a> |

<a href="#">Languages</a> |

<a href="#">Information Construction</a> |

<a href="#">Algorithm</a>

</nav>

</header>

</article>

<important>

<part>

<h1>Geeksforgeek: Part 1</h1>

<p>Content material of part </p>

</part>

<apart>

<h1>That is heading textual content in apart Tag</h1>

<p>That is paragraph textual content in apart Tag</p>

</apart>

</important>

<footer>

<article>

<tackle>

Group Title: GeeksforGeeks <br>

Net Website:

GeeksforGeeks</a><br>

go to us:<br>

GeeksforGeeks<br>

A-118, Sector 136, Noida, <br>

Uttar Pradesh (201305)

</tackle>

</article>

<br>

<a href=

About Us

</a>|

<a href=

Privateness Coverage

</a>|

<a href=

Careers

</a>

<p>@geeksforgeeks, Some rights reserved</p>

</footer>

</physique>

</html>

Textual content formatting and Inline textual content semantics: Textual content formatting is utilized in HTML to make the doc look extra complete and enticing. The HTML inline textual content semantics is used to outline the which means, construction, or model of a phrase, line, or any arbitrary piece of textual content.

Tags	Description	Syntax
<b>	The <b> tag is used to make the textual content enclosed inside these tags daring.	<b>…</b>
<i>	The <i> tag is used to make the model textual content enclosed inside these tags italics.	<i>…</i>
<em>	The <em> tag is used to place stress on some textual content or present some extent of emphasis. The <em> ingredient could be nested as properly, the place every degree of nesting signifies a better diploma of emphasis.	<em>…</em>
<sturdy>	The <sturdy> tag is used to point that content material enclosed inside these tags has sturdy significance or urgency. Sometimes, browsers render their content material in daring.	<sturdy>…</sturdy>
<sub>	The <sub> tag is used when we have to write the textual content as subscript.	<sub>…</sub>
<sup>	The <sup> tag is used when we have to write the textual content as superscript.	<sup>…</sup>
<abbr>	The <abbr> ingredient is used to characterize an abbreviation or acronym. The non-obligatory title attribute can be utilized so as to add description of the abbreviation.	<abbr>… </abbr>
<mark>	The <mark> tag is used to mark or spotlight necessary textual content for reference or notation functions.	<mark>…</mark>
<cite>	The <cite> ingredient is used to explain the title of a inventive work (For ex. a e book, a paper, an essay, a poem, a music, a portray and so on. )	<cite>…</cite>
<time>	The <time> ingredient is used to characterize a particular time period.	<time>…</time>

HTML

<!DOCTYPE html>

<html>

<head>

<title> Geeks for Geeks </title>

</head>

<physique>

<div><b>Daring textual content</b></div>

<div><i>Italics textual content</i></div>

<div><em>Emphasised textual content</em></div>

<div><sturdy>Necessary textual content!</sturdy></div>

<div><sub>subscript textual content</sub></div>

<div><sup>Superscript textual content</sup></div>

<div><abbr>Abbreviation</abbr></div>

<div><mark>Highlighted textual content</mark></div>

<div><cite>Title of inventive work</cite></div>

<div>Time<time>9:00 am</time>

to <time>7:00 pm</time>

</div>

</physique>

</html>

Lists: Lists could be both numerical, alphabetic, bullet, or different symbols. You may specify checklist kind and checklist objects in HTML for the clear doc. There are three checklist sorts in HTML:

Unordered checklist: Used to group a set of associated objects in no specific order.
Ordered checklist: Used to group a set of associated objects in a particular order.
Description checklist: Used to show identify/worth pairs corresponding to phrases and definitions.

Tags	Description	Syntax
<ul>	The HTML <ul> ingredient represents an unordered checklist of things. It’s usually rendered as a bulleted checklist.	<ul>…</ul>
<ol>	The HTML <ol> ingredient represents an ordered checklist of things. It’s usually rendered as a numbered checklist.	<ol>…</ol>
<li>	The HTML <li> ingredient is used to characterize an merchandise in a listing.	<li>…</li>
<dl>	The HTML <dl> ingredient represents an outline checklist. The ingredient encloses a listing of teams of phrases (specified utilizing the <dt> ingredient) and descriptions.	<dl>…</dl>
<dd>	The HTML <dd> tag is used at the side of <dl> to explain a time period/identify in an outline checklist.	<dd>…</dd>
<dt>	The HTML <dt> ingredient is used at the side of <dl> to specifies a time period in an outline or definition checklist.	<dt>…</dt>

HTML

<!DOCTYPE html>

<html>

<head>

<title>GeeksforGeeks</title>

</head>

<physique>

<h2>Welcome To GeeksforGeeks Studying</h2>

<h5>Unordered Listing</h5>

<ul>

<li>Information Buildings & Algorithm</li>

<li>Net Expertise</li>

<li>Aptitude & Logical Reasoning</li>

<li>Programming Languages</li>

</ul>

<h5>Ordered Listing</h5>

<ol>

<li>Array</li>

<li>Linked Listing</li>

<li>Stacks</li>

<li>Queues</li>

<li>Bushes</li>

<li>Graphs</li>

</ol>

<h5> </h5>

<h5>Description Listing</h5>

<dl>

<dt>Programs:</dt>

<dd>100 </dd>

<dt> Quizes:</dt>

<dd> 500 </dd>

<dt> Interview Experiences:</dt>

<dd>1000 </dd>

</dl>

</physique>

</html>

Tables: A HTML desk is used to rearrange information in tabular type into rows and columns.

Tags	Description	Syntax
<caption>	The HTML Desk Caption ingredient specifies the title or caption of a desk.	<caption>…</caption>
<desk>	The HTML <desk> ingredient represents information in a two-dimensional desk comprised of rows and columns.	<desk>…</desk>
<thead>	The HTML <thead> ingredient is used to group header content material in an HTML desk. (used at the side of the <tbody> and <tfoot>ingredient)	<thead>…</thead>
<tbody>	The HTML <tbody> ingredient is used to group main content material of an HTML desk.	<tbody>…</tbody>
<th>	The HTML <th> ingredient is used to outline a cell as header of a bunch of cells of the HTML desk.	<th>…</th>
<td>	The HTML <td> ingredient defines a cell of a desk that accommodates the primary information of the desk.	<td>…</td>
<tr>	The HTML <tr> tag defines a row in an HTML desk. A <tr> ingredient accommodates a number of <th> or <td> components	<tr>…</tr>
<tfoot>	The HTML <tfoot> ingredient defines a set of rows summarizing the columns of the desk as per requirement.	<tfoot>…</tfoot>

HTML

<!DOCTYPE html>

<html>

<head>

<title>HTML Desk</title>

</head>

<physique>

<desk>

<caption>Geeks For Geeks Studying</caption>

<tr>

<th>Programming Languages</th>

<th>Growth</th>

<th>Placement and Take a look at collection</th>

</tr>

<tr>

<td>C programming </td>

<td>Full stack improvement</td>

<td>Google SDE preparation </td>

</tr>

<tr>

<td>Java programming</td>

<td>Backend improvement</td>

<td>Flipkart SDE preparation</td>

</tr>

<tr>

<td>Angular </td>

<td>Frontend Growth</td>

<td>Amazon SDE preparation</td>

</tr>

<tfoot>

<tr>

<td>Footer content material</td>

</tr>

</tfoot>

</desk>

</physique>

</html>

Varieties: An HTML type is a bit of a doc that acts as a container for several types of enter components, corresponding to textual content fields, passwords, menus, checkboxes, radio buttons, submit buttons, and so on.

Tags	Description	Syntax
<type>	The <type> HTML ingredient represents a doc part containing interactive controls for submitting data.	<type>…</type>
<enter>	The HTML <enter> ingredient is used to create interactive controls for web-based types with a view to settle for information from the consumer.	<enter>…</enter>
<textarea>	The <textarea> HTML ingredient is used to create a multi-line plain-text modifying management, usually utilized in a type, to gather consumer inputs like feedback or evaluations.	<textarea>…</textarea>
<choose>	The HTML <choose> ingredient represents a management that gives a menu of choices to pick out from.	<choose>…</choose>
<possibility>	The <possibility> tag is used to outline an possibility in a choose checklist. The<possibility> components go inside a <choose>, <optgroup>, or <datalist> components.	<possibility>…</possibility>
<optgroup>	The HTML <optgroup> ingredient is used to create a grouping of choices inside a <choose> ingredient.	<optgroup>.</optgroup>
<progress>	The HTML <progress>ingredient shows an indicator exhibiting the diploma of completion of a activity, usually displayed within the type of a progress bar.	<progress>…</progress>
<datalist>	The HTML <datalist> ingredient is used to provide a predefined choices for an <enter> ingredient. It provides an autocomplete function to it.	<datalist>…</datalist>
<button>	The HTML <button> ingredient represents a clickable button, which can be utilized in types or anyplace a normal button performance is required in a doc.	<button>…</button>
<label>	The <label> tag is used to specify a label or caption for an <enter> ingredient of a type.	<label>…</label>
Placeholder	The placeholder attribute specifies a brief trace that describes the anticipated worth of an enter discipline/textual content space .The brief trace is displayed within the discipline earlier than the consumer enters a worth.	<ingredient placeholder=” “>

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Appropriate"

content material="IE=edge">

<meta identify="viewport"

content material="width=device-width, initial-scale=1.0">

<title>GfG</title>

</head>

<physique>

<type>

<fieldset>

<legend>Private Particulars</legend>

<p>

<p>choose used right here:</p>

<label>

Salutation

<br />

<choose identify="salutation">

<possibility>--None--</possibility>

<possibility>Mr.</possibility>

<possibility>Ms.</possibility>

<possibility>Mrs.</possibility>

<possibility>Dr.</possibility>

<possibility>Prof.</possibility>

</choose>

</label>

</p>

<p>

<label>First identify: <enter identify="firstName"

placeholder="enter ingredient used right here" /></label>

</p>

<p>

<label>Final identify: <enter identify="lastName" /></label>

</p>

<p>

Gender :

<label><enter kind="radio" identify="gender" worth="male" /> Male</label>

<label><enter kind="radio" identify="gender" worth="feminine" /> Feminine</label>

</p>

<label Language most well-liked: </label>

<enter checklist="lang" placeholder="datalist used right here">

<datalist id="lang">

<possibility worth="java"></possibility>

<possibility worth="reactjs"></possibility>

<possibility worth="php"></possibility>

<possibility worth="python"></possibility>

</datalist>

<p>

<label>Electronic mail:<enter kind="e-mail" identify="e-mail" /></label>

</p>

<p>

<label>Date of Delivery:<enter kind="date" identify="birthDate"></label>

</p>

<p>

<label>

Tackle :

<br />

<textarea identify="tackle" placeholder="Textarea used right here"></textarea>

</label>

</p>

<p>

<button kind="submit">Submit</button>

</p>

<p>Progress tag used right here:</p>

Downloading progress to your profile:

<progress worth="57" max="100" placeholder="progress tag used right here">

</progress>

</fieldset>

</type>

</physique>

</html>

Multimedia: Multimedia is something you may hear or see within the type of pictures, movies, or sounds. It is available in varied format.HTML lets you add multimedia information to your web site by offering varied multimedia tags.

Tags	Description	Syntax
<img>	The HTML <img> tag is used to hyperlink pictures to internet pages.	<img>…</img>
<audio>	The HTML <audio> ingredient is used to incorporate sound content material in paperwork. It might include a number of audio sources.	<audio>…</audio>
<video>	The HTML <video> ingredient embeds a media participant which helps video information into the doc.	<video>…</video>
<determine>	The HTML <determine> tag is used to group or varied diagrams, pictures, illustrations, and code snippets into the doc.	<determine>…</determine>
<figcaption>	The HTML <figcaption> tag is used contained in the <determine> tag to offer the caption of the content material.	<figcaption>…</figcaption>
<embed>	The HTML<embed> tag helps embed multimedia in a Net web page and play it whereas opening the web page. It makes use of the three necessary attributes, particularly src, peak, and width.	<embed>…</embed>
<object>	The HTML <object> tag is used to incorporate objects, corresponding to pictures, audios, movies, Java applets, ActiveX controls, Moveable Doc Format (PDF), and Flash objects, in a Net web page.	<object>…</object>

HTML

<!DOCTYPE html>

<html>

<physique model="text-align: middle;">

<p>picture right here</p>

<img src=

width="420"

peak="100"

alt="Geeksforgeeks.org">

<p> Audio Pattern</p>

<audio controls>

<supply src="take a look at.mp3"

kind="audio/mp3">

<supply src="take a look at.ogg"

kind="audio/ogg">

</audio>

<p> Video pattern</p>

<video width="400"

peak="350"

controls>

<supply src="myvid.mp4"

kind="video/mp4">

<supply src="myvid.ogg"

kind="video/ogg">

</video>

<p> HTML Determine right here</p>

<determine>

<img src=

width="304"

peak="228"

alt="The Pulpit Rock">

<figcaption>Determine Caption goes right here </figcaption>

</determine>

<p> HTML Object right here</p>

<object information=

width="550px"

peak="150px">

GeeksforGeeks

</object>

</physique>

</html>

Characters and Symbols: Some characters are reserved in HTML they usually have particular which means when utilized in HTML paperwork. HTML offers a variety of characters and symbols involving arrows, forex, letters, maths, punctuation, and symbols. A number of the mostly used ones are:

Image	Description	Entity Title	Quantity Code
©	Copyright	©	©
&	Ampersand	&	&
>	Larger than	>	>
<	Lower than	<	<
$	Greenback	&greenback;	$
“	Citation mark	"	"
‘	Apostrophe	'	'

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<title>HTML Characters and Symbols</title>

</head>

<physique>

<p>That is the signal of trademark: ™ </p>

<p>That is the signal of ampersand: @ </p>

<p>That is the signal of greenback : $ </p>

<p>That is the signal of lower than : < </p>

<p>That is the signal of better than : > </p>

<p>That is the signal of citation mark : " </p>

</physique>

</html>

Attributes: HTML attributes are particular phrases used to outline the traits of an HTML ingredient. These are HTML ingredient modifiers positioned contained in the ingredient’s opening tag. Attributes have two parts- the identify and the worth. The identify is the property you wish to set and the worth is the specified worth of the attribute.

Attributes	Description	Syntax
alt	The alt attribute is used with the picture tag. It helps us to specify the choice textual content in case, the picture can’t be displayed on the web site to provide the customers an thought of what the picture accommodates.	< tag_name =”…” >
href	We use the <a> tag to outline a hyperlink. On this tag, the href attribute specifies the url of the vacation spot tackle. With out href attribute <a> ingredient won’t develop into hyperlink.	< tag_name =”…” >
src	The HTML src Attribute is used to specify the URL of the picture for use as a submit button. It specifies the picture path inside double quotes.	< tag_name =”…” >
width	The tag additionally accommodates the width attribute. Because the identify suggests, these attributes specify the width of the picture in pixels).	< tag_name =”…” >
peak	The tag additionally accommodates the peak attribute. Because the identify suggests, these attributes specify the peak of the picture in pixels).	< tag_name =”…” >
model	The model attribute helps us change the feel and appear of the doc by setting the model, corresponding to font, measurement, coloration, and so on. of the HTML ingredient.	< tag_name =”…” >
id	The id attribute is a singular identifier that’s used to specify an space of a webpage. It’s utilized by CSS and JavaScript to carry out a sure activity for a singular ingredient. In CSS, the id attribute is used utilizing the # image adopted by id.	< tag_name =”…” >
class	The category attribute is used to specify a number of class names for a component and assign completely different properties inside one block which in flip could be assigned to any ingredient. As soon as assigned a particular class, the weather could have all of the properties of that individual class.	< tag_name =”…” >
title	The title attribute specifies additional details about a component.The textual content of the title attribute is most frequently displayed as a tooltip when the mouse hovers over the ingredient in most browsers.	< tag_name =”…” >

HTML

<!DOCTYPE html>

<html>

<head>

<title>HTML Attributes</title>

<model>

#geeks {

background-color: inexperienced;

coloration: white;

}

.gfg {

background-color: white;

font-size: 30px;

coloration: pink;

}

</model>

</head>

<physique>

<div>

<p>supply attribute:</p>

<img src=

</div>

<div> <img src=

alt="Various textual content right here"></div>

<br>

Click on to open in the identical tab

</a>

<br>

Click on to open in a unique tab

</a>

<h2 title="GeeksforGeeks: A pc science

portal for geeks">

Title attribute: hover to see the impact

</h2>

<p>Utilizing width and peak attribute right here:</p>

<img src=

width="300px"

peak="100px">

<h2 id="geeks">

Styling utilizing id attribute right here

</h2>

<h2 class="gfg">

Styling utilizing class attribute right here

</h2>

<h2 model="font-family:Chaparral Professional Mild; ">

Styling utilizing model attribute right here

</h2>

</physique>

</html>

HTML is the inspiration of webpages, is used for webpage improvement by structuring web sites and internet apps. You may be taught HTML from the bottom up by following this HTML Tutorial and HTML Examples.

[ad_2]

HTML Cheat Sheet – A Primary Information to HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

Leave a ReplyCancel Reply