HTML Hypertext Markup Language –First proposed by CERN in 1989 –It is non-linear so it allows you to jump from place to place –Markup refers to the structure.

Slides:



Advertisements
Similar presentations
Introduction to HTML
Advertisements

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
HTML popo.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
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
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
Web Page Development Identify elements of a Web Page Start Notepad
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.
Marking Up With Html: A Hypertext Markup Language Primer
HTML Introduction HTML
Chapter 1 Understanding the Web Design Environment
Developing a Basic Web Page with HTML
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.
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Chapter 1 Variables in the Web Design Environment
Creating a Simple Page: HTML Overview
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Creating and Editing a Web Page
Unit 1 – Developing a Web Page. Objectives:  Learn the history of the Web and HTML  Describe HTML standards and specifications  Understand HTML elements.
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.
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
Understanding HTML Code
Chapter 1 XHTML: Part I The Web Warrior Guide to Web Design Technologies.
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
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 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
HTML Comprehensive Concepts and Techniques Second Edition Project 1 Creating and Editing a Web Page Review for Monday’s Test September 17, 2009.
XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML Documents Tutorial 8.
HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript.
XP 1 New Perspectives on Creating Web Pages with HTML Tutorial 1: Developing a Basic Web Page.
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
HTML: Hyptertext Markup Language Doman’s Sections.
XHTML 1.1  Derived from Standard Generalized Markup Language (SGML) of ISO  XHTML concerned primary with content rather than presentation and style 
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Creating XHTML Documents Essentials for.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Web Development & Design Foundations with XHTML Chapter 2 HTML/XHTML Basics.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Creating and Editing a Web Page
Basic HTML Programming Technology Education Ellsworth Community Middle School Communication Systems.
XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
Creating and Editing a Web Page Using Inline Styles
XP 2 HTML Tutorial 1: Developing a Basic Web Page.
XP 1 HTML Tutorial 1: Developing a Basic Web Page.
1 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph.
Creating Web Pages with Links, Images, and Embedded Style Sheets
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.
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 Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Marking Up with XHTML Tags describe how a web page should look
Introduction to XHTML.
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Creating and Editing a Web Page
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Presentation transcript:

HTML Hypertext Markup Language –First proposed by CERN in 1989 –It is non-linear so it allows you to jump from place to place –Markup refers to the structure of the language so you can identify what is going on Source code example W3C – new governing body that regulates HTML coding –W3 consortiumW3 consortium

HTML as a Markup Language A markup language is a structured language that lets you identify common sections of a document such as headings, paragraphs, and lists An HTML file includes text and HTML markup elements The browser interprets the HTML markup elements and displays the results, hiding the actual markup tags from the user

XML: An Open Standard XML is the Extensible Markup Language XML is a meta-language; not a language itself, but a language that lets you describe other languages XML describes data, not presentation XML allows better access to data XML lends itself to customized information

XML Syntax Rules Documents must be well-formed Elements must nest correctly XML is case-sensitive End tags are required Empty elements are signified by a closing slash Attribute values must be quoted

XHTML: The Future of HTML XHTML is a reformulation of HTML 4.01 in XML Brings data-handling benefits of XML to HTML Style sheets are required Stricter syntax rules

HTML Limitations HTML (HyperText Markup Language) is a very general language designed to place information on web pages. It is not a word processing or desktop publishing tool. The sooner you come to grips with this fact, the faster you will become an effective webdesigner. Here's why: –No two browsers show a page quite the same way. –Even if everyone were to use the same browser, not everyone would have the same resolution as you. –It really never was intended to be as specific as a word processor, and its fundamental structure reflects this. –Nobody owns the web. Therefore, standards are rather difficult to enforce.

File Names and URLs Names –Front door URL –Page names Case Sensitivity Character Exceptions that you CANNOT USE –/,/,&,*,, and blank spaces File Extensions –.htm –.html –.asp –.xls –.gif –.jpg

Complete URLs and Directory Structure Versus gba576.asp Relative versus absolute paths

Web Page Elements Title Bookmarks Body Background Normal text Paragraph Bulleted list Headings Images Horizontal Rules Image map Hotspot Animated images Hyperlinks

Web Page Elements title heading body image paragraph horizontal rule links animated image bulleted list

Entering HTML Tags and Text Four tags define the overall structure of standard Web pages: – and Indicates file is an HTML document – and Introduction to the rest of the file Indicates the area where the title will be placed – and Indicates the title that will display in the title bar – and Indicates the boundaries of the Web page

HTML Tags and Functions

Entering Initial HTML Tags initial tags insertion point It is good form to be consistent when you type tags, adhering to a standard practice

Entering Initial HTML Tags ending BODY and HTML tags all Web page content will be placed here If you notice an error in the text, use the BACKSPACE key to erase all the characters back to and including the one that is incorrect

Headings Used to separate text and introduce new topics Vary in size, from through Use the same sized heading for the same level of topic

Paragraphs Most text on Web pages is in paragraph format The tag has an optional ending tag When a browser finds a tag, it starts a new line and adds a paragraph break Try not to type large sections of text without having paragraph breaks

Creating a List Lists structure your text in outline format –Unordered (bulleted) lists and marks the beginning and end of unordered lists –Ordered (numbered) lists and marks the beginning and end of ordered lists The and tags define list items The TYPE attribute defines the default bullet or number type

Unordered Lists First item – type disc Second item – type disc First item – type square Second item – type square First item – type circle Second item – type circle

Ordered Lists First item – type 1 Second item – type 1 First item – type A Second item – type A First item – type a Second item – type a First item – type I Second item – type I First item – type i Second item – type i

Creating a Bulleted List bulleted list tags and text

Saving the HTML File You must save the file before you can view it in your browser HTML files must end with an extension of.htm or.html.html extensions only work on Web servers running an operating system that supports long filenames

Your Browser maximize button standard buttons toolbar status bar default startup page address bar menu bar Internet Explorer Window

Your Web Page title body of Web page main heading H2 heading bulleted list paragraph

Adding Background Color Locate the 6-character code of the color you wish to use

Adding Background Color Background color code goes at the end of the BODY tag

Centering the Heading Text can be aligned differently on the page –ALIGN = “LEFT” –ALIGN = “RIGHT” –ALIGN = “CENTER” The default alignment for headings is left- alignment

Centering the Heading center-alignment code

Adding a Horizontal Rule Horizontal Rules are graphical images that act as dividers The tag used to insert a Horizontal Rule is Horizontal Rules are easy to insert

Adding a Horizontal Rule Horizontal Rules are graphical images that act as dividers The tag used to insert a Horizontal Rule is Horizontal Rules are easy to insert

Adding a Horizontal Rule Horizontal Rules Default HR HR with size=1 HR with size=5 HR with size=10 HR with size=10 and noshade

Adding a Horizontal Rule horizontal rule tag

Viewing the Modified File in Your Browser after saving the modified file, click the Refresh button in your browser

Viewing Your Web Page Source You can view the HTML code on any Web page from within your browser This allows you to see how others created their Web pages

Definition Lists Used to list information without the standard bullet or numbered list symbols Syntax is not as straightforward as,, or and start and end the list and are used to create the actual list elements, terms, and definitions

Definition Lists

definition list start definition list end definition term start definition start

definition termsdefinitions

Summary Identify elements of a Web Page Enter the,,, and tags Enter a paragraph of text, a bulleted list, and HTML tags Save an HTML file