building a web page n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Building a Web Page PowerPoint Presentation
Download Presentation
Building a Web Page

Loading in 2 Seconds...

play fullscreen
1 / 30

Building a Web Page - PowerPoint PPT Presentation


  • 89 Views
  • Uploaded on

Building a Web Page. A Brief History. In 1989, Tim Berners-Lee invented the Web. To enable particle physics from around the world to organize and share information. Global hypertext links: HTTP which stands for HyperText Transfer Protocol

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

PowerPoint Slideshow about 'Building a Web Page' - istas


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
a brief history
A Brief History
  • In 1989, Tim Berners-Lee invented the Web.
    • To enable particle physics from around the world to organize and share information.
    • Global hypertext links: HTTP which stands for HyperText Transfer Protocol
    • Based on SGML, Standard Generalized Mark-up Language
  • In May 1994, the first World Wide Web conference was held in Geneva
html timeline
HTML Timeline
  • July 1994: specification for HTML 2 is released
    • Had most of the elements we know, but was missing some of the Netscape/Microsoft extensions, and did not support tables, or ALIGN attributes.
  • Late 1994: The World Wide Web Consortium forms
  • March 1995: HTML 3 is published as an Internet Draft
    • Never completed or implemented
  • January 1997: HTML 3.2 is released
    • Support for TABLES, image, heading and ALIGN attributes. It was missing some of the Netscape/Microsoft extensions, such as FRAMEs, EMBED and APPLET.
  • Spring 1998: HTML 4.0 is released
    • HTML 4.01 is the current official standard. It includes support for Cascading Style Sheets, extra TABLE, FORM, and JavaScript enhancements.
  • HTML 4.01 is the last version of HTML
html replaced by x html
HTML replaced by XHTML
  • XHTML is similar to HTML, but is designed to work with the new eXtensible Markup Language, or XML
  • XML will soon serve as the core language for designing new Web applications
xhtml vs html
XHTML vs. HTML
  • Differences:
    • All tag and attribute names must be in lowercase.
    • "Empty" tags must be written with an extra slash at the end.
    • You can never omit an end tag.
    • Attributes must always have a value.
    • Attributes values must always be quoted
  • But what does all that mean???
what is html
What is HTML
  • HTML, or HyperText Markup Language is designed to specify the logical organization of a document, and provide hypertext extensions.
    • It is not designed to be the language of a WYSIWYG word processor such as Word
  • HTML instructions divide the text of a document into blocks called elements. These can be divided into two broad categories
    • The BODY that defines how te document is to be displayed by the browser
    • The HEAD that defines information `about' the document
what is html1
What is HTML
  • HTML instructions are called tags, and look like <element_name> -- that is, they are simply the element name surrounded by left and right angle brackets.
  • Most tags mark blocks of the document for particular purpose or formatting:
    • The <element_name> tag marks the beginning of a section.
    • The end of a section is marked by the ending tag </element_name>
    • Example: <h1> Heading type h1 </h1>
html characteristics
HTML Characteristics
  • Empty Elements
    • Some elements are empty -- that is, they do not affect a block of the document. These elements do not require an ending tag. An example is the <HR> element, which draws a horizontal line across the page.
  • Upper and Lower Case
    • Element names are case insensitive. Thus, the the horizontal rule element can be written as any of <hr>, <Hr> or <HR>.
  • Elements can have Attributes
    • <h1 align="left"> Heading type h1 </h1>
let s make a document
Let’s make a Document
  • Create A New Folder
    • Right click on the desktop and select New / Folder
    • Name the folder playpen
view file extensions
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
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
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
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
General format:HTML Page

<html>

<head>

<title> My Page </title>

</head>

<body bgcolor=“#ffffff” text=“#000000” link=“#8866ff” alink=“#ff0000” vlink=“#ff00ff”>

</body>

</html>

some sample html tags
Some Sample HTML Tags

Page title

<title> </title>

First level header

<h1> </h1>

Paragraph

<p> </p>

Emphasis

<em> </em>

logical styles
Logical Styles

Bold

<strong> </strong>

Code

<code> </code>

Keyboard

<kbd> </kbd>

even more sample html tags
Even More Sample HTML Tags

Variable

<var> </var>

Citation

<cite> </cite>

Sample Output

<samp> </samp>

creating a web page1
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 html
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.
lists and more in html
Lists And More in HTML

Unordered List

<ul>

<li> </li>

</ul>

Hypertext anchor

<a href="doc.html"> </a>

lists and more in html1
Lists And More in HTML

Inline Image

<img src="name.format">

Comment

<!-- text -->

tables in html
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 html1
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 html2
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
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 html1
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
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 assignment1
In Class Assignment
  • Email your web page to me and send a copy to yourself.
    • bruce@cs.unca.edu