Introduction to Web Development

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Introduction to Web Development"

Transcription

1 Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes ACM Lecture Series University of Cincinnati, OH October 16, / 1

2 HTML Syntax For Example: HTML Document is a Tree of Elements <tag options? >... </tag> Options are name="value" <a href="http://cnn.com">the News</a> <form action="https://www.paypal.com" method="post"> Form here</form> <img src="mypic.jpg" alt="my House"> <br> XHTML exception: Non paired tags require a / to end element <br /> or <img src="mypic.jpg" alt="my House" /> 2 / 1

3 HTML Versions World Wide Web Consortium (W3C) HTML 3.2 (Jan 1997) HTML 4.0 (Dec 1997) Strict Transitional Frameset HTML 4.01 (1999) (same 3) XHTML 1.0 (1999) (Essentially HTML 4.01 but in XML) Each version is specified by a Document Type Definition (DTD) document, which defines the syntax, tags allowed, and semantics. Syntax rarely changes, but elements(tags), nesting, and semantics do. 3 / 1

4 XHtml 1.0 Strict - Classes of Elements Structure, Head, Block, & Inline Structure defines part of HTML document (<html>..</html>) Head declares extra non-page information. (<title>..</title>) Block are elements which define a rectangle on the page and can have margins, etc. (<p>..</p>) Inline are elements which apply to the flow of text. (<b>..</b>) Nesting can be tricky! 4 / 1

5 XHtml 1.0 Strict - Structure Structure Elements & Attributes <html>..</html> (R) Root element of document. Req Attr: xmlns="http://www.w3.org/1999/xhtml" <head>..</head> (R) Delimits extra page information <body>..</body> (R) Displayable content. 5 / 1

6 XHtml 1.0 Strict - Head Head Elements & Attributes <title>..</title> (R) Page title. Used in Window bar and Bookmarks (Favorites) <meta>..</meta> Extra page information, like description, keywords, author. <meta name="keywords" content="chxhtml, Haskell, htmlhelp" /> <style>..</style> Embedded style information. <link>..</link> Link to external document, like a stylesheet. <link rel="stylesheet" type="text/css" href="mystyle.css" /> <script>..</script> Define JavaScript code. 6 / 1

7 Your first Web Page! 1 Start a new document test.html. 2 Type (or copy paste) this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>my First Web Page!</title> </head> <body> <h1>my First Web Page!</h1> </body></html> 3 Open test.html in browser (Opera, Chrome, Firefox, IE). 7 / 1

8 XHtml 1.0 Strict - Block (Part I) Block elements can contain block or inline elements. Check CHXHtml! Block Elements <p>..</p> Paragraph. <h1>..</h1> Highest level heading. All the way to <h6>..</h6>. <blockquote>..</blockquote> Quoted block, indented from both margins. <hr /> Horizontal rule. <pre>..</pre> Preformatted text. Displayed exactly as written. 8 / 1

9 XHtml 1.0 Strict - Inline (Part I) Inline elements can contain inline elements, but not block. Check CHXHtml! Inline Elements <em>..</em> Emphasis (italics). <strong>..</strong> Bold. <br /> Forced line break. <q>..</q> Inline quotation. <a>..</a> Anchor. Attr: href, title, tabindex,... 9 / 1

10 XHtml 1.0 Strict - Inline A Element <a href="http://cnn.com" title="where?">news Here!</a> Two types of URL in A Element Absolute href="http://yahoo.com/thenews" Relative href="pages/other.html" Relative to the current location, go to pages/other.html Relative (backup) href="../pages/other.html" Relative to the current location, go back one folder, then pages/other.html Using Fragment Identifiers Say some test.html had this tag in it: <p id="news">..</p> A link to that news would be <a href="test.html#news">the news</a> 10 / 1

11 HTML Special Characters How do you display HTML or special characters? Special Characters & is & Ampersand. " is " Double quote. c Copyright. R Registered. TM Trademark. Non-breaking space, don t line wrap. Others / 1

12 XHtml 1.0 Strict - Block (Part II) More Block Elements <ul>..</ul> Unordered list. (Requires <li>..</li>) <ol>..</ol> Ordered list. (Requires same) <li>..</li> List item, inside a ul or ol. <dl>..</dl> Definition list. (requires dt or dd) <dt>..</dt> Definition term in dl. <dd>..</dd> Definition of a term in dl. <table>..</table> Table of cells. (Requires tr) <tr>..</tr> Table row.. (Requires th or td) <th>..</th> Table header. <td>..</td> Table data. 12 / 1

