Need help with basic HTML, PHP,... stuff

[Required]

Hi

I try to build a Simple Homepage for one of my Domain with basic HTML, PHP stuff without a CMS to learn how to use that.

Now I try this: https://www.w3schools.com/css/tryit.asp?filename=trycss3_border-radius

Well I want to have more lines in the Box than just that one.

<p id="rcorners1">Rounded corners!</p>

When I put in the next Line:

<p>This is a paragraph.</p>

for example the are outside of the Box?!

Sadly I try to ask in a German Site but the Germans are so rude and not replay with anything.

THX!

[darkDOS]

https://www.w3schools.com/css/tryit.asp?filename=trycss3_border-radius is showing CSS, specifically creating rounded corners on borders.

I am not too clear on what you are having trouble with.

Can you provide some code and an explanation on what you are having trouble with?

[Required]

I want to have multiple lines like:
erajtatjatd

adtjtadjadt

adtjadtjejht

ethetbetb

eathjetj

inside the Box. I dont know what I need to do to go to the next line.

When I use: <p>This is a paragraph.</p> the are outside of the Box and in the next Line...

[minibois]

If you have this:

<p id="rcorners1">Rounded corners!</p>
<p>This is a paragraph.</p>

You get this:

 

If you want "This is a paragraph" inside the green box, you should probably consider using a <div> instead.

 

<div id="rcorners1">
  <p>Rounded corners!</p>
  <p>This is a paragraph.</p>
</div>

Which will produce this:

[darkDOS]

"CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes." - https://www.w3schools.com/css/css_intro.asp

 

In the example W3Schools is showing, they have defined the styles in the <style> </style> tags.

Within, they are referencing #rcorners1, #rcorners2, and #rcorners3. This indicates every time an element with these id's are found, apply this style.

Later, they are defining a paragraph as <p id="rcorners1">Rounded corners!</p> and it is appearing with rounded corners (as well as all the other styles defined in the CSS).

 

 

[minibois]

13 minutes ago, darkDOS said:

"CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes." - https://www.w3schools.com/css/css_intro.asp

 

In the example W3Schools is showing, they have defined the styles in the <style> </style> tags.

Within, they are referencing #rcorners1, #rcorners2, and #rcorners3. This indicates every time an element with these id's are found, apply this style.

Later, they are defining a paragraph as <p id="rcorners1">Rounded corners!</p> and it is appearing with rounded corners (as well as all the other styles defined in the CSS).

Keep in mind OP edited their topic after posting it (probably due to a Ctrl+Enter posting situation) to add their question:

28 minutes ago, Required said:

When I put in the next Line:

<p>This is a paragraph.</p>

for example the are outside of the Box?!

^the relevant stuff added later.

 

OP mentioned without CMS, content management system (i.e. Wordpress, Joomla, etc.). There was no mention of avoiding CSS.

[Required]

2 minutes ago, minibois said:

Keep in mind OP edited their topic after posting it (probably due to a Ctrl+Enter posting situation) to add their question:

The Site here wasnt lodading propperly i dont tought that someone would replay that quick.

11 minutes ago, minibois said:

<div id="rcorners1"> <p>Rounded corners!</p> <p>This is a paragraph.</p> </div>

oh I must learn more about "div" and what that do.

12 minutes ago, minibois said:

Which will produce this:

 

The Image show what my 2nd problem is. Everyone who use Word, Writer,... know there is a difference between Enter and Shift Enter. Sorry I dont know how to call it in english. It seem the "p" make the equvalent of an Enter with a big space between the lines. When I press Shift Enter in a Text Edit Software the normally make tide space. What is the HTML Equvalent or a Shift Enter?

My Site look totally messed up because there are that huge gaps at each line...

6 minutes ago, minibois said:

OP mentioned with CMS, content management system (i.e. Wordpress, Joomla, etc.). There was no mention of avoid CSS.

Yes, I have no problem about CSS but since I dont know anything about...

13 minutes ago, darkDOS said:

"CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes." - https://www.w3schools.com/css/css_intro.asp

I know, I know,... but I try to keep it as simple as possible at the moment. I must learn so many thinks at once HTML, PHP, CSS and later about SQL,...

Long storry short w3schools offer so many damn hot thinks to try it out I will need a lot of time to learn it.

My favorites:

https://www.w3schools.com/cssref/pr_class_cursor.asp

https://www.w3schools.com/css/css_image_sprites.asp

https://www.w3schools.com/css/css3_images.asp -> Image Filter!

 

[darkDOS]

