Thursday, November 16, 2017

Web Page Project

You are to design a web page. The subject matter is your choice, but you should consider your design and organization based on your theme.

Include the following:

All of the tags should be correct html
Index Title
Background color/image
Large Heading
Smaller Heading
Horizontal Line
A List
Information organized in a table.
Some information in paragraph form.
Link(s) to another site(s).
Coloured links
Your email address
An html challenge
Creative design
Strong composition, easy to read
Lay-out and organization suites the subject matter.

You can include more if you wish for bonus marks.

Monday, November 13, 2017

We are going to make a checkerboard table:

Checkerboard Table Exercise
Table Tags:
<TABLE>
<TR> </TR> Table Row-add a new line.
<TR> <TD> </TD> Table Data-how to add information, and/or a new column.
</TR> </TABLE>

Make a checkerboard using table tags.

Instructions:

First start a new html page using the basic formula from the first day. Open and close your html using the standard html tags. Remember to save as a "checkerboard.html"
Within the <BODY> tags of your html document, start your table with <TABLE> tag to open and close your table with </TABLE> .
Each time you add a new line you type in <TBODY> <TR> table row.
Each time you add some info into a column, put <TD>table data </TD>around it.
Then you put a </TR>at the end of the row.
If you want to add another row, add another <TR> and end with </TR>.
You will need to set the width and height of each cell within each TD tag, type WIDTH ="150" HEIGHT="150. and don't forget the ""s
To add colour to your table cells, it also goes within the TD tag td bgcolor="#FFFF00".

You are to alternate your colour in each cell 5 x 5 cells good luck
Tables are great, because you can align things on your page without having to have everything in the center of your page. Without tables, you can't put things next to each other (cascading style sheets will replace tables when everyone decides to upgrade their browsers, the older browsers still can't read CSS so most people still use tables).

Here are some examples of simple tables. Microsoft Internet Explorer and Netscape don't show tables the same way, even if you use the same codes.
<TABLE>
<TR>
<TD>Cell 1 </ TD>
<TD>Cell 2 </ TD>
</TR>
</TABLE>

Cell 1	Cell 2
Cell 3	Cell 4

Adding a border to tables

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1	Cell 2
Cell 3	Cell 4

Adding color to tables

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1	Cell 2
Cell 3	Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1	Cell 2
Cell 3	Cell 4

How do I get rid of the border? Just add the tag border="0" to your table tag:

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1	Cell 2
Cell 3	Cell 4

row 1

rows

1-3

row 1

row 2

rows

2-3

row 2

row 3

row 1	rows 1-3	row 1	row 1
row 2		rows 2-3	row 2
row 3		rows 2-3	row 3

Crazy Colours

cell 1

cell 2

cell 3

cell 4

cell 5

cell 6

cell 7

cell 8

Lissa Explains it All
cell 1	cell 2	cell 3	cell 4
cell 5	cell 6	cell 7	cell 8

Setting widths in tables? Just add the width tag with specific widths to your table tag. You can also specify percentages in the tag, for instance . Just make sure the widths and percentages add up to 100%.

Cell 1

Cell 2

Cell 1

Cell 2

Adding a background to the table. It's very simple to add a background to a table. In the table tag (it's the first tag in your table) add "background="yourbackground.gif." Like this:

yourbackground.gif

">

A background will fill your whole table.

Cell 1	Cell 2
Cell 3	Cell 4

Just need a background in one or more cells of your table? Add the background to the individual cell like this:

Cell 1	Cell 2
Cell 3	Cell 4

How do I frame an image with a table border? Framing an image is very easy. Just enclose your image in a simple table with a border. You can choose any color you like, and any size border width. Just change the information you see in bold text to your own information:

5

" bordercolor="9966ff" cellpadding="0" cellspacing="0">

bird
.gif" width="50" height="50" alt="bird">

If you need a double border, try this:

5

00ff00" cellpadding="0" cellspacing="0">

5

" bordercolor="9966ff" cellpadding="0" cellspacing="0">

bird
.gif" width="50" height="50" alt="bird">

HTML Exercise~ Checkerboard Table

Make a table with five rows and five columns. Add a colour to every other cell. Then put a different colour in the blank cells. You will have to set table widths to see the colours. And finally I want you to put an image into the center square (make sure it is saved as a “jpg”). Your final result should look like a checkerboard with a picture directly in the center.

Table HTML Vocabulary

Table The table tag looks like this:
. All of your table information goes between these two tags to make up a table. All tables start with the tag and end with the
tag.
Table Row An individual row that contains at least one data cell. On this page I've used two data cells. The tag looks like this: .
Table Data An individual cell in a table row. The tag looks like this: . The table, table row, and table data tags always nest like this:

Here is an example of a table with rows and cells:

Monday, November 6, 2017

Link Scavenger Hunt

Start a new html site and try this link exercise, changing the URL [Uniform Resource Locator AKA web address AKA http: www...] or what's between the A HREF=" _____" /A tags and "click here"

Note: You will have to change/retype the quotes in notepad

<HTML>

<HEAD>
<TITLE> donna's web sites </TITLE>
</HEAD>

<BODY>

<H1>My Web Sites</H1>
<HR>
<P>Here are some of my chosen web sites- <em>check them out:</em> </P>

<OL>
<LI><A HREF=”http://www.the1staddress.com”>click here</a> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>
<LI><a href=”http://www.the1staddress.com”>click here</A> </LI>

</OL>
<A HREF="mailto:donna.usher@shaw.ca">click here to contact me</A>

</BODY>
</HTML>

List of suggested sites:

browser
map site/travel site
music site
video site
weather
news source
an amazing site
a terrible site
html tutorial
choice

Html Vocab- Links, Email, Lists