13 Wrap up HTML Part I html head body title meta style link script p h1 pre hr em q a strong em q ul ol li dl dt dd table tr th td 13 / 1

14 PHP PHP: Hypertext Preprocessor Server Side Scripting Language Evolved from Common Gateway Interface (CGI) Interpreted! Typeless Object oriented from 3 onward, now 5. Part of the LAMP stack Not Secure! Can easily expose security problems! Widely used: Facebook MediaWiki, Joomla, Wordpress, Concrete5, MyBB, and Drupal. Can be compiled to C++: HipHop (Facebook) 50% speedup 14 / 1

15 Cascading Style Sheets (CSS) Syntax Describes presentation! selector { property: value; property2: value2;... } /* comment */ selectors define where to apply the style. properties define what to change. values define what it should be. 15 / 1

16 Cascading Style Sheets (CSS) - Where? Where can we put style information? Embedded <title>my First Web Page!</title> <style> body { background-color: #f70; color: #000;} h1 { color: #00f;} </style> Inline <body> <h1 style="color: #00f;">My First Web Page!</h1> </body>... External <link href="/mystyle.css" rel="stylesheet" type="text/css" /> 16 / 1

17 Example <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>my First Web Page!</title> <style> body { background-color: #f70; color: #000;} h1 { color: #00f;}.bla { background-color: #000; color: #fff; margin: 10px;} </style> </head> <body> <h1>my First Web Page!</h1> <p class="bla">more here!<p> </body></html> 17 / 1

18 What can you change? Text - Size, font, color, shadow, Positioning blocks - margins, padding, borders, background color (Week 5) Lists - Bullet icons Display vs Print settings. <link rel="stylesheet" type="text/css" media="print" href="print.css" /> 18 / 1

CS134 Web Site Design & Development. Quiz1

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

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

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...

More information

Fast track to HTML & CSS 101 (Web Design)

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

More information

HTML Fundamentals IN THIS APPENDIX

HTML Fundamentals IN THIS APPENDIX 13_0672328437_AppA.qxd 10/24/05 11:29 AM Page 223 A HTML Fundamentals IN THIS APPENDIX Plain Text Documents and HTML Tags Understanding the Overall HTML Document Structure HTML Structural Elements Within

More information

Introduction to Web Technologies

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

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

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.

More information

Web Development I & II*

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

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Getting Started with KompoZer

Getting Started with KompoZer Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files

More information

WEB DEVELOPMENT IA & IB (893 & 894)

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.

More information

HTML Tags For Amazon DTP

HTML Tags For Amazon DTP 1 of 5 1/11/2011 2:55 PM s For Amazon DTP Custom s Attributes Values Description Forces a page break. Formats enclosed text as "not underlined." (Overres

More information

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk

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

More information

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS 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

More information

HTML & HTML5 INTRO A COUPLE OF NOTES. Some tags have attributes that you have to use. For example, tags need links in their href attribute.

HTML & HTML5 INTRO A COUPLE OF NOTES. Some tags have attributes that you have to use. For example, <a> tags need links in their href attribute. HTML & HTML5 INTRO This is a complete cheat sheet for you to feel comfortable diving right into HTML & HTML5 without feeling like you have to memorize ALL THINGS related to HTML. With time you will be

More information

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D.

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D. Chapter 1 Internet and Web Basics The Internet and the Web Web Standards and Accessibility Information on the Web Web Browsers and Web Servers Internet Protocols Uniform Resource Identifiers and Domain

More information

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 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

More information

ICT 6012: Web Programming

ICT 6012: Web Programming ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term

More information

HTML & CSS Workshop. by Bethany Davis FemmeHacks 2016

HTML & CSS Workshop. by Bethany Davis FemmeHacks 2016 HTML & CSS Workshop by Bethany Davis FemmeHacks 2016 Welcome! Bethany Davis Junior at Penn studying CS Taught myself HTML/CSS in 7th grade I have a few lines of HTML and CSS in the Google codebase www.bethanytdavis.com

More information

Garfield Public Schools Fine & Practical Arts Curriculum Web Design

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

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

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

More information

Introduction to Web Development with Dreamweaver

Introduction to Web Development with Dreamweaver 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

More information

WordPress and HTML Basics

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

More information

ECDL / ICDL Web Editing Syllabus Version 2.0

ECDL / ICDL Web Editing Syllabus Version 2.0 ECDL / ICDL Web Editing Syllabus Version 2.0 Purpose This document details the syllabus for ECDL / ICDL Web Editing. The syllabus describes, through learning outcomes, the knowledge and skills that a candidate

More information

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements

More information

CST 150 Web Design I CSS Review - In-Class Lab

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

More information

HTML Kit: A User Manual. by Paul Strickberger

HTML Kit: A User Manual. by Paul Strickberger HTML Kit: A User Manual by Paul Strickberger HTML Kit User Manual Contents Introduction... 1 The Main Screen... 1 Displaying or Hiding Elements of the Screen...1 Getting Around the Main Screen... 3 The

More information

Lecture 9 HTML Lists & Tables (Web Development Lecture 3)

Lecture 9 HTML Lists & Tables (Web Development Lecture 3) Lecture 9 HTML Lists & Tables (Web Development Lecture 3) Today is our 3 rd Web Dev lecture During our 2 nd lecture on Web dev 1. We learnt to develop our own Web pages in HTML 2. We learnt about some

More information

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 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

More information

Introduction to web development using XHTML and CSS. Lars Larsson. Today. Course introduction and information XHTML. CSS crash course.

Introduction to web development using XHTML and CSS. Lars Larsson. Today. Course introduction and information XHTML. CSS crash course. using CSS using CSS 1 using CSS 2 3 4 Lecture #1 5 6 using CSS Material using CSS literature During this, we will cover server side web with JavaServer Pages. JSP is an exciting technology that lets developers

More information

HTML, XHTML and CSS for Web Designers & Developers

HTML, XHTML and CSS for Web Designers & Developers HTML, XHTML and CSS for Web Designers & Developers Course ISI-1254 - Five Days - Instructor-led - Hands on Introduction This course will give any web programmer an extra edge of effectiveness on the job.

More information

Dreamweaver CS5. Module 1: Website Development

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

More information

Web Authoring. www.fetac.ie. Module Descriptor

Web Authoring. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet

More information

SUBJECT CODE : 4074 PERIODS/WEEK : 4 PERIODS/ SEMESTER : 72 CREDIT : 4 TIME SCHEDULE UNIT TOPIC PERIODS 1. INTERNET FUNDAMENTALS & HTML Test 1

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

More information

HTML Basics. Prerequisites: You will need a text editor, such as Notepad and an Internet browser, such as Internet Explorer or Netscape.

HTML Basics. Prerequisites: You will need a text editor, such as Notepad and an Internet browser, such as Internet Explorer or Netscape. HTML Basics Welcome to HTML Basics. This workshop leads you through the basics of Hyper Text Markup Language (HTML). HTML is the building block for web pages. You will learn to use HTML to author an HTML

More information

CIS 467/602-01: Data Visualization

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

More information

CREATING WEB PAGES USING HTML INTRODUCTION

CREATING WEB PAGES USING HTML INTRODUCTION CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual

More information

Internet Technologies_1. Doc. Ing. František Huňka, CSc.

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

More information

Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.

Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,

More information

Introduction to web development and JavaScript

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

More information

Website Planning Checklist

Website Planning Checklist Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even

More information

Basic HTML Tags Tables Styles - CSS (Cascading Style Sheets)

Basic HTML Tags Tables Styles - CSS (Cascading Style Sheets) Basic HTML Tags Tables Styles - CSS (Cascading Style Sheets) HTML basic tags 1 Basic tag to identify portion of file that contains HTML Text between the opening and closing tag is the content

More information

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head

More information

HTML5/CSS3/JavaScript Programming

HTML5/CSS3/JavaScript Programming HTML5/CSS3/JavaScript Programming Description: Prerequisites: Audience: Length: This class is designed for students that have experience with basic HTML concepts that wish to learn about HTML Version 5,

More information

Guide to B2B email marketing. Part Three: Building great emails

Guide to B2B email marketing. Part Three: Building great emails Guide to B2B email marketing Part Three: Building great emails Executive Summary of Recommendations Take a look at our guidelines for building great emails in this quick, at-a-glance format Technical Email

More information

Website Development Komodo Editor and HTML Intro

Website Development Komodo Editor and HTML Intro Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of

More information

Web Editing Basics 2: Reference

Web Editing Basics 2: Reference Web Editing Basics 2: Reference We will be using the sample pages as a reference point for this training. They can be found on the Web Policy site: http://www.umkc.edu/web-policy/downloads.asp TOPICS 1.

More information

Learning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins

Learning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins Learning Web Design Third Edition A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer Niederst Robbins O'REILLY Beijing- Cambridge Farnham Koln Paris Sebastopol -Taipei -Tokyo CONTENTS

More information

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY

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

More information

ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2

ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2 HTML, XHTML & CSS: Introduction, 1-2 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers

More information

Chapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

Chapter 2 HTML Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D Chapter 2 HTML Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 First Web Page an opening tag... page info goes here a closing tag Head & Body Sections Head Section

More information

ITNP43: HTML Lecture 4

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

More information

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 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,

More information

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML

More information

Appendix H: Cascading Style Sheets (CSS)

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

More information

Web. Programming. Hans- Pe0er Halvorsen, M.Sc. h0p://home.hit.no/~hansha/?page=sojware_development

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

More information

What is a Web Browser? Web Site Functionality. A client program that uses HTTP to communicate with web servers.

What is a Web Browser? Web Site Functionality. A client program that uses HTTP to communicate with web servers. What is a Web Browser? Web Site Functionality April 1, 2004 A client program that uses HTTP to communicate with web servers. HTML interpreter Reads HTML, determines how to display it A Simple HTML file

More information

JJY s Joomla 1.5 Template Design Tutorial:

JJY s Joomla 1.5 Template Design Tutorial: JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding

More information

Intro to Web Design. ACM Webmonkeys @ UIUC

Intro to Web Design. ACM Webmonkeys @ UIUC Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML

More information

Introduction to XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document

More information

Chapter 16 Exercises and Answers

Chapter 16 Exercises and Answers Chapter 16 Exercises and nswers nswers are in blue. For Exercises 1-12, mark the answers true and false as follows:. True. False 1. The Internet and the Web are essentially two names for the same thing.

More information

Dreamweaver. Introduction to Editing Web Pages

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

More information

Code View User s Guide

Code View User s Guide Code View User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication

More information

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE COURSE TITLE: Introduction to Web Development CODE NO. : SEMESTER: 1 PROGRAM: AUTHOR: IT Studies Dennis Ochoski DATE:

More information

Course: CSC 224 Internet Technology I (2 credits Compulsory)

Course: CSC 224 Internet Technology I (2 credits Compulsory) Course: CSC 224 Internet Technology I (2 credits Compulsory) Course Duration: Two hours per week for 15weeks, ((15 hours) Theory and (45 hours) Practical), as taught in 2010/2011 session Lecturer: Abikoye,

More information

IAS Web Development using Dreamweaver CS4

IAS Web Development using Dreamweaver CS4 IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute

More information

Links Getting Started with Widgets, Gadgets and Mobile Apps

Links Getting Started with Widgets, Gadgets and Mobile Apps Widgets, Gadgets, and Mobile Apps for Libraries: Tips, Code Samples, Explanations, and Downloads Michael Sauers Technology Innovation Librarian Nebraska Library Commission msauers@nlc.state.ne.us Jason

More information

Using Adobe Dreamweaver CS4 (10.0)

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

More information

Learnem.com. Web Development Course Series. Learn em. HTML Web Design in 7 days! By: Siamak Sarmady

Learnem.com. Web Development Course Series. Learn em. HTML Web Design in 7 days! By: Siamak Sarmady Learnem.com Web Development Course Series Learn em HTML Web Design in 7 days! 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 HTML Web Design in 7 Days! Ver. 2.08.02

More information

Level 1 - Clients and Markup

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

More information

Dreamweaver Cascading Style Sheets

Dreamweaver Cascading Style Sheets Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...

More information

Creating Web Pages with HTML Simplified. 3rd Edition

Creating Web Pages with HTML Simplified. 3rd Edition Brochure More information from http://www.researchandmarkets.com/reports/2248215/ Creating Web Pages with HTML Simplified. 3rd Edition Description: Are you new to computers? Does new technology make you

More information

Mobile Publishing. Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland

Mobile Publishing. Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland Mobile Publishing MARCO GIARDINA a,b a Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland b Sensiel Research, Bern, Switzerland Faculty of Economic Sciences,

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file. Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded

More information

Make it SASsy: Using SAS to Generate Personalized, Stylized, and Automated Email Lisa Walter, Cardinal Health, Dublin, OH

Make it SASsy: Using SAS to Generate Personalized, Stylized, and Automated Email Lisa Walter, Cardinal Health, Dublin, OH Paper 89-2010 Make it SASsy: Using SAS to Generate Personalized, Stylized, and Automated Email Lisa Walter, Cardinal Health, Dublin, OH Abstract Email is everywhere! With the continuously growing number

More information

Web page design in 7 days!

Web page design in 7 days! Learnem Group presents: Web page design in 7 days! Lessons 1-7 By: Siamak Sarmady Start Here Copyright Notice : 2000,2001 Siamak Sarmady and Learnem Group. All rights reserved. This text is written to

More information

Web Design Technology

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

More information

IT3503 Web Development Techniques (Optional)

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

More information

Chapter 1. Introduction to web development

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.

More information

TIME SCHEDULE OBJECTIVES

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

More information

Advanced Drupal Features and Techniques

Advanced Drupal Features and Techniques Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount

More information

Further web design: Cascading Style Sheets Practical workbook

Further web design: Cascading Style Sheets Practical workbook Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these

More information

WYSIWYG Toolbar. File Functions. Cut, Copy, Paste, Find Functions. Undo Redo Functions. Page 1 of 7

WYSIWYG Toolbar. File Functions. Cut, Copy, Paste, Find Functions. Undo Redo Functions. Page 1 of 7 File Functions Save Save As Revert to Last Save Click on the "Save" button to save the current file on the staging server and exit the WYSIWYG editor. Remember, it will not be live on the production server

More information

Introduction to Web Design Curriculum Sample

Introduction to Web Design Curriculum Sample Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic

More information

Note; Sample Analysis, names and product type changed to protect privacy

Note; Sample Analysis, names and product type changed to protect privacy www.sastrugimarketing.com 720.524.3609 P.O. Box 632238, Littleton, CO 80163 Note; Sample Analysis, names and product type changed to protect privacy Acme Company Site Analysis, November 2011: Performed

More information

Web Developer Jr - Newbie Course

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

More information

Welcome to CSE 330 Crea0ve Progamming and Rapid Prototyping. Course Informa0on

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

More information

feel free to change this text.

<strong>feel free to change this text.</strong> HTML 1: Basics Example #1 Basic Document feel free to change this text. Exercise #1 : Basic Document 1. Show test 1.html file to class 2. Students recreate this in a Note Pad document

More information

HTML for the SAS Programmer

HTML for the SAS Programmer Paper 185-26 HTML for the SAS Programmer Lauren Haworth, Genentech, Inc., San Francisco ABSTRACT With more and more output being delivered via the Internet, a little knowledge of HTML can go a long way

More information

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353

More information

Web layout guidelines for daughter sites of Scotland s Environment

Web layout guidelines for daughter sites of Scotland s Environment Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment

More information

Agenda. 1. ZAPms Konzept. 2. Benutzer-Kontroller. 3. Laout-Aufbau. 4. Template-Aufbau. 6. Konfiguration. 7. Module.

Agenda. 1. ZAPms Konzept. 2. Benutzer-Kontroller. 3. Laout-Aufbau. 4. Template-Aufbau. 6. Konfiguration. 7. Module. Agenda. ZAPms Konzept.. Benutzer-Kontroller.. Laout-Aufbau.. Template-Aufbau. 5. Bildergalerie (Beispiel). 6. Konfiguration. 7. Module. . ZAPms Konzept Benutzer Web Server Benutzer-Kontroller www.domain/index.php

More information

any other form. the information on these sites is volatile and subject to constant changes. other records are created through these sites.

any other form. the information on these sites is volatile and subject to constant changes. other records are created through these sites. 1. Preface There are several arguments why websites must be archived. the content of intra/internet sites of public administrations can determine the acts and decisions of citizens and other services.

More information

Chapter 1 Introduction to web development and PHP

Chapter 1 Introduction to web development and PHP Chapter 1 Introduction to web development and PHP Murach's PHP and MySQL, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Use the XAMPP control panel to start or stop Apache or MySQL

More information

Enduring Understandings: Web Page Design is a skill that grows and develops throughout the careful planning and study of software and design.

Enduring Understandings: Web Page Design is a skill that grows and develops throughout the careful planning and study of software and design. Curriculum Map for Web Design SEPTEMBER Targeted NJ Core Curriculum Content Standards: Design develop, test, implement, update, and evaluate web solutions Technology Use, Media Literacy, Responsible Use

More information

Lesson Review Answers

Lesson Review Answers Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.

More information

FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II)

FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II) Sample Question Paper FOUNDATION OF INFORMATION TECHNOLOGY Class-X (TERM II) TIME : 3 Hrs MM : 80. SECTION A 1. Fill in the blanks: [10] 1.1 is the extension of an XML file. 1.2 attribute is used with

More information

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer HTML5 & CSS3 ( What about SharePoint? ) presented by @kyleschaeffer The Agenda HTML5 What is it? What can it do? Does SharePoint do HTML5? CSS3 What is it? What can it do? Does SharePoint do CSS3? HTML5

More information

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28 CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline

More information

Style & Layout in the web: CSS and Bootstrap

Style & Layout in the web: CSS and Bootstrap Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts

More information