<a href="document URL"... attributes-list>link Text</a>

Transcription

1 HTML LINKS: A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag. <a href="document URL"... attributes-list>link Text</a> Ex: <title>linking to Other Sites</title> <p>movie Reviews: <ul> <li><a href=" <li><a href=" <li><a href=" Tomatoes</a></li> <li><a href=" </ul> </p> Result is:

2 The target Attribute: This attribute is used to specify the location where linked document is opened. Following are possible options: _blank Opens the linked document in a new window or tab. _self Opens the linked document in the same frame. _parent Opens the linked document in the parent frame. _top Opens the linked document in the full body of the window. targetframe Opens the linked document in a named targetframe. Ex: <title>hyperlink Example</title> <p>click any of the following links</p> <a href=" target="_blank">opens in New</a>

3 <a href=" target="_self">opens in Self</a> <a href=" target="_parent">opens in Parent</a> <a href=" target="_top">opens in Body</a> Download Links You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple, you just need to give complete URL of the downloadable file as follows: Ex: <title>hyperlink Example</title> <a href=" PDF File</a> Result is:

4 Linking to Other Pages on the Same Site: Ex: <title>linking to Other Pages on the Same Site</title> <p> <ul> <li><a href="index.html">home</a></li> <li><a href="about-us.html">about</a></li> <li><a href="movies.html">movies</a></li> <li><a href="contact.html">contact</a></li> </ul>

5 </p> Linking to a Page Section: You can create a link to a particular section of a given webpage by using name attribute. This is a two step process. First create a link to the place where you want to reach with-in a webpage and name it using <a...> tag as follows: <h1>html Text Links <a name="top"></a></h1> Second step is to create a hyperlink to link the document and place where you want to reach: <a href="html_text_links.htm#top">go to the Top</a> This will produce the link, where you can click on the link generated Go to the Top to reach to the top of the HTML Text Link tutorial. Ex: <title>linking to Other Pages on the Same Site</title> <a name="top"></a> <a href="#sec1">go to the Sec-1</a> <br /> <a href="#sec2">go to the Sec-2</a> <br /> <a href="#sec3">go to the Sec-3</a> <br /> <a href="#sec4">go to the Sec-4</a> <br /> <a name="sec1"></a> <h2>section-1</h2> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p>

6 Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> <a name="sec2"></a> <h2>section-2</h2> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> <a name="sec3"></a> <h2>section-3</h2> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> <a name="sec4"></a> <h2>section-4</h2> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Bluh-Bluh-Bluh-</p> Result is: <a href="#top">go to Top</a>

7 For the above window if you press Go to Sec3 link the below window appears

8 Adding Links to a Named Anchor in another Document: You can create a link that jumps to a section of another HTML document that is marked by a named anchor. The HTML for building a link to a named anchor in another HTML document is: Ex: <a href=file.htm#name>text to activate link</a> <hr> <a href="index.htm#usa">return to <i>volcano Web</i></a>

9 Ex: <a href= Introduction to Volcano Web</a> <a href= index.htm#intro> Introduction to Volcano Web</a> <a href= final/index.htm#intro> Introduction to Volcano Web</a> <a href=../ final/index.htm#intro> Introduction to Volcano Web</a> <a href=../../ final/index.htm#intro> Introduction to Volcano Web</a> Ex: <title>image Hyperlink Example</title> <p>click following link</p> <a href=" target="_self"> <img src="logo.jpg" alt="tutorials Point" border="0"/> </a>

10 Result is: HTML Tag: HTML <a> tag provides you option to specifiy an address to send an . While using <a> tag as an tag, you will use mailto: address along with href attribute. Following is the syntax of using mailto instead of using http. Ex: <a href= </a> <title> Links</title> <a Jon</a>

11 Result is: Ex: <title>links</title> <h1 id="top">film Folk</h1> <h2>festival Diary</h2> <p>here are some of the film festivals we will be attending this year. <br /> Please <a contact us</a> if you \ would like more information.</p> <h3>january</h3> <p><a href=" Sundance Film Festival</a><br /> Park City, Utah, USA<br /> January 2011</p> <h3>february</h3> <p><a href=" Tropfest</a><br /> Sydney, Australia<br /> 20 February 2011</p> <!-- additional content -->

12 <p><a href="about.html">about Film Folk</a></p> <p><a href="#top">top of page</a></p> Result is:

