Skip to main content

HTML BASICS : CLASS 105

Hello and welcome to the 5th lesson in a series of HTML for beginners tutorials.
In this tutorial, we shall;
  1. modify the size of the image we inserted in the previous lesson
  2. 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>
        <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>

     <img src="images/apollo.jpg">
   
</body>
</html> 

Let's get started.
In the previous lesson we learned about how objects can have attributes. We saw how the image object in html has an attribute source (written as src) whose value specifies where the image is located.
Typically, an object has many attributes.
If we considered you as an object (developers do this all the time!) , then we can list a few attributes you have, such as skin color, hair color, height, weight, name, number of legs, etc.
I for one, am a short 3 legged 200lb black man with blue hair named Harry.

An image has has many attributes, in addition to the source attribute we specified.
Among them is width and height.

  1. Open my_site.html in Sublime text (or whichever text editor you decided to use),  and change the code <img src="images/apollo.jpg"> to;
    2.           <img src="images/apollo.jpg" width="450px" height="450px">
  2. Save the file and open it in your browser.
Here we have changed the values of the width and height of our image to 450px each.
'px' stands for 'pixels' and is a unit of measurement for size just like cm or mm or inches.

Great!
Now let's learn a new tag, the anchor tag.
The anchor tag is a tag used to insert a link to another webpage in our site.
It has an opening '<a>' and a closing '</a> tag.
Inside the tag, you specify what the user sees and clicks on.
You use an attribute of the anchor tag, called href (stands for hypertext reference), to specify to which webpage should the browser go, when the link is clicked.

Let's add a link to our site and see how this all works in practice.
  1. Open my_site.html in Sublime text and below the image tag, insert the following code;
    2.      <a href="https://relatableterms.blogspot.com/">Click me to start learning code</a>
  2. Save the file and open it in your browser.
  3. Click the link and it shall take you to the homepage of this website (i.e https://relatableterms.blogspot.com/ ).
    4.  
Awesome!
Another cool thing to know at this point is that html tags can be nested (one tag can be placed inside another tag) .
Let's see how this works by inserting our link into a paragraph.

  1. Change code <a href="https://relatableterms.blogspot.com/">Click me to start learning code</a>   to; 
    2.      <p> Click <a href="https://relatableterms.blogspot.com/"> me </a> to start learning code</p>  
  2. Save the file and open it in your browser.
  3. Notice that only the word 'me' is now clickable. The rest of the words are not clickable because they are no longer inside the anchor tag.
Great! That's enough for today.
As always, here is a video that you can use to follow up on the above instructions.
Leave any question/comment/feedback in the comment section below.
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 & 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

HTML BASICS : CLASS 102

Hello and welcome back. This is the second class in a series of tutorials for beginners in web development. You can access the first one here. By this point you should have a file named my_site.html with the following code in it: <!DOCTYPE html> <html> <head>     <title></title> </head> <body>     <h4>NASA | JPL</h4>     <h1>ON A MISSION</h1>     <h2>PODCAST</h2> </body> </html> Great! It is a bit weird having a couple of headings with no further details, isn't it? Let us add some more text that explains what this whole 'NASA ON A MISSION PODCAST' stuff is about. For this we will use a different tag, the paragraph tag which opens with ' <p> ' and closes with a ' </p> ' .  After the bottom heading, type the following :  <p>A new podcast from NASA</p> Cli...
Post a Comment
Read more