₦airaland Forum

we would insert the logo just before the list, so create an image element as the new first child of the DIV header, your code would be something like

  <div id="header">
    <img src="images/logo.png" alt="site logo" id="site-logo"/> <!-- image element here before the list

  <ul id="top-menu">
  <li>Rooms & Suites</li>
  <li>Resuturant & Bars</li>
  <li>Meetings</li>
<li>Gallery</li>
<li>Login</li>
</ul> 
...

the image src value is images/logo.png as we are linking to as the logo.png file is in the images sub-folder, also note we gave the <img> element an id of site-logo

just before we link the image, lets make a little change

open up the index.css file and change the height element (i.e our DIV with id header to 4.5em)

so the section for the header element should look like

#header{
 width: 100%;
 height: 4.5em;
 background-color:#000;

}

so i just created a simple image we would be using for the logo of the site ( well you could create and use yours)
so download it and save to your images directory, don't worry if it's not too visible here its a png file with transparency, and it would be visible once you put it in the header section of the index.html page

are we clear up to this point??

The various list items are too close together for a menu, so lets space them out a bit by controlling the left margin of each list item, and we would also reduce the text size using the font-size property

in the CSS file now edit the list item section so it looks like

#top-menu > li{

color:#fff;
display: inline;

margin-left: 1em;
font-size: .8em

}

save and refresh, it should look something similar to this

But we are tyring to create a menu so we do not want a vertical list, The list items <li> are also block elements and as such would display on a line for each new li element, open your index.css again and where we put styles for the list items add a display:inline style rule for the list items so that style block looks like..

#top-menu > li{

color:#fff;
display: inline;

}

save and refresh, all the items should now show on a single line as they are no longer displaying as block elements, but as in-line elements

Again you might notice that the space on top is back again, the list is a block element, and atime's this is a behavior that happens when we put one block element into another, to clear it open up your CSS file
and add the ff

#top-menu{
 display: inline;
}

The display CSS property helps us control how an element is displayed and is usually used to force a block element to be displayed inline, is you save and refresh the annoying space on-top should be gone, again add the ff to your index.css

#top-menu > li{

color:#fff;


}

In CSS we are able to target an element based on its parent, the line

#top-menu > li

Simply means we are targeting li elements that are child nodes of and element with an ID of top-menu..

