Chapter 6 Marking Up With (X)HTML: A Hypertext Markup Language Primer

Slides:



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

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.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
HTML/XML XHTML Authoring. Creating Tables  Table: An arrangement of horizontal rows and vertical columns. The intersection of a row and a column is called.
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.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
 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.
 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.
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.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
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 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.
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
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 - Πληροφορική Δρ.Βάσος Βασιλείου.
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
HTML (HyperText Markup Language)
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 H yper T ext M arkup L anguage. HTML HTML is NOT case sensitive However, proper coding etiquette if for all to be in ALL CAPS and for text to be.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Introduction to Computers CS Dr. Zhizhang Shen Chapter 4: Talking.
Website Development with Dreamweaver
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.
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.
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
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.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley A Hypertext Markup Language Primer Marking Up with HTML lawrence snyder c.
Copyright © 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley What did we learn so far? 1.Computer hardware and software 2.Computer block.
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.
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.
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.
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.
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.
1 Week 3 XTML, Expression Web, WinSCP, & Mini-Project (MP1) Advanced Web Development IT225 Spring Term 2016 Marymount University School of Business Administration.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
HTML Basics.
Marking Up with XHTML Tags describe how a web page should look
Aside on Conversions  . Aside on Conversions  
With Microsoft FrontPage 2000
Chapter 1: Introduction to XHTML (part 1)
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- Basics
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:

Chapter 6 Marking Up With (X)HTML: A Hypertext Markup Language Primer HTML is HyperText Markup Language XHTML is EXtensible Hypertext Markup Language Notation (encoding) for specifying Web page content and formatting Know the meaning of and use hypertext terms Use HTML tags to structure a document Use HTML tag attributes Use HTML tags to link to other files Explain the differences between absolute and relative pathnames Use Cascading Style Sheets to style a Web page Use HTML to encode lists and tables

Web Pages Web pages are created, stored, and sent in encoded form A browser converts them to what we see on the screen Hypertext Markup Language (HTML) is the main language used to define how a Web page should look Features like background color, font, and layout are specified in HTML

Marking Up with (X)HTML Tags describe the parts of a web page and how it should look Formatting with Tags: Words or abbreviations enclosed in angle brackets < > Typically come in pairs (beginning and end): <title> </title> HTML Tags not case-sensitive, XHTML tags are The actual text between tags displays used case Remember: View-->Source or Page Source

HTML ELEMENTS <title> is an example of a start or open tag </title> is an example of an end or close tag The first “word” or token in between the brackets is usually called an element. Elements define the tag – that is they indicate the basic purpose of the tag. Elements can be followed by attributes. Attributes specify various details or properties of the tag – they change the effect or display of the tag and its contents. Note that attributes go in the start or open tags, not the close tags!

Basic (X)HTML Web Page File Four Required Structural tags and comments: <html xmlns=“http://www.w3.org/1999/xhtml” > <head> <!--preliminary & other material goes here, including the --> <title>Page Title Goes Here</title> </head> <body> <!-- main visible content of the page goes here --> </body> </html> Note: comment tags. So a 5th required tag. Note all closely

Gather Your Tools For making Web pages you need 2 tools: Web browser (like IE, Safari, or FireFox) Simple text editor (like TextPad or NotePad) We will write (X)HTML as plain ASCII text (not in Word or other word-processor!) Make a file with the basic (X)HTML Web page source shown previously. Test it! Save this text in a file named something like “SkeletonPage.html” This basic page is a template, or a model: you can use it to start future web pages. Macintosh: TextEdit or TextWrangler Windows option: Notepad ++ You must use a text editor to write HTML Text editors do not include this extra information, browsers like their files! Browsers want Web pages written in ASCII characters only Think of ASCII as the normal keyboard characters with “nothing strange” Text editors figure out what language you are writing in and color code your HTML to make it easier to read Book prefers FireFox, Iona standard on IE – test with both! Firefox is a free open source browser Open source means that the program code is publicly available, and any programmer can contribute improvements to it Firefox is the browser referenced throughout this book It is available at www.mozilla.com/en-US/firefox/all.html

