Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).
Most operating systems have good- looking buttons, and they've spent a lot of time and resources to make them look good, but sometimes they just don't fit in with the design of your website. So let's make a working copy of buttons.html, and we'll see how you can use your own images for your buttons in your forms. Change this to buttons-working.html. I'm going to open it in my text editor. And I'm going to go ahead and open this in the browser as well, and there it is. You notice we're using the same forms.css and forms.js we're using throughout this chapter.
And here in our form, I'm just going to take out this action because we don't actually need the server for this. And that means I'm going to change this to return display, and I'm going to change this to return display. And I'm going to save this and go ahead and reload it in the browser and fill in the form and press the Big Red Button, and there we have a result there, and it's not going out to the test server at all. So you notice that the Big Red Button here, you can tell it's a big red button because it says Big Red Button, but perhaps you would like it to actually look like a big red button.
So here's how we do that. Here is the input tag that has our submit button in it, and I'm going to change this submit, type= "submit" to type= "image". I'm going to give it a location with the source attribute, src=, and I'm going to move that down to the other line to make it readable. Let's say src= "images/brb.png". So that's a relative URL that's on the same resource as the html file itself.
And if we look in the finder here, we see our images directory, and in there we have brb.png, and that's what we've put here in our source. And so let's go ahead and look at this in a browser. We'll come back into the browser here and press Reload and now our Big Red Button actually looks like a big red button. And I'm going to put in a password because it won't like it if I don't do that. And I'm going to press the Big Red Button and there is our results. So that was pretty easy, huh? That ought to make the designers happy.
So using a graphic for a button can be a great way to make your forms fit in with the design of your site, and as you can see, it's pretty easy to do.
Find answers to the most frequently asked questions about HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.