Building A Website
description
Transcript of Building A Website
![Page 1: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/1.jpg)
Create a new Vocabulary ListSave 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.
![Page 2: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/2.jpg)
Web Design
Web site uses. Types of sites.www.dbaaahockey.com
Number of web sitesHundreds?Thousands?Millions?
![Page 3: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/3.jpg)
Why Do We Use The Internet? School Research Information Business
Banking Making purchases
Recreation Gaming
Entertainment Music Videos
![Page 4: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/4.jpg)
School Research
![Page 5: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/5.jpg)
Information
![Page 6: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/6.jpg)
Banking / Buying
![Page 7: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/7.jpg)
Music Sites
![Page 8: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/8.jpg)
Gaming
![Page 9: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/9.jpg)
Designing A Personal Web Page
What will your site look like?What is it’s purpose?What do you want to share
with the WORLDWORLD?Make a list of what you want to include.
Hobbies, Interests, Likes, Music, Movies
![Page 10: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/10.jpg)
Brainstorm a list of Items to include
Microsoft Word DocumentSave as:
Website Brainstorm Your Name
![Page 11: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/11.jpg)
Source Code TagsStart a list of HTML source tags.Open a new word documentTitle is HTML CodesSave as HTML Codes in your folderAdd 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
![Page 12: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/12.jpg)
Getting Started With HTMLNEVER USE MICROSOFT WORD!!!!!
Use Notepad
Microsoft Word.lnk
![Page 13: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/13.jpg)
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”
![Page 14: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/14.jpg)
Sample Website
![Page 15: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/15.jpg)
HTML Source Code
![Page 16: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/16.jpg)
Example of hyperlink code
![Page 17: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/17.jpg)
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 NameWebsite Name</a> Anchor—links another website to your site
![Page 18: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/18.jpg)
Career Opportunities
![Page 19: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/19.jpg)
Designing a Website
![Page 20: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/20.jpg)
Examples of codes
<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
http://www.web-source.net/html_codes_chart.htm
<A - anchor <A HREF="http://www.yourdomain.com/">Visit Our Site</A> Visit Our Site
![Page 21: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/21.jpg)
Try it Online
http://www.w3schools.com/html/
Go to this site.
It should be in your favorites in Internet Explorer
![Page 22: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/22.jpg)
Another Site That is Useful
http://www.web-source.net/html_codes_chart.htm
This should also be in your favorites
![Page 23: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/23.jpg)
In the Website you started yesterday, format the following…
Make a heading to your pageCenter the heading
<align=center>Make the background yellow
<body bgcolor=yellow>Make the text blue
<font color=blue>
Remember to end the tags </…>
![Page 24: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/24.jpg)
Adding a linkCreate a link to another website<a href=“http://www.csdm.k12.mi.us”>
Crestwood School District</a>
![Page 25: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/25.jpg)
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>
![Page 26: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/26.jpg)
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
![Page 27: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/27.jpg)
HTML Code for a Table
Task: Add a table to your web page
The table will be 3 x 3
Row 1
Cell 1
Row 1
Cell 2
Row 1
Cell 3
Row 2
Cell 1
Row 2
Cell 2
Row 2
Cell 3
Row 3
Cell 1
Row3
Cell 2
Row 3
Cell 3
![Page 28: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/28.jpg)
What Will Your Web Page Look Like?
Create a sketch of what you
want the web page to look like.
Typershark for 10 minutes
![Page 29: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/29.jpg)
What will be in your cells?Row 1, Cell 1
3 links to other sites
Row 1, Cell 2A picture of you
Row 1, Cell 3A short introduction
of yourself
Row 2, Cell 1Clip art of your
activity
Row 2, Cell 2A picture of a hobby or sport you like to
do
Row 2, Cell 3A picture of your hobby or sport
Row 3, Cell 1A picture of the place
Row 3, Cell 2Describe someplace
you have been or would like to go
Row 3, Cell 3
Another picture of the place
![Page 30: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/30.jpg)
Format of Your Table
Row 1 Cell 1
3 Links to other sites
Row 1 Cell 2
Picture of you with a caption
Row 1 Cell 3
Short intro of yourself
Row 2 Cell 1
Clipart of activity from Row 2 Cell
2
Row 2 Cell 2
Description of activity you like
to do
Row 2 Cell 3
Picture of activity from Row 2 Cell
2
Row 3 Cell 1
Picture with caption of Row 3
Cell 2
Row3 Cell 2
Places you have been or would
like to go
Row 3 Cell 3
Picture with caption of Row 3
Cell 2
Title of Your Site
![Page 31: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/31.jpg)
What You Will Do Today
Sketch your site on a piece of paperMake sure it has the required elementsMake sure it has your name on itTurn it in to the appropriate hour’s tray
when you are finished.Begin laying out the table on your html
source pageRemember to open the site in Internet
Explorer and then “View Source” to edit the page
![Page 32: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/32.jpg)
Formatting Photos
•We will be formatting photos for creativeness We will be formatting photos for creativeness and to be used in certain situations.and to be used in certain situations.
•Follow along as we explore the tools found in Follow along as we explore the tools found in the program “the program “The GimpThe Gimp””
•Watch as the tools are shown to you, then try Watch as the tools are shown to you, then try the tools as instructed.the tools as instructed.
![Page 33: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/33.jpg)
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
![Page 34: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/34.jpg)
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
![Page 35: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/35.jpg)
Typershark for 10 minutes
Go to the file share network10.29.41.34mara6power6Go to Mara6 folder>Website photos>find your picture and save it to your website folder>>>name it something simple like “mypic.jpg”
![Page 36: Building A Website](https://reader036.fdocuments.in/reader036/viewer/2022062511/54bb62e44a79596f098b45cd/html5/thumbnails/36.jpg)
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.