HTML – Images

HTML – Images

 

The images are very important in a web page. It is therefore important to use them in the right way. Insert images using the tag <img/>.

HTML<img alt="html image example" src="/assets_tutorials/img/image.jpg"  />

Demo

html image example

HTML – img src

“src” is shortcut for “source”. This attribute is used to indicate the image location.

Local source Description
src=”image.jpg” the picture is located on the same level as .html file
src=”../image.jpg” the picture is located in previous level as .html file.
src=”../img/image.jpg” the picture is located in the “img” folder in a previous level as .html file

You may also address the full URL. For example:

HTML Code:

scr="https://setscholars.net/assets_tutorials/img/image.jpg"

The URL pattern is not recommended because in case you change the domain you will have to change as well the addresses of all image files. Or if the image is stored on another domain just use scr=”http://www.domain.com/image.jpg”.

The fact that storing the image on an alternative server, presents a great advantage if the space provided for your domain is a limited one.

 

HTML – “alternative” attribute for images

Attribute “alt” is used to display text instead of image in case your browser for some reason can not display the picture or when a user has the “ShowImage” option unselected.

HTML<img alt="html image example" src="/assets_tutorials/img/image.jpg" />

Demo

html image example

HTML – the height and width of an image

To determine the height and width of an image is used and “height” attributes “width”. Logical, no!

HTML<img alt="html image example" src="/assets_tutorials/img/image.jpg"  width="120" height="75" />

Demo

html image example

HTML – horizontal and vertical alignment of an image

For this we will use the attributes align and valign. The options offered by these attributes are:

1. Align (horizontal)

  • right
  • left
  • center

2. Valign (vertical)

  • top
  • bottom
  • center

HTML – Thumbnails

Thumbnails are miniature version (less kilobytes) of images that have a much higher quality. To create a thumbnail, save the image in a lower quality then the original one. then link this small image to the original high quality image.

HTML Code:

<a href="/assets_tutorials/img/image.jpg"  title="HTML link image thumbnail example">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo

html image example

Python Example for Beginners

Two Machine Learning Fields

There are two sides to machine learning:

  • Practical Machine Learning:This is about querying databases, cleaning data, writing scripts to transform data and gluing algorithm and libraries together and writing custom code to squeeze reliable answers from data to satisfy difficult and ill defined questions. It’s the mess of reality.
  • Theoretical Machine Learning: This is about math and abstraction and idealized scenarios and limits and beauty and informing what is possible. It is a whole lot neater and cleaner and removed from the mess of reality.

Data Science Resources: Data Science Recipes and Applied Machine Learning Recipes

Introduction to Applied Machine Learning & Data Science for Beginners, Business Analysts, Students, Researchers and Freelancers with Python & R Codes @ Western Australian Center for Applied Machine Learning & Data Science (WACAMLDS) !!!

Latest end-to-end Learn by Coding Recipes in Project-Based Learning:

Applied Statistics with R for Beginners and Business Professionals

Data Science and Machine Learning Projects in Python: Tabular Data Analytics

Data Science and Machine Learning Projects in R: Tabular Data Analytics

Python Machine Learning & Data Science Recipes: Learn by Coding

R Machine Learning & Data Science Recipes: Learn by Coding

Comparing Different Machine Learning Algorithms in Python for Classification (FREE)

Disclaimer: The information and code presented within this recipe/tutorial is only for educational and coaching purposes for beginners and developers. Anyone can practice and apply the recipe/tutorial presented here, but the reader is taking full responsibility for his/her actions. The author (content curator) of this recipe (code / program) has made every effort to ensure the accuracy of the information was correct at time of publication. The author (content curator) does not assume and hereby disclaims any liability to any party for any loss, damage, or disruption caused by errors or omissions, whether such errors or omissions result from accident, negligence, or any other cause. The information presented here could also be found in public knowledge domains.  

Google –> SETScholars