Tutorials
The 3 MAIN tags in your web page are the HTML, HEAD and BODY tags. Here is a basic outline explaining how they should be placed in your web page document:
<html>
<!-- The tag you see above is the START HTML tag. It tells the browser that this is the beginning of your HTML document.
What goes inside the HTML tags? All the other tags! -->
<head>
<!--
The START HEAD tag is added after the START HTML tag.
What goes inside the HEAD tags? Generally, what you place inside the HEAD tags are things that you DON’T want displayed on the browser window. Examples of these are your HTML titles, some JavaScript code and Internal Style Sheets.
-->
</head>
<!-- You must type the END HEAD tag first, before you type the START BODY tag -->
<body>
<!-- The START BODY tag defines the start of the webpage’s body. The webpage’s body is what you see in your browser’s main window whenever you are viewing a webpage. Examples of tags that can be placed inside the BODY tags are: paragraph tags (<p></p>), image tags (<img />), line-break tags (<br />), first heading tags (<h1></h1>), and many more… -->
</body>
<!-- The END BODY tag defines the end of your webpage’s body. -->
</html>
<!-- The END HTML tag is placed at the end of the document. This tells the browser that this is the end of the web page. -->
EXAMPLE:
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>This is a paragraph.</p>
<img src="myphoto.jpg" />
<p>This is another paragraph. <b>This text is bold.</b></p>
<p>How are you? <i>This text is italicized.</i> Have a nice day!</p>
<a href="page02.html">next page</a>
</body>
</html>
Writing HTML Tags
Most HTML tags come in pairs: a START tag and an END tag.
Example:
<p>This is a paragraph</p>
START tag: <p>
END tag: </p>
Tags are enclosed in ANGLE BRACKETS: < and >
The END tag is just like the START tag except that a backslash - / - immediately follows the open angle bracket - < .
Some HTML tags DO NOT come in pairs. Examples of these are:
<br /> - inserts a line-break
<hr /> - inserts a horizontal line
<img /> - inserts an image
HTML Tag Attributes
HTML tags can have attributes.
What are attributes?
Attributes are add-ons to your HTML tags that allow you to provide additional information or set additional properties to your HTML elements.
Example:
<body bgcolor="blue">
The tag attribute in this example is bgcolor="blue" . It tells the browser that the background color of the web page should be blue.
Attributes always come in name and value pairs: name="value".
The "value" should be enclosed in quotation marks.
Attributes are ALWAYS added to the START tag. NEVER add attributes to the END tag.
One HTML tag can have two or more attributes.
Example:
<a href="page02.html" >next page</a>
The attributes in this example are:
href="page02.html" – this tells the browser which page the link should open
– this tells the browser that the color of the text link should be green
- Tutorial - Printable Christmas Gift Tags
6 animal tags bring a touch of extra cuteness to your presents Tutorial at Curly Made Blog "One of the things I like about Christmas is the presents, I love to pick out or make special things to offer to my friends and family, and wrapping it in the...
- Tutorial - How To Make Personalized Labels
"made by me" tags to place on your creations Tag Tutorial at The Chilly Dog Blog "For years I have wanted personalized labels that I could attach to my sewing, knit or crocheted projects. You can buy tags at most craft stores that say something like...
- Tutorial - How To Make Wooden Clothespin Gift Tags
What a sweet idea. It'll add that special handmade touch to your gifts. The kids would love to help with this one! Wooden Clothespin Gift Tags Tutorial at Rad Linc Crafts "Here's another option for fancy homemade gift tags. It takes a bit more...
- Tutorial - How To Make Product Hang Tags
Brilliant! Room for plenty of information and very professional looking! Product Hang Tags Tutorial at Le Neko Noir "Do you need a hang tag for your handmade products or simple gift tag? Not ready to commit to buying a large quantity of professionally...
- Exchange Program Tutorial - How To Make Clay Gift Tags / Ornamets
Here's another fabulous tutorial created as part of my Exchange Program. ArtMind made a whole set of gift tags that are just adorable! She used a stamping set from EviesToolEmporium. ArtMind's even giving them away! Head on over to her blog to...
Tutorials
HTML Basics
The 3 MAIN tags in your web page are the HTML, HEAD and BODY tags. Here is a basic outline explaining how they should be placed in your web page document:
<html>
<!-- The tag you see above is the START HTML tag. It tells the browser that this is the beginning of your HTML document.
What goes inside the HTML tags? All the other tags! -->
<head>
<!--
The START HEAD tag is added after the START HTML tag.
What goes inside the HEAD tags? Generally, what you place inside the HEAD tags are things that you DON’T want displayed on the browser window. Examples of these are your HTML titles, some JavaScript code and Internal Style Sheets.
-->
</head>
<!-- You must type the END HEAD tag first, before you type the START BODY tag -->
<body>
<!-- The START BODY tag defines the start of the webpage’s body. The webpage’s body is what you see in your browser’s main window whenever you are viewing a webpage. Examples of tags that can be placed inside the BODY tags are: paragraph tags (<p></p>), image tags (<img />), line-break tags (<br />), first heading tags (<h1></h1>), and many more… -->
</body>
<!-- The END BODY tag defines the end of your webpage’s body. -->
</html>
<!-- The END HTML tag is placed at the end of the document. This tells the browser that this is the end of the web page. -->
EXAMPLE:
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>This is a paragraph.</p>
<img src="myphoto.jpg" />
<p>This is another paragraph. <b>This text is bold.</b></p>
<p>How are you? <i>This text is italicized.</i> Have a nice day!</p>
<a href="page02.html">next page</a>
</body>
</html>
Writing HTML Tags
Most HTML tags come in pairs: a START tag and an END tag.
Example:
<p>This is a paragraph</p>
START tag: <p>
END tag: </p>
Tags are enclosed in ANGLE BRACKETS: < and >
The END tag is just like the START tag except that a backslash - / - immediately follows the open angle bracket - < .
Some HTML tags DO NOT come in pairs. Examples of these are:
<br /> - inserts a line-break
<hr /> - inserts a horizontal line
<img /> - inserts an image
HTML Tag Attributes
HTML tags can have attributes.
What are attributes?
Attributes are add-ons to your HTML tags that allow you to provide additional information or set additional properties to your HTML elements.
Example:
<body bgcolor="blue">
The tag attribute in this example is bgcolor="blue" . It tells the browser that the background color of the web page should be blue.
Attributes always come in name and value pairs: name="value".
The "value" should be enclosed in quotation marks.
Attributes are ALWAYS added to the START tag. NEVER add attributes to the END tag.
One HTML tag can have two or more attributes.
Example:
<a href="page02.html" >next page</a>
The attributes in this example are:
href="page02.html" – this tells the browser which page the link should open
– this tells the browser that the color of the text link should be green
- Tutorial - Printable Christmas Gift Tags
6 animal tags bring a touch of extra cuteness to your presents Tutorial at Curly Made Blog "One of the things I like about Christmas is the presents, I love to pick out or make special things to offer to my friends and family, and wrapping it in the...
- Tutorial - How To Make Personalized Labels
"made by me" tags to place on your creations Tag Tutorial at The Chilly Dog Blog "For years I have wanted personalized labels that I could attach to my sewing, knit or crocheted projects. You can buy tags at most craft stores that say something like...
- Tutorial - How To Make Wooden Clothespin Gift Tags
What a sweet idea. It'll add that special handmade touch to your gifts. The kids would love to help with this one! Wooden Clothespin Gift Tags Tutorial at Rad Linc Crafts "Here's another option for fancy homemade gift tags. It takes a bit more...
- Tutorial - How To Make Product Hang Tags
Brilliant! Room for plenty of information and very professional looking! Product Hang Tags Tutorial at Le Neko Noir "Do you need a hang tag for your handmade products or simple gift tag? Not ready to commit to buying a large quantity of professionally...
- Exchange Program Tutorial - How To Make Clay Gift Tags / Ornamets
Here's another fabulous tutorial created as part of my Exchange Program. ArtMind made a whole set of gift tags that are just adorable! She used a stamping set from EviesToolEmporium. ArtMind's even giving them away! Head on over to her blog to...