Html2
•Download as PPT, PDF•
1 like•1,441 views
The document provides an overview of HTML topics including basic tags like paragraph, header, table, hyperlink and image tags. It also discusses more advanced HTML topics such as the div tag for dividing sections, CSS for styling, adding images, different types of links, and using tables and layers for page layout. The agenda covers basic HTML review, a tour of the website building program FrontPage, steps for creating a website, and design and formatting techniques.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (14)
Similar to Html2
Similar to Html2 (20)
Recently uploaded
Recently uploaded (20)
Html2
- 2. Agenda Basic Review Tour of FrontPage Creating a Website Design & Format Exercise
- 3. HTML 101 Open 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.
- 6. Types of Links 1. Image as a hyperlinked object 2. Navigation Bookmarks 3. Text as a hyperlink 4. Email link
- 7. CSS Cascading 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. Embedded 2. External
- 8. Table Layout
- 9. Layer Layout
- 10. Layer Layout
Editor's Notes
- 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: <img src=“sulogo.gif” border=0 width=“55” height=“55”>
- 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 }