Let me further illustrate
if you have a <p> element and it has a <span> element as its child, to target that span child element, you could use

 p > span {...

,

The > character in CSS is used to select a child element

if the span has an id, you could also directly access it in CSS using its id selector as in #id_here, however in our html page we did not give the list-items an id so its appropriate to use the Child selector format, save and refresh if you did everything right your page should look like this and the list items should be colored white so you now see where the list actually started from

Next we create the main menu for the page, We havent yet introduced HTML Lists, List in HTML is just a tag that allows you show a list of items, and there are two tyes of lists
1. The ordered lists, which has the tag <ol></ol>
2. The un-ordered list <ul></ul>

As you can see both types of lists have closing tags, which means they are meant to contain some other element, The List's
elements have an associated <li> element which stand for list-item, that is we show each item in a list using the <li> element.
Lets illustrate by using a list to create the top menu of the page. Open up index.html and inside the DIV which has an id of header, add the following

<ul id="top-menu">
  <li>Rooms & Suites</li>
  <li>Resuturant & Bars</li>
  <li>Meetings</li>
  <li>Gallery</li>
  <li>Login</li>
</ul> 

Notice we started by creating an un-ordered list <li>, and gave it an id of top-menu, then inside this un-ordered list we created five list items, if you save and refresh the browser, you should have something similar to

You'll notice there's some space around the black rectangle (i.e the DIV) element, most browsers put a little space around the body by default so
elements in the page wouldn't start exactly from the top and edge of the page, this is usually an undesired effect, and to clear it open up your CSS file for editing, now where we have style rules for the body element add the following

 margin : 0px;

so the CSS for the body should look something like

 
 body {
  background-color:#f5f5dc;
  margin: 0px;
}

save and refresh, the space which was actually a margin around the body should now be gone

View the HTML file in your browser you should have something similar to his...

If you have created the needed folder structure, lets proceed
open up the index.html file and type in

<!DOCTYPE html>


<!DOCTYPE html>
<html>
<head>
  <title>Hotel Web-Site</title>


  <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
   <body>

     <div id="header">
      </div>




  </body>
</html> 

save the html file, notice we set the page title to Hotel Web-Site, and also we are linking to an external style sheet in the[b] CSS[/b] subfolder
(though we haven't yet created the stylesheet, and for now the body contains just one div element with an[b] id[/b] attribute having the value header..

Next go into the css folder and create a new file index.css, edit this file as follows

 body {
  background-color:#f5f5dc;
 
}


#header{
 width: 100%;
 height: 2.5em;
 background-color:#000;

}

In the CSS file we change the background of the body element from its default white, we also style the DIV element giving it a width of 100% so it stretches out on the whole page, a height of 2.5em and a background color value #000 (which is black in Hexadecimal color format)

timtoday:
Stack1,
Well done. I see your comments. Like I said we would be using all manner of "Brute force" solutions handpicking char, instead of token solution. We could even give a solution without using either bool datatype or an array like you are using.

But it will be many "key-stoke" solution.

More over, I saw that you have "stylishly" updated the comments having /**** UNIX/LINUX ***/ But I have not tested the modified code to see if it works...

Nice work bro, I will check back later... got to sleep!

LOL oya o, Brute force am, and the Unix/Linux comment, nah thats wasn't a stylish edit oo, anyway waitting for your feedback

ok .. so waiting for test's and confirmation from anyone on the modified program before i proceed with the explanation

Thanks again for the feedback @timtoday, i have made modifications and this version seems to work pretty well, tested it on your input and a host of others

/*
    Program to remove comments from a C Program.
   removes both C and C++ style comments
    */

#include<stdio.h>
#include<stdlib.h>
#include<stdbool.h>


static unsigned char input_buffer[200000];

int main(void) {


    int c,d,
        in_char_count = 0;

    bool m_cmt = false;
    bool s_cmt = false;



    printf(" Enter Source Code Below \n\n" );


    while((c = getchar()) != EOF ) {


        if(m_cmt) {
            d = c;
            c = getchar();

            while(c != '/') {//while we haven' matched the end of the C style (multi-line) loop
                d = c;
                c = getchar();
            }

            if(d == '*')  //if we matched the end of a C style loop, the previous char must be *, to form */
                m_cmt = false,
                input_buffer[in_char_count++] = ' '; //ISO C says a single space character should replace each multi-line comment


            c = getchar();

        }

        if(s_cmt) {
            c = getchar();
            while(c != '\n') c = getchar();

            s_cmt = false;

        }

        if(c == '/' ) {

            d = getchar();

            if(d == '*') m_cmt = true;

            else if(d=='/') s_cmt = true;

            else {
                input_buffer[in_char_count++]  =c;
                input_buffer[in_char_count++] = d;

                continue;
            }
        }

        if(m_cmt || s_cmt) continue;
        else
            input_buffer[in_char_count++] = c;

    }




    system("clear" );  /* CLEAR SCREEN   UNIX   */
    system("cls" );    /*  CLEAR SCREEN DOS   */



    printf("\n\n\nProcessed source code...\n\n" );

    input_buffer[in_char_count] = '\0';

    printf("%s", input_buffer);



    getchar();

    return EXIT_SUCCESS;


}

timtoday:
Hi sir,

I came to read gossips on NL and it happened that I came across your post again... So I said let me learn small. Below is my finding after testing the program you gave.

If you test the program above with itself, ALL of the comments will be removed EXPECT this line


So, that means a RED flag was raised and the program it is not working as we wanted.

So, just as you asked I pulled in a lot of comments to see how the program will do. Like this below

/*
    Program to remove comments from a C Program.
   removes both C and C++ style comments
    */

#include<stdio.h>
#include<stdlib.h>
#include<stdbool.h>


/****************************************************************
***** THE PROGRAME SHOULD REMOVE COMMENTS ***********************
*****************************************************************/


static unsigned char input_buffer[200000];

int main(void) {


    int c,d,
        in_char_count = 0;

    bool m_cmt = false; //multi-line comment detected, initially false
    bool s_cmt = false;   //single-line comment detected, initially false



    printf(" Enter Source Code Below \n\n" );


    while((c = getchar()) != EOF ) {

/*
 *******************************************************************
 ***************** We try to handle multiple lines here ************
 *******************************************************************
*/



        if(m_cmt) {

            c = getchar();
            d = getchar();

            while(c != '*' && d != '/') {
                c = d;
                d = getchar();
            }

            m_cmt = false;

            c = getchar();
            c = getchar();
        }

        if(s_cmt) {
            c = getchar();
            while(c != '\n') c = getchar();

            s_cmt = false;

        }

        if(c == '/' ) {

            d = getchar();

            if(d == '*') m_cmt = true;

            else if(d=='/') s_cmt = true;

            else {
                input_buffer[in_char_count++]  =c;
                input_buffer[in_char_count++] = d;

                continue;
            }
        }

        if(m_cmt || s_cmt) continue;
        else
            input_buffer[in_char_count++] = c;

    }




    system("clear" );  /* CLEAR SCREEN ON  UNIX/LINUX   */
    system("cls" );    /*  CLEAR SCREEN ON DOS (..ooh windows i mean )   */



    printf("\n\n\nProcessed source code...\n\n" );

    input_buffer[in_char_count] = '\0';

    printf("%s", input_buffer);

    getchar();

    return EXIT_SUCCESS;


}

Then the program tested again, and it failed badly!

So, I adjusted it a bit. Since the program is failing on removing multiple comments, therefore I focused on that.

Below is the rewrite if you will:

/*
    Program to remove comments from a C Program.
   removes both C and C++ style comments
    */

#include<stdio.h>
#include<stdlib.h>
#include<stdbool.h>

/****************************************************************
***** THE PROGRAME SHOULD REMOVE COMMENTS ***********************
*****************************************************************/

static unsigned char input_buffer[200000];

int main(void) {


     /*****comments****/
         int c,d,
         in_char_count = 0;

    bool m_cmt = false; //multi-line comment detected, initially false
    bool s_cmt = false;   //single-line comment detected, initially false



    printf(" Enter Source Code Below \n\n" );


    while((c = getchar()) != EOF ) {

/*
 *******************************************************************
 ***************** We try to handle multiple lines here ************
 *******************************************************************
*/
        if(m_cmt) {

            c = getchar();

            while(c != '/') {
		c = getchar();
            }

            c = getchar();
	    if ( c != '\n') continue;
            m_cmt = false;
        }

        if(s_cmt) {
            c = getchar();
            while(c != '\n') c = getchar();

            s_cmt = false;

        }

        if(c == '/' ) {

            d = getchar();

            if(d == '*') m_cmt = true;

            else if(d=='/') s_cmt = true;

            else {
                input_buffer[in_char_count++]  =c;
                input_buffer[in_char_count++] = d;

                continue;
            }
        }

        if(m_cmt || s_cmt) continue;
        else
            input_buffer[in_char_count++] = c;

    }

    system("clear" );  /* CLEAR SCREEN ON  UNIX/LINUX   */
    system("cls" );    /*  CLEAR SCREEN ON DOS (..ooh windows i mean )   */


    printf("\n\n\nProcessed source code...\n\n" );

    input_buffer[in_char_count] = '\0';

    printf("%s", input_buffer);

    getchar();

    return EXIT_SUCCESS;


}

Then tested the program against itself and I had what we wanted!
I would rather have preferred reading a whole line at a time then parse it, than hand-picking char like we are doing...

I understand that since you have not explain File I/O in C, that maybe difficult for the readers to use. since we must be tested on what we have discussed do far. That is good. But I believe parsing is a lot easier using chunks instead.

Nice one bros.... Keep Up the great work...

hmm, nice i am currently testing on your input, and why it really seems to work better that my version, you tested for a newline aftermatching the end of a multiline comment, this is a case that could easily be broken by doing something like

 int a, b /** comment here **/ c;

It would remove the comment yeah, but would eat up everything else till the end of the line, so i'll make some adjustment based on your feedback.. Thanks a lot man its folks like you that keeps this arduous thread alive, would update as soon as i can get it to work

timtoday:
Hi sir,

I came to read gossips on NL and it happened that I came across your post again... So I said let me learn small. Below is my finding after testing the program you gave.

If you test the program above with itself, ALL of the comments will be removed EXPECT this line


So, that means a RED flag was raised and the program it is not working as we wanted.

So, just as you asked I pulled in a lot of comments to see how the program will do. Like this below

/*
    Program to remove comments from a C Program.
   removes both C and C++ style comments
    */

#include<stdio.h>
#include<stdlib.h>
#include<stdbool.h>


/****************************************************************
***** THE PROGRAME SHOULD REMOVE COMMENTS ***********************
*****************************************************************/


static unsigned char input_buffer[200000];

int main(void) {


    int c,d,
        in_char_count = 0;

    bool m_cmt = false; //multi-line comment detected, initially false
    bool s_cmt = false;   //single-line comment detected, initially false



    printf(" Enter Source Code Below \n\n" );


    while((c = getchar()) != EOF ) {

/*
 *******************************************************************
 ***************** We try to handle multiple lines here ************
 *******************************************************************
*/



        if(m_cmt) {

            c = getchar();
            d = getchar();

            while(c != '*' && d != '/') {
                c = d;
                d = getchar();
            }

            m_cmt = false;

            c = getchar();
            c = getchar();
        }

        if(s_cmt) {
            c = getchar();
            while(c != '\n') c = getchar();

            s_cmt = false;

        }

        if(c == '/' ) {

            d = getchar();

            if(d == '*') m_cmt = true;

            else if(d=='/') s_cmt = true;

            else {
                input_buffer[in_char_count++]  =c;
                input_buffer[in_char_count++] = d;

                continue;
            }
        }

        if(m_cmt || s_cmt) continue;
        else
            input_buffer[in_char_count++] = c;

    }




    system("clear" );  /* CLEAR SCREEN ON  UNIX/LINUX   */
    system("cls" );    /*  CLEAR SCREEN ON DOS (..ooh windows i mean )   */



    printf("\n\n\nProcessed source code...\n\n" );

    input_buffer[in_char_count] = '\0';

    printf("%s", input_buffer);

    getchar();

    return EXIT_SUCCESS;


}

Then the program tested again, and it failed badly!

So, I adjusted it a bit. Since the program is failing on removing multiple comments, therefore I focused on that.

Below is the rewrite if you will:

/*
    Program to remove comments from a C Program.
   removes both C and C++ style comments
    */

#include<stdio.h>
#include<stdlib.h>
#include<stdbool.h>

/****************************************************************
***** THE PROGRAME SHOULD REMOVE COMMENTS ***********************
*****************************************************************/

static unsigned char input_buffer[200000];

int main(void) {


     /*****comments****/
         int c,d,
         in_char_count = 0;

    bool m_cmt = false; //multi-line comment detected, initially false
    bool s_cmt = false;   //single-line comment detected, initially false



    printf(" Enter Source Code Below \n\n" );


    while((c = getchar()) != EOF ) {

/*
 *******************************************************************
 ***************** We try to handle multiple lines here ************
 *******************************************************************
*/
        if(m_cmt) {

            c = getchar();

            while(c != '/') {
		c = getchar();
            }

            c = getchar();
	    if ( c != '\n') continue;
            m_cmt = false;
        }

        if(s_cmt) {
            c = getchar();
            while(c != '\n') c = getchar();

            s_cmt = false;

        }

        if(c == '/' ) {

            d = getchar();

            if(d == '*') m_cmt = true;

            else if(d=='/') s_cmt = true;

            else {
                input_buffer[in_char_count++]  =c;
                input_buffer[in_char_count++] = d;

                continue;
            }
        }

        if(m_cmt || s_cmt) continue;
        else
            input_buffer[in_char_count++] = c;

    }

    system("clear" );  /* CLEAR SCREEN ON  UNIX/LINUX   */
    system("cls" );    /*  CLEAR SCREEN ON DOS (..ooh windows i mean )   */


    printf("\n\n\nProcessed source code...\n\n" );

    input_buffer[in_char_count] = '\0';

    printf("%s", input_buffer);

    getchar();

    return EXIT_SUCCESS;


}

Then tested the program against itself and I had what we wanted!
I would rather have preferred reading a whole line at a time then parse it, than hand-picking char like we are doing...

I understand that since you have not explain File I/O in C, that maybe difficult for the readers to use. since we must be tested on what we have discussed do far. That is good. But I believe parsing is a lot easier using chunks instead.

Nice one bros.... Keep Up the great work...

its funny how stuff could work in one enviroment and not another, am testing right now with your input... but thanks so so much..

..so has anyone been able to run the comment removal program... feedback please before i dive into how it works..

olarid01:
good job OP. I started with this language and it paid off a lot (God bless Deitel). How I wish newbies learn this language first instead of jumping to all those ready made languages full of libraries........

Quite right man, they really miss the depth, intuitive prowess C and C++ can "bestow" on a programmer, Interestingly i also had the Deitel series in hard-back (both C&C++) really good books, though i really can't remember how i misplaced them

Hi all, i have been away for a while, i want to change the flow of things a bit, while i know there's still quite some HTML and CSS that needs to be introduced, i want to make the approach even more Hands on, so here's what we are going to do, we would all work individually on a project -a website which we shall all put online (for free) We'll be using https://www.000webhost.com/ as they offer a free hosting plan + free sub-domain, we would be creating an Hotel site with full reservation feature e.t.c, and as we go i'll introduce other neccessary HTML and CSS elements and also move into JavaScript PHP and Mysql, it would take a bit of time to conclude, as when we get to a certain stage we would be installing Apache/PHP/MySQL etc, but we should be able to meetup

So lets start like this

Create a new folder and name it hotel_website, within this folder, create several sub-folders as follows
css, js, server, images, and also create an empty index.html

Note don't go registering on https://www.000webhost.com/ just yet, we would fully create the Home-page before setting up our hosting plan then we'll take things from there

Grab the zip file here containing some of the images we would be using (some not all, more might be needed later)
https://drive.google.com/open?id=0B_OBMh7vaCg0U2JBdTFLRm9odDg

I'll be back in a few hours so we can get started

guru01:
Still waiting.

Lol, taking more time than i supposed, ain't easy manually creating demo's for each module/function, i have modified the primary API docs tho to be more intuitive and i have added a few more code examples to that, so you could as well start from there, just download a fresh-copy and launch the index.html file from the docs directory

Hi guyz, been a while. Sorry for the long break but i've been so busy with stuff.. Initially i thought about going into Formatted input and Output tonight, however we have covered quite some basics, so i felt why not throw in a relatively ambitious example and lets tackle it, before going into more advanced stuff

Languages belonging to the C family like C (itself), C++, Java, Go, JavaScript e.t.c, have certain similar features, like they all use both
single line comments

 // coment goes here ..this are also known as C++ style comments

and multi-line comments

 /*
  * Lotta comments here. blah blah
 */

Generally comments are meant for human readers to better understand your code or to provide a means to generate documentation using various tools, so the compiler/interpreter generally ignores and discarded all comments..
The code below is an attempt at writing a Program that would remove all Single and multi-line comments from a program source code, so try it by feeding it various commented programs (not just C programs, also Java e.t.c) that you can find anywhere and lets see if it works for you..
Also try going through the code to see if you can get a hang of it, I'll be back in a few hours to go through it thoroughly.

Also when testing the program after posting your code press Ctrl+Z to send the End-Of-File character as the program would keep reading input till it reaches EOF, then it processes the input and spits back your code with all comments removed..

/*
    Program to remove comments from a C Program.
   removes both C and C++ style comments
    */

#include<stdio.h>
#include<stdlib.h>
#include<stdbool.h>


static unsigned char input_buffer[200000];

int main(void) {


    int c,d,
        in_char_count = 0;

    bool m_cmt = false; //multi-line comment detected, initially false
    bool s_cmt = false;   //single-line comment detected, initially false



    printf(" Enter Source Code Below \n\n" );


    while((c = getchar()) != EOF ) {


        if(m_cmt) {

            c = getchar();
            d = getchar();

            while(c != '*' && d != '/') {
                c = d;
                d = getchar();
            }

            m_cmt = false;

            c = getchar();
            c = getchar();
        }

        if(s_cmt) {
            c = getchar();
            while(c != '\n') c = getchar();

            s_cmt = false;

        }

        if(c == '/' ) {

            d = getchar();

            if(d == '*') m_cmt = true;

            else if(d=='/') s_cmt = true;

            else {
                input_buffer[in_char_count++]  =c;
                input_buffer[in_char_count++] = d;

                continue;
            }
        }

        if(m_cmt || s_cmt) continue;
        else
            input_buffer[in_char_count++] = c;

    }




    system("clear" );  /* CLEAR SCREEN ON  UNIX/LINUX   */
    system("cls" );    /*  CLEAR SCREEN ON DOS (..ooh windows i mean )   */



    printf("\n\n\nProcessed source code...\n\n" );

    input_buffer[in_char_count] = '\0';

    printf("%s", input_buffer);

    getchar();

    return EXIT_SUCCESS;


}

In this example we included a new library header file you may have not seen before, stdbool.h , this header file simply introduces the Boolean types into our program, The Boolean type is a type that can hold two values either true or false, Boolean's can be used to represent state, like an [b]on [/b]or [b]off [/b]state, or 0 and 1, Yes and No, in the example we simply use it to track when we are in single and multi-line comments and when we are out of them... so please run the example and lets discuss it. The boolean type wasn't originally part of C, and was introduced in the C99 version of the language

paragon40:
Op where u dey nw ur students are waiting for u.

Make una no vex my system has been having ish.. hoping to get it fixed today

paragon40:
Stack welldone bro having been reading ur post since day one you are doing a wonderful job i sabi html and css small my pblm is javascript php and mysql, i must say this, i like the way u simplify ur tut, mark sense..i hope u will be able to complete it, it will help alot.

Thanks i'll definitely try to complete it

u na suppose get reality Tv

Patoskid:
Okkk I have gotten where the error was and have rectify. Waiting for more updates

kk i created the folder structure a few post back you might want to review it

timtoday:
Hi Stack,
Let me first say nice work. It is not easy to put up tutorials and as such in C programming language. The language of the gods! Lol.. I know plenty talk go start from here now!

All the same, there are one or two things in my opinion that i felt is NOT sitting well as regard some of the examples you posted. At least, from this one and those that followed. Of course, there are "some-what" in the previous ones like using a char datatype to get the return value of "macro" getchar which obviously returns an integer. Of course it works because intrinsically char are "integer". And you indeed use a correct return afterwards.

That been said, checking your example above, it will only take care of "spaces" whose ASCII value is 32. "Space-like" tab and others will NOT be taken care of.
Secondly, using a "raw" value i.e the ASCII value will defeat clarity of codes. Yes, you commented the line, but plain integer 32 could also be used for other things IF the code is extended or for other reasons. Somehow or somewhere portability will be defeated.

More so, why must I cram or have to lookup ASCII values to be able to write codes? It will further drive potential C programmer's away.

Lastly, there are other difficult concepts in C already why add this to it. It is like trying to know the IP address of google instead of just using www.google.com.

What do I think?
Since, C, already gave us a header file

<ctype.h>

Let us use that to our advantage and write a more portable codes, instead of "hand-picking" values.

Using such header, allows us to test more conveniently the value we are getting from standard input or file, however the case maybe.
Below is rewrite of some sort...

#include <stdio.h>
#include <ctype.h>  // isspace(int)

#define putchar(c) \
    if ((c) == '\b' || (c) == '\t' || (c) == ' ' || (c) == '\v')\
        putchar(' ')


int main(void) {

    int c;
    
    // we could have use bool value instead
    // from the header stdbool.h
    // instead of integer 
    int is_blanck = 0;

    while((c = getchar()) != EOF) {
        if (isspace(c)) { 
	    ++is_blanck;
	    if (is_blanck == 1)
	        putchar(c);  /// self defined macro above
	} else {
	    is_blanck = 0;
	    // note the bracket around the macro
	    (putchar)(c);   // macro from stdio.h
	}
    }

    return 0;
}

Really, there is (might be) NO *need* for the self defined macro included but to show that allowing the language to do it work. It a lot painless some of the time.
Just a note.

True and Yes was just trying to poiny out that ASCII values can also be used in plaxe of the characters them selves and as for the putchar MACRO, dats a bit too complex a statement in this stage, i actually confuse myself a lot just trying to structure the tutorial, but its good to know i have folks watching my back, and yeah C provides us several functions to do stuff i've bn trying to do manually, but i fell that would give the beginer a good hands on approach in cases they need to implement their own functions,i learnt C from Books such as K&R e.t.c so 4gv my Old school style

timtoday:
While the issues of ASCII value and others in my previous post still apply to this. I will like to draw your attention to this

Contrary to this statement .

No your program will NOT compile! WHY? an expression is needed before the token "=". In fact, the substitute value of PI is seen from the space that follows afterwards...

Probably is a typo! You are doing great boss...

Jesus LOL how silly of me would modify that right away, thanks

so we have successfully used CSS to resize the image

The image element also has a width and height attribute for controlling its size, however i would be showing examples based on CSS
Like all other elements, the <img> can have the ID attribute which among other uses can be used to reference the <img> element in CSS

So next we set a width and height for the image using CSS declarations

Open up the index.html file for editing an add an ID attribute to the <img> tag, am using image_1 for the ID but you can use whatever you want

<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>

<!-- our normal style tag where our CSS has been going -->
<style>

</style>



</head>
<body>

<div id="header">
<span id="header-text">
Welcome to the Application
</span>
</div>

<p><a href="page2.html" title="Link to page 2">Go to page2</a></p>

<img src="images/coupe-1374436_960_720.jpg" alt ="Buggati Model" id="image_1" />

</body>
</html>

next open the index.css file in the css sub-directory
and add the following

 #image_1 {
    width: 200px;
    height: 150px
}

