Web Page Creation Part I. CS27101 Introduction to Web Interface Design Prof. Angela Guercio

Size: px
Start display at page:

Download "Web Page Creation Part I. CS27101 Introduction to Web Interface Design Prof. Angela Guercio"

Transcription

1 Web Page Creation Part I CS27101 Introduction to Web Interface Design Prof. Angela Guercio

2 Objective In this lecture, you will learn: What HTML is and what XHTML is How to create an (X)HTML file The (X)HTML syntax more syntax in next lecture You will experiment (X)HTML and apply the concepts hands on.

3 Let s answer a few questions What is HTML? Hyper Text MarkUp Language A language to describe the formatting and the layout of content of your web page. What is XHTML? XHTML (Extensible Hypertext Markup Language) An extension of HTML Standards available at World Wide Web Consortium (W3C)

4 Time for your first hands on! Goal: Observe a simple text file. Activity: Create a.txt file, save it with the.htm or.html extension and open it with a web browser. 1. Open Notepad (Start Program Accessory ) 2. Now close the dialog box, go to File, Edit with Notepad and continue editing 3. In the file write your name and postal address in the same way you would do on an envelope. 4. In File Name save as Myaddress.html in any folder you like 5. Go to the folder where you saved your file and double click on the icon of your file. It will be open with your default browser. What do you see? 6. Go back to your file and change the address with the school address. Save (CTRL S) 7. Do you see any change in the page? Reload the page. Do you see the changes now?

5 Web Page Creation Create a document by using a mark-up language HTML or XHTML Web Browsers show ASCII text files, i.e. *.txt = text file *.html or *.htm = HTML files Software is available to facilitate the Web page creation.

6 Web Browser Web browser display Web pages make any effort to display on the best way for laptop with smaller screen text is rearranged formatting from text files is not preserved (e.g. break lines are gone!). Web browsers dynamically rework the files to fill the display window as best as it can Web browsers rework each page for each visitor

7 What do I need to start? Do I need to be online while creating my page? No, you can be offline You need to be online only when you publish the page Which Software do I need? A text editor NotePad or A Friendly Web Editor is available in old browsers like Netscape and SeaMonkey or Dreamweaver or Any other web editor, i.e. FrontPage (not supported anymore) SeaMonkey, (the successor of Netscape) etc.

8 Web Page: Basic Since Web browsers read text files we can get a text file and display it the Web browser. A Web server is not needed during page design you can be offline It is needed only at publication time

9 HTML HTML HyperText Markup Language is a language that gives the author control over the web browser set of HTML elements or tags insert a HTML element to add to a content or a style to a Web page Instructions are issued through a series of TAGS - which are shown in <brackets> Basic HTML Elements HTML, HEAD, TITLE, BODY

10 Editing HTML files Use Notepad (Windows) or SimpleText (Mac) for now. do not use Word Word file saved as HTML invoke a HTML Converter which is not what you want when you are writing HTML files! or save it Text Only with Line Breaks If you prefer a more friendly web editor, use Dreamweaver, Frontpage, Netscape Composer, SeaMonkey Composer, ect.

11 TAGS <html>..</html> They can be nested inside other tag pairs <HTML> contains everything the browser need to know about the Web Page <head> </head> contains information not shown in the browser s Web page display <title> </title> contains the title element that appears in the browser window s title bar <body> </body> Contains the text and the graphics to display

12 Tags details Tags are NOT case sensitive: <TITLE> and <title> are the same MOST tags start with the command and end with a slash(/) ie. <TITLE>. </TITLE> However there are a few tags that do not require to be terminated <br /> Break new line <HR /> Horizontal Row next line/page Spacing the content inside a TAG is important, spacing outside of the TAG s is NOT important

13 Time for more Practice TO DO: 1. Create a file with Notepad 2. Insert the tags in the following way <HTML> <HEAD> <TITLE> My First Web Page </TITLE> </HEAD> <BODY> This is only a test! </BODY> </HTML> 1. Save the file as FirstPage.html 2. Open the page with a Web browser 1. Where does the text in the Title appear? 2. Where does the text in the Body appear?

14 Web Page Development Cycle 1. Save your file with the Save command 2. Reload the new file 3. Review the new Web page with you Web browser 4. Revise you page as needed Repeat 1-4

