Web Programming and Design

Slides:



Advertisements
Similar presentations
Table, List, Blocks, Inline Style
Advertisements

Introduction to HTML & CSS
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
The Web Warrior Guide to Web Design Technologies
Made by: Dan Ye. Introduction Basic Last Page ☆ HTML stands for Hyper Text Markup Language; ☆ HTML is not a programming language, it is a markup language;
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
JavaScript 1. What is JavaScript? JavaScript allows web authors to create dynamic pages that react to user interaction. It is an Object-based because.
DHTML: Dynamic HTML Internet Technology1. What is DHTML? A collection of enhancements to HTML ► To create dynamic and interactive websites Combination.
Styling and theming Build campaigns in style. What we'll look at... How a web document is structured How HTML and CSS fit together Tools you will need.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.
HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.
 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.
CO1552 Web Application Development HTML Forms, Events and an introduction to JavaScript.
How the Web Works Building a Website – Lesson 1. How People Access the Web Browsers People access websites using software called a web browser. To view.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Web Programming Overview. Introduction HTML is limited - it cannot manipulate data How Web pages are extended (include): –Java: an object-oriented programming.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
Introduction to JavaScript MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/2/2016.
JavaScript and Ajax (JavaScript Environment) Week 6 Web site:
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
Computer Club Content Review Al Huda Computer Club, April 9, 2016 Farid Ahmed.
SE-2840 Dr. Mark L. Hornick 1 Dynamic HTML Handling events from DOM objects.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
Week 1: Introduction to HTML and Web Design
Fall 2016 CSULA Saloni Chacha
Introduction to CSS: Selectors
Web Basics: HTML/CSS/JavaScript What are they?
Week 3: Introduction to Javascript
Week 4: Introduction to Javascript
Concepts of HTML, CSS and Javascript
INTRODUCTION TO HTML AND CSS
The Internet and HTML Code
Introduction to Web programming
Web Development & Design Foundations with HTML5 7th Edition
Intro to CSS CS 1150 Fall 2016.
4. Javascript Pemrograman Web I Program Studi Teknik Informatika
Introduction to web design discussing which languages is used for website designing
Intro to CSS CS 1150 Spring 2017.
JavaScript Introduction
DHTML Javascript Internet Technology.
Your 1st Programming Assignment
DHTML Javascript Internet Technology.
Functions, Regular expressions and Events
INTRODUCTION TO HTML AND CSS
Training & Development
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
E-commerce Applications Development
Code Topic 9 Standard JavaScript Events Laura Friedman
Tutorial 10: Programming with javascript
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Web Programming and Design
Web Programming and Design
Week 5: Recap and Portfolio Site
Web Programming and Design
Web Programming and Design
Introduction to Web programming
Presentation transcript:

Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 5

Plan for the next 4 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style Introduction to JavaScript More advanced JavaScript Portfolio Site

Web Design Competition There will be a competition for the best designed website!! Theme: “Your Hero” To enter: Simply upload your website into a folder named competition on your Public_html

<tagname>Some Content in here….</tagname> HTML Reminder HTML stands for Hyper Text Markup Language HTML allows us to describe and define the structure of our website using markup All the elements in a web page are represented in tags <tag> Example of HTML elements include: headings, paragraphs, images, videos Nearly all HTML tags come in pairs with an start and end tag <tag> </tag> The Browser will not display these tags, instead it will use the tags to render the web page <tagname>Some Content in here….</tagname> Defines the type of element The stuff that gets displayed Close off the element

h1 {color: blue;} CSS Reminder Selector (HTML tag) Property Value CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen It allows us to change the style or appearance of our web page CSS contains a selector and property, value pair The selector is the HTML tag you would like to style h1 {color: blue;} In this example, all the h1 tags in the HTML document will be changed to blue Selector (HTML tag) Property Value

JavaScript Variable Reminder We can assign a variable to hold a data type value We must be careful with our variable names: Use a meaningful name for your variable, and each variable should have a unique name Never start your variable name with a capital letter, number, or symbol Do not use keywords, or special reserved words for your variable name JavaScript is case sensitive so pay special attention to capital letters and spellings How we create a variable: var x = 1; Always finish the line with a ; We use the keyword var to tell JavaScript we are making a variable Next we make a name for our variable Then we use = to assign a value Then we give a value

JavaScript Function Syntax Reminder function myFunction(argument){ Code goes here…….. } We have to use the special keyword function Using arguments is optional All code needs to be contained in { }

JavaScript Event Reminder HTML events are "things" that happen to HTML elements. Events can be caused by the user or by the browser. JavaScript can "react" to these events. Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element onkeydown The user pushes a keyboard key onload The browser has finished loading the page

JavaScript DOM Reminder We can use the DOM model to change style and change the content within HTML tags We can also add HTML to the inside of HTMl tags document.getElementById("myH1").style.color = "red"; document.getElementById(“myH1”).innerHTML = “New Heading”;

JavaScript Conditional Reminder

JavaScript for loop syntax To create a for loop we must use the keyword for Then we setup three statements within ( ) before describing the block of code we want to repeat Statement 1 statement 2 statement 3 all separated by ; for (setup var; condition; increase var){ // block of code to repeat } Keyword for