Introduction to web development and HTML MGMT 230 LAB

Size: px
Start display at page:

Download "Introduction to web development and HTML MGMT 230 LAB"

Transcription

1 Introduction to web development and HTML MGMT 230 LAB

2 After this lab you will be able to... Understand the VIU network and web server environment and how to access it Save files to your web folder for publishing on the World Wide Web Be able to distinguish between the main types of tools that can be used to create web sites Understand the basics of hypertext markup language (HTML)

3 MGMT 230 lab activities This week: intro to web folders, web development tools, basic html Week 2: Fonts, text & colour on the web. Sourcing, resizing and Inserting web site images Week 3: Using multimedia on the web embed code usage Week 4: Web form design and creation Week 5: In class lab assignment (testing weeks 1-4) Week 6: Introduction to Wordpress: selecting a theme Week 7 - Week 9: How to use WordPress for an organization or company website: step-by-step instructions Week 10: Work on project website using Wordpress Week 11: Reading Week Week 12: Work on project website using WordPress Week 13: Website project demonstrations

4 The VIU Network environment You should use your network drive (U: drive) to manage your files Do not use My Documents or any other folder on the C: drive For lab work in MGMT 230 you will need a web folder on your U: drive Your web folder is actually a directory on a web server. Files saved in your web folder will be: Live on the internet Accessible to anyone using a web browser May turn up in Google searches

5 Setting up your web folder 1. Check to see if you have web folder by entering the following in your browser NUMBER> If a website loads then you already have a Web Folder 2. If you don t have a web folder you CANNOT create it yourself 3. Go to and follow the instructions DO NOT delete, change, or move the web folder, as it will not work if you do

6 Web folder limitations Web Folders have a maximum size of 100MB are separate from your U Drive limit of 200MB. Student Web Folders only support basic HTML/CSS/JavaScript pages. Dynamic pages like PHP, ASP, etc. are not supported. WebDAV is slow. (IT has done everything they can to optimize it) There can be a delay on file changes/saves of seconds.

7 Create a sub-folder INSIDE your web folder, create a sub-folder called mgmt230 (no spaces, all lower case) You will use this folder to save the lab exercises that you do over the next few weeks and your lab assignment

8 Publishing your exercises and assignments so I can see them The URL you send me MUST include the full domain name and path to your file, accessible over the Internet. For example:

9 Creating web pages Web pages are written in Hypertext Markup Language (HTML) Why learn about source code? What software can be used to write the code? Web editor. What software renders the code into something we can recognize as a web page? Web browser.

10 About HTML and CSS An HTML document is a text file that contains both text and special mark-up codes called tags The tags control the structure and appearance of the document An HTML file contains references to other files that will be included in the page when it is rendered in the browser (eg. images, sounds) Cascading Style Sheets (CSS) are responsible for layout, font, colour etc