15 Old free web editors - Instructions for Netscape and SeaMonkey 1. Open Netscape 7.2 (or SeaMonkey) 2. Click on File New Composer Page. 3. Click on Source Code (on the bottom of the page) 4. Paste the content of the previous HTML file 5. Save it 6. Click on Browse to Preview your file

16 Web Page Development Cycle 1. Modify the file 2. Save it 3. Reload the page in your web browser, ex. Click on Browse to reload the file with Seamonkey Click on Live View to see the live page in Dreamweaver 4. If you desire to change something go back to the file and restart step 1. Keep performing this cycle until your page is ready to be made public.

17 Formatting Tags: Heading Heading element (do not confuse with HEAD!) are used for a title inside the body of the Web page 6-sizes <H1> very large </H1> <H6> very small </H6>

18 Formatting: Heading (cont.) The alternative to heading is the tag <big> and <small> More convenient You can add more than one <big> or <small> in line. You will be limited by the display ability of the browser.

19 Attributes Attributes can be added to elements Attributes go INSIDE the angle brackets! A few examples of attributes align is used to justify bgcolor used to indicate the background color border used in tables ect.

20 Formatting Tags: Align Align is used to justify Left, right, center Example: <h1 align=center> very large </h1> <h6 align=right> very small </h6>

21 Styles Tags: <STRONG>..</STRONG> General for Bold text <EM>..</EM> General for Italic text <U> </U> General for underlined text

22 More tags: Paragraph <P> </P> breaks the text into blocks of text set off by blank lines no indentation Remember: Title and paragraphs add clarity to the Web page and make it easier to read.

23 Tags: Lists Bulleted lists <UL>..</UL> unordered list Enumerated list <OL>.. </OL> ordered list Each item in the list is marked with tags <LI>..</LI> </UL>, </LI>, and </OL> are optional but use it anyway Ordered lists of books <ol> <li> book 1 <li> book 2 </ol> 1. book 1 2. book 2 Unordered lists of books <ul> <li> book 1 <li> book 2 </ul> book 1 book 2

24 Fonts Different computers have different fonts. What font will the Web browser will choose if your font is not available? Tag: <FONT> Attribute FACE Sans serif fonts: Arial, Geneva, Helvetica Serif fonts: Times New Romans, Times Monospaced fonts: Courier New, Courier Pick a selection: <FONT FACE = Arial, Geneva, Helvetica > The browser will choose the first available.

25 Fonts Tag: <font> </font> Attribute FACE Sans serif fonts: Arial, Geneva, Helvetica Serif fonts: Times New Romans, Times Monospaced fonts: Courier New, Courier Pick a selection: Example <font face= Arial, Geneva, Helvetica > The browser will choose the first available.

26 Fonts Attributes Size chart COLOR= the color for Color setting SIZE=+2 Size 1 = 8pts Size 2 = 10pts Size 3 = 12pts Size 4 = 14pts Size 5 = 18pts Size 6 = 24pts Size 7 = 36pts for the change of the current size Example <font color = Orange size = 6> Hello! </font> will display Hello!

27 Blanks, Comments, etc. Insert blanks lines or extra white space characters in the code Do you see the line or the space on the webpage? &nbsp inserts a white space <!-- comment here --> for comments <br /> inserts line breaks <hr /> draws an horizontal line

28 More next time

CSC 121 Computers and Scientific Thinking

CSC 121 Computers and Scientific Thinking CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language

More information

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its

More information

A Balanced Introduction to Computer Science, 3/E

A Balanced Introduction to Computer Science, 3/E A Balanced Introduction to Computer Science, 3/E David Reed, Creighton University 2011 Pearson Prentice Hall ISBN 978-0-13-216675-1 Chapter 2 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is

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

This document provides a concise, introductory lesson in HTML formatting.

This document provides a concise, introductory lesson in HTML formatting. Tip Sheet This document provides a concise, introductory lesson in HTML formatting. Introduction to HTML In their simplest form, web pages contain plain text and formatting tags. The formatting tags are

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

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4 Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML 4.01 Version: 4.01 Transitional Hypertext Markup Language is the coding behind web publishing. In this tutorial, basic knowledge of HTML will be covered

More information

SeaMonkey Composer: Creating Web Pages

SeaMonkey Composer: Creating Web Pages SeaMonkey Composer: Creating Web Pages v.1101 There are many ways to create and modify Web pages to be published on the Web. You can use any text editor such as Notepad to directly enter or modify the

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

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

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

