Learning Objectives

|
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 5 views
of 41

Please download to get full document.

View again

Description
Learning Objectives. 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
Share
Transcript
Learning Objectives
  • 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 HTMLThe words on a Web page are embellished by hidden formatting <tags> There is XHTML or the Extensible Hypertext Markup LanguageWe use HTMLXHTML tags are also HTML tags, but not vice versaThere are some parts of the original HTML that are not part of XHTMLFormatting with TagsTags are words or abbreviations enclosed in angle brackets, < and >Many tags come in pairsThe second of the pair comes with a slash:<title> Fluency </title>In XHTML, the tags must be lowercase<TITLE>, <Title>, and <tITle> are illegalHTML is not so restrictive!!The tag pair surrounds the text to be formatted like parenthesesFormatting with Tags<title>Serena Williams</title>
  • These tags can be read as “this is where the title starts” and “this is where the title ends”
  • <title> is referred to as the start or open tag
  • </title> is the end or close tag
  • The title appears on the title bar of the browser
  • Tags for Bold and ItalicHTML has tags:for bold text, <b> and </b>for italic text, <i> and </i>for paragraphs, <p> and </p>for underlines, <u> and </u>More than one kind of formatting can be used at a time:<p><b><i>Veni, Vidi, Vici!</i></b></p>producesVeni, Vidi, Vici!Tags for Bold and Italic
  • It doesn’t matter in which order you start the tags: italic follows bold, or bold follows italic
  • You get the same result
  • The rule is to make sure the tags “nest” correctly…they should mirror each other
  • All the tags between a starting tag and its ending tag should be matched
  • Singleton TagsA few tags are not pairedThey do not have a matching ending tagFor those tags, the closing angle bracket > of the singleton tagis replaced by /> in XHTML, not needed in HTMLExamples in HTML:<hr> produces a horizontal line<br> continues the text to the nextThese are <hr /> and <br /> in XHTMLMore Formatting Tags
  • Documents can be formatted in many ways
  • Each formatting feature requires its own tag
  • Programmers and Web designers need to remember a few common tags
  • Uncommon tags can be looked up:for example, at:www.w3schools.com/tags/default.asp
  • Required Tags
  • Every Web page is composed of a headand abody
  • There are three HTML tags required for every Web page:
  • <head> and </head> enclose the head
  • <body> and </body> enclose the body
  • <html> and </html> to enclose those two parts
  • Required Tags<html xmlns=“http://www.w3.org/1999/xhtml”>
  • The text following the letters html:
  • the dialect is XHTML
  • the part inside of the quotes must be written exactly as given
  • Required Tags<head><title>Starter </title>other stuff goes here…that will come later</head>
  • The head section contains the beginning material like the title and other information that applies to the whole page
  • Required Tags<body>the main content of the page goes here</body>
  • The body section contains the content of the page.
  • This <html> <head> <body> form must always be followed
  • All of these tags are required
  • Configure Your Computer for Writing HTML
  • Check that two programs are installed:
  • A browser (check for Firefox)
  • A text editor (Notepad++ for Windows or Text Wrangler for Macs)
  • Both programs are free
  • These programs are preferred for technical reasons
  • FirefoxFirefox is a free open source browserOpen source means that the program code is publicly available, and any programmer can contribute improvements to itFirefox is the browser referenced throughout this bookIt is available at www.mozilla.com/en-US/firefox/all.htmlText Editor
  • A text editor is a basic way to process text
  • Our word processors are called “what-you-see-is-what-you-get” or (WYSIWYG)
  • Word processors include many application-specific information in their files
  • This information confuses browsers
  • Text Editor
  • 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 Editor
  • Text editors figure out what language you are writing in and color code your HTML to make it easier to read
  • Operating systems come with text editors installed.
  • TextEdit can be found on the Mac
  • Notepad comes with Windows
  • TextWrangler and Notepad++ are better choices
  • Hello, World!To produce your first HTML page, follow these instructions:In your text editor, open a New document instance.Carefully type in your text (see next slide)Insert the <title></title> information in the <head> portion of the documentReplace the main content of the page goes here with: <p>Hello, World!</p>Save the file as starterPage.htmlOpen the file with the Firefox browserOpen with Double-Click
  • As HTML is written, files must be opened in two applications:
  • the text editor, to make changes
  • the browser, to see the changes made
  • Double-click on the file to open it with the default application (your browser)
  • Save This Page
  • All HTML files have the same structure as the starterPage.html file just created
  • Use it as a template for future HTML coding
  • Set up a new folder to keep your HTML files in
  • Using your new page as a template ensure that all pages will have the correct form
  • Headings in HTML
  • Documents tend to have headings, subheadings
  • HTML provides several levels of heading tags:
  • <h1> and </h1> level one
  • <h2> and </h2> level two
  • <h6> and </h6> level six
  • Headings display content on a new line
  • headings are bold and get less “strong” (smaller and perhaps not so bold) as the level number increases.HTML Format Versus Display Format
  • HTML source code tells the browser how to produce the formatted page based on the meanings of the tags
  • The source’s form is unimportant
  • HTML is written in a structured format to make it easier for people to understand
  • Indenting is frequently used to emphasize the tags’ meanings
  • White Space
  • Spaces that have been inserted for readability are called white space
  • White space is created with spaces, tabs, and new lines (return or enter)
  • HTML ignores white space
  • The browser turns a sequence of white space characters into a single space
  • White Space
  • The only white space exception is preformattedinformation contained within <pre> and </pre>
  • This information is displayed as it appears
  • The width of a line of text is determined by the width of the browser window
  • A narrower or wider browser window makes the lines break in different places
  • White Space<p> <b>Xeno’s Paradox: </b>Achilles and a turtle were to run a race. Achilles couldrun twice as fast as the turtle. The turtle,being a slower runner,got a 10 meter head start, whereuponAchilles started and ran the 10 meter distance. At thatmoment the turtle was 5 meters farther. When Achilles had runthat distance the turtle had gone another 2.5 meters,and so forth. Paradoxically, the turtle always remainedahead. </p>The Escape Symbol
  • What if the Web page had to show a math relationship: 0<p>r
  • The browser might misinterpret <p> as a paragraph tag
  • Using angle brackets as text is prohibited
  • To show angle brackets, use an escape symbol (&), followed by an abbreviation, followed by a semicolon
  • Accent Marks in HTML
  • Letters with accent marks also use the escape symbol
  • General form is:
  • ampersand, followed by the letter,followed by the name of the accent mark, followed by a semicolon
  • The case of the letter is important!
  • &eacute; displays as é
  • &Egrave; displays as È
  • HTML
  • Notice the following:
  • The title is shown on the title bar of the browser window
  • The statement of Russell’s Paradox is in bold
  • The HTML source paragraphs are indented more than the <h2> heading lines to make them more readable
  • HTML
  • Notice the following:
  • The line between the two paragraphs crosses the width of the browser window
  • An acute accent is used in Magritte’s first name
  • The French phrase from the painting is in italics
  • The word picture is in italics for emphasis
  • Compose and Check
  • Most often Web pages are created all at once—both content and form
  • It is smart to check your typing and your tagging often
  • Assume a page is okay
  • Add a few more tags, then the page is wrong
  • It must be the last tags added that have the error
  • Compose and Check
  • A productive way to work is to keep two windows open:
  • your text editor
  • your browser
  • After writing a few HTML formatting tags, save the file
  • Check the result in the browser by a Reload or Refresh of the source
  • Repeat
  • Markup Validation Service
  • Another way to limit the mistakes you make is to have it automatically validated
  • This service checks to make sure your XHTML is correct
  • If it is wrong, the service tells you where the mistakes are and what’s not proper
  • Add Extra InformationTo benefit from the automatic checking service, you need to add three more lines to the starterPage.htmlThese lines are not required for the file to be a proper XHTML page, but they are needed by the checking serviceBefore the <html . . . > tag, add the lines:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“"http://www.w3.org/TR/html4/loose.dtd">Go to www.w3.org/QA/2002/04/valid-dtd-list.html for exact formatAdd Extra Information
  • The other line that we need to add is<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>between <head> and <title>
  • This code specifies that the character encoding for the Web page will be UTF-8, or Unicode Translation Format for bytes
  • This Unicode representation will be explained in Chapter 7
  • Check My Work
  • With the three lines added, the validation service is ready to be used
  • Normally, validation doesn’t happen until the HTML page is finished and stable
  • During “compose and check,” the validation occurs at a “stopping place”
  • To validate go to the W3C Markup Validation Service at:validator.w3.org/#validate_by_upload
  • Check My Work
  • If a green banner comes back:the NHTML checks out
  • If a red banner comes back, it will have a list of errors with it and an explanation of what’s wrong.
  • It’s common to have a lot of errors at the start
  • Marking Links with Anchor Tags
  • Two Sides of a Link, making hyperlinks
  • When a user clicks a hyperlink, the browser loads a new Web page
  • There are two parts to a hyperlink:
  • the highlighted text in the current document, which is called the anchor text
  • the address of the other Web page,called the hyperlink reference
  • Marking Links with Anchor Tags
  • Both parts of the hyperlink are specified in the anchor tag:
  • Begin with <a and make sure there’s a space after the a but not before it. a is for anchor.
  • Give the hyperlink reference using the href attribute href="filename", making sure to include the double quotes.
  • Close the anchor tag with the > symbol.
  • Give the anchor text, which will be highlighted when it is displayed by the browser.
  • End the hyperlink with the </a> tag.
  • Bertrand RussellAbsolute Pathnames (URLs)
  • 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
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks