© 2004, Robert K. Moniot Chapter 4 Introduction to HTML.

Slides:



Advertisements
Similar presentations
HTML popo.
Advertisements

Web Development & Design Foundations with XHTML
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
WeB application development
C HAPTER – 3 I NTRODUCTION TO H TML By :- Pinkesh H. Patel.
HTML popo.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.
© 2010, Robert K. Moniot Chapter 4 Introduction to XHTML 1.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
Marking Up With Html: A Hypertext Markup Language Primer
HTML Introduction HTML
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML Introduction DSC340 Mike Pangburn. What is HTML?  HTML: Hyper Text Markup Language  The predominant markup language for web-page design.  A markup.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
1 What is the Internet?  a network of networks – an inter-network, or Internet What are Internet protocols?  the rules for transferring information between.
ULI101: XHTML Basics (Part III) Introduction to XHTML / Continued … Block-Level vs. Inline Elements (tags) Manipulating Text,  , Text Characteristics,,,,,,,,,,,,,,,
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Chapter 16 The World Wide Web Chapter Goals ( ) Compare and contrast the Internet and the World Wide Web Describe general Web processing.
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
 2002 Prentice Hall, Inc. All rights reserved.2 Chapter 2 — Introduction to HyperText Markup Language 4: Part I Outline 2.1Introduction 2.2Markup Languages.
Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.
Introduction to HTML. HTML Hyper-Text Markup Language: the foundation of the World-Wide Web Design goals:  Platform independence: pages can be viewed.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
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.
1 Introduction to HTML Joshua S. Simon Collective Technologies.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
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.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.
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,
Chapter 8 Introduction to HTML and Applets Fundamentals of Java.
Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
1 John Magee 9 November 2012 CS120 Lecture 17: The World Wide Web and HTML Web Publishing.
HTML: Hyptertext Markup Language Doman’s Sections.
Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
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.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”
1 2/21/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Lists, Fonts, Links, and Preformatted Text.
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
Introduction to HTML Dave Edsall IAGenWeb County Coordinator’s Conference June 30, 2007.
01 – HTML (1) Informatics Department Parahyangan Catholic University.
NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.
© 2010, Robert K. Moniot1 Basic HTML An Introduction.
Introduction to HTML.
Introduction to XHTML.
Computers and Scientific Thinking David Reed, Creighton University
Chapter 16 The World Wide Web.
Presentation transcript:

© 2004, Robert K. Moniot Chapter 4 Introduction to HTML

© 2004, Robert K. Moniot HTML Hyper-Text Markup Language: the foundation of the World-Wide Web Design goals: –Platform independence: pages can be viewed using a variety of different computers and browsers. –Universality: servers can store information in their own data formats, but convert it to HTML for access by browsers. –Convenient linking from one page to another (hypertext). –HTML conveys the structure of the document, not its precise appearance. Openness (not proprietary) was key to the adoption of HTML and growth of the Web

© 2004, Robert K. Moniot Basic form of HTML An HTML document is all plain text (no binary formatting codes). The contents can be divided into two categories: –Content: material which the user sees when visiting the page –Meta-information: information about the document: its structure, formatting, etc. Meta-information is distinguished from content by using tags. A tag is a tag-name enclosed in angle brackets. Tags usually come in pairs: an opening tag and a closing tag, which is the same tag-name preceded by a slash. Content affected by tag

© 2004, Robert K. Moniot Nesting of tags Opening and closing tags define regions affected by the tags. These regions must nest, not overlap. Yes: Some text more text and more. No: Some text more text and more.

© 2004, Robert K. Moniot Rules about Tags Not all tags need closing tag –For some tags, a closing tag is optional: paragraph. Implies closing of previous paragraph tag. –For some tags, a closing tag is never used: line break. Marks a location, not a region. Tag names are case-insensitive and and are all equivalent Unknown tags are ignored. This rule allows new tags to be introduced without causing problems for older browsers. But it also means you need to be careful to spell tag names correctly!

© 2004, Robert K. Moniot Tags with attributes Some tags can be qualified by attributes that provide needed additional information or change the default properties of the tag. Attributes are specified within the angle brackets following the opening tag name. (Attributes are never listed in a closing tag.) Content text

© 2004, Robert K. Moniot Tags for Document Structure Some tags specify the overall structure of the document... encloses the entire document... encloses the head portion of the document. Everything in the head portion is meta-information, not content.... encloses the body portion of the document. The body portion contains the document's content. Example 1Example 1 (ignore the other tags for now)

© 2004, Robert K. Moniot Tags for Document Head Document title - Specifies the title that appears in the title-bar of the browser (not in the content area). This tag is optional but should always be included to assist the user in navigating the browser's history list. - Specifies keywords to assist indexing of the page by search engines. Other head tags will be discussed later.

© 2004, Robert K. Moniot Tags for Document Body Heading tags Main heading - Formats the enclosed text as a prominent large, bold heading. Sub-heading - Formats the enclosed text as a large, bold heading but not as prominent as for. Sub-sub heading - Formats the enclosed text as an even less prominent heading.... (levels 4 and 5 of decreasing prominence) Minor heading - Formats the enclosed text as a minor heading, only slightly more prominent than ordinary text. Example 1

© 2004, Robert K. Moniot Tags for Style Explicit style tags Boldfaced text Italicized text Underlined text Typewriter-font text Logical style tags Prominent text - usually bold Emphasized text - usually italics Cited text - usually italicized Computer code - usually in typewriter font Example 2