Link Tag.

<A HREF=”http://www.theaddress.com”> something to on click here <A >

(substitute your own info where you see bold text):

E-mail Link.

This is called a "mailto" and this is how you do it

(substitute your own info where you see bold text):

<A HREF=”mailto:donna.usher@shaw.ca”> contact <A >

Buttons.

To add a button image to a mailto link (you could add this to any link) this is what you do:
<A HREF=”mailto:donna.usher@shaw.ca”> < IMG SRC="myphoto.jpg" > <A >

List Tags. [surprisingly lots to learn about lists]

How do I make numbered (ordered -OL) lists? Making a numbered list is really easy, and it's a great tool for organizing information on your Web site:

<OL>
<LI > Ballet </LI>
<LI > Tap </LI>
<LI > Jazz </LI>
<LI > Modern </LI>

It will look like this:

Ballet
Tap
Jazz
Modern

How do I make bulleted (unordered or UL) lists? A different type of list:

<UL>
<LI > Modern </LI>
<LI > Jazz </LI>
<LI > Tap </LI>
<LI > Ballet </LI>
<OL>

It will look like this:

Ballet
Jazz
Tap
Modern

There are different kinds of lists. Sorry, my code explanations got all fuddled. If you are interested, you can find all the code here: https://www.w3schools.com/html/html_lists.asp

Ballet
Jazz
Tap
Modern

You can make the circles in the above list squares instead by adding type="square" into the code

Ballet
Jazz
Tap
Modern

You can combine ordered and unordered lists to make outlines. The following code is just an example of what you can do, you can experiment with this to make your own:

Dance Types

Ballet
Jazz
Modern
Tap

Dance Movies
- Center Stage

Sometimes your lists will be split up on your page between headers, and you may need to start a list from a different number.

Ballet
Tap
Jazz
Modern

To substitute Roman numerals replace the

Ballet
Tap
Jazz
Modern

Need alphabetical order instead?

Ballet
Tap
Jazz
Modern

Friday, November 3, 2017

Digital Design Self-Evaluation

1/2 way check point

What have you learned?
What have you struggled with?
What are you proud of? What are your strengths?
What goals do you have/ what do you want to learn in Term 2?
What mark do you think you deserve? Explain why.
How could you improve?

Monday, October 16, 2017

HTML Vocabulary

We are going to work on HTML vocabulary to further develop your ability to control the organization of information and further options of web page design.

Headings: Are bold, bigger and move the next sequence of text to the next line
<H1 > the biggest</H1 > to <H6 > the smallest</H6 >.

Paragraph of Text: <p > and you have to close with </p >
Text Alignment: <div align="right" > or you can align it in the centre </div >

Hexidecimal Colour Code: #RR GG BB make sure to put a number sign in front and numbers 1-9 or letters A-F to represent the colour. for example #990000 = red. Here is a hexidecimal colour chart a better hex chart.

Text Colour: <font color="blue" >
Text Style: <font face="Arial" >
Text Size: <font size="+1" >

Line Break: <br > is a break to another line, no closing tag required

Image: <img src="name_of_your_photo" >
Link to Another Page, relative URL= <a href="page2.html" > type something to click on here</a>
Link to Another Site on the internet, absolute URL= <a href="http://www.website" > type something to click on here</a>

Tags within the opening <"BODY"> tag
Link tags to change the colour of your links use these attributes in the <body> tag:
link= change the link colour
alink= changes the link colour when you are clicking on it
vlink= changes the colur of your link after you have visited it
bgcolor= changes the colour of your page
background= changes the image on the background of your page

Lists
Numbered List <ol >
Buletted List <ul >
You need to put a <li > before and after each item on te list </li >
then make sure to close the ul or ol </ol > or </ul >

Lissa Explains html Tutorial
w3schools

Final Logo Critique

Personal Logo Design Critique

Post your final logo design to your blog. Briefly explain how your logo reflects who you are and why you designed it the way you did- your personality, interests, abilities and skills through colours, font, symbolism, arrangement of elements, and design.

How have you developed your idea to visually and to simplify it so that it is easy to recognizable and memorable.

Marking Criteria Check List (each is marked out of 5 for 20 total):

Simple design- lines, shapes, color are reduced to only minimum necessary to communicate ideas.
Basic elements- easy to understand.
Eye catching & memorable- different than any other logos.
Thoughtful & appropriate- represents self.

HTML Basic

We are going to learn how to make basic web pages using HTML. There are many HTML tutorials that you can explore. http://www.lissaexplains.com/ is a good one; it looks kind of childish, but easy to follow. HTML glossary is nicely organized, and HTML Tutorial is a good one too.

Create a "Webpage" folder in your Design folder.
Open "Note Pad" in the Start menu- Accessories-Note Pad.
Type the following:

Type the following:
<html>

<head>

<title>Choose your own site title, and type it in here.</title>

</head>

<body>

Everything that appears on your site will be entered here (text, images etc.), between the body tags.

</body>

</html>

Then save as "my_1st_webpage.html"
Open Internet Explorer File>Open>

Thursday, November 16, 2017

Web Page Project

Monday, November 13, 2017

HTML Tables

Adding a border to tables

HTML Exercise~ Checkerboard Table

Table HTML Vocabulary

Monday, November 6, 2017

Link Scavenger Hunt

Link Tag. <A HREF=”http://www.theaddress.com”> something to on click here <A >

List Tags. [surprisingly lots to learn about lists]

Friday, November 3, 2017

Digital Design Self-Evaluation

Monday, October 16, 2017

HTML Vocabulary

Final Logo Critique

HTML Basic

Link Tag.

<A HREF=”http://www.theaddress.com”> something to on click here <A >