13 Adding Images HTML To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the following two attributes: src This tells the browser where it can find the image file. alt This provides a text description of the image which describes the image if you cannot see it. title You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tootip when the user hovers over the image. Ex: <title>adding Images</title> <img src="images/quokka.jpg" alt="quokka (Setonix brachyurus)" />

14 Height & Width of Images height This specifies the height of the image in pixels. width This specifies the width of the image in pixels. Ex: <title>height and Width of Images</title> <img src="images/quokka.jpg" alt="quokka" width="600" height="450" /> Where to Place Images in Your Code: Where an image is placed in the code will affect how it is displayed. Here are three examples of image placement that produce different results: 1: before a paragraph The paragraph starts on a new line after the image. 2: inside the start of a paragraph The first row of text aligns with the bottom of the image. 3: in the middle of a paragraph The image is placed between the words of the paragraph that it appears in.

15 Ex: <title>where to Place Images in Your Code</title> <div style="width:450"> <img src="images/bird.gif" alt="bird" width="100" height="100" /> <p>there are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p> <hr /> <p><img src="images/bird.gif" alt="bird" width="100" height="100" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p> <hr /> <p>there are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. <img src="images/bird.gif" alt="bird" width="100" height="100" /> Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p> </div> Result is:

16 Old Code: Aligning Images Horizontally The align attribute was commonly used to indicate how the other parts of a page should flow around an image. It has been removed from HTML5 left This aligns the image to the left (allowing text to flow around its right-hand side). right

17 This aligns the image to the right (allowing text to flow around its left-hand side). Ex: <title>aligning Images Horizontally</title> <div style="width:450"> <p><img src="images/bird.gif" alt="bird" width="100" height="100" align="left" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p> <hr /> <p><img src="images/bird.gif" alt="bird" width="100" height="100" align="right" />There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p> </div> Result is:

18 Aligning Images Vertically: top This aligns the first line of the surrounding text with the top of the image. middle This aligns the first line of the surrounding text with the middle of the image. bottom This aligns the first line of the surrounding text with the bottom of the image. Ex: <title>aligning Images Vertically</title> <div style="width:450"> <p><img src="images/bird.gif" alt="bird" width="100" height="100" align="top" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p> <hr /> <p><img src="images/bird.gif" alt="bird" width="100" height="100" align="middle" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p> <hr /> <p><img src="images/bird.gif" alt="bird" width="100" height="100" align="bottom" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p> </div>

19 Result is:

20 Ex: <title>images</title> <h1><img src="images/logo.gif" alt="from A to Zucchini" /></h1> <figure> <img src="images/chocolate-islands.jpg" alt="chocolate Islands" title="individual Chocolate Cakes" /> <p> <figcaption> This recipe for individual chocolate cakes is so simple and so delectable! </figcaption> </p> </figure> <h4>more Recipes:</h4> <p> <img src="images/lemon-posset.jpg" alt="lemon Posset" title="lemon Posset" /> <img src="images/roasted-brussel-sprouts.jpg" alt="roasted Brussel Sprouts" title="roasted Brussel Sprouts" /> <img src="images/zucchini-cake.jpg" alt="zucchini Cake" title="zucchini Cake" /> </p> Result is:

21

22 Set Image Width/Height You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size. Ex: <title>set Image Width and Height</title> <p>setting image width and height</p> <img src="test.png" alt="test Image" width="150" height="100"/> Set Image Border By default image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture. <title>set Image Border</title>

23 <p>setting image Border</p> <img src="images/test.jpg" alt="test Image" border="3"/> HTML TABLES The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the <table> tag in which the tag is used to create table rows and <td> tag is used to create data cells.

24 EX: <title>basic Table Structure</title> <table> <td>15</td> <td>15</td> <td>30</td> <td>45</td> <td>60</td> <td>45</td> <td>60</td> <td>90</td> <td>90</td> </table> Result is:

25 Ex: <title>html Tables</title> <table border="1"> <td>row 1, Column 1</td> <td>row 1, Column 2</td> <td>row 2, Column 1</td> <td>row 2, Column 2</td> </table> Result is: Here border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border then you can use border="0". Table Heading Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your

26 top row as table heading as shown below, otherwise you can use <th> element in any row. Ex: <title>html Table Header</title> <table border="1"> </table> <th>name</th> <th>salary</th> <td>ramesh Raman</td> <td>5000</td> <td>shabbir Hussein</td> <td>7000</td> Result is:

27 HTML BOX MODEL: All HTML elements can be considered as boxes. The box model allows us to add a border around elements, and to define space between elements. The image below illustrates the box model: Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent (şeffaf) Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent (şeffaf) Cellpadding and Cellspacing Attributes There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.

