building a website
DESCRIPTION
TRANSCRIPT
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.
Web Design
Web site uses. Types of sites.www.dbaaahockey.com
Number of web sitesHundreds?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 WORLDWORLD?Make a list of what you want to include.
Hobbies, Interests, Likes, Music, Movies
Brainstorm a list of Items to include
Microsoft Word DocumentSave as:
Website Brainstorm Your Name
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
Getting Started With HTMLNEVER USE MICROSOFT WORD!!!!!
Use Notepad
Microsoft Word.lnk
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 NameWebsite Name</a> Anchor—links another website to your site
Career Opportunities
Designing a Website
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
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 pageCenter 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 linkCreate 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 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
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 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
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
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
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.
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 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”
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.