Skip to main content

HTML BASICS : CLASS 104

Hello and welcome back.
This is the 4th lesson in a series of HTML for beginners tutorials.
In this tutorial, we shall discuss how to add images in your website.
At this point, your my_site.html file should have the following code in it.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>NASA | JPL</h2>
    <h1>ON A MISSION</h1>
    <h4>PODCAST</h4>

     <p>A new podcast from NASA</p>

     <ul>
        <li>Arrival</li>
        <li>We Are the World</li>
        <li>Worlds of Wonder</li>
    </ul>

      <ol>
        <li>NASA is cool</li>
        <li>Coding comes second, arguably.</li>
        <li>What is third place?!</li>
    </ol>

     <table>
    <tr>    <th >Name</th>          <th >Title</th>         </tr>
    <tr>    <td >John Doe</td>    <td >Tutor</td>       </tr>
    <tr>    <td >Jane Doe</td>    <td >Student</td>    </tr>
    </table>

    
</body>
</html>

Let's get started.

You first need to know what an 'attribute' is.
In a programming context (environment), an attribute refers to 'a certain property of a certain object' . An attribute has a name and a value.
To clarify, consider the statement 'a black box'.
Here the object 'box' has the attribute named 'color' whose value is 'black'.
Similarly, the statement 'a tall man' speaks of  an object 'man' whose attribute 'height' has the value 'tall'.
'The oval office' speaks of the object 'office' whose attribute 'shape' has the value 'oval'.
'A 10 dollar tshirt'  speaks of the object 'tshirt' whose attribute 'price' has the value '10 dollar'.

Got it? .... Great!


To add an image in html, we shall use the tag '<img> .
Unlike other html tags we have learned so far, the image tag (<img>), has no closing tag.
The image tag has an attribute named source.
The value of the source attribute of an image is the image's location.
The source attribute in html is written in short form as 'src'.

Let's add an image to our site and see how this all works in practice.
  1. Click here to get an image. When the image opens, right click on it and click 'Save Image As...' . From the window that opens up, go to the location where you have saved your my_site.html file. Under file name, type 'apollo' then click 'Save'.
  2. Open my_site.html in Sublime text (or whichever text editor you decided to use),  and type the following code below the closing table tag (</table>).
    3.          <img src="apollo.jpg">
  3. Save the file and open it up in your browser. The image shall now be displayed below the second table in your site. 
    4.  
The code <img src="apollo.jpg">  says this, "there is an image located in the same folder as this my_site.html file, named apollo of type/extension jpg. get that image and display it".

Now, do the following:
  1. Go to where you have saved the file my_site.html. Create a new folder and call it 'images'.
  2. Move (cut & paste) the apollo image to the images folder. 
  3. Open my_site.html in your browser. Notice that the image is no longer displayed. This is because the image's location has been changed.
  4. In Sublime text, change the code <img src="apollo.jpg"> to:
    5.         <img src="images/apollo.jpg">
  5. Save the file and open it up in your browser (or refresh your browser if it is already open). The image now appears again.
The code <img src="images/apollo.jpg">  says this, "there is a folder called images located in the same folder as this my_site.html file. Inside it, there is an image named apollo of type/extension jpg. get that image and display it".


You can use this video to follow up, if the text details above are confusing, but hopefully you got it.
And you can leave any question/comment in the comment section below. 
That is all for today, happy coding.







Labels:

Comments

Post a Comment

Popular posts from this blog

CSS BASICS : CLASS 109 part III

Hello and welcome back to this tutorial series  for beginners in web development with HTML & CSS. We have been discussing form and div elements in the previous sections of this class (see class 109 part I and II ). You should have 2 files, one sections.html file and another sections.css file linked to it. Next, we will discuss the css code we used in the sections.css, particularly 2 new attributes ' display ' and ' float ' .  This is the CSS code that we used to style our sections.html page. #header{     background-color: grey;     padding-top: 5px;     padding-bottom: 5px;     padding-left: 15px; } h2{     margin: 0px;     color: white; } #content{     padding-left: 15px; } p{     display: inline-block;     float: left;     margin-right: 50px; } form{     display: inline-block;     border...
Post a Comment
Read more

HTML BASICS : CLASS 105

Hello and welcome to the 5th lesson in a series of HTML for beginners tutorials. In this tutorial, we shall; modify the size of the image we inserted in the previous lesson learn how to add links in our website. At this point, your my_site.html file should have the following code in it. <!DOCTYPE html> <html> <head>     <title></title> </head> <body>     <h2>NASA | JPL</h2>     <h1>ON A MISSION</h1>     <h4>PODCAST</h4>     <p>A new podcast from NASA</p>     <ul>         <li>Arrival</li>         <li>We Are the World</li>         <li>Worlds of Wonder</li>     </ul>      <ol>    ...
Post a Comment
Read more

HTML & CSS BASICS : Comments & Review

Hello and welcome back to this tutorial series. Today we shall review many of the concepts we have learned so far (class 101 through class 109) and introduce a few others. Being programmers, we are going to do this by coding a simple web page. Your task is to see if you understand all that is happening , if not, then be sure to revisit a previous tutorial on the subject and re-read it. Along the way, I will be recommending common practices for organizing & writing your code. Let's get started. I recommend storing your web-project files as follows; Create a new folder (for a new web project). Inside it, create 2 folders, one for html files and one for css files.  For this work, create a new folder and name it review .  Inside it create two folders , name one styles and the other html . Open Sublime Text or whichever text editor you prefer, drag and drop the review folder onto the Sublime Text's window. You should see the folder on the left-side (left-panel) ...
Post a Comment
Read more