Labels

HTML and CSS - 07



Today we are going to discuss HTML link creation and the anchor tags. 

  •   HTML link creation
<a href=""> click </a>

Above is the tag we use to create links on our HTML page. 
href   --> describe the destination we want to go to when we click the link. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>My page title</title>
		<style type="text/css">
		p{
		color:green;
		}
		
		h1{
		color:blue;
		}
		</style>
	</head>
	
	<body>
		<h1>Machine Learning</h1>
		
		<p><b>Machine learning (ML)</b> is the <u>study of computer algorithms </u>
		that improve automatically <br> through experience and by the use of data. 
		It is seen as a part of <strong><i>artificial intelligence</i></strong>.<br>
		Machine learning algorithms build a model based on sample data, known as 
		"training data", <br> in order to make predictions or decisions without being explicitly 
		programmed to do so. </P>
		
		<p> Machine learning <strike>algo</strike> algorithms are used in a wide variety of
		<strike>apps </strike> applications, <br>
		such as in medicine, email filtering,and computer vision, where it is <br> difficult or unfeasible 
		to develop <a href="https://encyclopedia2.thefreedictionary.com/conventional+algorithm" target="_blank">conventional algorithms</a>
		to perform the needed tasks.</P>
		
		<h1> Machine learning approaches</h1>
		
		<ol>
		 <a href="https://www.ibm.com/cloud/learn/supervised-learning" target="_blank"><li>Supervised learning</li></a>
		 <a href="https://www.guru99.com/unsupervised-machine-learning.html"><li>Un-supervised learning</li></a>
		 <a href="https://en.wikipedia.org/wiki/Reinforcement_learning"><li>Reinforcement learning</li></a>
		</ol>
		
		<h1>Common Machine Learning Algorithms</h1>
		<ul>
			<li>Linear Regression</li>
			<li>Logistic Regression</li>
			<li>K-Means</li>
			<li>Random Forest</li>
		</ul>
		
		<a href="https://www.ibm.com/cloud/learn/supervised-learning" target="_blank"><img src="m1.jpg" width="325" height="250"/></a>
		<a href="https://en.wikipedia.org/wiki/Reinforcement_learning"><img src="m2.jpg" width="325" height="250"/></a>
		<img src="m3.jpg" width="325" height="250"/>
		<img src="https://www.afcea.org/content/sites/default/files/styles/flexslider_full/public/GIS-F5-Cyborg-online%20pic%201.jpg?itok=1xTv5A35" width="325" height="250"/>
		<br>
		<audio controls>
          <source src="audio.mp3" type="audio/mpeg">
           Your browser does not support the audio element.
        </audio>
		<br>
		<video width="600" controls>
		<source src="vi.mp4" type="video/mp4">
		Your browser does not support the video element.
		</video>
		
	</body>
</html>


See the output. 




I've circled and arrow-pointed the links I've added in the provided HTML example. See how the cursor behaves when the cursor is on the(hover) link.

And you will see some links are opening the same tab when some links are opening in a separate tab. 
If you see my example properly you will understand why.

see the target attribute is set in the <a> tag. 

when target = "_blank" then the link will be opened in a separate tab. If this is not set then the link will be opened in the same tab. 

See ex:-
<a href="https://gmail.com/" target="_blank">conventional algorithms</a>


  • Use of Anchor tags
So, we have used the <a> tag in the previous example for creating links that can navigate to external sites. 
What if we want a link to navigate on the same page. just like a table of content. 

Yes, That can be achieved using the <a> tag.