28 Ex: <title>html Table Cellpadding</title> <table border="1" cellpadding="5" cellspacing="5"> <th>name</th> <th>salary</th> <td>ramesh Raman</td> <td>5000</td> <td>shabbir Hussein</td> <td>7000</td> </table> Result is: Ex:

29 <title>html Table Cellpadding</title> <table border="1" cellpadding="5" cellspacing="45"> <th>name</th> <th>salary</th> <td>ramesh Raman</td> <td>5000</td> <td>shabbir Hussein</td> <td>7000</td> </table> Result is: Colspan and Rowspan Attributes You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

30 Ex: <title>html Table Colspan/Rowspan</title> <table border="1"> <th>column 1</th> <th>column 2</th> <th>column 3</th> <td rowspan="2">row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td> <td>row 2 Cell 2</td><td>Row 2 Cell 3</td> <td colspan="3">row 3 Cell 1</td> </table> Result is:

31 Tables Backgrounds You can set table background using one of the following two ways: bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute. EX: <title>html Table Background</title> <table border="1" bordercolor="green" bgcolor="yellow"> <th>column 1</th> <th>column 2</th> <th>column 3</th> <td rowspan="2">row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td> <td>row 2 Cell 2</td><td>Row 2 Cell 3</td> <td colspan="3">row 3 Cell 1</td> </table> Result is:

32 Ex: Image Background <title>html Table Background</title> <table border="1" bordercolor="green" background="images/test.gif"> <th>column 1</th> <th>column 2</th> <th>column 3</th> <td rowspan="2">row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td> <td>row 2 Cell 2</td><td>Row 2 Cell 3</td> <td colspan="3">row 3 Cell 1</td> </table> Result is: Table Height and Width You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area

33 Ex: <title>html Table Width/Height</title> <table border="1" width="400" height="150"> <td>row 1, Column 1</td> <td>row 1, Column 2</td> <td>row 2, Column 1</td> <td>row 2, Column 2</td> </table> Result is: EX: Table Caption The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is depracated in newer version of HTML/XHTML.

34 Example: <title>html Table Caption</title> <table border="1" width="100%"> <caption>this is the caption</caption> <td>row 1, column 1</td><td>row 1, columnn 2</td> <td>row 2, column 1</td><td>row 2, columnn 2</td> </table> Result is: Table Header, Body, and Footer Tables can be divided into three portions: a header, a body, and a foot. The three elements for separating the head, body, and foot of a table are: <thead> - to create a separate table header. <tbody> - to indicate the main body of the table. <tfoot> - to create a separate table footer. A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

35 Ex: <table> <thead> <th>date</th> <th>income</th> <th>expenditure</th> </thead> <tbody> <th>1st January</th> <td>250</td> <td>36</td> <th>2nd January</th> <td>285</td> <td>48</td> <!-- additional rows as above --> <th>31st January</th> <td>129</td> <td>64</td> </tbody> <tfoot> <td></td> <td>7824</td> <td>1241</td> </tfoot> </table> Nested Tables <title>nested Tables </title>

36 <table border="1"> <td> <p>this is a paragraph</p> <p>this is another paragraph</p> </td> <td>this cell contains a table: <table> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </table> </td> <td>this cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>hello</td> </table> Result is:

37 Width & Spacing The width attribute was used on the opening <table> tag to indicate how wide that table should be and on some opening <th> and <td> tags to specify the width of individual cells. The value of this attribute is the width of the table or cell in pixels. The columns in a table need to form a straight line, so you often only see the width attribute on the first row (and all subsequent rows would use that setting). EX: <title>width and Spacing</title> <table border="1" width="400" cellpadding="10" cellspacing="5"> <th width="150"></th> <th>withdrawn</th> <th>credit</th> <th width="150">balance</th> <th>january</th> <td>250.00</td> <td>660.50</td>

38 </table> Result is: <td>410.50</td> <th>february</th> <td>135.55</td> <td>895.20</td> <td> </td> EX: <title>border and Background</title> <table border="2" bgcolor="#efefef"> <th width="150"></th> <th>withdrawn</th> <th>credit</th> <th width="150" bgcolor="#cccccc">balance</th> <th>january</th> <td>250.00</td> <td>660.50</td> <td bgcolor="#cccccc">410.50</td> <th>february</th> <td>135.55</td> <td>895.20</td> <td bgcolor="#cccccc"> </td> </table>

