1 / 18

HTML - PowerPoint PPT Presentation

  • Updated On :

HTML. Web pages are HTML. HTML stands for HyperText Markup Language Web pages are plain text files, written in HTML Browsers display web pages by interpreting the HTML language HTML pages may have other languages embedded in them CSS -- Cascading Style Sheets

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'HTML' - teryl

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Web pages are html l.jpg
Web pages are HTML

  • HTML stands for HyperText Markup Language

  • Web pages are plain text files, written in HTML

  • Browsers display web pages by interpreting the HTML language

  • HTML pages may have other languages embedded in them

    • CSS -- Cascading Style Sheets

    • JavaScript -- a programming language vaguely like Java

Example of html l.jpg
Example of HTML

  • <!DOCTYPE HTML PUBLIC "-//IETF//DTD W3 HTML 2.0//EN"><html> <head> <title>factorial</title> </head> <body bgcolor="#FFFFFF"> <h1>factorial</h1> <strong>Definition:</strong> The factorial of an integer n &#8805; 0, written n!, is n &times; n-1 &times; ... &times; 2 &times; 1. In particular, 0! = 1. </body></html>

Why do we care l.jpg
Why do we care?

  • Javadoc comments are written in HTML

    • If you know a little HTML, you can write much better-looking comments

  • Applets are normally embedded in a web page

    • You need to know enough HTML to construct a web page with an applet in it

    • You do not need to know HTML to run an applet from an IDE

  • HTML is the language of the World Wide Web

    • Java is an excellent language for web programming

Html files l.jpg
HTML Files

  • An HTML file is a plain 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

    • .html is preferred

    • .htm extensions are used by servers on very old operating systems that can only handle “8+3” names (eight characters, dot, three characters)

  • An HTML file can be created using a simple text editor

    • Formatted text, such as Microsoft Word’s.doc files, cannot be used in HTML files

Html tags l.jpg

  • HTML tags are used to mark up HTML elements

  • HTML tags are surrounded by angle brackets, < and >

  • Most HTML tags come in pairs, like <b> and </b>

  • The tags in a pair are the start tag and the end tag

  • The text between the start and end tags is the element content

    • The tags act as containers (they contain the element content), and should be properly nested

    • A few tags, such as <br> (line break) are not nested and have no end tag

  • HTML tags are not case sensitive; <b> means the same as <B>

    • Lowercase tags are preferable

Structure of an html document l.jpg

An HTML document is contained within <html> tags

It consists of a <head> and a <body>, in that order

The <head>typically contains a <title>, which is used as the title of the browser window

Almost all other content goes in the <body>

Hence, a fairly minimal HTMLdocument looks like this:

<html> <head> <title>My Title</title> </head> <body> Hello, World! </body></html>

Structure of an HTML document

Text in html l.jpg
Text in HTML

  • Anything in the body of an HTML document, unless marked otherwise, is text

  • To make text italic, surround it with<i>and</i> tags

  • To make text boldface, surround it with<b>and</b>tags

  • You can put headers in your document with <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> tags (and the corresponding end tag,</h1>through </h6>)

    • <h1>is quite large;<h6>is very small

    • Each header goes on a line by itself

Whitespace l.jpg

  • Whitespace is any non-printing characters (space, tab, newline, and a few others)

  • HTML treats all whitespace as word separators, and automatically flows text from one line to the next, depending on the width of the page

  • To group text into paragraphs, with a blank line between paragraphs, enclose each paragraph in<p>and</p> tags

  • To force HTML to use whitespace exactly as you wrote it, enclose your text in<pre>and</pre> tags (“pre” stands for “preformatted”)

    • <pre>also uses a monospace font

    • <pre>is handy for displaying programs

Lists l.jpg

Two of the kinds of lists in HTML are ordered, <ol>to</ol>, and unordered, <ul> to</ul>

Ordered lists typically use numbers: 1, 2, 3, ...

Unordered lists typically use bullets (•)

The elements of a list (either kind) are surrounded by<li>and </li>


The four main food groups are:<ul> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li></ul>


Attributes l.jpg

  • Some markup tags may contain attributes of the form name="value"to provide additional information

  • Example: To have an ordered list with letters A, B, C, ... instead of numbers, use <ol type="A"> to </ol>

    • For lowercase letters, use type="a"

    • For Roman numerals, use type="I"

    • For lowercase Roman numerals, use type="i"

    • In this example, typeis an attribute

  • If a tag has more than one attribute, they can be in any order

Tables l.jpg

  • Tables are used to organize information in two dimensions (rows and columns)

  • A<table>contains one or more table rows,<tr>

  • Each table row contains one or more table data cells,<td>, or table header cells, <th>

    • The difference between <td>and <th> cells is just formatting--text in <th> cells is boldface and centered

  • Each table row should contain the same number of table cells

  • To put borders around every cell, add the attribute border="1" to the <table> start tag

Example table l.jpg
Example table

  • <table border="1"> <tr> <th>Name</th> <th>Phone</th> </tr> <tr> <td>Dick</td> <td>555-1234</td> </tr> <tr> <td>Jane</td> <td>555-2345</td> </tr> <tr> <td>Sally</td> <td>555-3456</td> </tr></table>

Entities l.jpg

  • Certain characters, such as <, have special meaning in HTML

  • To put these characters into HTML without any special meaning, we have to use entities

  • Here are some of the most common entities:

    • &lt; represents <

    • &gt; represents >

    • &amp; represents &

    • &apos; represents '

    • &quot; represents "

    • &nbsp; represents a “nonbreaking space”--one that HTML does not treat as whitespace

  • Hence, to display if (x < 0) return "negative";you need to write if (x &lt; 0) return &quot;negative&quot;;

Applets in html l.jpg
Applets in HTML

  • To put an applet into an HTML page, you use the <applet> tag, which has three required attributes, code (the class file) and width and height (in pixels)

  • Example:

    • <applet code="MyApplet.class" width=150 height=100> </applet>

  • If your applet contains several classes, you should jar them up; in this case you also need the archive attribute:

    • <applet code="MyApplet.class" archive="MyApplet.jar" width=150 height=100></applet>

Applets with parameters l.jpg
Applets with parameters

  • You can pass parameters to your applet from your HTML page:

    • <applet code="MyApplet.class" width=150 height=100> <param name="message" value="Hello World"> <param name="arraySize" value="10"></applet>

  • The applet can retrieve the parameters like this:

    • String message = getParameter("message");String sizeAsString = getParameter("arraySize");

  • All parameters are passed as Strings, so you may need to do some conversions:

    • try { size = Integer.parseInt (sizeAsString) }catch (NumberFormatException e) {…}

The rest of html l.jpg
The rest of HTML

  • HTML is a large markup language, with a lot of options

    • None of it is really complicated

    • I’ve covered only enough to get you started

    • You should study one or more of the tutorials

    • Your browser’s View > Source command (or similar) is a great way to see how things are done in HTML

    • HTML sometimes has other things mixed in (such as forms, DHTML, and JavaScript), so if it doesn’t look like HTML, it probably isn’t