11 The web: A little technical history HTML devised by Tim Berners-Lee and launched in 1989 (The web was 29 this year!) It was very simple to learn in the early 90s (just a handful of tags) Text only display in the early days In 1993 a tag was added for the display of images (Mosaic browser) HTML is an open standard (managed by World Wide Web Consortium (W3C) HTML 5 is the current standard (along with CSS 3 for web style sheets)

12 Tags - the vocabulary of HTML Tags delineate elements of the page for example a paragraph or heading, and how text should be formatted Tags are always contained within angle brackets You must include both opening tags, and closing tags - so the browser knows where, for example, a paragraph starts and finishes <p>this is a paragraph</p> or whether text should be bolded <strong>this is bolded text</strong>

13 Basic html tags that are present on every page <html> </html> Tells the browser that everything between these tags is an HTML document Within these tags, every HTML document is separated into a header element and a body element <head>contains information about the document</head> The most common tag within the header section is the <title> </title> <body>contains the content of the page - text, images etc </body> <h1>page or section heading largest size</h1> the most common text layout tag is the <p>paragraph tag</p> The path to an image file is shown as <img src= />

14 Browser (Internet Explorer Text editor (Note pad)

15 Options for web development: Website creation tools Hand coding using text editors (many professional coders would use this method) Professional tools that incorporate a WYSIWYG interface and a code interface, plus tools to manage files, and produce standards compliant coding and web applications eg. Adobe Dreamweaver, Microsoft Visual Studio Content management system (CMS) tools such as WordPress, Drupal, Joomla etc DIY template-based proprietary systems such as Squarespace, Wix, Weebly etc

16 Practice HTML exercise Create a very simple web page with an image (downloadable from the course website) Save it to your web folder View it in your browser using the full internet URL (web address) to test that your web folder is working correctly the correct URL to: barbara.thomas@viu.ca

MRK260. Week Two. Graphic and Web Design

MRK260. Week Two. Graphic and Web Design MRK260 Week Two Graphic and Web Design This weeks topics BASIC HTML AND CSS MRK260 - Graphic & Web Design - Week Two 2 Lesson Summary What is HTML? Introduction to HTML Basics Introduction to CSS Introduction

More information

What is a web site? Web editors Introduction to HTML (Hyper Text Markup Language)

What is a web site? Web editors Introduction to HTML (Hyper Text Markup Language) What is a web site? Web editors Introduction to HTML (Hyper Text Markup Language) What is a website? A website is a collection of web pages containing text and other information, such as images, sound

More information

ATSC Week 2 Web Authoring

ATSC Week 2 Web Authoring ATSC 212 - Week 2 Web Authoring Roland Stull rstull@eos.ubc.ca 1 Web Philosophy! Content is everything.! Style is nothing**. (**until recently)! Hypertext! Hot words or images can expand to give more info.

More information

ATSC 212 html Day 1 Web Authoring

ATSC 212 html Day 1 Web Authoring ATSC 212 html Day 1 Web Authoring Roland Stull rstull@eos.ubc.ca 1 Web Philosophy! Content is everything.! Style is nothing**. (**until recently)! Hypertext! Hot words or images can expand to give more

More information

Using Dreamweaver. 1 Overview. About the Web. About Dreamweaver

Using Dreamweaver. 1 Overview. About the Web. About Dreamweaver Using Dreamweaver 1 About the Web The worldwide web has become one of the most common uses for the Internet. It allows people to access a wide range of documents and other media from all over the world

More information

BUILD YOUR OWN WEBSITE BASICS

BUILD YOUR OWN WEBSITE BASICS BUILD YOUR OWN WEBSITE BASICS In the past, website building was a task only available to coders and website developers. Now, anyone can build a website with the click of the mouse thanks to user friendly

More information

Introduction to HTML and CSS. Arts and Humanities in the Digital Age 2018 CHASE DTP Dr. Paul Gooding

Introduction to HTML and CSS. Arts and Humanities in the Digital Age 2018 CHASE DTP Dr. Paul Gooding Introduction to HTML and CSS Arts and Humanities in the Digital Age 2018 CHASE DTP Dr. Paul Gooding p.gooding@uea.ac.uk @pmgooding Session Outline Introduction How do the web, and web browsers work? Getting

More information

COMS 359: Interactive Media

COMS 359: Interactive Media COMS 359: Interactive Media Agenda Review HTML Introduction Structure Preview Review gunkelweb.com/classlist Review Introduction World Wide Web vs. Internet Internet - Developed by DARPA in the 1960 s

More information

Co. Louth VEC & Co. Monaghan VEC. Programme Module for. Web Authoring. leading to. Level 5 FETAC. Web Authoring 5N1910

Co. Louth VEC & Co. Monaghan VEC. Programme Module for. Web Authoring. leading to. Level 5 FETAC. Web Authoring 5N1910 Co. Louth VEC & Co. Monaghan VEC Programme Module for Web Authoring leading to Level 5 FETAC Web Authoring 5N1910 Web Authoring 5N1910 1 Introduction This programme module may be delivered as a standalone

More information

CHAPTER 1: GETTING STARTED WITH HTML CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)

CHAPTER 1: GETTING STARTED WITH HTML CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY) CHAPTER 1: GETTING STARTED WITH HTML EXPLORING THE HISTORY OF THE WORLD WIDE WEB Network: a structure that allows devices known as nodes or hosts to be linked together to share information and services.

More information

CSC9B1: Essential Skills WWW 1

CSC9B1: Essential Skills WWW 1 CSC9B1: Essential Skills WWW 1 Lecture WWW 1/Slide 1 A short history of hypertext The visionary: Vannevar Bush: As We May Think, 1945: The MEMEX machine ( memory extender ) Linked information, trails,

More information