See the below example. Yes, the example has quite big content. Copy the content and paste it into your text editor. save it as .HTML file and open it in your favorite browser. 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>My page title</title>
		<style type="text/css">
		p{
		color:green;
		}
		
		h1{
		color:blue;
		}
		</style>
	</head>
	
	<body>
	
	<h2> Table Of Content </h2>
	<ul>
	<li><a href="#aus">Australia</a></li>
	<li><a href="#can">Canada</a></li>
	<li><a href="#nz">New Zealand</a></li>
	<li><a href="#sl">Sri Lanka</a></li>
	<li><a href="#ind">India</a></li>
	</ul>
	
		<h1><a id="aus">Australia</a></h1>
		
		<p>Australia, officially the Commonwealth of Australia, is a sovereign country comprising the mainland 
		of the Australian continent, the island of Tasmania, and numerous smaller islands.[14] It is the largest 
		country in Oceania and the world's sixth-largest country. Australia's population of nearly 26 million,[8] 
		in an area of 7,617,930 square kilometres (2,941,300 sq mi),[15] is highly urbanised and heavily 
		concentrated on the eastern seaboard.[16] Canberra is the nation's capital, while the largest city is 
		Sydney, and other major metropolitan areas are Melbourne, Brisbane, Perth, and Adelaide.

		Indigenous Australians inhabited the continent for about 65,000 years,[17] prior to the first arrival of 
		Dutch explorers in the early 17th century, who named it New Holland. In 1770, Australia's eastern half was 
		claimed by Great Britain and initially settled through penal transportation to the colony of New South Wales
		from 26 January 1788, a date which became Australia's national day. The population grew steadily in 
		subsequent decades, and by the time of an 1850s gold rush, most of the continent had been explored by 
		European settlers and an additional five self-governing crown colonies established. On 1 January 1901, 
		the six colonies federated, forming the Commonwealth of Australia. Australia has since maintained a stable 
		liberal democratic political system that functions as a federal parliamentary constitutional monarchy, 
		comprising six states and ten territories.</P>
		
		<h1><a id="can">Canada</a></h1>
		
		<p>Canada is a country in North America. Its ten provinces and three territories extend from the Atlantic 
		to the Pacific and northward into the Arctic Ocean, covering 9.98 million square kilometres 
		(3.85 million square miles), making it the world's second-largest country by total area. Its southern and 
		western border with the United States, stretching 8,891 kilometres (5,525 mi), is the world's longest 
		bi-national land border. Canada's capital is Ottawa, and its three largest metropolitan areas are Toronto, 
		Montreal, and Vancouver.

		Indigenous peoples have continuously inhabited what is now Canada for thousands of years. Beginning in the 
		16th century, British and French expeditions explored and later settled along the Atlantic coast. As a 
		consequence of various armed conflicts, France ceded nearly all of its colonies in North America in 1763. 
		In 1867, with the union of three British North American colonies through Confederation, Canada was formed 
		as a federal dominion of four provinces. This began an accretion of provinces and territories and a process 
		of increasing autonomy from the United Kingdom. This widening autonomy was highlighted by the Statute of 
		Westminster 1931 and culminated in the Canada Act 1982, which severed the vestiges of legal dependence on 
		the British Parliament.</P>
		
		<h1><a id="nz">New Zealand</a></h1>
		
		<p>
		New Zealand (Māori: Aotearoa [aɔˈtɛaɾɔa]) is an island country in the southwestern Pacific Ocean. It 
		consists of two main landmasses—the North Island (Te Ika-a-Māui) and the South Island (Te Waipounamu)—and 
		more than 700 smaller islands,[13] covering a total area of 268,021 square kilometres (103,500 sq mi). 
		New Zealand is about 2,000 kilometres (1,200 mi) east of Australia across the Tasman Sea and 1,000 
		kilometres (600 mi) south of the islands of New Caledonia, Fiji, and Tonga. The country's varied 
		topography and sharp mountain peaks, including the Southern Alps, owe much to tectonic uplift and 
		volcanic eruptions. New Zealand's capital city is Wellington, and its most populous city is Auckland.
		</p>
		
		<h1><a id="sl">Sri Lanka</a></h1>
		
		<p>Sri Lanka's documented history spans 3,000 years, with evidence of prehistoric human settlements dating 
		back at least 125,000 years.[12] It has a rich cultural heritage, and the first known Buddhist writings 
		of Sri Lanka, the Pāli Canon, date back to the Fourth Buddhist council in 29 BCE.[13][14] Its geographic 
		location and deep harbours made it of great strategic importance from the time of the ancient Silk Road 
		through to the modern Maritime Silk Road.[15][16][17] Its location as a major trading hub made it known 
		to both the Far East as well as to Europe from as far back as the Anuradhapura period. The country's trade
		in luxury goods and spices attracted traders of many nations, creating Sri Lanka's diverse population. 
		During a period of great political crisis, the Portuguese, whose arrival in Sri Lanka was largely 
		accidental, sought to control the island's maritime regions and its lucrative external trade. The 
		Portuguese possessions were later taken over by the Dutch. The Dutch possessions were then taken by the 
		British, who later extended their control over the whole island, colonising it from 1815 to 1948. 
		A national movement for political independence arose in the early 20th century, and in 1948, 
		Ceylon became a republic and adopted its current name in 1972. Sri Lanka's recent history has been 
		marred by a 26-year civil war, which ended decisively when the Sri Lanka Armed Forces defeated the 
		Liberation Tigers of Tamil Eelam in 2009.</p>
		
		<h1><a id="ind">India</a></h1>
		
		<p>Modern humans arrived on the Indian subcontinent from Africa no later than 55,000 years ago.[24] Their 
		long occupation, initially in varying forms of isolation as hunter-gatherers, has made the region highly
		diverse, second only to Africa in human genetic diversity.[25] Settled life emerged on the subcontinent 
		in the western margins of the Indus river basin 9,000 years ago, evolving gradually into the Indus Valley
		Civilisation of the third millennium BCE.[26] By 1200 BCE, an archaic form of Sanskrit, an Indo-European
		language, had diffused into India from the northwest,[27] unfolding as the language of the Rigveda, and 
		recording the dawning of Hinduism in India.[28][disputed – discuss] The Dravidian languages of India were
		supplanted in the northern and western regions.[29] By 400 BCE, stratification and exclusion by caste had
		emerged within Hinduism,[30] and Buddhism and Jainism had arisen, proclaiming social orders unlinked to
		heredity.[31] Early political consolidations gave rise to the loose-knit Maurya and Gupta Empires based 
		in the Ganges Basin.[32] Their collective era was suffused with wide-ranging creativity,[33] but also 
		marked by the declining status of women,[34] and the incorporation of untouchability into an organised 
		system of belief.[g][35] In South India, the Middle kingdoms exported Dravidian-languages scripts and 
		religious cultures to the kingdoms of Southeast Asia.</p>
	</body>
</html>

See the example code above. There I've marked each header with a specific id.

Ex: -
<h1><a id="ind">India</a></h1>

And I have made links to those headers using those ids. 

Ex:-
<li><a href="#ind">India</a></li>
see. Try adding another section and add a link to the section. 

Will see you in the next post.  


Labels:

Comments

Post a Comment

Popular Posts