Description of basic html elements (tags)

HTML attributes

Elements may contain attributes that are used to set various properties of an element. Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example:

<h1 id="myHeader" style = “color:blue;margin-left:50%;"> Attribute “id” indicates specific name: “myHeader” of the element ”h1”. Attribute“style” states that this text is blue and is in the center of the screen. </h1>

Attribute	Belongs to tag	Description
alt	<area>, <img>, <input>	Specifies an alternate text when the original element fails to display.
height	<canvas>, <embed>,<iframe>, <img>, <input>, <video> .	Specifies the height of the element
href	<a>, <area>, <base>, <link>	Specifies the URL of the page the link goes to.
id	GlobalAttributes	Specifies a unique id for an element.
src	<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>	Specifies the URL of the media file.
style	GlobalAttributes	Specifies an inline CSS style for an element.

Inserting images

To insert image you should use <img> tag.It contains attributes only (src, alt, width, height), and does not have a closing tag.The src attribute specifies the URL (web address) of the image. The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).If a browser cannot find an image, it will display the value of the alt attribute.

<imgsrc = "image name.jpg" height = "480" width = "640" alt = "Your browser don’t support images"/>

NOTE: Always specify the width and height of an image. If width and height are not specified, the page will flicker while the image loads. Width and height parameters can be indicate either in pixels (i.e. 100px) or percents of the current canvas screen (10%).

NOTE:If not specified, the browser expects to find the image in the same folder as the web page.However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

<imgsrc = "/Test images/image name.jpg" height = "480" width = "640" alt = "Your browser don’t support images"/>

HTML Links

Types of links:Hyperlinks (absolute links); Local links (relative links); Bookmarks.

NOTE:A link does not have to be text. It can be an image or any other HTML element. To use an image as a link, simply nest the <img> tag inside the <a> tag.

Hyperlinks

Links are found in nearly all web pages. Links allow users to click their way from page to page. Any HTML links are hyperlinks. You can click on a link and jump to another document. The key here is an oddly named tag called the anchor tag. This tag is encased in an <a></a> set of tags and contains all the information needed to manage links between pages.

<a href = "http://www.wikipedia.org">wikipedia.</a>

The href attribute specifies the destination address (http://www.wikipedia.org) of the link.The link text(wikipedia.) is the visible part and displayed on the page.

Local links

Relative references are used when your website includes more than one page. You might choose to have several pages and a link mechanism for moving among them. Example below will lead us from current page to the “About” page.

<a href = "about.html">About</a>

Bookmarks

HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks can be useful if your webpage is very long. To make a bookmark, you must first create the bookmark, and then add a link to it. When the link is clicked, the page will scroll to the location with the bookmark.

1. Create bookmark with the id attribute:

<p id = “Section1”> Section 1 text </p>

2. Add a link to the bookmark ("Section 1 "), from within the same page:

<a href =”#Section1”> Jump to section 1 </a>

HTML Symbol and Entities

Some characters are reserved in HTML.If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.Character entities are used to display reserved characters in HTML. Many mathematical, technical, and currency symbols, are not present on a normal keyboard.To add such symbols to an HTML page, you can use an HTML entity name.If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.A syntax of entity and symbols usage in html:

&entity_name; OR&#entity_number;

Tableofcommonhtmlsymbols