Welcome to our community

Be a part of something great, join today!

Html, css, javascript, php

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
Hello!!! (Wave)

I wanted to ask you if you are familiar with html, css, javascript and php... What is it about? 🤔

Here is for example an exercise:

Implement in HTML and CSS the site that is shown below (the specifications are marked with red). The site will be without functionality. How would we proceed? 🤔
 

Attachments

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
Hey evinda !!

Either find a web design editor, or write it directly in text files.
To be honest, I wouldn't know which web design editor to pick.
But I do know how to write it directly.

I think a good starting point is https://www.w3schools.com/.
You'll see all of the topics that you've mentioned and it allows you to try things out directly and interactively. 🤔
 

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
Here's how it can look.

HTML:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

.imageview {
  width: 480px;
  padding: 12px;
  border: 12px solid black;
  display: block;
  margin-left: 100px;
}

table {
  border-collapse: collapse;
}

th {
  background-color: #eeeeee;
  color: black;
  border-bottom: 3px solid black;
}

th.colwidth {
  width: 200px;
}

td {
  border: 1px solid #dddddd;
  padding: 4px;
}

tr:nth-child(odd) {
  background-color: black;
  color: white;
}

td:nth-child(4) {
  text-align: right;
}
</style>
</head>
<body>

<h1>Ηινακας #1</h1>

<image class="imageview" src="https://images-na.ssl-images-amazon.com/images/I/718%2BGbOJfoL._AC_SL1000_.jpg"></image>

<h2>Τρέχουσες Προσφορές</h2>

<table>
  <tr>
    <th class="colwidth">Ονομα</th>
    <th class="colwidth">Επώνυμο</th>
    <th class="colwidth">Email</th>
    <th>Προσφορά</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>150</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>200</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

We can copy and paste it for instance here to see it. 🤔
 
Last edited:

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
Here's how it can look.

HTML:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

.imageview {
  width: 480px;
  padding: 12px;
  border: 12px solid black;
  display: block;
  margin-left: 100px;
}

table {
  border-collapse: collapse;
}

th {
  background-color: #eeeeee;
  color: black;
  border-bottom: 3px solid black;
}

th.colwidth {
  width: 200px;
}

td {
  border: 1px solid #dddddd;
  padding: 4px;
}

tr:nth-child(odd) {
  background-color: black;
  color: white;
}

td:nth-child(4) {
  text-align: right;
}
</style>
</head>
<body>

<h1>Ηινακας #1</h1>

<image class="imageview" src="https://images-na.ssl-images-amazon.com/images/I/718%2BGbOJfoL._AC_SL1000_.jpg"></image>

<h2>Τρέχουσες Προσφορές</h2>

<table>
  <tr>
    <th class="colwidth">Ονομα</th>
    <th class="colwidth">Επώνυμο</th>
    <th class="colwidth">Email</th>
    <th>Προσφορά</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>150</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>200</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

We can copy and paste it for instance here to see it. 🤔

Based on that, I want to try to implement in HTML and CSS the following website using the following specifications-marked with red.


page1.PNG

page2.PNG

According to your code, at the beginning do we use <style> </style>, in order to insert all the information given, for example the dimensions of the image?
 

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
Based on that, I want to try to implement in HTML and CSS the following website using the following specifications-marked with red.

According to your code, at the beginning do we use <style> </style>, in order to insert all the information given, for example the dimensions of the image?
Yes. (Nod)

In the <head> part we have a <style> part that contains the CSS that specifies the various dimensions and other style attributes.
The CSS can also be put in a separate file with the extension .css. 🤔

In the <body> part we have the HTML elements that contains the various texts and layout elements. 🤔
 

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
Yes. (Nod)

In the <head> part we have a <style> part that contains the CSS that specifies the various dimensions and other style attributes.
The CSS can also be put in a separate file with the extension .css. 🤔

In the <body> part we have the HTML elements that contains the various texts and layout elements. 🤔
So far I have tried the following:

Code:
<html>

<body>

<h1>Ηλεκτρονικό Καστάστημα</h1>


<h2>Φίλτρα</h2>

