Downloaded 11 times
More Related Content
Building A Website
- 1. Create a newVocabulary List Save as “Web Vocab Your Name” 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. HTML - (Hypertext Markup Language) -- The coding language used to create Hypertext documents for use on the World Wide Web.
- 2. Web Design Website uses. Types of sites. www. dbaaahockey .com Number of web sites Hundreds? Thousands? Millions?
- 3. Why Do WeUse The Internet? School Research Information Business Banking Making purchases Recreation Gaming Entertainment Music Videos
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. Designing A PersonalWeb Page What will your site look like? What is it’s purpose? What do you want to share with the WORLD ? Make a list of what you want to include. Hobbies, Interests, Likes, Music, Movies
- 10. Brainstorm a list of Items to include Microsoft Word Document Save as: Website Brainstorm Your Name
- 11. Source Code TagsStart 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. Getting Started WithHTML NEVER USE MICROSOFT WORD!!!!! Use Notepad
- 13. A Quick Sampleof 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.
- 15.
- 16.
- 17. Add these htmlcodes to your list <h1> heading (larger number = smaller heading) <b> bold text <br> starts a new line <p> starts a new paragraph <a href=“http://www.website_address.com> Website Name </a> Anchor —links another website to your site
- 18.
- 19.
- 20. Examples of codeshttp://www.web-source.net/html_codes_chart.htm <FONT> font <FONT FACE="Times New Roman" SIZE="4">Example </FONT> Example <FONT> font <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example </FONT> Example <H1> heading 1 <H1> Heading 1 Example </H1> Heading 1 Example <A - anchor <A HREF="http://www.yourdomain.com/">Visit Our Site </A> Visit Our Site
- 21. Try it Onlinehttp://www.w3schools.com/html/ Go to this site. It should be in your favorites in Internet Explorer
- 22. Another Site Thatis Useful http://www.web-source.net/html_codes_chart.htm This should also be in your favorites
- 23. In the Websiteyou started yesterday, format the following… Make a heading to your page Center the heading <align=center> Make the background yellow <body bgcolor=yellow> Make the text blue <font color=blue> Remember to end the tags </…>
- 24. Adding a linkCreate a link to another website <a href=“ http://www.csdm.k12.mi.us ”> Crestwood School District </a>
- 25. Add this codeto 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. 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. HTML Code fora Table Task: Add a table to your web page The table will be 3 x 3 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. What Will YourWeb Page Look Like? Create a sketch of what you want the web page to look like. Typershark for 10 minutes
- 29. What will bein 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. Format of YourTable 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. What You WillDo Today Sketch your site on a piece of paper Make sure it has the required elements Make sure it has your name on it Turn it in to the appropriate hour’s tray when you are finished. Begin laying out the table on your html source page Remember to open the site in Internet Explorer and then “View Source” to edit the page
- 32. Formatting Photos Wewill be formatting photos for creativeness and to be used in certain situations. Follow along as we explore the tools found in the program “ The Gimp ” Watch as the tools are shown to you, then try the tools as instructed.
- 33. HTML Website Continueworking on your cells Get your links working Get your image saved in your html folder Format your image to 400x350 to fit in the cell Use the html website for your source codes www.web-source.net/html www.gifs.net is a source for free animated clipart. Save to your folder as a .gif file
- 34. Extra Credit Adda simple second page to your website and create a link to it. You will have to put the content in the folder you link to The link will look something like this <a href=“c:\marabeas website/page 2.html”> Page 2 </a> Put 4 more pictures of your travels and hobbies/sport Use a 2 x 2 table to format the page Give the page a title
- 35. Typershark for 10minutes 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. Web Design TermsNet 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.