Eastern Mediterranean University School of Computing and Technology

Contents 3. 1 Working With Text 3. 2 Page Formatting 3. 3 Adding Images

3. 1 Working With Text Headings v Headings are used to define the headers

3. 1 Working With Text Headings Example Output <!DOCTYPE html> <body> <h 1>ITEC 229</h

3. 1 Working With Text Paragraphs v <p>. . </p> tags used to define

3. 1 Working With Text Formatting Elements v Formatting elements were designed to display

3. 1 Working With Text Formatting Elements Example Output <DOCTYPE html> <body> <p>This text

3. 1 Working With Text Font, Size and Color of a Text (HTML 4

3. 1 Working With Text Alignment of a Text (HTML 4 !!!) v <CENTER>

3. 1 Working With Text Alignment of a Text (HTML 4 !!!) Example <!DOCTYPE

3. 1 Working With Text Alignment of a Text (HTML 4 !!!) Output !!!

3. 1 Working With Text Special Characters (Symbol Entities) v There are times when

3. 1 Working With Text Special Characters (Symbol Entities) v A few of the

3. 1 Working With Text Special Characters (Symbol Entities) Symbol Description Entity Name Entity

3. 2 Page Formatting Adding a Line Break v By default, browsers ignore many

3. 2 Page Formatting Adding a Line Break Example <!DOCTYPE html> <body> ITEC 229

3. 2 Page Formatting Inserting Blank Space v Any blank spaces that you type

3. 2 Page Formatting Inserting Blank Space Example <!DOCTYPE html> <body> <p>ITEC 229</p> <p>This

3. 2 Page Formatting Preformatted Text v The <pre>. . </pre> tags allow you

3. 2 Page Formatting Preformatted Text Example <!DOCTYPE html> <body> <p>ITEC 229: Client-Side Internet

3. 2 Page Formatting Page’s Background, Text and Link Color (HTML 4 !!!) v

3. 2 Page Formatting Page’s Background, Text and Link Color (HTML 4 !!!) Example

3. 2 Page Formatting Page’s Background Image (HTML 4 !!!) v For adding a

3. 2 Page Formatting <DIV> and <SPAN> Elments v The <div> tag defines a

3. 2 Page Formatting <DIV> and <SPAN> Elments v The <span> tag is used

3. 2 Page Formatting <DIV> and <SPAN> Elments Example <!DOCTYPE html> <body> ITEC 229:

3. 2 Page Formatting Horizontal Lines v Horizontal line (sometimes called horizontal rule) is

3. 2 Page Formatting Horizontal Lines Example <!DOCTYPE html> <body> <HR><HR width="80%" size="3"> <HR

3. 2 Page Formatting Horizontal Lines Output 33 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 3 Adding IMAGES v Images are a good way to add interest to

3. 3 Adding IMAGES v The <img> tag has one required (src) and some

3. 3 Adding IMAGES Examples <!DOCTYPE html> <body> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="raygan. jpg" alt="Raygan Kansoy"> <img

3. 4 Creating LINKS Hyperlinks v A link to an internal page on the

3. 4 Creating LINKS Hyperlinks Examples <!DOCTYPE html> <!-- Linking to other web pages.

3. 4 Creating LINKS Hyperlinks – Internal Linking v When you link your pages

3. 4 Creating LINKS Hyperlinks – Internal Linking v If you are in main

3. 4 Creating LINKS The Target Attribute v By default, HTML links will open

3. 4 Creating LINKS The Target Attribute Examples <!DOCTYPE html> <head> <meta charset =

3. 4 Creating LINKS Hyperlinking to an E-Mail Address v Email links are created

3. 4 Creating LINKS Hyperlinking to an E-Mail Address v You can also have

3. 4 Creating LINKS Bookmarks v HTML anchor or Html Bookmark is helpful, if

3. 4 Creating LINKS Bookmarks Example Output <!DOCTYPE html> <body> <a href="#bottom">Go. To Bottom</a>

3. 4 Creating LINKS Bookmarks Examples <!DOCTYPE html> <head><meta charset="utf-8"><title>Bookmarks</title></head> <body> <div id="top"> Top

3. 4 Creating LINKS Download Links v Downloading files from your website is a

3. 4 Creating LINKS Download Links Examples <!DOCTYPE html> <head><meta charset="utf-8"><title>Download Links</title></head> <body> <h

Slides: 50

Download presentation

Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC 229 Client-Side Internet and Web Programming Adding a Content CHAPTER 3 Prepared by: R. Kansoy LOGO

Contents 3. 1 Working With Text 3. 2 Page Formatting 3. 3 Adding Images 3. 4 Creating Links 2 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Headings v Headings are used to define the headers of the HTML document v HTML offers six different levels of headings. § <h 1>. . </h 1> § <h 2>. . >/h 2> § <h 3>. . </h 3> § <h 4>. . </h 4> § <h 5>. . </h 5> § <h 6>. . </h 6> v While <h 1> defines the largest (most important) heading, <h 6> defines the smallest (least important) heading. v Browsers automatically add some white space (a margin) before and after a heading. v Search engines use the headings to index the structure and content of your web pages. 3 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Headings Example Output <!DOCTYPE html> <body> <h 1>ITEC 229</h 1> <h 2>ITEC 229</h 2> <h 3>ITEC 229</h 3> <h 4>ITEC 229</h 4> <h 5>ITEC 229</h 5> <h 6>ITEC 229</h 6> </body> </html> Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold. 4 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Paragraphs v . . tags used to define a paragraph in HTML document v Browsers automatically add some white space (a margin) before and after a paragraph. Example Output <!DOCTYPE html> <body> This is the 1. paragraph. And this is the 2. paragraph. </body> </html> 5 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Formatting Elements v Formatting elements were designed to display special types of text: § § § 6 § § § - Bold text, without any extra importance - Important text, with added semantic "strong" importance - Italic text, without any extra importance - Emphasized text, with added semantic importance - Represents some text that should be stylistically different from normal text, such as misspelled words <ins> - Inserted text Note: - Marked text Browsers display as , and as . However, there is a - Small text difference in the meaning of these <del> - Deleted text tags: and defines bold and italic text, but and - Subscript text means that the text is "important". - Superscript text http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Formatting Elements Example Output <DOCTYPE html> <body> This text is normal. This text is bold. This text is strong. This text is italic. This text is emphasized. This text is misspselled. This text is <ins>inserted. </ins> </body> </html> 7 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Formatting Elements Example Output <!DOCTYPE html> <body> This text is Marked or Highlighted This is a Small Text This text is <del>Removed</del> or <del>Deleted</del> This is subscript and superscript </body> </html> 8 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Font, Size and Color of a Text (HTML 4 !!!) v The tag specifies the font face, font size, and color of text. v Face, Size and Color are the attributes of the tag. v Face; § Font of the text you are formatting § Be careful to use common fonts like Times, Arial, Verdana § Browser will display the text in a default font if it is unable to display specified font v Size; § Specifies the size of the text inside a element § Default text size is 3 (16 px) for the browser § To make text larger, set size to 4/5/6/7 9 § To make text smaller, set size to 2/1/-1/-2 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Font, Size and Color of a Text (HTML 4 !!!) v Color; § Specifies the color of the text inside a element. § Attribute Values Value Description color_name Specifies the text color with a color name (like "red") hex_number Specifies the text color with a hex code (like "#ff 0000") rgb_number Specifies the text color with an rgb code (like "rgb(255, 0, 0)") !!! The tag and its face, size and color attributes are not supported in HTML 5. Use CSS instead. 10 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Font, Size and Color of a Text (HTML 4 !!!) Example <!DOCTYPE html> <body> This text is larger and purple. This is a text in a default font, size and color. This text is smaller and green. Note: The font element is not Supported in HTML 5. Use CSS instead. </body> </html> 11 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Font, Size and Color of a Text (HTML 4 !!!) Output 12 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Alignment of a Text (HTML 4 !!!) v <CENTER> tag used for centering the text on the page. v The align attribute specifies the alignment of the text Attribute Values Value Description left Left-align text right Right-align text center Center-align text justify Stretches the lines so that each line has equal width !!! The <CENTER> tag and ALIGN attribute are not supported in HTML 5. Use CSS instead. 13 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Alignment of a Text (HTML 4 !!!) Example <!DOCTYPE html> <body> <CENTER><H 2>This header is CENTERED. </H 2></CENTER> <H 3 align="left">This header is LEFT-aligned. </H 3> <H 4 align="right">This header is RIGHT-aligned. </H 4> This paragraph is CENTER-aligned. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. </body> </html> 14 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Alignment of a Text (HTML 4 !!!) Output !!! The <CENTER> tag and ALIGN attribute are not supported in HTML 5. Use CSS instead. 15 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Special Characters (Symbol Entities) v There are times when it becomes necessary to display characters and symbols that are not available on a standart keyboard such as copyright sign or that have special meaning in HTML (<, >, &, etc. ) v To accomplish this, HTML uses Special Character Entity tag. v To add such symbols to an HTML page, you can use an HTML entity name. v If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference. v The tag takes the format of an ampersand (&), followed by the name/code and a semicolon. v There are literally hundreds of special charactes entities currently available. 16 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Special Characters (Symbol Entities) v A few of the more common character entities are listed below; Symbol Description Entity Name Entity Number non-breaking space < less than < < > greater than > > & ampersand & & " double quotation mark " " ' single quotation mark ' ' ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € 17 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 1 Working With Text Special Characters (Symbol Entities) Symbol Description Entity Name Entity Number © copyright © © ® registered trademark ® ® ¼ fraction one quarter &frac 14; ¼ ½ fraction one half &frac 12; ½ ¾ fraction three quarters &frac 34; ¾ v Be carefull!!! Entity names are case sensitive. v Advantage of using an entity name: An entity name is easy to remember. v Disadvantage of using an entity name: Browsers may not support all entity names, but the support for numbers is good. 18 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Adding a Line Break v By default, browsers ignore many formatting keystrokes that we take for granted. v Exaples include the "Enter" and "Tab" keys and multiple uses of the spacebar. v To accomplish the same tasks in HTML, page formatting tags are used. v Web browsers wrap text automatically to the next line when the current line reaches the right side of the browser. v If you want to avoid wrapping and begin text on a new line tag sould be used. v The tag doesn’t have an end tag. v Additional lines between paragraphs can also be added by using tag. v Each tag creates another blank line. 19 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Adding a Line Break Example <!DOCTYPE html> <body> ITEC 229 Client-Side Internet and Web Programming ITEC 229 Client-Side Internet and Web Programming ITEC 229 Client-Side Internet and Web Programming </body> </html> Output 20 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Inserting Blank Space v Any blank spaces that you type in your text (beyond a single space between words) are ignored by browser. v You must code your desired blank spaces into your document. v You must use the entity for each space you wish to add. v For example, if you want to add multiple spaces between specific words, type in the appropriate amount of entities without any spaces between them. 21 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Inserting Blank Space Example <!DOCTYPE html> <body> ITEC 229 This would add five blank spaces </body> </html> Output 22 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Preformatted Text v The <pre>. . </pre> tags allow you to maintain the integrity of the spacing and formatting of your text so that browsers will display it as you have typed it. v If you want to avoid some of the repetitive coding that comes with multiple spacing in your document, you can use the preformatted tags <pre>. . </pre>. 23 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Preformatted Text Example <!DOCTYPE html> <body> ITEC 229: Client-Side Internet and Web Programming <pre> ITEC 229: Client-Side Internet and Web Programming ITEC 230: Rich Internet Applications (RIA) Development ITEC 327: Server-Side Internet and Web Programming </pre> </body> </html> Output 24 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Page’s Background, Text and Link Color (HTML 4 !!!) v By default, the backround color of HTML pages are white, text color is black and link color is blue. v To change the background color, place the bgcolor attribute within the <body> start tag of the page: <body bgcolor=" " > v For very basic colors, color names can be used. For other colors HTML coding uses hexadecimal values to assign colors. Hexadecimal are assigned by typing a number sign (#) followed by a six character value. v To change the default text color for a document use text attribute within the <body> tag: <body text=" " > v To change the default (unvisited) link color for a document use link attribute within the <body> tag: <body link=" " > !!! The bgcolor, text and link attributes are not supported in HTML 5. Use CSS instead. 25 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Page’s Background, Text and Link Color (HTML 4 !!!) Example <!DOCTYPE html> <body bgcolor="lightyellow" text="lightgreen" link="pink"> <h 1>ITEC 229</h 1> Client-Side Internet and Web Programming. <a href="https: //staff. emu. edu. tr/raygankansoy">Visit ITEC 229 Web Site!</a> The bgcolor, text and link attributes are not supported in HTML 5. Use CSS instead. </body> </html> Output 26 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Page’s Background Image (HTML 4 !!!) v For adding a background image to the HTML page, background attribute is used within the <body> tag: <body background=" " > Example <!DOCTYPE html> <head> <title>Adding a Background Image</title> </head> <body background="bgimage. jpg"> </body> </html> !!! The background attrribute is not supported in HTML 5. Use CSS instead. 27 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting <DIV> and Elments v The <div> tag defines a division or a section in an HTML document. v <div> tag is used to group block-elements to format them with CSS. v Block-level elements (such as section, div, h 1, p) render with a line break before and after their content. v By default, browsers always place a line break before and after the <div> element. v Align attribute specifies the alignment of the content inside a <div> element but not supported in HTML 5. 28 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting <DIV> and Elments v The tag is used to group inline-elements in a document. v Inline-level elements does not change the flow of elements in the document. v Examples of inline elements include span, img, a, em and strong. v By default, does not apply any formatting to its contents and provides no visual change by itself. v The tag provides a way to add a hook to a part of a text or a part of a document. v Its primary purpose is to apply CSS rules or id attributes to a section of text. 29 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting <DIV> and Elments Example <!DOCTYPE html> <body> ITEC 229: Client-Side Internet and Web Programming. <div style="color: blue; font-weight: bold"> ITEC 229 </div> Client-Side Internet and Web Programming </body> </html> Output 30 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Horizontal Lines v Horizontal line (sometimes called horizontal rule) is used to break up information or add visual interest to web pages. v To insert a horizonntal line, place the <HR> tag where you want the line to appear in the document. There is no end (closing) tag of <HR>. v In HTML 5, the <HR> still display a horizontal line in visual browsers, but it is more commonly used as a themeatic break at the paragraph level. v <HR> attributes: (are not supported in HTML 5!!!) 31 § Width: Adjusts the width of the rule – Either a number in pixels or a percentage. § Size: Determines the height of the horizontal rule in pixels. § Align: Either left, right or center. § Noshade: Eliminates default shading effect and displays horizontal rule as a solid-color bar. http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Horizontal Lines Example <!DOCTYPE html> <body> <HR><HR width="80%" size="3"> <HR width="80%" size="4"><HR width="80%" size="5"> Size: 4 Width: 75% <HR width="75%" size="6" align="left"> Size: 12 Width: 25% <HR width="25%" size="12" align="right"> Size: 8 Width: 50% No shade. . . <HR NOSHADE width="50%" size="8" align="center"> </body> </html> 32 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 2 Page Formatting Horizontal Lines Output 33 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 3 Adding IMAGES v Images are a good way to add interest to wepages and come in different forms such as photographs and graphics. v There are many different file types used for images in wepages, the most commmon being; § GIF: most commonly used for simple, less-detailed images, such as graphics, logos, etc. (supports 256 colors). Also used to display short, simple animations. § JPEG: or JPG forshort supports literally millions of colors (called 24 biit) and is the format used when the image is complex , such as phptpgraphs and other detaill-rch images. § PNG: combines 24 bit support of JPG with advanced compression capabilities. v The <img> tag is used for adding an image in to a HTML 34 document. http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 3 Adding IMAGES v The <img> tag has one required (src) and some optional attributes; Attribute Value Description src name/url Specifies the name/url of an image alt text Specifies an alternate text for an image width pixels Specifies the width of an image height pixels Specifies the height of an image border pixels Specifies the width of the border around an image Not supported in HTML 5. align left, center, Specifies the alignment of an image right Not supported in HTML 5. v The <img> tag has no end (closing) tag. 35 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 3 Adding IMAGES Examples <!DOCTYPE html> <body> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="raygan. jpg" alt="Raygan Kansoy"> <img

3. 3 Adding IMAGES Examples <!DOCTYPE html> <body> <img src="raygan. jpg" alt="Raygan Kansoy"> <img src="raygan. jpg" alt="Raygan Kansoy" border="2" align="center"> <img src="logo. gif" alt="EMU"> <img src="logo. gif" alt="EMU" width="150" height="150" align="right"> <img src="http: //www. example. com/image. gif">  <img src="images/image. gif">  </body> </html> 36 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Hyperlinks v A link to an internal page on the same website, or to an external page on the web, is called an hyperlink. v Hyperlink is a pointer from one HTML document to another one, the destination may be the another page on the same website or some other page on the WWW. v The <a> tag is used to define links in HTML, while the "href" attribute is used to specify the URL (destination) you would like to link to. v The <a href=" "> tag is followed by the text that will be displayed to the user as Hypertext and then terminated with the </a> tag. v Web browsers typically underline text hyperlinks and color their text blue by default so that users can distinguish hyperlinks from plain text. v A link does not have to be text. It can be an image or any other HTML element. Any displayed element can act as a hyperlink. 37 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Hyperlinks Examples <!DOCTYPE html>  <html> <head> <meta charset = "utf-8"> <title>Links</title> </head> <body> <h 1>Here are my favorite sites: </h 1> Click a name to visit that site.  <a href = "http: //www. facebook. com">Facebook</a> <a href = "http: //www. twitter. com">Twitter</a> <!– create an image hyperlink --> <a href = "http: //www. emu. edu. tr"><img src="emu. jpg"></a> </body> </html> 38 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Hyperlinks – Internal Linking v When you link your pages within your own directory tree limit is called Internal Link. v While a user browsing your website , the browser is already in your directory, then you can points links from the current directory and don't need to specify a full URL path. v Consider a directory hierarchy like this; 39 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Hyperlinks – Internal Linking v If you are in main directory of mywebsite. com , and you want to link to html page tables/border. html from main directory you can code like this; <a href="html/tables/border. html">Table Border</a> v If you are in HTML directory of mywebsite. com , and you want to link to html page tables/border. html from HTML directory you can code like this <a href="tables/border. html">Table Border</a> v In this cases you can avoid a full URL path like : <a href="http: //www. mywebsite. com/html/tables/border. html"> Table Border </a> v If all your html files are in the same directory , you can give just file name and extension in HREF attribute. 40 <a href="border. html">Table Border</a> http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS The Target Attribute v By default, HTML links will open the URL in the same window (active window). However, with TARGET attribute of HTML Link Tag, you can have the new document open in a new window, or if you are using frames, it can open in targeted frame. The different values that can be assigned to target attribute are listed below; Target Value Description _blank Opens the linked document in a new window or tab _self Opens the linked document in the same window/tab/frame as it was clicked (this is default) _parent Opens the linked document in the immediate parent of the document that the link is in/ in the parent frame _top Opens the linked document in the full body of the window framename Opens the linked document in a named frame 41 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS The Target Attribute Examples <!DOCTYPE html> <head> <meta charset = "utf-8"> <title>Links</title></head> <body> <h 3>Click a name to visit that site. </h 3> <!–- opens the link in new window --> <a href="http: //www. emu. edu. tr" target="_blank">EMU</a>  <a href="http: //www. facebook. com" target="_self">Facebook</a>  <a href="http: //www. twitter. com" target="_top">Twitter</a> </body> </html> 42 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Hyperlinking to an E-Mail Address v Email links are created using the HTML anchor tag <a>. . </a>, which is the same tag used for creating links to another web page. v Here the only difference is that, rather than specifying a web URL, you have to set the HREF property equal to the mailto: email address. v When the user clicks this type of anchored link, most browsers launch the user’s default e-mail program (for example, Microsoft Outlook) to enable the user to write an email message to the linked address. v The form of an e-mail anchor is: <a href = "mailto: email. Address">…</a>. v If you want send email to more than one address, simply separate the email addresses with a comma. 43 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Hyperlinking to an E-Mail Address v You can also have the SUBJECT of the email automatically populated for your visitors. Examples <!DOCTYPE html> <body> Send E-mail to: <a href="mailto: raygan. kansoy@emu. edu. tr">Raygan Kansoy</a> <a href="mailto: raygan. kansoy@emu. edu. tr, rkansoy@gmail. com"> Raygan Kansoy</a> <a href="mailto: info@emu. edu. tr? Subject=Registration">Contact Us</a> </body> </html> 44 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Bookmarks v HTML anchor or Html Bookmark is helpful, if you have a long page that you want to allow the users to quickly navigate to different sections in the same web page or you can navigate to targeted location of the other web page. v The Anchor tag <a>. . </a> is using for creating bookmark links. v You can link to a bookmark on a different page, by mentioning the url of the page to the bookmark name in the href attribute: <a href="http: //mywebsite. com/index. html#toc"> Table of Contents </a> v In the following example, when you click on the link "Go. TO Bottom" the page will scroll down and position the bookmark "Bottom" at the top of the browser. 45 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Bookmarks Example Output <!DOCTYPE html> <body> <a href="#bottom">Go. To Bottom</a>  <a name="bottom">Bottom</a> This is the bottom of the page </body> </html> 46 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Bookmarks Examples <!DOCTYPE html> <head><meta charset="utf-8"><title>Bookmarks</title></head> <body> <div id="top"> Top of the Page!</div> Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and Java. Script it forms a triad of cornerstone technologies for the World Wide Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. <a href="#top">Go to Top</a> </body> </html> 47 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Download Links v Downloading files from your website is a great way to offer information that people can view offline, rather than view in the browser window. v With the help of an HTML download link, visitors can download any files from your website to their local computers. v Download links are created using the HTML anchor tag <a>. . </a>, which is the same tag used for creating links to another web page. v The only difference is that you have to set the HREF property equal to your download file, rather than specifying a web URL. v Using this download link, you can provide any type of downloadable files like pdf, mp 3, text, zip etc. from your website. v Do not forget that, before you creating the download link , you have to upload the file in the specified location of the download 48 link. http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

3. 4 Creating LINKS Download Links Examples <!DOCTYPE html> <head><meta charset="utf-8"><title>Download Links</title></head> <body> <h 3>Click the files to Download ---></h 3> <!–- download a ppt file --> <a href="http: //staff. emu. edu. tr/raygankansoy/itec 229/ch 1. ppt"> Chapter 1</a> <!–- download a pdf file --> <a href="http: //staff. emu. edu. tr/raygankansoy/itec 229/ch 2. pdf"> Chapter 2</a> <!– download a word file --> <a href="http: //www. yourwebsite. com/files/c 3. docx">Chapter 3</a> <!– download a zip file --> <a href="http: //www. yourwebsite. com/x. zip">Zip File</a>  <a href="http: //www. yourwebsite. com/files/song. mp 3">Song</a> </body> </html> 49 http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229

Adding a Content END of CHAPTER 3 LOGO http: //staff. emu. edu. tr/raygankansoy/en/teaching/itec 229