CREATING WEBSITES. What you need to build a website Part One The Basics. Chas Large. Welcome one and all

CREATING WEBSITES. What you need to build a website Part One The Basics. Chas Large. Welcome one and all Slide 1 CREATING WEBSITES What you need to build a website Part One The Basics Chas Large Welcome one and all Short intro about Chas large TV engineer, computer geek, self taught, became IT manager in

More information

Web Design. Basic Concepts

Web Design. Basic Concepts Web Design Basic Concepts Web Design Web Design: Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web. Web sites may be relatively simple, or highly

More information

Creating and Building Websites

Creating and Building Websites Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21/ Week 1 Slide 1 of 28 Course Description

More information

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية

HTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for

More information

Beginning Web Site Design

Beginning Web Site Design Beginning Web Site Design Stanford University Continuing Studies CS 03 (Summer CS 21) Mark Branom branom@alumni.stanford.edu http://web.stanford.edu/people/markb/ Course Web Site: http://web.stanford.edu/group/csp/cs03/

More information

Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens

Scientific Communication CITS4008. Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens Scientific Communication CITS4008 Designing and Writing Web Pages Rachel Cardell-Oliver 2013 Based on notes by Robyn Owens Proposed in 1989 by Tim Lee at CERN Mosaic released in 1993 Working group to define

More information

Announcements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted

Announcements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted Announcements 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted 2. Campus is closed on Monday. 3. Install Komodo Edit on your computer this weekend.

More information

Dreamweaver CS6. Level 1. Topics Workspaces Basic HTML Basic CSS

Dreamweaver CS6. Level 1. Topics Workspaces Basic HTML Basic CSS Level 1 Topics Workspaces Basic HTML Basic CSS Tour the Workspace The arrangement of panels and menus you use to interact with a document is called the workspace. Much of Illustrator is customizable: you

More information

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( ) MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

Web Design E M I R R A H A M A N WEB DESIGN SIDES 2017 EMIR RAHAMAN 1

Web Design E M I R R A H A M A N WEB DESIGN SIDES 2017 EMIR RAHAMAN 1 Web Design S ESSION 1: WEB BASICS E M I R R A H A M A N WEB DESIGN SIDES 2017 EMIR RAHAMAN 1 The World Wide Web (WWW) An information system of interlinked hypertext documents accessible via the Internet

More information

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh

Web Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags Recap on HTML and creating our template file Introduction

More information

The Nature of the Web

The Nature of the Web The Nature of the Web Agenda Code The Internet The Web Useful References 2 CODE is King (or Queen) The language of the Web: Hypertext Markup Language - HTML Cascading Style Sheets - CSS Build over successive

More information

HTML. Based mostly on

HTML. Based mostly on HTML Based mostly on www.w3schools.com What is HTML? The standard markup language for creating Web pages HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup

More information

for Beginners COPYRIGHT NATIONAL SEMINARS TRAINING. ALL RIGHTS RESERVED.

for Beginners COPYRIGHT NATIONAL SEMINARS TRAINING. ALL RIGHTS RESERVED. HTML for Beginners COPYRIGHT NATIONAL SEMINARS TRAINING. ALL RIGHTS RESERVED. HTML FOR BEGINNERS History of HTML The Hypertext Markup Language (HTML) was created in the early 1990s as a text description

More information

Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5

Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Set and modify document

More information

WEB APPLICATION DEVELOPMENT. How the Web Works

WEB APPLICATION DEVELOPMENT. How the Web Works WEB APPLICATION DEVELOPMENT How the Web Works What Is Hypertext Markup Language? Web pages are created using Hypertext Markup Language (HTML), which is an authoring language used to create documents for

More information

BMS2062 Introduction to Bioinformatics. Lecture outline. What is multimedia? Use of information technology and telecommunications in bioinformatics