Introduction to FrontPage 2002

Introduction to FrontPage 2002 Introduction to FrontPage 2002 Academic Computing Support Information Technology Services Tennessee Technological University August 2003 1. Introduction FrontPage 2002 is a program to help you build a

More information

Beginning HTML. A tag is a command written between angle brackets (the less than and greater than symbols). Ex. <html>

Beginning HTML. A tag is a command written between angle brackets (the less than and greater than symbols). Ex. <html> Beginning HTML HTML Hypertext Markup Language is the language of the Web. HTML files are text files that include tags that indicate the content and structure of a Web page. A Web browser reads the HTML

More information

Tutorial. Activities. Code o o. Editor: Notepad Focus : Text manipulation & webpage skeleton. Open Notepad

Tutorial. Activities. Code o o. Editor: Notepad Focus : Text manipulation & webpage skeleton. Open Notepad Tutorial Activities Code o o Editor: Notepad Focus : Text manipulation & webpage skeleton Open Notepad Click in the search bar and type notepad to load it up, you should see something like this: Type in

More information

DREAMWEAVER QUICK START TABLE OF CONTENT

DREAMWEAVER QUICK START TABLE OF CONTENT DREAMWEAVER QUICK START TABLE OF CONTENT Web Design Review 2 Understanding the World Wide Web... 2 Web Browsers... 2 How Browsers Display Web pages... 3 The Web Process at Sacramento State... 4 Web Server

More information

FCKEditor v1.0 Basic Formatting Create Links Insert Tables

FCKEditor v1.0 Basic Formatting Create Links Insert Tables FCKEditor v1.0 This document goes over the functionality and features of FCKEditor. This editor allows you to easily create XHTML compliant code for your web pages in Site Builder Toolkit v2.3 and higher.

More information

Lab 4 CSS CISC1600, Spring 2012

Lab 4 CSS CISC1600, Spring 2012 Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

4 HTML Basics YOU WILL LEARN TO WHY IT MATTERS... CHAPTER

4 HTML Basics YOU WILL LEARN TO WHY IT MATTERS... CHAPTER CHAPTER 4 HTML Basics YOU WILL LEARN TO Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create lists

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

HTML and CSS: An Introduction

HTML and CSS: An Introduction JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction

More information

Creating Web Pages with SeaMonkey Composer

Creating Web Pages with SeaMonkey Composer 1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it

More information

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements including headings, paragraphs, lists,

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 2 The World Wide Web is based on (Hypertext markup language). Although Dreamweaver is primarily a WYSIWYG editor, it is still worthwhile for Dreamweaver users to be familiar with

More information

Creating Forms. Starting the Page. another way of applying a template to a page.

Creating Forms. Starting the Page. another way of applying a template to a page. Creating Forms Chapter 9 Forms allow information to be obtained from users of a web site. The ability for someone to purchase items over the internet or receive information from internet users has become

More information

Dreamweaver Basics Outline

Dreamweaver Basics Outline Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working

More information

Creating A Web Page. Computer Concepts I and II. Sue Norris

Creating A Web Page. Computer Concepts I and II. Sue Norris Creating A Web Page Computer Concepts I and II Sue Norris Agenda What is HTML HTML and XHTML Tags Required HTML and XHTML Tags Using Notepad to Create a Simple Web Page Viewing Your Web Page in a Browser

More information

The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data.

The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. Review The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. It is not the internet! It is a service of the internet.

More information

I-5 Internet Applications

I-5 Internet Applications I-5 Internet Applications After completion of this unit, you should be able to understand and code a webpage that includes pictures, sounds, color, a table, a cursor trail, hypertext, and hyperlinks. Assignments:

More information

Chapter 4. Introduction to XHTML: Part 1

Chapter 4. Introduction to XHTML: Part 1 Chapter 4. Introduction to XHTML: Part 1 XHTML is a markup language for identifying the elements of a page so a browser can render that page on a computer screen. Document presentation is generally separated

More information

1 Creating a simple HTML page

1 Creating a simple HTML page cis3.5, spring 2009, lab I.3 / prof sklar. 1 Creating a simple HTML page 1.1 Overview For this assignment, you will create an HTML file in a text editor. on a PC, this is Notepad (not Wordpad) on a Mac,

