How can I implement a website using HTML and CSS without functionality?

In summary, the conversation involved discussing how to implement a website using HTML and CSS, specifically focusing on creating a table and adjusting the layout using padding. The conversation also included troubleshooting an issue with an image source and finding the correct URL to use.
  • #1
evinda
Gold Member
MHB
3,836
0
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

  • matrix.PNG
    matrix.PNG
    99.1 KB · Views: 74
Technology news on Phys.org
  • #2
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. 🤔
 
  • #3
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:
  • #4
Klaas van Aarsen said:
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?
 
  • #5
evinda said:
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. 🤔
 
  • #6
Klaas van Aarsen said:
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:
 
  • #7
evinda said:
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:
  • #8
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

🤔
 
  • #9
Klaas van Aarsen said:
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? 🧐
 
  • #10
evinda said:
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:
  • #11
Klaas van Aarsen said:
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
 
  • #12
  • #14
Klaas van Aarsen said:
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:
  • #15
evinda said:
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:
  • #16
Klaas van Aarsen said:
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)
Klaas van Aarsen said:
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:
 
  • #17
evinda said:
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. 🤔
 
  • #18
Klaas van Aarsen said:
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:
 
  • #19
Last edited:
  • #21
Klaas van Aarsen said:
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:
 
  • #22
evinda said:
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:
 
  • #23
Klaas van Aarsen said:
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:
View attachment 11009

That is correct isn't it? :unsure:

Yes, that is correct, but I don't get the same result as you. My result:

1615370933726.png
 
  • #24
evinda said:
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:
 
  • #25
Klaas van Aarsen said:
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. 🧐
 
  • #26
evinda said:
The colors of my result is still different than yours.

Strange... 🤨

Turns out it is a style that is apparently coming from your browser.
With Chrome it looks like you've shown it.
But with Firefox it looks like I've shown it.
It happens on any other web page as well. 🧐

In other words, nothing to worry about. It is fine as it is. It is just how a checkbox happens to be displayed by a particular browser. :giggle:
 
  • #27
Klaas van Aarsen said:
Strange... 🤨

Turns out it is a style that is apparently coming from your browser.
With Chrome it looks like you've shown it.
But with Firefox it looks like I've shown it.
It happens on any other web page as well. 🧐

In other words, nothing to worry about. It is fine as it is. It is just how a checkbox happens to be displayed by a particular browser. :giggle:

I tried that now in Firefox and it works! (Nod) As for the two pictures that are in the white boxes I have written the dimensions as noted but I don't get the desired result. Do I have to change the spaces between the parts of the text? Because if I have done this correctly, the dimensions of the image are as shown.

I wrote: https://www.w3schools.com/code/tryit.asp?filename=GOF7O1ZJ8HS4

My result:

1615387098687.png
 
  • #28
evinda said:
As for the two pictures that are in the white boxes I have written the dimensions as noted but I don't get the desired result. Do I have to change the spaces between the parts of the text? Because if I have done this correctly, the dimensions of the image are as shown.

I wrote: https://www.w3schools.com/code/tryit.asp?filename=GOF7O1ZJ8HS4

My result:
That's because of the float: left.
It makes the picture 'float' to the left and effectively breaks the tie to the surrounding <div>.
So we have to remove the 'float'. 🧐

After we remove it, the text is displayed below the picture instead of to the right.
But we know how to solve that now don't we? (Wait)

Either a <table> as we did for the page header.
Or modify the style of the <h2> to include display: inline-block. In this case our <div>'s are also causing trouble since their default style is not inline either.

If we pick a table then we can also use 3 rows to nicely split the text.
And we can use rowspan="3" to merge the cells in the left column to accommodate the picture. ;)
 
  • #29
Klaas van Aarsen said:
That's because of the float: left.
It makes the picture 'float' to the left and effectively breaks the tie to the surrounding <div>.
So we have to remove the 'float'. 🧐

After we remove it, the text is displayed below the picture instead of to the right.
But we know how to solve that now don't we? (Wait)

Either a <table> as we did for the page header.
Or modify the style of the <h2> to include display: inline-block. In this case our <div>'s are also causing trouble since their default style is not inline either.

If we pick a table then we can also use 3 rows to nicely split the text.
And we can use rowspan="3" to merge the cells in the left column to accommodate the picture. ;)

I picked a table with the rowspan and it works! (Nod)
But in the desired result between the text and the price there is more space than between the rows of the text, do we use for this an other comment? Or just an additional empty row? :unsure:
 
  • #30
