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

All list item 1 text will be blue
All list item 2 text will be blue
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>

<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>

<p>All text in paragraphs will be purple.</p>

</body>

</html>

Sunday, June 24, 2012

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”

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.

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>

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>

Saturday, February 11, 2012

HTML Help / Cheat sheet from Quackit.com

Related:
• HTML Tutorial
• More HTML Codes
• HTML Tag List
• MySpace Codes

Need HTML help? You've come to the right place.

Copy/Paste HTML Codes

Below you will find HTML codes that you can copy and paste right into your website or MySpace page etc.

Description Code Result

Text

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs <p>Normal paragraph text.</p> Normal paragraph text.

Line Break I feel a line break coming... <br /> ...up. I feel a line break coming...
...up.

Bold Text <b>Bold text.</b> Bold text.

Italic Text <i>Italic text.</i> Italic text.

Color Text

Color text.

Text Size

Text size using points.

Text size using pixels.

Text size using relative sizes.

Font Family

Preferred serif font.

Preformatted Text

Preformatted text displays just as you type it...
  ...line breaks, spaces and all!

Teletype Text <tt>Teletype text - sometimes referred to as typewriter text.</tt> Teletype text - sometimes referred to as typewriter text.

Citation Text <cite>Citation text.</cite> Citation text.

Emphasized Text <em>Emphasized text.</em> Emphasized text.

Code Text <code>Code text.</code> Code text.

Big Text <big>Big text.</big> Big text.

Small Text <small>Small text.</small> Small text.

Blockquote

The label says:

Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.

Deleted Text <del>Delete this text.</del> Delete this text.

Inserted Text <ins>Insert this text.</ins> Insert this text.

Keyboard Text <kbd>Keyboard text - text to be entered by the user.</kbd> Keyboard text - text to be entered by the user.

Quotation Text <q>Quotation text.</q> Quotation text.

Sample Text <samp>Sample text (output from a computer program).</samp> Sample text (output from a computer program).

Variable Text <var>Variable text.</var> Variable text.

Definition <dfn>Definition.</dfn>: To define the meaning of a word, phrase or term. Definition.: To define the meaning of a word, phrase or term.

Images

Image <img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

Image with Border <img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="5" />

Linked Image <a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" /></a>

Linked Image with no Border <a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="0" /></a>

Tables

Basic Table

Table cell 1

Table cell 2

Table with cellpadding, cellspacing, and width attributes

Table cell 1

Table cell 2

Table with a Header Row

Table header	Table header
Table cell 1	Table cell 2

Table with colspan Applied

Table header
Table cell 1	Table cell 2

Table with rowspan Applied

Table header	Table cell 1
Table header	Table cell 2

Table with CSS Applied

Table header	Table header
Table cell 1	Table cell 2

Forms

Basic Form Tags (insert all form elements between these tags)

Text Input <input type="text" size="30" value="Type something..." />

Text Area <textarea cols="10" rows="5">Type something</textarea> Type something

Radio Buttons <input type="radio" name="cheat_sheet_example" value="Option1" /> Option 1 <input type="radio" name="cheat_sheet_example" value="Option2" /> Option 2 Option 1 Option 2

Checkboxes <input type="checkbox" name="cheat_sheet_example" value="Option1" /> Option 1 <input type="checkbox" name="cheat_sheet_example" value="Option2" /> Option 2 Option 1 Option 2

Select List <select name="cheat_sheet_example"><option value="Option1">Option 1<option value="Option2">Option 2<option value="Option3">Option 3</select>

Submit Button <input type="submit" value="Send Away!" />

Image Button <input type="image" src="/pix/smile.gif" />

Lists

Ordered list (numbered list)

List item 1
List item 2
List item 3

Unordered list (unnumbered list)

List item 1
List item 2
List item 3

Definition list

Term 1: Definition of term 1
Term 2: Definition of term 2

Frames

Inline Frame <iframe src="/pix/milford_sound/milford_sound_t.jpg" width="200" height="150" scrolling="auto" frameborder="1">  Your browser doesn't support inline frames. </iframe>  Your browser doesn't support inline frames.

