Uploaded byJimmy Mander
Learn HTML
This document provides an overview of how to design basic websites using HTML and FrontPage. It discusses how to create webpages by writing HTML code by hand or using website authoring software. It demonstrates how to format text using HTML tags, add images and hyperlinks, create and link CSS stylesheets to style pages, and arrange content using tables. The document guides the reader through each step using examples and the preview functionality in FrontPage.
Learn HTML
- 1. Designing Websites Using HTMLand FrontPage
- 2. A Typical Webpage View Source View Source A webpage is a A webpage is a text file text file containing containing instructions to instructions to tell aacomputer tell computer how the page how the page should look. should look.
- 3. Creating Webpages ● You can create a page by hand, using a text-editor like Notepad ● You can use web-based tools, eg Blogging/Content Management Systems to store your data and present it in different ways. ● You can use website authoring software, eg FrontPage, Dreamweaver to create a page, and upload it when you are ready
- 4. HTML and FrontPage FrontPage is an FrontPage is an editor that editor that enables you to enables you to create the create the HTML code HTML code used to make used to make webpages webpages
- 5. The HTML forour first page HTML tags are HTML tags are usually in pairs usually in pairs Between the Between the <head> and </head> <head> and </head> tags, you find tags, you find information about information about the page the page Between the Between the <body> and </body> <body> and </body> tags, you find tags, you find instructions for instructions for displaying text, displaying text, pictures etc... pictures etc...
- 6. Adding text toour first page Paragraph styles Paragraph styles We can use We can use different heading different heading sizes from sizes from <h1> Heading 11 <h1> Heading (the biggest) (the biggest) to to <h6> Heading 66 <h6> Heading (the smallest) (the smallest) to make our to make our headings stand headings stand out out
- 7. Using HTML toformat our text To format our To format our text quickly, text quickly, we can use we can use aacascading cascading style sheet style sheet (CSS) page (CSS) page
- 8. Creating a blankstylesheet We can choose aa We can choose ready-made ready-made template, or template, or we can make our we can make our own... own...
- 9. Selecting styles tomodify The computer The computer displays aasample displays sample to show how the to show how the text will look, text will look, as well as the as well as the instructions it instructions it uses for the uses for the We can look at We can look at web browser. web browser. two lists of styles. two lists of styles. The original tags, The original tags, and the ones we and the ones we have changed. have changed.
- 10. Changing formatting fora style We can change We can change several several different different attributes for attributes for aaparagraph paragraph style style
- 11. The Font Tab As well as the size, style As well as the size, style and colour of aafont, and colour of font, there are other effects there are other effects we can choose... we can choose... For the background, For the background, border, line-spacing border, line-spacing and alignment, other tabs and alignment, other tabs can be selected when can be selected when modifying aastyle. modifying style.
- 12. A CSS file Clicking on the Style Clicking on the Style toolbar allows you to toolbar allows you to continue modifying styles continue modifying styles
- 13. Linking to aCSS file To use aaCSS file, To use CSS file, you must first link to it you must first link to it from your HTML file... from your HTML file...
- 14. Multiple stylesheets? If you needed to, If you needed to, you could link to you could link to more than one more than one stylesheet! stylesheet!
- 15. Linking code forstylesheets The code for The code for linking to aa linking to CSS file is CSS file is added to the added to the <head> by <head> by FrontPage FrontPage
- 16. Previewing a page The page preview tab The page preview tab will automatically show will automatically show our page with all the our page with all the new CSS formatting new CSS formatting
- 17. Adding a picture The <img src> tag will The <img src> tag will display aapicture in our display picture in our page. It can be modified page. It can be modified by using height, width, by using height, width, border and alt within border and alt within the tags. the tags.
- 18. Picture Preview One way to change One way to change aapage's layout is page's layout is to use tables to use tables
- 19. Adding a hyperlink Hyperlinks make aa Hyperlinks make webpage much more webpage much more useful than aaprintout useful than printout
- 20. Absolute and RelativeURLs We don't have to link to just We don't have to link to just web pages. web pages. For aapage in the same directory as this file, For page in the same directory as this file, just the filename would be enough just the filename would be enough ––but watch out for upper/lower case letters! but watch out for upper/lower case letters!
- 21. Following links You can test You can test your page your page to see if the to see if the links you links you have made have made actually work actually work
- 22. Tables! A table doesn't A table doesn't have to be used have to be used just for tabular just for tabular data. We can data. We can also use it to also use it to arrange items arrange items on aapage to on page to look more look more interesting. interesting.
- 23. The table sofar... You can drag and drop You can drag and drop text just like you text just like you would with aa would with word-processor word-processor
- 24. Modifying a table Once aatable is Once table is made, you have made, you have complete control complete control of the way both of the way both the entire table, the entire table, or individual cells or individual cells are displayed. are displayed.
- 25.
- 26.
- 27. A final previewof our page