1 / 20

Building a Web Page

Building a Web Page. Creating a WWW Home Page. Open your homework file on your workstation in Notepad Save it as a1.html. General format: HTML Page. <html> <head> </head> <body bgcolor=0xffffff text=0x000000 link=0x8866ff alink=0xff0000 vlink=0xff00ff> </body> </html>.

doctor
Download Presentation

Building a Web Page

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. Building a Web Page

  2. Creating a WWW Home Page • Open your homework file on your workstation in Notepad • Save it as a1.html

  3. General format:HTML Page <html> <head> </head> <body bgcolor=0xffffff text=0x000000 link=0x8866ff alink=0xff0000 vlink=0xff00ff> </body> </html>

  4. Some Sample HTML Tags Page title <title> </title> First level header <h1> </h1> Paragraph <p> </p> Emphasis <em> </em>

  5. Logical Styles Bold <strong> </strong> Code <code> </code> Keyboard <kbd> </kbd>

  6. Even More Sample HTML Tags Variable <var> </var> Citation <cite> </cite> Sample Output <samp> </samp>

  7. Creating a Web Page • In Notepad, add appropriate HTML tags to a1.html • Use the body tag to specify the colors you selected earlier. • <BODY link=“0x0000bb" alink=“0x0000ff" vlink=“0x6600ee“ text=“0x000000”> • Save the file. • Open a browser such as Netscape or IE and look at your new webpage (a1.html)

  8. Posting a Web Page • ftp your a1.html file to the server. • Make sure you put it or move it into your public_html/172/Assignment1 directory. • Use a browser to test it http://www.cs.unca.edu/~username/172/Assignment1/a1.html • Exit ftp with the command bye

  9. Lists in HTML Ordered List <ol> <li> </li> </ol> Definition List <dl> <dt> </dt> <dd> </dd> </dl> • And even more... • Unordered List • <ul> • <li> • </dl> • Hypertext anchor • <a href="doc.html"> </a> • Inline Image • <img src="name.format"> • Comment • <!-- text --> • See online HTML documentation for more tags and good HTML document production information.

  10. Lists And More in HTML Unordered List <ul> <li> </li> </ul> Hypertext anchor <a href="doc.html"> </a>

  11. Lists And More in HTML Inline Image <img src="name.format"> Comment <!-- text -->

  12. Tables in HTML • <table> ... </table> • defines a table in HTML. • If the BORDER attribute is present, your browser displays the table with a border. • <table width="550" border="0“> • <caption> ... </caption> • defines the caption for the title of the table. • The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table. • NOTE: Any kind of markup tag can be used in the caption.

  13. Tables in HTML • <TR> ... </TR> • Specifies a table row within a table. • You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). • <TH> ... </TH> • Defines a table header cell. • By default the text in this cell is bold and centered. • Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents.

  14. Tables in HTML • <TD> ... </TD> • Defines a table data cell. • By default the text in this cell is aligned left and centered vertically. • Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents.

  15. Tables Attributes in HTML • Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>. • Attribute Description • ALIGN (LEFT, CENTER, RIGHT) • Horizontal alignment of a cell. • VALIGN (TOP, MIDDLE, BOTTOM) • Vertical alignment of a cell.

  16. Tables Attributes in HTML • Attribute Description • COLSPAN=n • The number (n) of columns a cell spans. • ROWSPAN=n • The number (n) of rows a cell spans. • NOWRAP • Turn off word wrapping within a cell.

  17. Creating a WWW Home Page • In your telnet window change to your public_html directory. • Create a file calledindex.html using pico, a free text editor. • To bring up pico, type pico at the command prompt.

  18. Creating a WWW Home Page • Formatindex.html using Hypertext Markup Language (HTML). • Save your file <cntl> o • Set file permissions forindex.html • chmod 644 ~/public_html/index.html

  19. In Class Assignment • Modify your index.html file so that it includes an ordered list of your three most favorite foods. • Add a definition list. Have at least two terms (reality and dreamworld) and for each term define your summer plans (you may use a literary license with the truth if you desire). • Add a hyperlink to your favorite sports team or musical group. • Add a table to ensure that your text never is longer than 500 pixels.

  20. In Class Assignment • Using the web browser of your choice load your new page (http://candler.cs.unca.edu/~username)

More Related