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 Content goes here.

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 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 This is cell 1 This is cell 2 Row 2, cell 1 Row 2, cell 2 Starts your table Starts a row Creates a cell Creates another cell Starts a new row Creates another cell Ends table

More properties for your tables Change table border size:,, etc. –With table border=0 you can use a table to position text Change table background: – – etc to change individual cells Change relative size of cells: – wide cell – narrow cell

Cellspacing & Cellpadding (default)

Cellspacing & Cellpadding

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 -About Me -Pictures -Location 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 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 Main page: Sidebar: Defines the relative width of each part of your frame. Links to your pages (1 st 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: – Pictures –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 to

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— –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 –(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: –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 Big heading Medium heading Smaller heading … etc on to Lists Define items to be bulleted. 2 nd bulleted item.

List techniques to try 1 st bullet 2 nd bullet 1 st bullet 2 nd bullet 1 st bullet 2 nd bullet 1. 1 st bullet 2. 2 nd bullet Also trying nesting lists!

More formatting… This text is emphasized This text is strong This is some computer code Special symbols… —em-dash — © copyright © or © ® registered ® or ® More: