ΕΝΟΤΗΤΑ 6 HTML & CSS Για Αρχάριους – Images

Michail Kassapoglou February 18, 2023

 

Δωρεάν μαθήματα HTML & CSS

ΕΙΣΑΓΩΓΗ 


Στο σημερινό μάθημα HTML & CSS για αρχάριους θα μάθουμε πως να προσθέτουμε εικόνες στις ιστοσελίδες μας χρησιμοποιώντας το <img> tag. Επίσης θα μάθουμε ποια attributes του <img> tag μας επιτρέπουν να τροποποιήσουμε το μέγεθος των εικόνων που χρησιμοποιούμε όπως και από ποια sites μπορούμε να πάρουμε εικόνες χωρίς να έχουμε προβλήματα με copyrights (πνευματικά δικαιώματα). 


SITES TO GET FREE IMAGES 


Συνήθως όταν θέλουμε να προσθέσουμε κάποια εικόνα στο site μας ή στο blog μας, ψάχνουμε στο google και όταν βρούμε την εικόνα που θέλουμε απλά την αντιγράφουμε και την προσθέτουμε στη σελίδα μας. Όμως αυτή η τακτική μπορεί να μας δημιουργήσει προβλήματα με τα πνευματικά δικαιώματα που συνοδεύουν την εικόνα γιατί η αρχική εικόνα είτε αγοράστηκε για να χρησιμοποιηθεί αποκλειστικά από τον νόμιμο κάτοχο της, είτε δημιουργήθηκε από την ίδια την εταιρεία που την χρησιμοποιεί στο site. Οπότε δεν μπορούμε έτσι απλά να την αντιγράψουμε και να την προσθέσουμε στο δικό μας site. Για αυτό άλλωστε υπάρχουν και τόσα διαφορετικά sites που πουλάνε high definition εικόνες για όλες τις κατηγορίες.  


Υπάρχει όμως και η δωρεάν λύση και αυτή προσφέρεται μέσα από τουλάχιστον δύο sites που έχουν αρκετές εικόνες που μπορούμε να χρησιμοποιήσουμε ελεύθερα χωρίς να έχουμε προβλήματα με τα πνευματικά δικαιώματα. Το μόνο μειονέκτημα σε αυτή την περίπτωση είναι ότι οι φωτογραφίες δεν θα υπάρχουν μόνο αποκλειστικά στο δικό σας site αλλά και σε πολλά άλλα. Αν αυτό δεν σας ενοχλεί τότε μπορείτε ελεύθερα να τις χρησιμοποιήσετε. 