More information

Using Dreamweaver 2 HTML

Using Dreamweaver 2 HTML Using Dreamweaver 2 The World Wide Web is based on (Hypertext markup language). Although Dreamweaver is primarily a WYSIWYG editor, it is still worthwhile for Dreamweaver users to be familiar with for

More information

Part 1: HTML Language HyperText Make-up Language

Part 1: HTML Language HyperText Make-up Language Part 1: HTML Language HyperText Make-up Language 09/08/2010 1 CHAPTER I Introduction about Web Design 2 Internet and World Wide Web The Internet is the world s largest computer network The Internet is

More information

CSS: The Basics CISC 282 September 20, 2014

CSS: The Basics CISC 282 September 20, 2014 CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML

More information

FrontPage 98 Quick Guide. Copyright 2000 Peter Pappas. edteck press All rights reserved.

FrontPage 98 Quick Guide. Copyright 2000 Peter Pappas. edteck press All rights reserved. Master web design skills with Microsoft FrontPage 98. This step-by-step guide uses over 40 full color close-up screen shots to clearly explain the fast and easy way to design a web site. Use edteck s QuickGuide

More information

1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5

1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 Name Date Final Exam Prep Questions Worksheet #1 1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 2. Which of the following

More information

Announcements. Paper due this Wednesday

Announcements. Paper due this Wednesday Announcements Paper due this Wednesday 1 Client and Server Client and server are two terms frequently used Client/Server Model Client/Server model when talking about software Client/Server model when talking

More information

By completing this practical, the students will learn how to accomplish the following tasks:

By completing this practical, the students will learn how to accomplish the following tasks: By completing this practical, the students will learn how to accomplish the following tasks: Learn different ways by which styles that enable you to customize HTML elements and precisely control the formatting

More information

HTML TUTORIAL ONE. Understanding What XHTML is Not

HTML TUTORIAL ONE. Understanding What XHTML is Not HTML TUTORIAL ONE Defining Blended HTML, XHTML and CSS HTML: o Language used to create Web pages o Create code to describe structure of a Web page XHTM: o Variation of HTML o More strictly defines how

More information

Basics of Web Design, 3 rd Edition Instructor Materials Chapter 2 Test Bank

Basics of Web Design, 3 rd Edition Instructor Materials Chapter 2 Test Bank Multiple Choice. Choose the best answer. 1. What element is used to configure a new paragraph? a. new b. paragraph c. p d. div 2. What element is used to create the largest heading? a. h1 b. h9 c. head

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

Web Publishing Basics I

Web Publishing Basics I Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic

More information

Web Development & Design Foundations with XHTML. Chapter 2 Key Concepts

Web Development & Design Foundations with XHTML. Chapter 2 Key Concepts Web Development & Design Foundations with XHTML Chapter 2 Key Concepts Learning Outcomes In this chapter, you will learn about: XHTML syntax, tags, and document type definitions The anatomy of a web page

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

Working with HTML. must appear at the very beginning of your webpage. starts the first section of your page

Working with HTML. must appear at the very beginning of your webpage. starts the first section of your page CSC105 Manual 27 Working with HTML Learning the Tags must appear at the very beginning of your webpage starts the first section of your page Enter the title of your

More information

Creating a Website with Dreamweaver 4

Creating a Website with Dreamweaver 4 Creating a Website with Dreamweaver 4 What is Dreamweaver (DW)? DW is a visual web page editor that allows you to create and manage Websites and pages without having to learn HTML (Hyper Text Markup Language).

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

This booklet is knowledge of. a web page. of a web page find what you. you want to. SiteSell offers. Introduction

This booklet is knowledge of. a web page. of a web page find what you. you want to. SiteSell offers. Introduction From www.basic computerskills.com/ Thank you for downloading this freee Booklet. This booklet is intended for people, who want to start out with their own web site or just want to get the basic knowledge

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

Basics of Page Format

Basics of Page Format Basics of Page Format HTML Structural Tags Certain HTML tags provide the structure of the HTML document. These include the tag, the tag, the tag, and the tag. As soon as a

More information

Activity 4.1: Creating a new Cascading Style Sheet

Activity 4.1: Creating a new Cascading Style Sheet UNIVERSITY OF BAHRAIN COLLEGE OF APPLIED STUDIES LAB 4 Understanding & Creating Cascading Style Sheets (CSS) Description: Cascading style sheets (CSS) are collections of formatting rules that control the

