1 / 16

Designing a Webpage

Designing a Webpage. (from the very start). Background of HTML. Don’t download a complete page. Download set of instructions (HTML): Put this writing here… Get this picture & put here… Pictures take longer to appear. Software for HTML. Webpage design software, eg. Dreamweaver

farren
Download Presentation

Designing a Webpage

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. Designing a Webpage (from the very start)

  2. Background of HTML • Don’t download a complete page. • Download set of instructions (HTML): • Put this writing here… • Get this picture & put here… • Pictures take longer to appear.

  3. Software for HTML • Webpage design software, eg. • Dreamweaver • Microsoft Frontpage • Write HTML directly using notepad.

  4. Getting Started <html> <body> text etc… </body> </html>

  5. Changing font, colour etc.. • To change font size and colour: <font color="purple" size="6"> text </font>

  6. Page titles <html> <head> <title> title of the page </title> </head> <body>

  7. Creating Links • Creating links between webpages: <a href=“location"> name of link on page </a> • href = link to another webpage • vref = link to another part of this webpage.

  8. Inserting pictures • Inserting pictures into a webpage: <img src="Picture.jpg">

  9. Making text appear • Making text appear when the mouse hovers over a picture: <img src="Picture.jpg" alt=“text">

  10. Creating links • Turning a picture into a link: <a href=“location"> <img src="Picture.jpg"> </a>

  11. Background pictures colours • Putting pictures in the background: <body background="Picture.jpg"> • Changing background colours: <body bgcolor=“blue">

  12. So far… • Text: • Change colour & size. • Create links. • Pictures: • Adding text. • Create links. • Background.

  13. …and now… • …the advanced bit… Tables!

  14. Tables <table width="100%" > <tr> <td width="70%"> </td> : </tr> </table>

  15. Advanced Tables! • Adding more tables… • Simply repeat the “code” • Can even put tables within tables!

  16. Other Tips • To view HTML code • Right click a webpage • Select “view source” • Legality of pictures! • Buy a book… or “google”.

More Related