building a web page
DESCRIPTION
Building a Web Page. Create A New Folder. Right click on the desktop and select New / Folder Name the folder playpen. View file extensions. From the Start Menu, select Accessories / Windows Explorer Display the desktop. Select your newly created directory playpen . - PowerPoint PPT PresentationTRANSCRIPT
Building a Web Page
Create A New Folder Right click on the desktop and
select New / Folder Name the folder playpen
View file extensions From the Start Menu, select Accessories
/ Windows Explorer Display the desktop. Select your newly created directory playpen.
From the menu bar, select Tools / Folder Options
Under the View Tab uncheck Hide Extensions for Known File Types.
Select the OK button.
Creating a Web Page Open Notepad (From the Start
Menu, select Accessories / Notepad.)
Type in the following:
Your Name Here
Robotics and the Internet
CSCI 179.001
Saving a Web Page from Notepad
From the Menu Bar, select File / Save.
Verify you are in your new playpen folder or directory.
Set the following File Name : index.html Save as type : All Files Encoding : ANSI
Press the SAVE button.
View Your Web Page In A Browser
Go back to Windows Explorer and make sure your file is named index.html, not index.txt.
Double click the file index.html and the default browser should open with your page displayed.
What do you see?
General format:HTML Page
<html>
<head>
</head>
<body bgcolor=“#ffffff” text=“#000000” link=“#8866ff” alink=“#ff0000” vlink=“#ff00ff”>
</body>
</html>
Some Sample HTML TagsPage title<title> </title>
First level header<h1> </h1>
Paragraph<p> </p>
Emphasis
<em> </em>
Logical StylesBold<strong> </strong>
Code<code> </code>
Keyboard<kbd> </kbd>
Even More Sample HTML TagsVariable<var> </var>
Citation<cite> </cite>
Sample Output<samp> </samp>
Creating a Web Page In Notepad, add appropriate HTML tags
to index.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 (index.html)
Lists in HTMLOrdered 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.
Lists And More in HTML
Unordered List
<ul>
<li> </li>
</ul>
Hypertext anchor
<a href="doc.html"> </a>
Lists And More in HTML
Inline Image
<img src="name.format">
Comment
<!-- text -->
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.
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.
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.
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.
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.
In Class Assignment Modify your index.html file so that it includes
an ordered list of your three favorite foods. Add a definition list. Have at least two terms
(Summer Reality and Dream Summer ) and for each term define your next summer plans.
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.
In Class Assignment Email your web page to us and send a
copy to yourself. Our emails are