<table>
  <tr>
    <th class="rowspan">Κατασκευαστής</th>
    <th class="rowspan">Μέγεθος Οθόνης</th>
    <th class="rowspan">Λειτουργικό σύστημα</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Samsung</td>
  </tr>
  <tr>
    <td>Μεσαία (5" έως 5.9")</td>
    <td>Μεγάλη(6" και άνω)</td>
  </tr>
  <tr>
    <td>Android</td>
    <td>iOS</td>
  </tr>
</table>

</body>
</html>

Don't we use rowspan to change the row where the next heading of the table is shown?
Because, by running it, I saw that the one heading is shown next to the other.... :unsure:
 

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
Don't we use rowspan to change the row where the next heading of the table is shown?
Because, by running it, I saw that the one heading is shown next to the other....
First off, "rowspan" is not the name of a class.
Instead it's an attribute on its own.
See here. You may want to click the Try it Yourself buttons to see what it looks like.
So we should not have class="rowspan" but instead we could have for instance rowspan="3".
Its purpose is to merge multiple cells in the same column to one cell, but that's not what we want. 🤔

I'm not aware of a means to split the cells of the header of a table over multiple rows.
As far as I know, the cells of the header are always horizontally aligned. 🤔
 
Last edited:

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
Suppose we do it without a table? 🤔

Something like this:
Code:
<html>

<body>

<h1>Ηλεκτρονικό Καστάστημα</h1>

<h2>Φίλτρα</h2>

<h3>Κατασκευαστής</h3>
Apple<br/>
Samsung<br/>
<hr/>

<h3>Μέγεθος Οθόνης</h3>
Μεσαία (5" έως 5.9")<br/>
Μεγάλη(6" και άνω)<br/>
<hr/>

<h3>Λειτουργικό σύστημα</h3>
Android<br/>
iOS<br/>
<hr/>

</body>
</html>
1615138490266.png
🤔
 

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
Suppose we do it without a table? 🤔

Something like this:
Code:
<html>

<body>

<h1>Ηλεκτρονικό Καστάστημα</h1>

<h2>Φίλτρα</h2>

<h3>Κατασκευαστής</h3>
Apple<br/>
Samsung<br/>
<hr/>

<h3>Μέγεθος Οθόνης</h3>
Μεσαία (5" έως 5.9")<br/>
Μεγάλη(6" και άνω)<br/>
<hr/>

<h3>Λειτουργικό σύστημα</h3>
Android<br/>
iOS<br/>
<hr/>

</body>
</html>
View attachment 11003
🤔
Looks good! I will check it more analytically and I will ask you if I don't understand something.... 🤔

As for the white box at the right side, I have done :

https://www.w3schools.com/code/tryit.asp?filename=GOD4O2CZH208

But so far I don't have the desired spaces of 20px around the text and image. How do we fix that? 🧐
 

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
Looks good! I will check it more analytically and I will ask you if I don't understand something....

As for the white box at the right side, I have done :

https://www.w3schools.com/code/tryit.asp?filename=GOD4O2CZH208

But so far I don't have the desired spaces of 20px around the text and image. How do we fix that?
Good! :)

It's called padding. See this link on w3schools.

If you right-click on your white box and select Inspect Element, you should see the current layout as a tab sheet on the right side in the window that pops up.
It looks like this:
1615235485503.png
It shows that you currently have a padding of 0 on all sides of your image+text that has size 450x192 pixels. 🤔
 
Last edited:

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
Good! :)

It's called padding. See this link on w3schools.

If you right-click on your white box and select Inspect Element, you should see the current layout as a tab sheet on the right side in the window that pops up.
It looks like this:
View attachment 11004
It shows that you currently have a padding of 0 on all sides of your image+text that has size 450x192 pixels. 🤔
Ah, I see!!! (Nod)

How can we get the logo in the dark blue box next to the text? Now it is above the dark blue box..... 🤔

https://www.w3schools.com/code/tryit.asp?filename=GOE85RFLJHNE
 

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
How can we get the logo in the dark blue box next to the text? Now it is above the dark blue box.....
You have specified the image source https://images.app.goo.gl/wKQ35qkjRAmVB7218.
But that is not a picture file.
If we open that address in a browser we can follow the redirections to https://ypodomes.com/wp-content/uploads/2020/04/skroutz.jpg.
If we specify that as the image source then it works for me. 🤔

https://www.w3schools.com/code/tryit.asp?filename=GOE0Y8MPZ43Z
 

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
You have specified the image source https://images.app.goo.gl/wKQ35qkjRAmVB7218.
But that is not a picture file.
If we open that address in a browser we can follow the redirections to https://ypodomes.com/wp-content/uploads/2020/04/skroutz.jpg.
If we specify that as the image source then it works for me. 🤔

https://www.w3schools.com/code/tryit.asp?filename=GOE0Y8MPZ43Z
https://www.w3schools.com/code/tryit.asp?filename=GOEDP3FEHHY8

Now I used the desired image, but it is atill above the title.... 🧐
What am I doing wrong? 🤔
 
Last edited:

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
It still doesn't work for me... How could we add the following image as the desired logo ?

file:///C:/Users/dimma/AppData/Local/Temp/Temp1_assignment1_images%20(2).zip/skroutz.svg
We cannot link to a local file from an internet page.
The browser prohibits it as it is deemed unsafe. 🧐

Or if we want to, then the html page itself must also be a local file. Say, in the same directory. Then you can just refer to "skroutz.svg" without any prefix or path.
Btw, you will need to extract it from the .zip file before it can find it. :oops:

However, we should be able to use the https link to the picture.
Here is one that works for me with the .svg file.
https://www.w3schools.com/code/tryit.asp?filename=GOE0Y8MPZ43Z

What does not work for you? :unsure:
 
Last edited:

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
We cannot link to a local file from an internet page.
The browser prohibits it as it is deemed unsafe. 🧐

Or if we want to, then the html page itself must also be a local file. Say, in the same directory. Then you can just refer to "skroutz.svg" with any prefix or path.
Btw, you will need to extract it from the .zip file before it can find it. :oops:

However, we should be able to use the https link to the picture.
I see!!! (Nod)



Here is one that works for me with the .svg file.
https://www.w3schools.com/code/tryit.asp?filename=GOE0Y8MPZ43Z

What does not work for you? :unsure:
For me it appears like that:


1615328876905.png

The image is very big and not at the same line with the title....🧐


What is at the way of my previous post wrong? Why I still get not the image at the right position? :unsure:
 

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
For me it appears like that:

The image is very big and not at the same line with the title....

What is at the way of my previous post wrong? Why I still get not the image at the right position?
It's because the picture is very big and it is shown in its natural size.
Your CSS puts it at the left top, which is where it is.
To make it smaller, we need to set the width attribute.
If you make the style of the image style="width: 100px;", you'll see that it will be smaller. 🤔

Additionally, the default style of a <h1> element puts it on its own line.
If we don't want that, then we need to either put it inside a <span> element, which is by default inline.
Or we need to add display: inline-block to the style of the <h1> element. 🤔

Alternatively we can create a table with 2 columns and put the logo in the first cell, and the <h1> element in the second cell. 🤔
 

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
It's because the picture is very big and it is shown in its natural size.
Your CSS puts it at the left top, which is where it is.
To make it smaller, we need to set the width attribute.
If you make the style of the image style="width: 100px;", you'll see that it will be smaller. 🤔

Additionally, the default style of a <h1> element puts it on its own line.
If we don't want that, then we need to either put it inside a <span> element, which is by default inline.
Or we need to add display: inline-block to the style of the <h1> element. 🤔

Alternatively we can create a table with 2 columns and put the logo in the first cell, and the <h1> element in the second cell. 🤔

I tried the last way: https://www.w3schools.com/code/tryit.asp?filename=GOEG5J7IH4JV 🧐

Now the problem is that the backround dark blue is not everywhere above. Were an other of your propositions better to use? :unsure:
 

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
Last edited:

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
Just for fun, I found jsfiddle.net, which looks a bit neater than w3schools.
And it seems to allow for collaboration. 🤔
https://jsfiddle.net/klaas_vanaarsen/j0m79sx2/6/#&togetherjs=EzJsfNs8n3
Now the header part works!!! (Nod)


I created an account at jsfiddle. I am trying now to create the checkmark box which is on the left, it should be a white box with black checkmark. When we have a white backround it is correct, but now we have a blue backround and then I get a blue box with white checkmark: https://jsfiddle.net/evinda/0u98q37k/2/ :unsure:
 

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
I created an account at jsfiddle. I am trying now to create the checkmark box which is on the left, it should be a white box with black checkmark. When we have a white backround it is correct, but now we have a blue backround and then I get a blue box with white checkmark: https://jsfiddle.net/evinda/0u98q37k/2/ :unsure:
What do you mean? :unsure:

I've commented out the CSS for the checkbox.
Oh, and I've also added a close tag </input> that was missing.
It looks like this:
1615368047587.png

That is correct isn't it? :unsure:
 

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
9,264
Yes, that is correct, but I don't get the same result as you. My result:
I see what you mean.
It should be </input> instead of <input/>, which fixes the issue for me. :giggle:
 

evinda

Well-known member
MHB Site Helper
Apr 13, 2013
3,828
I see what you mean.
It should be </input> instead of <input/>, which fixes the issue for me. :giggle:
I get now:

1615381285562.png


The colors of my result is still different than yours. 🧐