DESIGNING A WEB PAGE Introducing the… <PRE>&<BLOCKQUOTE>TAGS.

Slides:

Advertisements

Similar presentations

HTML Overview - Text Markups. Before We Begin Make a copy of your HTML file you created in the previous lesson Make a copy of your HTML file you created.

Advertisements

ASHIMA KALRA.  WHAT IS HTML WHAT IS HTML  HTML TAGS HTML TAGS  FORMATTING TAGS FORMATTING TAGS.

How Tags are used to form your Web Page

HTML Computing Concepts HTML - An Introduction 1.

Web Page Development Identify elements of a Web Page Start Notepad

Marking Up With Html: A Hypertext Markup Language Primer

HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.

© 2005 ComputerPREP, Inc. All rights reserved. HTML 4.0 and Web Page Design Module I.

Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.

Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.

ULI101: XHTML Basics (Part III) Introduction to XHTML / Continued … Block-Level vs. Inline Elements (tags) Manipulating Text, , Text Characteristics,,,,,,,,,,,,,,,

Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: (44562 internal)

Unit 1 – Developing a Web Page. Objectives:  Learn the history of the Web and HTML  Describe HTML standards and specifications  Understand HTML elements.

CS117 Introduction to Computer Science II Lecture 2 Creating an HTML Document Instructor: Li Ma Office: NBC 126 Phone: (713)

HTML BASICS Creating Web Pages with HTML CIS 133 Web Programming Concepts 1.

4 HTML Basics 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.

Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.

1.  Describe the anatomy of a web page  Format the body of a web page with block-level elements including headings, paragraphs, lists, and blockquotes.

1 Web Developer Foundations: Using XHTML Chapter 2 Key Concepts.

HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.

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.

XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.

HTML (continued). Assignment 3 Creating a web page with:  Images  Hyperlinks to some websites  Hyperlinks to your  Information about a company,

XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.

Computing Theory: HTML Year 11. Lesson Objective You will: o Be able to define what HTML is - ALL o Be able to write HTML code to create your own web.

A Basic Web Page. Chapter 2 Objectives HTML tags and elements Create a simple Web Page XHTML Line breaks and Paragraph divisions Basic HTML elements.

Introduction to HTML. Slide 1 Hard-Coding What is hard-coding? –Creating the page in a text editor just using HTML A Web designer should know how to hard-

INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,

INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.

Introduction to HTML Wah Yan College (Hong Kong) Mr. Li C.P.

Basic HTML Hyper text markup Language. Lesson Overview  In this lesson, you will learn to:  Write HTML code using a text editor application such as.

Agenda Block-Level vs. Inline Elements (tags) Manipulating Text, , Text Characteristics,,,,,,,,,,,,,,, Font Attributes: size, color, face Horizontal.

Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.

How to make tables in HTML By Daniel Arze. How do they do this?

HTML ( HYPER TEXT MARK UP LANGUAGE ). What is HTML HTML describes the content and format of web pages using tags. Ex. Title Tag: A title It’s the job.

HTML for ISD Brown Bag Presentation Session 2 What we will cover:  Basics of HTML  How to make your first page  Links  Text formatting.

L. Anne Spencer (c) 2001 Basic Web Design Document, text, & layout formatting tags & attributes.

HTML Tags Lesson 2. What are HTML Tags?  Markup tags  Coded instructions that accompany the plain text of an HTML document  Syntax –Left wicket< –Tag.

HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.

4 HTML Basics 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.

1 herbert van de sompel CS 502 Computing Methods for Digital Libraries Cornell University – Computer Science Herbert Van de Sompel

Introduction into JavaScript Java 1 JavaScript JavaScript programs run from within an HTML document The statements that make up a program in an HTML.

Formatting Text with HTML. Objectives: Students will be able to: Define the structure of the document with block elements Format numbered, bulleted, and.

Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.

Invitation to Computer Science 6 th Edition Chapter 10 The Tower of Babel.

Basic HTML. Lesson Overview In this lesson, you will learn to:  Write HTML code using a text editor application such as Notepad.  View Web pages created.

XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.

Hypertext Markup Language.  Developed by Tim Berners-Lee in 1990  Stands for HyperText Markup Languange  A format that tells a computer how to display.

The Web Wizard’s Guide to HTML Chapter Two Basic Text Formatting.

1 2/16/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Intro to HTML and Basic Web Page Design.

The idea of adding markup instructions to documents is not new. Before computers, authors would make annotations by hand in their written or typed documents.

Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring

Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring

Basic Webpage Design Formatting tags.

Chapter 5 pp HTML Elements & Attributes Format Content Or Examples This Text Is A Hyperlink.

Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.

Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.

HTML is the language that allows text and graphics to be displayed as Web pages. It is a set of special codes, called tags, that tells a browser application.

NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.

Basic Web Publishing M. Scott Gartner 7/15/98.

XP Including Comments in an HTML Document On a new blank line in an HTML document, type the start code for a comment:

Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines

Introduction to HTML Section A – Programming, HTML

Creating a Web Page.

N100 Building a Simple Web Page

Intro to Web Development HTML Structure

Tutorial Working with Block-Level Elements

CAII 4.01 Web Page Design Terms List 2.

Presentation transcript:

DESIGNING A WEB PAGE Introducing the… <PRE>&<BLOCKQUOTE>TAGS

Lesson Objective To introduce the and tags. To show how these tags can control the placement of text on a page when tabs and spaces are important. To introduce ASCII art using the tag.

Problem: HTML Ignores Blank Spaces Blank Lines Tabs

Solution: Tag Using the tag allows you to control the way text or tables look using blank spaces, blank lines, and special characters.

The preformat tag instructs your web browser to display text exactly as typed in the HTML document, including spaces, tabs and carriage returns.

Using the tag: Insert the tag to display preformatted text you want retained in your Web page. The tag is a container tag, and must be used in an on/off pair.

Code as Entered ) ( * )00 ( / \/ / | | | | | |--| | | | | |

Web Page as Displayed in Browser ) ( * )00 ( / \/ / | | | | | |--| | | | | | | | | |

Enter The Tag ) ( * )00 ( / \/ / | | | | | |--| | | | | |

Web Page Displayed Using Web Page Displayed Using ) ( * ) 00 ( / \/ / | | | | | |---| | | | | |

<Blockquote> The tag defines the start of a long quotation. The blockquote element creates white space on both sides of the text. The tag is a container tag.

<Blockquote> Example Without Blockquote TagThis is an example of how body text will look when typed into a text block without any formatting tags being used. The only white space is a single space separating words. Neither indentations nor line breaks are inserted.

<Blockquote> Example With Blockquote Tag This is an example of how body text will look when typed into a text block without any formatting tags being used. The only white space is a single space separating words. Neither indentations nor line breaks are inserted

ASCII Art ASCII (ask'-ee) stands for "American Standard Code for Information Interchange." ASCII artwork denotes artwork that is created without using graphics at all. Its palette is limited to the symbols and characters that you have available to you on your computer keyboard.

Review: and tags are used to enhance the way your Web pages are displayed in a browser. and tags are used to enhance the way your Web pages are displayed in a browser. tags are used to retain the look of preformatted text. tags are used to retain the look of preformatted text. is used to is used to define a long quotation. define a long quotation.

Assignment: In notepad, using the tag to define preformatted text, create an HTML document that will display your name as ASCII art when opened on your browser.