Scribd
Upload
206 views20 pages

Link, Marquee, Lists

The document discusses various HTML tags used for creating and styling links and lists. It covers the <a> anchor tag and its attributes like href, target, name that are used to create and style links. It also discusses different types of lists like unordered lists (<ul>), ordered lists (<ol>), definition lists (<dl>), nested lists and special list tags like <dir> and <menu>. The document also covers the <marquee> tag used to create scrolling text banners on a webpage.

Uploaded by

Naveen Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
206 views20 pages

Link, Marquee, Lists

The document discusses various HTML tags used for creating and styling links and lists. It covers the <a> anchor tag and its attributes like href, target, name that are used to create and style links. It also discusses different types of lists like unordered lists (<ul>), ordered lists (<ol>), definition lists (<dl>), nested lists and special list tags like <dir> and <menu>. The document also covers the <marquee> tag used to create scrolling text banners on a webpage.

Uploaded by

Naveen Kumar
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 20

HTML

Working with links

Working with links use of Anchor tag


To create a link or to access another document we use Anchor tag<a> Anchor tag is made up of three parts, first start tag<a> of anchor tag along with HREF (Html reference <a href>) which specifies the route of the document, the text acts as alink and end tag</a> <a href=url> text that acts as link</a>

1. 2. 3. 4.

Q.What is URL? Ans. URl stands for Uniform Resource locater is an address of a document on the internet. Made up of four parts: Protocol Hostname Folder name File name

url=http://www.yahoo.com/discover/display .html

Protocol
A protocol is a set of rules which is used by computers to communicate with each other across a network. A protocol is a convention or standard that controls or enables the connection, communication, and data transfer between computing endpoints.

Hostname
A hostname is a domain name assigned to a host computer. This is usually a combination of the host's local name with its parent domain's name. A host name is the name of the sever that holds the document that is to be retrieved.

Folder name
A folder name is the final location where the computer will look for the requested file. Folder are needed to organize the document. There is no limit to depth to which you can nest the folder. When u name the folder than u can include only following characters. 1. Alphabetical characters 2. Numbers 3. ($), (_ ), (-) these three symbols.

File name
File name are the names of the specific document and consists of two components of information 1.Name of file 2.extention

Relative and Absolute link


In relative link the Url appoints to files that have been stored in the same folder of in the same folder but in the same computer or server. The following is an example of a relative link: <A HREF="products.html">Our Product Information</A> If the HTML document to which you want a link is located elsewhere on the Internet, you simply need a more complete, absolute URL, such as the following: <A HREF="http://www.bignet.net/realcorp/products. html">Our Product </A>

Attributes of Anchor tag


<a href=url target=_blank>text</a>

1. Href attribute
HREF Means Hypertext Reference. It takes the location of the page so its value within the quotation marks.

2. Target attribute
With the target attribute, you can define where the linked document will be opened.

3. Name (Text string)


Name gives the anchor a name. This allows you alink to specific section that has been named within the page.

E-mail link

Having a link that allows visitors to send email from your website can be a great addition to your site. <a href=mailto: mail address>text</a> E.g..<a href=mailto:[email protected]>send mail <a>

ADD SUBJECT,CC AND BCC IN E-MAIL


<a href=mailto:[email protected]?subject=text mail >send mail <a> <a href=mailto:[email protected][email protected] >send mail <a> <a href=mailto:[email protected][email protected] >send mail <a> <a href=mailto:[email protected]?subject=textmail&c [email protected]&[email protected] >send mail <a>

Image as a link
You can turn image into a hyperlink. This is the code of image as a hyperlink

<a href=abc.html><img src=edf.jpeg></a>

Define colors for links


<body link=#0000ff vlink=#800080 alink=#ff0000> or <body link=blue vlink=purple alink=red> Link- standard link - to a page the visitor hasnt been to yet. (standard color is blue) vlink- visited link - to a page the visitor has been to before. (standard color is purple) alink- active link the color of the link when the mouse is on it. (standard color is red)

Define colors for individual links of the page.


Using font tag in the anchor tag. <a href=http://www.yahoo.com> <font color=red> welcome </font> </a>

Marquee TAG
We can use marquee tag to scroll text or image in different directions. The text placed inside the marquee tag will start scrolling horizontally across the screen or the web page. Usually scrolling texts are used to give messages or display some special announcements to the visitors. Using this we can make some part of the text stand out than others. Over time as content became important the uses of animation reduced in last some years.