8 minutes ago, Required said:

The Image show what my 2nd problem is. Everyone who use Word, Writer,... know there is a difference between Enter and Shift Enter. Sorry I dont know how to call it in english. It seem the "p" make the equvalent of an Enter with a big space between the lines. When I press Shift Enter in a Text Edit Software the normally make tide space. What is the HTML Equvalent or a Shift Enter?

You are looking for the <br> tag.

 

<p id="rcorners1> Line 1
<br>Line 2</p>

https://www.w3schools.com/tags/tag_br.asp

[minibois]

2 minutes ago, Required said:

The Image show what my 2nd problem is. Everyone who use Word, Writer,... know there is a difference between Enter and Shift Enter. Sorry I dont know how to call it in english. It seem the "p" make the equvalent of an Enter with a big space between the lines. When I press Shift Enter in a Text Edit Software the normally make tide space. What is the HTML Equvalent or a Shift Enter?

The <p> tag stands for "paragraph", so 'logically' they insert a whitelines between a closed and opened paragraph. That is how paragraphs are formatted in books too.

If you want a single space enter, you can use </br>. 'br' stands for break, as in "break line".

 

If you want two sentences in the rounded box using <p>, you can do this:

<p id="rcorners1">
  Rounded corners!
  </br>
  another line!
</p>

And you get this:

 

Of course the same applies if your exchanged the <p> for <div>

5 minutes ago, Required said:

oh I must learn more about "div" and what that do.

HTML works with different tags, like <html>, <body>, <p>, <div> etc.

These tags are 'active' as long as they are not closed. <div> tags are very very often used on webpages for really any kind of styling. They are quite versatile, can be used in multiple places and you can basically set anything in them (i.e. background color/image, text size/color/font/etc. and much more).

 

What I would say the most important thing about HTML to understand, is how to look at the tags and see where they are active and where they are closed.

It's general convention to indent anything in a new tag. Like so:

<html>
	<head>
    	<title>Very nice title</title>
   	</head>
    
    <body>
    	<div="example">
        	<p>very nice text here</p>
        </div>
        
        <div="another">
        	<p>more text</p>
       	</div>
	</body>
</html>

(please ignore the </body> and <head> & </head> out of line, the code blocks sometimes work weird here )

This way, it's a lot easier to see where the tags 'apply' to, so you can visualize it like this:

That way you know what the tags apply to and what not.

If for example, a large part of your website needs to have red text, but then a specific part inside of there needs to have blue text, you can just place <div> inside of another <div> to first make the text red and then the specific text in the second <div> blue.

[Required]

<p><a href="#NO1">Point1</a></br>
...
<br><a href="#NO30">Point30</a></p>

So is here p used right? Or whould I use br also?
Everything between use br at both ends.

I use that to jump to points on the Site (thanks that works).

Does I need a div here to?

 

Well beside of that I quite know some thinks about HTML but read and write are 2 different thinks.

Now I dont want to use any CMS because its just a thiney maybe 2, 3 Site Page who I want to be free to change what I want and need.

 

Is there some easy way to "export" some parts of the code into another file to get executed if I have more than one Site on all so I save time to edit anything?

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown

I want have just that simple Top Navigation Bar who should be the same on every Site.
Does something goes into a CSS File to?
(OMG I found that: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active

So its better to use the Tab feature insted of multiple Sites?)

Thanks

[minibois]

14 hours ago, Required said:

<p><a href="#NO1">Point1</a></br>
...
<br><a href="#NO30">Point30</a></p>

So is here p used right? Or whould I use br also?
Everything between use br at both ends.

Yeah, this would be correct, if you want Point1 and Point30 in the same paragraph

14 hours ago, Required said:

Does I need a div here to?

Need? No.

Could it be useful in some capacity? Yes, if you - for example - wanted to set a custom background color or something to the page.

 

See <div> as a way to apply some CSS to a specific part of the page.

14 hours ago, Required said:

Is there some easy way to "export" some parts of the code into another file to get executed if I have more than one Site on all so I save time to edit anything?

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown

I want have just that simple Top Navigation Bar who should be the same on every Site.

Does something goes into a CSS File to?

Something like this you would put in your CSS, so you can access it from all page on your website.

there isn't a simple way to make sure the same thing are on every webpage, safe from making a template and copy - pasting that to every webpage.

14 hours ago, Required said:

(OMG I found that: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_active

So its better to use the Tab feature insted of multiple Sites?)

there are good scenarios to use this, there are good scenarios to have different webpages