Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley A Hypertext Markup Language Primer Marking Up with HTML lawrence snyder c.

Slides:



Advertisements
Similar presentations
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Advertisements

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.
Chapter 4 A Hypertext Markup Language Primer. Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Learning Objectives Know the.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
1 HTML Markup language – coded text is converted into formatted text by a web browser. Big chart on pg. 16—39. Tags usually come in pairs like – data Some.
Chapter 4_2 Marking Up With Html: A Hypertext Markup Language Primer.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Creating Web Pages Getting Started. Overview What Web Pages Are How Web Pages are Formatted Putting Graphics on Web Pages How Web Pages are Linked Linking.
Marking Up With Html: A Hypertext Markup Language Primer
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
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 14 Introduction to HTML
© 2005 ComputerPREP, Inc. All rights reserved. HTML 4.0 and Web Page Design Module I.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
HTML Introduction DSC340 Mike Pangburn. What is HTML?  HTML: Hyper Text Markup Language  The predominant markup language for web-page design.  A markup.
Chapter 6 Marking Up With (X)HTML: A Hypertext Markup Language Primer
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.
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley A Hypertext Markup Language Primer Marking Up with HTML lawrence snyder c.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
Spring 2013 CS 103 Computer Science – Business Problems Lecture 7: A Hypertext Markup Language (HTML) continue Instructor: Zhe He Department of Computer.
CO1552 – Web Application Development Lists, Special Characters, and Tables.
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.
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.
ITCS373: Internet Technology HTML
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.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Understanding HTML Code
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Introduction to Computers CS Dr. Zhizhang Shen Chapter 4: Talking.
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.
Chapter 4 (through page 110) Fluency with Information Technology 4 th edition by Lawrence Snyder (slides by Deborah Woodall : 1.
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.
HTML, Part Showing Pictures: The Image Tags Image Tag Format –src short for source –alt for text –Can use absolute or relative pathname.
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Relative Pathnames Often links refer to other Web pages on the same site.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
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.
HTML: Hyptertext Markup Language Doman’s Sections.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
CP102 Module 7: HTML 1 Module 7: HTML 1.What is 1.What is HTML? 2. 2.Basic syntax, document structure 3. 3.Basic formatting, images, links 4. 4.Lists,
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley What did we learn so far? 1.Computer hardware and software 2.Computer block.
Chapter 2 Designing Web Pages With HTML JavaMethods An Introduction to Object-Oriented Programming Maria Litvin Gary Litvin Copyright © 2003 by Maria Litvin,
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.
CSE 409 – Advanced Internet Technology 1 DISCUSSION OF BASIC HTML TAGS.
HTML Primer. A very good set of tutorials and references for HTML “Try it” feature lets you type in HTML.
2.1 XHTML. Motto High thoughts must have high language. –Aristophanes.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML Chapter 4 Source: CSE 190 M (Web Programming) lecture notes, es/slides/lecture02-basic_xhtml.html.
Basic HTML. So, what exactly is HTML? HTML stands for: HTML stands for: Hypertext Markup Language. It is a purpose built markup language for the delivery.
HyperText Markup Language. Web Hosting Creating a web site (on a site like iPage) –Buy domain name ( –iPage has registrar (e.g., FastDomain.
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley What did we learn so far? 1.Computer hardware and software 2.Computer experience.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
HTML Hyper Text Markup Language. What is HTML HTML stands for the Hyper Text Markup Language. HTML stands for the Hyper Text Markup Language. HTML is.
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Showing Pictures: The Image Tags
Marking Up with XHTML Tags describe how a web page should look
Aside on Conversions  . Aside on Conversions  
Marking Up with XHTML Tags describe how a web page should look
Marking Up with XHTML Tags describe how a web page should look
Introduction to HTML.
Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer
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:

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley A Hypertext Markup Language Primer Marking Up with HTML lawrence snyder c h a p t e r 4

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-2 Marking Up with XHTML XHTML is Extensible Hypertext Markup Language –Notation for specifying Web page content and formatting Hidden tags describe how words on a page should look –Called the “mark up”, gives font, size, color, bold, indenting, etc. Formatting with Tags: –Words or abbreviations enclosed in angle brackets –Come in pairs (beginning and end): –Tags are not case-sensitive, but the actual text between tags is

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-3 Tags for Bold, Italic, and Underline Bold: Italic: Underline: –Tag pair surrounds the text to be formatted You can apply more than one kind of formatting at a time Veni, Vidi, Vici! produces: Veni, Vidi, Vici! –Tags can be in any order, but have to be nested correctly Some tags do not surround anything, so they don't have an ending form. Closing angle bracket is replaced by /> – inserts a horizontal rule (line) – inserts a line break

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-4

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-5 A Basic XHTML Web Page Begins with and ends with Starter Page Hello, World!

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-6 Gather Your Tools For making Web pages you need two tools –Web browser (like FireFox) –Simple text editor (like NotePad) We will write XHTML as plain ASCII text (not in Word or some document processor that adds information to the content) Now use the text editor to make a file containing the basic XHTML Web page source (shown previously, you can cut and paste, or type it)

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-7 Displaying the XHTML Source File Save this text in a file named something like “starterPage.html” Open your web browser and have it load in the file “starterPage.html” and you will see the basic web page displayed –“.html” file name extension means you can double-click the file and it will open in a browser Save this basic page as a template, or a model –you can use it to start all your future web pages

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley How to see the source code To see the source code of a web page, in the newest Firefox - use Tools, Web Developer, Page Source

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-9 Structuring Documents Markup language describes how a document's parts (paragraphs, headings, etc.) fit together Headings: –Choice of eight levels of heading tags to produce headings, subheadings, etc. –Headings display material in large font on a new line Pope Cardinal Archbishop produces: Pope Cardinal Archbishop

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-10

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-11 XHTML Format vs. Display Format XHTML text was run together on one line, but displayed on separate lines in the browser XHTML source tells the browser how to produce the formatted image based on the meaning of the tags, not on how the XHTML source looks But XHTML is usually written in a structured (indented) form to make it easier to understand Pope Cardinal Archbishop

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-12 White Space Both XHTML heading examples end up formatted the same… how? White space is inserted in XHTML for readability –spaces, tabs, new lines Browser turns any white space sequence in the XHTML source into a single space before processing the mark up tags –Exception: Preformatted information between and tags is displayed as it appears

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-13 Brackets in XHTML: The Escape Symbol What if our web page needed to show a math relationship like 0 r The browser would interpret as a paragraph tag, and would not display it To show angle brackets, use escape symbol ( & ), then an abbreviation, then a semicolon ( ; ) < displays as < > displays as > & displays as & So the XHTML would be 0<p>r

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-14

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-15 (Aside) Growing Good XHTML Before we go further, let’s discuss getting your XHTML source files written correctly (good syntax) and well (good style) The slow-n-steady construction strategy –Start with a good page (like the template we saved), add tags and content in small amounts, then save and test (check it in a browser) early and often Grow the code… don’t try to write a monolith

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-16 Marking Links With Anchor Tags There are two sides of a hyperlink: Anchor text (the highlighted text in the current document… the part you click on) Hyperlink reference (the URL address of a Web page the link “goes to”, the target of the link) Begin with <a followed by a space Give the link reference using href="filename" Close the start anchor tag with > Text to be visibly displayed for this link End anchor tag with

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-17 Examples of Anchor Tags Bertrand Russell displays as Bertrand Russell See the manual please. displays as See the manual please.

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-18 Anchor Tags (cont'd) Absolute pathnames: Reference pages at other web sites using complete URLs FIT Full URL is needed because the page is remote and the web server needs to be told exactly where to find it in the file system

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-19 Anchor Tags (cont'd) Relative pathnames: Reference pages stored in the same directory (give only the name of the file) or in a directory organized near the current Read this file. Relative pathnames are more flexible — we can move web files around as a group Relative pathnames can also specify a path deeper or higher in the directory structure./subdir/filename../subdir/filename. Current directory, then down.. Parent directory (one level up)

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-20 If we are at file bios/sci/russell.html then the source file for Magritte can be designated with relative path../../art/magritte.html The “../../” part say to go up two levels (directories)

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Watch out for misleading tags! good guy.com shows up as good guy.com but when you click on it, takes you to badguy.com ! Look at the source to really know where the link points.

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Be aware of case Some operating systems (like Unix and Linux) care about whether you use upper or lower case letters. If you need a path to a file like " then " will not work!

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-23 Showing Pictures: The Image Tags Image Tag Format: –src short for source –alt gives text to print when image can’t be shown (can be used by assistive tools like audio screen readers too) –Absolute and relative pathname rules apply This tag will cause an image simply to be displayed on the Web page

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-24 “Clickable” Pictures Pictures can be used as links by combining tag with an anchor tag Here, the picture becomes the “hot spot” for the anchor tag (rather than text) –The browser will display the picture “thumbnail.jpg” then allow the user to click on the picture as a link to the file “fullsize.jpg”

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-25 Including Pictures With Image Tags GIF and JPEG Images –GIF: Graphic Interchange Format 8 bits (256 colors or levels of gray) PNG is a newer form –JPEG: Joint Photographic Experts Group 24 bits (millions of colors, compression levels) –Tell browser which format image has using filename extension (.gif,.png,.jpg,.jpeg)

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-26 Attributes in XHTML Properties such as text alignment require more information than we have so far given –For justification, we specify left, right, or center Attributes appear inside the angle brackets of start tag, after tag word, with equal sign, value in double quotes. (default justification is left) Horizontal rule attributes: width and size (thickness) can be specified or left to default

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-27 Attributes for Image Tags Displayed image size can be adjusted (no matter the actual size of the raw image) Will make an image 200x200 pixels, even if the file “puffer.jpg” is 2400x2400 pixels (for example) If you leave out one dimension attribute the browser will display the missing one to match the same proportions as the original image

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-28 Browser will do as told, even to the point of distorting images (original is 2400x2400 square) Attributes for Image Tags

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-29 Handling Lists Unnumbered (bulleted) list: – and tags begin and end the list – and tags begin and end the items within the list Ordered (numbered) list: – and tags begin and end the list –Uses the same tags Sublists: Insert lists within lists (between tags)

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-30 Example (Nested Lists) Hydrogen, H, 1.008, 1 Helium, He, 4.003, 2 good for balloons makes you talk funny Lithium, Li, 6.941, 2 1 Beryllium, Be, 9.012, 2 2 Gets rendered as (browser indents each list some) 1.Hydrogen, H, 1.008, 1 2.Helium, He, 4.003, 2 Good for balloons Makes you talk funny 3.Lithium, Li, 6.941, Beryllium, Be, 9.012, 2 2

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-31 Handling Tables Tables begin, end with … tags Rows enclosed in table row tags, and Cells of each row are surrounded by table data tags, and Create a caption centered at the top of the table with and tags Column headings are created as first row of table by using and tags instead of table data tags

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-32 Example Simple Table A B C Dan Jen Pat Mary Tim Bob Will display as: A B C Dan Jen Pat Mary Tim Bob See text for more complex example, with cell borders

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-33 Controlling Text with Tables Tables can control arrangement of information on a page e.g., a series of links listed across the top of the page could be placed in a one-row table to keep them together –Use no borders, you get alignment and order –If the window is too small to display all the links, table keeps them in a row and a scroll bar is added –If the tags are not in a table, the links will wrap to the next line instead

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-34 Wrap Up: Web Page Authoring You have seen the basics of XHTML There are other Web notations and fancier features but they are all based We have seen that we can write XHTML and CSS files directly, get basic simple pages Most Web content is written indirectly with tools –WYSIWYG interface, allows building complex pages, author sees the layout and page look on the screen –XHTML for the layout is generated automatically

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-35 Summary Web pages are stored and transmitted in an encoded form before a browser turns them into screen images; HTML is the most widely used encoding notation We covered a working set of XHTML tags for creating a basic Web page Links are denoted with anchor tags Pathnames to denote files are either absolute or relative; relative pathnames refer to files deeper or higher (than the file containing the tag) in the directory hierarchy

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-36 Summary The two most common image formatting schemes are GIF and JPEG; we saw how to specify image placement on a Web page We saw tags for designating tables and lists WYSIWYG Web authoring tools are programs that automatically create the XHTML encoding when the Web page has been laid out visually, in a GUI.