Scribd Logo
Importer

Bienvenue sur Scribd !

  • HTML Demonstration Pages: Frames: Frames Are A Feature Supported by Netscape 2.0 (And Higher) Internet Explorer 3.0 (And

    Transféré par

    navin_raghu
    30 vues33 pages
    This document discusses HTML frames and how to use frame tags to divide a webpage into multiple independent frames or windows. Key points: - The <frameset> tag is used to define the structure and layout of frames, with attributes like "cols" and "rows" to specify column and row widths. - The <frame> tag embeds other HTML pages into specified frames, with the "src" attribute linking to the page file. - The "name" attribute gives a frame a target name so other pages can be displayed in that frame. - The "target" attribute in other pages specifies which named frame to display the content in. This allows navigation and linking between frames.

    Description originale:

    Titre original

    HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    This document discusses HTML frames and how to use frame tags to divide a webpage into multiple independent frames or windows. Key points: - The <frameset> tag is used to define the structure and layout of frames, with attributes like "cols" and "rows" to specify column and row widths. - The <frame> tag embeds other HTML pages into specified frames, with the "src" attribute linking to the page file. - The "name" attribute gives a frame a target name so other pages can be displayed in that frame. - The "target" attribute in other pages specifies which named frame to display the content in. This allows navigation and linking between frames.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    30 vues33 pages

    HTML Demonstration Pages: Frames: Frames Are A Feature Supported by Netscape 2.0 (And Higher) Internet Explorer 3.0 (And

    Transféré par

    navin_raghu
    This document discusses HTML frames and how to use frame tags to divide a webpage into multiple independent frames or windows. Key points: - The <frameset> tag is used to define the structure and layout of frames, with attributes like "cols" and "rows" to specify column and row widths. - The <frame> tag embeds other HTML pages into specified frames, with the "src" attribute linking to the page file. - The "name" attribute gives a frame a target name so other pages can be displayed in that frame. - The "target" attribute in other pages specifies which named frame to display the content in. This allows navigation and linking between frames.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 33

    HTML Demonstration Pages: Frames

    Since this is a section on working with frames, why don't we move to a frames version of this page?

    Frames are a feature supported by Netscape 2.0 (and higher) Internet Explorer 3.0 (and higher) and a few other browsers. Frames allow you to divide the screen into independent windows - different areas (squares and rectangles) or frames - each of which can be used in different ways to display information This addition to html involves a new set of tags that allow you to experiment with different ways of presenting information. Frames allow you to provide the user with information about your site and effective navigation tools to explore your digital collection Each frame that you create can have its own html document, because you get to define the content of the frame. Frames can include text, images, multimedia, and usable links. Using frames you can display different documents in a specific window within the larger browser window or even open up new browser windows Working with frames involves a shift in thinking, because you must work in two distinctly different ways:

    First, you must set up a page that will contain the markup which determines the sizes in heights and widths (or percentages of the screen area) of the frames you want. This document, called the frameset provides the structure and placement of the frames within the larger browser window The contents of this document are not displayed on the screen because they are really just a set of instructions for the browser - only the results are seen

    Second, you must set up pages that will appear in the frames you have created. These pages provide the content that will be displayed using frames. In addition to the typical markup of these pages, you also have to provide the html tags that will instruct the browser to display them in the specific frames you designate Frames allow you to create links among the pages of your digital collection so that they are displayed in the order and arrangement that you specify. For example, you can create frames where one or more windows remain static while

    others change as the user clicks on the links you have created. For example, you can look at the frames version of my resume. Close the window to return to these pages How can you do this?

    Working with Frames


    You are now working with a new set of paired and unpaired tags:

    <frameset></frameset> This paired tag is the equivalent of the <body> tag and serves a similar purpose. It marks the beginning and the end of the markup used to structure and lay out the frames that will be displayed by a frames-capable browser. The information you provide within these tags defines the number and sizes of the frames within the frameset To create more complex arrangements of windows, you can nest framesets, a feature which will be described below

    At the moment, the frameset tags only support two attributes: <cols> and <rows>

    <cols="X%,Y%,Z%"> This is a critical attribute of the <frameset> tag because it divides the screen into columns, each taking up a designated amount of the browser window For example, to divide the screen into two columns, one of which (the lefthand column) takes up 30% of the available screen and the other (the righthand column) 70%, you would use the following markup: <frameset cols="30%,70%"> To have three columns, you would use this markup: <frameset cols="20%,40%,40%"> It is possible to specify the size of columns (and, as is indicated below, rows) by a number representing a fixed pixel size. This will cause the frame to remain stable no matter the size of the browser window used by your viewer. This might look like: <frameset cols="40,60,60"> It is also possible to specify the size of columns (and, as is indicated below, rows by a markup tag representing a relative size, which means that the browser

    figures out how to define the frames according to instructions you give in the markup. To do this, you use the value <*> with either the <cols> or <rows> attributes. Alone, it takes the value of the other values used (either size or percentage. You can also use the value with a specific number <n*>. It would look like this: <frameset cols="1*,2*,3*"> Remember your fractions? This markup would instruct the browser to use 1/6 of the available browser window for the first column, 2/6 for the second, and 1/2 for the third. As the browser window changes size, the frames change size, but do so in the proportions specified in the attribute Note: you can combine these different ways of defining the size of the frames, for example: <frameset cols="100,*,80"> This markup would instruct the browser to allocate a width of 100 pixels for the first column, 80 pixels for the third column, and the middle column is allotted whatever is left

    <rows="X%,Y%,Z%"> This is a second critical attribute of the <frameset> tag because it divides the screen into rows, each taking up a designated percentage of the screen To divide the screen into two rows, one of which (the top row) takes 30% of the available screen and the other (the bottom row) takes 70%, you would use the following markup: <frameset rows="30%,70%"> Or three rows: <frameset rows="20%,40%,40%">

    <cols> and <rows> are not mutually exclusive attributes. Within a single paired <frameset> tag, you may divide the window into a grid made up of columns and rows, by using both To create a three-by-three grid, the markup would look like this: <html> <head> <title>Frames Demo</title>

    </head> <frameset cols="33%,33%,33%" rows="33%,33%,33%"> <frame src="1.html"> <frame src="2.html"> <frame src="3.html"> <frame src="4.html"> <frame src="5.html"> <frame src="6.html"> <frame src="7.html"> <frame src="8.html"> <frame src="9.html"> </frameset> </html> This markup would produce the following set of frames. Close the window to return here

    You may have more than one <frameset> tag in your markup. This involves nesting framesets, a feature similar to what you do when you nest lists Also, you may begin your frameset with either columns or rows. Unlike tables, where you have to begin by defining rows, frames can be defined in the way that best suits your purposes Combining these attributes allows you to define rows within a column or columns within a row. This involves nesting the attributes within a series of <frameset> tags. For example, to divide the window into two columns, one of which with two rows and the other with four rows, you would use the following markup: <html> <head> <title>Frames Demo</title> </head> <frameset cols="40%,60%"> <frameset rows="30%,70%"> <frame src="Frame1.html"> <frame src="Frame2.html"> </frameset> <frameset rows="25%,25%,25%,25%"> <frame src="Frame3.html"> <frame src="Frame4.html"> <frame src="Frame5.html"> <frame src="Frame6.html"> </frameset>

    </frameset> </html> This markup would produce the following set of frames. Here's what happened. This link will open a new browser window. Close it to return here Next, we have to look at the tags used within the frameset

    <frame src="somepage.html"> This is an unpaired tag that will place a specific page in a specific frame window. This is the page that the user will see when she first comes upon your frameset The <frame src=> tag acts as a frames version of a link, because it instructs the browser to locate a specific page and display it in a specific location Using the first example above, if you wanted a page called FrameCon.html to appear in the left column (the 30% column) and a page called Frameint.html to appear in the right column (the 70% column),you would use the following markup (which includes all of the major tags needed to set up a simple frames based page, with two important exceptions (discussed below): <html> <head> <title>Frames Demo2</title> </head> <frameset cols="30%,70%"> <frame src="FrameCon.html"> <frame src="FrameIntro.html"> </frameset> </html>

    <name="Youchooseit"> This attribute is added to the <frame src=> tag and acts as a destination or target for pages that you want to appear in specific frames. The use of the <name=> tag is a lot like the <A name=> tag we used when creating within page links - the browser needs this tag to know where to place the specified page (which requires its own tag defining it as the page to be placed in the proper window in the frameset) In the example above, if you wanted to make the second frame (the 70% frame) the one where all other pages appeared, you would use the following markup: <html> <head> <title>Frames Demo</title>

    </head> <frameset cols="30%,70%"> <frame src="FrameCon.html"> <frame src="FrameIntro.html" name="MAIN"> </frameset> <html> Now the window where Frameintro.html intially appears has been defined as a target called MAIN. Now, with additional markup, any number of other pages can appear in this window Here's what it looks like.

    <target="Youchooseit"> This is the attribute that the browser uses to place the page in the appropriate frame, which has been designated as the target with the <name=> attribute. This tag is similar to the <a href="#..."> tag we used to define the take off point in within-page links. The documents that have the target tag are found by the browser and placed in a your frameset in the appropriate windows (which are designated with the name= tag Any number of pages can be directed towards the same target frame. This attribute is very useful for navigation, as in the case of a frame containing a table of contents To show how it works, you have to set up the FrameCon.html page, which will be a listing of the pages that you want to see in the FrameIntro.html frame Let's put three pages into the "FrameCon.html" frame: <html> <head> <title>Contents</title> </head> <body> <p> <a href="Page1.html" target="MAIN">Page 1</a> </p> <p> <a href="Page2.html" target="MAIN">Page 2</a> </p> <p> <a href="Page3.html" target="MAIN">Page 3</a> </p> </body> </html>

    FrameCon.html is a standard web page, placed into the frameset because of the frame src="FrameCon.html" Each of the three pages (Pages 1, 2, and 3) is also a standard web page. However, when you access the main frame page, the FrameCon.html frame will display the listing of these pages as links. When you click on a link, that page will appear in the FrameIntro frame because of the name="MAIN" and target="MAIN" attributes. Again, here's what it looks like. OK, so here's a question: How many documents do we need to create a dynamic frameset with three documents cycling through the active frame? And here's the answer.

    Attributes for use with frames

    It is possible to use four values with the table attribute that will cause the specified page to displayed in different ways target="_blank" will cause the browser to display the specified page in a new browser window that is not part of the frameset. Don't forget to use the underscore character before the value target="_self" will cause the browser to display the specified document in the same window as the document with the link. The original page is replaced by the specified page target="_top" will cause the browser to display the specified page in the entire window taken up by the frameset. The specified page is then the only page that can be seen target="_parent" will have the same effect as _top except in the case where nested framesets are used. In this case, the specified page replaced the specific frameset, the parent, within which the link is found You can find examples of these targets in the first frames example

    <base target="Youchooseit"> If you are going to have a set of documents all load into the same window, you can use an attribute that will be placed in the frameset markup once and applied to all documents listed below it. The <base target=> tag works a lot like the base href tag we used to set a specified URL that would be used for all of the relative URLs in the document The markup would look like this:

    <html> <head> <title>Contents</title> <base target="MAIN"> </head> <body> <ul> <li><a href="Page1.html">Page1</a><li><br /> <li><a href="Page2.html">Page2</a><li><br /> <li><a href="Page3.html">Page3</a><li><br /> </ul> </body> </html>

    <noresize> This is an attribute that prevents the viewer from changing the size of a specific frame. This is a useful attribute because the frameset will change in size depending on the size of the user's monitor and browser window, unless the size of the frames is set in pixels. Most advertising banners or address information that you see in frames will use this attribute. Use this one with care! You use the noresize attribute with one or all of the frames in the frameset To prevent the user from changing the size of the "FrameCon.html" frame, you can use the following markup: <frameset rows="30%,70%"> <frame src="FrameCon.html" noresize> <frame src="FrameIntro.html"> </frameset>

    <scrolling="yes/no/auto"> This is the attribute that instructs the browser to place (or not place) horizontal and vertical scroll bars in a specified frame. The browser will do this automatically if the contents of the frame exceed the amount of space allotted by your markup. You can leave it up to the browser by using the auto value or by not including a value To prevent a scrollbar from being displayed in FrameCon.html and provide one in FrameIntro.html markup would look like this: <frameset rows="30%,70%"> <frame src="FrameCon.html" scrolling="no"> <frame src="FrameIntro.html" scrolling="yes"> </frameset>

    <marginwidth="x"; marginheight="y"> These attributes can be used to change the width and height of the margins of a specified frame. The default

    margin is 8 pixels, so you can make the margins larger or smaller on the sides of the frame with marginwidth and on the top and bottom with marginheight. This affects the distance between the contents of a frame and its inner margin. If the margins are set = 0, the contents of the frame are displayed in the upper left corner of the frame To make the margins smaller in FrameCon.html and larger in FrameIntro.html the markup would look like this: <frameset rows="30%,70%"> <frame src="FrameCon.html" marginwidth="5" marginheight="5"> <frame src="FrameIntro.html marginwidth="7" marginheight="7"> </frameset>

    <border="n"> This attribute allows you to change the thickness of the borders of the framesin the frameset. The default border size is 5 pixels, which is what is displayed if you don't use a <border="n"> attribute. It is used in the outermost <frameset> tag, and takes values in pixels To make the borders smaller in FrameCon.html, the markup would look like this: <frameset rows="30%,70%" border="2"> <frame src="FrameCon.html"> <frame src="FrameIntro.html> </frameset>

    <frameborder="n"> This attribute allows you to determine whether the borders of the frameset will be visible. This attribute can be used at different levels of the frameset document: Inside a <frame src=> tag, <frameborder="n"> is used to determine whether the frame has visible borders. It takes two sets of values, yes and no or 1 and 0 (the use of the numbers is better because it tends to work across platforms. At this level, it only affects theframe, and all adjacent frames must have the same value. The default is <frameborder="yes"> Inside a <frameset=> tag, <frameborder="n"> affects all frames in the frameset To remove the borders in FrameCon.html, the markup would look like this: <frameset rows="30%,70%"> <frame src="FrameCon.html" frameborder="no"> <frame src="FrameIntro.html"> </frameset>

    Since there are two frames in this frameset, and they share a border, there's no need to change the border of the second frame. Changing one changes them both

    <bordercolor="#rrggbb"> The Netscape browser recognizes an attribute that allows you to control the color of the frame border. You can place this attribute in the opening frameset tag, and the color of all of the borders will change. You can place it in a nested frameset to change the borders within the frameset. You can also place it in specific frame tags The browser will use the lowest level of bordercolor= tags that it finds. This means that the order is frame --> nested frameset --> opening frameset. The browser will also change the color of any other frame's borders that share the ones you have changed To make the borders red around FrameCon.html the markup would look like this: <frameset rows="30%,70%"> <frame src="FrameCon.html" bordercolor="#ffOOOO"> <frame src="FrameIntro.html"> </frameset>

    OK, what else? Many browsers do not support frames, so, out of kindness, there is a way to help them understand why your page looks like junk on their screen <noframes> </noframes> This paired tag allows you to leave a message for the cool browser impaired, serving a function similar to that of the alt="text" attribute you used with images. It works like this: <noframes> <body> This page contains frames and if you're reading this, your browser is puny. You can try the <a href="http://internet.address/~username/punyfile.html">puny non frames</a> version. Now go away. </body> </noframes> It's a good idea to place this at the bottom of the main frames page just before the closing </frameset> tag

    So, here's another page outlining and explaining the basic markup used in frames

    This link will open a new browser window. Close it to return here

    HTML Demonstration Page: Forms


    Forms are a useful extension to html markup because they allow you to add some interactivity to your pages. With forms, you can receive information from people who visit your page in more detail than simply using a <mailto>. This type of markup gives you another level of control over your web pages and allows visitors to provide you with much more specific and targeted feedback A form is made up of a series of input controls which are displayed in a variety of ways on the screen. There are buttons to push, boxes in which text can be typed, pull-down menus, from which you can select an option, and checkoff boxes to select. Forms are completed when the visitor clicks on some type of select button to submit the information they have placed in the form To take full advantage of forms, you should have a script, or program, that runs on the server that can process the information for you. We will not cover the creation of scripts because it involves learning some computer programming. This allows you to have the information placed into a database, to generate an automatic reply, or to have a particular file sent to the visitor You can place as many forms as you want in a document

    Creating forms: Basic markup

    <form></form> Each form must be enclosed with a paired tag. The form will be placed on the page in the same way an image would be; it doesn't have any generic layout characteristics, so you have to use other tags to get it where you want <action=> The form tag also must take an attribute, <action=>, that allows the information that is input into the form to be sent somewhere and processed. Typically, this will be the URL of a forms-processing application It would look like this: <form action="http://www.slis.indiana.edu/cgi-bin/sendit"> The address /cgi-bin specifies a directory on the server where the forms processing programs are located. CGI stands for "Common Gateway Interface". sendit is the name of a program that might email a file to the user

    Note You must find out the correct address to use in the form action tag from your technical staff person or internet service provider. Do not use the sample address above! It will not work

    <method=> The form tag must take an attribute, <method=>, which provides instructions to the browser about where and how to send the information input into the form. <method=> can have two values. <method="get"> is the default option and will cause the information to be sent to a specific URL and appended to the bottom. <method="post"> is the second option and it causes the information to be sent separately to a specified URL. This one is more complex to use It would look like this: <form action="http://www.slis.indiana.edu/cgi-bin/sendit" method="post"> Since we will not be discussing CGI scripting, which is a common method of processing the information that is sent to the server when the form is submitted, here is an option that can be used to have the information sent to you in an email message What you do is to set the action attribute of the form tag to a "mailto" URL rather than a standard http URL as in the example above. For example, if I wanted to create a form that would send the form data to my e-mail account, I would use the following markup: <form action="mailto:yourID@indiana.edu" method="post"> When the information entered into this form is submitted, a mail message will be sent to the specified address containing the information in the format that the browser would send back to the web server. Be aware that this format is not easy to read

    Creating forms: input mechanisms


    There are a number of options that you can use to create the input mechanisms for form, each requiring its own markup elements. All will begin with the same opening attributes: <input type="..." name="...">. The input type specifies the type of form element and the name specifies a name for the element that will be attached to the information that is input into the element's field. This is necessary for identifying and sorting the information once it has been submitted When you are setting up a page with form elements, you can place text above and below the specific element. This is a useful way to provide instructions for the person filling out your form

    NOTE: if you want to have all the information that is placed in the various form input mechanisms sent as a single data file, you should use only one set of paired <form> tag at the top and bottom of the page Also, as will be explained below, you use one set of submit and reset buttons

    <input type="text"> This element is a text box, a rectangle that has a default size of 20 characters. You can add attributes that will change the length of the text box by specifying size="n", where "n" is the maximum number of characters that can be entered. This sets the length of the text box. You can also allow people to enter more characters than can be displayed in the text box by specifying the maxlength="n", where "n" is the maximum number of characters. The name= attribute allows you to identify the data as belonging to this input mechanism For example, to create a text box 30 characters in length which can accept up to 100 characters of input, you would use the following markup: <p> <form action="mailto:yourID@indiana.edu" method="post"> Please indicate below why you like this class: </p> <p> I like this class because: <input type="text" name="Likealot" size="30" maxlength="100"></form> </p> It would look like this: Please indicate below why you like this class: I like this class because: NOTE: For the rest of the examples, the opening and closing <form> tags will be omitted. The assumption is that you use one set of tags for all of the <form> elements on the page

    <input type="password"> This element allows the user to input information which cannot be seen on the screen. The characters will be replaced by bullets or asterisks. It can take three attributes: name, which identifies the information when it is submitted, size="n", which determines the length of the text box in characters, and maxlength="n", which sets the maximum number of characters that can be entered in the text box.

    To set up a password text box that is 10 characters long and which allows a maximum of 10 characters to be input, you would use the following markup: <p> Please enter your password below: </p> <p> <input type="password" name="Password" size="10" maxlength="10"> </p> It would look like this: Please enter your password below:

    <input type="radio"> This element is a radio button, which allows the user to make a selection from a number of options. Out of a listing of radio buttons, only one can be selected at a time. You may have as many as you want. Each radio button must have two attributes: It must have a name, so that the selection can be sorted when the selection is submitted. The name will be the same for each radio button, since they are part of a set It must have a value, which is the specific information that is submitted when the button is selected To set up a series of radio buttons, you would use the following markup: <p> Please indicate below how much you like this class </p> <p> <input type="radio" name="Likealot" value="A real lot">A real lot <input type="radio" name="Likealot" value="A way real lot"> A way real lot <input type="radio" name="Likealot" value="Totally a lot"> Totally a lot <input type="radio" name="Likealot" value="More than words can express">More than words can express </p> It would look like this: Please indicate below how much you like this class: A real lot express A way real lot Totally a lot More than words can

    Notice that in the markup, the text that you would like to appear alongside the radio button appears after the closing carat.

    You can use an image in a submit or reset button with the following markup (we'll have to use IE5 or Netscape 6 to see this, but it is cool, so...): <button type="submit" name="submit" value="submit" type="submit style="font: Times, Serif; size: 36pt>Let it rip!<img src="../Images/zippy.gif"></button> <button type="submit" name="submit" value="submit" type="submit" style="font: Times, Serif; size: 36pt align: center> Kill it!<img src="../Images/skull.gif" height="35"></button> It would look like this:

    Let it rip!

    Kill it!

    Making Tables
    So...just how'd we do this anyway?: The main tags used in creating a table are:

    <table> </table> This paired tag marks the beginning and end of the table. The default alignment for a table is to match the alignment of the text on the page. However, the opening table tag can take the attribute align, with two values: left or right, depending on whether you want the table on the left or right side of text on the page. Using this attribute causes the text to flow around the table So, to have text and a table aligned to the right, you would use the following markup: <table border="2" align="right"> <tr> <td>Cell#1</td> <td>Cell#2</td> </tr> <tr> <td>Cell#3</td> <td>Cell#4</td>

    </tr> </table> The table would look like this: Here's the text that will run alongside the left border of the table that we have just created. Notice that the table is displayed along the right margin of the page, because of our use of the align attribute with the value of right

    Cell#1 Cell#2 Cell#3 Cell#4

    <hspace>, <vspace> These are two attributes that you can use to create more space between a table and the adjoining text or image hspace adds pixels to the left and right of the table and vspace does the same to the top and bottom of the table Using the example above and increasing the space between the table and the text uses the hspace attribute in the following markup: <table border="2" align="right" hspace="30"> <tr> <td>Cell#1</td> <td>Cell#2</td> </tr> <tr> <td>Cell#3</td> <td>Cell#4</td> </tr> </table> It would look like this: Here's the text that will run alongside the left border of the Cell#1 Cell#2 table that we have just created. Notice that the table is Cell#3 Cell#4 displayed along the right margin of the page, because of our use of the align attribute with the value of right. The space between the text and the table is caused by the hspace attribute. To get the text to wrap around the table, it must be placed in the markup below the table it is intended to affect. Even though the hspace attribute has created a border around the left and right sides of the table, the text can still run below it because there is no vspace attribute used in the table markup. Understaning how to do thisw is important because it is a useful part of overall layout using text and tables. These attributes are part of the HTML 3.2 recommendation and are not carried over into HTML 4.01, which in turn means that they will be considered

    deprecated and not used in XHTML. Firefox does not recognize it while Netscape, Safari, and Internet Explorer do.

    <border="value"> The opening table tag can also take an attribute, border, which can be used to change the width of border around the table. Values are in pixels, so you may have to experiment with different values to get the effect you want. The default value of this attribute is 1 pixel In the markup, it looks like this: <table border="n"> So, to use the example above, with a thick border (and aligned to the text flow), we would use the following markup: <table border="15" bordercolor="#ff0000"> <tr> <td>Cell#1</td> <td>Cell#2</td> </tr> <tr> <td>Cell#3</td> <td>Cell#4</td> </tr> </table> It would look like this: Cell#1 Cell#2 Cell#3 Cell#4

    <caption> </caption> This paired tag marks the beginning and end of the table's caption or title. The default value for the caption is top, so there's no need to include it in the markup if that's where you want it. Your other option is to use attribute align="bottom", which places the caption below the table <tr></tr> This paired tag marks the beginning and end of a single row of the table. Within each row, you may have regular cells, which can contain text, data, images, and/or links, and header cells, which label the row or column The tr tag is the basic tool for creating tables because you determine the number of columns in the table by defining a number of cells within a single pair of table row tags (<tr> </tr>). A browser will display the table using the largest number of cells that are defined for any row in the table (it will include empty cells in rows with fewer cells).

    <th> </th> This paired tag is used to place a header in the appropriate row or column of the table. It appears after the opening <tr> tag and can be used anywhere in your table markup. The th and /th tags define the boundaries of a single cell. The text included within this cell will be displayed in bold type For example, to place headers across the top row of your table, you would place the header tags between the tags defining the first row of your table. The markup looks like this: <table> <tr> <th>Students</th> <th>Faculty</th> <th>Babies</th> <th>Cats </th> </tr> </table> To place headers down the first column of your table, you would place each header tag between the tags defining the each row of your table. The first header is the first cell of each row. The markup looks like this: <table> <tr> <th>Understand html</th> <td>60%&</td> </tr> <<tr> <th>Sort of get it</th> <td>30%</td> </tr> <tr> <th>Don't get it</th> <td>8%</td> </tr> <tr> <th>Chase mice</th> <td>2%</td> </tr> </table> Note that you can combine these two ways of displaying headers so that you can have them running across the top row and down the first column. This is how the headers were placed in the first row and first column of the "Who 'gets' the web" table above

    <td> </td> This paired tag is used define a single cell in a table row (tr). You use these tags to place content, such as data, an image, and/or a links in cell. In the example above, you can see the first column of data marked up As mentioned above, the largest number of cells in a table row determines the number of columns that will be displayed in the table, so to create a 3X2 table, you would use the following markup: <table border="2"> <tr> <td>Text goes here</td> <td>More text goes here</td> <td>Even more here</td> </tr> <tr> <td>And here</td> <td>Here too</td> <td>Don't forget here</td> </tr> </table> It would look like this: Text goes here More text goes here Even more here And here Here too Don't forget here

    To create an empty cell, use this markup: <td><br /></td> It is also possible to use non-breaking space to accomplish the same thing <td>&nbsp;</td> To put an empty cell in the middle of the table shown above, you would use the following markup: <table border="2"> <tr> <td>Text goes here</td> <td>>More text goes here</td> <td><br /></td> <td>Even more here</td> </tr> <tr>

    <td>And here</td> <td>Here too</td> <td>&nbsp;</td> <td>Don't forget here</td> </tr> </table> And it would look like this: Text goes here More text goes here And here Here too Even more here Don't forget here

    Notice that you have to repeat the empty cell markup in the second table row. If you didn't, here's what it would look like: Text goes here More text goes here And here Here too Don't forget here Even more here

    Notice the ugly wannabe table cell in the lower right hand corner!

    <cellspacing="r"> This is an attribute that adds space between cells in your table and between cells and the outer edge of the table. Values are in pixels, and the default is 2, so if you don't like it, you may have to experiment with different values to get the effect you want In the markup, it looks like this: <table border="n" cellspacing="r"> So, to use the example above, with lots of cellspacing (and aligned to the text flow), we would use the following markup: <table border="6" cellspacing="10"> <tr> <td>Cell#1</td> <td>Cell#2</td> </tr> <tr> <td>Cell#3</td> <td>Cell#4</td> </tr> </table> It would look like this:

    Cell#1 Cell#2 Cell#3 Cell#4

    Here's markup for nested tables that uses different bordercolors to make clear where the nested tables are <table border="2" bordercolor="#000000"> <tr> <td>Cell #1</td> <td>Cell #2</td> <td> <table border="2" bordercolor="#ff0000" width="100%"> <tr> <td>Cell #3</td> <td>Cell #4</td> </tr> <tr> <td>Cell #5</td> <td>Cell #6</td> </tr> </table> </td> </tr> <tr> <td height="40">Cell #7</td> <td>Cell #8</td> <td>Cell #9</td> </tr> <tr> <td>Cell #10</td> <td>Cell #11</td> <td> <table border="2" bordercolor="blue"> <tr> <td height="40">Cell #12</td> <td>Cell #13</td> <td>Cell #14</td> </tr> </table> </td>

    </tr> </table> And here's what the nested tables look like: Cell #3 Cell #5 Cell #4 Cell #6

    Cell #1 Cell #2

    Cell #7 Cell #8 Cell #9 Cell #10 Cell #11 Cell #12 Cell #13 Cell #14

    How HTML works


    Basic markup involves the use of a set of tags, which can be described intwo ways.

    First, there are block-level and inline tags. A block-level tag will be interpreted by the browser as having a line break, so you don't have to include one. Examples include <h#>;, and <ul>. An inline tag does not have an automatic line break. Examples include <b>, and <img>. Second, there are paired and unpaired tags. Unpaired tags are opened and do not have to be closed. They stand alone. Examples include <b>;, and <img>. Paired tags must always be opened and closed. A front slash </> is used to close the pair. Examples include <DOCTYPE>, and <hr>.

    Tags can be modified with attributes which have values. Before looking at some of these tags, a word or two about attributes; these are elements of HTML that allow you to have more control over the way your pages look. For example, instead of simply placing a horizontal rule <hr> on the page and letting it take the default value, you can specify its length and alignment using attributes with different values. The generic form of an attribute is: <html_tag attribute="value"> So, in the example mentioned above, to instruct the browser to display a horizontal line that will extend across three-quarters of the page from the left margin, you would use: <hr width="75%" align="left">

    As we go through some of the common forms of HTML markup, you will notice that many tags have sets of attributes that you can use. As you get better at marking up documents, you'll begin to experiment with nesting tags. This means that you can instruct a browser to display an element of your page with multiple effects. For example, you can make a phrase

    larger and bold


    or
    smaller and italicized

    What you must remember is that you should end your nested tags in the exact reverse order as you started them. The markup for the first example above would then look like this: <font size="5"><b>larger and bold</b></font> You can include comments within your html markup that will not be displayed by the browser. You can use this tag to place information about the document (or you) that only will be visible to people who view your source markup. It is also possible to include commands that instruct servers that access your page to perform different functions (which is beyond what we will do here). The comment tag uses an opening markup of <!-- and a closing of -->. There must be one space after the second - of the opening markup and one space before the closing -. The comment is the text that appears in between the markup. Here's an example of a comment used in these demonstration pages: <!-- These pages are intended to help you learn HTML markup -->
    Return to top

    Some common markup tags (unpaired and paired)


    Some of the common tags are:

    Unpaired, which appear alone in your markup. These include:

    <DOCTYPE> This unpaired tag is actually the first line of your HTML document. This tag is important because it alerts the browser that is accessing your page that you are using a particular version of HTML. This tag is required in all HTML pages. Since we will be working mostly with HTML 4.01, this is the DOCTYPE we will use:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> "http://www.w3.org/TR/html4/loose.dtd"> !DOCTYPE identifies the document as having a specific type HTML PUBLIC specifies the document type as an HTML file "//W3C//DTD HTML 4.0 Transitional//EN" further specifies that the file uses elements defined in the World Wide Web Consortium's document type definition (DTD) for HTML 4.0. The term Transitional means that the document still used some deprecated elements "http://www.w3.org/TR/html4/loose.dtd" is the locatioon of the DTD that describes this bersion of the markup language You can cut and paste this declaration and those tht follow directly into your HTML and XHTML documents. There is a version of this tag that we must use when we work with strict HTML 4.01. This means that we are following the rules of this version and are not using any deprecated tags. When you have clean CSS markup, this would be the DOCTYPE declaration that you would use: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> There is also a version to use when following the rules of HTML 4.01 and using frames: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> There is another set of DOCTYPE declarations for use with XHTML. There is one for transitional XHTNML, where you are following the rules of this version but using some deprecated tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> There is a version to use when closely following the rules of this version of the markup language: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />

    Finally, there is a version to use with frames: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" />
    Return to top

    <br> [In XHTML: <br />] Use line breaks to control the way in which you want the text to appear on the screen. The <br> tag is used in this sentence to break the line here exactly where you want it to break - in this case, after the word "here". The amount of space that is inserted by the browser after a line break is much less than the amount of space that is inserted after a paragraph break. The <br> tag takes one attribute called <clear>, which is often used in conjunction with images (which we'll get to on another page). This attribute will cause the text to break around an image and continue below it, relative to the appropriate page margin. It takes three values: 1. <br clear="left"> Use this tag if the image is aligned along the left margin 2. <br clear="right"> Use this tag if the image is aligned along the right margin 3. <br clear=all>Use this tag if there are images aligned along both margins

    Return to top

    <hr> [In XHTML: <hr />] Horizontal rule, to which attributes can be added, such as: 1. aligned left, right, and center <hr align="direction"> 2. Adjusted for size <hr size="n">, where n is the size in pixels 3. Adjusted for width <hr width="w"> where w is the width in pixels or a percentage of the width of the page 4. Made a solid bar <hr noshade> [In XHTML: <hr noshade="noshade" />] There are different types of horizontal rules on the example page.

    Return to top

    <basefont * size=n> This sets the font size for the entire page based on a value from 1 to 7, with 3 being the default. This is the absolute value for the tag. This tag has been deprecated in HTML 4.01. You can use a relative value for the basefont by using a size="+ or -n". This will be displayed by the browser relative to the default font size, which is 3. basefont size="+2" would produce a font size of 5. You should only have one basefont tag on the page, and it should be placed after the opening body tag. The markup might look like this: <body> <basefont size="4"> The basefont tag only affects text. It will not affect the text that is enclosed in certain other tags, for example, text in a paired H# tag or in a table.

    Return to top

    <meta> [In XHTML: <meta />] The meta tag must be included within the document's header and is used to supply additional information about your document which is sent out to the remote server by your server, just before it sends out the document. This information is supplied by including one or more of the following attributes. 1. <http-equiv> This attribute will supply information to the server through which another browser is attempting to access your page. The default information defines your document as content-type: text/html. A required http-equiv declaration that should be in every HTML or CXHTML page that you write specifies the character encoding that you are using. This information allows a browser to correctoyl render your page. Use this one: <meta http-equiv="content-type" content="text/html;charset=utf-8" /> You can copy and paste this declaration directly into the <head> container in your pages. You could also use this tag to indicate that such information as keywords, or author's name is available.

    2. <name> This attribute can also be used to define the types of information that will be sent to the server through which the browser is requesting your page. Note that you must use either the <http-equiv> tag or the <name> tag, but not both. In addition, many servers cannot process this information and will ignore it. 3. <content> This attribute provides the values associated with the names defined by <http-equiv> or <name> For example, to include several keywords for this document, the author's name, and the date it expires, the following markup would be used: <meta http-equiv="keywords" content="html, paired, unpaired tags"> <meta name="author" content="Rosenbaum"> <meta name="expires" content="1 Jan 2006"> If using XHTML, the markup would look like this: <meta http-equiv="keywords" content="html, paired, unpaired tags" /> <meta name="author" content="Rosenbaum" /> <meta name="expires" content="1 Jan 2006" /> The information sent to server through which the browser is requesting your page would be: content-type: text/html keywords: html, paired, unpaired, tags author: Rosenbaum expires: 1 Jan 2006 For another interesting use of the meta http-equiv tag, let's quickly go to another page. Don't worry, we'll be right back.
    Return to top

    Paired, which always must be opened and closed:


    There are four paired tags which should always appear in your web documents.

    <html> and </html> The opening part of the html tag should be the second tag used in your document. It alerts a browser to the presence of an html document. The closing html tag should be the last line of your document.

    Return to top

    <head> and </head> The header tag is the third tag to use because it defines a section of your document that will not be displayed by the browser. This allows you to place other types of information in your document, such as a document title or meta-information that can be picked up by search engines

    Return to top

    <title> and </title> The title tag allows you to place text across the top of the browser window. The text between the opening and closing tags will be the title of your document. Do not use any special formatting or markup tags in the title of your document.

    Return to top

    <body> and </body> The body tag defines the text area of your document. The opening body tag follows the closing head tag; the closing body tag precedes the closing html tag, unless you are working with frames You would use these standard tags in the following way: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Demo Page: Tags</title> </head> <body> This is where the text would go </body> </html>

    Return to top

    Here are some other paired tags that you can use:

    <p> and </p> Paragraph break. This tag marks the beginning of a paragraph, not the end of one. It instructs the browser to place a blank line after the preceeding paragraph. The closing </p> is typically omitted, and this does not violate the standard. However, when using cascading style sheets, the closing </p> tag is needed to mark the end of the application of a style. All text between two <p> tags are considered to be in the same paragraph. The block of text is called an element.

    A paragraph break <p> has one attribute which can take three values: 1. <p align="left"> The default is to be aligned to the left side, so you don't have to use this one. 2. <p align="center"> will center the paragraph 3. <p align="right"> will place the paragraph on the right margin Note that you can't stack paragraph breaks to add extra lines between paragraphs. The second <p> is considered a redundant tag by the browser and is ignored. There are other ways to control white space, such as the use of cascading style sheets. By the way, this paragraph and the one that follows are preceded by the following markup: <p align="right"> That's why these words are right justified and there is a ragged edge along the left side of these words.
    Return to top

    <div> and </div> This tag is used to create divisions or containers in the document, each of which may have different attributes, such as alignment, font size, and font type. Many elements can be included between the opening and closing <div> tag including paragraphs, tables, and lists. This tag is most useful when working with HTML 4.01, cascading style sheets and XHTML. There's an example of the use of the div tag on the example page.

    Return to top

    <h#> and </h#> This tag defines the headers in the document, where # is a number from 1 (the largest) to 6 (the smallest). Headers will place an automatic paragraph break after the last of the text, so you don't have to use a <p> in conjunction with this tag. Here are two examples:

    This is the largest header (h1)


    This is the smallest header (h6)

    Headers can be positioned using the align attribute, which takes three values:

    1. <h# align="left"> The default is to be aligned to the left side, so you don't have to use this one. 2. <h# align="center"> will center the header 3. <h# align="right"> will start the header from the right margin For example:

    Here is a large, centered header


    Here is a tiny, right-aligned header

    You can nest other html tags inside of h# markup; remember to close them in reverse order! Also, don't use h# markup to change the font characteristics of the page - there are better ways to this.
    Return to top

    <address> and </address> The address tag is used to create a block of text containing information about the document and its author. It will italicize all of the text included between the tags. The address is typically used at the bottom of the page and looks like this: <address>This page prepared by Howard Rosenbaum<br> Last update:12.31.99 </address> It is displayed like this: This page prepared by Howard Rosenbaum Last update:12.31.99

    Return to top

    <nobr> and </nobr> The no break tag can be used to prevent the browser from breaking the line at the edge of the browser window (which can be set by the user). A line of text will not wrap if it is enclosed within this tag. For example, the use of the <nobr> tag can be really annoying because the reader will try to make the browser window as wide as possible, but if you make the sentence long enough, he or she will still have to use the scroll bar to get to the end of the sentence. Obviously, use this one with care.

    Return to top

    <center*> and </center> This tag centers text

    The center tag also will center whatever else you include on your pages,including images, tables, and forms. You use one set of center tags to enclose all of the consecutive elements on the page that you want to appear in the center of the page. This term has been deprecated in HTML 4.01
    Return to top

    <blockquote> and </blockquote> This tag sets off text by indenting a block of text the equivalent of one tab stop from the left margin. It can also separating it from the preceeding paragraph with an empty line and indentation. To use it properly, you should use another tag, such as the <p> after the opening <blockquote> tag. As you can see, this paragraph has been enclosed in a pair of <blockquote> tags. There's another example of a blockquote on the example page.

    Return to top

    <pre> and </pre> This tag preserves the formatting of the text, but displays it in a monospaced font like Courier, so it will not look the same as the font or fonts used on the rest of the page. You can use some HTML tags inside the paired pre tags. Those that force line and paragraph breaks cannot be used, but physical and logical tags can be used, although browsers will always use the monospaced font. An interesting use of the pre tag is to insert a block of blank lines into a document. For example, here will be six blank lines after this sentence because of the use of the <pre>tag.

    There's another example of the pre tag on the example page that shows how it preserves original spacing in an ASCII document.
    Return to top

    <font*> and </font> This tag provides some control over characteristics of the text display. It is a deprecated tag in HTML 4.01. font characteristics can be controlled with cascading style sheets.

    There are three main attributes that will work with this tag, size, face, and color. The first two will be discussed here, the third will be discussed on the Image and Color page.
    o

    <font size=n> This tag will change the font size based on a value from number from 1 (the smallest) to 7 ( of 3 is the default. You can use the font size tag to change a single character, a word, a sentence, or a paragraph.

    the largest

    ). A font size

    <font face="Fontname1, Fontname2, Fontnamen> This tag will suggest a series of font styles to a browser, which will try to display the first one it can find on the user's computer. If it can't find any of them, it uses the default font set by the user. The order of fonts should be from a specific font face (Times-Roman) to a general font family (Serif). The browser will go through the suggested fonts in order. The markup looks like this: <font face="Times-Roman, Palatino, New York">text</font>

    You can use this tag and its attributes as many times as you want in a document. You can also combine these attributes, for example: <font face="Times-Roman, Palatino, New York" size="5">text </font> Remember that it must always have the closing </font> tag There are some examples of the font tag with the size and face attributes on the example page.
    Return to top

    There is a set of physical style tags which can be used to mark up documents. These tags force different browsers to display the marked up elements in the same way. This is a short list which is not complete because some of these tags are only supported by a single browser or are part of proposed standards not yet in use. 1. <b> and </b> Bold text, which the user's browser cannot change. 2. <i> and </i> This tag produces italicized text 3. <big> and </big> This tag will make the text bigger than surrounding text 4. <small> and </small> This tag will make the text smaller than surrounding text

    5. <strike*> and </strike> Strike out text by placing a line through it. Note that not all browsers can display this, so be careful about using it. This term has been deprecated in HTML 4.01 6. <sub> and </sub> This tag produces subscript 7. <sup> and </sup> This tag produces superscript 8. <tt> and </tt> This tag produces a fixed width font that resembles typing. 9. <samp> and </samp> This tag also produces a monospaced display and is used to indicate text that is part of a computer process. For example, type exit to quit the editor 10. <u*> and </u> This tag produces underlined text. Since many browsers indicate links with underlined text, you should probably use this sparingly. This term has been deprecated in HTML 4.01
    Return to top

    There are also logical or content-based markup tags that will make text stand out,but they will vary with the browser used to view them. Logical or contentbased markup is concerned more with the meaning and intent of the document than with its appearance. 1. <cite> and </cite> This tag can be used for citations, such as: Rosenbaum. (1996). html Demonstration Pages. 2. <code> and </code> This tag uses a fixed width font to display text, but has the advantage of allowing the coded text (typically actual lines of code) to be extracted from the page by a search tool. This text is smaller than the default text displayed by the browser. If you are not displaying computer code, you should use the <tt> tag. 3. <em> and </em> This tag produces emphasized text which is rendered differently by different browsers. 4. <strong> and </strong> This tag produces strong text which is rendered differently by different browsers.

    Return to top

    You can also use paired and unpaired tags to organized text into different types of lists. This page has an explanation of the different types of lists you can use in your markup with examples of each type.

    Vous aimerez peut-être aussi