39 Result is: Meta Tags You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by and tags. A meta tag can have following attributes in addition to core attributes: Attribute Description Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc. content Specifies the property's value. scheme Specifies a scheme to interpret the property's value (as declared in the content attribute). httpequiv Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie. Specifying Keywords

40 You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose. EX: <title>meta Tags Example</title> <meta name="keywords" content="html, Meta Tags, Metadata" /> <p>hello HTML5!</p> Document Description You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purpose. EX: <title>meta Tags Example</title> <meta name="keywords" content="html, Meta Tags, Metadata" /> <meta name="description" content="learning about Meta Tags." /> <p>hello HTML5!</p> Document Revision Date You can use <meta> tag to give information about when last time the document was updated. This information can be used by various web browsers while refreshing your webpage. EX:

41 <title>meta Tags Example</title> <meta name="keywords" content="html, Meta Tags, Metadata" /> <meta name="description" content="learning about Meta Tags." /> <meta name="revised" content="tutorialspoint, 3/7/2014" /> <p>hello HTML5!</p> Document Refreshing A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically. EX: If you want your page keep refreshing after every 5 seconds then use the following syntax. <title>meta Tags Example</title> <meta name="keywords" content="html, Meta Tags, Metadata" /> <meta name="description" content="learning about Meta Tags." /> <meta name="revised" content="tutorialspoint, 3/7/2014" /> <meta http-equiv="refresh" content="5" /> <p>hello HTML5!</p> Page Redirection You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds. EX: Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute. <title>meta Tags Example</title>

42 <meta name="keywords" content="html, Meta Tags, Metadata" /> <meta name="description" content="learning about Meta Tags." /> <meta name="revised" content="tutorialspoint, 3/7/2014" /> <meta http-equiv="refresh" content="5" url= /> <p>hello HTML5!</p> Setting Author Name You can set an author name in a web page using meta tag. See an example below: EX: <title>meta Tags Example</title> <meta name="keywords" content="html, Meta Tags, Metadata" /> <meta name="description" content="learning about Meta Tags." /> <meta ame="author" content="mahnaz Mohtashim" /> <p>hello HTML5!</p> Specify Character Set You can use <meta> tag to specify character set used within the webpage. Example By default, Web servers and Web browsers use ISO (Latin1) encoding to process Web pages. Following is an example to set UTF-8 encoding: <title>meta Tags Example</title> <meta name="keywords" content="html, Meta Tags, Metadata" /> <meta name="description" content="learning about Meta Tags." /> <meta ame="author" content="mahnaz Mohtashim" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" />

43 <p>hello HTML5!</p> HTML FORMS HTML Forms are required when you want to collect some data from the site visitor. For example during user registration you would like to collect information such as name, address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. There are various form elements available like text fields, textarea fields, dropdown menus, radio buttons, checkboxes, etc. The HTML <form> tag is used to create an HTML form and it has following syntax: <form action="script URL" method="get POST"> form elements like input, textarea etc. </form> Form Attributes Apart from common attributes, following is a list of the most frequently used form attributes:

44 Attribute Description action Backend script ready to process your passed data. method Method to be used to upload data. The most frequently used are GET and POST methods. target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc. enctype You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are: application/x-www-form-urlencoded - This is the standard method most forms use in simple scenarios. mutlipart/form-data - This is used when you want to upload binary data in the form of files like image, word file etc. HTML Form Controls There are different types of form controls that you can use to collect data using HTML form: Text Input Controls Checkboxes Controls Radio Box Controls Select Box Controls File Select boxes Hidden Controls Clickable Buttons Submit and Reset Button Text Input Controls There are three types of text input used on forms:

45 Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag. Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag. Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag. Single-line text input controls This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag. Syntax: <input type="text" name="" value="" size= maxlength= > Attributes Following is the list of attributes for <input> tag for creating text field. Attribute Description type Indicates the type of input control and for text input control it will be set to text. name Used to give a name to the control which is sent to the server to be recognized and get the value. value This can be used to provide an initial value inside the control. size Allows to specify the width of the text-input control in terms of characters. maxlength Allows to specify the maximum number of characters a user can enter into the text box.

46 Example Here is a basic example of a single-line text input used to take first name and last name: <title>text Input Control</title> <form > First name: <input type="text" name="first_name" /> <br> Last name: <input type="text" name="last_name" /> </form> Result is: Password input controls This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set topassword. Example Here is a basic example of a single-line password input used to take user password: <title>password Input Control</title> <form >

47 User ID : <input type="text" name="user_id" /> <br> Password: <input type="password" name="password" /> </form> Result is: