HTML Review - My Course Web Page!

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.
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=> 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”>
 By
replacing the text with an image, the
page will have a linked picture.
<a href=> <img
src=“picture.jpg” height=“200” width=“200”>
 Add
some linked pictures with height and
width specified to your page.
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.
 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.
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
 Try some different style options for the pages
 Using
 The head command
 Bulleted Lists
 Styling HTML with CSS
Text can have a color in the background.
<h2 style="background-color:red;">This is a
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.
 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
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
 <embed src=“9.html">
 Try embedding a previous project onto the web
 CSS background color
 Using css to change the whole page
 Using the embed command
 Gaining access to earlier project
 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
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.
 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
 The
type="button">Click Me!</button>
code won’t do anything for now.
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"
Last name:< input type="text" name="lastname">
< /form>
 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>
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"
< /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
 The best pages of tomorrow will be made of students
from today.
 Using
form to get names
 Using forms to get checks
 Form passwords
 More programming

similar documents