1 / 250

Software Developer Technician

Software Developer Technician. Web. Objectives. Introduction to the Internet Website introduction World Wide Web Consortium HTML. The Internet. Who owns the Internet. No single organisation owns the Internet

tuesday
Download Presentation

Software Developer Technician

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. Software Developer Technician Web

  2. Objectives • Introduction to the Internet • Website introduction • World Wide Web Consortium • HTML

  3. The Internet

  4. Who owns the Internet • No single organisation owns the Internet • There are many organizations, corporations, governments, schools, private citizens and service providers that all own pieces of the infrastructure • There are organisations that govern and standardise attributes (W3C)

  5. Languages of the Internet • HTML • XHTML • CSS • JavaScript • Java • PHP • ASP Script languages • Code tags <b></b> • Modifies how the document is displayed • Written as text • Stored as text • Transmitted as text

  6. HTML HTML HTML HTML • Hyper Text Mark-up Language • Server sends HTML to client machines • The Website is displayed on the client machines • There is NO server-side interaction

  7. World Wide Web Consortium (W3C) • Supervisory role of the W3C • Defines interoperability (work together) • Guidelines • Standards • HTML standard syntax • XHTML standard syntax • http://www.w3.org/

  8. HTML • HTML stands for Hyper Text Markup Language • An HTML file is a text file containing small markup tags • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor or a Web Authorising Tool

  9. XHTML • XHTML stands for eXtensibleHyperTextMarkup Language • XHTML is a combination of HTML and XML • XHTML improves browser compatibility and data retrieval • XHTML is • aimed to replace HTML • almost identical to HTML 4.01 • a stricter and cleaner version of HTML • XHTML is a W3C Recommendation

  10. HTML tags HTML tags normally come in pairs

  11. HTML Basic Document Start HTML Header information <html> <head> <title>Document name goes here</title> </head> <body> Visible text goes here </body> </html> Page information

  12. Notepad • Create your first webpage using Notepad • The body text should include your name in bold • Save the file as "mypage.html".

  13. W3C rules • HTML not case sensitive • W3C recommend lowercase • Tags should have closing tags • <p></p> • <br />

  14. HTML Basic Formatting <html> <head> <title>Document name goes here</title> </head> <body> <b>My first Webpage</b> by Joe Blogs </body> </html> Add Italic here Add Bold

  15. Headings • Headings are defined with the <h1> to <h6> tags. • <h1>This is a large heading</h1> • <h2>This is a heading</h2> • <h3>This is a heading</h3> • <h4>This is a heading</h4> • <h5>This is a heading</h5> • <h6>This is a small heading</h6> • HTML automatically adds an extra blank line before and after a heading.

  16. HTML Basic Formatting <html> <head> <title>Document name goes here</title> </head> <body> <h1>This is a large heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a small heading</h6> </body> </html>

  17. HTML Basic Paragraphing <html> <head> <title>Document name goes here</title> </head> <body> <hr> <p>Paragraphs have a blank space before and after the text</p> <p>This is useful to distinguish section of text</p> <b>Sometimes extra <i>line breaks</i> are not needed</b> <br />A simple <i>Line Break</i> can be used here <br />Note it does not need a closing tag </body> </html>

  18. Tags and Attributes • Some tags can have extra parameters (attributes) • An attribute provides extra formatting functionality • Not all tags allow attributes <tag attribute=“parameter”></tag>

  19. Alignment (Horizontal) • Alignment defines the positioning of text <html> <head> <title>Document name goes here</title> </head> <body> <h1 align=‘center’>This is a large heading</h1> <h2 align=‘left’>This is an h2 heading</h2> <h3 align=‘right’>This is an h3 heading</h3> <h4 align=‘justify’ >This is an h4 heading</h4> </body> </html>

  20. Paragraph alignment <p align=“center”></p>

  21. Background attribute • Defining a background colour in the body tag • <body bgcolor=‘#000000’> (This is deprecated) • <body bgcolor=‘rgb(0,0,0)’> • <body bgcolor=‘black’> • Defining a background image • <body background="www.images.com/clouds.gif"> • Note W3C has deprecated bgcolor, background attribute in latest versions of HTML (HTML 4 and XHTML) – use CSS instead.

  22. Colours 256 * 256 * 256 = 16 777 216 http://www.computerhope.com/htmcolor.htm

  23. Font tag • Format font <font face="Verdana">text</font> • Format font and size (size is 0-7, not scaled in points) <font size="2" face="Verdana">text</font> • Format colour <font color="#c0c0c0">text</font> Note W3C has deprecated the font attribute in latest versions of HTML (HTML 4 and XHTML).– use CSS instead.

  24. DIV tag • Generic block element • Serves no direct purpose • Facilitates styling attributes • Heavily used in CSS <div></div>

  25. DIV examples <div align="center“ style="color:#FF0000; " class="menu"> </div>

  26. Summary • Introduction to the Internet • Website introduction • World Wide Web Consortium • HTML

  27. Next Time • More HTML knowledge • Tables • Table formatting • Create a simple table based website

  28. Tutorial Session

  29. Task - Formatting • Format a webpage in notepad • Follow the task sheet

  30. Positioning content • Only three ways available to position content Left Centre Right • Tables provide more flexibility for arranging items on page • NOT ideal

  31. Tables Best Pizzas Home Menu Takeaway Contact Us

  32. Task - Tables Change this number <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> row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Table>(tr>(td*2)) *2

  33. Heading A HeadingB row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Task - Tables • Add a preceding row for column headings Optionally, use the heading tag <th></th> tag instead of <td></td> for heading cells

  34. Sizing Cells • Cells can have specific sizes by defining the • Height • Width • Browsers use the sizing units: • Percentage of screen width (%) • Pixels (width & height)

  35. Sizing Cells 300px 75% 25% Heading A Heading B row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

  36. Task – Sizing table <table border="1" width="300"> <tr> <th>Heading A</th> <th>Heading B</th> </tr> <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> Change to 50%

  37. Task – Sizing Cells Heading B Heading A <table border="1" width="300"> <tr> <th width="25%">Heading A</th> <th width="75%">Heading B</th> </tr> <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> row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 25% 75%

  38. Merging Cells • Merging allows several cells to become one • Merge Rows • Merge Columns Merged Cell row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

  39. Merged Cell row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Task – Merged Columns <table border="1" width="75%"> <tr> <thcolspan="2">Merged Cell</th> </tr> <tr> <td width="25%">row 1, cell 1</td> <td width="75%">row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

  40. Task – Merged Rows 75% of screen width Merged Cell <table border="1" width="75%"> <tr> <thcolspan="2">Merged Cell</th> </tr> <tr> <td width="25%"> row 1, cell 1</td> <td rowspan="2" width="50%">Merged Rows</td> </tr> <tr> <td>row 2, cell 1</td> </tr> </table> Merged Rows row 1, cell 1 row 2, cell 1 50% of table width

  41. Cell colours • Change the entire table to red • <table bgcolor="#FF0000“> • Change the row to red • <trbgcolor="#FF0000“> • Change a cell to red • <td bgcolor="#FF0000“>

  42. Tables and Images • To insert an image into a document use • <imgsrc="url"> • <imgsrc="file:///c:/ski.gif"> • Insert an image into the tables • Resize image using the width and height parameters • <imgsrc="url" width="105" height="89“ > • Alt attribute. Display text if browser fails to display image • <imgsrc="url" alt="Big Boat“>

  43. Summary • More HTML knowledge • Tables • Table formatting

  44. Publish the following sales in the companies Intranet Use tables and Notepad Task – Simple table

  45. Task – Create single web page • Create simple HTML webpage • Use Tables • Text is stored in pizzaShed.txt • Use images store in studShare

  46. Colour=#C0C0C0 Create a webpage 80% (centred table) Pizza Shed Home Menu About Contact us • Homemade specialty pizza delivered to your door by our fast & friendly staff. • Delivery hours • Sun-Thu 2pm-11pm • Fri-Sat 4pm-1am • If you are not sure if you are within our delivery area please call with the location you are ordering from. 100px 250px Extension task: add a hyperlink to another simple page with the same table layout

  47. HTTP

  48. Objectives • Understand: • Basic CSS features • Implementing CSS

  49. CSS

  50. Online resources • http://www.w3schools.com/css/

More Related