Html2
Upcoming SlideShare
Loading in...5
×
 

Html2

on

  • 1,089 views

HTML training given at Salisbury University for faculty & staff of library

HTML training given at Salisbury University for faculty & staff of library

Statistics

Views

Total Views
1,089
Views on SlideShare
1,089
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • What we’ll be doing today! Getting setup: Open FrontPage. Remember to walk through steps with them!
  • Go over some of the basics from the HTML 1 class Quick walk thru of the FrontPage menus Images/Links Tables/Styles/Layers/Navigation
  • Review an open tag and a closed tag. The exceptions. Review the meanings of some basic tags. Review some advanced tags we’re going to see in action today.
  • Walk thru the sections. Create a new page. Click on the New button. File. Save As. P drive. htdocs folder. “test.html” This will be our test page for as the class goes on. Keep that folder open too for easy access.
  • Insert an image. Add the image file to your htdocs folder. Click the Image button to insert an image. Choose the sulogo.gif file. Check out the code. Code breakdown:
  • To do this in Front Page: Select the image. Insert Hyperlink. Existing Webpage: www.salisbury.edu/library/ Type the navigation section: Home | Contacts | Directions Type the content section: Home Text Contacts Text Directions Text In front of “Home” Insert Bookmark. Name bookmark. Repeat. Highlight Home in the Nav bar. Insert Hyperlink. Choose On this Page. Choose Home. Repeat. Highlight Text. Insert Hyperlink. Existing Webpage. Highlight Email me test. Insert Hyperlink. Email option. Preview in browser! F12. Explain why my image has a border. Look at the code.
  • Language meaning it’s a code like HTML with its own rules. Let’s test out both types. Embedded: Format. Style. A:link, Modify, Format, Font. Save. See the changes. External: White page icon pull down. New Page. Style Sheets tab. Templates available or a blank one. Save As bars.css in the htdocs folder. Format – StyleSheet Links. Add Select stylesheet. Ok. Explain how CSS in a separate page is basically just a list of code that’s being inserted as the page loads. View HTML Code in the Header. View CSS, basic overview. Express horror at the use of RGB. Show CMYK code from embedded eg.
  • Below our text: insert a 1 column / 3 row table. Click and drag the image into row 1. The Nav into row 2. The Content into row 3. Right Click, Table Properties. Edit. Save. Of using Tables for layout. Not great for accessibility. Accessibility readers like the one in the Kurzweill room read a table from top to bottom, left to right. Tables are best for data. Layers using the div tag and CSS styling are best for laying out your page.
  • FrontPage lets you Insert a Layer. This creates a floating section that while be positioned absolutely on a page. To make a page that uses layers like the one we built with tables, Code View is best. Follow along as I type. Div layers for Top, Nav, Content. Copy over the content from the code. Show how the view looks like what we started with. Div code is invisible. It’s just drawing an imaginary line around a section of code, waiting for the CSS to tell it what to do. .nav { text-align: center } .main { position: relative; width: 50% } .top { text-align: center }

Html2 Html2 Presentation Transcript

  • HTMLADVANCED
  • AgendaBasic ReviewTour of FrontPageCreating a WebsiteDesign & FormatExercise
  • HTML 101Open Tag Close tag Special Tags<a> </a> <br> <img src=“”>Basic tags Advanced tags<p> Paragraph<h1> <h2> <h3> Header tags <div> “div” tag<table> <tr> <td> Table tags (divides a<a> Hyperlink tag section of code off from the<img> Image tag rest)<br> Line Break <-- Text --> Special: Notes or Insert code.
  • Adding ImagesStarting Screen:
  • Types of Links 1. Image as a hyperlinked object 2. Navigation Bookmarks 3. Text as a hyperlink 4. Email link
  • CSSCascading Style Sheet: a style sheet language used to describe the look and formatting of a document written in a markup language, i.e. HTML.Two ways to use CSS:1. Embedded2. External
  • Table Layout
  • Layer Layout
  • Layer Layout