save and refresh the page, here's the result i got

If the image doesn't show up first make sure you actually copied it to the images folder, and check you did not mis-spell the file name in the src value

The <img> tag is an empty tag, so it doesn't have a closing tag pair

The basic form of an Image tag/element is

<img src="imageFileName.jpg" alt="alternateName"  />

The src (source) attribute is what points to the actual image file we are trying to embed in the document, it points the browser to the location on the server or file system where the image is actually located.

For example if servin an image from the file-system the src value might be something like

 <img src ="file:///C:/Users/user/Desktop/an_image_file.jpg" alt="alternate name"/>

and if serving from a server the src attribute may be something like

 <img src ="http://example.com/images/border.jpg" alt="alternate name" />

 or may be

 <img src ="/images/border.jpg" alt="alternate name" />  //This is a relative file-path, and would be relative to the HTML page embedding the image 

The alt (alternative text) or "fallback content", is a recommended attribute which value is displayed if the user's browser for some reason cannot load the image. The alt attribute also plays a role in SEO (Search Engine Optimization)

Lets see some images in action

download the image at this location https://pixabay.com/en/coupe-limousine-pkw-auto-vehicle-1374436/
it should be named coupe-1374436_960_720.jpg

now copy the image to the images folder, which is part of the folder structure we earlier created

