First Experiments with HTML

Let’s play with a little bit of HTML!

Click on the link to go to JSFiddle and create a free account. You will need an email address to sign up. In the bottom left corner you’ll see a link called Sign in. Click on that and you’ll be taken to a login page. Beneath the Log In button you’ll see a link called Sign up. That’s your ticket—choose a username and password and you’re good to go.

JSFiddle

When JSFiddle shows up afterward, you’ll see the site’s initialized interface—a blank fiddle. A ‘fiddle’ isn’t any kind of standard term or anything; it just refers to a blank space where you can fiddle about, try things out, and learn new ideas about front-end languages and libraries. In the top middle of the page, you’ll see an empty text box with the text Untitled fiddle where you can name your space, if you want. Go ahead and do so. Call it whatever you like, My First Fiddle or whatever. You can also provide a description. Generally, providing names and documenting your code, even code experiments, is a good habit to get into when you’re becoming a developer.

You’ve got a grid with four empty spaces staring back at you. The boxes in the grid are labeled: HTML, CSS, and JavaScript, and there’s a fourth box called Result. Go ahead and copy and paste the HTML provided in the last lesson from Unit 1 into the HTML box. Immediately, the code is given syntax highlighting. If you type Ctrl + Enter (on Windows) or ⌘ + Enter(on Mac), or just hit the Run button, you’ll see that the HTML displays in the Result window. You get a web page with a white background and small button labeled “Hello, World.”

Take a screen capture of the result.

Looks good. But maybe a little boring? Let’s make the page say something.

Go ahead and add this line of code right beneath the line that has the <button> tag.

<p><input type="text" id="fname"></p>
This will add a text box to your page. While you’re at it, go ahead and remove World from the button’s text. So the resulting HTML should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, World!</title>
</head>
<body>
<button>Hello</button>
<p><input type="text" id="fname"></p>
</body>
</html>
Take another screen capture.

Perfect. Now we can capture a user’s name (as long as they’re willing to type it in). But there are two more things to do.

Change the <button> line so that the code looks like this:

<button onclick="sayYo()">Hello</button>
We’ve added an onclick handler that will execute a JavaScript function when the button is clicked! All we have to do now is add the JavaScript function. Go ahead and add the code below to the HTML section of your JSFiddle. Add the code right beneath the input tag.

<script>
function sayYo() {
alert("Hello " + document.getElementById('fname').value);
}
</script>
And that’s that. Go ahead and press the Run button, so that your code is saved and loaded properly. Next, type your first name into the text box and then press the Hello button. Your browser will say hello!

Take a screen capture of your outcome.

That button is a bit small, isn’t it? Let’s try a little detective work. Click on the CSS Reference below and take a look at the basic rule syntax and the style rule examples.

CSS reference

You’re going to want to create a CSS style rule that will be written or pasted into the CSS box of your JSFiddle. You’ll want the rule to look like the snippet below to begin with:

button {
}
Now, using the documentation, fill out the rule so that the following attributes are changed:

Height
Width
Color
Font-size
i just need help with the last css part i dont know how to write the code

1 answer

No problem! I can help you write the CSS code to style your button. Based on your requirements—changing the height, width, color, and font size—here's how you can fill out the rule:

button {
  height: 50px;          /* Change the height of the button */
  width: 150px;          /* Change the width of the button */
  background-color: blue; /* Change the background color of the button */
  color: white;          /* Change the text color of the button */
  font-size: 20px;      /* Change the font size of the button text */
  border: none;         /* Optional: Remove border */
  border-radius: 5px;   /* Optional: Add rounded corners */
  cursor: pointer;       /* Change cursor to pointer on hover */
}

You can copy and paste this CSS code into the CSS box in your JSFiddle. Once you run it, you should see that the button gets a new height, width, background color, text color, and font size. You can adjust the values to your liking if you want to try different styles!