Web Programming HTML. Step by step Exercises CSS. JavaScript. Hans-Petter Halvorsen, M.Sc.
|
|
|
- Bernard Singleton
- 7 years ago
- Views:
Transcription
1 Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen, M.Sc.
2 History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape, 1994 Google, 1998 Facebook, 2004 Smartphones (iphone), 2007 Tablets (ipad), 2010
3 The Web Browser Internet Explorer Chrome O. Widder. (2013). geek&poke. Available: Firefox Opera Safari
4 Web Pages Examples 4
5 The Web Programming Triangle HTML Use HTML to define the content of web pages Web Programming CSS Use CSS to specify the layout of web pages JavaScript Use JavaScript to program the behavior of web pages
6 Web Programming HTML IIS PHP JavaScript Web Services ASP.NET XML AJAX CSS SQL JQuery
7 HTML CSS JavaScript Basic Web Programming For more Dynamic Web Programming we use e.g., ASP.NET SQL AJAX PHP etc. (But these are not part of this Tutorial)
8 CSS JavaScript Server Web
9 Web Architecture Internet Explorer Chrome Firefox Opera Safari Client Web Browser HTML CSS JavaScript Server-side Web Server
10 Client Client-Server Example Web Browser Response Web Server Request Database Internet Information Services (IIS), Apache, etc.
11 <!DOCTYPE html> <html> <body> Web Platform The Web Browser creates the visual web page you see in the browser based on the HTML code <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html> Web Browser HTML, CSS, JavaScript Client-side The code runs on the server and converted to HTML before sending to client (Web Browser) ASP.NET, PHP,... Web Server Web Page (HTML) Internet Information Services (IIS), Apache, etc. Server-side
12 Hans-Petter Halvorsen, M.Sc.
13 HTML HyperTextMarkup Language (HTML) The Visual Appearnce of a Web Site Web Browser Language : All Web Browser understand HTML HTML 5 is the latest Maintained by W3C - World Wide Web Consortium <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title of the document</title> </head> <body> Content of the document... </body> </html> 13
14 <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html> HTML Code HTML Web Browser 14
15 HTML Page Structure <!DOCTYPE html> <html> <body> <h1>this is a heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> </body> </html> 15
16 HTML Editors Professional HTML editors: Adobe Dreamweaver CoffeeCup HTML Editor... For the simple examples in this Tutorial we only need Notepad (Windows) or TextEdit (Mac)
17 <!DOCTYPE html> <html> <body> My First HTML Web Page <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html> <tagname>content</tagname> The DOCTYPE declaration defines the document type The text between <html> and </html> describes the web document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> describes a heading The text between <p> and </p> describes paragraph Students: Create this HTML Code in e.g., NotePad and Save the File as.htm. Then Open the File in a Web Browser (just double-click on the file).
18 Hyperlinks <!DOCTYPE html> <html> <body> <h1>this is a heading</h1> <a href=" is a link to Google</a> </body> </html> Students: Create these Examples Images <!DOCTYPE html> <html> <body> <h1>this is a heading</h1> <img src= myimage.jpg" alt= blabla" width="104" height="142"> </body> </html>
19 Hyperlink: HTML Tags <a href=" is a link to Google</a> Bold Text: <b>this is my Text</b> Headers: <h1>this is my Header</h1> <h2>this is my Header</h2> <h3>this is my Header</h3> Paragraph: <p>my first paragraph.</p> Line Break: This is my Text <br> This is also my Text Title: Comments: <title>this is my Title</title> <!-- Write your comments here --> Image: <img src= myimage.jpg" alt= blabla" width="104" height="142"> Students: Try these Examples
20 CSS Hans-Petter Halvorsen, M.Sc.
21 CSS CSS Cascading Style Sheets Styles define how to display HTML elements CSS is used to control the style and layout of multiple Web pages all at once body { background-color: h1 { p { color: orange; text-align: center; #d0e4fe; font-family: "Times New Roman"; font-size: 20px;
22 Why CSS is needed HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: <h1>this is a heading</h1> <p>this is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. All browsers support CSS today.
23 <!DOCTYPE html> <html> <head> <style> body { background-color: #d0e4fe; h1 { color: orange; text-align: center; HTML + CSS Example p { font-family: "Times New Roman"; font-size: 20px; </style> </head> <body> <h1>my First CSS Example</h1> <p>this is a paragraph.</p> </body> </html> Students: Create this Code in e.g., NotePad and Save the File as.htm. Then Open the File in a Web Browser (just double-click on the file). Change color, etc. and see what happens.
24 CSS Syntax A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces, e.g.: p {color:red;text-align:center;
25 .center { text-align: center; color: red; CSS Classes p.center { text-align: center; color: red; <!DOCTYPE html> <html> <head> <style>.center { text-align: center; color: red; </style> </head> <body> <h1 class="center">my Heading</h1> <p class="center">my Paragraph</p> </body> </html> <!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; </style> </head> <body> <h1 class="center">my Heading</h1> <p class="center">my Paragraph</p> </body> </html> Students: Try these Examples
26 Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet (Recommended!!) An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file. An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a.css extension Internal style sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag Inline style An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!
27 Internal Style Sheet Example You define internal styles in the head section of an HTML page, inside the <style> tag, like this: <head> <style> body { background-color: linen; h1 { color: maroon; margin-left: 40px; </style> </head> Students: Try this Example <!DOCTYPE html> <html> <head> <style> body { background-color: linen; h1 { color: maroon; margin-left: 40px; </style> </head> <body> <h1>this is a heading</h1> <p>this is a paragraph.</p> </body> </html>
28 External Style Sheet Example Each HTML page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> An example of a style sheet file called mystyle.css, is shown below: body { background-color: lightblue; h1 { color: navy; margin-left: 20px; Students: Try this Example
29 Text Color body { color: blue; h1 { color: #00ff00; h2 { color: rgb(255,0,0); Text Font p { CSS Properties Text Alignment h1 { text-align: center; p.date { text-align: right; p.main { text-align: justify; font-family: "Times New Roman", Times, serif; Background Color body { background-color: lightblue; Text Size h1 { font-size: 40px; h2 { font-size: 30px; Students: Create a Style Sheet (.CSS) and a HTML page where you use these Properties p { font-size: 14px; 29
30 CSS Example Students: Open this Example and see how different styles totally changes the display and layout of a HTML page
31 JavaScript Hans-Petter Halvorsen, M.Sc.
32 JavaScript JavaScript is the programming language of the Web. All modern HTML pages are using JavaScript. JavaScript is the default scripting language in all modern browsers, and in HTML5. JavaScript is probably the most popular programming language in the world. It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. JavaScript can Change HTML Elements! which makes it very powerful!
33 Why JavaScript? JavaScript is one of 3 languages all web developers must learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages This tutorial is about JavaScript, and how JavaScript works with HTML and CSS.
34 JavaScript vs. Java JavaScript and Java are different languages, both in concept and design. JavaScript was invented by Brendan Eich, to be used in Netscape (a no longer existing browser) in 1995, and was adopted by the ECMA standard association in 1997.
35 JavaScript Example <!DOCTYPE html> <html> <body> <h1>my First JavaScript</h1> Students: Try this Example <p>javascript can change the content of an HTML element:</p> <button type="button" onclick="myfunction()">click Me!</button> <p id="demo">this is a demonstration.</p> <script> function myfunction() { document.getelementbyid("demo").innerhtml = "Hello JavaScript!"; </script> </body> </html>
36 <!DOCTYPE html> <html> <body> <p>please input a number between 1 and 10:</p> JavaScript Example 2 <input id="numb" type="number"> <button type="button" onclick="myfunction()">submit</button> <p id="demo"></p> <script> function myfunction() { var x, text; // Get the value of input field with id="numb" x = document.getelementbyid("numb").value; // If x is Not a Number or less than one or greater than 10 if (isnan(x) x < 1 x > 10) { text = "Input not valid"; else { text = "Input OK"; document.getelementbyid("demo").innerhtml = text; </script> </body> </html> Students: Try this Example
37 JavaScript Comments // Change heading: document.getelementbyid("myh").innerhtml = "My First Page"; // Change paragraph: document.getelementbyid("myp").innerhtml = "My first paragraph."; var x = 5; // Declare x, give it the value of 5 var y = x + 2; // Declare y, give it the value of x + 2 /* The code below will change the heading with id = "myh and the paragraph with id = "myp in my web page: */ document.getelementbyid("myh").innerhtml = "My First Page"; document.getelementbyid("myp").innerhtml = "My first paragraph."; Using Comments to Prevent Execution: //document.getelementbyid("myh").innerhtml = "My First Page"; document.getelementbyid("myp").innerhtml = "My first paragraph."; /* document.getelementbyid("myh").innerhtml = "My First Page"; document.getelementbyid("myp").innerhtml = "My first paragraph."; */
38 JavaScript Placement You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both. It is a good idea to place scripts at the bottom of the <body> element. This improves page load, because HTML loading is not blocked by scripts loading. Scripts can also be placed in external files. External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension.js.
39 Web Server Hans-Petter Halvorsen, M.Sc.
40 Web Server The term web server can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver web content that can be accessed through the Internet. The most common use of web servers is to host websites, but there are other uses such as gaming, data storage or running enterprise applications. IIS - Internet Information Services Microsoft Windows Apache Web Server Open Source Cross-platform: UNIX, Linux, OS X, Windows,... Nginx (pronounced "engine x") - Has become very popular latly GWS (Google Web Server)...
41 Web Server Popularity
42 Internet Information Services (IIS) IIS Internet Information Services Web Server that host the Web Pages/Web Site Make sure to have the IIS Role installed with ASP.NET sub components Default IIS Directory: C:\inetpub\wwwroot Students: Deploy one (or) more of your Web pages using IIS
43 <!DOCTYPE html> <html> <body> IIS Deployment <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html>
44 IIS Deployment localhost is your personal computer, you cam also use your IP address. Test your Web Page in your Web browser
45
46 ... ebooks from Safari Books Online
47 References HTML Tutorial: CSS Tutorial: JavaScript Tutorial:
48 Hans-Petter Halvorsen, M.Sc. University College of Southeast Norway Blog:
Web. Programming. Hans- Pe0er Halvorsen, M.Sc. h0p://home.hit.no/~hansha/?page=sojware_development
h0p://home.hit.no/~hansha/?page=sojware_development Web O. Widder. (2013). geek&poke. Available: h0p://geek- and- poke.com Programming Hans- Pe0er Halvorsen, M.Sc. 1 Web is the Present and the Future 2
Database Communica/on in Visual Studio/C# using ASP.NET Web Forms. Hans- PeBer Halvorsen, M.Sc.
Database Communica/on in Visual Studio/C# using ASP.NET Web Forms Hans- PeBer Halvorsen, M.Sc. Web Programming Hans- PeBer Halvorsen, M.Sc. Web is the Present and the Future 3 History of the Web Internet
Chapter 1. Introduction to web development
Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Load a web page from the Internet or an intranet into a web browser.
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
ASP.NET. Web Programming. Telemark University College Department of Electrical Engineering, Information Technology and Cybernetics
Telemark University College Department of Electrical Engineering, Information Technology and Cybernetics Hans- Petter Halvorsen, 2014.03.01 ASP.NET Web Programming Faculty of Technology, Postboks 203,
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
IT3504: Web Development Techniques (Optional)
INTRODUCTION : Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development
Short notes on webpage programming languages
Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of
IT3503 Web Development Techniques (Optional)
INTRODUCTION Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Fast track to HTML & CSS 101 (Web Design)
Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of
Introduction to web development and JavaScript
Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
Introduction to Web Technologies
Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced
SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1
SUBJECT TITLE : WEB TECHNOLOGY SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1 16 02 2. CSS & JAVASCRIPT Test
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
WEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
Level 1 - Clients and Markup
Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
Appendix H: Cascading Style Sheets (CSS)
Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
Contents. Introduction... 2. Downloading the Data Files... 2
Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
4.2 Understand Microsoft ASP.NET Web Application Development
L E S S O N 4 4.1 Understand Web Page Development 4.2 Understand Microsoft ASP.NET Web Application Development 4.3 Understand Web Hosting 4.4 Understand Web Services MTA Software Fundamentals 4 Test L
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create
Web Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
Additional information >>> HERE Introduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
WordPress and HTML Basics
WordPress and HTML Basics Intro: Jennifer Stuart Graphic Design background - switched to Web Design (1998) Started blogging in 2001 Became Interested in Javascript, PHP, etc. 2004 - Moved to WordPress
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Brief Course Overview An introduction to Web development Server-side Scripting Web Servers PHP Client-side Scripting HTML & CSS JavaScript &
Learnem.com. Web Development Course Series. Quickly Learn. Web Design Using HTML. By: Siamak Sarmady
Learnem.com Web Development Course Series Quickly Learn Web Design Using HTML By: Siamak Sarmady L E A R N E M W E B D E V E L O P M E N T C O U R S E S E R I E S Quickly Learn Web Design Using HTML Ver.
Web Development. How the Web Works 3/3/2015. Clients / Server
Web Development WWW part of the Internet (others: Email, FTP, Telnet) Loaded to a Server Viewed in a Browser (Client) Clients / Server Client: Request & Render Content Browsers, mobile devices, screen
HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading
Christopher Zavatchen
Christopher Zavatchen chris@cnc137.com 330-558-1137 273 Bettie Lane Brunswick, Ohio 44212 Objective Seeking a career opportunity enabling me to fully utilize my web design and development skills while
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
Internet Technologies_1. Doc. Ing. František Huňka, CSc.
1 Internet Technologies_1 Doc. Ing. František Huňka, CSc. Outline of the Course 2 Internet and www history. Markup languages. Software tools. HTTP protocol. Basic architecture of the web systems. XHTML
Web Developer Jr - Newbie Course
Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance
SPLIT BLOCK FINAL Web Design
SPLIT BLOCK FINAL Web Design MULTIPLE CHOICE 1. A(n) site shares user-created content with site visitors. a. portal c. informational/educational b. Web 2.0 d. business 2. sites include Erly, Flickr, Pinterest,
TIME SCHEDULE OBJECTIVES
COURSE TITLE : WEB DESIGN COURSE CODE : 3073 COURSE CATEGORY : B PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDITS : 4 TIME SCHEDULE MODULE TOPICS PERIODS 1 Internet fundamentals 18 2 Html, css and web design
HTML, CSS, XML, and XSL
APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these
01/42. Lecture notes. html and css
web design and applications Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications ( WebApps
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
Modern Web Development From Angle Brackets to Web Sockets
Modern Web Development From Angle Brackets to Web Sockets Pete Snyder Outline (or, what am i going to be going on about ) 1.What is the Web? 2.Why the web matters 3.What s unique about
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
Lesson Overview. Getting Started. The Internet WWW
Lesson Overview Getting Started Learning Web Design: Chapter 1 and Chapter 2 What is the Internet? History of the Internet Anatomy of a Web Page What is the Web Made Of? Careers in Web Development Web-Related
Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY
Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every
Web Design Technology
Web Design Technology Terms Found in web design front end Found in web development back end Browsers Uses HTTP to communicate with Web Server Browser requests a html document Web Server sends a html document
Introduction to Dreamweaver
Introduction to Dreamweaver ASSIGNMENT After reading the following introduction, read pages DW1 DW24 in your textbook Adobe Dreamweaver CS6. Be sure to read through the objectives at the beginning of Web
Cloud-based Data Logging, Monitoring and Analysis
Industry 4.0, Internet of Things (IoT), Cloud Computing Cloud-based Data Logging, Monitoring and Analysis Measurement System Using Windows Azure, SQL Server, LabVIEW and Visual Studio/C# Hans-Petter Halvorsen,
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
Interactive Data Visualization for the Web Scott Murray
Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding
Smart and Innovative Web Solutions. Just One Click Away
Smart and Innovative Web Solutions Just One Click Away Company Profile Zara Web solutions is a Digital Marketing Service Provider which was started with an intention to offer quality based web based solutions
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
Web Publishing Basics 2
Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
ITP 101 Project 3 - Dreamweaver
ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with
Intro to Web Development
Intro to Web Development For this assignment you will be using the KompoZer program because it free to use, and we wanted to keep the costs of this course down. You may be familiar with other webpage editing
CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types
CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining
Example. Represent this as XML
Example INF 221 program class INF 133 quiz Assignment Represent this as XML JSON There is not an absolutely correct answer to how to interpret this tree in the respective languages. There are multiple
Blueball Design Dynamic Content 2 Stack Readme Manual v1.0
Blueball Design Dynamic Content 2 Stack Readme Manual v1.0 A unique responsive stack that dynamically populates and updates a content area within the stack using a warehoused external XML flat text file
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative
CS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn
OCR LEVEL 3 CAMBRIDGE TECHNICAL
Cambridge TECHNICALS OCR LEVEL 3 CAMBRIDGE TECHNICAL CERTIFICATE/DIPLOMA IN IT WEBSITE PRODUCTION Y/601/6623 LEVEL 3 UNIT 12 GUIDED LEARNING HOURS: 60 UNIT CREDIT VALUE: 10 WEBSITE PRODUCTION Y/601/6623
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
4 Understanding. Web Applications IN THIS CHAPTER. 4.1 Understand Web page development. 4.2 Understand Microsoft ASP.NET Web application development
4 Understanding Web Applications IN THIS CHAPTER 4.1 Understand Web page development 4.2 Understand Microsoft ASP.NET Web application development 4.3 Understand Web hosting 4.4 Understand Web services
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.
Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved. Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism
JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK
Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. DOM Scripting, Web Design with JavaScript
GUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
Developer Tutorial Version 1. 0 February 2015
Developer Tutorial Version 1. 0 Contents Introduction... 3 What is the Mapzania SDK?... 3 Features of Mapzania SDK... 4 Mapzania Applications... 5 Architecture... 6 Front-end application components...
Introduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
Welcome to CSE 330 Crea0ve Progamming and Rapid Prototyping. Course Informa0on
Welcome to CSE 330 Crea0ve Progamming and Rapid Prototyping 1 Extensible - CSE 330 Creative Networking Programming Platform and Rapid Prototyping 1 Course Informa0on Instructor Todd Sproull todd@wustl.edu
Syllabus INFO-GB-3322. Design and Development of Web and Mobile Applications (Especially for Start Ups)
Syllabus INFO-GB-3322 Design and Development of Web and Mobile Applications (Especially for Start Ups) Spring 2015 Stern School of Business Norman White, KMEC 8-88 Email: nwhite@stern.nyu.edu Phone: 212-998
STATEMENT OF PURPOSE
WEB DESIGN STATEMENT OF PURPOSE This course is intended for the student interested in learning how to create web pages for the World Wide Web. Instruction on how to program using the HTML language is provided.
Syllabus INFO-UB-3322. Design and Development of Web and Mobile Applications (Especially for Start Ups)
Syllabus INFO-UB-3322 Design and Development of Web and Mobile Applications (Especially for Start Ups) Fall 2014 Stern School of Business Norman White, KMEC 8-88 Email: nwhite@stern.nyu.edu Phone: 212-998
Madison Area Technical College. MATC Web Style Guide
Madison Area Technical College MATC Web Style Guide July 27, 2005 Table of Contents Topic Page Introduction/Purpose 3 Overview 4 Requests for Adding Content to the Web Server 3 The MATC Public Web Template
Google Web Toolkit. Progetto di Applicazioni Software a.a. 2011/12. Massimo Mecella
Google Web Toolkit Progetto di Applicazioni Software a.a. 2011/12 Massimo Mecella Introduction Ajax (Asynchronous JavaScript and XML) refers to a broad range of techniques Beyond the technical jargon,
Web Designing with UI Designing
Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for Web Designing Given below is the brief description for the course you are looking for: Web Designing with UI Designing
SEO Optimization A Developer s Role
Copyright 2010. www.anubavam.com. All Rights Reserved. Page 1 Contents Overview 3 What is SEO? 3 Role of a Developer in SEO 4 SEO friendly URLs 4 Page Title 5 Meta Tags 6 Page Heading 7 Amplify the First
Requirements for Developing WebWorks Help
WebWorks Help 5.0 Originally introduced in 1998, WebWorks Help is an output format that allows online Help to be delivered on multiple platforms and browsers, which makes it easy to publish information
Systems Analysis Input and Output 1. Input and Output
Systems Analysis Input and Output 1 Input and Output A course in information architecture or web design, complemented with work in Human-Computer Interaction, will help the analyst understand how to improve
Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1
Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection
css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family
technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
WATKINS MFG DEALER GUIDE TO UNDERSTANDING WOORANK REPORTS
WATKINS MFG DEALER GUIDE TO UNDERSTANDING WOORANK REPORTS Watkins Manufacturing WatkinsMfg.com (760) 598-6464 1280 Park Center Drive, Vista, CA 92081 Design Studio DesignStudio.com (888) 825-8883 715 J
Building Your Website
Building Your Website HTML & CSS This guide is primarily aimed at people building their first web site and those who have tried in the past but struggled with some of the technical terms and processes.
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
<Insert Picture Here>
Oracle Application Express: Mobile User Interfaces Marc Sewtz Senior Software Development Manager Oracle Application Express Oracle USA Inc. 520 Madison Avenue,
Advanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
USING THE INTRO (SPLASH) PAGE
USING THE INTRO (SPLASH) PAGE Your DIY Template can be used to create multiple websites using the same company name. You can create separate websites for weddings, portraits, art etc. The splash page allows
HTML5 & CSS3. Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger.
HTML5 & CSS3 and beyond Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger.com 1 Content A short of history Html New Markup Webforms
ISI ACADEMY Web applications Programming Diploma using PHP& MySQL
ISI ACADEMY for PHP& MySQL web applications Programming ISI ACADEMY Web applications Programming Diploma using PHP& MySQL HTML - CSS - JavaScript PHP - MYSQL What You'll Learn Be able to write, deploy,
Dreamweaver CS5. Module 1: Website Development
Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main