Scribd
Upload
20 views50 pages

INSY214 Chapter3

The document discusses adding content to web pages, including working with text, page formatting, adding images and creating links. It covers HTML elements for headings, paragraphs, and text formatting as well as font styles and text alignment. Special characters can be displayed using entity references.

Uploaded by

kylan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views50 pages

INSY214 Chapter3

The document discusses adding content to web pages, including working with text, page formatting, adding images and creating links. It covers HTML elements for headings, paragraphs, and text formatting as well as font styles and text alignment. Special characters can be displayed using entity references.

Uploaded by

kylan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

INSY214

Web Design and Internet Technologies

Adding a Content
CHAPTER 3

Prepared by: D. Gichuki


Contents

3.1 Working With Text


3.2 Page Formatting
3.3 Adding Images
3.4 Creating Links

D. Gichuki
2
3.1 Working With Text
Headings
❖ Headings are used to define the headers of the HTML document
❖ HTML offers six different levels of headings.
▪ <h1>..</h1>
▪ <h2>..>/h2>
▪ <h3>..</h3>
▪ <h4>..</h4>
▪ <h5>..</h5>
▪ <h6>..</h6>
❖ While <h1> defines the largest (most important) heading, <h6> defines
the smallest (least important) heading.
❖ Browsers automatically add some white space (a margin) before and after
a heading.
❖ Search engines use the headings to index the structure and content of
your web pages.
D. Gichuki 3
3.1 Working With Text
Headings
Example Output

<!DOCTYPE html>
<html>
<body>

<h1>ITEC229</h1>
<h2>ITEC229</h2>
<h3>ITEC229</h3>
<h4>ITEC229</h4>
<h5>ITEC229</h5>
<h6>ITEC229</h6>

</body>
</html>

Note: Use HTML headings for headings only. Don't use headings to
make text BIG or bold.
D. Gichuki 4
3.1 Working With Text
Paragraphs
❖ <p>..</p> tags used to define a paragraph in HTML document
❖ Browsers automatically add some white space (a margin) before and after
a paragraph.

Example Output
<!DOCTYPE html>
<html>
<body>

<p>This is the 1. paragraph.</p>


<p> And this is the 2. paragraph.</p>

</body>
</html>

D. Gichuki 5
3.1 Working With Text
Text Formatting Elements
❖ Formatting elements were designed to display special types of
text:
▪ <b> - Bold text, without any extra importance
▪ <strong> - Important text, with added semantic "strong" importance
▪ <i> - Italic text, without any extra importance
▪ <em> - Emphasized text, with added semantic importance
▪ <u> - Represents some text that should be stylistically different from
normal text, such as misspelled words
▪ <ins> - Inserted text Note:
▪ <mark> - Marked text Browsers display <strong> as <b>, and <em> as
▪ <small> - Small text <i>. However, there is a difference in the
meaning of these tags: <b> and <i> defines bold
▪ <del> - Deleted text and italic text, but <strong> and <em> means
▪ <sub> - Subscript text that the text is "important".

▪ <sup> - Superscript text


D. Gichuki 6
Text Formatting Elements
3.1 Working With Text
Example Output

<DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p>This text is <b>bold.</b></p>


<p>This text is <strong>strong.</strong></p>

<p>This text is <i>italic.</i></p>


<p>This text is <em>emphasized.</em></p>

<p>This text is <u>misspselled.</u></p>


<p>This text is <ins>inserted.</ins></p>

</body>
</html>

D. Gichuki 7
Text Formatting Elements
3.1 Working With Text
Example Output

<!DOCTYPE html>
<html>
<body>

<p>This text is <mark>Marked</mark> or


<mark>Highlighted</mark></p>

<p>This is a <small>Small
Text</small></p>

<p>This text is <del>Removed</del> or


<del>Deleted</del></p>

<p>This is <sub>subscript</sub> and


<sup>superscript</sup></p>

