This is part one of a quick series of instructables that will take you from basic codes such as how to make bold text to advanced CSS and dynamic code.The cheat sheet for the code can be found in this instructable: Basic HTML code.Okay, lets get started on the foundation!Table of Contents:Basic HTML code cheat sheetBuild a professional website: Part 1Build a professional website: Part 2Build a professional website: Part 3 CSS
Step 1: An IdeaIt all begins with an Idea! Before you can start coding, you need to plan out your strategy. Start visiting other like minded sites. Don't look at the arrangement and leave. Look at the content, simplicity and use to the viewer. What can you offer or change to that site to make it better?
Now I am not saying go and steal someone else's page. What I am saying is Research, Research and Research! If you do find a page that you really like ( let's keep it real here, it happens) and decide to use someone else's hard work then make sure you change it enough to not be a mirror web site! Hold on, hold on! I know what you are thinking ...I do not condone any type of piracy! DON'T DO IT! I do however, accept that a large percentage of the internet content is "RECYCLED" in large part with thanks to Google. If you see something you like, learn to do it yourself instead of copying code ( hopefully, that is why you are here) from another page and publishing it.
Step 2: A ListNotepad or a notebook? Keep good notes! I can't stress that enough! Let's say you build yourself a nice logo. While using you favorite image editor, you use a neat font installed on your computer called Skesis. Some time goes by and you change your name from whatever to whatever and son. You will need to know what font you used to make that logo. The same goes for web design. Not only for record keeping but you need an outline for those ideas! I use an outline as a guideline for web design. Mine looks something like this:
Step 3: Lets get startedA web page is made up of sections of HTML Code that contain your message. You can build the best web page without spending one penny. You can use most any text editor such as:Windows notepad ( PC | Start > Programs > Accessories > NotePad )Mac simple text ( MAC | Apple menu > Hard drive > Applications > Simple Text )or my WYSIWYG Live Page Builder tool.
Step 4: The Skeleton of a web pageA basic page looks like this:1."http://www.w3.org/TR/html4/loose.dtd">22.214.171.124.Untitled Document126.96.36.199.1. Doctype: Specifies the HTML version used in the document. Browsers may display your page funny without it.2. Html Start Tag: The creation point of the page3. Head Tag Start: While this is not visible it gives information about the content4. Meta Information: Gives information about the document and not the content5. Title: Shows the title of the page at the top of browsers6. Head Tag End: Closes the information about the content7. Body Tag Start: This is where your page content begins8. Body Tag End: This is where your page content ends9. Html End Tag: This is the last line of the whole page and finishes your page
Step 5: Your first web page
Using Windows notepad ( PC | Start > Programs > Accessories > NotePad )Mac simple text ( MAC | Apple menu > Hard drive > Applications > Simple Text )or my WYSIWYG Live Page Builder tool copy/paste (highlight the text by dragging your mouse over the code below, when it is highlighted either go to edit > copy or press ctrl+c and then paste into notepad by either going to edit > paste or pressing ctrl+v) the following code:"http://www.w3.org/TR/html4/loose.dtd">Your Title Here Your Info Here Now change " Your Title Here " to a new title you likeNow Change " Your Info Here " to whatever you like. Try using some code from the HTML Code Page and see what you can come up with. Here are a few examples:I will use the text " Hello World " Bold - Hello World - Hello WorldItalicize - Hello World - Hello WorldLinked to a page - Hello World - Hello WorldChange the Color - Hello World - Hello WorldResize The Font - Hello World - Hello WorldNow save your work as anyname.html then open with the browser or your choice and voila! You have designed a web page!