Download
1 / 26
260 likes | 274 Views
HTML – The Basics. The Internet. The World Wide Web Created in 1989 European Laboratory for Particle Physics (Geneva Switzerland) Purpose Provide an easy way to access cross-referenced documents that exist on the internet. Hyper text. The World Wide Web Hypertext links
E N D
The Internet • The World Wide Web • Created in 1989 • European Laboratory for Particle Physics (Geneva Switzerland) • Purpose • Provide an easy way to access cross-referenced documents that exist on the internet
Hyper text • The World Wide Web • Hypertext links • Contain reference to locate and open specific documents • Hypertext Markup Language (HTML) • Language used to design web pages (documents) • Web Browser • Program that displays HTML documents
URL • Uniform Resource Locator (URL) • Consists of 4 parts: • Protocol Hyper Text Transfer Protocol (HTTP) • Domain Name or Internet Protocol (IP) address • Directory • Filename • Specific document filename • index.(s)htm(l) or default.(s)htm(l)
HTML • HyperText Markup Language • A method of encoding for web pages that tells (suggests) how to display the content • HTML commands are called tags and are enclosed in angle brackets • opening tag < > • closing tag < / >
Explore a web page • Right click on a web page • select ViewSource • Look for the parts of the page – the tags • head • body • title • Pairs of tags • Opening tags < > • Closing tags < / > • UPPER CASE vs. lower case?
Parts of the Page • HTLM tags indicate this is an HTML document: <html> < /html> Each page has 2 parts: • Head – holds information like the page title <head> </head> • Body – holds the visible text and images <body> </body>
A Basic Web Page <html><head><title> MY PAGE - Home</title></head><body> Hello, world! </body> </html>
Test Page Go to your directory on the c: drive. Save your NotePad file as index.html To view it, open a browser and enter file://c:/yourDirectory/index.html Now, view the source using the right mouse button. Note: file not http because we are reading a local page.
Headings • Headings: <h#> My Heading </h#> where # is a number between 1 and 6 with 1 being the largest. Example: <h1> My Web Page </h1> <h3> Activities </h3> <h5> Computer Workshop </h5>
Images Include the source file and path (location) as well as alternate text for those who can not load the picture or need to use a text reader. <img src=“picture.gif" width=196 height=78 alt=“This is what you should see" border="0">
Other Common Tags • Paragraphs <p> </p> • Forced Break <br> </br> • Emphasis <em> </em> • Bold <b> </b> • Italics <i> </i> • Alignment <p align=left/right/center> </p> • Default is left.
Unnumbered Lists <ul> Output My list list item 1 list item 2 list item 3 HTML <ul>My list <li> list item 1 <li> list item 2 <li> list item 3 </ul> Note: list items can be multiple lines or paragraphs
Numbered or Ordered Lists <ol> Output My list 1. list item 1 2. list item 2 3. list item 3 HTML <ol>My ordered list <li> list item 1 <li> list item 2 <li> list item 3 </ol> Note: list items can be multiple lines or paragraphs
Horizontal Rules/Lines <hr> </hr> Example with parameters: <hr> size=4 width=“75”% </hr> Produces a line size 4 that goes across 75% of the page.
Links to Other Pages Use the anchor tag <a … > </a> • Link to another page <a href=“page2.htm”>Page 2 </a> where page2.htm is located in the same directory • Link to a web page <a href=“www.yahoo.com/mypage/page2.htm”>Page 2 </a> Note: some OS are case sensitive so be consistent in names.
Links to Specific Sections • Link to another section of a page 1. Create a named anchor in the section <h2><a name=“S2”>Section 2 </a></h2> 2. Create the link in the same document or another document. <a href=“MyWebPage.htm#P2">Section 2</a>
Basic Settings • Background: bgcolor=#ffffff • Font and alternates: {font-family: Arial, Helvetica, sans-serif } • Font color: text="#333333"
Basic Settings • Links: • Link: link="#333333" • Visited link: vlink="#333333" • Active link: alink="#333333" • Margins: leftmargin=0 topmargin=0 marginwidth=0 marginheight=0
Example <html><head><title> MY PAGE - Home</title></head><body bgcolor=#ffffff leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 text="#333333" link="#333333" vlink="#333333" alink="#333333"> Hello, world! </body> </html>
Control Elements • Control elements : • text boxes for text and numerical entries • selection lists for long lists of options, usually appearing in a drop-down list box • radio buttons, also called option buttons, to select a single option from a predefined list • check boxes to specify an item as either present or absent • text areas for extended entries that can include several lines of text • buttons that can be clicked to start processing the form • Each control element in which the user can enter information is called a field.
Working with Text Boxes • Text boxes are created using the <input> tag. • The general syntax is: <input type=“type” name=“name” id=“id”> • To create a text box, you would enter the tag: <input type=“text”>
Creating a Text Box • To create a text box, use the following HTML code: <input name=“name” id=“id” value=“value” size=“value” maxlength=“value”> • name and id attributes identify the field • value - a default value to the text box • size - the width of the text box in number of characters • maxlength - the maximum number of characters allowed in the field
Creating a Push Button • One type of button, called a push button, is created using the <input> tag as follows: <input type=“button” value=“text”> • text is the text that appears on the button • By themselves, push buttons perform no actions in the Web page. • To create an action, write a script or program that runs automatically when the button is clicked. • In the following example, the functions getAverage() and clearAll() should be implement inside the script part (will see it later).
