Jump to content

Search the Community

Showing results for tags 'html'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Adrian Bahmani

  • Quotations
    • Quotes
  • Programming
    • HTML Tutorial
    • JavaScript Tutorial
  • Rarmer
    • Articles
    • Mudras
    • Meditation
    • Yoga Poses
    • Yoga Breathing

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Found 18 results

  1. HTML JavaScript (جاوا اسکریپت ) A Script is a small program which is used with HTML to make web pages more attractive, dynamic and interactive, such as an alert popup window on mouse click. Currently, the most popular scripting language is JavaScript used for websites. Example: <!DOCTYPE html> <html> <body> <h1>JavaScript Date and Time example</h1> <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button> <p id="demo"></p> </body> </html> HTML <script> Tag The HTML <script> tag is used to specify a client-side script. It may be an internal or external JavaScript which contains scripting statements, hence we can place <script> tag within <body> or <head> section. It is mainly used to manipulate images, form validation and change content dynamically. JavaScript uses document.getElementById() method to select an HTML element. Example: <!DOCTYPE html> <html> <body> <h2>Use JavaScript to Change Text</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaTpoint"; </script> </body> </html> HTML events with JavaScript An event is something which user does, or browser does such as mouse click or page loading are examples of events, and JavaScript comes in the role if we want something to happen on these events. HTML provides event handler attributes which work with JavaScript code and can perform some action on an event. Syntax: <element event = "JS code"> Example: <input type="button" value="Click" onclick="alert('Hi, how are you')"> Output: Click Event Example Click on the button and you csn see a pop-up window with a message HTML can have following events such as: Form events: reset, submit, etc. Select events: text field, text area, etc. Focus event: focus, blur, etc. Mouse events: select, mouseup, mousemove, mousedown, click, dblclick, etc. Following are the list for Window event attributes: زمان رخداد نام منبع رویداد نام رویداد وقتی که تمرکز از روی یک ورودی فرم برداشته می شود، کاربر از ورودی خارج می شود Blur onBlur هنگامی که کاربر روی یک عنصر فرم یا یک لینک کلیک می کند click onClick هنگامی که کاربر یک فرم را به سرور ارسال می کند submit onSubmit هنگامی که صفحه در مرورگر بارگذاری می شود Load onLoad هنگامی که کاربر روی یک قسمت ورودی تمرکز می کند focus onFocus هنگامی که کاربر یک ورودی فرم را انتخاب می کند select onSelect Event Event Name Handler Name Occurs when onBlur blur When form input loses focus onClick click When the user clicks on a form element or a link onSubmit submit When user submits a form to the server. onLoad load When page loads in a browser. onFocus focus When user focuses on an input field. onSelect select When user selects the form input filed. Note: You will learn more about JavaScript Events in our JavaScript tutorial. Let's see what JavaScript can do: 1) JavaScript can change HTML content. Example: <!DOCTYPE html> <html> <body> <p>JavaScript can change the content of an HTML element:</p> <button type="button" onclick="myFunction()">Click Me!</button> <p id="demo"></p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaTpoint!"; } </script> </body> </html> 2) JavaScript can change HTML style Example: <!DOCTYPE html> <html> <body> <p id="demo">JavaScript can change the style of an HTML element.</p> <script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "brown"; document.getElementById("demo").style.backgroundColor = "lightgreen"; } </script> <button type="button" onclick="myFunction()">Click Me!</button> </body> </html> 3) JavaScript can change HTML attributes. Example: <!DOCTYPE html> <html> <body> <script> function light(sw) { var pic; if (sw == 0) { pic = "pic_lightoff.png" } else { pic = "pic_lighton.png" } document.getElementById('myImage').src = pic; } </script> <img id="myImage" src="pic_lightoff.png" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button> </p> </body> </html> Use External Script Suppose, you have various HTML files which should have same script, then we can put our JavaScript code in separate file and can call in HTML file. Save JavaScript external files using .js extension. Note: Do not add <script> tag in the external file, and provide the complete path where you have put the JS file. Syntax: <script type="text/javascript" src="URL "></script> Example: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="external.js"></script> </head> <body> <h2>External JavaScript Example</h2> <form onsubmit="fun()"> <label>Enter your name:</label><br> <input type="text" name="uname" id="frm1"><br> <label>Enter your Email-address:</label><br> <input type="email" name="email"><br> <input type="submit"> </form> </body> </html> JavaScript code: function fun() { var x = document.getElementById("frm1").value; alert("Hi"+" "+x+ "you have successfully submitted the details"); } Output: HTML <noscript> Tag HTML <noscript> tag is used to write disabled script in the browser. The text written within <noscript></noscript> tag is not displayed on the browser. Example: <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>This text is not visible in the browser.</noscript> </body> </html>
  2. HTML iframes ( iframes آشنایی با ) HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline frame. An HTML iframe embeds another document within the current HTML document in the rectangular region. The webpage content and iframe contents can interact with each other using JavaScript. Iframe Syntax An HTML iframe is defined with the <iframe> tag: <iframe src="URL"></iframe> Here, "src" attribute specifies the web address (URL) of the inline frame page. Set Width and Height of iframe You can set the width and height of iframe by using "width" and "height" attributes. By default, the attributes values are specified in pixels but you can also set them in percent. i.e. 50%, 60% etc. Example: (Pixels) <!DOCTYPE html> <html> <body> <h2>HTML Iframes example</h2> <p>Use the height and width attributes to specify the size of the iframe:</p> <iframe src="www.adrianbahmani.com/" height="300" width="400"></iframe> </body> </html> Example: (Percentage) <!DOCTYPE html> <html> <body> <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="www.adrianbahmani.com/" height="50%" width="70%"></iframe> </body> </html> You can also use CSS to set the height and width of the iframe. Example: <!DOCTYPE html> <html> <body> <h2>HTML Iframes</h2> <p>Use the CSS height and width properties to specify the size of the iframe:</p> <iframe src="www.adrianbahmani.com/" style="height:300px;width:400px"></iframe> </body> </html> Remove the border of iframe By default, an iframe contains a border around it. You can remove the border by using <style> attribute and CSS border property. Example: <!DOCTYPE html> <html> <body> <h2>Remove the Iframe Border</h2> <p>This iframe example doesn't have any border</p> <iframe src="www.adrianbahmani.com/" style="border:none;"></iframe> </body> </html> You can also change the size, color, style of the iframe's border. Example: <!DOCTYPE html> <html> <body> <h2>Custom Iframe Border</h2> <iframe src="www.adrianbahmani.com/" style="border:2px solid tomato;"></iframe> </body> </html> Iframe Target for a link You can set a target frame for a link by using iframe. Your specified target attribute of the link must refer to the name attribute of the iframe. Example: <!DOCTYPE html> <html> <body> <h2>Iframe - Target for a Link</h2> <iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe> <p><a href="www.adrianbahmani.com" target="iframe_a">JavaTpoint.com</a></p> <p>The name of iframe and link target must have same value else link will not open as a frame. </p> </body> </html> Output new.hmtl output code: <!DOCTYPE html> <html> <head> <style> p{ font-size: 50px; color: red;} </style> </head> <body style="background-color: #c7f15e;"> <p>This is a link below the ifarme click on link to open new iframe. </p> </body> </html> Embed YouTube video using iframe You can also add a YouTube video on your webpage using the <iframe> tag. The attached video will be played at your webpage and you can also set height, width, autoplay, and many more properties for the video. Following are some steps to add YouTube video on your webpage: Goto YouTube video which you want to embed. Click on SHARE ➦ under the video. Click on Embed <> option. Copy HTML code. Paste the code in your HTML file Change height, width, and other properties (as per requirement). Example: <iframe width="550" height="315" src="https://www.youtube.com/embed/JHq3pL4cdy4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="padding:20px;"></iframe> <iframe width="550" height="315" src="https://www.youtube.com/embed/O5hShUO6wxs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" style="padding:20px;">></iframe> Attributes of <iframe> توضیحات مقدار اسم صفت اگر صحیح باشد، قاب در تمام صفحه باز می شود allowfullscreen مقدار ارتفاع قاب را مشخص می کند و مقدار پیش فرض آن ۱۵۰ پیکسل است پیکسل height یک نام به قاب اختصاص می دهد. اگر بخواهید یک لینک در فریم ایجاد کنید، صفت name مهم است متن name مشخص می کند که قاب دارای حاشیه باشد یا خیر. (در HTML5 پشتیبانی نمی شود) ۱ یا ۰ frameborder اندازه عرض قاب را مشخص می کند و مقدار پیش فرض آن ۳۰۰ پیکسل است پیکسل Width از این ویژگی برای تعیین نام مسیر یا نام سندی استفاده می شود که محتوای آن در قاب بارگذاری می شود URL src این ویژگی برای اعمال محدودیت های اضافی برای محتوای قاب استفاده می شود. sandbox به فرم اجازه ارسال می دهد. در صورت عدم استفاده از این کلمه کلیدی، ارسال فرم مسدود می شود allow-forms پاپ آپ ها را فعال می کند. اگر استفاده نشود، هیچ پنجره پاپ آپی باز نمی شود allow-popups اجرای اسکریپت را فعال می کند allow-scripts اگر از این کلمه کلیدی استفاده شود، منبع جاسازی شده از همان منبع مبدا دریافت می شود allow-same-origin از ویژگی srcdoc برای نمایش محتوای HTML در قاب خطی استفاده می شود. ویژگی src را نادیده می گیرد (اگر مرورگر پشتیبانی کند). srcdoc تعیین می کند که مرورگر باید یک نوار پیمایش برای قاب قرار دهد یا خیر. (در HTML5 پشتیبانی نمی شود.) scrolling نوار پیمایش را فقط زمانیکه محتوای قاب از ابعاد آن بزرگتر است نمایش دهد. auto نوار پیمایش را همیشه برای قاب نمایش می دهد yes هرگز نوار پیمایشی برای قاب نمایش نمی دهد no Attribute name Value Description allowfullscreen If true then that frame can be opened in full screen. height Pixels It defines the height of the embedded iframe, and the default height is 150 px. name text It gives the name to the iframe. The name attribute is important if you want to create a link in one frame. frameborder 1 or 0 It defines whether iframe should have a border or not. (Not supported in HTML5). Width Pixels It defines the width of embedded frame, and default width is 300 px. src URL The src attribute is used to give the path name or file name which content to be loaded into iframe. sandbox This attribute is used to apply extra restrictions for the content of the frame allow-forms It allows submission of the form if this keyword is not used then form submission is blocked. allow-popups It will enable popups, and if not applied then no popup will open. allow-scripts It will enable the script to run. allow-same-origin If this keyword is used then the embedded resource will be treated as downloaded from the same source. srcdoc The srcdoc attribute is used to show the HTML content in the inline iframe. It overrides the src attribute (if a browser supports). scrolling It indicates that browser should provide a scroll bar for the iframe or not. (Not supported in HTML5) auto Scrollbar only shows if the content of iframe is larger than its dimensions. yes Always shows scroll bar for the iframe. no Never shows scrollbar for the iframe.
  3. HTML Id Attribute ( HTML ID آشنای با صفت ) The id attribute is used to specify the unique ID for an element of the HTML document. It allocates the unique identifier which is used by the CSS and the JavaScript for performing certain tasks. Note: In the Cascading Style sheet (CSS), we can easily select an element with the specific id by using the # symbol followed by id. Note: JavaScript can access an element with the given ID by using the getElementById() method. Syntax <tag id="value"> Example 1: The following example describes how to use the id attribute in CSS document: <!DOCTYPE html> <html> <head> <title> Example of Id attribute in CSS </title> <style> #Cars { padding: 40px; background-color: lightblue; color: black; text-align: center; } #Bikes { padding: 50px; background-color: lightGreen; text-align: center; } </style> </head> <body> <p> Use CSS to style an element with the id: </p> <h1 id="Cars"> Cars </h1> <h1 id="Bikes"> Bikes </h1> </body> </html> Output: Example 2: The following example describes how to use the ID attribute in JavaScript. <!DOCTYPE html> <html> <head> <title> Date Attribute </title> <script> function viewdate() { var x = document.getElementById("dob").value; document.getElementById("demo").innerHTML = x; </script> </head> <body> Employee Name: <input type="text" placeholder="Your Good name"/> <br> <br> Date of Joining: <input type="date" id="dob"> <br> <button onclick="viewdate()"> Submit </button> <br> <h2 id="demo"> </h2> </body> </html> Output:
  4. HTML Classes ( HTML آشنای با کلاس ها در ) Class Attribute in HTML The HTML class attribute is used to specify a single or multiple class names for an HTML element. The class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can use this class in CSS with a specific class, write a period (.) character, followed by the name of the class for selecting elements. A class attribute can be defined within <style> tag or in separate file using the (.) character. In an HTML document, we can use the same class attribute name with different elements. Defining an HTML class To create an HTML class, firstly define style for HTML class using <style> tag within <head> section as following example: Example: <head> <style> .headings{ color: lightgreen; font-family: cursive; background-color: black; } </style> </head> We have define style for a class name "headings", and we can use this class name with any of HTML element in which we want to provide such styling. We just need to follow the following syntax to use it. <tag class="ghf"> content </tag> Example 1: <!DOCTYPE html> <html> <head> <style> .headings{ color: lightgreen; font-family: cursive; background-color: black; } </style> </head> <body> <h1 class="headings">This is first heading</h1> <h2 class="headings">This is Second heading</h2> <h3 class="headings">This is third heading</h3> <h4 class="headings">This is fourth heading</h4> </body> </html> Another Example with different class name Example: Let's use a class name "Fruit" with CSS to style all elements. <style> .fruit { background-color: orange; color: white; padding: 10px; } </style> <h2 class="fruit">Mango</h2> <p>Mango is king of all fruits.</p> <h2 class="fruit">Orange</h2> <p>Oranges are full of Vitamin C.</p> <h2 class="fruit">Apple</h2> <p>An apple a day, keeps the Doctor away.</p> Here you can see that we have used the class name "fruit" with (.) to use all its elements. Note: You can use class attribute on any HTML element. The class name is case-sensitive. Class Attribute in JavaScript You can use JavaScript access elements with a specified class name by using the getElementsByClassName() method. Example: Let's hide all the elements with class name "fruit" when the user click on the button. <!DOCTYPE html> <html> <body> <h2>Class Attribute with JavaScript</h2> <p>Click the button, to hide all elements with the class name "fruit", with JavaScript:</p> <button onclick="myFunction()">Hide elements</button> <h2 class="fruit">Mango</h2> <p>Mango is king of all fruits.</p> <h2 class="fruit">Orange</h2> <p>Oranges are full of Vitamin C.</p> <h2 class="fruit">Apple</h2> <p>An apple a day, keeps the Doctor away.</p> <script> function myFunction() { var x = document.getElementsByClassName("fruit"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script> </body> </html> Note: You will learn more about JavaScript in our JavaScript tutorial. Multiple Classes You can use multiple class names (more than one) with HTML elements. These class names must be separated by a space. Example: Let's style elements with class name "fruit" and also with a class name "center". <!DOCTYPE html> <html> <style> .fruit { background-color: orange; color: white; padding: 10px; } .center { text-align: center; } </style> <body> <h2>Multiple Classes</h2> <p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p> <h2 class="fruit center">Mango</h2> <h2 class="fruit">Orange</h2> <h2 class="fruit">Apple</h2> </body> </html> You can see that the first element <h2> belongs to both the "fruit" class and the "center" class. Same class with Different Tag You can use the same class name with different tags like <h2> and <p> etc. to share the same style. Example: <!DOCTYPE html> <html> <style> .fruit { background-color: orange; color: white; padding: 10px; } </style> <body> <h2>Same Class with Different Tag</h2> <h2 class="fruit">Mango</h2> <p class="fruit">Mango is the king of all fruits.</p> </body> </html>
  5. HTML style using CSS ( HTML آموزش سبک دهی ) Let's suppose we have created our web page using a simple HTML code, and we want something which can present our page in a correct format, and visibly attractive. So to do this, we can style our web page with CSS (Cascading Stylesheet) properties. CSS is used to apply the style in the web page which is made up of HTML elements. It describes the look of the webpage. CSS provides various style properties such as background color, padding, margin, border-color, and many more, to style a webpage. Each property in CSS has a name-value pair, and each property is separated by a semicolon (;). Note: In this chapter, we have given a small overview of CSS. You will learn everything in depth about CSS in our CSS tutorial. Example: <body style="text-align: center;"> <h2 style="color: red;">Welcome to javaTpoint</h2> <p style="color: blue; font-size: 25px; font-style: italic ;">This is a great website to learn technologies in very simple way. </p> </body> In the above example, we have used a style attribute to provide some styling format to our code. Output: Welcome to javaTpoint This is a great website to learn technologies in very simple way. Three ways to apply CSS To use CSS with HTML document, there are three ways: Inline CSS: Define CSS properties using style attribute in the HTML elements. Internal or Embedded CSS: Define CSS using <style> tag in <head> section. External CSS: Define all CSS property in a separate .css file, and then include the file with HTML file using tag in section. Inline CSS: Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element. To apply inline CSS, you need to use style attribute within HTML element. We can use as many properties as we want, but each property should be separated by a semicolon (;). Example: <h3 style="color: red; font-style: italic; text-align: center; font-size: 50px; padding-top: 25px;">Learning HTML using Inline CSS</h3> Output: Learning HTML using Inline CSS Internal CSS: An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document. To use Internal CSS, we can use class and id attributes. We can use internal CSS to apply a style for a single HTML page. Example: <!DOCTYPE html> <html> <head> <style> /*Internal CSS using element name*/ body{background-color:lavender; text-align: center;} h2{font-style: italic; font-size: 30px; color: #f08080;} p{font-size: 20px;} /*Internal CSS using class name*/ .blue{color: blue;} .red{color: red;} .green{color: green;} </style> </head> <body> <h2>Learning HTML with internal CSS</h2> <p class="blue">This is a blue color paragraph</p> <p class="red">This is a red color paragraph</p> <p class="green">This is a green color paragraph</p> </body> </html> Note: In the above example, we have used a class attribute which you will learn in the next chapter. External CSS: An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link> tag. If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS. There are two files need to create to apply external CSS First, create the HTML file Create a CSS file and save it using the .css extension (This file only will only contain the styling code.) Link the CSS file in your HTML file using tag in header section of HTML document. Example: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Learning HTML with External CSS</h2> <p class="blue">This is a blue color paragraph</p> <p class="red">This is a red color paragraph</p> <p class="green">This is a green color paragraph</p> </body> </html> CSS file: body{ background-color:lavender; text-align: center; } h2{ font-style: italic; size: 30px; color: #f08080; } p{ font-size: 20px; } .blue{ color: blue; } .red{ color: red; } .green{ color: green; } Commonly used CSS properties: توضیحات ساختار اسم صفت رنگ پس زمینه عنصر را تعریف می کند background-color:red; background-color رنگ متن (قلم) عنصر را تعیین می کند color: light green; color فاصله بین محتوای یک عنصر تا حاشیه آن را مشخص می کند. padding: 20px; padding اطراف یک عنصر فاصله ایجاد می کند margin: 30px; margin-left: margin برای یک عنصر خاص نوع قلم تعریف می کند font-family: cursive; font-family برای یک عنصر خاص اندازه قلم تعیین می کند font-size: 50px; Font-size برای تراز کردن متن در موقعیت انتخابی استفاده می شود text-align: left; text-align Properties-name Syntax Description background-color background-color:red; It defines the background color of that element. color color: lightgreen; It defines the color of text of an element padding padding: 20px; It defines the space between content and the border. margin margin: 30px; margin-left: It creates space around an element. font-family font-family: cursive; Font-family defines a font for a particular element. Font-size font-size: 50px; Font-size defines a font size for a particular element. text-align text-align: left; It is used to align the text in a selected position.
  6. An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. . Why use HTML Form HTML forms are required if you want to collect some data from of the site visitor. For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address. HTML Form Syntax <form action="server url" method="get|post"> //input controls e.g. textfield, textarea, radiobutton, button </form> HTML Form Tags Let's see the list of HTML 5 form tags. Tag Description <form> It defines an HTML form to enter inputs by the used side. <input> It defines an input control. <textarea> It defines a multi-line input control. <label> It defines a label for an input element. <fieldset> It groups the related element in a form. <legend> It defines a caption for a <fieldset> element. <select> It defines a drop-down list. <optgroup> It defines a group of related options in a drop-down list. <option> It defines an option in a drop-down list. <button> It defines a clickable button. توضیحات نام تگ یک فرم HTML برای گرفتن داده های ورودی تعریف می کند <form> یک کنترل ورودی را تعیین می کند <input> ایک کنترل ورودی چند خطی تعریف می کند <textarea> یک برچسب برای یک عنصر ورودی تعریف می کند <label> قسمت های مرتبط به هم را گروه بندی می کند <fieldset> یک عنوان برای عنصر <fieldset> تعریف می کند <legend> یک لیست کشویی تعریف می کند <select> گزینه های مرتبط را در یک لیست کشویی گروه بندی می کند <optgroup> یک گزینه در لیست کشویی تعریف می کند <option> یک دکمه قابل کلیک تعریف می کند <button> HTML 5 Form Tags Let's see the list of HTML 5 form tags. توضیحات نام تگ لیستی از گزینه های پیش فرض برای کنترل ورودی مشخص می کند <datalist> یک فیلد تولیدکننده جفت کلید برای فرم تعریف می کند <keygen> نتیجه یک محاسبه مشخص می کند <output> Tag Description <datalist> It specifies a list of pre-defined options for input control. <keygen> It defines a key-pair generator field for forms. <output> It defines the result of a calculation. HTML <form> element The HTML <form> element provide a document section to take input from user. It provides various interactive controls for submitting information to web server such as text field, text area, password field, etc. Note: The <form> element does not itself create a form but it is container to contain all required form elements, such as <input>, <label>, etc. Syntax: <form> //Form elements </form> HTML <input> element The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Following is the example to show the simple text input. Example: <body> <form> Enter your name <br> <input type="text" name="username"> </form> </body> Output: HTML TextField Control The type="text" attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc. <form> First Name: <input type="text" name="firstname"/> <br/> Last Name: <input type="text" name="lastname"/> <br/> </form> Output: Note: If you will omit 'name' attribute then the text filed input will not be submitted to server. HTML <textarea> tag in form The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be specify either using "rows" or "cols" attribute or by CSS. Example: <!DOCTYPE html> <html> <head> <title>Form in HTML</title> </head> <body> <form> Enter your address:<br> <textarea rows="2" cols="20"></textarea> </form> </body> </html> Output: Label Tag in Form It is considered better to have label in form. As it makes the code parser/browser/user friendly. If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that must be same as id attribute of input tag. NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it will provide a focus when you tap or click on label tag. It is more worthy with touchscreens. <form> <label for="firstname">First Name: </label> <br/> <input type="text" id="firstname" name="firstname"/> <br/> <label for="lastname">Last Name: </label> <input type="text" id="lastname" name="lastname"/> <br/> </form> Output: HTML Password Field Control The password is not visible to the user in password field control. <form> <label for="password">Password: </label> <input type="password" id="password" name="password"/> <br/> </form> Output: HTML 5 Email Field Control The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in this field. <form> <label for="email">Email: </label> <input type="email" id="email" name="email"/> <br/> </form> It will display in browser like below: Note: If we will not enter the correct email, it will display error like: Radio Button Control The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc. If you use one name for all the radio buttons, only one radio button can be selected at a time. Using radio buttons for multiple options, you can only choose a single option at a time. <form> <label for="gender">Gender: </label> <input type="radio" id="gender" name="gender" value="male"/>Male <input type="radio" id="gender" name="gender" value="female"/>Female <br/> </form> Checkbox Control The checkbox control is used to check multiple options from given checkboxes. <form> Hobby:<br> <input type="checkbox" id="cricket" name="cricket" value="cricket"/> <label for="cricket">Cricket</label> <br> <input type="checkbox" id="football" name="football" value="football"/> <label for="football">Football</label> <br> <input type="checkbox" id="hockey" name="hockey" value="hockey"/> <label for="hockey">Hockey</label> </form> Note: These are similar to radio button except it can choose multiple options at a time and radio button can select one button at a time, and its display. Output: Submit button control HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server. Syntax: <input type="submit" value="submit"> The type = submit , specifying that it is a submit button The value attribute can be anything which we write on button on web page. The name attribute can be omit here. Example: <form> <label for="name">Enter name</label><br> <input type="text" id="name" name="name"><br> <label for="pass">Enter Password</label><br> <input type="Password" id="pass" name="pass"><br> <input type="submit" value="submit"> </form> Output: HTML <fieldset> element: The <fieldset> element in HTML is used to group the related information of a form. This element is used with <legend> element which provide caption for the grouped elements. Example: <form> <fieldset> <legend>User Information:</legend> <label for="name">Enter name</label><br> <input type="text" id="name" name="name"><br> <label for="pass">Enter Password</label><br> <input type="Password" id="pass" name="pass"><br> <input type="submit" value="submit"> </fieldset> lt;/form> Output: HTML Form Example Following is the example for a simple form of registration. <!DOCTYPE html> <html> <head> <title>Form in HTML</title> </head> <body> <h2>Registration form</h2> <form> <fieldset> <legend>User personal information</legend> <label>Enter your full name</label><br> <input type="text" name="name"><br> <label>Enter your email</label><br> <input type="email" name="email"><br> <label>Enter your password</label><br> <input type="password" name="pass"><br> <label>confirm your password</label><br> <input type="password" name="pass"><br> <br><label>Enter your gender</label><br> <input type="radio" id="gender" name="gender" value="male"/>Male <br> <input type="radio" id="gender" name="gender" value="female"/>Female <br/> <input type="radio" id="gender" name="gender" value="others"/>others <br/> <br>Enter your Address:<br> <textarea></textarea><br> <input type="submit" value="sign-up"> </fieldset> </form> </body> </html> Output: HTML Form Example Let's see a simple example of creating HTML form. <form action="#"> <table> <tr> <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td> <td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td> </tr> <tr> <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td> <td><input type="password" name="password" id="register_password" style="width:160px"/></td> </tr> <tr> <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td> <td ><input type="email" name="email" value="" id="register_email" style="width:160px"/></td> </tr> <tr> <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td> <td> <input type="radio" name="gender" id="register_gendermale" value="male"/> <label for="register_gendermale">male</label> <input type="radio" name="gender" id="register_genderfemale" value="female"/> <label for="register_genderfemale">female</label> </td> </tr> <tr> <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td> <td><select name="country" id="register_country" style="width:160px"> <option value="india">india</option> <option value="pakistan">pakistan</option> <option value="africa">africa</option> <option value="china">china</option> <option value="other">other</option> </select> </td> </tr> <tr> <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/> </div></td> </tr> </table> </form>
  7. HTML Lists HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists: Ordered List or Numbered List (ol) Unordered List or Bulleted List (ul) Description List or Definition List (dl) Note: We can create a list inside another list, which will be termed as nested List. HTML Ordered List or Numbered List ( لیست های مرتب ) In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag. <ol> <li>Aries</li> <li>Bingo</li> <li>Leo</li> <li>Oracle</li> </ol> Output: Aries Bingo Leo Oracle HTML Unordered List or Bulleted List ( لیست های نامرتب ) In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag. <ul> <li>Aries</li> <li>Bingo</li> <li>Leo</li> <li>Oracle</li> </ul> Output: Aries Bingo Leo Oracle HTML Description List or Definition List ( ایجاد لیست های توضیح دار ) HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present glossary, list of terms or other name-value list. The HTML definition list contains following three tags: <dl> tag defines the start of the list ( شروع لیست را تعریف می کند ) <dt> tag defines a term ( اصطلاحی را تعریف می کند ) <dd> tag defines the term definition (description). ( توضیحی بر اصطلاح ) <dl> <dt>Aries</dt> <dd>-One of the ۱۲ horoscope sign.</dd> <dt>Bingo</dt> <dd>-One of my evening snacks</dd> <dt>Leo</dt> <dd>-It is also an one of the ۱۲ horoscope sign.</dd> <dt>Oracle</dt> <dd>-It is a multinational technology corporation.</dd> </dl> Output: Aries -One of the 12 horoscope sign. Bingo -One of my evening snacks Leo -It is also an one of the 12 horoscope sign. Oracle -It is a multinational technology corporation. HTML Nested List ( لیست تو در تو ) A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list <!DOCTYPE html> <html> <head> <title>Nested list</title> </head> <body> <p>List of Indian States with thier capital</p> <ol> <li>Delhi <ul> <li>NewDelhi</li> </ul> </li> <li>Haryana <ul> <li>Chandigarh</li> </ul> </li> <li>Gujarat <ul> <li>Gandhinagar</li> </ul> </li> <li>Rajasthan <ul> <li>Jaipur</li> </ul> </li> <li>Maharashtra <ul> <li>Mumbai</li> </ul> </li> <li>Uttarpradesh <ul> <li>Lucknow</li></ul> </li> </ol> </body> </html> Output:
  8. The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of text or semantics of text. Following is the list of phrase tags, some of which we have already discussed in HTML formatting. Abbreviation tag : <abbr> Acronym tag: <acronym> (not supported in HTML5) Marked tag: <mark> Strong tag: <strong> Emphasized tag : <em> Definition tag: <dfn> Quoting tag: <blockquote> Short quote tag : <q> Code tag: <code> Keyboard tag: <kbd> Address tag: <address> <abbr>: تگ اختصار یا کوتاه سازی <acronym>: تگ مخفف سازی (در ۵HTML پشتیبانی نمی شود ) <mark>: تگ علامت گذاری <strong>: تگ اهمیت بخشیدن به متن <em>: تگ تأکید <dfn>: تگ تعریف <blockquote>: تگ نقل قول <q>: تگ نقل قول کوتاه <code>: تگ کد <kbd>: تگ صفحه کلید <address>: تگ آدرس 1. Text Abbreviation tag This tag is used to abbreviate a text. To abbreviate a text, write text between <abbr> and </abbr> tag. Example <p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is used to create web pages. </p> Output: 2. Marked tag: The content written between <mark> and </mark> tag will show as yellow mark on browser. This tag is used to highlight a particular text. Example <p>This tag will <mark>highlight</mark> the text.</p> Output: 3. Strong text: This tag is used to display the important text of the content. The text written between <strong> and </strong> will be displayed as important text. Example <p>In HTML it is recommended to use <strong>lower-case</strong>, while writing a code. </p> Output: 4. Emphasized text This tag is used to emphasize the text, and displayed the text in italic form. The text written between <em> and </em> tag will italicized the text. Example <p>HTML is an <em>easy </em>to learn language.</p> Output: 5. Definition tag: When you use the <dfn> and </dfn> tags, it allow to specify the keyword of the content. Following is the example to show how to definition element. Example <p><dfn>HTML </dfn> is a markup language. </p> Output: 6. Quoting text: The HTML <blockquote> element shows that the enclosed content is quoted from another source. The Source URL can be given using the cite attribute, and text representation of source can display using <cite> ..... </cite>element. Example <blockquote cite="https://www.keepinspiring.me/famous-quotes/"><p>?The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.?</p></blockquote> <cite>-Mark Caine</cite> Output: 7. Short Quotations: An HTML <q> ....... </q> element defines a short quotation. If you will put any content between <q> ....... </q>, then it will enclose the text in double quotes. Example: <p>Steve Jobs said: <q>If You Are Working On Something That You Really Care About, You Don?t Have To Be Pushed. The Vision Pulls You.</q>?</p> Output: 8. Code tags The HTML <code> </code> element is used to display the part of computer code. It will display the content in monospaced font. <p>First Java program</p> <p><code>class Simple{ public static void main(String args[]){ System.out.println("Hello Java"); }} </code> </p> Output: 9. Keyboard Tag In HTML the keyboard tag, <kbd>, indicates that a section of content is a user input from keyboard. <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrome.</p> Output: 10. Address tag An HTML <address> tag defines the contact information about the author of the content. The content written between <address> and </address> tag, then it will be displayed in italic font. <address> You can ask your queries by contact us on <a href="">[email protected]</a> <br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187. </address> Output:
  9. HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph. Note: If we are using various <p> tags in one HTML file then browser automatically adds a single blank line between the two paragraphs. See this example: <p>This is first paragraph.</p> <p>This is second paragraph.</p> <p>This is third paragraph.</p> Output: This is first paragraph. This is second paragraph. This is third paragraph. Space inside HTML Paragraph If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one. <p> I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you. </p> <p> Look, I put here a lot of spaces but I know, Browser will ignore it. </p> <p> You cannot determine the display of HTML</p> <p>because resized windows may create different result. </p> Output: I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you. Look, I put here a lot of spaces but I know, Browser will ignore it. You cannot determine the display of HTML because resized windows may create different result. As you can see, all the extra lines and unnecessary spaces are removed by the browser. How to Use <br> and <hr> tag with paragraph? An HTML <br> tag is used for line break and it can be used with paragraph elements. Following is the example to show how to use <br> with <p> element. Example: <!DOCTYPE html> <html> <head> </head> <body> <h2> Use of line break with pragraph tag</h2> <p><br>Papa and mama, and baby and Dot, <br>Willie and me?the whole of the lot <br>Of us all went over in Bimberlie's sleigh, <br>To grandmama's house on Christmas day. </p> </body> </html> Output: An HTML <hr> tag is used to apply a horizontal line between two statements or two paragraphs. Following is the example which is showing use of <hr> tag with paragraph. Example: <!DOCTYPE html> <html> <head> </head> <body> <h2> Example to show a horizontal line with paragraphs</h2> <p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line.<hr> it will start a new paragraph. </p> </body> </html> Output:
  10. HTML Heading : A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the bold format and size of the text depends on the number of heading. 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). h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important. Headings in HTML helps the search engine to understand and index the structure of web page. Note: The main keyword of the whole content of a webpage should be display by h1 heading tag. See this example: <h1>Heading no. 1</h1> <h2>Heading no. 2</h2> <h3>Heading no. 3</h3> <h4>Heading no. 4</h4> <h5>Heading no. 5</h5> <h6>Heading no. 6</h6> Test it Now Output Heading no. 1 Heading no. 2 Heading no. 3 Heading no. 4 Heading no. 5 Heading no. 6 Heading elements (h1....h6) should be used for headings only. They should not be used just to make text bold or big. HTML headings can also be used with nested elements. Following are different codes to display the way to use heading elements. Example: <!DOCTYPE html> <html> <head> <title>Heading elements</title> </head> <body> <h1>This is main heading of page. </h1> <p>h1 is the most important heading, which is used to display the keyword of page </p> <h2>This is first sub-heading</h2> <p>h2 describes the first sub heading of page. </p> <h3>This is Second sub-heading</h3> <p>h3 describes the second sub heading of page.</p> <p>We can use h1 to h6 tag to use the different sub-heading with their paragraphs if required. </p> </body> </html> Output:
  11. HTML Formatting HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML. In HTML the formatting tags are divided into two categories: Physical tag: These tags are used to provide the visual appearance to the text. Logical tag: These tags are used to add some logical or semantic value to the text. NOTE: There are some physical and logical tags which may give same visual appearance, but they will be different in semantics. Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text. Element name Description <b> This is a physical tag, which is used to bold the text written between it. <strong> This is a logical tag, which tells the browser that the text is important. <i> This is a physical tag which is used to make text italic. <em> This is a logical tag which is used to display content in italic. <mark> This tag is used to highlight text. <u> This tag is used to underline text written between it. <tt> This tag is used to appear a text in teletype. (not supported in HTML5) <strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5) <sup> It displays the content slightly above the normal line. <sub> It displays the content slightly below the normal line. <del> This tag is used to display the deleted content. <ins> This tag displays the content which is added <big> This tag is used to increase the font size by one conventional unit. <small> This tag is used to decrease the font size by one unit from base font size. نام عنصر توضیحات <b> تگ فیزیکی که متن درون خود را به صورت توپر نمایش می دهد <strong> تگ منطقی است که به مرورگر اطلاع می دهد که متن درون آن اهمیت دارد <i> تگ فیزیکی که متن را به صورت مورب نمایش می دهد <em> تگ منطقی که محتوا را به صورت مورب نمایش می دهد <mark> متن را به صورت علامت گذاری شده و متمایز نمایش می دهد <u> زیر متن یک خط می کشد <tt> متن را به صورت تله تایپ نمایش می دهد (در ۵HTML پشتیبانی نمی شود.) <strike> روی یک قسمت از متن خط می کشد (در ۵HTML پشتیبانی نمی شود ) <sup> محتوا را کمی بالاتر از متن معمول نمایش می دهد <sub> محتوا را کمی پایین تر از متن معمول نمایش می دهد <del> محتوای را به صورت خط خورده (حذف شده) نمایش می دهد <ins> محتوای اضافه شده را نمایش می دهد <big> اندازه قلم متن را براساس اندازه قلم پایه، یک واحد بزرگتر نمایش می دهد <small> اندازه قلم متن را براساس اندازه قلم پایه، یک واحد کوچکتر نمایش می دهد 1) Bold Text HTML<b> and <strong> formatting elements The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If you write anything within <b>............</b> element, is shown in bold letters. See this example: <p> <b>Write Your First Paragraph in bold text.</b></p> Output: Write Your First Paragraph in bold text. The HTML <strong> tag is a logical tag, which displays the content in bold font and informs the browser about its logical importance. If you write anything between <strong>???????. </strong>, is shown important text. See this example: <p><strong>This is an important content</strong>, and this is normal content</p> Output: This is an important content, and this is normal content Example <!DOCTYPE html> <html> <head> <title>formatting elements</title> </head> <body> <h1>Explanation of formatting element</h1> <p><strong>This is an important content</strong>, and this is normal content</p> </body> </html> 2) Italic Text HTML <i> and <em> formatting elements The HTML <i> element is physical element, which display the enclosed content in italic font, without any added importance. If you write anything within <i>............</i> element, is shown in italic letters. See this example: <p> <i>Write Your First Paragraph in italic text.</i></p> Output: Write Your First Paragraph in italic text. The HTML <em> tag is a logical element, which will display the enclosed content in italic font, with added semantics importance. See this example: <p><em>This is an important content</em>, which displayed in italic font.</p> Output: This is an important content, which displayed in italic font. <!DOCTYPE html> <html> <head> <title>formatting elements</title> </head> <body> <h1>Explanation of italic formatting element</h1> <p><em>This is an important content</em>, which displayed in italic font.</p> </body> </html> 3) HTML Marked formatting If you want to mark or highlight a text, you should write the content within <mark>.........</mark>. See this example: <h2> I want to put a <mark> Mark</mark> on your face</h2> Output: I want to put a Mark on your face 4) Underlined Text If you write anything within <u>.........</u> element, is shown in underlined text. See this example: <p> <u>Write Your First Paragraph in underlined text.</u></p> Output: Write Your First Paragraph in underlined text. 5) Strike Text Anything written within <strike>.......................</strike> element is displayed with strikethrough. It is a thin line which cross the statement. See this example: <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p> Output: Write Your First Paragraph with strikethrough. 6) Monospaced Font If you want that each letter has the same width then you should write the content within <tt>.............</tt> element. Note: We know that most of the fonts are known as variable-width fonts because different letters have different width. (for example: 'w' is wider than 'i'). Monospaced Font provides similar space among every letter. See this example: <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p> Output: Hello Write Your First Paragraph in monospaced font. 7) Superscript Text If you put the content within <sup>..............</sup> element, is shown in superscript; means it is displayed half a character's height above the other characters. See this example: <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p> Output: Hello Write Your First Paragraph in superscript. 😎 Subscript Text If you put the content within <sub>..............</sub> element, is shown in subscript ; means it is displayed half a character's height below the other characters. See this example: <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p> Output: Hello Write Your First Paragraph in subscript. 9) Deleted Text Anything that puts within <del>..........</del> is displayed as deleted text. See this example: <p>Hello <del>Delete your first paragraph.</del></p> Output: Hello 10) Inserted Text Anything that puts within <ins>..........</ins> is displayed as inserted text. See this example: <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p> Output: Delete your first paragraph.Write another paragraph. 11) Larger Text If you want to put your font size larger than the rest of the text then put the content within <big>.........</big>. It increase one font size larger than the previous one. See this example: <p>Hello <big>Write the paragraph in larger font.</big></p> Output: Hello Write the paragraph in larger font. 12) Smaller Text If you want to put your font size smaller than the rest of the text then put the content within <small>.........</small>tag. It reduces one font size than the previous one. See this example: <p>Hello <small>Write the paragraph in smaller font.</small></p> Output: Hello Write the paragraph in smaller font.
  12. HTML Elements An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them. Note: Some elements does not have end tag and content, these elements are termed as empty elements or self-closing element or void elements. Such as: <p> Hello world!!! </p> Example <!DOCTYPE html> <html> <head> <title>WebPage</title> </head> <body> <h1>This is my first web page</h1> <h2> How it looks?</h2> <p>It looks Nice!!!!!</p> </body> </html> Test it Now All the content written between body elements are visible on web page. Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called as unpaired tag. Some Void elements are <br> (represents a line break) , <hr>(represents a horizontal line), etc. Nested HTML Elements: HTML can be nested, which means an element can contain another element. Block-level and Inline HTML elements For the default display and styling purpose in HTML, all the elements are divided into two categories: Block-level element Inline element Block-level element: These are the elements, which structure main part of web page, by dividing a page into coherent blocks. A block-level element always start with new line and takes the full width of web page, from left to right. These elements can contain block-level as well as inline elements. Following are the block-level elements in HTML. <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>. Note: All these elements are described in later chapters. Example: <!DOCTYPE html> <html> <head> </head> <body> <div style="background-color: lightblue">This is first div</div> <div style="background-color: lightgreen">This is second div</div> <p style="background-color: pink">This is a block level element</p> </body> </html> Test it Now Output: In the above example we have used tag, which defines a section in a web page, and takes full width of page. We have used style attribute which is used to styling the HTML content, and the background color are showing that it's a block level element. Inline elements: Inline elements are those elements, which differentiate the part of a given text and provide it a particular function. These elements does not start with new line and take width as per requirement. The Inline elements are mostly used with other elements. <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>. Example: <!DOCTYPE html> <html> <head> </head> <body> <a href="https://www.adrianbahmani.com ">Click on link</a> <span style="background-color: lightblue">this is inline element</span> <p>This will take width of text only</p> </body> </html> Test it Now Output: Following is the list of the some main elements used in HTML: Start tag Content End tag Description <h1> ...... <h6> These are headings of HTML </h1>??..</h6> These elements are used to provide the headings of page. <p> This is the paragraph </p> This element is used to display a content in form of paragraph. <div> This is div section </div> This element is used to provide a section in web page. <br> This element is used to provide a line break. ( void element) <hr> This element is used to provide a horizontal line. (void element) توصیف تگ پایان محتوا تگ شروع برای ساخت عناوین و سرتیترهای صفحه استفاده می شود. </h1> ….. </h6> تگ های عنوانن (یا سرتیتر) هستند. <h1> ….. <h6> محتوا را به صورت پاراگراف نمایش می دهد. </p> این یک پاراگراف است <p> بخش یا قسمت جدیدی در صفحه ایجاد می کند. </div> ای یک بخش است <div> برای شکست خط فعلی استفاده می شود. (عنصر خالی) <br> یک خط افقی ترسیم می کند. (عنصر خالی) <hr>
  13. HTML Attribute HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element. Each element or tag can have attributes, which defines the behaviour of that element. Attributes should always be applied with start tag. The Attribute should always be applied with its name and value pair. The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only. You can add multiple attributes in one HTML element, but need to give space between two attributes. Syntax <element attribute_name="value">content</element> Example <!DOCTYPE html> <html> <head> </head> <body> <h1> This is Style attribute</h1> <p style="height: 50px; color: blue">It will add style property in element</p> <p style="color: red">It will change the color of content</p> </body> </html>
  14. HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our HTML tutorial is developed for beginners and professionals. In our tutorial, every topic is given step-by-step so that you can learn it in a very easy way. If you are new in learning HTML, then you can learn HTML from basic to a professional level and after learning HTML with CSS and JavaScript you will be able to create your own interactive and dynamic website. But Now We will focus on HTML only in this tutorial. The major points of HTML are given below: HTML stands for HyperText Markup Language. HTML is used to create web pages and web applications. HTML is widely used language on the web. We can create a static website by HTML only. Technically, HTML is a Markup language rather than a programming language. HTML Example with HTML Editor In this tutorial, you will get a lot of HTML examples, at least one example for each topic with explanation. You can also edit and run these examples, with our online HTML editor. Learning HTML is fun, and it's very easy to learn.
  15. HTML Table HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements. In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags. HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page . HTML Table Tags توضیحات نام تگ یک جدول تعریف می کند <table> یک سطر جدید در جدول تعریف می کند <tr> یک سلول سرآیند در جدول تعریف می کند <th> یک سلول در جدول تعریف می کند <td> یک عنوان برای جدول تعریف می کند <caption> یک یا چند ستون را برای قالب بندی در جدول گروه بندی می کند <colgroup> همراه با عنصر <colgroup> استفاده می شود تا ویژگی های هر ستون را تعیین کند <col> محتوای بدنه جدول را گروه بندی می کند <tbody> محتوای سرآیند جدول را گروه بندی می کند <thead> محتوای پانویس جدول را گروه بندی می کند <tfooter> Tag Description <table> It defines a table. <tr> It defines a row in a table. <th> It defines a header cell in a table. <td> It defines a cell in a table. <caption> It defines the table caption. <colgroup> It specifies a group of one or more columns in a table for formatting. <col> It is used with <colgroup> element to specify column properties for each column. <tbody> It is used to group the body content in a table. <thead> It is used to group the header content in a table. <tfooter> It is used to group the footer content in a table. HTML Table Example Let's see the example of HTML table tag. It output is shown above. <table> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> Output: First_Name Last_Name Marks Sonoo Jaiswal ۶۰ James William ۸۰ Swati Sironi ۸۲ Chetna Singh ۷۲ In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values. HTML Table with Border There are two ways to specify border for HTML tables. By border attribute of table in HTML By border property in CSS 1) HTML Border attribute You can use border attribute of table tag in HTML to specify border. But it is not recommended now. <table border="1"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> 2) CSS Border property It is now recommended to use border property of CSS to specify border in table. <style> table, th, td { border: 1px solid black; } </style> You can collapse all the borders in one border by border-collapse property. It will collapse the border into one. <style> table, th, td { border: 2px solid black; border-collapse: collapse; } </style>
  16. HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. Let's see an example of HTML image. <h2>HTML Image Example</h2> <img src="good_morning.jpg" alt="Good Morning Friends"/> Attributes of HTML img tag The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below. 1) src It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server. The location of image may be on the same directory or another server. 2) alt The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective. 3) width It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute. 4) height It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute. Use of height and width attribute with img tag You have learnt about how to insert an image in your web page, now if we want to give some height and width to display image according to our requirement, then we can set it with height and width attributes of image. Output: <img src="animal.jpg" height="180" width="300" alt="animal image"> Note: Always try to insert the image with height and width, else it may flicker while displaying on webpage. Use of alt attribute We can use alt attribute with tag. It will display an alternative text in case if image cannot be displayed on browser. Following is the example for alt attribute: <img src="animal.png" height="180" width="300" alt="animal image"> How to get image from another directory/folder? To insert an image in your web, that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this: <img src=”E:/images/animal.png” height=”180″ width=”300″ alt=”animal image”> In above statement we have put image in local disk E------>images folder------>animal.png. Note: If src URL will be incorrect or misspell then it will not display your image on web page, so try to put correct URL. Use <img> tag as a link We can also link an image with other page or we can use an image as a link. To do this, put <img> tag inside the <a> tag. Example: <a href=”https://www.adrianbahmani.com/what-is-robotics”> <img src=”robot.jpg” height=”100″ width=”100″></a>
  17. HTML Anchor The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most important attribute of the HTML a tag. and which links to destination page or URL. href attribute of HTML anchor tag The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page. The syntax of HTML anchor tag is given below. <a href = "..........."> Link Text </a> Let's see an example of HTML anchor tag. <a href="second.html">Click for Second Page</a> Test it Now Specify a location for Link using target attribute If we want to open that link to another page then we can use target attribute of <a> tag. With the help of this link will be open in next page. Example: LINK <body> <a href="https://www.adrianbahmani.com">adrianbahmani</a> </body> Linked image <body> <p>بروی تصویر زیر کلیک کنید</p> <a href="https://www.adrianbahmani.com"> <img src="images/logo-1.png"> </a> </body> Link to email <body> <a href="[email protected]?subject=test&body=test" target="_top">ارسال ایمیل</a> </body> Link to phone number <body> <a href="tel:+98۰۰۰۰۰">تماس تلفنی با ما</a> </body> Link to the top of the page <!DOCTYPE html> <html id="Top"> <body> <a href="#Top">برو بالای صفحه</a> </body> </html> Nofollow <body> <a href="https://Test.com/" rel="nofollow">Test.com</a> </body> Interesting link <div style="text-align:center;"> <a href="https://www.adrianbahmani.com/">adrianbahmani.</a> <a href="https://www.adrianbahmani.com/">adrianbahmani.</a> <a href="https://www.adrianbahmani.com/">adrianbahmani.</a> </div> Opening the link in different modes <body> <a href="https://www.adrianbahmani.com" target="_self">Self</a> <br> <a href="https://www.adrianbahmani.com" target="_blank">Blank</a> <br> <a href="https://www.adrianbahmani.com" target="_parent">Parent</a> <br> <a href="https://www.adrianbahmani.com" target="_top">Top</a> </body>
  18. HTML Tags HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags. When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties. An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement. All HTML tags must enclosed within < > these brackets. Every tag in HTML perform different tasks. If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags) Syntax <tag> content </tag> HTML Tag Examples Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below: <p>paragraf tag </p> <h1>heading tag </h1> <b> bolt tag </b> Unclosed HTML Tags Some HTML tags are not closed, for example br and hr. <br> Tag: br stands for break line, it breaks the line of the code. <hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage. HTML Meta Tags DOCTYPE, title, link, meta and style HTML Text Tags <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br> HTML Link Tags <a> and <base> HTML Image and Object Tags <img>, <area>, <map>, <param> and <object> HTML List Tags <ul>, <ol>, <li>, <dl>, <dt> and <dd> HTML Table Tags table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption HTML Form Tags form, input, textarea, select, option, optgroup, button, label, fieldset and legend HTML Scripting Tags script and noscript Note: We will see examples using these tags in later charters. HTML Tags List Following is the complete list of HTML tags with the description which are arranged alphabetically. Note: Here represents newly added Elements in HTML5.
×
×
  • Create New...