BMS2062 Introduction to Bioinformatics. Lecture outline. What is multimedia? Use of information technology and telecommunications in bioinformatics BMS2062 Introduction to Bioinformatics Use of information technology and telecommunications in bioinformatics Topic 2: The Internet and multimedia Ros Gibson Lecture outline What is the Web? (previous

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

Announcements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted

Announcements. 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted Announcements 1. Class webpage: Have you been reading the announcements? Lecture slides and coding examples will be posted 2. Install Komodo Edit on your computer right away. 3. Bring laptops to next class

More information

Skill Area 323: Design and Develop Website. Multimedia and Web Design (MWD)

Skill Area 323: Design and Develop Website. Multimedia and Web Design (MWD) Skill Area 323: Design and Develop Website Multimedia and Web Design (MWD) 323.4 Use graphics and objects on Web Page (7 hrs) 323.4.1 Insert foreground features 323.4.2 Modify image attributes 323.4.3

More information

Building Your Website

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.

More information

Page Layout Using Tables

Page Layout Using Tables This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,

More information

A network is a group of two or more computers that are connected to share resources and information.

A network is a group of two or more computers that are connected to share resources and information. Chapter 1 Introduction to HTML, XHTML, and CSS HTML Hypertext Markup Language XHTML Extensible Hypertext Markup Language CSS Cascading Style Sheets The Internet is a worldwide collection of computers and

More information

WEB APPLICATION. XI, Code- 803

WEB APPLICATION. XI, Code- 803 WEB APPLICATION XI, Code- 803 Part A 1. Communication & its methods 2. Importance of communication 3. Factors effecting communication skills. 1. Communication Communication is a vital (Important) part

More information

HTML TIPS FOR DESIGNING.

HTML TIPS FOR DESIGNING. This is the first column. Look at me, I m the second column.

More information

Getting Started with Web Development Thursday September 28, 2017 Instructor: Holly Hames

Getting Started with Web Development Thursday September 28, 2017 Instructor: Holly Hames Getting Started with Web Development Thursday September 28, 2017 Instructor: Holly Hames OUTLINE What you need to publish a webpage; 1. Domain 2. Hosting 3. Code Address / URL how a webpage is found Viewing

More information

Discuss web browsers. Define HTML terms

Discuss web browsers. Define HTML terms Week 1 & 2 *discuss safety of the internet and classroom Describe the internet and it s associated key terms Describe the world wide web and key terms associated Discuss web browsers Define HTML terms

More information

Adobe Dreamweaver CS3 English 510 Fall 2007

Adobe Dreamweaver CS3 English 510 Fall 2007 Adobe Dreamweaver CS3 English 510 Fall 2007 Important: Before going through this handout, you should create a WWW directory on your ISU e-mail account. Otherwise, you will not be able to upload and view

More information

Grade 9 :The Internet and HTML Code Unit 1

Grade 9 :The Internet and HTML Code Unit 1 Internet Basic: The internet is a world-wide system of computer networks and computers. Each user makes use of an internet service provider (ISP). The ISP will set up a user account which will contain

More information

c122jan2714.notebook January 27, 2014

c122jan2714.notebook January 27, 2014 Internet Developer 1 Start here! 2 3 Right click on screen and select View page source if you are in Firefox tells the browser you are using html. Next we have the tag and at the

More information

[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6

[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 [AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 Length : 2 Days Audience(s) : New or existing users Level : 3 Technology : Adobe Dreamweaver CS6 program Delivery Method : Instructor-Led (Classroom) Course

More information

Bridges To Computing

Bridges To Computing Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited and encouraged to use this presentation to promote

More information

HTML. Hypertext Markup Language. Code used to create web pages

HTML. Hypertext Markup Language. Code used to create web pages Chapter 4 Web 135 HTML Hypertext Markup Language Code used to create web pages HTML Tags Two angle brackets For example: calhoun High Tells web browser ho to display page contents Enter with

More information

Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen

Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen https://www.halvorsen.blog Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape,

More information

HTML/CSS Lesson Plans

HTML/CSS Lesson Plans HTML/CSS Lesson Plans Course Outline 8 lessons x 1 hour Class size: 15-25 students Age: 10-12 years Requirements Computer for each student (or pair) and a classroom projector Pencil and paper Internet

More information

Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example.

Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example. Title: Jan 29 11:03 AM (1 of 23) Note that I have now added color and some alignment to the middle and to the right on this example. Sorry about these half rectangle shapes a Smartboard issue today. To

More information

Objective % Select and utilize tools to design and develop websites.

Objective % Select and utilize tools to design and develop websites. Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret

More information

Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.

Web Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph. What is HTML? Web Design 101 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 markup tags The tags describe

More information

Web Design and HTML. Web Page vs Web Site. Navigation. Links. A web page is a single page viewable using web browser. A web site is a set of web pages

Web Design and HTML. Web Page vs Web Site. Navigation. Links. A web page is a single page viewable using web browser. A web site is a set of web pages Web Page vs Web Site Web Design and HTML Lecture 14 COMPSCI111/111G SS 2018 A web page is a single page viewable using web browser Should be visually appealing, informative A web site is a set of web pages

More information

Html basics Course Outline

Html basics Course Outline Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and

More information

Hypertext Markup Language, or HTML, is a markup

Hypertext Markup Language, or HTML, is a markup Introduction to HTML Hypertext Markup Language, or HTML, is a markup language that enables you to structure and display content such as text, images, and links in Web pages. HTML is a very fast and efficient

More information

Some businesses have changed in a major way because of new technology

Some businesses have changed in a major way because of new technology Some businesses have changed in a major way because of new technology Take Uber or Kareem for example. These are some of the largest taxi companies in the world, yet the company itself does not own a single

More information

Tutorial 2 - HTML basics

Tutorial 2 - HTML basics Tutorial 2 - HTML basics Developing a Web Site The first phase in creating a new web site is planning. This involves determining the site s navigation structure, content, and page layout. It is only after

More information

THE HITCHHIKERS GUIDE TO HTML

THE HITCHHIKERS GUIDE TO HTML THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/ What is HTML HTML is a markup language for describing web pages HTML is used

More information

Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5

Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives

More information

Web Page Designing Manual READ ONLINE

Web Page Designing Manual READ ONLINE Web Page Designing Manual READ ONLINE Corporate Design Manual Web Design Forums For - Free Ebook Corporate Design Manual Web Design Forums For Designers PDF e- books and documents pdf doc xls ppt docx

More information

CSS is applied to an existing HTML web document--both working in tandem to display web pages.

CSS is applied to an existing HTML web document--both working in tandem to display web pages. CSS Intro Introduction to Cascading Style Sheets What is CSS? CSS (Cascading Style Sheets) is a supplementary extension to allowing web designers to style specific elements on their pages and throughout

More information

COMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal

COMSC-030 Web Site Development- Part 1. Part-Time Instructor: Joenil Mistal COMSC-030 Web Site Development- Part 1 Part-Time Instructor: Joenil Mistal Chapter 1 1 HTML and Web Page Basics Are you interested in building your own Web pages? This chapter introduces you to basic HTML

More information

GRAPHIC WEB DESIGNER PROGRAM

GRAPHIC WEB DESIGNER PROGRAM NH128 HTML Level 1 24 Total Hours COURSE TITLE: HTML Level 1 COURSE OVERVIEW: This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used

More information

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

CREATING PROFESSIONAL WEBSITES

CREATING PROFESSIONAL WEBSITES CREATING PROFESSIONAL WEBSITES LINDA HOLZER (MUSIC DEPARTMENT) & MEAGHAN MILLIORN (COMMUNICATIONS AND MARKETING) FREE RESOURCES FOR FACULTY Build Website Online, using browser-based tools Google Sites

More information

Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information.

Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information. Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information. WWW: (World Wide Web) A way for information to be shared over

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

CompuScholar, Inc. Alignment to Utah's Web Development I Standards

CompuScholar, Inc. Alignment to Utah's Web Development I Standards Course Title: KidCoder: Web Design Course ISBN: 978-0-9887070-3-0 Course Year: 2015 CompuScholar, Inc. Alignment to Utah's Web Development I Standards Note: Citation(s) listed may represent a subset of

More information

Planning and designing a web presence (Part 1) MGMT 230 Week 3

Planning and designing a web presence (Part 1) MGMT 230 Week 3 Planning and designing a web presence (Part 1) MGMT 230 Week 3 After today s class you will understand.. The main steps in the website planning and development process How to identify goals for a particular

More information

HTML is a mark-up language, in that it specifies the roles the different parts of the document are to play.

HTML is a mark-up language, in that it specifies the roles the different parts of the document are to play. Introduction to HTML (5) HTML is a mark-up language, in that it specifies the roles the different parts of the document are to play. For example you may specify which section of a document is a top level

More information

The Structure of the Web. Jim and Matthew

The Structure of the Web. Jim and Matthew The Structure of the Web Jim and Matthew Workshop Structure 1. 2. 3. 4. 5. 6. 7. What is a browser? HTML CSS Javascript LUNCH Clients and Servers (creating a live website) Build your Own Website Workshop

More information

Dreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production

Dreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production Dreamweaver CS 5.5 Creating Web Pages with a Template University Information Technology Services Training, Outreach, Learning Technologies, and Video Production Copyright 2012 KSU Department of Information

More information

Training Sister Hicks

Training Sister Hicks VMT CONSULTING Hand-out Vernell Turner 5/18/2016 2 Training Agenda 1. Images 2. Web Pages General 3. FBH Website 3 Images Tips for Using Images in a MS Word Document: 1. Type your text first before inserting

More information

Web Site Design and Development. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

Web Site Design and Development. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Web Site Design and Development CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM By the end of this course you will be able to Design a static website from scratch Use HTML5 and CSS3 to build the site you

More information

HTML CS 4640 Programming Languages for Web Applications

HTML CS 4640 Programming Languages for Web Applications HTML CS 4640 Programming Languages for Web Applications 1 Anatomy of (Basic) Website Your content + HTML + CSS = Your website structure presentation A website is a way to present your content to the world,

More information

ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab

ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab ADOBE VISUAL COMMUNICATION USING DREAMWEAVER CS5 Curriculum/Certification Mapping in MyGraphicsLab OBJECTIVES- 1.0 Setting Project Requirement 1.1 Identify the purpose, audience, and audience needs for

More information

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites

1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites A. Pre-Production of Webpage 1. Determine the specific software needed WYSIWYG- design software that manipulates components of the web page without the user writing or editing code Uses graphical layout

More information

Internet and World Wide Web. The Internet. Computers late 60s & 70s. State of computers? Internet s. Personal Computing?

Internet and World Wide Web. The Internet. Computers late 60s & 70s. State of computers? Internet s. Personal Computing? Internet and World Wide Web Which came first - Internet or WWW? The Internet Internet is a network of interconnected computers that is now global Internet born in 1969 - called ARPANET 1969 ARPANET was

More information

Bluehost and WordPress

Bluehost and WordPress Bluehost and WordPress Your Bluehost account allows you to install a self-hosted Wordpress installation. We will be doing this, and you will be customizing it for your final project. Using WordPress 1.

More information

Hyper Text Markup Language HTML: A Tutorial

Hyper Text Markup Language HTML: A Tutorial Hyper Text Markup Language HTML: A Tutorial Ahmed Othman Eltahawey December 21, 2016 The World Wide Web (WWW) is an information space where documents and other web resources are located. Web is identified

More information

The online customer experience: researching and planning a web presence MBA 563 WEEK 5

The online customer experience: researching and planning a web presence MBA 563 WEEK 5 The online customer experience: researching and planning a web presence MBA 563 WEEK 5 After today s class you will understand.. The main steps in the website planning and development process How to identify

More information

Blackboard staff how to guide Accessible Course Design

Blackboard staff how to guide Accessible Course Design The purpose of this guide is to help online course authors in creating accessible content using the Blackboard page editor. The advice is based primarily on W3C s Web Content Accessibility Guidelines 1.0

More information

ver Wfl Adobe lif Sams Teach Yourself Betsy Bruce Robyn Ness SAMS 800 East 96th Street, Indianapolis, Indiana, USA WlM John Ray ^lg^

ver Wfl Adobe lif Sams Teach Yourself Betsy Bruce Robyn Ness SAMS 800 East 96th Street, Indianapolis, Indiana, USA WlM John Ray ^lg^ Betsy Bruce John Ray Robyn Ness Sams Teach Yourself Adobe Wfl lif ver W ^msssi^ mm WlM ^lg^ SAMS 800 East 96th Street, Indianapolis, Indiana, 46240 USA Table of Contents Introduction What Is Dreamweaver

More information

Course Syllabus. Course Title. Who should attend? Course Description. Adobe Dreamweaver CC 2014

Course Syllabus. Course Title. Who should attend? Course Description. Adobe Dreamweaver CC 2014 Course Title Adobe Dreamweaver CC 2014 Course Description Adobe Dreamweaver CC (Creative Clouds) is the world's most powerful web design program. Our Dreamweaver course ''certified by Adobe ''includes

More information

Website Designing Training

Website Designing Training Website Designing Training Become a Professional Website Designer 100% Practical Training, Personalized Classroom Training, Assured Job Certified Training Programme in Website designing INDEX OF WEBSITE

More information

Motivation (WWW) Markup Languages (defined). 7/15/2012. CISC1600-SummerII2012-Raphael-lec2 1. Agenda

Motivation (WWW) Markup Languages (defined). 7/15/2012. CISC1600-SummerII2012-Raphael-lec2 1. Agenda CISC 1600 Introduction to Multi-media Computing Agenda Email Address: Course Page: Class Hours: Summer Session II 2012 Instructor : J. Raphael raphael@sci.brooklyn.cuny.edu http://www.sci.brooklyn.cuny.edu/~raphael/cisc1600.html

More information

Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions

Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions Architectural Engineering Senior Thesis CPEP Webpage Guidelines and Instructions Your Thesis Drive (T:\) Each student is allocated space on the Thesis drive. Any files on this drive are accessible from

More information

Harlan County Public Schools. NTI Days Web Design, Advanced Multimedia. Grades 9-12, HCHS

Harlan County Public Schools. NTI Days Web Design, Advanced Multimedia. Grades 9-12, HCHS Harlan County Public Schools NTI Days 1-10 Web Design, Advanced Multimedia Grades 9-12, HCHS Introduction: On any days designated as Non-Traditional Instruction (NTI) days, students will be required to

More information

How to use CSS text styles

How to use CSS text styles How to use CSS text styles Web typography is an important creative tool web designers use to express style and emotion that enhances the goal and overall message of a website. Image-based text gives you

More information

Introduction to Dreamweaver CS4:

Introduction to Dreamweaver CS4: Introduction to Dreamweaver CS4: 1.0.0 published by Antall Training http://www.scottantall.com info@scottantall.com 440/623-3738 Copyright 2003-2009 Antall Training All Rights Reserved. No portion of this

More information

Seema Sirpal Delhi University Computer Centre

Seema Sirpal Delhi University Computer Centre Getting Started on HTML & Web page Design Seema Sirpal Delhi University Computer Centre How to plan a web development project draft a design document convert text to HTML use Frontpage to create web pages

More information

Dreamweaver MX The Basics

Dreamweaver MX The Basics Chapter 1 Dreamweaver MX 2004 - The Basics COPYRIGHTED MATERIAL Welcome to Dreamweaver MX 2004! Dreamweaver is a powerful Web page creation program created by Macromedia. It s included in the Macromedia

More information

Revision for Grade 7 ASP in Unit :1&2 Design & Technology Subject

Revision for Grade 7 ASP in Unit :1&2 Design & Technology Subject Your Name:.... Grade 7 - SECTION 1 Matching :Match the terms with its explanations. Write the matching letter in the correct box. The first one has been done for you. (1 mark each) Term Explanation 1.

More information

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document

More information

EasyChair Preprint. Introduction to Development of Software Support for Training and Testing IT Administrators

EasyChair Preprint. Introduction to Development of Software Support for Training and Testing IT Administrators EasyChair Preprint 302 Introduction to Development of Software Support for Training and Testing IT Administrators Petra Holbíková, Lukáš Kráĺık, Petr Žáček and Roman Jašek EasyChair preprints are intended

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

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 2

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 2 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 2 Plan for the next 4 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style Introduction to JavaScript

More information

FIT 100 LAB Activity 3: Constructing HTML Documents

FIT 100 LAB Activity 3: Constructing HTML Documents FIT 100 LAB Activity 3: Constructing HTML Documents Winter 2002.pdf version of this lab (may be better formatted) Required Reading for Lab 3 Chapter 4 of the FIT course pack Additional helpful references

More information

HTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web

HTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What

More information

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan

More information

Tutorial 1: HTML Tutorial (Windows Version) HTML (Hypertext Markup Language) Basics Objectives

Tutorial 1: HTML Tutorial (Windows Version) HTML (Hypertext Markup Language) Basics Objectives 1 Tutorial 1: HTML Tutorial (Windows Version) HTML (Hypertext Markup Language) Basics Objectives In this HTML Tutorial, we will introduce you to the tools used to create, save, view and print a Web page.

More information

Diploma in Web Development Part I

Diploma in Web Development Part I Diploma in Web Development Part I Lesson 1 The Web Development Full Stack Presented by: Julian Quirke Web Development Educator Webinar Interaction Any questions? Our support team are here to help Chat

More information