Web Pages Anyone with access to the Internet can post a Web page. You can create a Web page with just a text editor. There are Web page construction tools available that allow you to create pages without understanding the underlying machinery.
Hypertext Markup Language HTML Hypertext Markup Language Coding of web pages for a browser to render A Web page is simply a text file written in hypertext markup language (HTML). Markup language is NOT a programming language (what is a programming language ? – later) Consists of TAGS describing contents HTML contains tags specifying text, images, hypertext links Bold, Italics, color of text, Size,…… e.g. In browser, “The Web browser is to view HTML documents” The <b>Web browser</b> is to view <u>HTML</u> documents.
Your First Web Page Open Notepad Type in what is on the right Save as C:\100\test.html Double click on the test.html file Note a title in the web page Note different heading styles <html> <head> <title>My First Web Page </title> </head> <body> Hello World! This is a test. <h1>Heading style 1 </h1> <h2>Heading style 2 </h2> <h3>Heading style 3 </h3> <h4>Heading style 4 </h4> <h5>Heading style 5 </h5> <h6>Heading style 6 </h6> </body> </html>
A HTML file Minimal tags <html> </html> : start and end of a html file <head> </head> : header info such as title <body> </body> : actual display body Regions of text <div></div> <p> </p> <span></span> Specific Attributes <br /> --- line break <i> </i> --- italicize <b></b> or <strong></strong> -- bold <sup></sup> and <sub></sub> -- super or subscript <big></big> and <small></small> --- font size <body style=“background-color:lavender”>
Style Spec Style=“text-align:right” Style=“font-family:Arial” Basic font types Sans-serif: Plain --- arial and helvetica Serif: embellishments called serifs at tips of letters --- times and times new roman Monspaced: characters with equal widths --- courier and courier new From a list, the first available font will be used Face=“airal, helvetica, sans-serif” Style=“font-size:12pt” Style=“font_weight:bold” Style=“color:blue”
Hyperlink Link to another document <a href=hello.html>Hello World</a> Link to wikipedia <a href=“http://en.wikipedia.org/wiki/Ernest_Hemingway> To Hemingway </a> Link to an email address <a href=mailto:kim@cs.uml.edu> Email me </a> Google map <a href=http://maps.google.com/maps?q=One+University+Dr.,+Lowell,+MA>view map </a> Image <img src=“flag_us.jpg” align=left>
<table> </table> <tr> </tr> --- table row <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Table <table> </table> <tr> </tr> --- table row <td> </td> --- table data List <ol> </ol> -- ordered list <ul> </ul> -- unordered <dl></dl> -- definition <ul> <li>Coffee</li> <li>Milk</li> </ul>
WYSIWYG What is the objective ? Plan for web pages Tools A free Web page editor named Kompozer www.kompozer.net Other similar software: Nvu http://www.net2.com/nvu/download.html Download kompozer to C:\100 and extract Wix.com web.com webs.com Wordpress.com Tutorial: www.w3schools.com