Author Topic: Html Lessons From The Pyroguy (Read 4067 times)

PyroAlchemist · « **on:** October 07, 2005, 09:11:31 PM »

Ever want to make your own site from scratch without having to use a crummy WYSIWYG?(what you see is what you get) Well after reading my lessons you may well be on your way. Depends on how much you paid attention :p Anyway to begin.

----------------------------------------------
Materials:
All you need is wordpad and a computer.
----------------------------------------------

All "coding" must go between these <>. It lets it know that you are wanting to perform a special function. After declaring you must end it like this

A little example.

My first webpage

Hello world.

Time to break it down.

lets it know that is the webpage language your using. Another is PHP but I know nothing about that :p

lets it know that thats the head of the webpage.
tells it the name of webpage you are creating.<br /><body> lets it know that you are working on the body of the site.<br />Hello World - The text that will appear.<br /><br />Well there you go. Basics.<br /><br /></div> </div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_6339"> </div> <div class="smalltext reportlinks"> <img src="http://www.charas-project.net/forum/Themes/charas2/images/ip.gif" alt="" /> Logged </div> <div class="signature" id="msg_6339_signature"><img src="<a href="http://img20.imageshack.us/img20/4995/pyrotu5.png" class="bbc_link" target="_blank">http://img20.imageshack.us/img20/4995/pyrotu5.png</a>"></div> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg120048"></a> <div class="windowbg2"> <span class="topslice"><span></span></span> <div class="post_wrapper"> <div class="poster"> <h4> <img src="http://www.charas-project.net/forum/Themes/charas2/images/useroff.gif" alt="Offline" /> <a href="http://www.charas-project.net/forum/index.php?action=profile;u=9329" title="View the profile of Osmose">Osmose</a> </h4> <ul class="reset smalltext" id="msg_120048_extra_info"> <li class="title">So freakin' inactive</li> <li class="postgroup">Royal</li> <li class="stars"><img src="http://www.charas-project.net/forum/Themes/charas2/images/rank3000.png" alt="*" /></li> <li class="avatar"> <a href="http://www.charas-project.net/forum/index.php?action=profile;u=9329"> <img class="avatar" src="http://img.photobucket.com/albums/v499/Osmose1000/moosecharasavatar.png" alt="" /> </a> </li> <li class="postcount">Posts: 3,041</li> <li class="profile"> <ul> <li><a href="http://www.moosecorps.com" title="" target="_blank" class="new_win"><img src="http://www.charas-project.net/forum/Themes/charas2/images/www_sm.gif" alt="" /></a></li> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden"> <div class="keyinfo"> <div class="messageicon"> <img src="http://www.charas-project.net/forum/Themes/charas2/images/post/xx.gif" alt="" /> </div> <h5 id="subject_120048"> <a href="http://www.charas-project.net/forum/index.php?topic=14027.msg120048#msg120048" rel="nofollow">(No subject)</a> </h5> <div class="smalltext">« <strong>Reply #1 on:</strong> October 07, 2005, 11:06:34 PM »</div> <div id="msg_120048_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_120048">*NOTE: As for making the actual page, simply type up the HTML in Notepad, go to File->Save, make sure the filetype at the bottom dropdown box is "All", and save the file as filename.html<br /><br />**NOTE: Some tags can only be placed within another tag. An example of this is in the above example: The <title> tag can only be placed within <head> tags.<br /><br />To make your webpage fancy, you'll want to format your text. The following are a few common tags used for such a purpose. Unless stated otherwise, all text affected will be place between a beginning and end tag.<br /><br /><b> - Makes text <strong>bold</strong>.<br /><i> - <em>Italicizes</em> text.<br /><u> - <span class="bbc_u">Underlines</span> text.<br /><strike> - Puts a [STRIKE]line through[/STRIKE] your text.<br /><h1> - Sets text at a large header size.<br /><h6> - Sets text at a small header size.<br /><br> - DOES NOT NEED A CLOSING TAG! Will move text to the next line, as if you hit the enter button.<br /><pre> - Preformats text, so that you don't have to use the <br> tag.</div> </div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_120048"> </div> <div class="smalltext reportlinks"> <img src="http://www.charas-project.net/forum/Themes/charas2/images/ip.gif" alt="" /> Logged </div> <div class="signature" id="msg_120048_signature">Hrm.</div> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg120049"></a> <div class="windowbg"> <span class="topslice"><span></span></span> <div class="post_wrapper"> <div class="poster"> <h4> <img src="http://www.charas-project.net/forum/Themes/charas2/images/useroff.gif" alt="Offline" /> <a href="http://www.charas-project.net/forum/index.php?action=profile;u=9331" title="View the profile of AsakuraHao2004">AsakuraHao2004</a> </h4> <ul class="reset smalltext" id="msg_120049_extra_info"> <li class="title"><img src="http://img.photobucket.com/albums/v349/Macangy/dd4b96aa.png"><br>RAM-TORTOISE!!</li> <li class="postgroup">Exemplar</li> <li class="stars"><img src="http://www.charas-project.net/forum/Themes/charas2/images/rank1000.png" alt="*" /></li> <li class="avatar"> <a href="http://www.charas-project.net/forum/index.php?action=profile;u=9331"> <img class="avatar" src="http://www.charas-project.net/forum/avatars/avatars/avatar0.gif" alt="" /> </a> </li> <li class="postcount">Posts: 1,623</li> <li class="blurb">AIM: dakutenshisdemon YIM: desimodontidae</li> <li class="profile"> <ul> <li><a href="http://www.rpg4.tk" title="" target="_blank" class="new_win"><img src="http://www.charas-project.net/forum/Themes/charas2/images/www_sm.gif" alt="" /></a></li> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden"> <div class="keyinfo"> <div class="messageicon"> <img src="http://www.charas-project.net/forum/Themes/charas2/images/post/xx.gif" alt="" /> </div> <h5 id="subject_120049"> <a href="http://www.charas-project.net/forum/index.php?topic=14027.msg120049#msg120049" rel="nofollow">(No subject)</a> </h5> <div class="smalltext">« <strong>Reply #2 on:</strong> October 07, 2005, 11:30:10 PM »</div> <div id="msg_120049_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_120049">Also note that the tags moose posted don't have to be closed in the order they're opened, as an HTML book lied to me about.</div> </div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_120049"> </div> <div class="smalltext reportlinks"> <img src="http://www.charas-project.net/forum/Themes/charas2/images/ip.gif" alt="" /> Logged </div> <div class="signature" id="msg_120049_signature">AKA Desimodontidae. If you're seeing this profile, Im probably at school.<br /><br />If i were a clown, would you hold me when I'm down?/I wish I had someone to make me drown/So many people don't know that it's so damn hard to be a clown/I am the clown with the giant frown/My heart is in a state of being upside down...</div> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg120051"></a> <div class="windowbg2"> <span class="topslice"><span></span></span> <div class="post_wrapper"> <div class="poster"> <h4> <img src="http://www.charas-project.net/forum/Themes/charas2/images/useroff.gif" alt="Offline" /> <a href="http://www.charas-project.net/forum/index.php?action=profile;u=9329" title="View the profile of Osmose">Osmose</a> </h4> <ul class="reset smalltext" id="msg_120051_extra_info"> <li class="title">So freakin' inactive</li> <li class="postgroup">Royal</li> <li class="stars"><img src="http://www.charas-project.net/forum/Themes/charas2/images/rank3000.png" alt="*" /></li> <li class="avatar"> <a href="http://www.charas-project.net/forum/index.php?action=profile;u=9329"> <img class="avatar" src="http://img.photobucket.com/albums/v499/Osmose1000/moosecharasavatar.png" alt="" /> </a> </li> <li class="postcount">Posts: 3,041</li> <li class="profile"> <ul> <li><a href="http://www.moosecorps.com" title="" target="_blank" class="new_win"><img src="http://www.charas-project.net/forum/Themes/charas2/images/www_sm.gif" alt="" /></a></li> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden"> <div class="keyinfo"> <div class="messageicon"> <img src="http://www.charas-project.net/forum/Themes/charas2/images/post/xx.gif" alt="" /> </div> <h5 id="subject_120051"> <a href="http://www.charas-project.net/forum/index.php?topic=14027.msg120051#msg120051" rel="nofollow">(No subject)</a> </h5> <div class="smalltext">« <strong>Reply #3 on:</strong> October 07, 2005, 11:43:00 PM »</div> <div id="msg_120051_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_120051">The book didn't lie. Closing them in a random order is bad coding and will screw up older browsers. The only reason it works now is because most browsers realised that people will be lazy and protected themselves against it. But it can still cause nasty errors in some situations.<br /><br />It is best to close them in the order you open them. That is, <tag1><tag2>Lard</tag2></tag1></div> </div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_120051"> </div> <div class="smalltext reportlinks"> <img src="http://www.charas-project.net/forum/Themes/charas2/images/ip.gif" alt="" /> Logged </div> <div class="signature" id="msg_120051_signature">Hrm.</div> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> <a id="msg120129"></a><a id="new"></a> <div class="windowbg"> <span class="topslice"><span></span></span> <div class="post_wrapper"> <div class="poster"> <h4> <img src="http://www.charas-project.net/forum/Themes/charas2/images/useroff.gif" alt="Offline" /> <a href="http://www.charas-project.net/forum/index.php?action=profile;u=15987" title="View the profile of PyroAlchemist">PyroAlchemist</a> </h4> <ul class="reset smalltext" id="msg_120129_extra_info"> <li class="title">STOP IT NOW!</li> <li class="postgroup">Agent</li> <li class="stars"><img src="http://www.charas-project.net/forum/Themes/charas2/images/rank800.png" alt="*" /></li> <li class="avatar"> <a href="http://www.charas-project.net/forum/index.php?action=profile;u=15987"> <img class="avatar" src="http://www.charas-project.net/forum/index.php?action=dlattach;attach=27342;type=avatar" alt="" /> </a> </li> <li class="postcount">Posts: 932</li> <li class="profile"> <ul> </ul> </li> </ul> </div> <div class="postarea"> <div class="flow_hidden"> <div class="keyinfo"> <div class="messageicon"> <img src="http://www.charas-project.net/forum/Themes/charas2/images/post/xx.gif" alt="" /> </div> <h5 id="subject_120129"> <a href="http://www.charas-project.net/forum/index.php?topic=14027.msg120129#msg120129" rel="nofollow">(No subject)</a> </h5> <div class="smalltext">« <strong>Reply #4 on:</strong> October 08, 2005, 03:18:16 PM »</div> <div id="msg_120129_quick_mod"></div> </div> </div> <div class="post"> <div class="inner" id="msg_120129">Yah. Well I was going to cover that next but you've seemed to get it. Guess I'll get started on backgrounds, links, and images. <img src="http://www.charas-project.net/forum/Smileys/Charas_Blue/grin.gif" alt=":D" title="Cheesy" class="smiley" /> </div> </div> </div> <div class="moderatorbar"> <div class="smalltext modified" id="modified_120129"> </div> <div class="smalltext reportlinks"> <img src="http://www.charas-project.net/forum/Themes/charas2/images/ip.gif" alt="" /> Logged </div> <div class="signature" id="msg_120129_signature"><img src="<a href="http://img20.imageshack.us/img20/4995/pyrotu5.png" class="bbc_link" target="_blank">http://img20.imageshack.us/img20/4995/pyrotu5.png</a>"></div> </div> </div> <span class="botslice"><span></span></span> </div> <hr class="post_separator" /> </form> </div> <a id="lastPost"></a> <div class="pagesection"> <div class="buttonlist floatright"> <ul> <li><a class="button_strip_print" href="http://www.charas-project.net/forum/index.php?action=printpage;topic=14027.0" rel="new_win nofollow"><span class="last">Print</span></a></li> </ul> </div> <div class="pagelinks floatleft">Pages: [<strong>1</strong>] </div> <div class="nextlinks_bottom"><a href="http://www.charas-project.net/forum/index.php?topic=14027.0;prev_next=prev#new">« previous</a> <a href="http://www.charas-project.net/forum/index.php?topic=14027.0;prev_next=next#new">next »</a></div> </div> <div class="navigate_section"> <ul> <li> <a href="http://www.charas-project.net/forum/index.php"><span>Charas-Project</span></a> » </li> <li> <a href="http://www.charas-project.net/forum/index.php#c6"><span>Off-Topic</span></a> » </li> <li> <a href="http://www.charas-project.net/forum/index.php?board=104.0"><span>Archive</span></a> » </li> <li> <a href="http://www.charas-project.net/forum/index.php?board=117.0"><span>Really Old Stuff</span></a> » </li> <li> <a href="http://www.charas-project.net/forum/index.php?board=10.0"><span>HTML & DHTML</span></a> (Moderator: <a href="http://www.charas-project.net/forum/index.php?action=profile;u=6" title="Board Moderator">De KoFfie©</a>) » </li> <li class="last"> <a href="http://www.charas-project.net/forum/index.php?topic=14027.0"><span>Html Lessons From The Pyroguy</span></a> </li> </ul> </div> <div id="moderationbuttons"></div> <div class="plainbox" id="display_jump_to"> </div> <br class="clear" /> <script type="text/javascript" src="http://www.charas-project.net/forum/Themes/default/scripts/topic.js"></script> <script type="text/javascript"><![CDATA[ if ('XMLHttpRequest' in window) { var oQuickModify = new QuickModify({ sScriptUrl: smf_scripturl, bShowModify: true, iTopicId: 14027, sTemplateBodyEdit: '\n\t\t\t\t\t\t\t\t<div id="quick_edit_body_container" style="width: 90%">\n\t\t\t\t\t\t\t\t\t<div id="error_box" style="padding: 4px;" class="error"><' + '/div>\n\t\t\t\t\t\t\t\t\t<textarea class="editor" name="message" rows="12" style="width: 100%; margin-bottom: 10px;" tabindex="1">%body%<' + '/textarea><br />\n\t\t\t\t\t\t\t\t\t<input type="hidden" name="ce6964dbe928" value="eff2772d22459c7a8f06a12448e684fc" />\n\t\t\t\t\t\t\t\t\t<input type="hidden" name="topic" value="14027" />\n\t\t\t\t\t\t\t\t\t<input type="hidden" name="msg" value="%msg_id%" />\n\t\t\t\t\t\t\t\t\t<div class="righttext">\n\t\t\t\t\t\t\t\t\t\t<input type="submit" name="post" value="Save" tabindex="2" onclick="return oQuickModify.modifySave(\'eff2772d22459c7a8f06a12448e684fc\', \'ce6964dbe928\');" accesskey="s" class="button_submit" /> <input type="submit" name="cancel" value="Cancel" tabindex="3" onclick="return oQuickModify.modifyCancel();" class="button_submit" />\n\t\t\t\t\t\t\t\t\t<' + '/div>\n\t\t\t\t\t\t\t\t<' + '/div>', sTemplateSubjectEdit: '<input type="text" style="width: 90%;" name="subject" value="%subject%" size="80" maxlength="80" tabindex="4" class="input_text" />', sTemplateBodyNormal: '%body%', sTemplateSubjectNormal: '<a hr'+'ef="http://www.charas-project.net/forum/index.php'+'?topic=14027.msg%msg_id%#msg%msg_id%" rel="nofollow">%subject%<' + '/a>', sTemplateTopSubject: 'Topic: %subject% (Read 4067 times)', sErrorBorderStyle: '1px solid red' }); aJumpTo[aJumpTo.length] = new JumpTo({ sContainerId: "display_jump_to", sJumpToTemplate: "<label class=\"smalltext\" for=\"%select_id%\">Jump to:<" + "/label> %dropdown_list%", iCurBoardId: 10, iCurBoardChildLevel: 2, sCurBoardName: "HTML & DHTML", sBoardChildLevelIndicator: "==", sBoardPrefix: "=> ", sCatSeparator: "-----------------------------", sCatPrefix: "", sGoButtonLabel: "go" }); aIconLists[aIconLists.length] = new IconList({ sBackReference: "aIconLists[" + aIconLists.length + "]", sIconIdPrefix: "msg_icon_", sScriptUrl: smf_scripturl, bShowModify: true, iBoardId: 10, iTopicId: 14027, sSessionId: "eff2772d22459c7a8f06a12448e684fc", sSessionVar: "ce6964dbe928", sLabelIconList: "Message Icon", sBoxBackground: "transparent", sBoxBackgroundHover: "#ffffff", iBoxBorderWidthHover: 1, sBoxBorderColorHover: "#adadad" , sContainerBackground: "#ffffff", sContainerBorder: "1px solid #adadad", sItemBorder: "1px solid #ffffff", sItemBorderHover: "1px dotted gray", sItemBackground: "transparent", sItemBackgroundHover: "#e0e0f0" }); } // ]]></script> <script type="text/javascript"><![CDATA[ var verificationpostHandle = new smfCaptcha("http://www.charas-project.net/forum/index.php?action=verificationcode;vid=post;rand=190276114ed7fd7a0a51225a6ff8631c", "post", 1); // ]]></script> </div> </div></div> <div id="footer_section"><div class="frame"> <ul class="reset"> <li class="copyright"> <span class="smalltext" style="display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif;"><a href="http://www.charas-project.net/forum/index.php?action=credits" title="Simple Machines Forum" target="_blank" class="new_win">SMF 2.0.10</a> | <a href="http://www.simplemachines.org/about/smf/license.php" title="License" target="_blank" class="new_win">SMF © 2015</a>, <a href="http://www.simplemachines.org" title="Simple Machines" target="_blank" class="new_win">Simple Machines</a> </span></li> <li><a id="button_xhtml" href="http://validator.w3.org/check/referer" target="_blank" class="new_win" title="Valid XHTML 1.0!"><span>XHTML</span></a></li> <li><a href=http://www.smf-market.com>2O11</a></li> <li><a id="button_rss" href="http://www.charas-project.net/forum/index.php?action=.xml;type=rss" class="new_win"><span>RSS</span></a></li> <li class="last"><a id="button_wap2" href="http://www.charas-project.net/forum/index.php?wap2" class="new_win"><span>WAP2</span></a></li> <li><img id="smflogo" src="http://www.charas-project.net/forum/Themes/charas2/images/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" /> </ul> </div></div> </div> </body></html>

News:

Author Topic: Html Lessons From The Pyroguy (Read 4067 times)

PyroAlchemist

Html Lessons From The Pyroguy