More information

Introduction to Web Technologies

Introduction to Web Technologies Introduction to Web Technologies James Curran and Tara Murphy 16th April, 2009 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET

More information

How to Create Accessible Word (2016) Documents

How to Create Accessible Word (2016) Documents How to Create Accessible Word (2016) Documents Heading Styles 1. Create a uniform heading structure through use of Styles in Word under the Home ribbon. a. Proper heading structure is necessary for screen

More information

What You Will Learn Today

What You Will Learn Today CS101 Lecture 03: The World Wide Web and HTML Aaron Stevens 23 January 2011 1 What You Will Learn Today Is it the Internet or the World Wide Web? What s the difference? What is the encoding scheme behind

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

The City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 8. Worksheets for Intervention Classes

The City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 8. Worksheets for Intervention Classes The City School PAF Chapter Prep Section ICTech Class 8 2 nd Term Worksheets for Intervention Classes Name: Topic: Flowchart Date: Q. Write the name and description of the following symbol. Symbol Name

More information

The City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 7. Worksheets for Intervention Classes

The City School. Prep Section. ICTech. 2 nd Term. PAF Chapter. Class 7. Worksheets for Intervention Classes The City School PAF Chapter Prep Section ICTech Class 7 2 nd Term Worksheets for Intervention Classes Name: Topic: Scratch Date: Q.1: Label the diagram 1 2 3 4 5 6 7 12 8 9 11 10 1. 2. 3. 4. 5. 6. 7. 8.

More information

Lab Introduction to Cascading Style Sheets

Lab Introduction to Cascading Style Sheets Lab Introduction to Cascading Style Sheets For this laboratory you will need a basic text editor and a browser. In the labs, winedt or Notepad++ is recommended along with Firefox/Chrome For this activity,

More information

Developing a Basic Web Page

Developing a Basic Web Page Developing a Basic Web Page Creating a Web Page for Stephen Dubé s Chemistry Classes 1 Objectives Review the history of the Web, the Internet, and HTML Describe different HTML standards and specifications

More information

1.264 Lecture 12. HTML Introduction to FrontPage

1.264 Lecture 12. HTML Introduction to FrontPage 1.264 Lecture 12 HTML Introduction to FrontPage HTML Subset of Structured Generalized Markup Language (SGML), a document description language SGML is ISO standard Current version of HTML is version 4.01

More information

Chapter 7 Typography, Style Sheets, and Color. Mrs. Johnson

Chapter 7 Typography, Style Sheets, and Color. Mrs. Johnson Chapter 7 Typography, Style Sheets, and Color Mrs. Johnson Typography Typography refers to the arrangement, shape, size, style, and weight of text. Affects the navigation and usability of a web site and

More information

INTRODUCTION TO HTML5! HTML5 Page Structure!

INTRODUCTION TO HTML5! HTML5 Page Structure! INTRODUCTION TO HTML5! HTML5 Page Structure! What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since

More information

A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension

A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension HTML Website is a collection of web pages on a particular topic, or of a organization, individual, etc. It is stored on a computer on Internet called Web Server, WWW stands for World Wide Web, also called

More information

Table of Contents Chapter 9. Working with Cascading Style Sheets ... 1

Table of Contents Chapter 9. Working with Cascading Style Sheets ... 1 Table of Contents Chapter 9.... 1 Introduction... 1 Introducing Cascading Style Sheets... 2 Create CSS Styles... 2 Attribute Styles... 2 Style Types... 3 Creating a Web Page with a CSS Layout... 4 Create

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

CMPT 165: More CSS Basics

CMPT 165: More CSS Basics CMPT 165: More CSS Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 14, 2011 1 The Favorites Icon The favorites icon (favicon) is the small icon you see

More information

Corel Ventura 8 Introduction

Corel Ventura 8 Introduction Corel Ventura 8 Introduction Training Manual A! ANZAI 1998 Anzai! Inc. Corel Ventura 8 Introduction Table of Contents Section 1, Introduction...1 What Is Corel Ventura?...2 Course Objectives...3 How to

More information

Let s Remember! Using HTML. Use the Browser to View Web Page Source Code. 22 Expression Web 3/4

