Labels

HTML and CSS - 06



Here are the links to my previous lessons on HTML and CSS.


Inserting images, audios, and videos

Inserting images. 

To insert images we can use <img> tag. when the images are displaying in the browser, the below attributes need to be set for a better visual experience. 

<img src="image_path" width="" height="">

See below example:

(make sure to insert the images to the same folder that the HTML file exists.)

<!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 <strong><em><u>conventional algorithms</u></em></strong> to perform the needed tasks.</P>
		
		<h1> Machine learning approaches</h1>
		
		<ol>
		 <li>Supervised learning</li>
		 <li>Un-supervised learning</li>
		 <li>Reinforcement learning</li>
		</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>
		
		<img src="m1.jpg" width="325" height="250"/>
		<img src="m2.jpg" width="325" height="250"/>
		<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"/>
		
	</body>
</html>

See the output below.



See, in the src tag, I've added an image URL as well. We will learn this addressing(absolute and relative) in the coming post. 

Till then let's learn about inserting a video.

Inserting audio...

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

controls attribute is used to add the play button,, volume adjuster to the audio frame. 

Inserting video...


<video width="600" controls>
   <source src="vi.mp4" type="video/mp4">
</video>

controls attribute is used to add the play button, full-screen controller, volume adjuster to the video frame. 
using the width attribute you can set the width of the video frame. and you can use the height attribute too.
make sure to add the video in the same directory where the HTML file exists.

place this block into the previous HTML code and see the results. 

below is the result I got. 




Search other attributes we can use with the <img> , <audio> and <video> tags. 

Will see you in the next post. 

😀😀



Labels:

Comments

Post a Comment

Popular Posts