Ξεκινάμε λοιπόν με το πρώτο site που ονομάζεται pexels.com (https://www.pexels.com/).  


Γράφοντας στο πεδίο αναζήτησης την λέξη κλειδί της κατηγορίας που σας ενδιαφέρει (όπως π.χ programming) θα σας εμφανιστούν αρκετές high quality φωτογραφίες που σίγουρα θα σας ικανοποιήσουν. 


Για την συνέχεια του σημερινού δωρεάν μαθήματος HTML & CSS για αρχάριους, από την κατηγορία programming θα επιλέξω και θα κατεβάσω μια εικόνα πατώντας το εικονίδιο download που εμφανίζεται στην δεξιά κάτω γωνία κάθε φωτογραφίας. 


Αφού κατεβάσουμε την φωτογραφία που μας ενδιαφέρει, τότε την τοποθετούμε στον ίδιο φάκελο που έχουμε και το index.html αρχείο. 

Πριν προχωρήσουμε να δείξουμε τα βήματα πως προσθέτουμε την εικόνα στο site μας, ας αναφερθούμε σε ένα ακόμα site που μας προσφέρει δωρεάν εικόνες και το οποίο είναι το pixabay (https://pixabay.com/). Εδώ θα βρείτε ακόμα πιο εντυπωσιακές εικόνες, τουλάχιστον στη κατηγορία programming, που μπορείτε να χρησιμοποιήσετε ελεύθερα. Η επιλογή είναι δική σας. 

ADDING IMAGES TO WEB SITE 


Για να προσθέσουμε μια εικόνα (image) στη σελίδα μας πρέπει να χρησιμοποιήσουμε το <img> tag. Όμως το <img> tag δηλώνει απλά την πρόθεση μας να προσθέσουμε μια εικόνα. Πρέπει να χρησιμοποιήσουμε και το attribute src για να δηλώσουμε το όνομα του αρχείου της εικόνας και φυσικά την τοποθεσία της στο σκληρό δίσκο. Το attribute src είναι απαιτούμενο στοιχείο και δεν μπορούμε να το παραλείψουμε. 


Πριν δείξουμε το παράδειγμα μας, θα πρέπει να αναφερθούμε σε δύο ακόμα λεπτομέρειες. Η πρώτη είναι ότι το <img> tag δεν έχει closing tag. Χρησιμοποιείται μόνο του. Η δεύτερη λεπτομέρεια είναι ότι για να δηλώσουμε το path του αρχείου, αν και αυτό μπορεί να βρίσκεται στον ίδιο φάκελο με το index.html καλό είναι να δηλώσουμε το path χρησιμοποιώντας ./ αντί για σκέτο το όνομα. Όταν το κάνετε αυτό το VS Code θα σας βοηθήσει δείχνοντας της επιλογές αρχείων που έχετε. Στα ονόματα των αρχείων πρέπει να προσθέσετε και την κατάληξη όπως .jpg, png, κτλ. 


Ας δούμε τώρα όλο το κώδικα και φυσικά το αποτέλεσμα. 

<!DOCTYPE html>
<html lang="en">

<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>

<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>

<li>HTML5 web site structure</li>
<li>
Basic HTML elements
<!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>em - marks text that has stress emphasis</li>
<li>strong - indicates that its content have strong importance</li>
<li>p - represents a paragraph</li>
</ol>
<!-- Here is the closing </li> tag -->
</li>
<li>Importing images to a web page</li>
</ul>
<img src="./pexels-lukas-574077.jpg">
</body>

</html>


CORRECTING THE IMAGE SIZE 


Έχουμε καταφέρει να προσθέσουμε την εικόνα στη σελίδα μας, όμως το αποτέλεσμα δεν είναι και τόσο ικανοποιητικό. Η φωτογραφία, αν την ανοίξετε μέσα από το VS Code θα δείτε κάτω δεξιά στην οθόνη σας ότι είναι 6144 pixels.  


Αυτό είναι ένα αρκετά μεγάλο μέγεθος εικόνας που δεν μας είναι πολύ εύχρηστο. Θέλουμε να μειώσουμε το μέγεθος της εικόνας στα 220 pixels ή οτιδήποτε άλλο σας βολεύει. Για να μπορέσουμε να το καταφέρουμε αυτό χρησιμοποιούμε δύο ακόμα attributes που ονομάζονται height και width. Δεν είναι ανάγκη να ορίσετε και τα δύο. Αν θέλετε η εικόνα να προσαρμοστεί στο καινούργιο μέγεθος αυτόματα και να είναι σωστή η κλίμακα απλά χρησιμοποιείστε μόνο το width και το size θα προσαρμοστεί αυτόματα.  


Μαζί με την εικόνα, πρέπει να προσθέσουμε και μια γραπτή περιγραφή της εικόνας με το alt attribute. Το συγκεκριμένο attribute βοηθάει τους ανθρώπους που έχουν πρόβλημα με την όραση και χρησιμοποιούν προγράμματα που διαβάζουν τα site, να μπορέσουν να ακούσουν τι ακριβώς περιγράφει η εικόνα. Επίσης, αν για κάποιο λόγο δεν μπορεί να εμφανιστεί η εικόνα μας, τότε θα εμφανιστεί η περιγραφή που έχουμε ορίσει. Οπότε εξυπηρετεί δύο βασικούς σκοπούς. 


Ας προσθέσουμε λοιπόν όλα αυτά τα στοιχεία μαζί για να δούμε το τελικό αποτέλεσμα. 

<!DOCTYPE html>
<html lang="en">

<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>

<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>

<li>HTML5 web site structure</li>
<li>
Basic HTML elements
<!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>em - marks text that has stress emphasis</li>
<li>strong - indicates that its content have strong importance</li>
<li>p - represents a paragraph</li>
</ol>
<!-- Here is the closing </li> tag -->
</li>
<li>Importing images to a web page</li>
</ul>
<img src="./pexels-lukas-574077.jpg" width="220" alt="Programming picture">
</body>

</html>


USING LINKS WITH IMAGES 


Πριν κλείσουμε το σημερινό δωρεάν μάθημα HTML & CSS για αρχάριους, αξίζει να αναφερθούμε και στο γεγονός ότι στο src attribute μπορούμε να ορίσουμε και ένα link από το ίντερνετ αντί για το path μιας φωτογραφίας που υπάρχει ήδη στον υπολογιστή μας. 


Αυτή τη φορά θα επιλέξουμε μια εικόνα από το pixabay. Αφού διαλέξετε την εικόνα που σας αρέσει, κάντε δεξί κλικ επάνω της και από εμφανιζόμενο μενού επιλέγουμε copy image address. 

<!DOCTYPE html>
<html lang="en">

<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>

<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>

<li>HTML5 web site structure</li>
<li>
Basic HTML elements
<!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>em - marks text that has stress emphasis</li>
<li>strong - indicates that its content have strong importance</li>
<li>p - represents a paragraph</li>
</ol>
<!-- Here is the closing </li> tag -->
</li>
<li>Importing images to a web page</li>
</ul>
<img src="https://cdn.pixabay.com/photo/2023/02/01/07/01/hacker-7759725_960_720.jpg"
width="220" alt="Programming picture">
</body>

</html>

Μην ξεχάσετε να κάνετε ένα μικρό donation έτσι ώστε αυτό το blog να μεγαλώσει ακόμα πιο πολύ και να έχει περισσότερες δυνατότητες στην online παράδοση δωρεάν μαθημάτων. 

full-width

Tags
Michail Kassapoglou

Posted by Michail Kassapoglou

Post a Comment

0 Comments

Η γνώμη σας είναι σημαντική.