Let s Remember! Using HTML. Use the Browser to View Web Page Source Code. 22 Expression Web 3/4 By conforming to the W3C standards, web technologies are made interoperable making it easy for the users to view web pages even if they are using different browsers. Neglecting the W3C standards may have

More information

FRONTPAGE STEP BY STEP GUIDE

FRONTPAGE STEP BY STEP GUIDE IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page

More information

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6

CS 350 COMPUTER/HUMAN INTERACTION. Lecture 6 CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r

More information

11. HTML5 and Future Web Application

11. HTML5 and Future Web Application 11. HTML5 and Future Web Application 1. Where to learn? http://www.w3schools.com/html/html5_intro.asp 2. Where to start: http://www.w3schools.com/html/html_intro.asp 3. easy to start with an example code

More information

CS 200. Lecture 02 Structured Word Processing Styles. 02 Styles. CS 200 Spring Friday, May 9, 2014

CS 200. Lecture 02 Structured Word Processing Styles. 02 Styles. CS 200 Spring Friday, May 9, 2014 CS 200 Lecture 02 Structured Word Processing Styles 1 Miscellaneous Notes Assigned reading The Non Designer s Design Book, 2nd Edition, by Robin Williams (first half) Adobe on Basic Typography (the cws:

More information

How to set up a local root folder and site structure

How to set up a local root folder and site structure Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where

More information

Desire2Learn: HTML Basics

Desire2Learn: HTML Basics Desire2Learn: HTML Basics Page 1 Table of Contents HTML Basics... 2 What is HTML?...2 HTML Tags...2 HTML Page Structure...2 Required Tags...3 Useful Tags...3 Block Quote - ...

More information

c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address

c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address All assignments should be sent to p.grocer@rcn.com Backup please send a cc to this address Note that I record classes and capture Smartboard notes. They are posted under audio and Smartboard under XHTML

More information

ACSC 231 Internet Technologies

ACSC 231 Internet Technologies ACSC 231 Internet Technologies Lecture 7 Web Typography Efthyvoulos Kyriacou - Assoc. Prof. Frederick University Resources: C. Markides (Frederick University) Slide 1 ACSC 231: Internet Technologies 23/12/2008

More information

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21 Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...

More information

CS 200. Lecture 02 Structured Word Processing Styles. 02 Styles. CS 200 Winter 2018

CS 200. Lecture 02 Structured Word Processing Styles. 02 Styles. CS 200 Winter 2018 CS 200 Lecture 02 Structured Word Processing Styles 1 Assigned reading Miscellaneous Notes The Non Designer s Design Book, by Robin Williams (first half) Adobe on Basic Typography (https://www.student.cs.uwaterloo.ca/~cs200/adobe/

More information

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100 Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!

More information

How to create and edit a CSS rule

How to create and edit a CSS rule Adobe Dreamweaver CS6 Project 3 guide How to create and edit a CSS rule You can create and edit a CSS rule in two locations: the Properties panel and the CSS Styles panel. When you apply CSS styles to

More information

It is possible to create webpages without knowing anything about the HTML source behind the page.

It is possible to create webpages without knowing anything about the HTML source behind the page. What is HTML? HTML is the standard markup language for creating Web pages. HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in

More information

3.1 Introduction. 3.2 Levels of Style Sheets. - HTML is primarily concerned with content, rather than style. - There are three levels of style sheets

3.1 Introduction. 3.2 Levels of Style Sheets. - HTML is primarily concerned with content, rather than style. - There are three levels of style sheets 3.1 Introduction - HTML is primarily concerned with content, rather than style - However, tags have presentation properties, for which browsers have default values - The CSS1 cascading style sheet specification

More information

Dreamweaver Primer. Using Dreamweaver to Create and Publish Simple Web Pages. Mark Branom, Stanford University, Continuing Studies June 2011

Dreamweaver Primer. Using Dreamweaver to Create and Publish Simple Web Pages. Mark Branom, Stanford University, Continuing Studies June 2011 Dreamweaver Primer Using Dreamweaver to Create and Publish Simple Web Pages Mark Branom, Stanford University, Continuing Studies June 2011 Stanford University Continuing Studies Page 1 of 30 Contents...

More information

PART COPYRIGHTED MATERIAL. Getting Started LEARN TO: Understand HTML, its uses, and related tools. Create HTML documents. Link HTML documents

PART COPYRIGHTED MATERIAL. Getting Started LEARN TO: Understand HTML, its uses, and related tools. Create HTML documents. Link HTML documents 2523ch01.qxd 3/22/99 3:19 PM Page 1 PART I Getting Started LEARN TO: Understand HTML, its uses, and related tools Create HTML documents Link HTML documents Develop and apply Style Sheets Publish your HTML

More information

COMPUTER APPLICATIONS IN BUSINESS FYBMS SEM II

COMPUTER APPLICATIONS IN BUSINESS FYBMS SEM II CHAPTER 1: HTML 1. What is HTML? Define its structure. a. HTML [Hypertext Markup Language] is the main markup language for creating web pages and other information that can be displayed in a web browser.

More information

Very Basics of HTML. G day mates during this tutorial I will teach you the basics of HTML.

Very Basics of HTML. G day mates during this tutorial I will teach you the basics of HTML. Very Basics of HTML Basics of HTML G day mates during this tutorial I will teach you the basics of HTML. Frequently Asked Questions What does HTML actually stand for? HTML stands for Hyper Text Markup

More information

Introduction to Computers and Their Applications

Introduction to Computers and Their Applications Introduction to Computers and Their Applications Lecture 10 Web Technology and Creating a Web Page The Web, the Net, and Hypertext The Web is an interlinked collection of information A hypertext is a group

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

FUNDAMENTALS OF WEB DESIGN (405)

FUNDAMENTALS OF WEB DESIGN (405) Page 1 of 8 Contestant Number: Time: Rank: FUNDAMENTALS OF WEB DESIGN (405) REGIONAL 2015 Multiple Choice & Short Answer Section: Multiple Choice (20 @ 10 points each) Application (200 pts) (205 pts) TOTAL

More information

Introducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS

Introducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS has many benefits: The pages look

More information

PBwiki Basics Website:

PBwiki Basics Website: Website: http://etc.usf.edu/te/ A wiki is a website that allows visitors to edit or add their own content to the pages on the site. The word wiki is Hawaiian for fast and this refers to how easy it is

More information

Web Programming Week 2 Semester Byron Fisher 2018

Web Programming Week 2 Semester Byron Fisher 2018 Web Programming Week 2 Semester 1-2018 Byron Fisher 2018 INTRODUCTION Welcome to Week 2! In the next 60 minutes you will be learning about basic Web Programming with a view to creating your own ecommerce

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

Building Web Based Application using HTML

Building Web Based Application using HTML Introduction to Hypertext Building Web Based Application using HTML HTML: Hypertext Markup Language Hypertext links within and among Web documents connect one document to another Origins of HTML HTML is

More information

Do It Yourself Website Editing Training Guide

Do It Yourself Website Editing Training Guide Do It Yourself Website Editing Training Guide Version 3.0 Copyright 2000-2011 Sesame Communications. All Rights Reserved. Table of Contents DIY Overview 3 What pages are editable using the DIY Editing

More information

Best Practices for Using the Rich Text Editor

Best Practices for Using the Rich Text Editor Best Practices for Using the Rich Text Editor Overview Many pages in ilearn contain large text entry boxes along with many icons and pull down lists (located above the actual text entry area). These icons

More information

Figure 1 Properties panel, HTML mode

Figure 1 Properties panel, HTML mode How to add text Adding text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties

More information

Dreamweaver is a full-featured Web application

Dreamweaver is a full-featured Web application Create a Dreamweaver Site Dreamweaver is a full-featured Web application development tool. Dreamweaver s features not only assist you with creating and editing Web pages, but also with managing and maintaining

More information

LECTURE 08: INTRODUCTION TO HTML

LECTURE 08: INTRODUCTION TO HTML http://smtom.lecture.ub.ac.id/ Password: https://syukur16tom.wordpress.com/ Password: LECTURE 08: INTRODUCTION TO HTML We make a living by what we get, but we make a life by what we give. Winston Churchill

More information

- HTML is primarily concerned with content, rather than style. - However, tags have presentation properties, for which browsers have default values

- HTML is primarily concerned with content, rather than style. - However, tags have presentation properties, for which browsers have default values 3.1 Introduction - HTML is primarily concerned with content, rather than style - However, tags have presentation properties, for which browsers have default values - The CSS1 cascading style sheet specification

More information