Growing Good XHTML How to get your (X)HTML source files written correctly (good syntax) and well (good style)? The slow-n-steady construction strategy: Start with a good, working page (like the template we saved), add tags and content in small amounts, then save and test (check in a browser) early and often. Compose-and-Check. Error? Check recent changes. Use Editor and Browser: Save, Check, Repeat. Use <!– Comments --> liberally! Online Validation Service (currently optional)

Tags for Bold and Italic Bold: <b> </b> Italic: <i> </i> Tag pair surrounds the text to be formatted You can apply more than one kind of formatting at a time <b><i>Veni, Vidi, Vici!</i></b> produces: Veni, Vidi, Vici! Tags can be in any order, but have to be nested correctly Some tags do not surround anything. In HTML they may work without a separate closing tag. XHTML self-closes. <hr> inserts horizontal line Use XHTML version: <hr /> <br> inserts a line break Use XHTML version: <br />

Singleton Tags A few tags are not paired They do not have a matching ending tag For those tags, the closing angle bracket > of the singleton tag is replaced by /> Examples: <hr /> produces a horizontal line <br /> “breaks” the text to the next line Many more tags: book, labs, lookup online. www.w3schools.com/tags/default.asp

Structuring Documents Markup language describes how a document's parts fit together Headings (look and meaning): Choice of six levels of heading tags to produce headings, subheadings, etc. (A hierarchy!) Headings display material in a large font on a new line. (X) HTML like the following: <h1>Pope</h1><h2>Cardinal</h2><h3>Archbishop</h3> produces: (A hierarchy!) Pope Cardinal Archbishop

(X)HTML Code vs. Display Format (X)HTML text was run together on one line, but displayed formatted on separate lines (X)HTML source tells the browser how to produce the formatted page based on the meaning of the tags, not on how the source code looks But (X)HTML should still be written in a structured (indented) way to make it easier for people to read, understand, and edit. Use spacing and indenting. <h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>

White Space Space that has been inserted for readability Tabs New lines ([Return], [Enter] key, etc.) Browser turns any sequence of white space characters into a single space before processing the (X)HTML source Exception: Preformatted information between <pre> and </pre> tags is displayed as it appears in the source

Brackets in (X)HTML: Escape Symbol What if our web page needed to show a math relationship like 0 < p > r The browser would interpret < p > as a paragraph tag, and would not display it To show angle brackets, use escape symbol — ampersand (&) — then an abbreviation (or numeric code), then a semicolon (;) < displays as <

Special Characters < < > > & & < < > > & &   (non-breaking space) &mdash – (em dash) and many more. Full list at: http://www.w3.org/TR/REC-html40/sgml/entities.html

Accent Marks in (X)HTML Letters with accent marks use the escape symbol as well. Case matters! Ampersand, then letter, then the name of the accent mark (or code), then a semicolon: é displays as é ñ displays as ñ Full list at http://www.w3.org/TR/REC-html40/sgml/entities.html

Example Accent Marks in (X)HTML

Putting it All Together With just these few tags we can make an interesting Web page (see following slide) Title is shown in the browser title bar Russell’s paradox is in bold face In the (X)HTML source, paragraphs are indented more than <h2> headers for readability Horizontal line between the two paragraphs spans the width of the browser window An acute accent appears in Magritte’s first name French phrase is in italics, as is the word picture

Attributes in (X)HTML Properties such as text alignment require more information than so far given. For example: Justification, can specify left, right, or center Attributes appear inside the angle brackets of a start tag (after the element word), followed by an equal sign, and a value in double quotes: <p align="center"> (default justification is left) Another example: Horizontal rule attributes width and size (thickness) can be specified or left to default: <hr width="50%" size="3" />

Marking Links With Anchor Tags There are two sides of a hyperlink: Anchor text (the text in the current document that is highlighted. What you click.) Hyperlink reference (the location, address or URL of the other Web page) Begin with <a followed by a space Give the link reference using href="filename" Close the start anchor tag with > Then type the text to be displayed for this link End the hyperlink with </a> tag

