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

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

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.

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

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

1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.

McGraw-Hill/Irwin The Interactive Computing Series © 2002 The McGraw-Hill Companies, Inc. All rights reserved. How to Create Web Pages Using HTML Introduction.

CS 121 Concepts of Computing II Introduction to Web Page/Site Development.

CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.

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,

Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.

Chapter 14 Introduction to HTML

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.

Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or.

Today’s Topic Language of web page - HTML (Hypertext Markup Language)

Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.

Web Technologies Website Development Trade & Industrial Education

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.

Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.

CS117 Introduction to Computer Science II Lecture 1 Introduction to WWW and HTML Instructor: Li Ma Office: NBC 126 Phone: (713)

Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.

Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags.

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.

Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'

Course Content - Chapter 2 Introduction to HTML Introduction to a Text Editor as a web authoring tool Instructional Activity: Creating a webpage using.

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

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 INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.

Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.

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-

INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.

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

HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.

HTML: Hyptertext Markup Language Doman’s Sections.

Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.

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.

15.1 Fundamentals of HTML DeKalb County School System.

CS 111 – Oct. 4 Web design –HTML –Javascript Commitment: –This week, read sections 4.3 – 4.5.

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.

HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.

1 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags. Plan an HTML site. Create a table with HTML.

Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,

Creating and Editing a Web Page

Lesson 2 – Unit B. Quick review 1. What is the name of the eGCC host that you ftp your files? 2. What type of software do you use to create and edit web.

HTML Introduction 2-1. Lecture 6 HTML - HyperText Markup Language  not a programming language  structure text into title, body, paragraphs, lists, links,

HTML Introduction 2-1. Lecture 6 HTML - HyperText Markup Language  not a programming language  structure text into title, body, paragraphs, lists, links,

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

Creating and Editing a Web Page Using Inline Styles

CPSC 203 Introduction to Computers Lab 23 By Jie Gao.

HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.

Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.

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

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.

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

Getting Started with HTML

Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines

Introduction to basic HTML

5.2.3 Be able to use HTML and CSS to construct web pages

HTML HYPERTEXT MARKUP LANGUAGE.

HTML Text editors and adding graphics

HTML Structure.

WJEC GCSE Computer Science

Presentation transcript:

CS117 Introduction to Computer Science II Lecture 2 Creating an HTML Document Instructor: Li Ma Office: NBC 126 Phone: (713) Webpage: Department of Computer Science Texas Southern University, Houston July, 2011

Objectives Understanding HTML Planning and writing an HTML document Importing page content Previewing and editing a Web page Printing an HTML document

Understanding HTML The relationship between the HTML text file and the Web page –The source file for a Web page is known as an HTML document or HTML file –HTML documents are text files that the Web browser can read and interpret –The browser will add format and insert referenced files, based on the HTML source in the text file, to create the appearance of the Web page in the browser window

Understanding HTML (cont) Open an HTML file –by an editor to edit and view the source code –by a browser to view Web page Web pages can include many types of elements and formatting, including text, links, tables, lists, graphics, sound, and video All elements of the Web page are defined by the tags (instructions) applied to the contents

Planning an HTML Document Sketch your Web page – storyboarding –what elements, how to arrange Enter structuring tags for the file: html tags Enter head section elements –ex. Title tag, keywords meta tag Enter each Web page body element –Web page content contained within and Preview the Web page

Writing an HTML Document You can create an HTML document in any application that allows you to enter and save text –Notepad –Hand-coding HTML –WordPad A plain text editor will not add any additional formatting to the HTML file

Writing an HTML Document (cont) Notepad is a good choice for text editor Save your file as a HTML document –Start Notepad program to get a blank document –Use Save As command The extension of the file name is.htm or.html, ex. Index.htm or index.html Save the file in a specified folder Type all the tags for your Web page Be careful of the new W3C coding standards

Importing Web Content Copy the page content from another document to your html file –Open the existing document –Use Copy/Paste commands to import the content needed to your HTML file Mark up Web page content –Use tag set … for each paragraph –Use … for level-one heading, … for level-two heading, … –Use for line break, for horizontal line

Previewing a Web Page Previewing is one of the most important parts of Web page development –It can identify the errors The formatting of the Web page may look different in different browsers –Preview it in all of the most common Web browsers It’s a good habit to evaluate and revise Web pages periodically

Printing an HTML Document From the text editor, you can only print the source code To print the Web page, you need the Web browser You may change the browser headers and footers –Use Page Setup command