</body>
</html>
D. Gichuki 8
3.1 Working With Text
Font, Size and Color of a Text (HTML4 !!!)
❖ The <font> tag specifies the font face, font size, and color of
text.
❖ Face, Size and Color are the attributes of the <font> tag.
❖ 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
❖ Size;
▪ Specifies the size of the text inside a <font> element
▪ Default text size is 3 (16px) for the browser
▪ To make text larger, set size to 4/5/6/7
▪ To make text smaller, set size to 2/1/-1/-2
D. Gichuki 9
3.1 Working With Text
Font, Size and Color of a Text (HTML4 !!!)
❖ Color;
▪ Specifies the color of the text inside a <font> element.
▪ <font color="color_name/hex_number/rgb_number">

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 "#ff0000")

rgb_number Specifies the text color with an rgb code (like


"rgb(255,0,0)")

!!! The <font> tag and its face, size and color attributes are not
supported in HTML5. Use CSS instead.
D. Gichuki 10
3.1 Working With Text
Font, Size and Color of a Text (HTML4 !!!)

Example
<!DOCTYPE html>
<html>
<body>

<P><FONT COLOR="purple" SIZE="5" FACE="Arial">This text is larger and purple.</FONT></P>

<P>This is a text in a default font, size and color. </P>

<P><FONT COLOR="green" SIZE="1" FACE="Verdana">This text is smaller and


green.</FONT></P>

<P><FONT COLOR="red" SIZE="6" FACE="Helvatica"> <strong>Note:</strong>The font element is


not Supported in HTML5. Use CSS instead.</P>

</body>
</html>

D. Gichuki 11
3.1 Working With Text
Font, Size and Color of a Text (HTML4 !!!)

Output

D. Gichuki 12
3.1 Working With Text
Alignment of a Text (HTML4 !!!)
❖ <CENTER> tag used for centering the text on the page.
❖ 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
HTML5. Use CSS instead.
D. Gichuki 13
3.1 Working With Text
Alignment of a Text (HTML4 !!!)

Example
<!DOCTYPE html>
<html>
<body>
<CENTER><H2>This header is CENTERED.</H2></CENTER>

<H3 align="left">This header is LEFT-aligned.</H3>

<H4 align="right">This header is RIGHT-aligned.</H4>

<P align="center">This paragraph is CENTER-aligned.</P>

<P align="justify">This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is


JUSTIFIED. This paragraph is JUSTIFIED.This paragraph is JUSTIFIED. This paragraph is JUSTIFIED.
This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This paragraph is JUSTIFIED. This
paragraph is JUSTIFIED. This paragraph is JUSTIFIED. </P>
</body>
</html>

D. Gichuki 14
3.1 Working With Text
Alignment of a Text (HTML4 !!!)

Output

!!! The <CENTER> tag and ALIGN attribute are not supported in
HTML5. Use CSS instead.
D. Gichuki 15
3.1 Working With Text
Special Characters (Symbol Entities)
❖ 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.)
❖ To accomplish this, HTML uses Special Character Entity tag.
❖ 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.
❖ The tag takes the format of an ampersand (&), followed by the
name/code and a semicolon.
❖ There are literally hundreds of special charactes entities
currently available.

D. Gichuki 16
3.1 Working With Text
Special Characters (Symbol Entities)
❖ A few of the more common character entities are listed below;
Symbol Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
D. Gichuki 17
3.1 Working With Text
Special Characters (Symbol Entities)

Symbol Description Entity Name Entity Number


© copyright &copy; &#169;
® registered trademark &reg; &#174;
¼ fraction one quarter &frac14; &#188;
½ fraction one half &frac12; &#189;
¾ fraction three quarters &frac34; &#190;

❖ Be carefull!!! Entity names are case sensitive.


❖ Advantage of using an entity name: An entity name is easy to
remember.
❖ Disadvantage of using an entity name: Browsers may not
support all entity names, but the support for numbers is good.

D. Gichuki 18
3.2 Page Formatting
Adding a Line Break
❖ By default, browsers ignore many formatting keystrokes
that we take for granted.
❖ Exaples include the "Enter" and "Tab" keys and multiple
uses of the spacebar.
❖ To accomplish the same tasks in HTML, page formatting
tags are used.
❖ Web browsers wrap text automatically to the next line when
the current line reaches the right side of the browser.
❖ If you want to avoid wrapping and begin text on a new line
<BR> tag sould be used.
❖ The <BR> tag doesn’t have an end tag.
❖ Additional lines between paragraphs can also be added by
using <BR> tag.
❖ Each tag creates another blank line.
D. Gichuki 19
3.2 Page Formatting
Adding a Line Break
Example
<!DOCTYPE html>
<html>
<body>
ITEC229
Client-Side Internet and Web Programming<br><br>