Behavior of marquee
Specifies how the marquee text should move. Possible values for this attribute are SCROLL or SLIDE or ALTERNATE. Scroll is the default behavior. <marquee bgcolor="green" style="color: red; font-family: verdana" behavior="scroll" > This is an Example Marquee (Behavior : Scroll)</marquee> <marquee bgcolor="yellow" style="color: black; fontfamily: forte" behavior="slide">This is an Example Marquee (Behavior : Slide)</marquee>

<marquee bgcolor="#000080" style="color: #FFFFFF; font-family: times new roman" behavior="alternate" > This is an Example Marquee (Behavior : Alternate)</marquee>

Directions
<marquee bgcolor="green" style="color: red; font-family: verdana" behavior="scroll" direction="right"> This is an Example Marquee (Direction=right)</marquee>

<marquee bgcolor="green" style="color: red; font-family: verdana" direction=left"> This is an Example Marquee (Direction=left)</marquee>
<marquee bgcolor="yellow" style="color: black; fontfamily: forte" direction="up">This is an Example Marquee (Direction=up)</marquee> <marquee bgcolor="#000080" style="color: #FFFFFF; font-family: times new roman" direction="down" > This is an Example Marquee (Direction=down</marquee> Note :By default direction is left

Marquee Repeat
Specifies how many times the text effect in the marquee is repeated. Possible values are Continuously or number of times that the text should get repeated. <marquee bgcolor="green" style="color: red; font-family: verdana" scrollamount="5" loop=1> This is an Example Marquee (loop=1)</marquee> <marquee bgcolor="yellow" style="color: black; font-family:forte scrollamount="5" loop="infinite" >This is an Example Marquee (loop=infinite)</marquee>

Marquee speed
Speed: Specifies the speed in which the text in the marquee moves. Possible values are Delay or Amount Delay: This specifies how long to delay between each jump. This attribute takes the time in milliseconds. <marquee style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080" scrolldelay="90">This is an example of Marquee (Delay : 90 Milliseconds)</marquee> <marquee style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080" scrolldelay="1000">This is an example of Marquee (Delay : 1000 Milliseconds)</marquee> Amount: This specifies how far the text in the marquee should move. This attribute takes the amount in pixels.

<marquee style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080" scrollamount="5">This is an example of Marquee (Amount : 5 pixels)</marquee>
<marquee style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080" scrollamount="20">This is an example of Marquee (Amount : 20 pixels)</marquee>

LISTS
Listing the item in web page. Types of list:1. Unordered List 2. Ordered List 3. Definition List 4. Nested order 5. DIR Directory list 6. MENU- Menu item list

Unordered list
It is called so as there in no order in which the items can be listed. Unordered list use <ul> and <li> tags, ul Unordered list & li list item <ul > <li>first list item <li>second list item </UL> You can define the attribute also. type of unordered list: 1.Disc 2.square 3.circle

Ordered List
The second kind of list is a number list, often called an ordered list. The html code for as ordered list is similar to that of an unordered list, except that we use an <Ol> tag instead of a <ul> tag. INPUT OUTPUT <h1>Department </h1> Department <Ol> 1.bba <li> bba 2.bjmc <li> bjmc 3.b,ed <li>b,ed </Ol>

Attribute of ordered list Type:- A,a,i,I,1 any of the value Start:- numeric value INPUT <ol type=1, start=5> <li>mba <li>ma </ol>

OUTPUT 5.mba 6.ma

Nested order list

List can be nested, means not only one list can occur inside another, one type of list can exist another type of list. Example: <ol> <li> <li> <ul> <li> <li> </ul> </ol>

Definition list
In which consist of a TERM and DEFINATION. List start with <DL> tag. Each data term starts with a<DT> tag and each data defination starts with a <DD> tag and end tag is </DL> <DL> <dt>the first term <dd> its definition

<dt> the second term <dd> its definition


<dt> the third term <dd>its definition </DL>

MENU & DIRECTORY List


The Dir element is similar is similar to the UL element. It represents a list of short items, typically up to 20 characters each. <dir> <li> <li> </dir> The MENU item produces a list like UL, but is should be rendered more compact. Not all browsers make this distinction, and some render it without a bullet at all <menu> <li> <li> </menu>

You might also like