No open the index.html file for editing, and modify by adding the image tag a shown

<!DOCTYPE html>
<html>
<head>
<title>My Web App</title>

<!-- our normal style tag where our CSS has been going -->
<style>

</style>



</head>
<body>

<div id="header">
<span id="header-text">
Welcome to the Application
</span>
</div>

<p><a href="page2.html" title="Link to page 2">Go to page2</a></p>

<img src="images/coupe-1374436_960_720.jpg" alt ="Buggati Model" />

</body>
</html> 

save and open the index file you should have a page that looks like this

[size=14pt]Let's look at the basics of adding Images to an HTML5 document[/size]

The <img> element, like most elements, is a container. It is not an image in and of itself, but is used to embed an Image that exists as an external file.

Browsers can handle various image formats but for most cases, web-developers limit images used to three types

JPEG: This is a commonly used format for digital images, JPEG files end in a .jpg or .jpeg extension, JPEG is an acronym for the Joint Photographic Experts Group, a group which created and maintains the JPEG standard

PNG : Portable Network Graphics is a Raster Image format also popularly used on the web, its appropriate for embedding vector based images into your web page, PNG files have the extension .png

GIF : Graphics Interchange Format is a bitmap image format usually used for embedding short animations and movie-clips in a webpage, though it can as well be used for still images, GIF files have a .gif extension