Code Editors
Hyper Text Markup Language
Tag
<tagname> Content </tagname>
<html> HTML document content </html>
<tagname />
<img />Introduction to the HTML document
All HTML documents must start with a <!DOCTYPE> declaration.
<!doctype html>Simple HTML document
<!doctype html>
<html lang="en" dir="rtl">
<head>
</head>
<body>
</body>
</html>head: Search engine information structure body: User information structure
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
<!doctype html>
<html>
<head>
<title> webdenj website </title>
</head>
<body>
</body>
</html>The <body> tag defines the document's body. There can only be one <body> element in an HTML document.
<!doctype html>
<html>
<head>
<title> webdenj website </title>
</head>
<body>
This is my website
</body>
</html>The <br> tag inserts a single line break.
My name is Amir <br> I am ProgrammerThe <hr> tag defines a thematic break in an HTML page
My name is Amir<hr> I am ProgrammerThe HTML <p> element defines a paragraph.
<p>This is first paragraph</p>
<p>This is second paragraph</p>
<p>This is third paragraph</p>The <h1> to <h6> tags are used to define HTML headings.
<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
<h4>heading4</h4>
<h5>heading5</h5>
<h6>heading6</h6>Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<small> - Smaller text ...
<p>
In publishing and <b>graphic design</b>, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on <strong>meaningful content</strong>.
</p>
<p>
Lorem ipsum may be used as a <small>placeholder</small> before <i>final copy is available</i>.
</p>You can add comments to your HTML source by using the following syntax:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->The <img> tag is used to embed an image in an HTML page.
<img src="webdenj.png" alt="webdenj.png" width="200" height="100" />Order lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Contact Us</li>
</ol>Unorder list An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Contact Us</li>
</ul>The <a> tag defines a hyperlink, which is used to link from one page to another.
<a href="http://google.com"> Go to Google</a>A linked page is normally displayed in the current browser window, unless you specify another target.
<a href="http://google.com" target="_blank"> Go to Google</a>Target attribute values: _self: Opens the linked document in the same frame as it was clicked (this is default) _blank: Opens the linked document in a new window or tab _parent: Opens the linked document in the parent frame _top: Opens the linked document in the full body of the window
The rel attribute specifies the relationship between the current document and the linked document.
<a rel="nofollow" href="http://google.com" target="_blank"> Go to Google</a>
<a rel="author" href="http://webdenj.com" target="_blank"> Go to Webdenj</a>Search engines can use this attribute to get more information about a link!
The <table> tag defines an HTML table. An HTML table consists of one <table> element and one or more <tr> <th> and <td> elements.
<table>
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr>
<td>Mohammad</td>
<td>Hosseini</td>
<td>30</td>
</tr>
<tr>
<td>Ali</td>
<td>Mohammadi</td>
<td>25</td>
</tr>
</table>An HTML table with a <thead> and <tbody> element:
<table>
<thead>
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mohammad</td>
<td>Hosseini</td>
<td>30</td>
</tr>
<tr>
<td>Ali</td>
<td>Mohammadi</td>
<td>25</td>
</tr>
</tbody>
</table>The HTML <video> element is used to show a video on a web page.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>To start a video automatically, use the autoplay attribute:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>The HTML <audio> element is used to play an audio file on a web page.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>To start an audio file automatically, use the autoplay attribute:
<audio controls autoplay>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>An HTML form is used to collect user input. The user input is most often sent to a server for processing.
<form action="http://webdenj.com" method="GET">
...
</form>Input tag One of the most used form element is the <input> element. The <input> element can be displayed in several ways, depending on the type attribute.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">text: Displays a single-line text input field
radio: Displays a radio button (for selecting one of many choices)
checkbox: Displays a checkbox (for selecting zero or more of many choices)
submit: Displays a submit button (for submitting the form)_ button: Displays a clickable button
color: Displays a color picker file: _ Display a "Browse" button for file uploads._
<input type="submit"> defines a button for submitting form data to a form-handler:
<input type="submit" value="Submit">Textarea tag The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>Select tag The <select> element defines a drop-down list:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="benz">Benz</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><input type="checkbox"> defines a checkbox:
<label for="RememberMe">Remember Me</label>
<input type="checkbox" id="RememberMe" name="remember"><input type="radio"> defines a radio button:
<label for="html">HTML</label>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="css">CSS</label>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="javascript">JavaScript</label>
<input type="radio" id="javascript" name="fav_language" value="JavaScript"> <input type="color"> defines a color picker.
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor"><input type="file"> defines a file-select field and a "Browse" button for file uploads.
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">The HTML <iframe> tag specifies an inline frame.
<iframe src="url" frameborder="0"></iframe>The height and width are specified in pixels by default:
<iframe src="https://webdenj.com" width="300" height="200" frameborder="0"></iframe>The HTML id attribute is used to specify a unique id for an HTML element.
<h2 id="title">Webdenj</h2>
<p id="caption">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad temporibus voluptatum consectetur maiores dignissimos reiciendis itaque placeat nobis recusandae alias!</p>
<hr>
<h3>Webdenj</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus minus beatae error minima, doloremque fugit neque at quam!</p>The HTML class attribute is used to specify a class for an HTML element.
<h2 class="title">Webdenj</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad temporibus voluptatum consectetur maiores dignissimos reiciendis itaque placeat nobis recusandae alias!</p>
<hr>
<h3 class="title">Webdenj</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus minus beatae error minima, doloremque fugit neque at quam!</p>The class attribute can be used on any HTML element.
The <div> tag defines a division or a section in an HTML document.
<div id="header"> Website Header </div>
<div id="navbar"> Website Navbar </div>
<div id="main">
<div id="sidbar"> Website Sidebar </div>
<div id="content"> Website Content </div>
</div>
<div id="footer"> Website Footer </div>The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
<p>Lorem ipsum dolor sit amet,<span style="color:red">consectetur</span> adipiscing elit.</p>A semantic element clearly describes its meaning to both the browser and the developer.
<header> Website Header </header>
<nav> Website navbar </nav>
<main>
<aside>Website Sidebar</aside>
<sction>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
<article>Article 4</article>
</sction>
</main>
<footer>Website Footer</footer>The <section> tag defines a section in a document.
<section>
<h2>webdenj website</h2>
<p>webdenj Academy is a cozy environment for current or future web designers.</p>
</section>The <article> tag specifies independent, self-contained content.
<h1>webdenj</h1>
<article>
<h2>webdenj website</h2>
<p>webdenj Academy is a cozy environment for current or future web designers.</p>
</article>The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>description: Define a description of your web page keywords: Define keywords for search engines
author: Define the author of a page viewport: Setting the viewport to make your website look good on all devices
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent