Saturday, June 30, 2012

WebDesign Challenge CSS 1



Cascading Style Sheet
Internal CSS: In the "head" section

Here's what it does:

All header 1 text will be red

  1. All list item 1 text will be blue
  2. All list item 2 text will be blue
  3. All list item 3 text will be blue
All text in paragraphs will be purple.
Here is the CSS code:
<style type="text/css">
h1 {color:red;}
li {color:blue;}
p {color:purple;}
</style>

1. COPY and PASTE the html code in blue (and red) on a new Notepad page.
2. SAVE as “(firstname)css1.htm”.
3. VIEW in your browser!


<!DOCTYPE html>
<html>

<head>
<title> CSS 1</title>

<style type="text/css">
h1 {color:red;}
li {color:blue;}
p {color:purple;}
</style>

</head>

<body>
<h1>All Header 1 text will be red</h1>
<ol>
     <li>All list item 1 text will be blue</li>
     <li>All list item 2 text will be blue</li> 
     <li>All list item 3 text will be blue</li> 
</ol>
<p>All text in paragraphs will be purple.</p>
</body>

</html>

Posted by at No comments:

Sunday, June 24, 2012

WebDesign CHALLENGE #3


 1. OPEN your “WebDesign” folder on your memory stick.

 2. CREATE a new folder in “WebDesign” and name it “images”.
     This is the file where you will store all your photos (.jpg, .gif,    
      etc.).

3. FILL-IN this outline of your opening web page and linked pages:

          I. “index.htm” My Topic: _______________________________________

                    A. “page1.htm” Sub-topic: _________________________________

        B. “page2.htm” Sub-topic: _________________________________

        C. “page3.htm” Sub-topic: _________________________________

4. OPEN your current “HTML Template” using “Notepad” .

5. COPY and PASTE your “HTML Template” to a new blank Notepad page.

6. SAVE it in your “WebDesign” folder as
“index.htm”

7. REPEAT steps 5 + 6 three more times, but save the files as
          “page1.htm”
          “page2.htm”
          “page3.htm”

Posted by at No comments:

WebDesign CHALLENGE #2



1. OPEN  your current “HTML Template” using  “Notepad”  so you can edit it.

