Instructables
Picture of How to make a free website using HTML.
Picture 2.png
Now I know that anyone can go to freewebs (ahem, webs) and get a free website, but that requires no skill. What does require skill is HTML. HTML stands for Hyper Text Markup Language, and it is the building block of every website.

 
Remove these adsRemove these ads by Signing Up

Step 1: Sub-Domains.

Picture of Sub-Domains.
Picture 4.png
Picture 5.png
To get the essential website started, you need to get a Sub-Domain. A Sub-Domain is a URL that is a subsidiary of a regular URL. An example of a Sub-Domain would be woddlegames.bananimated.com or thezombiefuture.webs.com. To get your website up and running, we are going to use webs.com to get our Sub-Domain. Make a Webs account. Your username will be the title of the website, so act accordingly. When you get to the templates section of the account creator, click use advanced HTML template.

Step 2: HTML

Picture of HTML
Now that you have made an account, you need to learn HTML. To get an idea of HTML, mouse over the view button in the Internet Explorer console and click on Source. If you are smart, and using Safari or Firefox, to get the Source you basicly do the same thing.

BASIC HTML:

All HTML codes must begin with and end with . The indicates the closing text, or in this case, the closing of the HTML document. Most HTML commands end with .

List of Commands:

The opening and closing of the document.

