Download presentation
Presentation is loading. Please wait.
1
HTML Extras
2
Marquee <marquee></marquee>
Sends a running message or image across the page continually
3
Adding a Submit Button <form <br> <input type="submit" value="Send"> </form>
4
Horizontal Rule Attributes
Changing horizontal rule attributes <hr width=”25%”> or <hr width=”200”> This creates a rule that covers 25 percent of the screen OR using the 200 pixels, etc. also resizes the width. <hr width=”25%” size=”3”> The size attribute allows you to change the thickness to 3 pixels (the default is 1). <hr color=”blue”> Changes the color of the horizontal rule
5
Non-Breaking Spaces & Symbols
To indent a paragraph, add non-breaking spaces: -- non-breaking spaces do not have brackets Additionally, symbols have codes that begin with & and end with ; the number or letters in between allow the browser to display that symbol. To see the codes for symbols, go to
6
Adding Sound Just as you can link to an image, you can also add audio and video to your page by linking to a file. An audio clip’s code might look like this: <a href=”greeting.wav”>Listen to my greeting.</a> Or a video clip <a href=”homemovie.mov”>Watch my home movie.</a>
7
Adding a Background Image
Instead of bgcolor, use background in the body tag. <body background=""> Place the name of the image between the quotation marks. Your image file should be located in the same directory as your HTML file, so that you can just type the filename of the image. For example, if want image2.gif to be the background image, and it is in the same directory as the page we are editing, we can type the command this way: <body background="image2.gif">
8
Adding a navigation bar
Creating a navigation bar <a href=”site 1.html”>Site 1</a><br> <a href=”site 2.html”>Site 2</a><br> <a href=”site3.html”>Site 3</a><br> You could also put this in a single column table. <table border=“1”> <tr><td><a href=”site 1.html”>Site 1</a></td> <tr><td><a href=”site 2.html”>Site 2</a></td> <tr><td><a href=”site 3.html”>Site 3</a></td> </table>
9
Frames Frames are a way to display more than one page of content on a page. Frames are typically used for home pages only. Viewers can scroll to see the remainder of a section of a page while the rest remains stationary. This could eliminate the need to use a hyperlink to see a different page of your website. Frames may not be supported in future versions of HTML.
10
Example of a frame page
11
How Frames Work The previous example is actually six separate HTML pages. The first page, the Title Frame Page, is the “home” page, where all of your frames are displayed. Each of the sections (black, blue, pink, orange and green) are five different webpages.
12
To Setup the Home Page The frameset code replaces the body code on the title or main page as follows: <html> <head><title>Frames</title></head> <frameset cols="50%, 50%" rows="50%, 50%"> <frame src="frame1.html"> <frame src="frame2.html" frame border="no"> <frame src="frame3.html"> <frameset cols="50%, 50%"> <frame src="frame4.html"> <frame src="frame5.html"> </frameset> </html>
13
What does 50%, 50% mean? This is how you tell the browser to divide the page. In the first frameset, you are dividing into two columns and two rows. The black and blue are in the first row. The black and pink are in the first column. The second frameset code divides the second column of the second row into two more columns. Pink is in the second row, first column, while the orange and green both appear in the second row and second column which is now divided. <html> <head><title>Frames</title></head> <frameset cols="50%, 50%" rows="50%, 50%"> <frame src="frame1.html"> <frame src="frame2.html“ frame border="no"> <frame src="frame3.html"> <frameset cols="50%, 50%"> <frame src="frame4.html"> <frame src="frame5.html"> </frameset> </html>
14
You now must actually create those frame pages to go on the home page
You now must actually create those frame pages to go on the home page. Here is how they would look. Each Frame is a different page. Frame 1Code <html> <head><title>Frame 1</title></head> <body bgcolor="000000"><font color="FFFFFF">This is frame 1.</font> </body> </html> Frame 2 Code <head><title>Frame 2</title></head> <body bgcolor="0000cc"><font color="FFFFFF">This is frame 2.</font> Frame 3 Code <head><title>Frame 3</title></head> <body bgcolor="cc9999"><font color="330000">This is frame 3.</font> Frame 4 Code <html> <head><title>Frame 4</title></head> <body bgcolor="ff6600"><font color="00ffff">This is frame 4.</font> </body> </html> Frame 5 Code <head><title>Frame 5</title></head> <body bgcolor="009966"><font color="66ffff">This is frame 5.</font>
15
Here is a more realistic example:
The panel on the left would stay put if you scroll through the panel on the right to see more content.
16
Linking to a spot on your webpage
Instead of having to resort to scrolling down long pages, you can make your readers very happy by offering them page jumps as an alternative mode of transport around your site. Basically, page jumps are just links (they use the same <a> element as all links), but links that point to a certain part of a document. This is done by assigning names to parts of your page, and then making the link by referring to that section. Page jumps are done by using the name attribute of the a element. So, say you wanted a link to the top of your page, you would add an anchor like this near the top of your document (inside the <body> element, of course): <a name="top"></a> There doesn’t need to be anything between the opening and closing tags. You are just naming where you want the web page to go. Then, in the place you want to place the link, put <a href="#top">link to top</a> Notice the hash mark (#). That tells the browser that it’s a section of a page it’s looking for, and not a separate page or folder. So just make a link to the section you named earlier (you can name the link to the top anything you want, but keeping it memorable and simple always works out best) by putting a # in front of whatever name you gave it. Always remember, the # goes in the href attribute’s value, not in the name.
17
Example of a link to a page
In this example, clicking on Vocabulary page would take you down the same page to the vocabulary section of the webpage.
Similar presentations
