1 / 101

HTML

HTML. H yper T ext M arkup L anguage-. Learning outcomes. Code web pages using HTML Explain why it is advisable to use XHTML rather than HTML Describe some technologies available for dynamic web pages Explore some problems of html. Essential Reading.

mead
Télécharger la présentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML HyperTextMarkup Language-

  2. Learning outcomes • Code web pages using HTML • Explain why it is advisable to use XHTML rather than HTML • Describe some technologies available for dynamic web pages • Explore some problems of html

  3. Essential Reading • William Buchanan, Mastering The Internet, Ch. 6-8 • Mike Lewis, “Understanding Javascript”, June-Jully 2000 • Chuck Masciano and Bill Kennedy, HTML and XHTML the definitive guide, for reference http://www.pcnetworkadvisor.com • Introductory materials on HTML & XHTML either a text book such as • John Shelly, HTML AND CSS explained, or • http:/www.webMonkey.com • http://www.w3schools.com

  4. What is an HTML File? • HTML stands for HyperTextMarkup Language • An HTML file is a text file containing small markup tags • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor

  5. HTML contd. • HyperText Markup Language--HTML is a collection of platform-independent styles (indicated by markup tags) that define the various components of a World Wide Web document. HTML was invented by Tim Berners-Lee while at CERN, the European Laboratory for Particle Physics in Geneva.

  6. HTML Basics • HTML documents are plain-text (also known as ASCII) files that can be created using any text editor (e.g., Emacs or vi on UNIX machines; SimpleText on a Macintosh; Notepad on a Windows machine). You can also use word-processing software if you remember to save your document as "text only with line breaks".

  7. HTML Basics • An element is a fundamental component of the structure of a text document. Some examples of elements are heads, tables, paragraphs, and lists. Think of it this way: you use HTML tags to mark the elements of a file for your browser. Elements can contain plain text, other elements, or both.

  8. HTML Basics • To denote the various elements in an HTML document, you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction. The end tag looks just like the start tag except a slash (/) precedes the text within the brackets.

  9. HTML Basics • <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>And this is the second paragraph.</P> </body> </html>

  10. HTML Basics • Markup Tags • HTML • This element tells your browser that the file contains HTML-coded information. The file extension .html also indicates this an HTML document and must be used.

  11. HTML Basics • HEAD • The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser's window

  12. HTML Basics • TITLE • The title element contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window itself.

  13. HTML Basics • BODY • The second--and largest--part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window). • All other tags now come within the body tag.

  14. HTML Basics • Headings • HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are typically displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>. • The syntax of the heading element is: <Hy>Text of heading </Hy> where y is a number between 1 and 6 specifying the level of the heading.

  15. HTML Basics • Paragraphs • Unlike documents in most word processors, carriage returns in HTML files aren't significant. In fact, any amount of whitespace -- including spaces, linefeeds, and carriage returns -- are automatically compressed into a single space when your HTML document is displayed in a browser. A Web browser ignores this line break and starts a new paragraph only when it encounters another <P> tag

  16. Markup languages • HTML places primary emphasis on structure • paragraphs, headings, lists, images, links, …. • HTML places secondary emphasis on style (CSS)‏ • fonts, colours, …. • HTML does not label the meaning of the text (XML)‏

  17. A basic document • Every document should start with the following line <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> • There are three required elements, defined by the tags <html>, <head> and <body> <html> <head> <title>My Home Page</title> </head> <body> <h1>Welcome</h1> </body> </html>

  18. Basic structure elements • first and last tags • The HEAD section • must come before the BODY section • contains generic information about the document • Elements specified in the HEAD section can include • title, link, script, style • The BODY section • contains the content of the document (text, images etc) • this content is structured by other tags

  19. Block elements • Block elements define sections of text, usually preceded by a blank line • <p></p> - paragraph • <h1></h1>...<h6></h6> - headings • <pre></pre> - preserve (original format)‏ • <blockquote></blockquote> - indented text • <div></div> - division • used to identify a section of the document that may be subject to special formatting (for example, using stylesheets).

  20. Paragraphs <p>here is a piece of text that has been placed inside a paragraph</p> <p align="center">Here is another paragraph</p> Paragraphs: <p>...</p> • force a break between the enclosed text and the text surrounding it • the tagged region of text may be subject to special formatting <p align="center">Here is another paragraph</p> • align is an attributeof the paragraph tag • center is the value of the align attribute

  21. Headings • Six levels of importance <h1>...<h6> • Use headings to divide document into sections <html> <head> <title>Headings</title> </head> <body> <h2>Chapter 1</h2> <h3>1. Introduction</h3> This is the introduction <h3>2. Next section</h3> This is the next section <h4>2.1 A subsection</h4> This is a subsection </body> </html>

  22. Element relationships • The elements marked by tags form a hierarchy • The root element is html (marked by <html>...</html>)‏ • It usually has two children: head and body • each of these are further subdivided • There are rules for which elements can contain other elements • e.g. headers cannot contain headers • see http://www.w3.org/ for a full list of rules • Elements must not overlap each other • we cannot have: <h1>...<a..> ... </h1>...</a> • we can have: <h1>...<a..> ... </a>...</h1>

  23. Inline descriptive elements Descriptive elements affect the appearance of text depending on how the text is described • <em></em>emphasis, usually with italics • <strong></strong>strong, usually with bold • <cite></cite>citation, usually in italics • <code></code> usually results in monotype spacing <body> A <em>fascinating</em> subject that I <strong>must</strong> understand </body>

  24. Inline explicit style elements • <boldface></boldface> • <big></big> bigger font than surrounding text • <small></small> smaller font than surrounding text • <i></i> italics • <s></s> strikethrough • <sub></sub> subscripts • <sup></sup> superscripts • <span></span> delimits text for stylesheet control • <div></div> delimits blocks of text for stylesheet control

  25. Inline explicit style elements <font> attributes • face- name of font (must be installed)‏ • "arial", "times", "verdana", "helvetica" • size - absolute size (1-7), or relative to previous text • "2", "5", "7", "+1", "-2"... • color- hexadecimal RGB, or a named color • "3399dd", "blue", "red" • weight - boldness from 100, 200, ..., 900 • "100", "300", "900" • e.g. <font face="arial" size="+1" color="pink" weight="300">

  26. Unordered lists • Unordered lists <ul>...</ul> • <li>...</li> for the list elements • each item has a bullet some normal text <ul> <li>apples</li> <li>oranges</li> <li>pears</li> <li>bananas</li> </ul>

  27. Ordered lists • Ordered lists <ol>...</ol> • <li>...</li> for the list elements • each item has a number some normal text <ol> <li>apples</li> <li>oranges</li> <li>pears</li> <li>bananas</li> </ol>

  28. Definition lists • <dl></dl>The enclosing tags • <dt></dt> The definition term • <dd></dd> The definition <dl> <dt>MIME</dt> <dd> Multipurpose... </dd> <dt>FTP</dt> <dd> File transfer... </dd> <dt>TCP</dt> <dd> Transmission... </dd> </dl>

  29. Nested lists • A list may contain another list • The inner list is nested inside the outer list <body> <ol> <li>apples</li> <ul> <li>red</li> <li>green</li> </ul> <li>oranges</li> <li>pears</li> <li>bananas</li> </ol> </body>

  30. Comments • Comments are delimited by <!-- and --> <!– this is a comment --> • Comments may span multiple lines <body> <!-- this is a comment --> </body>

  31. Horizontal lines • To insert a horizontal line to divide up parts of a document we use the empty tag <hr> • Attributes: align, size (in pixels), width (in pixels or percentage), noshade <body> <h1>Chapter 1</h1> <hr align="center" size="3" width="50%" noshade> <h2>Introduction</h2> </body>

  32. Special characters <body> A <em> &lt;fascinating &gt; </em> subject that I <strong>m&nbsp;u&nbsp;s&nbsp;t</strong> understand </body> • Some characters such as <, >, " and & have special meanings. • To prevent them being interpreted as HTML code, they must be written as follows: &lt; &gt; &quot; &amp; • Blank space is normally ignored in HTML. To include a space in your document use: &nbsp;

  33. Links • The link (anchor) element <a>...</a> provides hypertext links between • different documents (using a URL)‏ • different parts of an individual document • User selection of the link (hot spot) results in • retrieval and display of the designated document • movement to relevant part of same document <body> The Department of <ahref="http://www.doc.gold.ac.uk/index.html"> Computer Science</a> is a very .... </body>

  34. Link with URL Example: • The href attribute gives the URL of the target page • The text between the tags is highlighted – selecting it activates the link <body> The Department of <ahref="http://www.doc.gold.ac.uk/index.html"> Computer Science</a> is a very .... </body>

  35. Relative addressing • The previous example gave the full path name, known as the absolute address <a href="research.html">Research</a> <a href=“./pub.html">Publications</a> <a href="../../index.html">Computer Science home</a> • The ‘root’ directory for the link is assumed to be the directory containing the parent page of the link

  36. Images • Images are included using the empty tag <img> • Example: <img src="mypicture.gif" alt="my picture"> • The src attribute specifies the file containing the image • absolute or relative path names can be used (see notes for links)‏ • The alt attribute specifies the text to be displayed if the image is not viewed • some users choose not to display images (for faster download)‏ • also used for compatibility with older browsers

  37. Image attributes • The size attributes control the size of the image <img src="cat.gif" height="60" width="90" align=“top” alt="cat"> • The align attribute controls the vertical location of the image, relative to the line of text • align="top" top of image aligned with top of text • align="middle" centre of image aligned with centre of text • align="bottom" bottom of image aligned with baseline of text • The align attribute also controls the horizontal location of the image, relative to the line of text • align="left" image aligned with left margin • align="right" image aligned with right margin

  38. Links with images • A link element can include an image instead of text • both images and text can be included if required <body> Enter my world of cats <a href="cats.html"><img src="cat.gif" height="60" width="60"align="middle" alt="cat"></a> </body>

  39. Colour • Colours are specified with hexadecimal numbers for the red, green and blue primary colours, preceded by a “#”. • To set the background colour of a web page <body bgcolor="#994422">

  40. Colour – RGB Model • #ff0000 (red), • #00ff00 (green)‏ • #0000ff (blue)‏ • #ffff00 (yellow)‏ • ... • #3395ab (a pastel blue)‏

  41. Colour • To set the colour of all text on a page <body text="#994422"> • In the body element, the colour of link text can be controlled with the following attributes: • link for an un-visited link • vlink for a visited link • alink for a link that is currently selected by the mouse • Example <body text="#000000" link="#0000ff">

  42. Colour • To set the colour of an individual piece of text use the font element (or preferably stylesheets – see later) <body bgcolor="#3395ab"> Text in quotes <font color="#ff0000">"such as this"</font> has a different colour </body>

  43. Colour names • Netscape and Internet Explorer allow textual names for colours instead of hexadecimal • This is OK provided the page is not looked at by a browser that does not support colour names • For example <body bgcolor="gray" text="black" link="blue">

  44. Background patterns • Rather than a uniform color • You can give the background of web page a pattern as follow: <body background="tileimage.gif">

  45. Forms • Server-based programs may return data to the client as a web page • Client-side scripts can read input data • To validate the data, prior to sending to server • To use in local processing which may output web page content that is displayed on the client

  46. Example applications • Questionnaires to provide feedback on a web site • e-commerce, to enter name, address, details of purchase and credit-card number • request brochures from a company • make a booking for holiday, cinema etc. • buy a book, cd, etc • obtain a map giving directions to a shop • Run a database query and receive results (an important part of e-commerce)‏

  47. Input types • text • checkbox • radio (buttons)‏ • select (options)‏ • textarea • password • button • submit • reset • hidden • file • image

  48. The method and action attributes • The method attribute specifies the way that form data is sent to the server program • GET appends the data to the URL • POST sends the data separately • The action attribute specifies a server program that processes the form data (often as a URL)‏ <body> <form method="POST" action="comments.php"> <h2>Tell us what you think</h2> <!-- etc --> </form> </body>

  49. The input element: type="text" • The type attribute specifies the type of user input • The name attribute gives an identifier to the input data <form method="POST" action="comments.php"> <h2>Tell us what you think</h2> Name <input name="name" type="text" size="20"><br> Address <input name="address" type="text" size="30"> </form>

  50. The input element: type="checkbox" • The name attribute is used to define a set of checkboxes • The value attribute identifies the individual checkbox • If the checked attribute is set the box is initially checked How did you hear about this web site?<br> A friend <input type="checkbox" name=“name" value="friend"><br> Search engine <input type="checkbox" name=“name" value="engine"><br>

More Related