© 2004, Robert K. Moniot Tags for Style The tag. –In the early days of web design, this tag was introduced to allow the web programmer to control the font family, typeface, color, etc. –This tag is now deprecated. Style sheets provide much better control over style and compatibility. However, many web pages still use this tag for simple effects such as text size and color. Example: Large, red text

© 2004, Robert K. Moniot Special characters Some characters such as angle brackets are reserved for special meanings in HTML. Others are not available on many keyboards. These characters can be put into content using codes between ampersand and semicolon: < - the less-than symbol < (left angle bracket) > - the greater-than symbol > (right angle bracket) & - the ampersand sign & © - the copyright symbol © Many more are defined. Note that unlike tags, these codes are case-sensitive.

© 2004, Robert K. Moniot Organizational Tags Paragraphs and Layout - start of a new paragraph. The closing tag is optional but recommended, especially if the tag contains attributes. - line break. Use this where the extra line spacing of a paragraph tag is not desirable, as in an address. Never takes a closing tag. Centered text - changes the justification of the enclosed text (normally left-justified) to centered. Quoted text - for large blocks of quoted material. Preformatted text - use this to present a block of text exactly as typed in the document, for instance to show an interactive session with a computer. Example 3

© 2004, Robert K. Moniot Hypertext Links Hypertext links connect one document to another. A link has two components: the link text, which the user sees to click on, and the link target, which is the location to which the browser is directed when the link is clicked. Form of a hypertext link: link text

© 2004, Robert K. Moniot Hypertext Links The link target, or href (hypertext reference) is in the form of a URL: Uniform Resource Locator. A URL has 3 components, not all of which need to be supplied in every reference: –A protocol –An Internet address (either name or IP number) –A file path Example:

© 2004, Robert K. Moniot URL protocol The protocol portion of a URL specifies the way that the web browser will interact with the server to obtain the resource. Protocols supported by most browsers include: http - Hypertext Transport Protocol (the default) https - Secure HTTP (used to exchange confidential information such as credit card numbers) ftp - File Transfer Protocol, used on some servers that host downloadable materials file - for URLs that are files on the same computer where the browser is running

© 2004, Robert K. Moniot URL address The Internet address portion of a URL can be either a name, e.g. or a number, e.g www.fordham.edu If omitted, the address of the URL in the href is taken to be the same as the address in the URL of the document containing the link. Thus if the address is omitted from a link in a web page, the link refers to a document on the same server that served that page. A URL without an address portion can be either absolute or relative, as explained next.

© 2004, Robert K. Moniot URL file path The file path portion of a URL optionally specifies the chain of directories (folders) in which the document is located, and the name of the file itself. The directory names in the chain are separated by slash characters. If the file name portion of the path is omitted, then it defaults to a value that is defined by the server, typically index.html. Example: the URL lacks a file name, and so it might be equivalent to

© 2004, Robert K. Moniot Relative URLs If a URL omits the Internet address portion, then the file path portion can be either relative or absolute. An absolute file path begins with a slash; a relative one does not. In both cases, the Internet address portion is supplied by that of the referencing document. For a relative reference, the chain of directories is also supplied by that of the referencing document. Absolute link Relative link

© 2004, Robert K. Moniot Relative URLs A relative file path can also specify directories. In this case the chain starts in the same directory as the referencing page. Use../ to indicate the parent directory. Link referencing a file in a subdirectory of the current page's directory Relative link Link referencing a file in a sibling directory of the current page's directory Relative link

© 2004, Robert K. Moniot Absolute URLs In an absolute file path, the chain of directories starts at the top of the “URL space” of the server. Absolute link referencing a file in the shopping directory of the top level of the web server containing the referencing page Absolute link Absolute link referencing the top-level home page of a specified server Absolute link

© 2004, Robert K. Moniot Images Use the tag to include an image in a page. This tag allows some attributes that specify the size of the image, and alternative text that can be used in place of the image. The tag must include a src attribute specifying a URL that gives the location of the image. Example: <img src="myface.jpg" height="256" width="300" alt="Picture of me">

© 2004, Robert K. Moniot Images The image size specification via length and width attributes of the tag can be used to resize the image, but this is not recommended. Rather, the best use of these attributes is to tell the browser how big the image is, so that it can allow the right amount of space in the rendering of the page before it has downloaded the image. The alternative text given by alt can be displayed by the browser while the image is loading or by browsers that suppress images. Some browsers will pop up a balloon with this text when the mouse hovers over the image. This text can also be read aloud by browsers designed for the blind.

© 2004, Robert K. Moniot Lists List types: – - Ordered list: each item is numbered. Use the type attribute to obtain letters or roman numerals: the value of the attribute is simply what the item label should look like. Possibilities for type are 1, a, A, i, I – - Unordered list: each item is marked with a bullet. – - Definition list: the head of each item is a word or phrase, and the rest is a description. For and, list items are started by (closing tag optional). For, the head word is marked by and the description by (closing tags optional). Example 4

© 2004, Robert K. Moniot Other HTML tags Superscripts and subscripts: enclose text in... or... tags. Horizontal rule (line): use. It always appears on a line by itself. This tag takes an optional attribute width such as to control how far across the page it extends. Strikethrough text: enclose in... tags. Comments: these consist of any text enclosed within. Their purpose is to enlighten the web programmer reading the HTML. They do not appear in the rendered page. Example 5