KidzTalk - Recent questions tagged #computers

Learn HTML here! REPOST + UPDATED + CSS TOO???

Thu, 24 Oct 2024 17:44:05 +0000

Hey guys! So, you clicked on this post to learn HTML, eh? Well, your in the right place!

HTML is a programming language that is fun and frustrating at times.

HTML stands for HyperText Markup Language

You could use it to make forums, websites, documents, and MORE!

So, lets get started!

Create a new file in a folder called index.html (i recommend using https://vscode.dev)

First, you put <DOCTYPE! html> at the top on line 1! (formatting is important so you can read your code)

After that, put <html>, if your code editor is good (i recommend https://vscode.dev) it should auto generate </html> after that. the <html> and </html> things are called tags, you can put things in them!

After you put that, put <head> in between the <html> tags. Anything inside a tag is called content, and tags and content together are called elements! please remember these words for later.

After you put your head tags, put <title> inbetween <head> and </head>

that is the data that will be applied to your document!

after that, in between <title> and </title>, put whatever you want! When you open the document in your files, it will open a page on your browser! Then if you look at the tab name, what you put in the title tags will be there!

-------------------CONTINUED-------------------

After that, below the </head> tag, put <body>

<body> is the element that will hold everything that the user can see (images, gifs, text, etc.)

Put <h1>, and inside those <h1> tags, put whatever text you want!

When you reload the page, it will show big text!

Try that with <h2>, <h3>, <h4>, <h5>, and <h6>!

Those are the headers! Now, lets make paragraphs!

put <p> tags. Like the headers, put text inside them to show that text!

So, you put the text, right?

put a new line in the <p> tag, and on that new line, put text!

do you notice something? Yep, that new line doesn't break apart the text!

to do that, put <br> for a new line!

this also spaces apart elements if your too lazy to use padding (we will get into that later)

also, you can put images! In your files, put an image in the same folder as your html file

then put <img src="image.png" height="50" width="50">

that will create an image on your page that is exactly 50 pixels tall and 50 pixels wide.

but, the image will lose all of its proportions!

to keep them, remove the width="50" or height="50" part of your image tag.

So, that's done!

next, we will learn how to put videos and audio.

-------------------CONTINUED-------------------

so, lets say you want AUTOPLAYING BACKGROUND MUSIC

put an <audio> tag, also, for images, videos, or audio, you don't need the second tag.

put <audio src="audio.mp3" autoplay>

that will put auto-playing background music.

also, experiment with images, videos, and audio!

there is also stuff you can put in the tag with autoplay, like controls, and looped!

now, lets put a video!

put a <video> tag

in that tag, put autoplay, looped, and controls

it should look like this

that will put a video on the screen. and btw, the height= and width= stuff works with almost all tags!

thats it for now!

-------------------CONTINUED-------------------

so, you learned a few media types. But... what about

text? I mean, you learned the text types and headers...

but what about the text styling?

THIS is an example of yhat you can do with text!

anyways, lets put a <p> element.

inside the tags, put <b> tags.

now put text inside the b tags. and... there you go!

bold text!

but... what about italic? strike through? underline? superscript? subscript? text colors???

well, <i> for italic, <u> for underlined, <s> for strikethrough,_{<sub> for subscript},^{<sup> for superscript}, and thats about it!

until... COLORS!!!!

make a new file called styles.css

inside there, put #coloredtext, it should generate this.

#coloredtext {

}

then, back in HTML

in the p tag,

copy this!

<p id="coloredtext">

that hooks up the id to the CSS file.

then in the CSS put

#coloredtext {

color: blue;

}

the text will be blue! but when you reload the page..

its not?

that's because we forgot to hook up the CSS to the HTML.

inside the head tags put

<link rel="stylesheet" href="styles.css">

reload the page and...

it works!

but thats just the text color...

#coloredtext {

color: blue;

background-color: red;

}

now, the background color of the text is red!

that is it on the coding for now..

-------------------END-------------------

I'll edit this and continue this soon. I might create a new post whether you can edit posts or not. Bye bye!

I updated the HTML tutorial!

Mon, 07 Oct 2024 23:50:49 +0000

I updated the tutorial!

Visit it at https://www.kidzsearch.com/questions/370482/learn-html-here

Learn HTML here!

Mon, 07 Oct 2024 21:41:14 +0000

(updated: https://www.kidzsearch.com/questions/383957/learn-html-here-repost-updated-css-too)

Hey guys! So, you clicked on this post to learn HTML, eh? Well, your in the right place!

HTML is a programming language that is fun and frustrating at times.

HTML stands for HyperText Markup Language

You could use it to make forums, websites, documents, and MORE!

So, lets get started!

Create a new file in a folder called index.html (i recommend using https://vscode.dev)

First, you put <DOCTYPE! html> at the top on line 1! (formatting is important so you can read your code)

After you put that, put <head> in between the <html> tags. Anything inside a tag is called content, and tags and content together are called elements! please remember these words for later.

After you put your head tags, put <title> inbetween <head> and </head>

that is the data that will be applied to your document!

-------------------CONTINUED-------------------

After that, below the </head> tag, put <body>

<body> is the element that will hold everything that the user can see (images, gifs, text, etc.)

Put <h1>, and inside those <h1> tags, put whatever text you want!

When you reload the page, it will show big text!

Try that with <h2>, <h3>, <h4>, <h5>, and <h6>!

Those are the headers! Now, lets make paragraphs!

put <p> tags. Like the headers, put text inside them to show that text!

So, you put the text, right?

put a new line in the <p> tag, and on that new line, put text!

do you notice something? Yep, that new line doesn't break apart the text!

to do that, put <br> for a new line!

this also spaces apart elements if your too lazy to use padding (we will get into that later)

also, you can put images! In your files, put an image in the same folder as your html file

then put <img src="image.png" height="50" width="50">

that will create an image on your page that is exactly 50 pixels tall and 50 pixels wide.

but, the image will lose all of its proportions!

to keep them, remove the width="50" or height="50" part of your image tag.

So, that's done!

next, we will learn how to put videos and audio.

-------------------CONTINUED-------------------

so, lets say you want AUTOPLAYING BACKGROUND MUSIC

put an <audio> tag, also, for images, videos, or audio, you don't need the second tag.

put <audio src="audio.mp3" autoplay>

that will put auto-playing background music.

also, experiment with images, videos, and audio!

there is also stuff you can put in the tag with autoplay, like controls, and looped!

now, lets put a video!

put a <video> tag

in that tag, put autoplay, looped, and controls

it should look like this

that will put a video on the screen. and btw, the height= and width= stuff works with almost all tags!

thats it for now!

-------------------END-------------------

I'll edit this and continue this soon. I might create a new post whether you can edit posts or not. Bye bye!