LFAS Computer Arts 9/10: January 2015

Monday, January 26, 2015

Link Scavenger Hunt

<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”>clickhere</a> </li>
<li><a href=”http://www.the1staddress.com”>clickhere</a> </li>
<li><a href=”http://www.the1staddress.com”>clickhere</a> </li>
<li><a href=”http://www.the1staddress.com”>clickhere</a> </li>
<li><a href=”http://www.the1staddress.com”>clickhere</a> </li>
<li><a href=”http://www.the1staddress.com”>clickhere</a> </li>
<li><a href=”http://www.the1staddress.com”>clickhere</a> </li>
<li><a href=”http://www.the1staddress.com”>clickhere</a> </li>
<li><a href=”http://www.the1staddress.com”>clickhere</a> </li>
<li><a href=”http://www.the1staddress.com”>clickhere</a> </li>

</ul>
<a href=mailto:donna.usher@home.com>click here to contact me</a>

</body>
</html>

List of 10 sites:

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

Wednesday, January 21, 2015

HTML Vocabulary

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

First use one of your self-portrait images photoshop. Open your image and reduce your resolution to lower the overall size of your image, it must be in RGB. Save your image to your "WEB" folder.

Headings: Are bold, bigger and move the next sequence of text to the next line <H1 > the biggest</H1 > to <H6 > the smallest</H6 >.
Text Colour: <font color="blue" >
Text Style: <font face="Arial" >
Text Size: <font size="+1" >

Hexidecimal Colour Code: RR GG BB put a number sign in front and numbers 1-9 or letters A-F to represent the colour. Here is a hexidecimal colour chart.a better hex chart.
A line of text: <p > and you have to close with </p >
Text Alignment: <div align="right" > or you can align it in the centre </div >
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 close the ul or ol </ol > or </ul >

Basic HTML

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:

<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". (Make sure you include the extention ".html")

Open Internet Explorer File- Open- Browse for the file in your folder.