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

Slides:



Advertisements
Similar presentations
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Creating and Editing a Web Page Using Inline Styles
How Tags are used to form your Web Page
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
Introduction to HTML CPS470 Software Engineering Fall 1998.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
CIS101 Introduction to Computing
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
CS117 Introduction to Computer Science II Lecture 2 Creating an HTML Document Instructor: Li Ma Office: NBC 126 Phone: (713)
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
Creating a Web page Using Basic HTML By: Magdalena Martinez CIEP 491 (W 6:00) Assessment #12.
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
Amber Annett David Bell October 13 th, What will happen What is this business about personal web pages? Designated location of your own web page.
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
Chapter 4 (through page 110) Fluency with Information Technology 4 th edition by Lawrence Snyder (slides by Deborah Woodall : 1.
CSCI 1101 Intro to Computers
OBJECTIVES  What is HTML  What tools are needed  Creating a Web drive on campus (done only once)  HTML file layout  Some HTML tags  Creating and.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
HTML Comprehensive Concepts and Techniques Second Edition Project 1 Creating and Editing a Web Page Review for Monday’s Test September 17, 2009.
Course Content - Chapter 2 Introduction to HTML Introduction to a Text Editor as a web authoring tool Instructional Activity: Creating a webpage using.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.
Web Page Creation Part I ST: Introduction to Web Interface Design Prof. Angela Guercio.
Just Enough HTML How to Create Basic HTML Documents.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
HTML I An Introduction to the Language of the Web Terry Bake
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
Overview of HTML/XHTML Two Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
Lesson 2: Basic HTML Code Basic HTML Code. HTML is an acronym for Hypertext Markup Language. Internet browsers translate the HTML code into texts and.
IS1811 Multimedia Development for Internet Applications Lecture 4: Introduction to HTML Rob Gleasure
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
HTML: Hyptertext Markup Language Doman’s Sections.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
CPT 499 Internet Skills for Educators Session Ten Class Notes.
CS 111 – Oct. 4 Web design –HTML –Javascript Commitment: –This week, read sections 4.3 – 4.5.
HTML HyperText Markup Language. Text Files An array of bytes stored on disk Each element of the array is a text character A text editor is a user program.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Web programming Part 1: HTML 由 NordriDesign 提供
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
HTML Assoc. Prof. Rozinah Jamaludin 28 January 2010.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
Creating and Editing a Web Page
Creating and Editing a Web Page Using Inline Styles
CS 100 Introduction to Web Page Construction and HTML.
HTML HyperText Markup Language Victoria E. Kozlek.
CompSci 1 Lecture 2 HTML Webpages. Today’s Topics Basic HTML The basis for web pages “Almost” programming Upcoming Programming Java Reading Great Ideas.
Introduction lab1. Suzanne J. Sultan 2 What is HTML? The definition of HTML is Hyper Text Markup Language. HTML is a computer language devised to allow.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
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.
HTML HYPERTEXT MARKUP LANGUAGE.
CAII 4.01 Web Page Design Terms List 2.
Presentation transcript:

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

2 2/16/05CS120 The Information Era Let ’ s Review  What is a URL?  Give an example of a URL.  What are the different parts of a URL?

3 2/16/05CS120 The Information Era Web Definitions  Web Site: the physical location of the computer that allows Web publishing. o a computer o a connection to the internet o fairly large hard disk  Web server: specialized software for transmitting information from a web site to a user’s computer  Web page: any document on the web  Home page: first page of a site

4 2/16/05CS120 The Information Era What are Web Documents?  HTML documents o HyperText Markup Language  Text files with special formatting and linking instructions  Browsers process the HTML document and display the information according to commands called “tags”  What do web pages consist of?

5 2/16/05CS120 The Information Era Web Page Basics  Web Pages o All Browsers recognize Web pages as a basic text file with an extension of.htm or.html  Problem o Locate a simple text file and make a copy of the file with a.html extension OR create a simple text file with a.html extension using the editor SimpleText. Then in a browser, go to File- >Open and select the.html file for view in your browser.

6 2/16/05CS120 The Information Era What is HTML? HTML o Hypertext Markup Language o HTML is not a programming language o Contains formatting commands (tags) to spruce up Web pages. Examples include: Paragraph breaks Bold Lists Tables Links

7 2/16/05CS120 The Information Era HTML Elements  All Web pages should contain four basic elements: o HTML o HEAD o TITLE o BODY  Editing HTML files will be done in the beginning using SimpleText in the Mac world or NotePad in the Windows world.

8 2/16/05CS120 The Information Era HTML Template Marks the beginning of an HTML file Contains info not displayed but used in the file Appears in the Browser’s title bar Text and graphics are placed here and displayed in the browser’s window

9 2/16/05CS120 The Information Era Problem  Open a plain text editor such as SimpleText and type in the following: First Webpage My First Webpage Hello everybody!

10 2/16/05CS120 The Information Era Problem  Save the file you created as ----.html  Open the file in an Internet browser  View your page!

11 2/16/05CS120 The Information Era HTML Commands  Formatting o Bold o Italic o Underline o Center  Dividers o paragraph break (double carriage return) o line break (single carriage return) o horizontal rule  Comment o

12 2/16/05CS120 The Information Era Headings  Headings can be 1 of 6 sizes: o Very Large o Very Small  Some things to note: o When a Web browser reads an HTML file, the browser treats the text as a continuous stream of characters. When a tag is encountered, a change can occur. o Returns and multiple blanks are ignored. o HTML is case insensitive. What does this mean?

13 2/16/05CS120 The Information Era Problem  Modify your file to print your name, address and phone number  Use breaks!  Use any text formatting you’d like (bold, italic, blink)  If you want to be able to work at home on a project, bring a floppy next time to save your work

14 2/16/05CS120 The Information Era Things to remember  Save your file after each change you make  You may need to hit reload on your browser to see your changes

15 2/16/05CS120 The Information Era Color  You can change the colors in o Backgrounds o Text o Links  It’s always expressed as RGB values o Hexadecimal, 2 digits for each o Hexadecimal numbers go from 0 to 15, represented as 0, 1,...9, a, b, c, d, e, f o Values for each RGB go from 0 to 255  Examples: o # o #FFFFFF

16 2/16/05CS120 The Information Era Websafe Colors  You can find a list of RGB values in the back of your book  Also online at o or/websafe.html or/websafe.html

17 2/16/05CS120 The Information Era Changing Colors  You can change the colors of text, links, or backgrounds in the tag of the html page 

18 2/16/05CS120 The Information Era Problem  Let’s use the different html elements that we have covered today  Create a webpage that says something interesting  Use o Text formatting o Different colors