Anchor Tags: Path to files Absolute pathnames: Reference pages at other web sites using complete URLs: http://server/directory_path/filename Relative pathnames: Reference pages stored in same directory (then only the name of the file), or in the local directory structure. Relative pathnames are more flexible: we can move web files around as a group Relative pathnames can specify a path deeper or higher in the directory structure: In these anchor tags, the hyperlink reference is an entire URL The Web browser needs to know how/where to find the page A URL is made from: a protocol specification, http:// a domain or IP address, www.bioz.com a path to the file, /bios/sci/russell.html

File directories and relative pathnames If we are at file bios/sci/russell.html then the source file for Magritte can be designated with the relative path : ../../art/magritte.html ./subdir/filename ../subdir/filename . Current directory . . Parent directory More Details During Lab! Going “Deeper” in a Folder When the file containing the anchor and the referenced file are in the same folder—we just give the file name <a href="russellbio.html">Russell</a> When the referenced file is “deeper” in the directory, we simply give the path from the current folder down to the file <a href="biographies/russellbio.html">Russell</a> Going “Higher” in a Hierarchy But, what about moving higher up in the hierarchy This is a UNIX operating system technique Navigating up to another folder: add ../ to the beginning of the href attribute <a href /biographies/russellbio.htm ”> Russell </a> Each ../ moves up one level higher in the hierarchy

Including Pictures With Image Tags Image Tag Format: <img src="filename" alt= "description" /> src stands for source. -- alt is alternate text Absolute and relative pathname rules apply alt value specifies an alternate text description GIF and JPEG Images GIF: Graphic Interchange Format JPEG: Joint Photographic Experts Group PNG: Portable Network Graphics Tell browser which format image is in using filename extension (.gif, .jpg or .jpeg, .png) The alt tag was introduced to assist persons who are visually impaired Screen readers don’t know what the image is, but they can read the description of the alt tag HTML requires alt tags When an image is not available or loads slow, browsers display the alt information GIF (pronounced is jif ) (Graphics Interchange Format) best suited for cartoons and simple drawings JPEG (pronounced JAY·peg) Joint Photographic Experts Group appropriate for high-resolution photographs and complex artwork PNG are newer forms of GIF and can also be used on Web pages PNG stands for Portable Network Graphics format To tell the browser which format the image is in, the file name should include one of these extensions: .gif, .png, .jpg, or .jpeg Pronunciation The creators of the format pronounced GIF with a soft "G" /ˈdʒɪf/ as in "gin". An alternative pronunciation uses a hard "G" /ˈɡɪf/ as in "graphics", reflecting the expanded acronym. Both pronunciations are given as correct by the Oxford English Dictionary[2] and the American Heritage Dictionary.[3] According to Steve Wilhite, the creator of the GIF format, the original pronunciation deliberately echoes the American peanut butter brand, Jif, and the employees of CompuServe would often say "Choosy developers choose GIF", spoofing this brand's television commercials.[4] This pronunciation was also identified by CompuServe in their documentation of a graphics display program called CompuShow.[4]

