KEMBAR78
Building A Website | PPT
Create a new Vocabulary 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.
Web Design Web site uses.  Types of sites. www. dbaaahockey .com Number of web sites Hundreds? Thousands? Millions?
Why Do We Use The Internet? School Research Information Business Banking Making purchases Recreation Gaming Entertainment Music Videos
School Research
Information
Banking / Buying
Music Sites
Gaming
Designing A Personal Web 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
Brainstorm a list  of Items to include Microsoft Word Document Save as: Website Brainstorm Your Name
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
Getting Started With HTML NEVER USE MICROSOFT WORD!!!!! Use Notepad
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 ”
Sample Website
HTML Source Code
Example of hyperlink code
Add these html codes 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
Career Opportunities
Designing a Website
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
Try it Online http://www.w3schools.com/html/   Go to this site.  It should be in your favorites in Internet Explorer
Another Site That is Useful http://www.web-source.net/html_codes_chart.htm   This should also be in your  favorites
In the Website you 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 </…>
Adding a link Create a link to another website <a href=“ http://www.csdm.k12.mi.us ”>   Crestwood School District </a>
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>
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
HTML Code for a 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
What Will Your Web Page  Look Like? Create a sketch of what you  want the web page to look like. Typershark for 10 minutes
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
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
What You Will Do 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
Formatting Photos We will 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.
HTML Website Continue working 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
Extra Credit Add a 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
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”
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.

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=&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.
    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.