create your own webpage. today’s class internet safety & privacy tables embedding music and...
TRANSCRIPT
Create Your Own Webpage
Today’s Class
• Internet Safety & Privacy
• Tables
• Embedding music and video
• Frames
Group Activity
• Google and find 5 tips for Internet Safety & Privacy
• 1 typist, 1-2 googlers who dictate their tip to the typist
• Share your tips with the rest of the class
Reminders
• Next week we shift to learning Wordpress, a content management system– You can copy and paste your actual content to
Wordpress if you decide you like it better– Wordpress is a more accurate reflection of what you
might find in your future workplace.
• Thursday & Friday of next week – present your site (either your HTML site or Wordpress site) to the class!
Make a simple table to help background readability
Start a new Notepad file and paste in text Ctrl-V or Edit Paste
<body background=background.gif>
<table border=1 align=center width=80% height=100% bgcolor=white>
<tr valign=middle><td>
Content goes here.
</table>
Make a simple table to help background readability
• Save your work in Notepad, check it in a browser
• Experiment with changing numbers and other familiar variables in the code, etc.
More tables – copy & paste code
• Go to www.snotrocketscience.com/cfk
• Highlight the text in the #2 gray box.
• Edit Copy or Ctrl C
More tables – copy & paste code
• Open a new Notepad file – Start Programs Accessories Notepad to
open Notepad for the first time today– File New or Ctrl-N if you already have it open
• Paste in what you copied by Edit Paste or Ctrl-V
Let’s look at the code
<table border=1>
<tr>
<td>This is cell 1</td>
<td>This is cell 2</td>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</table>
• Starts your table• Starts a row• Creates a cell• Creates another cell• Starts a new row• Creates another cell• Creates another cell• Ends table
More properties for your tables
• Change table border size: <table border=5>, <table border=0>, etc. – With table border=0 you can use a table to position
text
• Change table background:– <table bgcolor=white>– <td bgcolor=green> etc to change individual cells
• Change relative size of cells:– <td width=80%>wide cell</td>– <td width=20%>narrow cell</td>
Cellspacing & Cellpadding
• <table border=1> (default)
Cellspacing & Cellpadding
<table border=1 cellspacing=10>
• <table border=1 cellpadding=10>
Uses of tables
• Position blocks of text exactly where you want
• Keeping pictures & text lined up right
• Grids – i.e. make a schedule or a calendar
• I design tables with border=1 so I don’t get confused about my table’s layout then change to border=0 because I think it looks better.
Frames
• Frames are a handy navigation tool.
• Class web site utilizes frames.
Frames
• We’ll create a page using frames that has this general look to it:
This “index.htm” page you have been working
on will be here.
You will create a new page that goes
here.
You’ll also create a third page that gives the
instructions for arranging the 2 HTML files.
Using Frames
1. Open your directory in file manager.
2. Rename index.htm to main.htm- Right click on file and select “Rename”
This step moves your old main page into this box.
Using Frames
1. In notepad, create new file (File New)
2. Type in a few things you’d like to have as links in the future, separated by <br>
- About Me <br>- Pictures <br>- Location <br>
3. Save as side.htm This creates a sidebar
with text in it. You can make them links later.
Using Frames
• Go to class web site www.snotrockscience.com/cfk
• Click on HTML Shortcuts
• Copy & paste #3 into new Notepad file
• Save as index.htm (YOU SHOULD NOT BE OVERWRITING YOUR OLD INDEX FILE!)
• Note: Any references to index.htm (for example, on your pictures page) will need to be changed to main.htm
Using Frames<FRAMESET cols="20%,
80%"><FRAME name=side
src="side.htm"><FRAME name=main
src="main.htm">
<NOFRAMES>Main page: <a
href="main.htm">Sidebar: <a href="side.htm"></NOFRAMES>
</FRAMESET>
• Defines the relative width of each part of your frame.
• Links to your pages (1st link is 20% wide, second link is 80%)
• Provides coding in case people are using a browser that doesn’t recognize frames. Fairly unlikely.
• Ends your frameset
Edit your sidebar
• So far, all links we have created open in the same window.
• For your frames page, you’ll want the links in your sidebar to open in the main part of your webpage.
• Open side.htm and create a link:– <a href=“pictures.htm” target=main>Pictures</a>– Without specifying the target, your pages will open
in the same area from which they are linked.
Optional Tweaks to Your Frameset
• Open index.htm in Notepad
• Experiment with layout… change % numbers to change relative window size.
• See if you can figure out how to make a “sidebar” across the bottom or top of a page.
• See if you can figure out how to use more than 2 pages in 1 frameset.
• What happens when you change
<FRAMESET cols="20%, 80%"> to
<FRAMESET cols="20%, 80%“ border=0>
More to Do
• Find and include other images
• Expand your sidebar to organize your page by including links to the other pages we’ve created
• Create more pages and link them from your sidebar
• Benefit of using frames: Changes in navigation only have to change in your sidebar!
• Snoop on code: – IE: View Source– Firefox: View PageSource
Embedding video
• Youtube makes it easy—www.youtube.com– Others – Vimeo, Google Video, etc.
• Upload your own videos to post on your web site or find something you want on your webpage
• Video owner does have option of not providing the code to embed video
• Let’s add a video to your Pictures page – open it in Notepad to get ready to edit it.
• Go to youtube and find a video (i.e. search for funny dog)
Embedding using youtube
Click Share then click Embed
Customize video’s appearance
Make changes:
• Related videos? Maybe not on a sale video
• Aesthetics – border, color, size
Copy and Paste Custom Code
• (Left) click in the Embed field and it will turn blue
• Right click and select “copy”
• Go to Notepad file and Paste
• Save & check in browser window
Embedding Music
• Can be obnoxious.
• Go to http://www.midicenter.com/– (On your own: Google free midi download)
• Browse & find a midi file you want to put on your page
Follow instructions here to download. -Consider renaming w/easier filename to retype, i.e. music.mid-Save in your website directory
EmbeddingMusic
• Open notepad, and add the following text to the HTML document you want the song to play on:
<embed src=FILENAME.mid width=144 height=60> – Replace FILENAME with your file name
Embedding Music
• Caution: starts a plugin which may or may not work automatically on everyone’s computer.
• Try Firefox if you have problems– Adjust height and width
• Differs in Firefox vs. IE. Experiment.
More text formatting
• <h1>Big heading</h1>
• <h2>Medium heading</h2>
• <h3>Smaller heading</h3>
• … etc on to <h6>
Lists
• <li>Define items to be bulleted.
• <li>2nd bulleted item.
List techniques to try
<ul>
<li>1st bullet
<li>2nd bullet
</ul>
<ol>
<li>1st bullet
<li>2nd bullet
</ol>
• 1st bullet • 2nd bullet
1. 1st bullet
2. 2nd bullet
Also trying nesting lists!
More formatting…
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Special symbols…
— em-dash —
© copyright © or ©
® registered ® or ®
More: http://www.ascii.cl/htmlcodes.htm