ITEC229 <br> Client-Side Internet and Web Programming

<p>ITEC229 <br> Client-Side Internet and Web Programming</p>


</body>
</html>
Output

D. Gichuki 20
3.2 Page Formatting
Inserting Blank Space
❖ Any blank spaces that you type in your text (beyond a
single space between words) are ignored by browser.
❖ You must code your desired blank spaces into your
document.
❖ You must use the entity &nbsp; for each space you wish to
add.
❖ For example, if you want to add multiple spaces between
specific words, type in the appropriate amount of entities
without any spaces between them.

D. Gichuki 21
3.2 Page Formatting
Inserting Blank Space
Example
<!DOCTYPE html>
<html>
<body>

<p>ITEC 229</p>

<p>This would add five blank &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; spaces</p>

</body>
</html>

Output

D. Gichuki 22
3.2 Page Formatting
Preformatted Text
❖ 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.
❖ 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>.

D. Gichuki 23
3.2 Page Formatting
Preformatted Text
Example
<!DOCTYPE html>
<html>
<body>
<p>ITEC229: Client-Side Internet and Web Programming</p>
<pre>
ITEC229: Client-Side Internet and Web Programming<br>
ITEC230: Rich Internet Applications (RIA) Development<br>
ITEC327: Server-Side Internet and Web Programming<br>
</pre>
</body>
</html>
Output

D. Gichuki 24
3.2 Page Formatting
Page’s Background, Text and Link Color (HTML4 !!!)
❖ By default, the backround color of HTML pages are white,
text color is black and link color is blue.
❖ To change the background color, place the bgcolor attribute
within the <body> start tag of the page:<body bgcolor=" " >
❖ 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.
❖ To change the default text color for a document use text
attribute within the <body> tag: <body text=" " >
❖ 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 HTML5. Use CSS instead.
D. Gichuki 25
3.2 Page Formatting
Page’s Background, Text and Link Color (HTML4 !!!)
Example
<!DOCTYPE html>
<html>
<body bgcolor="lightyellow" text="lightgreen" link="pink">
<h1>ITEC229</h1>
<p>Client-Side Internet and Web Programming.</p>
<p><a href="https://staff.emu.edu.tr/raygankansoy">Visit ITEC229 Web Site!</a></p>
<p><font color="red">The <strong>bgcolor</strong>, <strong>text</strong> and <strong>link</strong>
attributes are not supported in HTML5. Use CSS instead. </font></p>
</body>
</html>

Output

D. Gichuki 26
3.2 Page Formatting
Page’s Background Image (HTML4 !!!)
❖ For adding a background image to the HTML page,
background attribute is used within the <body> tag:
<body background=" " >
Example
<!DOCTYPE html>
<html>
<head>
<title>Adding a Background Image</title>
</head>

<body background="bgimage.jpg">

</body>
</html>

!!! The background attrribute is not supported in HTML5.


Use CSS instead.
D. Gichuki 27
3.2 Page Formatting
<DIV> and <SPAN> Elments

❖ The <div> tag defines a division or a section in an HTML


document.
❖ <div> tag is used to group block-elements to format them
with CSS.
❖ Block-level elements (such as section, div, h1, p) render
with a line break before and after their content.
❖ By default, browsers always place a line break before and
after the <div> element.
❖ Align attribute specifies the alignment of the content inside
a <div> element but not supported in HTML5.

D. Gichuki 28
3.2 Page Formatting
<DIV> and <SPAN> Elments

❖ The <span> tag is used to group inline-elements in a


document.
❖ Inline-level elements does not change the flow of elements
in the document.
❖ Examples of inline elements include span, img, a, em and
strong.
❖ By default, <span> does not apply any formatting to its
contents and provides no visual change by itself.
❖ The <span> tag provides a way to add a hook to a part of a
text or a part of a document.
❖ Its primary purpose is to apply CSS rules or id attributes to
a section of text.

D. Gichuki 29
3.2 Page Formatting
<DIV> and <SPAN> Elments
Example
<!DOCTYPE html>
<html>
<body>

