Tag: learn html

HTML <area> href Attribute

Example An image-map, with clickable areas: <img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”> <map name=”planetmap”> <area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”> <area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”> <area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”> </map> Try it Yourself » Definition and Usage The href attribute specifies the hyperlink target for the area. If the href attribute is not present, the <area> tag is not a hyperlink. Differences Between HTML 4.01 and HTML5 In HTML5, if the <area> […]

HTML <area> download Attribute

Example An image-map with clickable areas that will be downloaded when clicked on: <img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”> <map name=”planetmap”> <area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”info_about_the_sun.htm”download=”sun”> <area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”merglobe.gif”download=”mercury”> <area shape=”circle” coords=”124,58,8″ alt=”Venus”href=”information_about_the_planet_venus.txt” download=”venus”> </map> Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink. This attribute is only used if […]

HTML <object> Tag

Example How to use the <object> element to embed a Flash file: <object width=”400″ height=”400″ data=”DW.swf”></object> Try it Yourself » Definition and Usage The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages. You can also use the […]

HTML <address> Tag

Example Contact information for Example.com: <address> Written by <a href=”mailto:webmaster@example.com”>Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> Try it Yourself » Definition and Usage The <address> tag defines the contact information for the author/owner of a document or an article. If the <address> element is inside the <body> element, it represents contact information for […]

HTML DOM Abbreviation Object

Abbreviation Object The Abbreviation object represents an HTML <abbr> element. Access an Abbreviation Object You can access an <abbr> element by using getElementById(): Example var x = document.getElementById(“myAbbr”); Try it Yourself » Create an Abbreviation Object You can create an <abbr> element by using the document.createElement() method: Example var x = document.createElement(“ABBR”); Try it Yourself » Standard […]

HTML <!DOCTYPE> Declaration

Example <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head><body> The content of the document…… </body></html> Try it Yourself » Definition and Usage The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser […]

HTML <!–…–> Tag

Example An HTML comment: <!–This is a comment. Comments are not displayed in the browser–> <p>This is a paragraph.</p> Try it Yourself » Definition and Usage The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can […]

HTML Images

Images can improve the design and the appearance of a web page. HTML Images Syntax In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image: <img src=”url“> The alt Attribute The alt attribute provides an alternate text for an […]

HTML Lists

HTML List Example An Unordered List: Item Item Item Item An Ordered List: First item Second item Third item Fourth item Try it Yourself » Unordered HTML List An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default: Example <ul> […]

HTML Block and Inline Elements

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as […]

HTML File Paths

Path Description <img src=”picture.jpg”> picture.jpg is located in the same folder as the current page <img src=”images/picture.jpg”> picture.jpg is located in the images folder in the current folder <img src=”/images/picture.jpg”> picture.jpg is located in the images folder at the root of the current web <img src=”../picture.jpg”> picture.jpg is located in the folder one level up […]

HTML Computer Code Elements

Computer Code <code> x = 5;<br> y = 6;<br> z = x + y; </code> Try it Yourself » HTML <kbd> For Keyboard Input The HTML <kbd> element represents user input, like keyboard input or voice commands. Text surrounded by <kbd> tags is typically displayed in the browser’s default monospace font: Example <p>Save the document by pressing <kbd>Ctrl + S</kbd></p> […]

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML Links – Hyperlinks HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. […]

HTML Comments

Comment tags are used to insert comments in the HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!– Write your comments here –> Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag. Note: Comments are not […]

HTML Styles

The HTML Style Attribute Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax: <tagname style=”property:value;“> The property is a CSS property. The value is a CSS value. You will learn more about CSS later in this tutorial. HTML Background Color The background-color property defines the background color for an HTML element. This example sets […]

HTML Paragraphs

The HTML <p> element defines a paragraph: Example <p>This is a paragraph.</p> <p>This is another paragraph.</p> Try it Yourself » Note: Browsers automatically add some white space (a margin) before and after a paragraph. HTML Display You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you […]

HTML Headings

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Example <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> Try it Yourself » Note: Browsers automatically add some white space (a margin) before and […]

HTML Elements

An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>Content goes here…</tagname> The HTML element is everything from the start tag to the end tag: <p>My first paragraph.</p> Start tag Element content End tag <h1> My First Heading </h1> <p> My first paragraph. </p> <br> HTML elements with no content are called […]

HTML Basic Examples

Don’t worry if these examples use tags you have not learned. You will learn about them in the next chapters. HTML Documents All HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. Example <!DOCTYPE html> <html> <body> <h1>My […]