2. OPEN your browser to HTML4Kids (http://htmlbasics4kids.blogspot.com)

3. READ the “Update Your HTML Master Template” June 22 blog post and follow the directions written in it:
  • ·         HIGHLIGHT the html code (blue text) and COPY (CTRL+C).
  • ·         HIGHLIGHT (CTRL+A) all of your old HTML Template code on Notepad.
  • ·         PASTE (CTRL+V) the new code to replace the old.
  • ·         SAVE with the same name.

Posted by at No comments:

WebDesign CHALLENGE #1


1. OPEN  a “Notepad”  blank page.
2. TYPE the html code below. Fill-in the “??????” with your own lists.
3. SAVE this on your memory stick in your WebDesign folder as:  
   “yourfirstnameChallenge1.htm “ e.g. “TomChallenge1.htm”
4. OPEN this file on your browser (IE, Safari or Firefox).
5. PRINT and CIRCLE all new HTML code that is new today.

<!DOCTYPE html>
<html>
<head>
<title>Challenge1</title>

<style type="text/css">
h1 {color:red;}
li {color:blue;}
p {color:purple;}
</style>

</head>

<body style="background-color:skyblue;" text="#000000">
<h1 align="middle">Challenge #1</h1>
<p align="right"><b>This is my first web page.
<br/>There's more to come.</b>
<hr align="middle" width="50%">

<p>I am learning how to use inline and internal CSS, the horizontal rule,
<br/>headline, paragraph and line break tags.
<br/>Writing HTML isn't as hard as it appears.
<br>Here's a list of items I like about school using bullets:
<ul>
<li>??????</li>
<li>??????</li>
<li>??????</li>
<li>But most of all--????????</li>
</ul>

<p>I can also create a list of my favorite ??????? using numbers:</p>
<ol>
<li>??????</li>
<li>??????</li>
<li>??????</li>
<li>??????</li>
<li>??????</li>
</ol>

</body>
</html>
Posted by at No comments:

Friday, June 22, 2012

HTML Master Template: Update 3


HOW TO UPDATE YOUR CURRENT HTML TEMPLATE
  • HIGHLIGHT the html code (blue text) below and COPY (CTRL+C).
  • OPEN your current HTML (master) template file in Notepad (or another text editor) and
  • HIGHLIGHT (CTRL+A) all of your old HTML Template code and
  • PASTE (CTRL+V) the new code to replace the old.
  • SAVE with the same name.
Now you have an updated HTML Master Template to use for starting new web pages!

<!DOCTYPE html>
<html>

<head>

<title>HTMLTemplate</title>

<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p {color:purple;}
</style>

</head>

<body style="background-color:lightblue;" text="#000000">
<h1 align="middle">HTML Template</h1>
<p align="middle">
<h3 align="middle">This is my HTML master template for new web pages.
<br/>Update: 3</h3>
</p>
<br/>

<hr align="middle" width="75%">

<p><b>"JavaScript" TAG: CLICK "View Source" and COPY/PASTE to insert the JavaScript

tag into the "body" section of your web page.</b>
<br/><script type="text/javascript">document.write('The "script" tag allows you to place a

script within your HTML documents.');
</script>
</p>
<br/>

<p><b>"CSS" TAG: CLICK <q>View Source</q> and COPY/PASTE to insert CSS into the

"head" section of your web page.</b>
<br/>The CSS tag in the "head" section is an internal CSS function, which controls all tags

in your web page (e.g. "h1") with one line of code.</p>
<br/>

<p><b>"UL" TAG: Here is how to make a list of items using the "ul" or "Unordered List

(bullets)" tag:</b>
<ul>
<li>chocolate</li>
<li>vanilla</li>
<li>raspberry</li>
<li>kiwi</li>
<li>cookies n' cream</li>
</ul>
</p>
<br/>

<p><b>"OL" TAG: Here is how to make a list of items using the "ol" or "Ordered List

(numbers)" tag:</b>
<ol>
<li>Giants</li>
<li>A's</li>
<li>Cubs</li>
<li>Dodgers</li>
<li>Angels</li>
</ol>
<br/>

<p><b>EXPLORE & LEARN MORE TAGS: Click these HTML resource links to learn other

fun tags: </b></p>
<p>
<a href="http://www.w3schools.com">w3schools</a>...tutorials and  tags!
<br/>
<a href="http://www.htmlbasics4kids.blogspot.com">HTML4Kids</a>...HTML Master

Template and more!  
<br/>
<a href="http://www.quackit.com/html/codes/html_marquee_code.cfm">Quackit Scrolling

Marquee</a>...very cool tags!
<br/>
<a href="http://www.images.google.com">Google Images</a>...internet photos!
</p>
<br/>


<p><b>GO TO NEW PAGE: Here is the tag for a link to another web page stored in your

"WebDesign" folder:</b>
<br/>
<a href="../WebDesign/filename.htm">pagename</a>
</p>
<br/>

<p><b>MY PHOTO: Here is the tag to insert a photo on my web page stored in my

"WebDesign>images folder":
<br/>
<img src="w3schools.jpg" alt="My Photo" width="--" height="--" />
</b></p>
<br/>

<p><b>INTERNET PHOTO: Here is the tag to insert a photo on my web page stored on an

internet website (outside of my "WebDesign>images" folder):
<br/>
<img src="http://www.deshow.net/d/file/animal/2009-07/wild-lions-645-2.jpg" alt="Internet

Photo" align="middle"  width="50%" height="50%" />
</b></p>

</body>
</html>


Posted by at No comments:
Subscribe to: Posts (Atom)