ITEC229:Client-Side
<span style="color:blue; font-weight:bold"> Internet </span> and
<span style="color:blue; font-weight:bold"> Web </span>Programming.

<div style="color:blue; font-weight:bold"> ITEC229 </div> Client-Side Internet and Web Programming

</body>
</html>

Output

D. Gichuki 30
3.2 Page Formatting
Horizontal Lines
❖ Horizontal line (sometimes called horizontal rule) is used to
break up information or add visual interest to web pages.
❖ 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>.
❖ In HTML5, the <HR> still display a horizontal line in visual
browsers, but it is more commonly used as a themeatic break
at the paragraph level.
❖ <HR> attributes: (are not supported in HTML5!!!)
▪ 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.

D. Gichuki 31
3.2 Page Formatting
Horizontal Lines
Example
<!DOCTYPE html>
<html>
<body>

<HR><HR width="80%" size="3">


<HR width="80%" size="4"><HR width="80%" size="5">

<P align="left"><strong>Size:</strong>4 &nbsp; <strong>Width:</strong>75%


<HR width="75%" size="6" align="left">

<P align="right"><strong>Size:</strong>12 &nbsp;<strong>Width:</strong>25%


<HR width="25%" size="12" align="right">

<P align="center"><strong>Size:</strong>8 &nbsp;<strong>Width:</strong>50%


<strong><em> &nbsp; No shade...</em></strong>
<HR NOSHADE width="50%" size="8" align="center">

</body>
</html>

D. Gichuki 32
3.2 Page Formatting
Horizontal Lines

Output

D. Gichuki 33
3.3 Adding IMAGES
❖ Images are a good way to add interest to wepages and come
in different forms such as photographs and graphics.
❖ 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.
❖ The <img> tag is used for adding an image in to a HTML
document. D. Gichuki 34
3.3 Adding IMAGES
❖ 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 HTML5.
align left, center, Specifies the alignment of an image
right Not supported in HTML5.

❖ The <img> tag has no end (closing) tag.


D. Gichuki 35
3.3 Adding IMAGES
Examples
<!DOCTYPE html>
<html>
<body>

<img src="raygan.jpg">
<img src="raygan.jpg" alt="Raygan Kansoy">
<img src="raygan.jpg" alt="Raygan Kansoy" border="2" align="center">

<img src="logo.gif">
<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">
<!-- points to an image on another web site -->

<img src="images/image.gif">
<!-- points to an image in a folder -->

</body>
</html>

D. Gichuki 36
3.4 Creating LINKS
Hyperlinks
❖ A link to an internal page on the same website, or to an external
page on the web, is called an hyperlink.
❖ 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.
❖ 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.
❖ 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.
❖ Web browsers typically underline text hyperlinks and color their
text blue by default so that users can distinguish hyperlinks from
plain text.
❖ 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.
D. Gichuki 37
3.4 Creating LINKS Hyperlinks
Examples
<!DOCTYPE html>
<!-- Linking to other web pages. -->
<html>
<head>
<meta charset = "utf-8">
<title>Links</title>
</head>
<body>
<h1>Here are my favorite sites:</h1>
<p><strong>Click a name to visit that site.</strong></p>

<!-- create two text hyperlinks -->


<p><a href = "http://www.facebook.com">Facebook</a></p>
<p><a href = "http://www.twitter.com">Twitter</a></p>

<!– create an image hyperlink -->


<p><a href = "http://www.emu.edu.tr"><img src="emu.jpg"></a></p>
</body>
</html>
D. Gichuki 38
3.4 Creating LINKS
Hyperlinks – Internal Linking
❖ When you link your pages within your own directory tree
limit is called Internal Link.
❖ 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.
❖ Consider a directory hierarchy like this;

D. Gichuki 39
3.4 Creating LINKS
Hyperlinks – Internal Linking
❖ 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>
❖ 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>
❖ In this cases you can avoid a full URL path like :
<a href="http://www.mywebsite.com/html/tables/border.html">
Table Border </a>

❖ If all your html files are in the same directory , you can give just file name and
extension in HREF attribute.
<a href="border.html">Table Border</a>
D. Gichuki 40
3.4 Creating LINKS
The Target Attribute
❖ 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


