Building A Website

2,200
-1

Published on

Published in: Business, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,200
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building A Website

  1. 1. Create a new Vocabulary List Save as “Web Vocab Your Name” <ul><li>Hypertext - Text containing links to other documents - words or phrases in the document that can be chosen by a reader causing another document to be retrieved and displayed. </li></ul><ul><li>HTML - (Hypertext Markup Language) -- The coding language used to create Hypertext documents for use on the World Wide Web. </li></ul>
  2. 2. Web Design <ul><li>Web site uses. Types of sites. </li></ul><ul><ul><li>www. dbaaahockey .com </li></ul></ul><ul><li>Number of web sites </li></ul><ul><ul><li>Hundreds? </li></ul></ul><ul><ul><li>Thousands? </li></ul></ul><ul><ul><li>Millions? </li></ul></ul>
  3. 3. Why Do We Use The Internet? <ul><li>School Research </li></ul><ul><li>Information </li></ul><ul><li>Business </li></ul><ul><ul><li>Banking </li></ul></ul><ul><ul><li>Making purchases </li></ul></ul><ul><li>Recreation </li></ul><ul><ul><li>Gaming </li></ul></ul><ul><li>Entertainment </li></ul><ul><ul><li>Music </li></ul></ul><ul><ul><li>Videos </li></ul></ul>
  4. 4. School Research
  5. 5. Information
  6. 6. Banking / Buying
  7. 7. Music Sites
  8. 8. Gaming
  9. 9. Designing A Personal Web Page <ul><li>What will your site look like? </li></ul><ul><li>What is it’s purpose? </li></ul><ul><li>What do you want to share </li></ul><ul><li>with the WORLD ? </li></ul><ul><li>Make a list of what you want to include. </li></ul><ul><ul><li>Hobbies, Interests, Likes, Music, Movies </li></ul></ul>
  10. 10. Brainstorm a list of Items to include Microsoft Word Document Save as: Website Brainstorm Your Name
  11. 11. Source Code Tags Start a list of HTML source tags. Open a new word document Title is HTML Codes Save as HTML Codes in your folder Add the following to the list: <HTML> Signifies the start of an html document </html> Signifies the END of an html document <FONT …> Starts formatting the font </font> Ends the formatting of the font
  12. 12. Getting Started With HTML <ul><li>NEVER USE MICROSOFT WORD!!!!! </li></ul><ul><li>Use Notepad </li></ul>
  13. 13. A Quick Sample of HTML <html> <head> <title>Mr. Marabeas’ Website</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Type the following in NOTEPAD Save as “first homepage your name.html ”
  14. 14. Sample Website
  15. 15. HTML Source Code
  16. 16. Example of hyperlink code
  17. 17. Add these html codes to your list <ul><li><h1> heading </li></ul><ul><ul><ul><li>(larger number = smaller heading) </li></ul></ul></ul><ul><li><b> bold text </li></ul><ul><li><br> starts a new line </li></ul><ul><li><p> starts a new paragraph </li></ul><ul><li><a href=“http://www.website_address.com> Website Name </a> </li></ul><ul><ul><li>Anchor —links another website to your site </li></ul></ul>
  18. 18. Career Opportunities
  19. 19. Designing a Website
  20. 20. Examples of codes http://www.web-source.net/html_codes_chart.htm <FONT> font <FONT FACE=&quot;Times New Roman&quot; SIZE=&quot;4&quot;>Example </FONT> Example <FONT> font <FONT FACE=&quot;Times New Roman&quot; SIZE=&quot;+3&quot; COLOR=&quot;#FF0000&quot;>Example </FONT> Example <H1> heading 1 <H1> Heading 1 Example </H1> Heading 1 Example <A - anchor <A HREF=&quot;http://www.yourdomain.com/&quot;>Visit Our Site </A> Visit Our Site
  21. 21. Try it Online http://www.w3schools.com/html/ Go to this site. It should be in your favorites in Internet Explorer
  22. 22. Another Site That is Useful http://www.web-source.net/html_codes_chart.htm This should also be in your favorites
  23. 23. In the Website you started yesterday, format the following… <ul><li>Make a heading to your page </li></ul><ul><li>Center the heading </li></ul><ul><ul><li><align=center> </li></ul></ul><ul><li>Make the background yellow </li></ul><ul><ul><li><body bgcolor=yellow> </li></ul></ul><ul><li>Make the text blue </li></ul><ul><ul><li><font color=blue> </li></ul></ul><ul><ul><li>Remember to end the tags </…> </li></ul></ul>
  24. 24. Adding a link <ul><li>Create a link to another website </li></ul><ul><li><a href=“ http://www.csdm.k12.mi.us ”> Crestwood School District </a> </li></ul>
  25. 25. Add this code to your vocabulary code list This is a code that defines a TABLE <table> <tr> <td><td><td> </tr> <tr> <td><td><td> </tr> <tr> <td><td><td> </tr> </table>
  26. 26. HTML code for a table <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <table> Begins the table <tr> Begins the first row <td> Begins the first cell </td> Ends the first cell </tr> Ends the row </table> Ends the table
  27. 27. HTML Code for a Table <ul><li>Task: Add a table to your web page </li></ul><ul><li>The table will be 3 x 3 </li></ul>Row 3 Cell 3 Row3 Cell 2 Row 3 Cell 1 Row 2 Cell 3 Row 2 Cell 2 Row 2 Cell 1 Row 1 Cell 3 Row 1 Cell 2 Row 1 Cell 1
  28. 28. What Will Your Web Page Look Like? <ul><li>Create a sketch of what you </li></ul><ul><li>want the web page to look like. </li></ul>Typershark for 10 minutes
  29. 29. What will be in your cells? Row 3, Cell 3 Another picture of the place Row 3, Cell 2 Describe someplace you have been or would like to go Row 3, Cell 1 A picture of the place Row 2, Cell 3 A picture of your hobby or sport Row 2, Cell 2 A picture of a hobby or sport you like to do Row 2, Cell 1 Clip art of your activity Row 1, Cell 3 A short introduction of yourself Row 1, Cell 2 A picture of you Row 1, Cell 1 3 links to other sites
  30. 30. Format of Your Table Title of Your Site Row 3 Cell 3 Picture with caption of Row 3 Cell 2 Row3 Cell 2 Places you have been or would like to go Row 3 Cell 1 Picture with caption of Row 3 Cell 2 Row 2 Cell 3 Picture of activity from Row 2 Cell 2 Row 2 Cell 2 Description of activity you like to do Row 2 Cell 1 Clipart of activity from Row 2 Cell 2 Row 1 Cell 3 Short intro of yourself Row 1 Cell 2 Picture of you with a caption Row 1 Cell 1 3 Links to other sites
  31. 31. What You Will Do Today <ul><li>Sketch your site on a piece of paper </li></ul><ul><li>Make sure it has the required elements </li></ul><ul><li>Make sure it has your name on it </li></ul><ul><li>Turn it in to the appropriate hour’s tray when you are finished. </li></ul><ul><li>Begin laying out the table on your html source page </li></ul><ul><li>Remember to open the site in Internet Explorer and then “View Source” to edit the page </li></ul>
  32. 32. Formatting Photos <ul><li>We will be formatting photos for creativeness and to be used in certain situations. </li></ul><ul><li>Follow along as we explore the tools found in the program “ The Gimp ” </li></ul><ul><li>Watch as the tools are shown to you, then try the tools as instructed. </li></ul>
  33. 33. HTML Website <ul><li>Continue working on your cells </li></ul><ul><ul><li>Get your links working </li></ul></ul><ul><ul><li>Get your image saved in your html folder </li></ul></ul><ul><ul><li>Format your image to 400x350 to fit in the cell </li></ul></ul><ul><li>Use the html website for your source codes </li></ul><ul><ul><li>www.web-source.net/html </li></ul></ul><ul><ul><li>www.gifs.net is a source for free animated clipart. Save to your folder as a .gif file </li></ul></ul>
  34. 34. Extra Credit <ul><li>Add a simple second page to your website and create a link to it. </li></ul><ul><ul><li>You will have to put the content in the folder you link to </li></ul></ul><ul><ul><li>The link will look something like this </li></ul></ul><ul><ul><ul><li><a href=“c:marabeas website/page 2.html”> Page 2 </a> </li></ul></ul></ul><ul><ul><li>Put 4 more pictures of your travels and hobbies/sport </li></ul></ul><ul><ul><li>Use a 2 x 2 table to format the page </li></ul></ul><ul><ul><li>Give the page a title </li></ul></ul>
  35. 35. Typershark for 10 minutes Go to the file share network 10.29.41.34 mara6 power6 Go to Mara6 folder >Website photos >find your picture and save it to your website folder >>>name it something simple like “mypic.jpg”
  36. 36. Web Design Terms Net Wise Terms CGI - A CGI is a small program that takes data from a web server and does something with it, like turning the data into a database query or content into an e-mail message. GIF - (Graphic Interchange Format) -- A common format for image files, especially suitable for images containing large areas of the same color. HTML - (Hypertext Markup Language) -- The coding language used to create Hypertext documents for use on the World Wide Web. JPEG - (Joint Photographic Experts Group) -- JPEG is most commonly mentioned as a format for image files. JPEG format is preferred to the GIF format for photographic images. Hypertext - Text containing links to other documents - words or phrases in the document that can be chosen by a reader causing another document to be retrieved and displayed. Net Safety You need to abide by the school's Acceptable Use Policy to guide you in what is appropriate.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×