Frames The frameset (frame_example_frameset_1.html):
<html> <head> <title>Frameset page<title> </head> <frameset cols = "25%, *"> <noframes> <body>Your browser doesn't support frames. Therefore, this is the noframe version of the site.</body> </noframes> <frame src ="/html/tags/frame_example_left.html" /> <frame src ="/html/tags/frame_example_right.html" /> </frameset> </html> The left frame (frame_example_left.html):
<html> <html> <body style="background-color:green"> <p>This is the left frame (frame_example_left.html).</p> </body> </html> The right frame (frame_example_right.html):
<html> <html> <body style="background-color:yellow"> <p>This is the right frame (frame_example_right.html).</p> </body> </html> View the result

Need More HTML Help?

In the following table, the left column contains an HTML topic, the right column provides links to where you can find help about that topic.

For this...	do this...
HTML help with tables	Scan the HTML table tutorial Check out the HTML table generator See the HTML table tag Learn about the CSS table-layout property to make large tables load faster Have a look at the CSS table-layout example
HTML help with images	See the HTML img tag Check out the GIF vs JPEG article Have a look at the animated GIF sample If you need help with an image map, check out the article on image maps
Help with hyperlinks	Learn about the HTML a tag To change the look of hyperlinks, see the CSS hyperlinks article If you need to set a default URL for hyperlinks, have a look at the HTML base tag
Help with image maps	Make sure you're familiar with the HTML img tag Read the image maps article For a more detailed understanding, learn about the HTML map tag and the HTML area tag
Help with fonts	Read the HTML font code article The above article suggests using CSS for fonts. In particular, learn about the following CSS properties: CSS font, CSS font-family, CSS font-size, CSS font-style, CSS font-weight CSS has other properties that can assist with text formatting and layouts. For example, CSS line-height, CSS letter-spacing, CSS text-transform, CSS text-align. There are many other CSS properties so, you might like to peruse the complete list of CSS properties to see what properties can assist you with your layouts.
Help with embedding music/audio/sound	Read the HTML music code article
Help with color	Read the hex color codes article View the html color code chart containing the 216 web safe colors Read about the CSS color property
Help with numbered (ordered) lists	Learn about the HTML ol tag
Help with unnumbered (unordered) lists	Learn about the HTML ul tag
Help with definition lists	Learn about the HTML dl tag
Help with forms	Learn about the HTML form tag You might also like to learn about the HTML fieldset tag, HTML legend tag
Help with frames	Learn about the HTML frameset tag
Help with inline frames	Learn about the HTML iframe tag You may also be interested in the CSS scrollbars article for creating a similar effect to inline frames
Help with metadata	Learn about the HTML meta tag
Help with HTML redirects	Read the HTML redirect article This article refers to the HTML meta tag for performing client side redirects
Help with adding JavaScript to a web page	Learn about the HTML script tag To learn about JavaScript, see the JavaScript page
Help with event handlers/intrinsic events	Learn about the JavaScript event handlers Peruse the complete list of HTML tags to see which intrinsic events work with which tags

Tuesday, February 7, 2012

Links (Hyperlinks)

Links (Hyperlinks)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

1. To create a link to another document, by using the href attribute

2. To create a bookmark inside a document, by using the name attribute

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example

<a href="http://www.w3schools.com/">Visit W3Schools</a>

which will display like this: Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools' homepage.

Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new tab:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Links - The name Attribute

The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.

Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.

Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

A named anchor inside an HTML document: <a name="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page: <a href="http://www.w3schools.com/html_links.htm#tips">

Saturday, June 30, 2012

WebDesign Challenge CSS 1

All header 1 text will be red

Sunday, June 24, 2012

WebDesign CHALLENGE #3

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

WebDesign CHALLENGE #2

WebDesign CHALLENGE #1

Friday, June 22, 2012

HTML Master Template: Update 3

Saturday, February 11, 2012

HTML Help / Cheat sheet from Quackit.com

Copy/Paste HTML Codes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Need More HTML Help?

Tuesday, February 7, 2012

Links (Hyperlinks)