Source: ojects/tabber/ ojects/tabber/

Slides:

Advertisements

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

Advertisements

Tutorial 1: Developing a Basic Web site

2.744 Dreamweaver Tutorial Sangmok Han Feb 24, 2010.

MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard

HTML / CSS – Basics Why the heck are we doing this?

Making Things Look Nice: Visual Appearance and CSS CMPT 281.

Technologies for web publishing Ing. Vaclav Freylich Lecture 1.

Cascading Style Sheets Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.

Chapter 3 Working with Text and Cascading Style Sheets.

16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.

 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.

Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.

HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.

Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.

Basics of HTML.

Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.

Title, meta, link, script.  The title looks like:  The tag defines the title of the document in the browser toolbar.  It also: ◦ Provides a title for.

 cascade Style Sheets (CSS) is a mark-up language that was first proposed in 1994 by Håkon Wium Lie. CSS works in conjunction with HTML to greatly increase.

IT204 - Web Scripting and Authoring I Introduction to Dreamweaver Unit 6.

Lesson 19: Site Development with FrontPage 2003 – Advanced Features.

Planning your site/organization on the Web Please use speaker notes for additional information!

audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.

© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.

 Computer use language to communicate  A web browser will read these tags and translate it into what you actually see  Viewing Code of ESPN WebsiteESPN.

Stylizing a Navigation Menu with CSS Web Design – Section 4-13 Part or all of this lesson was adapted from the University of Washington’s “Web Design &

DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.

Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.

USING JAVASCRIPT TO SHOW AN ALERT Web Design Sec 6-2 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

External Style Sheets Exploring Computer Science – Lesson 3-6.

Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.

The “Quick Change” Method of Web Design. Create Your Design Create and cut up the graphics for your web site. Create a masterstyle sheet. Name it “plainmasterstylesheet.html.

Unit 5 The Web Book Test. Unit 5 Test The Web Book Test 1. On the bottom of page 46, why is writing web pages not like writing printed documents ?

Basic Steps to create a Website using HTML5. Hypertext Markup Language.

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.

Unordered Lists Need to make a list of items that aren't numbered? You need.

HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.

Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.

WEB DESIGN Presentated By Amit Kapri Contact No

Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.

HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.

Source of website: “Text/css rel=“styles heet” This is an external style sheet link. This means that the.

INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.

Web Page Design The Basics. The Web Page A document (file) created using the HTML scripting language. A document (file) created using the HTML scripting.

CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.

Week 1: Introduction to HTML and Web Design

Week-12 (Lecture-1) Cascading Style Sheets (CSS): describe how documents are presented on screens. Types of Style Sheets: External Style Sheet - Define.

Creating a Theme From Scratch in Drupal

Web Systems & Technologies

Web Basics: HTML/CSS/JavaScript What are they?

Using JavaScript to Show an Alert

The Internet and HTML Code

Intro to Web Development Class A Review

ITI 133 HTML5 Desktop and Mobile Level I

The Web Wizard’s Guide To DHTML and CSS

HTML5 Level I Session II Chapter 3 - How to Use HTML to Structure a Web Page

Working with Text and Cascading Style Sheets

Unit 4 Test CSS Test.

Web Design and Development

Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.

Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.

HTML / CSS Mai Moustafa Senior Web Designer eSpace eSpace.

Common Page Design Elements

Computer communications

Week 5: Recap and Portfolio Site

Web Programming and Design

One Set of Styles Connected to As Many Pages as You Want!!!

© 2017, Mike Murach & Associates, Inc.

Monday, Sept. 24 Today we are going to update the html code to html5. It has some new features that we have not covered yet.

Presentation transcript:

Source: ojects/tabber/ ojects/tabber/

1. Create a div with class=“tabber” 2. Within that div, create any number of divs with class=“tabbertab”. Tabs names can be given using the “title” attribute of the div tag, or can be in h2, h3, …, h6. 3. Connect to tabber.js, provided from the web site. (Code can be customized for your needs. Makes calls automatically when linked.) 4. Style the results list as tabs. (Can use the style sheet provided on the website, example.css)

1. When page is loaded, tabber.js script runs to convert your plain HTML into dynamic HTML. 2. The dynamic HTML uses an unordered list for tabs.

BeforeAfter Section One Section one content. Section two content. <a href="javascript:void(null)“ onclick=""> Section One <a href="javascript:void(null)" onclick=""> MyTabTitle Section One Section one content. Section two content.

tabberObj div classMain classMainLive classTab classTabDefault classNav classTabHide classNavActive titleElements titleElementsStripHTML removeTitle addLinkId linkIdFormat REclassMain REclassMainLive … init() navClick() tabHideAll() tabHide() tabShow() navSetActive() navClarActive()

createElement() – creates the specified HTML element in an HTML document var element = document.createElement(tagName);  element is the created element object  tagName is a string that specifies the type of element to be created

insertBefore() – inserts a new child node before an existing child node. elementNode.insertBefore(new_node,existing_node)  new-node – the node to insert  Existing_node – the existing node. The new node is inserted before this node.

innerHTML sets or returns the inner HTML of an element. function changeLink() { document.getElementById('myAnchor').innerHTML="W3Schools"; document.getElementById('myAnchor').href=" ; document.getElementById('myAnchor').target="_blank"; } Microsoft