D. Gichuki 41
3.4 Creating LINKS
The Target Attribute
Examples
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Links</title></head>
<body>
<h3>Click a name to visit that site.</h3>

<!–- opens the link in new window -->


<p><a href="http://www.emu.edu.tr" target="_blank">EMU</a></p>

<!-- opens the link in self window -->


<p><a href="http://www.facebook.com" target="_self">Facebook</a></p>

<!-- opens the link in full window -->


<p><a href="http://www.twitter.com" target="_top">Twitter</a></p>

</body>
</html>
D. Gichuki 42
3.4 Creating LINKS
Hyperlinking to an E-Mail Address
❖ Email links are created using the HTML anchor tag <a>..
</a>, which is the same tag used for creating links to
another web page.
❖ 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.
❖ 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.
❖ The form of an e-mail anchor is:
<a href = "mailto:emailAddress">…</a>.
❖ If you want send email to more than one address, simply
separate the email addresses with a comma.
D. Gichuki 43
3.4 Creating LINKS
Hyperlinking to an E-Mail Address
❖ You can also have the SUBJECT of the email automatically
populated for your visitors.
Examples
<!DOCTYPE html>
<html>
<body>

<p>Send E-mail to:


<a href="mailto:[email protected]">Raygan Kansoy</a></p>

<p><a href="mailto:[email protected], [email protected]">


Raygan Kansoy</a></p>

<br><br>
<a href="mailto:[email protected]?Subject=Registration">Contact Us</a>

</body>
</html>

D. Gichuki 44
3.4 Creating LINKS
Bookmarks
❖ 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.
❖ The Anchor tag <a>..</a> is using for creating bookmark
links.
❖ 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>
❖ In the following example, when you click on the link "GoTO
Bottom" the page will scroll down and position the
bookmark "Bottom" at the top of the browser.
D. Gichuki 45
3.4 Creating LINKS
Bookmarks
Example Output

<!DOCTYPE html>
<html>
<body>

<a href="#bottom">GoTo Bottom</a>


<br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><b
r>

<!--Bookmark comes here-->


<a name="bottom">Bottom</a>
<p>This is the bottom of the page </p>

</body>
</html>

D. Gichuki 46
3.4 Creating LINKS
Bookmarks
Examples
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Bookmarks</title></head>
<body>

<div id="top"> Top of the Page!</div>

<p>Hypertext Markup Language (HTML) is the standard markup language for creating web
pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of
cornerstone technologies for the World Wide Web.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.</p>

<p><a href="#top">Go to Top</a></p>

</body>
</html>

D. Gichuki 47
3.4 Creating LINKS
Download Links
❖ Downloading files from your website is a great way to offer
information that people can view offline, rather than view in
the browser window.
❖ With the help of an HTML download link, visitors can download
any files from your website to their local computers.
❖ Download links are created using the HTML anchor tag
<a> ..</a>, which is the same tag used for creating links to
another web page.
❖ The only difference is that you have to set the HREF property
equal to your download file, rather than specifying a web URL.
❖ Using this download link, you can provide any type of
downloadable files like pdf, mp3, text, zip etc. from your
website.
❖ Do not forget that, before you creating the download link , you
have to upload the file in the specified location of the download
link. D. Gichuki 48
3.4 Creating LINKS
Download Links
Examples
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Download Links</title></head>
<body>
<h3>Click the files to Download ---></h3>
<!–- download a ppt file -->
<p><a href="http://staff.emu.edu.tr/raygankansoy/itec229/ch1.ppt"> Chapter1</a></p>
<!–- download a pdf file -->
<p><a href="http://staff.emu.edu.tr/raygankansoy/itec229/ch2.pdf"> Chapter2</a></p>
<!– download a word file -->
<p><a href="http://www. yourwebsite.com/files/c3.docx">Chapter3</a></p>
<!– download a zip file -->
<p><a href="http://www. yourwebsite.com/x.zip">Zip File</a></p>
<!-- download a mp3 file -->
<p><a href="http://www.yourwebsite.com/files/song.mp3">Song</a></p>
</body>
</html>

D. Gichuki 49
Adding a Content

END of CHAPTER 3

You might also like