“Clickable” Pictures Pictures can be used as links by combining the <img> tag with an anchor tag <a href="fullsize.jpg"> <img src="thumbnail.jpg" /> </a> Here, the <img …> picture becomes the clickable “hot spot” for the anchor tag (instead of 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”

Attributes for Image Tags The displayed image size can be adjusted (despite the actual size of the raw image) <img src=“puffer.jpg” width=“200” height=“200” /> Will make an image 200 x 200 pixels, even if the file “puffer.jpg” is 2400 x 2400 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. (Algebra! Or test and check.) However, the Browser will do as told, even to the point of distorting images. Some more examples: <img src=“puffer.jpg” width=“200” height=“100” /> <img src=“puffer.jpg” width=“100” height=“200” /> Attributes An additional specification included inside a tag The abbreviations href, src, and alt are attributes Attributes have the form name="value“ the name, such as href, is the attribute the text in quotes, such as, biographies/russellbio.html, is the value Values are always enclosed in quotes

Browser will do as told, even to the point of distorting images (original is 2400x2400 square):

Positioning an Image in the Document Text is laid out from left to right, top to bottom By default, images are inserted at the point in the text layout where the <img> tag is specified in the HTML, and the text lines up with the bottom of the image In (X)HTML to make text flow around an image, use the style attribute in the <img> tag, with the value “float:left” or “float:right” (Compare with WP) HTML : Align attribute can line up image with top of line of text, middle, or bottom. Align left, center, or right attribute puts the image on the side of the browser window, and text flows around it. To put image on separate line, enclose it within <p> … </p> paragraph tags

Style Attribute Perhaps the most useful attribute, controls long list of properties about the look of a Web page Place style= inside the tag for content to modify <span> … </span> tags can be used to apply styles where no other tag is appropriate. Style is one attribute, its value (in quotes) can have many properties in a list (semi-colon separated) <body style=“background-color: black; color: green”> sets page back color, and text color for the entire body <h1 style=“text-align: center; color: yellow; font-family: arial”> affects the h1 header only, sets font, color, justification The value of the style has a standard form: style = "property_name : specification”

Handling Color (HTML) Color is used for both background and text NOTE: Purple is a tricky choice for background color - visited links may then be hidden! bgcolor attribute (deprecated) of body tag gives solid background color. Use style. Use hexadecimal color numbers or Use predefined color terms color attribute can be used with body text, link, or font tags. Better – use style attribute. http://en.wikipedia.org/wiki/HTML_colors

Applying Style to Improve our Page Add links with (local) path names to local bios Special background and text colors Color change on the “This sentence is false” text New color styling for the headings The horizontal line has been shortened to 75 percent of the browser window width, centered Added an image, put it to the right side, and flowed text around it to the left Advanced style: Use Cascading Style Sheets To be covered if there is time. See book, online, CS Web courses and Minor Page 181 for example. Cascading Style Sheets, a general system for styling Web documents.

Handling Lists Unnumbered (bulleted) list: Ordered (numbered) list: <ul> and </ul> tags begin and end the list <li> and </li> tags begin and end the items within the list Ordered (numbered) list: <ol> and </ol> tags begin and end the list Uses the same <li> tag Sublists: Insert lists within lists (between <li> </li> tags) Definitional list: <dl> and </dl> tags begin and end the list <dt> and </dt> surround the terms to be defined <dd> and </dd> surround the definitions

Handling Tables Table begins and ends with <table> and </table> tags. Has a border attribute. A “2-dimensional” list Rows are enclosed in table row tags, <tr> and </tr> Cells of each row are surrounded by table data tags, <td> and </td>. The browser aligns cells to form columns. Create a caption centered at the top of the table with <caption> and </caption> tags Column headings are created as first row of table by using <th> and </th> tags instead of table data tags

How Is Information Organized? Hierarchical classification. Intuitive (?) Example: Family Tree Information is grouped into a small number of categories, each of which is easily described (top-level classification) Information in each category is divided into subcategories (second-level classifications), then third-level classifications, and so on Eventually the classifications become small enough for you to look through the whole category to find the information you need

Design of Hierarchies General rules for design and terminology of hierarchies: Root is usually at the top "Going up in the hierarchy" means classifications becomes more inclusive or general "Going down in the hierarchy" means the classifications become more specific The greater-than (>) symbol is a common way to show going down through levels of classification. Straight lines used in diagrams. Example Path: Home > Music > Browse Artists > C > Cave Singers

Levels in a Hierarchy A one-level hierarchy has only one level of "branching"—no subdirectories To count levels, remember There is always a root There are always "leaves"— the items themselves The root and leaves usually do not count as levels Groupings may overlap (one item can appear in more than one category), or be partitioned (every category appears only once) Number of levels may differ by category, even in the same hierarchical tree

How Are Web Sites Organized? Homepage is the top-level classification for the whole Web site (index.html) Can a web site have multiple home pages? Classifications are the roots of hierarchies that organize large volumes of similar types of information Topic clusters are sets of related links (for example: navigation links) Single links connect to very specialized pages