HTML REVIEW HTML is hypertext markup language. It
is a way for people to display their information with more complex pictures and text displays. Before HTML, messages over networks were boring with no links or pictures. Today, we can create pages that are informational and aesthetically pleasing.
THE <A> COMMAND
Using this wonderful command, an html page can be linked to another page.
It is important to say where the page is. Also, the user needs something to click
on so add something. <a href=http://www.scottbunin.com>
Click here to go to the course web site </a>
The <img> command
The img command will enable a programmer to place a picture or an image on a page.
Be sure to specify the src to say where the file is.
Some times placing the width and the height can be helpful too.
<img src=“picture.jpg” height=“200” width=“200”>
COMBINING <A> AND <IMG> By replacing the text with an image, the
page will have a linked picture.
<a href=http://www.scottbunin.com> <img src=“picture.jpg” height=“200” width=“200”> </a>
Add some linked pictures with height and width specified to your page.
REVIEW
HTML review The <a> The <img> Combining links and pictures
Using Comments
The programmer can save them selves a lot of trouble by placing comments inside the code. The comments won’t be seen, they are just for the programmer to keep track of what is going on.
<!--This is a comment. Comments are not displayed in the browser-->
Add comments to the code.
THE HEAD COMMAND Instead of just starting with the
<body>, a programmer can start with a head command. This is a good place to specify choices for the page such as a title.
<head>< title>Title of the document</title>< /head>
Add a title to the code.
BULLETED LISTS
To make a bulleted list, use the following style of code:
<ul>< li>Coffee</li>< li>Milk</li>< /ul>
Add a bulleted list to your code.
Styling HTML with CSS
A paragraph can have some style.
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
Try some different style options for the pages paragraphs.
REVIEW Using comments The head command Bulleted Lists Styling HTML with CSS
CSS BACKGROUND COLOR
Text can have a color in the background.
<h2 style="background-color:red;">This is a heading</h2>
Use this example to change the background for some of the text on your page.
Using CSS to change the whole page
In the <head> section, before the <body> section, there can be some design for the whole page.
<head>< style type="text/css">body {background-color:yellow;}p {color:blue;}< /style>< /head>
Use the style command in the head section to set up a nice background color for the page.
USING THE EMBED COMMAND The embed command can place a file
from a location on the page. It is different from a link because it loads
the object onto the current page rather than going to a separate thing.
<embed src="helloworld.swf">
GAINING ACCESS TO EARLIER PROJECT The embed command can be used to
access another html page. If a student submitted an html page as
their project 9 assignment, it would be saved as 9.html.
<embed src=“9.html"> Try embedding a previous project onto
the web page.
review
CSS background colorUsing css to change the whole pageUsing the embed commandGaining access to earlier project
ADDING MUSIC TO THE PAGE The embed command can also be used
to have the web page play music. Line link a music file to play for your
page. Look for a .mid file to play some music.
<embed src=“music.mid">
MAKING THE PAGE INTERESTING
The page should contain some good information about topics the student is interested in. It should contain pictures on what the student is interested in. It should have music and colors so that a person looking at the page will be impressed.
Making the page professional
Web pages should not only look fun, they should have a sleek aesthetic design. Having stuff all over the place and unorganized will make a person reading the page get confused or annoyed. There are a LOT of other people posting web pages on the Internet. Be sure to take care and have the page show some intelligent design.
USING FORMS TO ADD BUTTONS Some times we want a person to be able
to click things on the page to see things happen. A great way to do this is to add a nice button.
Try the following code on your page.
<button type="button">Click Me!</button>
The code won’t do anything for now.
REVIEW
Adding music to the page Making the page interesting Making the page professional Using forms to add buttons
Using Forms To Get Names
The following code will enable a reader to type in their name. Add it to your page.
<form>First name:< input type="text" name="firstname"><br>Last name:< input type="text" name="lastname">< /form>
USING FORMS TO GET CHECKS The following code will enable a person
to check boxes. Add a version to your page.
<form>< input type="checkbox" name="vehicle" value="Bike">I have a bike<br>< input type="checkbox" name="vehicle" value="Car">I have a car < /form>
FORM PASSWORDS
The following will enable a user to put in a password without the password being shown. Add it to your page.
<form>Password:< input type="password" name="pwd">< /form>
More programming
To make the buttons and boxes and text entered do stuff, we will need other programming languages.
We can use things like php or javascript to expand on our web page power.
To make the best pages will require work and dedication.
The best pages of tomorrow will be made of students from today.
REVIEW Using form to get names Using forms to get checks Form passwords More programming