</div><div id="richEmbedFiles" class="ible-files"></div><div id="attachments" class="ible-files"></div></div><div class="step-container"><a id="stepanchor-step3" name="step3"></a><h2 class="step-title">Step 3: Creating the final product.</h2><script type="text/javascript"> if (typeof notesArray === "undefined") window.notesArray = {}; </script><div class="photoset" data-entry-id="S8BWOG7FQHNOPCP" data-entry-url="/id/How-to-make-a-free-website-using-HTML/step3/Creating-the-final-product/" id="photoset-S8BWOG7FQHNOPCP"><div class="row" style="width:600px;"><a id="photoset-link-FEVYGIVFQHNOPDX-0" style="" class="photoset-link" rel="photoset-gallery-S8BWOG7FQHNOPCP" data-notes-lookup-id="FU9I646FQHNOPCS-0" data-href="/file/FU9I646FQHNOPCS" data-fancybox-href="http://cdn.instructables.com/FU9/I646/FQHNOPCS/FU9I646FQHNOPCS.LARGE.jpg" href="/file/FU9I646FQHNOPCS"><div class="photo-container" style="width:600px;"><img class="photoset-photo id_FU9I646FQHNOPCS " data-notes-lookup-id="FU9I646FQHNOPCS-0" alt="Picture of Creating the final product." src="http://cdn.instructables.com/FU9/I646/FQHNOPCS/FU9I646FQHNOPCS.MEDIUM.jpg" style="width:600px;" /></div></a></div><div class="row" style="width:600px;"><a id="photoset-link-FELQBZPFQHNOPDY-1" style="" class="photoset-link" rel="photoset-gallery-S8BWOG7FQHNOPCP" data-notes-lookup-id="FCTMD34FQHNOPDI-1" data-href="/file/FCTMD34FQHNOPDI" data-fancybox-href="http://cdn.instructables.com/FCT/MD34/FQHNOPDI/FCTMD34FQHNOPDI.LARGE.jpg" href="/file/FCTMD34FQHNOPDI"><div class="photo-container" style="width:600px;"><img class="photoset-photo id_FCTMD34FQHNOPDI lazyphoto" data-original="http://cdn.instructables.com/FCT/MD34/FQHNOPDI/FCTMD34FQHNOPDI.MEDIUM.jpg" data-notes-lookup-id="FCTMD34FQHNOPDI-1" alt="Picture 8.png" src="/static/img/pixel.png" style="width:600px;" /><noscript><img class="photoset-photo" alt="Picture 8.png" src="http://cdn.instructables.com/FCT/MD34/FQHNOPDI/FCTMD34FQHNOPDI.MEDIUM.jpg" style="width:600px;" /></noscript></div></a></div></div><div class="txt step-body">Mouse over to the <em>Edit My Site</em> drop down menu and select <em>File manager.</em> Then click on the T next to a file and name it <em>index.html</em>. The .html is incredibly important, as it will be your home page. Then go back to the file manager and click on the pencil next to index.html and create your website!<br/></div><div id="richEmbedFiles" class="ible-files"></div><div id="attachments" class="ible-files"></div></div></div> <!-- google_ad_section_end --> <!-- google_ad_section_start(weight=ignore) --> <a id="DISCUSS" name="DISCUSS"></a><div class="comments" id="comments"><script type="text/template" id="VersionTemplate"><!--jqfx--> <li class="ibleVersion"> <div class="versionDetails"> <span class="versionNumber"> #<< versionNumber >> </span> <span class="versionLastSaved"> saved <span class="strong"><< timeElapsed >></span> </span> <span class="versionDateSaved">(<< dateSaved >>)</span> </div> <div class="versionOptions"> <a class="btn pull-right revertToVersion"><< revertBtnTxt >></a> <a class="btn pull-right showVersionPreview"><< trans.PreviewVersion >></a> </div> </li> </script> <script type="text/template" id="HistoryTemplate"><!--jqfx--> <div id="ibleHistory"> <h2>Version History</h2> <ul id="ibleVersions"> </ul> </div> </script> <script type="text/template" id="StepDetailSlideTray"><!--jqfix--> <div id="StepWrapperInternal"> <div id="StepTrayContainer"> <div id="stepListContainers"> <!-- StepDetailView Manages this content --> </div> </div> </div> <a id="StepDetailLeftButton" href="#"></a> <a id="StepDetailRightButton" href="#"></a> </script> <script type="text/template" id="StepDetailTemplate"><!--jqfix--> <div class="stepDetailBox"> <div class="imageTray"></div> <div class="TitleBodyBox"> <div class="stepTitleWrapper"> <input type="text" class="stepTitleInput" value="<< title >>" placeholder="<< StepDecoratorText >> << trans.TypeTitlePrompt >>"></input> </div> <br /> <br /> <div class="ck_wrapper"> <textarea class="textEditor" id="editor-<< unid >>"><< body >></textarea> </div> </div> </div> </script> <script type="text/template" id="InstructableTemplate"><!--jqfix--> <ul id="InstructableVisible"> </ul> </script> <script type="text/template" id="StepTemplate"><!--jqfix--> <!-- 'li' container added in backbone view --> <div class="DropAboveStepBar DropAsStepSibling"><div class="dropHereMessage"><< trans.DropAsNewStep >></div></div> <div class=" InstructableStep DropAsChild"> <div class="wrapStepContent"> <!-- this div must remain style-less and on its own. Its here so we can retrieve the natural height of the content within the step --> <div class="stepContent-Left"> <!-- FileSet owned by FileSetView --> <ul id="<< unid >>-files" class="StepImages "></ul> </div> <div class="stepContent-Right"> <div class="stepTitleText"> <div class="stepTitleWrapper"> <a class="stepTitleName"><< stepLabel >> << title >></a> </div> <span class="BodyText"> << body >> </span> </div> <a href="#" class="step_delete button_hiding_in_step"><i class="ibl-icon icon-x"></i></a> <a class="stepDragHandle button_hiding_in_step" title='<< trans.DragToReorder >>'><i class="ibl-icon icon-stepDrag"></i></a> <a href="#" class="editStepCarat"><img src="/static/drag_editor/img/carat_disclosure.png" alt="Edit Step Contents"></a> </div> </div> </div> </script> <script type="text/template" id="StepListTemplate"><!--jqfix--> <!-- The following top-level item will be filled with all of the instructables' steps during templating --> <li><ul id="InstructableSteps"></ul></li> <!-- special bar at the bottom to allow dropping as last step --> <li class="dropAsLastStep" id="dropAsLastStep" style="width:100%;height:150px;"> <div class="DropAboveStepBar DropAsStepSibling"><div class="dropHereMessage"><< trans.DropAsNewStep >></div></div> </li> </script> <script type="text/template" id="template_hoverFile"><!--jqfix--> <div class="hover_frame"> <a href="#" class="delete_file">×</a> <a href="#" class="view_addNotes"><< view >></a> </div> </script> <script type="text/template" id="pixlrButton"><!--jqfix--> <div class='pixlrLaunchBtn << unid >>'> <a href="#" class="btn addNoteButton << unid >>"> <i class="icon-pencil"></i> << trans.AddNote >> </a> <a href="<< largeUrl >>" class="btn pixlrButton << unid >>"> <i class="icon-edit"></i> << trans.PixlrEdit >> </a> <a href="#" class="btn removeFromStepButton << unid >>"> << trans.RemoveFromStep >> </a> </div> </script> <script type="text/template" id="template_embedModal"><!--jqfix--> <div class="modal hide fade embedModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3><< trans.EmbedModalTitle >></h3> </div> <div class="modal-body"> <div id="embedPreviewContainer" class="placeholder"></div> <div id="embedInputArea"> <div class="input-append"> <input id="embedUrlInput" type="text" placeholder="<< trans.EmbedPasteUrl >>" class="span2"> </div> </div> <div id="supportedEmbedsMsg"> <span><< trans.EmbedSupportedLabel >>:</span> << trans.EmbedSupportedSites >> </div> </div> <div class="modal-footer"> <button id="embedCancelBtn" class="btn" data-dismiss="modal" aria-hidden="true"><< trans.Cancel >></button> <button id="embedPreviewBtn" class="btn btn-primary" ><< trans.EmbedPreviewBtn >></button> <button id="embedDoneBtn" class="btn btn-primary" type="button"><< trans.Done >></button> </div> </div> </script> <script type="text/template" id="iblesNavigation"><!--jqfix--> <div class="container"> <div class="btn-toolbar"> <div class="btn-group allView historyView"> <a class="btn allStepsLink" href="#" title="<< trans.ViewAll >>"><span class="icomoon-list-bullet"></span></a> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" title="<< trans.Edit >>"> <span class="caret"></span> </a> <ul class="dropdown-menu allstepsdropdown"> <li><a class="allStepsLink" href="#"><< trans.ViewAll >></a></li> <li class="divider"></li> <li><a class="openCollaborationModal" href="#"><< trans.Collaborate >></a></li> <li><a class="showHistory" href="#"><< trans.History >></a></li> <li class="makePrivateListItem" style="display:none;"><a class="makePrivate" href="#"><< trans.Private >></a></li> <li><a class="deleteIble" href="#"><< trans.Delete >></a></li> </ul> </div> <button id="addStepBtn" class="btn allView"><< trans.AddStep >></button> <button id="addImagesBtn" class="btn iconbtn allView"><span class="icomoon-camera"></span></button> <div class="btn-group allView"> <a id="embedDropdownToggle" class="btn iconbtn" data-toggle="dropdown" href="#"><span class="icomoon-video"></span></a> <ul class="dropdown-menu embedVideoDropdownMenu"> <li><a id="uploadVideoLink" href="#">Upload Video (coming soon!)</a></li> <li><a id="embedVideoLink" href="#">Embed Video</a></li> </ul> </div> <div class="btn-group allView"> <a id="attachDropdownToggle" class="btn iconbtn" data-toggle="dropdown" href="#"><span class="icomoon-paperclip"></span></a> <ul class="dropdown-menu attachFileDropdownMenu"> <li><a id="uploadFileLink" href="#">Upload File</a></li> <li><a id="embedFileLink" href="#">Embed File</a></li> </ul> </div> <button id="backToEditBtn" class="btn publishView historyView"><< trans.BackToEdit >></button> <a id="publishLink" href="#" class="btn pull-right btn-primary allView"><< trans.Publish >></a> <a id="btnPublishNowNavbar" class="btn pull-right btn-primary publishView publishScreenButton"><< trans.PublishNowShort >></a> <a id="saveLink" href="#" class="btn pull-right allView publishView"><< trans.Save >></a> <a id="previewLink" href="#" class="btn pull-right allView"><< trans.Preview >></a> <button class="btn pull-right unPublishAction publishScreenButton publishView"><< trans.UnPublish >></button> <span id="status-bar" class="pull-right badge status-bar"> <img id="spinner" src="/static/drag_editor/img/spinner_tiny.gif" /> <span class="text"><< trans.Saving >></span> </span> </div> </div> </script> <script type="text/template" id="template_makePrivate"><!--jqfix--> <div class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3><< trans.PrivateModalTitle >></h3> </div> <div class="modal-body"> <div class="public"><!-- Visible when ible is public, shows options for making private. --> <h4><< trans.PrivateExplanation >></h4> </div> <div class="private"> <p><< trans.PrivateAlreadyPrivate >></p> <strong><< trans.PrivateLinkLabel >>:</strong> <a href="#" target="_blank" class="private Url"></a> </div> </div> <div class="modal-footer"> <button class="btn cancel"><< trans.PrivateCloseBtn >></button> <button class="btn btn-primary public makePrivateBtn"><< trans.PrivateMakePrivateBtn >></button> <button class="btn private newLinkBtn"><< trans.PrivateNewLinkBtn >></button> <button class="btn btn-primary private makePublicBtn"><< trans.PrivateMakePublicBtn >></button> </div> </div> </script> <script type="text/template" id="template_Collaboration"><!--jqfix--> <div class="modal hide fade collaborationModal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3><< trans.CollaborationModalTitle >></h3> </div> <div class="modal-body"> <div class="enableCollaborationState"> <h4><< trans.CollabDescription >></h4> </div> <div class="disableCollaborationState addCollaboratorForm"> <p class="input-append"> <input class="span2 addCollaborator" type="text" placeholder="<< trans.CollabTypeScreenName >>"> <button class="btn addCollaborator" type="button"><< trans.CollabAddBtn >></button> </p> <p class="addStatus"> <span class="status-bar badge"> <img src="/static/drag_editor/img/spinner_tiny.gif" /> <span class="text"><< trans.CollabWorking >></span> </span> <span class="help-inline"></span> </p> <div class="btn-group"> <a class="btn " href="#"><< trans.CollabCurrentList >></a> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="caret"></span> </a> <ul class="dropdown-menu"> </ul> </div> </div> </div> <div class="modal-footer"> <button class="btn cancel"><< trans.CollabCloseBtn >></button> <button class="btn btn-primary enableCollaborationBtn enableCollaborationState"><< trans.CollabEnableBtn >></button> <button class="btn disableCollaborationBtn disableCollaborationState"><< trans.CollabDisableBtn >></button> </div> </div> </script> <script id="template_errorAlert" type="text/template"><!--jqfix--> <div class="alert-transparency alert-close"> <div class="alert alert-block << alertType >>" id="alertDiv"> <button type="button" class="close alert-close">×</button> <h4><< alertTitle >></h4> << alertMessage >> </div> </div> </script> <script id="template_confirmAction" type="text/template"><!--jqfix--> <div class="alert alert-block << alertType >>" id="alertDiv"> <button type="button" class="close">×</button> <h4><< alertTitle >></h4> <p><< alertMessage >></p> <p> <button class="btn confirm_cancel"><< cancelMessage >></button> <button class="btn << confirmClass >> confirm_action"><< confirmMessage >></button> </p> </div> </script> <script id="template_newInstructable" type="text/template"><!--jqfix--> <div id="uploadModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <h3 id="myModalLabel"><< trans.InstructableTitlePrompt >></h3> </div> <div class="modal-body newInstructable"> <form class="form-horizontal" id="NewInstructableForm"> <div class="control-group"> <label class="control-label" for="title"><< trans.Title >></label> <div class="controls"> <input class="newInstructable" type="text" name="title" id="title" value="<< trans.TypeTitlePrompt >>"/> </div> </div> <div class="control-group lang_selector"> <label class="control-label" for="lang-select"><< trans.Language >></label> <div class="controls"> <select name="lang-select" id="lang-select" class="lang_selector" style="display: inline-block;"> <!--<option value=""><< trans.ChooseLanguage >></option>--> </select> </div> </div> <div id="wrapper_categorySelector"></div> <div class="control-group loadingCategories"> <img src="/static/drag_editor/img/ajax-loader.gif" /> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-primary begin" ><< trans.Begin >></button> </div> </div> </script> <script type="text/template" id="template_coverImageDropdownChoice"><!--jqfix--> <li class='coverImageOption' represented-file-unid="<< unid >>"> <a href='#'> <img src='<< tinyUrl >>' /><< name >> </a> </li> </script> <script id="template_PublishInstructable" type="text/template"><!--jqfix--> <div id="PublishInstructable"> <h3><< trans.InstructablePreview >></h3> <div class="publish_section"> <div class="publish_section_left"> <div class="coverImage"> <div class="cropperContainer"></div> <div class="bylineMask"> <span class="byline_title"> <a target="_blank" href="/id/<< url >>"><< shortTitle >></a> <span class="byline_author"><< authorCredit >></span> </span> </div> </div> <h6><< trans.DragToCrop >></h6> </div> <div class="publish_section_right"> <form class="form-horizontal" id="PublishInstructableForm"> <div class="control-group"> <label class="control-label" ></label> <div class="controls"> <div id="coverImageSelector"></div> </div> </div> <div class="control-group"> <label class="control-label" for="title"><< trans.Title >></label> <div class="controls"> <input type="text" name="title" id="ibletitle" value="<< title >>"/> </div> </div> <div class="control-group"> <label class="control-label" for="keywords"><< trans.Keywords >></label> <div class="controls"> <input type="text" name="keywords" id="keywords" placeholder="<< trans.KeywordsPrompt >>" value="<< keywords >>"/> <span class="help-block"><< trans.KeywordsHint >></span> </div> </div> <div class="control-group"> <label class="control-label" for="license"><< trans.License >></label> <div class="controls"> <div class="dropdown" id="license"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="licenseLinkText pull-left">**Choose license</span> <b class="caret pull-right"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a href="#" class="licSelect" data-value="NONE">None (All Rights Reserved)</a></li> <li><a href="#" class="licSelect" data-value="PD">Public Domain</a></li> <li><a href="#" class="licSelect" data-value="BY">Attribution</a></li> <li><a href="#" class="licSelect" data-value="BY_NC">Attribution-NonCommercial</a></li> <li><a href="#" class="licSelect" data-value="BY_NC_SA">Attribution-NonCommercial-ShareAlike</a></li> <li><a href="#" class="licSelect" data-value="BY_SA">Attribution-ShareAlike</a></li> <li><a href="#" class="licSelect" data-value="BY_NC_ND">Attribution-NonCommercial-NoDerivs</a></li> <li><a href="#" class="licSelect" data-value="BY_ND">Attribution-NoDerivs</a></li> <li><a href="#" class="licSelect" data-value="GPL">General Public License</a></li> <li><a href="#" class="licSelect" data-value="LGPL">Lesser General Public License</a></li> <li><a href="#" class="licSelect" data-value="APACHE">Apache License</a></li> </ul> </div> </div> </div> </form> </div> </div> <h3><< trans.ChooseCategory >></h3> <div class="publish_section_clear"> <div id="categoryBlock"></div> </div> <h3 id="contestHeader"><< trans.EnterContests >> <span class="maxContests"><< trans.Max3Entries >></span></h3> <div class="publish_section_clear"> <div id="contestList"> <div class="channelBlock loadingCategories"><img src="/static/drag_editor/img/ajax-loader.gif" /></div> </div> <h4 id ="enter-click"><< trans.ClickEnter >></h4> </div> <div class="publish_section_center"> <div id="btnPublish" class="btn btn-primary"> <span style="margin-left:8px;"><< trans.PublishNow >></span> </div> <!--<div class="btn unPublishAction"><< trans.UnPublish >></div>--> </div> </div> </script> <script type="text/template" id="contestListItem"><!--jqfix--> <div class="contest_chooser" data-contest-id="<< id >>"> <div class="popover-wrapper" data-original-title= "<<title>>" > <img src="<< headerUrl >>" class="contest_thumbnail"/> <img src="/static/drag_editor/img/gopro.png" class="contest_check"/> </div> </div> </script> <script type="text/template" id="contestPopoverItem"><!--jqfix--> <div class="popover-contest-description"> <div class="loader-image"> <img src='/static/drag_editor/img/ajax_loader_large.gif'/> </div> </div> <div class="contest-date"> << closingDateText >> </div> <div class="contest-buttons"> <a href= "<<url>>" target="_blank" class=btn> <i class="ibl-icon icon-link"></i><< trans.FullContestInfo >></a> <button class="btn btn-blue enter-contest-btn" name='<< id >>'><i class="contest-check ibl-icon icon-whiteCheck"></i><span class="contest-btn-text"><< trans.EnterContest >></span></button> </div> <div class="spacer"></div> </script> <script type="text/template" id="template_categorySelector"><!--jqfix--> <div class="control-group"> <label class="control-label" for="category-select"><< trans.Category >></label> <div class="controls"> <select name="category" id="category-select" class="category_selector"> <option value=""><< trans.ChooseCategory >></option> </select> </div> </div> </script> <script type="text/template" id="template_channelSelector"><!--jqfix--> <div class="control-group channel_selector"> <label class="control-label" for="channel-select"><< trans.Channel >></label> <div class="controls"> <select name="channel-select" id="channel-select" class="channel_selector" style="display: inline-block;"> <option value=""><< trans.ChooseChannel >></option> </select> </div> </div> </script> <script type="text/template" id="template_categoryChannelOption"><!--jqfix--> <option value="<< title >>"><< display >></option> </script> <script type="text/template" id="template_categoryBlock"><!--jqfix--> <div id="categoryBlock"></div> <div id="channelBlock"> <div class="channelBlock loadingCategories"><img src="/static/drag_editor/img/ajax-loader.gif" /></div> <div class="channelBlock_column"></div> <div class="channelBlock_column"></div> <div class="channelBlock_column"></div> <div class="channelBlock_column"></div> <div class="channelBlock_column"></div> </div> </script> <script type="text/template" id="template_imageCropper"><!--jqfix--> <div id="cropper"> <div id='crop_container'></div> <div class="cropWindow under"> <img class="croppable" src="<< mediumUrl >>" /> </div> <div class="cropWindow over"> <img class="croppable" src="<< mediumUrl >>" /> <div class="cropper-movePrompt"></div> </div> </div> </script> <script type="text/template" id="template_coverImageSelector"><!--jqfix--> <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> << trans.CoverImage >> <span class="caret"></span> </a> <ul class="dropdown-menu limitSize"> <!-- dropdown menu links --> </ul> </div> </script> <script type="text/template" id="PreviewModalView"><!--jqfix--> <div class="previewIframeCloseButton iframeFade"></div> <iframe class="previewIframe iframeFade" src="<< previewUrl >>"> </iframe> </script> <script type="text/template" id="LoadingModalView"><!--jqfix--> <div class="modal_loading"><img src="/static/drag_editor/img/ajax-loader.gif"><< trans.Loading >></div> </script> <script type="text/template" id="RobotMessage"> <div id="robotMsg"> <img src="/static/drag_editor/img/robot.png"/> <div> <h3 class="deleteClass"><< deleteMessage >></h3> <h3 class="oldEditorClass"><< oldEditorMessage >></h3> </div> <div id="robotMsgButtons"> <button id="homeBtn" class="btn btn-primary deleteClass"><< homeButton >></button> <button id="oldEditorBtn" class="btn btn-primary oldEditorClass"><< oldEditorButton >></button> <button id="createBtn" class="btn btn-primary"><< createButton >></button> </div> </div> </script> <script type="text/template" id="DuplicateTitleModal"><!--jqfix--> <div tabindex="-1" role="dialog" class="modal hide fade title-modal" aria-hidden ="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3><< trans.TitleSuggestions >></h3> </div> <div class="modal-body"> <img id="title-robot" src="/static/drag_editor/img/robot.png"/> <div class="body-text"> <h4><< trans.AlreadyHasTitle >></h4> <h4> << trans.OtherSuggestions >> </h4> <ul class="message"> << suggestionText >> </ul> <div id="new-title-input" class="control-group"> <label for="title"><< trans.NewTitle >>:</label> <span class="controls"> <input type="text" name="title" id="new-title" value="<< title >>"/> </span> <span class="checker"> <button class="btn" id="title-checker"><< trans.Check >></button> <span id="title-status-bar" class="status-bar"> <span class="title-spinner" ></span> <div id="title-check-text" class="help-block"></div> </span> </span> </div> </div> </div> <div class="modal-footer"> <span class= pull-right> <span id="publish-status-bar" class="badge status-bar"> <img id="title-publish-spinner" src="/static/drag_editor/img/spinner_tiny.gif" /> <span class="text"><< trans.Saving >></span> </span> <button class="btn btn-primary closeModal" id="newTitlePublish"> << trans.Publish >> </button> </span> </div> </div> </script> <script type="text/template" id="ShareModal"><!--jqfix--> <div tabindex="-1" role="dialog" class="modal hide fade share-modal" aria-hidden ="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3><< trans.PublishedTitle >></h3> </div> <div class="modal-body"> <div class="share-cover-item cover-item "> <a title="<< shortTitle >>" class="share-image" href="/id/<< url >>"><img src="<< coverImage.rectangle1Url >>" alt="<< title >>"/></a> <div class="bylineMask"> <span class="byline_title"> <a target="_blank" href="/id/<< url >>"><< title >></a> <span class="byline_author"> <a target="_blank" href="/member/<< author.id >>"> by << author.screenName >> </a> </span> </span> </div> </div> <div class="body-text"> <h3><< trans.NiceWork >></h3> <div class="message"> <a href="/id/<< url >>" class="direct-link"><< trans.DirectLink >></a> << trans.IncludeInUpdate >> </div> <h4><< trans.AwesomeShare >></h4> <div id="share-buttons"> <button class="facebook-share-button btn share-btn"><img src= '/static/drag_editor/img/facebook-16x16.png'/> Share</button> <span class="twitter-share-button share-btn"> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=<< fullLink >>&count=none&size=l&text=<< encodedTitle >>" style="width:76px; height:28px;"></iframe> </span> <a class="pinterest-share-button share-btn" href="//www.pinterest.com/pin/create/button/?url=<< fullLink >>&media=<< imageLink >>&description=<< encodedTitle >>" data-pin-do="buttonPin" data-pin-config="none" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_28.png" /></a> </div> </div> </div> <div class="modal-footer"> <a class="btn btn-primary closeModal" id="checkOut" href="/id/<< url >>"><< trans.CheckOut >></a> </div> </div> <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script> </script> <div class="comments-container"><div class="comments-header clearfix"><div id="add-comment-top" class="add-comment-bucket login-required"><a id="comment-invoker-top" class="static-invoker" href="#" style="display:none"></a><script type="text/javascript"> window.UPLOAD_SCRIPT = ""; </script> <!--[if !IE]><!--> <link rel="stylesheet" href="/static/drag_editor/dependencies/uploader/css/jquery.fileupload-ui-dragdrop-editor.css" /> <script type="text/javascript"> window.UPLOAD_SCRIPT = "/static/drag_editor/deploy/uploader.html5.min.29.js"; </script> <!--><![endif]--> <!-- Uploadify Flash Uploader, so multi-select is allowed still for ie < 10. Comes with slightly modified UI for Modal. --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="/static/drag_editor/dependencies/uploadify/uploadify.css" /> <script type="text/javascript"> window.UPLOAD_SCRIPT = "/static/drag_editor/deploy/uploader.flash.min.29.js"; </script> <![endif]--> <div id="CommentPoster"><div id="CommentFlaggerXX" class="comment-flagger"><div id="CommentFlagOptions" class="comment-flag-options clearfix"><div class="stepLabel fr">Flag this comment as:</div><div class="clearfix flag-type fr"><div><img src="/static/IMGS/bullet-1.gif" /><a class="flag-comment-as" data-flagtype="not_nice">Not Nice</a></div><div><img src="/static/IMGS/bullet-1.gif" /><a class="flag-comment-as" data-flagtype="inappropriate">Inappropriate</a></div><div><img src="/static/IMGS/bullet-1.gif" /><a class="flag-comment-as" data-flagtype="spam">Spam</a></div><div class="cancel"><input id="" value="cancel" type="button" class="button" style="width:75px;" onclick="$('#CommentPoster').fadeOut('fast', function(){$(this).remove();});" tabindex="" onmouseover="this.className = 'button_over';" onmouseout="this.className = 'button';" rel="" /></div></div></div><div id="CommentFlagResponse" class="comment-flag-response clearfix"></div></div><div id="CommentPosterXX" class="comment-poster clearfix"><a name="previewlink"></a><div id="PreviewComment" class="comment-preview" style="display:none"><span class="stepLabel">Preview Your <span class="commentType">Comment</span></span><div class="preview-body"><div id="PreviewCommentBody" name="PreviewCommentBody"></div><div id="PreviewCommentImages" name="PreviewCommentImages"></div><div id="PreviewCommentFiles" name="PreviewCommentFiles"></div></div></div><form action="/edit/post?bootstrapped=1" method="post" id="PostCommentForm" name="PostCommentForm" class="post-comment-form" ><input type="hidden" name="posted" value="1418892299032"/><input id="PostTopicID" type="hidden" name="stepId" value="SWFU11EFQHNOP2E" /><input id="InReplyToId" type="hidden" name="inReplyToId" value="" /><input type="hidden" name="linkTo" value="/id/How-to-make-a-free-website-using-HTML/" /><input type="hidden" name="richeditor" id="richeditor" value="false" /><input id="commentFiles" name="files" type="hidden" value="" /><input type="hidden" id="PostCommentFormBODY" name="PostCommentFormBODY" value="" /><input type="hidden" id="postToFb" name="postToFb" value="" /><input type="hidden" id="IMadeIt" name="IMadeIt" value="" /><div class="post-comment-box clearfix"><div class="clearfix"><div class="commenter-image fl"><img src="/static/defaultIMG/user.TINY.gif" /></div><div class="comment-container fr"><div class="commentTip" data-toggle="tooltip" title="Highlight text to apply styling"></div><textarea id="PostCommentFormBODY_editor" name="content" class="redactorAirComment editorArea"></textarea><div class="alert alert-info imadeit-image-warning"><button type="button" class="close">×</button><strong>"I Made It"</strong> comments require images. Uncheck for normal comment. </div></div></div><ul id="image-bucket" class="instructable-image-bucket clearfix ui-sortable" style="display:none"></ul><div class="comment-toolbar clearfix"><div class="policy fl"><p>We have a <b>be nice</b> comment policy. <br />Please be positive and constructive.</p></div><div class="toolbar-btns fr"><button id="comment-imadeit-toggle" class="btn"><i class="bg-icon imadeit selected "></i>  <span>I Made it!</span></button><button id="ed_add_images_files" class="btn"><i class="bg-icon camera"></i>  <span>Add Images</span></button><input id="PostCommentLink" class="btn btn-orange" value="Make Comment" title="Make a comment" type="button" tabindex="5" /></div></div><div id="PostCommentFormError" class="form-error"></div></div></form><span id="commentUploaderTemplates" /></div></div></div></div><div id="ajax_newcomment_placeholder"></div><a name="CGI67KAH4AFS5QM"></a><div id="comment-CGI67KAH4AFS5QM" class="comment-entry clearfix toplevel " style="margin-left:0px;"><div class="comment-authorpicstats"><div style="display:none" class="comment-author-achievements achievements-MGARSWIGWTSNTFR" data-authorid="MGARSWIGWTSNTFR" data-toggle="popover"><i style="display:none" class="bg-icon small-medallion small-medallion-featured"></i><i style="display:none" class="bg-icon small-medallion small-medallion-comments"></i><i style="display:none" class="bg-icon small-medallion small-medallion-views"></i><div style="display:none" class="medallion-popover-wrapper"><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-featured-wrapper"><p></p><i class="popover-medallion popover-medallion-featured"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-comments-wrapper"><p></p><i class="popover-medallion popover-medallion-comments"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-views-wrapper"><p></p><i class="popover-medallion popover-medallion-views"></i></div></div></div><a class="memberstats id-knexpert1700" href="/member/knexpert1700/" data-screenname="knexpert1700"><img src="http://cdn.instructables.com/FDL/K3WT/HLA1AZWE/FDLK3WTHLA1AZWE.TINY.jpg" alt="" /></a></div><div class="comment-info"><span class="comment-author"><a class="author-link " href="/member/knexpert1700/">knexpert1700</a></span><span class="comment-date">2 years ago<a id="replytolink_CGI67KAH4AFS5QM" class="btn btn-mini reply-comment login-required" data-postid="CGI67KAH4AFS5QM">Reply</a></span></div><div class="txt comment-txt">The problem is that the website doesn't offer HTML anymore.Neither does webpaper.com too. :(</div><div id="richEmbedFiles" class=""></div><div id="attachments" class=""></div><div id="commentactioncontainer_CGI67KAH4AFS5QM" class="comment-actions"><div class="fr mt5"></div></div></div><a name="COKHLCXHNM4A9YH"></a><div id="comment-COKHLCXHNM4A9YH" class="comment-entry clearfix " style="margin-left:52px;"><div class="comment-authorpicstats"><div style="display:none" class="comment-author-achievements achievements-MB9C2HKGP7IEYXK" data-authorid="MB9C2HKGP7IEYXK" data-toggle="popover"><i style="display:none" class="bg-icon small-medallion small-medallion-featured"></i><i style="display:none" class="bg-icon small-medallion small-medallion-comments"></i><i style="display:none" class="bg-icon small-medallion small-medallion-views"></i><div style="display:none" class="medallion-popover-wrapper"><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-featured-wrapper"><p></p><i class="popover-medallion popover-medallion-featured"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-comments-wrapper"><p></p><i class="popover-medallion popover-medallion-comments"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-views-wrapper"><p></p><i class="popover-medallion popover-medallion-views"></i></div></div></div><a class="memberstats id-Josehf Murchison" href="/member/Josehf+Murchison/" data-screenname="Josehf Murchison"><img src="http://cdn.instructables.com/FM5/I7IQ/HURHRN8C/FM5I7IQHURHRN8C.TINY.jpg" alt="" /></a></div><div class="comment-info"><span class="comment-author"><a class="author-link pro" href="/member/Josehf+Murchison/">Josehf Murchison</a><i class="bg-icon next"></i> <a class="in-reply-to" href="#CGI67KAH4AFS5QM">knexpert1700</a></span><span class="comment-date">1 year ago<a id="replytolink_COKHLCXHNM4A9YH" class="btn btn-mini reply-comment login-required" data-postid="COKHLCXHNM4A9YH">Reply</a></span></div><div class="txt comment-txt">I found HTMLs that work in Instructables come see.<br> <br> <a href="http://www.instructables.com/id/Snork-Adding-HTML-TAGS-to-Instructables/" rel="nofollow">http://www.instructables.com/id/Snork-Adding-HTML-TAGS-to-Instructables/</a></div><div id="richEmbedFiles" class=""></div><div id="attachments" class=""></div><div id="commentactioncontainer_COKHLCXHNM4A9YH" class="comment-actions"><div class="fr mt5"></div></div></div><a name="CA5QV0BH4AGINPW"></a><div id="comment-CA5QV0BH4AGINPW" class="comment-entry clearfix toplevel " style="margin-left:0px;"><div class="comment-authorpicstats"><div style="display:none" class="comment-author-achievements achievements-MIOVAJ6H4AG52XF" data-authorid="MIOVAJ6H4AG52XF" data-toggle="popover"><i style="display:none" class="bg-icon small-medallion small-medallion-featured"></i><i style="display:none" class="bg-icon small-medallion small-medallion-comments"></i><i style="display:none" class="bg-icon small-medallion small-medallion-views"></i><div style="display:none" class="medallion-popover-wrapper"><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-featured-wrapper"><p></p><i class="popover-medallion popover-medallion-featured"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-comments-wrapper"><p></p><i class="popover-medallion popover-medallion-comments"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-views-wrapper"><p></p><i class="popover-medallion popover-medallion-views"></i></div></div></div><a class="memberstats id-Ink Ninja" href="/member/Ink+Ninja/" data-screenname="Ink Ninja"><img src="http://cdn.instructables.com/FAU/PKUR/H4AG8XYR/FAUPKURH4AG8XYR.TINY.jpg" alt="" /></a></div><div class="comment-info"><span class="comment-author"><a class="author-link " href="/member/Ink+Ninja/">Ink Ninja</a></span><span class="comment-date">2 years ago<a id="replytolink_CA5QV0BH4AGINPW" class="btn btn-mini reply-comment login-required" data-postid="CA5QV0BH4AGINPW">Reply</a></span></div><div class="txt comment-txt">There are 2 downsides to this. <br>1) I checked out webs.com, and apparently, it no longer does the HTML editor anymore. <br>2) You don't actually help with the learning of HTML. You basically just point to another website and say, "There! Look at that, I can't be bothered to teach you HTML." Perhaps you could create an actual guide to HTML and link to it on the Instructable.</div><div id="richEmbedFiles" class=""></div><div id="attachments" class=""></div><div id="commentactioncontainer_CA5QV0BH4AGINPW" class="comment-actions"><div class="fr mt5"></div></div></div><a name="CJ2ZH92HNM4A9TT"></a><div id="comment-CJ2ZH92HNM4A9TT" class="comment-entry clearfix " style="margin-left:52px;"><div class="comment-authorpicstats"><div style="display:none" class="comment-author-achievements achievements-MB9C2HKGP7IEYXK" data-authorid="MB9C2HKGP7IEYXK" data-toggle="popover"><i style="display:none" class="bg-icon small-medallion small-medallion-featured"></i><i style="display:none" class="bg-icon small-medallion small-medallion-comments"></i><i style="display:none" class="bg-icon small-medallion small-medallion-views"></i><div style="display:none" class="medallion-popover-wrapper"><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-featured-wrapper"><p></p><i class="popover-medallion popover-medallion-featured"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-comments-wrapper"><p></p><i class="popover-medallion popover-medallion-comments"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-views-wrapper"><p></p><i class="popover-medallion popover-medallion-views"></i></div></div></div><a class="memberstats id-Josehf Murchison" href="/member/Josehf+Murchison/" data-screenname="Josehf Murchison"><img src="http://cdn.instructables.com/FM5/I7IQ/HURHRN8C/FM5I7IQHURHRN8C.TINY.jpg" alt="" /></a></div><div class="comment-info"><span class="comment-author"><a class="author-link pro" href="/member/Josehf+Murchison/">Josehf Murchison</a><i class="bg-icon next"></i> <a class="in-reply-to" href="#CA5QV0BH4AGINPW">Ink Ninja</a></span><span class="comment-date">1 year ago<a id="replytolink_CJ2ZH92HNM4A9TT" class="btn btn-mini reply-comment login-required" data-postid="CJ2ZH92HNM4A9TT">Reply</a></span></div><div class="txt comment-txt">I found HTMLs that work in Instructables come see.<br> <br> <a href="http://www.instructables.com/id/Snork-Adding-HTML-TAGS-to-Instructables/" rel="nofollow">http://www.instructables.com/id/Snork-Adding-HTML-TAGS-to-Instructables/</a></div><div id="richEmbedFiles" class=""></div><div id="attachments" class=""></div><div id="commentactioncontainer_CJ2ZH92HNM4A9TT" class="comment-actions"><div class="fr mt5"></div></div></div><a name="CAIWUI8GA8NEF3J"></a><div id="comment-CAIWUI8GA8NEF3J" class="comment-entry clearfix toplevel " style="margin-left:0px;"><div class="comment-authorpicstats"><div style="display:none" class="comment-author-achievements achievements-MIRS6ZUFRBPZDRI" data-authorid="MIRS6ZUFRBPZDRI" data-toggle="popover"><i style="display:none" class="bg-icon small-medallion small-medallion-featured"></i><i style="display:none" class="bg-icon small-medallion small-medallion-comments"></i><i style="display:none" class="bg-icon small-medallion small-medallion-views"></i><div style="display:none" class="medallion-popover-wrapper"><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-featured-wrapper"><p></p><i class="popover-medallion popover-medallion-featured"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-comments-wrapper"><p></p><i class="popover-medallion popover-medallion-comments"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-views-wrapper"><p></p><i class="popover-medallion popover-medallion-views"></i></div></div></div><a class="memberstats id-Shoukei" href="/member/Shoukei/" data-screenname="Shoukei"><img src="http://cdn.instructables.com/FJY/8EU1/GA8NEF3E/FJY8EU1GA8NEF3E.TINY.jpg" alt="" /></a></div><div class="comment-info"><span class="comment-author"><a class="author-link " href="/member/Shoukei/">Shoukei</a></span><span class="comment-date">4 years ago<a id="replytolink_CAIWUI8GA8NEF3J" class="btn btn-mini reply-comment login-required" data-postid="CAIWUI8GA8NEF3J">Reply</a></span></div><div class="txt comment-txt">Making simple websites like those are really easy but the end produce would be just a rather simple website.</div><div id="richEmbedFiles" class=""></div><div id="attachments" class=""></div><div id="commentactioncontainer_CAIWUI8GA8NEF3J" class="comment-actions"><div class="fr mt5"></div></div></div><a name="C17LDF7FQJ6BCOW"></a><div id="comment-C17LDF7FQJ6BCOW" class="comment-entry clearfix toplevel " style="margin-left:0px;"><div class="comment-authorpicstats"><div style="display:none" class="comment-author-achievements achievements-M7FT7ELMCSETVPMRPA" data-authorid="M7FT7ELMCSETVPMRPA" data-toggle="popover"><i style="display:none" class="bg-icon small-medallion small-medallion-featured"></i><i style="display:none" class="bg-icon small-medallion small-medallion-comments"></i><i style="display:none" class="bg-icon small-medallion small-medallion-views"></i><div style="display:none" class="medallion-popover-wrapper"><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-featured-wrapper"><p></p><i class="popover-medallion popover-medallion-featured"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-comments-wrapper"><p></p><i class="popover-medallion popover-medallion-comments"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-views-wrapper"><p></p><i class="popover-medallion popover-medallion-views"></i></div></div></div><a class="memberstats id-upriverpaddler" href="/member/upriverpaddler/" data-screenname="upriverpaddler"><img src="/static/defaultIMG/user.TINY.gif" alt="" /></a></div><div class="comment-info"><span class="comment-author"><a class="author-link " href="/member/upriverpaddler/">upriverpaddler</a></span><span class="comment-date">5 years ago<a id="replytolink_C17LDF7FQJ6BCOW" class="btn btn-mini reply-comment login-required" data-postid="C17LDF7FQJ6BCOW">Reply</a></span></div><div class="txt comment-txt">Seems like spam to me. "How To Make A Website" Step 1 - Sign up at our site. Step 2 - Learn to make a website yourself. ???</div><div id="richEmbedFiles" class=""></div><div id="attachments" class=""></div><div id="commentactioncontainer_C17LDF7FQJ6BCOW" class="comment-actions"><div class="fr mt5"></div></div></div><a name="CS6HDCTFQHNKWEG"></a><div id="comment-CS6HDCTFQHNKWEG" class="comment-entry clearfix toplevel " style="margin-left:0px;"><div class="comment-authorpicstats"><div style="display:none" class="comment-author-achievements achievements-MOYN609F82EXH8N" data-authorid="MOYN609F82EXH8N" data-toggle="popover"><i style="display:none" class="bg-icon small-medallion small-medallion-featured"></i><i style="display:none" class="bg-icon small-medallion small-medallion-comments"></i><i style="display:none" class="bg-icon small-medallion small-medallion-views"></i><div style="display:none" class="medallion-popover-wrapper"><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-featured-wrapper"><p></p><i class="popover-medallion popover-medallion-featured"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-comments-wrapper"><p></p><i class="popover-medallion popover-medallion-comments"></i></div><div style="display:none" class="comment-large-medallion-wrapper popover-medallion-views-wrapper"><p></p><i class="popover-medallion popover-medallion-views"></i></div></div></div><a class="memberstats id-stephenniall" href="/member/stephenniall/" data-screenname="stephenniall"><img src="http://cdn.instructables.com/F6X/LJVP/G7DYOIT1/F6XLJVPG7DYOIT1.TINY.jpg" alt="" /></a></div><div class="comment-info"><span class="comment-author"><a class="author-link " href="/member/stephenniall/">stephenniall</a></span><span class="comment-date">5 years ago<a id="replytolink_CS6HDCTFQHNKWEG" class="btn btn-mini reply-comment login-required" data-postid="CS6HDCTFQHNKWEG">Reply</a></span></div><div class="txt comment-txt">Pretty good i'ble Try and show some of what Html actually does and examples lol PS On your home page it is just easier to put .htm not .html</div><div id="richEmbedFiles" class=""></div><div id="attachments" class=""></div><div id="commentactioncontainer_CS6HDCTFQHNKWEG" class="comment-actions"><div class="fr mt5"></div></div></div><script type="text/javascript"> head.load('/static/js/achievements.js', '/static/js/underscore-min.js', function() { $(document).ready(function() { var authorIds = getAuthorIdsFromPage(), authorIdObj = prepAuthorIds(authorIds); addAuthorAchievements(authorIdObj, "commentAuthorStats", renderCommentAuthorAchievements); }) }); </script></div><script> head.js( "/static/js/jqplugins/jquery.notes.js", "/static/js/jqplugins/fancybox/source/jquery.fancybox.pack.js", "/static/js/fancybox-photoset.js", function() { $ = jQuery; $("div.comment-entry div.spotThumbs a").fancybox({ afterShow: function (x) { var $el = $(this.element), imgid = $el.find("img").attr("id").substring(3); $("img.fancybox-image").notes(notesArray[imgid], false, $(".fancybox-inner")); } }); $(".in-reply-to").click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop : $("#comment-"+$(this).attr('href').substr(1)).offset().top-$('#ible-header').outerHeight()}, 'slow'); }); } ); </script></div> <!-- google_ad_section_end --> </div><div id="sidebar"><div id="gpt-ad-med-rectangle" class="side-ad ible"><script type="text/javascript"> googletag.cmd.push(function() { googletag.display("gpt-ad-med-rectangle"); }); </script></div><div class="hatbox about-ible"><h3>About This Instructable<a class="stats-link btn" href="#statsModal" data-toggle="imodal"><i class="bg-icon stats"></i></a></h3><div id="ible-about" class="hatbox-content"><div class="ible-info"><div class="clearfix"><div class="ible-details"><p class="total-hits"><i class="icon-views selected"></i><span class="count">54,181</span> views</p><p class="favorites"><i class="icon-favorites selected"></i><span class="count">16</span> favorites</p></div><div class="ible-extras"><p class="license"><span>License:</span><br /><a href="#" onclick="window.open('/static/entry/license/NONE.html','LICENSE','status=yes,scrollbars=yes,resizable=yes,width=450,height=400'); return false;">None (All Rights Reserved)</a></p></div></div></div><div class="ible-author"><div class="clearfix"><div class="author-image"><a href="/member/samsq1/" title="view samsq1's profile" rel="author"><img src="http://cdn.instructables.com/FF1/QIQ3/FQHNOP2A/FF1QIQ3FQHNOP2A.SQUARE.jpg" /></a></div><div class="author-details"><div class="byline"><a class="name" href="/member/samsq1/" title="view samsq1's profile" rel="author">samsq1</a></div><div class="follow"><a id="follow-btn" class="btn btn-yellow" data-action="follow" data-followid="MI9ARANFNI3VTY9" data-flag="0" data-dotxt="Follow" data-donetxt="Following" data-undotxt="Unfollow"><i class="bg-icon plus active"></i>  <span>Follow</span></a><span class="callout">5</span></div></div></div></div><div class="ible-tags"><div class="clearfix"><span class="lbl fl">Tags:</span><a class="btn btn-mini" title="free" href="/tag/type-id/category-technology/keyword-free/">free</a><a class="btn btn-mini" title="html" href="/tag/type-id/category-technology/keyword-html/">html</a><a class="btn btn-mini" title="HTML" href="/tag/type-id/category-technology/keyword-html/">HTML</a><a class="btn btn-mini" title="website" href="/tag/type-id/category-technology/keyword-website/">website</a><a class="btn btn-mini" title="create" href="/tag/type-id/category-technology/keyword-create/">create</a><a class="btn btn-mini" title="web" href="/tag/type-id/category-technology/keyword-web/">web</a><a class="btn btn-mini" title="internet" href="/tag/type-id/category-technology/keyword-internet/">internet</a><a class="btn btn-mini" title="freewebs" href="/tag/type-id/category-technology/keyword-freewebs/">freewebs</a></div></div></div></div><div class="imodal addto-modal stats-modal" id="statsModal" tabindex="-1" style="display:none"><div class="imodal-inner"><a href="#" class="imodal-close" data-dismiss="imodal"><img alt="close" src="/static/img/imodal-close.png" /></a><div class="imodal-header"><span class="imodal-title">Stats</span></div><div class="imodal-body"><div class="ible-stats"><table cellspacing="0" border="0" width="250"><tr><th>Total Views</th><td>54,181</td></tr><tr><th>Views Today</th><td>32</td></tr><tr><th>Comments</th><td>6</td></tr><tr><th>Favorites</th><td>16</td></tr></table></div></div></div></div><div class="hatbox"><h3>Related</h3><div id="related-instructables" class="hatbox-content instructable"><ul><li style=""><div class="clearfix related-item"><a title="Build A Website For As Little As $20 A Year!" href="/id/Build-A-Website-For-As-Little-As-20-A-Year/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/FOG/Y9H1/FJNELQ3E/FOGY9H1FJNELQ3E.SQUARE.jpg" alt="Build A Website For As Little As $20 A Year!" title="" /></a><p class="info"><a href="/id/Build-A-Website-For-As-Little-As-20-A-Year/" class="title" title="Build A Website For As Little As $20 A Year!" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">Build A Website For As Little As $20 A Year!</a><br /><span class="byline">by </span><a href="/member/The Website Master/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">The Website Master</a></p></div></li><li style=""><div class="clearfix related-item"><a title="Making your first website from scratch" href="/id/Making-your-first-website-from-scratch/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/FBJ/4F2U/F2FRVKYO/FBJ4F2UF2FRVKYO.SQUARE.jpg" alt="Making your first website from scratch" title="" /></a><p class="info"><a href="/id/Making-your-first-website-from-scratch/" class="title" title="Making your first website from scratch" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">Making your first website from scratch</a><br /><span class="byline">by </span><a href="/member/arch_angel07/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">arch_angel07</a></p></div></li><li style=""><div class="clearfix related-item"><a title="How to Create a Website" href="/id/How-to-Create-a-Website-2013/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/FJ9/7BIT/HM8DDL4F/FJ97BITHM8DDL4F.SQUARE.jpg" alt="How to Create a Website" title="" /></a><p class="info"><a href="/id/How-to-Create-a-Website-2013/" class="title" title="How to Create a Website" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">How to Create a Website</a><br /><span class="byline">by </span><a href="/member/bhills1/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">bhills1</a></p></div></li><li style=""><div class="clearfix related-item"><a title="HTML5 for Beginners: A 4 Step Quick Learning Guide" href="/id/HTML5-for-Beginners-A-4-Step-Quick-Learning-Guide/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/FEP/Q5SK/HJKBYM3U/FEPQ5SKHJKBYM3U.SQUARE.jpg" alt="HTML5 for Beginners: A 4 Step Quick Learning Guide" title="" /></a><p class="info"><a href="/id/HTML5-for-Beginners-A-4-Step-Quick-Learning-Guide/" class="title" title="HTML5 for Beginners: A 4 Step Quick Learning Guide" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">HTML5 for Beginners: A 4 Step Quick Learning Guide</a><br /><span class="byline">by </span><a href="/member/Creativeweblogix/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">Creativeweblogix</a></p></div></li><li style=""><div class="clearfix related-item"><a title="Make a 100% Free Website! No Ads or Viruses!" href="/id/Make-a-100-Free-Website-No-Ads-or-Viruses/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/F80/SV50/FXA2YTVY/F80SV50FXA2YTVY.SQUARE.jpg" alt="Make a 100% Free Website! No Ads or Viruses!" title="" /></a><p class="info"><a href="/id/Make-a-100-Free-Website-No-Ads-or-Viruses/" class="title" title="Make a 100% Free Website! No Ads or Viruses!" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">Make a 100% Free Website! No Ads or Viruses!</a><br /><span class="byline">by </span><a href="/member/amakerguy/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">amakerguy</a></p></div></li><li style="display:none;"><div class="clearfix related-item"><a title="How to make a responsive web design - basics" href="/id/How-to-make-a-responsive-web-design-basics/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/F97/V3M3/I13ECA5T/F97V3M3I13ECA5T.SQUARE.jpg" alt="How to make a responsive web design - basics" title="" /></a><p class="info"><a href="/id/How-to-make-a-responsive-web-design-basics/" class="title" title="How to make a responsive web design - basics" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">How to make a responsive web design - basics</a><br /><span class="byline">by </span><a href="/member/tomheylen/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">tomheylen</a></p></div></li><li style="display:none;"><div class="clearfix related-item"><a title="How to Start Your HTML Document Right" href="/id/How-to-Start-Your-HTML-Document-Right/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/FJQ/MEO2/GQTN8M1T/FJQMEO2GQTN8M1T.SQUARE.jpg" alt="How to Start Your HTML Document Right" title="" /></a><p class="info"><a href="/id/How-to-Start-Your-HTML-Document-Right/" class="title" title="How to Start Your HTML Document Right" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">How to Start Your HTML Document Right</a><br /><span class="byline">by </span><a href="/member/Pettrocity/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">Pettrocity</a></p></div></li><li style="display:none;"><div class="clearfix related-item"><a title="Watch or Listen to your Media anywhere with an internet connection" href="/id/Watch-or-Listen-to-your-Media-anywhere-with-an-int/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/FE9/DNTA/FH16HOZO/FE9DNTAFH16HOZO.SQUARE.jpg" alt="Watch or Listen to your Media anywhere with an internet connection" title="" /></a><p class="info"><a href="/id/Watch-or-Listen-to-your-Media-anywhere-with-an-int/" class="title" title="Watch or Listen to your Media anywhere with an internet connection" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">Watch or Listen to your Media anywhere with an internet connection</a><br /><span class="byline">by </span><a href="/member/Sk1z0tT^/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">Sk1z0tT^</a></p></div></li><li style="display:none;"><div class="clearfix related-item"><a title="Hosting Your Own Website" href="/id/Hosting-Your-Own-Website/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/F0W/MOJV/GGBZPPEF/F0WMOJVGGBZPPEF.SQUARE.jpg" alt="Hosting Your Own Website" title="" /></a><p class="info"><a href="/id/Hosting-Your-Own-Website/" class="title" title="Hosting Your Own Website" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">Hosting Your Own Website</a><br /><span class="byline">by </span><a href="/member/charlie.nourse/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">charlie.nourse</a></p></div></li><li style="display:none;"><div class="clearfix related-item"><a title="The Complete Beginners Guide to HTML" href="/id/The-Complete-Beginners-Guide-to-HTML/" class="imglink" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');"><img src="http://cdn.instructables.com/FCB/B741/GXO0U8MU/FCBB741GXO0U8MU.SQUARE.jpg" alt="The Complete Beginners Guide to HTML" title="" /></a><p class="info"><a href="/id/The-Complete-Beginners-Guide-to-HTML/" class="title" title="The Complete Beginners Guide to HTML" onclick="ga('send', 'pageview', '/event/related/rhs/position:/');">The Complete Beginners Guide to HTML</a><br /><span class="byline">by </span><a href="/member/The_Warlock/" class="user" onclick="ga('send', 'pageview', '/event/related/rhs/memberLink/');">The_Warlock</a></p></div></li></ul><div class="seemore-container clearfix"><p><a href="/tag/type-id/?q=" class="btn" id="seemore-related-ibles"><i class="bg-icon downarrow"></i> See More</a></p></div></div></div><script type="text/javascript"> $(function(){ $('#seemore-related-ibles').click(function(e){ e.preventDefault(); $(this).closest('.seemore-container').remove(); $('#related-instructables').find('li').filter(':hidden').show(); }); }); </script><div id="ible-stickyad-wrapper"><div id="ible-stickyad"><div id="gpt-ad-sidebar-brand"><script type="text/javascript"> googletag.cmd.push(function() {googletag.display("gpt-ad-sidebar-brand");}); </script></div></div></div><script type="text/javascript"> $(function(){ var $mainContent = $('#main-content'), $sidebar = $('#sidebar'), $ibleHeader = $('#ible-header'), $stickyAd = $('#ible-stickyad'), $sidebar = $('#sidebar'), padding = 22, stickyAdTop = $stickyAd.offset().top, updateStickyAdTop = true; $(window).bind('scroll', function(){ var stickyAdHeight = $stickyAd.height(), $win = $(window), $omni = $('#omni'), scrollTop = $win.scrollTop(), sidebarHeight = $sidebar.height(), sidebarBottomOffset = sidebarHeight + $sidebar.offset().top, mainContentHeight = $mainContent.height(), mainContentBottomOffset = mainContentHeight + $mainContent.offset().top, topAdjust = $ibleHeader.outerHeight() + padding; if (updateStickyAdTop) stickyAdTop = $stickyAd.offset().top; // Height of ad content can vary, so let's set the parent height to // the height of the child container since the child container will // be taken out of the flow of the page $stickyAd.parent().height(stickyAdHeight); if (sidebarHeight < mainContentHeight) { if ((scrollTop + stickyAdHeight) > (mainContentBottomOffset - topAdjust)) { $stickyAd.css({top:'auto', position:'absolute', bottom:0, left:'auto'}); updateStickyAdTop = false; } else if (scrollTop > (stickyAdTop - topAdjust)) { if ($win.width() < $omni.width()) { $stickyAd.css({top:topAdjust+'px', bottom:'auto', position:'fixed', left: $sidebar.offset().left - $win.scrollLeft()}); } else { $stickyAd.css({top:topAdjust+'px', bottom:'auto', position:'fixed', left:'auto'}); } updateStickyAdTop = false; } else { $stickyAd.css({top:'auto', bottom:'auto', left:'auto', position:'relative'}); updateStickyAdTop = true; } } }); }); </script><script type="text/javascript"> head.ready(function() { $('.addbtn').ajaxActionBtn().bind('ajax-action-success', function(e, data) { if (($(this).data('action') == 'addToContest') && data) { var container = $(this).parent(); container.children('p').remove(); container.append('<p>'+data+'</p>'); } }); $('select.group-category').on('change', function(){ $(this).parent().find('.addbtn').data('groupCategory', $(this).val()); }); }); </script></div></div></div><div id="gbl-footer"><div class="top"><div class="container"><div id="footer-aboutus" class="col"><h3>About Us</h3><ul><li><a title="About Us" href="/about/">Who We Are</a></li><li><a title="Advertise" href="/advertise/">Advertise</a></li><li><a title="Contact" href="/about/contact.jsp">Contact</a></li><li><a title="Jobs" href="/community/Positions-available-at-Instructables/">Jobs</a></li><li><a title="Help" href="/id/how-to-write-a-great-instructable/">Help</a></li></ul></div><div id="footer-findus" class="col"><h3>Find Us</h3><ul><li><a class="facebook" title="Facebook" href="http://www.facebook.com/instructables">Facebook</a></li><li><a class="youtube" title="Youtube" href="http://www.youtube.com/user/instructablestv">Youtube</a></li><li><a class="twitter" title="Twitter" href="http://www.twitter.com/instructables">Twitter</a></li><li><a class="pinterest" title="Pinterest" href="http://www.pinterest.com/instructables">Pinterest</a></li><li><a class="googleplus" title="Google+" rel="publisher" href="https://plus.google.com/+instructables">Google+</a></li><li><a class="tumblr" title="Tumblr" rel="publisher" href="http://instructables.tumblr.com">Tumblr</a></li></ul></div><div id="footer-resources" class="col"><h3>Resources</h3><ul><li><a title="Teachers" href="/teachers/">For Teachers</a></li><li><a title="Artists In Residence" href="http://www.autodesk.com/artist-in-residence/home">Artists in Residence</a></li><li><a title="Give A Pro Membership" href="/account/give?sourcea=footer">Gift Pro Account</a></li><li><a title="Forums" href="/community/">Forums</a></li><li><a title="Answers" href="/tag/type-question/?sort=RECENT">Answers</a></li><li><a title="Sitemap" href="/sitemap/">Sitemap</a></li></ul></div><div id="footer-mobile" class="col"><img src="/static/img/footer/mobile2.png" alt="mobile" /><div class="downloads"><h3>Mobile</h3><p>Download our new apps for iOS, Android and Windows 8!</p><a title="Instructables Android App" class="btn" href="https://play.google.com/store/apps/details?id=com.adsk.instructables">Android</a><a title="Instructables iOS App" class="btn" href="https://itunes.apple.com/app/instructables/id586765571">iOS</a><a title="Instructables Windows 8 App" class="btn" href="http://apps.microsoft.com/windows/en-us/app/7afc8194-c771-441a-9590-54250d6a8300">Windows</a></div></div><div id="footer-store" class="col"><a class="btn" title="Go Pro Today" href="/account/gopro?sourcea=footer"><img src="/static/img/footer/gopro.png" alt="Go Pro" /> Go Pro Today »</a><a class="btn" title="We're Hiring!" href="/community/Positions-available-at-Instructables/"><img class="jobs" src="/static/img/footer/robot-thumbsup.png" alt="Jobs" /> We're Hiring! »</a></div></div></div><div class="bottom"><div class="container content-match"><div class="row-fluid"><img id="footer-robot" src="/static/img/footer/footer-robot.png" /><div id="footer-language-selector" class="btn-group dropup"><a class="btn btn-inverse">English</a><a data-toggle="dropdown" class="btn btn-inverse dropdown-toggle"><span class="caret"></span></a><ul class="dropdown-menu pull-right"><li><a href="http://www.instructables.com/es/">español</a></li><li><a href="http://www.instructables.com/pt/">português</a></li><li><a href="http://www.instructables.com/de/">Deutsch</a></li><li><a href="http://www.instructables.com/ja/">日本語</a></li><li><a href="http://www.instructables.com/zh/">中文 (简体)</a></li></ul></div><div id="footer-newsletter"><form class="form-horizontal" action="/tag/type-id/" method="get"><div class="control-group"><label class="control-label" for="q2">Join our newsletter:</label><div class="controls"><input type="hidden" name="sort" value="none" /><div class="input-append"><input class="span8" type="text" placeholder="enter email" /><button class="btn btn-inverse" type="button" id="newsletter-signup-btn">Join!</button></div></div></div></form><script type="text/javascript"> (function($){ $('#newsletter-signup-btn').click(function(e){ e.preventDefault(); var email = $(this).parent().find('input').val(); if (email == 'enter email' || email == '') alert('Please enter your email address'); else window.open("/newsletter/newslettersignup?email=" + email,"newslettersignup","status=yes,scrollbars=yes,resizable=yes,width=420,height=250"); }); })(jQuery); </script></div><hr></hr></div><div class="row-fluid"><div id="footer-links" class="pull-right"><ul><li><a target="_blank" title="Terms of Service" href="http://usa.autodesk.com/adsk/servlet/item?siteID=123112&id=21959721">Terms of Service</a><span class="divider">|</span></li><li><a target="_blank" title="Privacy Statement" href="http://usa.autodesk.com/adsk/servlet/item?siteID=123112&id=21292079">Privacy Statement</a><span class="divider">|</span></li><li><a target="_blank" href="http://usa.autodesk.com/legal-notices-trademarks/">Legal Notices & Trademarks</a><span class="divider">|</span></li><li><a id="mobile-site-link" title="Mobile Site" href="http://m.instructables.com">Mobile Site</a></li><li><a href="http://usa.autodesk.com/adsk/servlet/pc/index?id=20781545&siteID=123112" target="blank" title="Autodesk" id="adsk-logo"><img src="/static/img/footer/autodesk-logo.png" /></a></li></ul><script type="text/javascript"> jQuery('#mobile-site-link').click(function(e){ e.preventDefault(); var that = this; document.cookie = 'Iblefullsite=0;domain=.instructables.com;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;'; setTimeout(function(){window.location = that.href;},50); }); </script></div><div id="copyright-notice"><p>© 2014 Autodesk, Inc.</p></div></div></div></div></div><div class="modal hide fade collection-modal" id="new-collection-modal"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3>Create New Collection</h3></div><div class="modal-body"><input type="text" id="create-new-collection-name" placeholder="Name your collection..." /><select id="new-collection-category-edit"><option value="" disabled="true" selected="true" style="display:none;">Category</option><option value="technology">Technology</option><option value="workshop">Workshop</option><option value="living">Living</option><option value="food">Food</option><option value="play">Play</option><option value="outside">Outside</option></select><select id="new-collection-channel-edit"></select><textarea id="new-collection-description" placeholder="Enter a description..."></textarea></div><div class="modal-footer"><a class="btn" id="new-collection-cancel" data-dismiss="modal" href="#">Cancel</a><a class="btn btn-orange" id="new-collection-create">Create</a></div></div><div class="modal hide fade collection-modal" id="collection-created-modal"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3>Collection Created!</h3></div><div class="modal-body"><div><img src="/static/img/collection_created.png" /></div><div class="collection-created-text"> You can access an existing collection each time you add an Instructable to it, or from the "You" menu and page. </div></div><div class="modal-footer"><a class="btn btn-orange" data-dismiss="modal" href="#">Got It</a></div></div><script type="text/javascript"> //TODO: merge this with the copy of itself in instructable_header.js (function(){ var $ = ___saveJQFromPrototype; $(function() { var categories = { "technology" : [ { title: "arduino", displayName: "Arduino" || "Arduino" } , { title: "kits", displayName: "Kits" || "Kits" } , { title: "raspberry-pi", displayName: "Raspberry Pi" || "Raspberry-pi" } , { title: "software", displayName: "Software" || "Software" } , { title: "steampunk", displayName: "Steampunk" || "Steampunk" } , { title: "clocks", displayName: "Clocks" || "Clocks" } , { title: "biotech", displayName: "Biotech" || "Biotech" } , { title: "3D-Printing", displayName: "3D Printing" || "3D-Printing" } , { title: "microsoft", displayName: "Microsoft" || "Microsoft" } , { title: "electronics", displayName: "Electronics" || "Electronics" } , { title: "websites", displayName: "Websites" || "Websites" } , { title: "microcontrollers", displayName: "Microcontrollers" || "Microcontrollers" } , { title: "laptops", displayName: "Laptops" || "Laptops" } , { title: "leds", displayName: "LEDs" || "Leds" } , { title: "digital-graphics", displayName: "Digital Graphics" || "Digital-graphics" } , { title: "speakers", displayName: "Speakers" || "Speakers" } , { title: "apple", displayName: "Apple" || "Apple" } , { title: "linux", displayName: "Linux" || "Linux" } , { title: "el-wire", displayName: "EL Wire" || "El-wire" } , { title: "photography", displayName: "Photography" || "Photography" } , { title: "assistive-technology", displayName: "Assistive Tech" || "Assistive-technology" } , { title: "cell-phones", displayName: "Cell Phones" || "Cell-phones" } , { title: "lasers", displayName: "Lasers" || "Lasers" } , { title: "computers", displayName: "Computers" || "Computers" } , { title: "art", displayName: "Art" || "Art" } , { title: "tools", displayName: "Tools" || "Tools" } , { title: "robots", displayName: "Robots" || "Robots" } , { title: "audio", displayName: "Audio" || "Audio" } , { title: "remote-control", displayName: "Remote Control" || "Remote-control" } , { title: "wireless", displayName: "Wireless" || "Wireless" } , { title: "sensors", displayName: "Sensors" || "Sensors" } , { title: "soldering", displayName: "Soldering" || "Soldering" } , { title: "cnc", displayName: "CNC" || "Cnc" } , { title: "usb", displayName: "USB" || "Usb" } , { title: "gadgets", displayName: "Gadgets" || "Gadgets" } , { title: "science", displayName: "Science" || "Science" } , { title: "reuse", displayName: "Reuse" || "Reuse" } , { title: "wearables", displayName: "Wearables" || "Wearables" } ] , "workshop" : [ { title: "home-theater", displayName: "Home Theater" || "Home-theater" } , { title: "hydroponics", displayName: "Hydroponics" || "Hydroponics" } , { title: "home-renovation", displayName: "Home Renovation" || "Home-renovation" } , { title: "motorcycles", displayName: "Motorcycles" || "Motorcycles" } , { title: "furniture", displayName: "Furniture" || "Furniture" } , { title: "lighting", displayName: "Lighting" || "Lighting" } , { title: "pest-control", displayName: "Pest Control" || "Pest-control" } , { title: "energy", displayName: "Energy" || "Energy" } , { title: "repair", displayName: "Repair" || "Repair" } , { title: "tools", displayName: "Tools" || "Tools" } , { title: "cardboard", displayName: "Cardboard" || "Cardboard" } , { title: "solar", displayName: "Solar" || "Solar" } , { title: "bookshelves", displayName: "Bookshelves" || "Bookshelves" } , { title: "rain-barrels", displayName: "Rain Barrels" || "Rain-barrels" } , { title: "gardening", displayName: "Gardening" || "Gardening" } , { title: "woodworking", displayName: "Woodworking" || "Woodworking" } , { title: "lamps", displayName: "Lamps" || "Lamps" } , { title: "cars", displayName: "Cars" || "Cars" } , { title: "pallets", displayName: "Pallets" || "Pallets" } , { title: "compost", displayName: "Compost" || "Compost" } , { title: "electric-vehicles", displayName: "Electric Vehicles" || "Electric-vehicles" } , { title: "metalworking", displayName: "Metalworking" || "Metalworking" } , { title: "organizing", displayName: "Organizing" || "Organizing" } , { title: "flatpack", displayName: "Flatpack" || "Flatpack" } ] , "living" : [ { title: "paper", displayName: "Paper" || "Paper" } , { title: "green", displayName: "Green" || "Green" } , { title: "yarn", displayName: "Yarn" || "Yarn" } , { title: "health", displayName: "Health" || "Health" } , { title: "jewelry", displayName: "Jewelry" || "Jewelry" } , { title: "cleaning", displayName: "Cleaning" || "Cleaning" } , { title: "print making", displayName: "Print Making" || "Print making" } , { title: "finances", displayName: "Finances" || "Finances" } , { title: "decorating", displayName: "Decorating" || "Decorating" } , { title: "craft", displayName: "Craft" || "Craft" } , { title: "duct-tape", displayName: "Duct Tape" || "Duct-tape" } , { title: "education", displayName: "Education" || "Education" } , { title: "parenting", displayName: "Parenting" || "Parenting" } , { title: "relationships", displayName: "Relationships" || "Relationships" } , { title: "christmas", displayName: "Christmas" || "Christmas" } , { title: "organizing", displayName: "Organizing" || "Organizing" } , { title: "reuse", displayName: "Reuse" || "Reuse" } , { title: "life-hacks", displayName: "Life Hacks" || "Life-hacks" } , { title: "kitchen", displayName: "Kitchen" || "Kitchen" } , { title: "pets", displayName: "Pets" || "Pets" } , { title: "life-skills", displayName: "Life Skills" || "Life-skills" } , { title: "beauty", displayName: "Beauty" || "Beauty" } , { title: "travel", displayName: "Travel" || "Travel" } , { title: "sewing", displayName: "Sewing" || "Sewing" } , { title: "fashion", displayName: "Fashion" || "Fashion" } , { title: "holidays", displayName: "Holidays" || "Holidays" } , { title: "halloween", displayName: "Halloween" || "Halloween" } , { title: "art", displayName: "Art" || "Art" } , { title: "furnishing", displayName: "Furnishing" || "Furnishing" } , { title: "kids", displayName: "Kids" || "Kids" } ] , "food" : [ { title: "beverages", displayName: "Beverages" || "Beverages" } , { title: "soups-and-stews", displayName: "Soups and Stews" || "Soups-and-stews" } , { title: "cupcakes", displayName: "Cupcakes" || "Cupcakes" } , { title: "dessert", displayName: "Dessert" || "Dessert" } , { title: "pizza", displayName: "Pizza" || "Pizza" } , { title: "breakfast", displayName: "Breakfast" || "Breakfast" } , { title: "cake", displayName: "Cake" || "Cake" } , { title: "candy", displayName: "Candy" || "Candy" } , { title: "pasta", displayName: "Pasta" || "Pasta" } , { title: "salad", displayName: "Salad" || "Salad" } , { title: "pie", displayName: "Pie" || "Pie" } , { title: "bbq-and-grilling", displayName: "BBQ & Grilling" || "Bbq-and-grilling" } , { title: "snacks-and-appetizers", displayName: "Snacks and Appetizers" || "Snacks-and-appetizers" } , { title: "cocktails-and-mocktails", displayName: "Cocktails and Mocktails" || "Cocktails-and-mocktails" } , { title: "homebrew", displayName: "Homebrew" || "Homebrew" } , { title: "sandwiches", displayName: "Sandwiches" || "Sandwiches" } , { title: "canning-and-preserves", displayName: "Canning and Preserves" || "Canning-and-preserves" } , { title: "cookies", displayName: "Cookies" || "Cookies" } , { title: "vegetarian-and-vegan", displayName: "Vegetarian and Vegan" || "Vegetarian-and-vegan" } , { title: "bread", displayName: "Bread" || "Bread" } , { title: "bacon", displayName: "Bacon" || "Bacon" } , { title: "main-course", displayName: "Main Course" || "Main-course" } , { title: "cake-decorating", displayName: "Cake Decorating" || "Cake-decorating" } ] , "play" : [ { title: "xbox", displayName: "Xbox" || "Xbox" } , { title: "card-games", displayName: "Card Games" || "Card-games" } , { title: "wii", displayName: "Wii" || "Wii" } , { title: "props", displayName: "Props" || "Props" } , { title: "nerf", displayName: "Nerf" || "Nerf" } , { title: "table-top", displayName: "Table Top" || "Table-top" } , { title: "costumes", displayName: "Costumes" || "Costumes" } , { title: "office-supplies", displayName: "Office Supplies" || "Office-supplies" } , { title: "yo-yo", displayName: "Yo-Yo" || "Yo-yo" } , { title: "knex", displayName: "K'NEX" || "Knex" } , { title: "siege-engines", displayName: "Siege Engines" || "Siege-engines" } , { title: "video-games", displayName: "Video Games" || "Video-games" } , { title: "music", displayName: "Music" || "Music" } , { title: "offbeat", displayName: "Offbeat" || "Offbeat" } , { title: "minecraft", displayName: "Minecraft" || "Minecraft" } , { title: "nintendo", displayName: "Nintendo" || "Nintendo" } , { title: "toys", displayName: "Toys" || "Toys" } , { title: "guitars", displayName: "Guitars" || "Guitars" } , { title: "puzzles", displayName: "Puzzles" || "Puzzles" } , { title: "sports", displayName: "Sports" || "Sports" } , { title: "magic-tricks", displayName: "Magic Tricks" || "Magic-tricks" } , { title: "paper-airplanes", displayName: "Paper Airplanes" || "Paper-airplanes" } , { title: "airsoft", displayName: "Airsoft" || "Airsoft" } , { title: "instruments", displayName: "Instruments" || "Instruments" } , { title: "playstation", displayName: "PlayStation" || "Playstation" } , { title: "lego", displayName: "LEGO" || "Lego" } , { title: "party-tricks", displayName: "Party Tricks" || "Party-tricks" } , { title: "wallets", displayName: "Wallets" || "Wallets" } , { title: "rockets", displayName: "Rockets" || "Rockets" } , { title: "paintball", displayName: "Paintball" || "Paintball" } , { title: "pranks-and-humor", displayName: "Pranks and Humor" || "Pranks-and-humor" } ] , "outside" : [ { title: "boats", displayName: "Boats" || "Boats" } , { title: "Birding", displayName: "Birding" || "Birding" } , { title: "paracord", displayName: "Paracord" || "Paracord" } , { title: "kites", displayName: "Kites" || "Kites" } , { title: "fishing", displayName: "Fishing" || "Fishing" } , { title: "knives", displayName: "Knives" || "Knives" } , { title: "water", displayName: "Water" || "Water" } , { title: "skateboarding", displayName: "Skateboarding" || "Skateboarding" } , { title: "knots", displayName: "Knots" || "Knots" } , { title: "bikes", displayName: "Bikes" || "Bikes" } , { title: "snow", displayName: "Snow" || "Snow" } , { title: "camping", displayName: "Camping" || "Camping" } , { title: "survival", displayName: "Survival" || "Survival" } ] , }; var catSelect = $('#new-collection-category-edit'); var chanSelect = $('#new-collection-channel-edit'); catSelect.change(function() { $('option', chanSelect).remove(); chanSelect.append($('<option value="" disabled="" selected="" style="display:none;">Channel</option>')); $(categories[catSelect.val()]).each(function(idx, elem) { chanSelect.append($('<option value="'+elem.title+'">'+elem.displayName+'</option>')); }); }); catSelect.val('technology'); catSelect.change(); chanSelect.val('websites'); $('#new-collection-create').click(function() { var json = { "category": catSelect.val(), "channel": chanSelect.val(), "title": $("#create-new-collection-name").val(), "body": $("#new-collection-description").val() }; $.ajax({ url: "/json-api/newGuide", dataType: "json", data: {"json": JSON.stringify(json)}, method: "POST", success: function(data) { $('#new-collection-modal').modal('hide'); $('#collection-created-modal').modal('show'); }, error: function(data) { //TODO: detect logged out!!! alert("There was an error while trying to create your collection. Please confirm that you're logged in and try again."); } }); }); //$("#showNewCollectionModal").click(function(e){ // e.preventDefault(); // $('body').append($("#new-collection-modal")) // $("#new-collection-modal").imodal(); //}); }); }()); </script><div class="auth-login-modal modal auth-modal fade hide "><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button><h3>login</h3></div><div class="modal-body"><div class="thirdparty-auth-options clearfix"><button class="btn btn-large pull-left btn-facebook" data-loading-text="<span class='grey-spinner'></span>">Facebook</button><button class="btn btn-large pull-right btn-google btn-danger" data-loading-text="<span class='grey-spinner'></span>">Google+</button><button class="btn btn-large pull-left btn-twitter" data-loading-text="<span class='grey-spinner'></span>">Twitter</button><button class="btn btn-large pull-right btn-autodesk" data-loading-text="<span class='grey-spinner'></span>">Autodesk</button></div><div class="social-error-label modal-error-label label label-important"></div><div class="divider"><span>OR</span></div><form class="auth-form login-form" action="/account/login?nxtPgName=How+to+make+a+free+website+using+HTML.&nxtPg=/id/How-to-make-a-free-website-using-HTML/" method="post"><input type="text" name="u" placeholder="Username" data-msg-required="Please enter your username." data-rule-required="true" /><input type="password" name="p" placeholder="Password" data-msg-required="Please enter your password" data-rule-required="true" /><input type="checkbox" checked="checked" name="RememberME" style="display:none;" /><div class="login-error-label modal-error-label label label-important"></div><button type="submit" class="btn btn-large btn-primary btn-orange auth-action login" data-loading-text="<span class='orange-grey-spinner'></span>">Login</button></form><div id="gopro-carousel" class="carousel slide carousel-fade"><div class="carousel-inner"><div class="active item"><a href="/account/gopro?sourcea=loginnxtPgName=How+to+make+a+free+website+using+HTML.&nxtPg=/id/How-to-make-a-free-website-using-HTML/" title="go pro for discounts"><img src="/static/img/gopro/go-pro-login1.png" /></a></div><div class="item"><a href="/account/gopro?sourcea=loginnxtPgName=How+to+make+a+free+website+using+HTML.&nxtPg=/id/How-to-make-a-free-website-using-HTML/" title="go pro to remove ads"><img src="/static/img/gopro/go-pro-login2.png" /></a></div><div class="item"><a href="/account/gopro?sourcea=loginnxtPgName=How+to+make+a+free+website+using+HTML.&nxtPg=/id/How-to-make-a-free-website-using-HTML/" title="go pro to download pdfs"><img src="/static/img/gopro/go-pro-login3.png" /></a></div><div class="item"><a href="/account/gopro?sourcea=loginnxtPgName=How+to+make+a+free+website+using+HTML.&nxtPg=/id/How-to-make-a-free-website-using-HTML/" title="go pro to download ebooks"><img src="/static/img/gopro/go-pro-login4.png" /></a></div></div></div></div><div class="modal-footer clearfix"><a class="pull-left signup-link" href="/account/gopro?sourcea=login&sourceaUrl=/id/How-to-make-a-free-website-using-HTML/">Sign Up »</a><a class="pull-right forgot-link" href="/account/forgot?sourcea=login&sourceaUrl=/id/How-to-make-a-free-website-using-HTML/">Forgot Username/Password »</a></div></div><div class="auth-register-modal modal auth-modal fade hide "><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button><h3>sign up</h3></div><div class="modal-body"><div class="thirdparty-auth-options clearfix"><button class="btn btn-large pull-left btn-facebook" data-loading-text="<span class='grey-spinner'></span>">Facebook</button><button class="btn btn-large pull-right btn-google btn-danger" data-loading-text="<span class='grey-spinner'></span>">Google+</button><button class="btn btn-large pull-left btn-twitter" data-loading-text="<span class='grey-spinner'></span>">Twitter</button><button class="btn btn-large pull-right btn-autodesk" data-loading-text="<span class='grey-spinner'></span>">Autodesk</button></div><div class="social-error-label modal-error-label label label-important"></div><div class="divider"><span>OR</span></div><form class="auth-form register-form" action="/account/register" method="post"> <!--[if !IE]><!--> <input type="email" name="email" placeholder="Email" data-msg-required="Please enter your email." data-rule-required="true"/> <input class="username-field" data-validation-username-message="Username is already in use" type="text" name="screenName" placeholder="Username" data-msg-required="Please enter your username." data-rule-required="true"/> <input type="password" name="password" placeholder="Password" data-msg-maxlength="Your password must be fewer than 100 characters long." data-msg-minlength="Your password must be at least 3 characters long." data-msg-required="Please enter your password" data-rule-maxlength="100" data-rule-minlength="3" data-rule-required="true"/> <!--><![endif]--> <!--[if IE]> <input type="email" name="email" value="Email" data-msg-required="Please enter your email." data-rule-required="true"/> <input class="username-field" data-validation-username-message="Username is already in use" type="text" name="screenName" value="Username" data-msg-required="Please enter your username." data-rule-required="true"/> <span class="label ie-password-label">Password</span><input class="ie-password-input"type="password" name="password" placeholder="Password" data-msg-maxlength="Your password must be fewer than 100 characters long." data-msg-minlength="Your password must be at least 3 characters long." data-msg-required="Please enter your password" data-rule-maxlength="100" data-rule-minlength="3" data-rule-required="true"/> <![endif]--> <input type="hidden" name="newsletter" value="on" /><input type="hidden" name="sourcea" value="" /><input type="hidden" name="sourceaUrl" value="" /><input type="hidden" name="nxtPg" value="" /><input type="hidden" name="nxtPgName" value="" /><input type="hidden" name="proItem" value="" /><input type="hidden" name="proReq" value="" /><input type="hidden" name="showPro" value="" /><input type="hidden" name="skipPro" value="" /><p class="muted legal">By clicking "Create Account" you are indicating that you have read and agree to the <a target="_blank" title="Terms of service" href="http://usa.autodesk.com/adsk/servlet/item?siteID=123112&id=21959721">Terms of service.</a></p><div class="signup-error-label modal-error-label label label-important"></div><button type="submit" class="btn btn-large btn-primary btn-orange auth-action register" data-loading-text="<span class='orange-grey-spinner'></span>">Create Account »</button></form></div><div class="modal-footer"><p>Already a member? <a class="login-link" href="/account/login?nxtPgName=How+to+make+a+free+website+using+HTML.&nxtPg=/id/How-to-make-a-free-website-using-HTML/">Login »</a></p></div></div><div class="auth-forgot-modal modal auth-modal fade hide "><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button><h3>forgot?</h3></div><div class="modal-body"><div class="robot-speech-bubble forgot"><div class="bubble"><span>forgot your password or username?<br />it happens.</span></div></div><p class="muted">Enter the email associated with your account and we will send you your username and a temporary password.</p><form class="auth-form forgot-form" action="/account/forgot" method="post"><input type="hidden" name="nxtPg" value="" /><input type="email" name="email" placeholder="Enter email" data-msg-required="Please enter your email." data-rule-required="true" /><div class="forgot-error-label modal-error-label label label-important"></div><button type="submit" class="btn btn-large btn-primary btn-orange auth-action forgot" data-loading-text="<span class='orange-grey-spinner'></span>">Send it now, please!</button></form></div><div class="modal-footer clearfix"><p>Not a member? <a class="signup-link" href="/account/gopro?sourcea=forgotModal&sourceaUrl=/id/How-to-make-a-free-website-using-HTML/">Sign Up »</a></p></div></div><div class="auth-reset-modal modal auth-modal fade hide "><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button><h3>reset password</h3></div><div class="modal-body"><div class="robot-speech-bubble reset"><div class="bubble"><span>We have sent you an email with a password reset code. Please enter it below.</span></div></div><form class="auth-form reset-form" action="/account/reset" method="post"><input type="text" name="screenName" placeholder="Email" data-msg-required="Please enter your email." data-rule-required="true" /><input type="text" name="tempCode" placeholder="Reset Code" data-msg-required="Please enter your reset code" data-rule-required="true" /><input type="password" name="newPassword" placeholder="New Password" data-msg-maxlength="Your password must be fewer than 100 characters long." data-msg-minlength="Your password must be at least 3 characters long." data-msg-required="Please enter your password" data-rule-maxlength="100" data-rule-minlength="3" data-rule-required="true" /><input type="hidden" name="rememberMe" value="on" /><div class="reset-error-label modal-error-label label label-important"></div><button type="submit" class="btn btn-large btn-primary btn-orange auth-action reset" data-loading-text="<span class='orange-grey-spinner'></span>">Reset and Sign In</button></form></div><div class="modal-footer clearfix"><p>Not a member? <a class="signup-link" href="/account/gopro?sourcea=forgotModal&sourceaUrl=/id/How-to-make-a-free-website-using-HTML/">Sign Up »</a></p></div></div><div class="auth-gopro-modal modal auth-modal fade hide "><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button><h3>go pro</h3></div><div class="modal-body"><div class="robot-speech-bubble gopro"><div class="bubble"><span>that's a pro feature! want to go pro?</span></div></div><a class="btn btn-large btn-primary btn-orange auth-action gopro" href="/account/gopro?sourcea=goproModal&sourceaUrl=/id/How-to-make-a-free-website-using-HTML/">I want to go pro!</a><a class="btn btn-large" data-dismiss="modal">No thanks</a></div><div class="modal-footer clearfix"><p>Already a member? <a class="login-link" href="/account/login?nxtPgName=How+to+make+a+free+website+using+HTML.&nxtPg=/id/How-to-make-a-free-website-using-HTML/">Login »</a></p></div></div><div id="fb-root"></div><script> window.fbAsyncInit = function() { FB.init({ appId: "140028286058792", cookie: false, xfbml: false, oauth: true }); }; (function(d){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); </script><div id="alertWrapper"></div> <script id="template_errorAlert" type="text/template"><!--jqfix--> <div class="alert alert-block << alertType >>" id="alertDiv"> <button type="button" class="close">×</button> <h4><< alertTitle >></h4> << alertMessage >> </div> </script> <script id="template_confirmAction" type="text/template"><!--jqfix--> <div class="alert alert-block << alertType >>" id="alertDiv"> <button type="button" class="close">×</button> <h4><< alertTitle >></h4> <p><< alertMessage >></p> <p> <button class="btn confirm_cancel"><< trans.Cancel >></button> <button class="btn btn-danger confirm_delete"><< trans.Delete >></button> </p> </div> </script><script type="text/javascript"> (function($){ var scripts = [ "/static/js/imodal.js", "/static/js/instruct_jq.4.js", "/static/js/underscore-min.js", "/static/js/underscore-settings.js", "/static/js/backbone-min.js", "/static/js/jqplugins/jquery.cookie.js", "/static/js/jquery.validate.min.js", "/static/js/ible-authflow.js", "/static/js/ible-sociallogin.js", "/static/js/LocaleMessages.js", "/static/js/IblesUtil.js", "/static/js/IblesAPIConnection.js", "/static/js/IblesAlert.js", "/static/js/SessionModel.js" ]; if (Ibles.pageScripts) scripts = scripts.concat(Ibles.pageScripts); scripts.push(function() { Ibles.session = new Ibles.models.SessionModel(); Ibles.authFlow = new window.Ibles.AuthFlow({ loggedIn: false, authPaths: ["/account/login", "/account/register"], nextPageParameter: "nxtPg" }); Ibles.socialLogin = new window.Ibles.SocialLogin({ oauthCallbackUrl: "http://www.instructables.com/oauth/callback.jsp", oauthGetAuthUrl: "http://www.instructables.com/oauth/getAuthUrl.jsp", redirectURI: "/id/How-to-make-a-free-website-using-HTML/", authPaths: ["/account/login", "/account/register"], nextPageParameter: "nxtPg", loggedIn: false }); }); head.load.apply(window, scripts); })(window.jQuery); </script><div id="BF_WIDGET_1"></div><script type="text/javascript"> (function( ){ BF_WIDGET_JS=document.createElement("script"); BF_WIDGET_JS.type="text/javascript"; BF_WIDGET_SRC="http://ct.buzzfeed.com/wd/UserWidget?u=instructables.com&to=1&or=vb&wid=1&cb=" + (new Date()).getTime(); setTimeout(function() {document.getElementById("BF_WIDGET_1").appendChild(BF_WIDGET_JS);BF_WIDGET_JS.src=BF_WIDGET_SRC},1); })(); </script><link rel="stylesheet" type="text/css" href="/static/js/jqplugins/fancybox/source/jquery.fancybox.css" /><script> /* */ head.js( "/static/js/jqplugins/jquery.notes.js", "/static/js/jqplugins/fancybox/source/jquery.fancybox.pack.js", "/static/js/fancybox-photoset.js", "/static/js/jqplugins/lazyload/jquery.lazyload.min.js", function() { var $ = jQuery; function imgLoaded(img) { if (!img.complete || (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0)) { return false; } return true; } function hasImgNotes(lookupId) { return (typeof notesArray !== "undefined" && typeof notesArray[lookupId] !== "undefined"); } function getNotes(lookupId) { return notesArray[lookupId]; } $(function () { // see more images $('.photoset-seemore').click(function(e) { e.preventDefault(); var photoset = $(this).closest('.photoset') photoset.children('.row').filter(':hidden').show(); $('html,body').animate({scrollTop:$(window).scrollTop()+1}, 100); $(this).closest('.row').remove(); }); // lazyload images $(".lazyphoto").show().lazyload({ effect: "fadeIn", threshold: 200, load: function() { // load image notes for the rest of the images that are in a row by itself and are lazily loaded var notesContainer = $(this).closest(".photoset-link"); if ($(this).closest('.row').children('.photoset-link').size() === 1) { var notesId = $(this).data("notes-lookup-id"); if (hasImgNotes(notesId)) { $(this).notes(getNotes(notesId), false, notesContainer); } } } }); $(".photoset-link").each(function() { // Replace href attribute with value needed to display lightbox content $(this).attr('href', $(this).data('fancybox-href')); // toggle notes icon $(this).bind("mouseenter mouseleave", function(){ $(this).toggleClass('selected'); }); // enable clicking on the note-holder to open the gallery $(this).children(".note-holder").live('click', function(){ $(this).parent(".photoset-link").click(); }); }); // enable clicking on note-holder and fancybox-image to open image url $(".photoset-fancybox .note-holder, .photoset-fancybox .fancybox-image").live('click', function(){ window.location.href = $($.fancybox.group[$.fancybox.current.index]).data('href'); }); // Initialize lightbox gallery and image note upon rendering $(".photoset-link").fancybox({ afterClose: function() { if (window.history && history.pushState) { $.fancybox.statePushed = false; if ($.fancybox.closeFromBack) $.fancybox.closeFromBack = false; else history.back(); } }, afterShow: function () { if (window.history && history.pushState) { var photosetLink = $.fancybox.group[$.fancybox.current.index], state = {'photosetLinkId': photosetLink.id}, href = $(photosetLink).data('href'); $.fancybox.lastState = state; if (!$.fancybox.statePushed) { $.fancybox.statePushed = true; history.pushState(state, null, href); } else { history.replaceState(state, null, href); } } var notesContainer = $.fancybox.inner; if (notesContainer) { var galleryImg = notesContainer.find("img:first"), curPhotoLink = $($.fancybox.current.element), notesId = curPhotoLink.data("notes-lookup-id"); if (hasImgNotes(notesId)) { galleryImg.notes(getNotes(notesId), false, notesContainer); } ga('send', 'pageview', curPhotoLink.closest('.photoset').attr('data-entry-url') + 'image' + $.fancybox.current.index + '/'); } } }); }); // Initialize image notes for first photoset image if it wasn't lazy loaded $(window).load(function() { $(".photoset").each(function() { var firstImg = $(this).find("img:first"), notesId = firstImg.data("notes-lookup-id"), notesContainer = firstImg.closest(".photoset-link"); if (!firstImg.hasClass('lazyphoto') && hasImgNotes(notesId) && imgLoaded(firstImg[0])) { firstImg.notes(getNotes(notesId), false, notesContainer); } }); }); $(window).bind("popstate", function(e) { if (window.history && history.pushState) { if (e.originalEvent && e.originalEvent.state && !$.fancybox.isOpen) { $.fancybox.statePushed = true; $('#'+e.originalEvent.state.photosetLinkId).click(); } else if ($.fancybox.isOpen) { $.fancybox.closeFromBack = true; $.fancybox.close(); } } }); $(window).bind('pageshow', function(e){ if (window.history && history.state) { if (history.state.photosetLinkId) { $.fancybox.statePushed = true; $('#'+history.state.photosetLinkId).click(); } } }); $(window).bind('unload', function(e){ if (window.history && history.replaceState) { if ($.fancybox.lastState && ($.fancybox.originalUrl != window.location.href)) { // In safari, if we call replacestate with a new url during an unload event, then the browser will // ignore url on address bar and will effectively redirect back to the originalUrl. I don't think // this can solve this without trading off another history functionality. // Chrome has its issues as well. history.replaceState($.fancybox.lastState, null, $.fancybox.originalUrl); } } }); } ); /* */ </script><script id="statscard-template" type="text/template"> <div class="statscard"> <[ if (data.instructablesCount) { ]> <div class="header clearfix"> <div class="col main-stat"><span class="count instructables-count"><< data.instructablesCount >></span><br/> Instructables</div> <[ if (data.publishedCollectionsCount) { ]> <div class="col main-stat"><span class="count collections-count"><< data.publishedCollectionsCount >></span><br/> Collections</div> <[ } ]> <div class="col other-stats"> <div class="views"><i class="icon-views"></i><span class="count"><< data.views >></span> Views</div> <div class="favorites"><i class="icon-favorites"></i><span class="count"><< data.favoritesCount >></span> Favorited</div> </div> </div> <[ } ]> <div class="body"> <div class="author-box clearfix"> <div class="author-image"> <a href="/member/<< encodeURIComponent(data.screenName) >>/"> <img src="<< data.square2Url >>"/> </a> </div> <div class="author-details"> <div class="screen-name"> <a href="/member/<< encodeURIComponent(data.screenName) >>/"><< data.screenName >></a> </div> <div class="signup-info"> Joined << data.signup >> <[ if (data.pro) { ]><img src="/static/img/statscard/pro.gif"/><[ } ]> </div> <div class="follow"> <a class="btn btn-yellow follow-btn" data-followtxt="Follow" data-followingtxt="Following" data-unfollowtxt="Unfollow"> <[ if (data.following) { ]> <i class="bg-icon checkmarksmall active"></i>  <span>Following</span> <[ } else { ]> <i class="bg-icon plus active"></i>  <span>Follow</span> <[ } ]> </a> <span class="callout"><< data.followersCount >></span> </div> <div class="private-message"> <a class="btn" href="/edit/compose?recipientId=<< data.id >>&linkTo=/member/<< encodeURIComponent(data.screenName) >>/"><i class="bg-icon email"></i>Message</a> </div> </div> </div> <[ if (data.about && data.about.length > 0) { ]> <div class="bio"> <a href="/member/<< encodeURIComponent(data.screenName) >>/"><span class="ibl">Bio:</span> << data.about >></a> </div> <[ } ]> </div> </div> </script> <script id="statscard-wrapper-template" type="text/template"> <div class="popover statscard-popover"><div class="arrow"></div><div class="popover-content"></div></div> </script><script type="text/javascript"> head.js( "/static/js/underscore-min.js", "/static/js/underscore-settings.js", "/static/js/statscard.js", "/static/js/moment.min.js", "/static/js/numeral.min.js", function() { jQuery('.memberstats').statscard({loginURL: "/account/login?nxtPgName=How+to+make+a+free+website+using+HTML.&nxtPg=/id/How-to-make-a-free-website-using-HTML/"}); } ); </script><script type="text/javascript"> (function(d){ var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT'); p.type = 'text/javascript'; p.async = true; p.src = '/static/js/pinit.js'; p.setAttribute('data-pin-hover', true); f.parentNode.insertBefore(p, f); }(document)); </script><script type="text/javascript"> head.load("/static/js/reader-tracker.js", function() { new ReaderTracker() .track("instructable-steps", "DoneReadingSteps") .track("ible-stickyad", "SeenFullStickyAd") }); </script></body> </html>