evinda said:
But in the desired result between the text and the price there is more space than between the rows of the text, do we use for this an other comment? Or just an additional empty row?
What do you mean? o_O
 
  • #31
  • #32
evinda said:
For my result I wrote: https://www.w3schools.com/code/tryit.asp?filename=GOFDGKW0LQ9Z

Do we have to add an empty row before the price or how do we get the desired result?
I see you've split the text in the middle over multiple rows.
But I don't think that is desired, since "CPU:" belongs to what comes after.
So I think the text in the middle should go into a single cell so that its get wrapped however it will fit.
Consequently the lines of this text will get a little closer together.
We should also add a space after interpunction so that the wrapping happens more naturally.
We might then leave the price as is.

See https://www.w3schools.com/code/tryit.asp?filename=GOFFXLWHR2ZP
1615406261139.png
Alternatively we can put a<br/> after the text in the middle.
Or we can use CSS to add padding such that we get more space between the text and the price.
Or we can use CSS to specify a height for the row that the price is in. 🤔
 
Last edited:
  • #33
Klaas van Aarsen said:
I see you've split the text in the middle over multiple rows.
But I don't think that is desired, since "CPU:" belongs to what comes after.
So I think the text in the middle should go into a single cell so that its get wrapped however it will fit.
Consequently the lines of this text will get a little closer together.
We should also add a space after interpunction so that the wrapping happens more naturally.
We might then leave the price as is.

See https://www.w3schools.com/code/tryit.asp?filename=GOFFXLWHR2ZP
https://www.physicsforums.com/attachments/11015Alternatively we can put a<br/> after the text in the middle.
Or we can use CSS to add padding such that we get more space between the text and the price.
Or we can use CSS to specify a height for the row that the price is in. 🤔

Now it works! (Nod)
Can you explain to me each parameter of:

Code: 
<input type="checkbox" checked="checked" value="Text1">Text1<br/>
<input type="radio" name="Text" value="Text2">Text2<br/>
<input type="text" id="uname" name="name" placeholder="From" size="7">

What is the purpose of each parameter? 🧐
 
Last edited:
  • #34
evinda said:
Code: 
<input type="checkbox" checked="checked" value="Text1">Text1<br/>
<input type="radio" name="Text" value="Text2">Text2<br/>
What is the purpose of each parameter?

The type is how it is shown in the browser and how it behaves when we click it.
checked is to set the initial state of the checkbox to either checked or unchecked. Often this will be omitted from the html code, but will instead be manipulated by javascript code.
At this time - for the html and css layout - we don't really need the other parameters and we can just omit them. 🧐

value is a value that javascript code can use to recognize what it needs to do.
name is an identification that javascript code can use to refer to the element and change for instance the checked status.
The Text1 that is outside the <input> tag is usually equivalent to the value, but it is what it shown to the user while the value is what is used by the javascript code. 🧐

We might have for instance:
Code: 
Device types (check what you want to filter on):
<input type="checkbox" checked="checked" value="showAndroidDevices">Android<br/>

Operation System (select the operating system for the device):
<input type="radio" name="selectAndroidOperatingSystem" value="1">Android<br/>
🤔
 
Last edited:
  • #35
At
Code: 
<input type="text" id="uname" name="name" placeholder="From" size="7">

For the size part I have to try different sizes (7,8,9,..) till my result is the same as the desired result. Is that right? :unsure:
I mean for:
1615474905901.png
 

Similar threads

JavaScript What scripts do websites like unitednuclear.com use?
    • Programming and Computer Science
Replies
3
Views
1K
JavaScript Javascript reading files: how should I have asked?
    • Programming and Computer Science
Replies
4
Views
740
Java Where can I find free online resources to learn HTML, Javascript, and CSS?
    • Programming and Computer Science
Replies
11
Views
3K
Comp Sci XML and JS to make a website-:
    • Engineering and Comp Sci Homework Help
Replies
22
Views
1K
Java Getting Started with JavaScript and HTML for Website Development
    • Programming and Computer Science
Replies
7
Views
2K
How can I effectively display different types of worker coverage on a map?
    • Art, Music, History, and Linguistics
Replies
21
Views
1K
C/C++ How to handle the Specification and Implementation files to be used in C++?
    • Programming and Computer Science
3
Replies
81
Views
5K
How can I get a summer-job as a self taught programmer?
    • STEM Career Guidance
Replies
3
Views
1K
PHP Preventing SQL Injection in PHP Forms
    • Programming and Computer Science
Replies
4
Views
6K
How about: How can I take in integers in C without using scanf?
    • Programming and Computer Science
Replies
4
Views
2K

Hot Threads

Recent Insights

Back
Top