*Leave comments if you have problems or do not understand something.*


Start in a folder like desktop or documents.

  1. Open notepad. Do not use wordpad, word processor, or web editor. They have to much bloat and word processor does not work at the moment.
  2. Type a h1 heading using: <h1> Our First Heading </h1> .
  3. Type a paragraph using generic text to serve as a place holder for text later: <p> This is a paragraph.</p>

To see the source code for this page or any other page left click mouse to bring up options list and select view source code or inspect element.

Save file in notepad as

  1. File name: "Page 1.html". This makes it open with your default browser only and has nothing to do with what type of file it is. It is still a .txt file.
  2. File type: ".txt". This has everthing t do with the type of file it is. File type refers to how data is encoded while renaming a file extension tells the operating system what program to open it with. This can get confusing if you arbitrarily start renaming file or write in odd programs and save weird file types. Exsentially you are corrupting the data by using an incorrect selector or program. Text documents to be used for this tutorial are written using notepad. Word processing programs add other information to the text file for use with it's software that makes it unreadable by browsers as a webpage and with simply rendered the text as written. It will show the html tags and not format it correctly. There as many ways to get hacky and use bad tactics but I an not going to discuss that because it is confusing and not reliable. Use notepad not to make texts not anything else. Save as .txt not rich text, a word processors version of text, or any other type of text. Finally only edit in a web editor like sublime or coffeecup or in notepad. This prevents any chance of ruining you file making coping and pasting it into a clean notepad file tedious and messing leading to bad syntax and broken code.
  3. Encoding:"Uft-8". This is the html as well as western hemisphere standard. The default for text files is ansi so change it to uft-8 or you will lose special charaters. Internet uses special charaters like emoji and math operators that are lost using an encoding less than utf-8. Unicode refers to how many pixels to draw fonts. Eastern languages use utf-16 because their kanji require more detail. Saving in uft-16 makes file sizes to big and unmanageable because it bloats files trying to create bigger storage containers for each character. Use utf-8. Ansi uses to small of a storage container for fonts and it only used for writting simple instructions that the operating system uses like in initalization files. None of those file are intended to be read by people so it does not use special charaters and as such uses ansi to minimize size to not waste computer resources.Use utf-8.

So now we have created a text file that will appear in our folder that will open in a browser as a webpage and our notepad is still open. Keep the notepad still open for further editing or to create multiple template pages very quickly. To create multiple pages quickly keep file type as ".txt" and encoding as "utf-8" but change the file name.

Changing the file name with notepad still open

Save the first file as "Page 1.html". Once that is done click on "save as" again and change file name to "Page 2.html". To do this quickly once the screen to type in file name appears it is hightlighted in blue, press right arrow key once to g to end of line making the blue selection bar disappear. Now use left arrow key to go back to "1" in the filename and delete it then type "2". Click save. You now have 2 pages saved with different filenames but the same template. For best use create up to 5 pages or more using this process. Websites grow very quickly with each page having multiple subpages. Keep notepad open and save new copies by changing the filename. If you are further along in your development of site then change the heading as well from something like "Programming Part 1" to "...Part 2,Part 3, Part 4, Part 5 etc.". Change heading first and then save of course so you are not saving you new title that corresponds with the filename of the page.

This completes the tutorial on how to start a webpage using notepad as a simple editor. Make that you have templates you can add paragraphs and format them using <div>,<float>, <margin>, and <padding>. Padding is very important and aligns text so that it does not run edge to edge. In word processor you have margins setup to format the document as well as a 8.5x11 letter aspect. Webpages are more like landscape view to fit computer screens and this makes sentences long and paragraphs look too flat. Format your page using <div> to create containers to divide your page into attractive easy to follow areas of interest.

How to format(layout) your page before botching code horribly


From me: This is an excellent example of how to do Css and setups a modern approach to web design using methods taken from traditional writing to layout a webpage before you start putting down unwieldy text. I took this directly from /Change-Text-Color-in-HTML so want to credit them for the work they did in presenting clear and effective code. The reason this is a better example is because it gives you a full working page as a template instead of other places that only offer snippets. Snippets fail because when combined in unorthodox ways it leads to broken code and unreadable from a humans point of view. Sites like overstackexchange use bad examples so you have to use their loaders because they expect you to fail. Their excuses and not logical. They claim they use snippets because they do not know what you want to do. BULLSHIT! Even so all the more reason to show a full working example instead of a dead one. They come closer with jsfiddle but again where are the <html> and <body> tags? Do I but the code inline or internally?

This hurts beginners the most because they are not shown the first steps the proper way. After the first step is done correctly they can easily manipulate code to control a page however they want. Messing up the understanding of the first step obscures the whole process forcing them to rely on external resources for their page. Since 1992 NOBODY HAS WANTED TO USE EXTERNAL PLUGINS on their page but were forced to due to dicks passing shit coding examples thst work but only if in concert with the correct usage and placement. Fact: They are really just advertising dependancy on plugins not teaching you how to code. This is true in many areas in life but specifically in computers you have so many people struggling because the system is setup for people to fail. How many times have you tried to do something only to fail with methods that sometimes work but are unreliable? It is hard to retain info when the process teaches the steps out of order and and illogically assumes "here's a random order of steps, figure it out.". That is not proper so no wonder technology is coded, it is meant to be indecipherable. They are bullies. Shuwetelen. How many in the field it people are self taught and still need to constantly update their skills? All. Not because technology changes (c++ is 70 years old and changes are minutia.) but that they learn skills haphazardly leading to teams with hodge podge skill sets. No wonder team working is vital. That diversity allows compabitily of shared background to branch out into sharing unknown knowledge with each other. Even then caveats exist due to ineffiencies of exchanges of knowledge. How efficient in the transfer stream between two team members? Member a teaches member b but member b still is not as profieceint as member a because they have not received the same quality of instruction as member a. Member a is guilty of compressing data to be exchanged and losing detail. He used a lossy format instead of a lossless. USE THE FULL TEMPLATE IN YOUR INSTRUCTIONS IF IT IS MISSION CRITICAL.

From Open your HTML file. The best way to change the color of your text is by using CSS. The old HTML attribute is no longer supported** in HTML5. The preferred method is to use CSS to define the style of your elements.*

From me:(*This is bs. They created confusing terms to make smart people feel stupid. Html=css=Html5, these are marketer terms and mean nothing. To say it is not supported is an abuse of the word "supported". Css IS html there is no difference. font-family=tahoma is html/css. The syntax is the same. Large it sites use linkstyle=rel to hide their code so you can not learn how to code. The workers for that site use the bs naming conventions to create job security. You can not learn fron their example how to do anything nor can you learn from their bs help sites. They troll and play comment tag.

Example: "person #1person: how do I do this? #2person:"It sounds like you want a tutorial. This site is too stuck up for you. We don't want to help you. We will nitpick you grammar and spoken syntax. Let's play comment tag back in forth pretending we are so obtuse we do not understand what you are asking. We will ask for useless details just as a stalling tactic".

These are horrible sites. Even when they ARE right they are still wrong. It is the confused leading the confused thus destroying knowledge and making people weak. If it sounded like they wanted a tutorial then give it to them. Obvisoulsy they want a simple way to start and you are FORCING them to struggle with unnecessary code and syntax in an attempt to frustrate them and cause the to fail. Then they will be forced to use your external .css style sheets or googleapis. or bootstrap4 thus causing dependancy on dumb shit like wordpresss and other type cms. I do not know how to use wordpress for a blog because that is stupid. It does not exist to make it easy to blog it exists to prevent you from having control over what you say and how. It is censorship in the form of conformity. A another pc site run by corporate slime that put desire to control and oppress over ther free exchange of knowledge. Using overly complicated examples does not show off their expertise but really makes it look like they do not know what they are talking about. They know the beginner needs the first basic example but instead FORCE his hand and therefore his writing to use albeit more advanced methods but not important given that it is not simple. Here simplicity beats better. What actually would be best is knowing all forms and being able to CHOOSE when and where to put the appropriate form. They call it "syntax" but really it is the formula of what the code functions as. Their defintions lack mathematical presicion and are linquistically and pedagogically inaccurate. I don't give a fuck about them.

**"supported" is meant to incorrectly cause the reader to assume "not supported by a browser and so it will not look right". This is a "weasel word". What they are really saying is "we own the internet and decide how and what you are allowed to say and how. We are narcists and fascists and have taken it upon ourselves to declare what is "pretty" and what is "not pretty". We are placing boas against working code that YOU PREFER due to its ease of use and abilty to quickly be picked up and deployed versus OUR PREFERENCE of complicated syntax that puts the cart before the horse causing beginners to fail because we want to sell them support later. I do not test all code for all systems. I write clear and consise for obvious reasons and check it on the latest version on Google Chrome because it is the most used and ubitious. It shows the same on Chrome as it does one Explorer. I do not use firefox because it 2009-2011 I had really bad experiences with them. They are a wannabe Chrome with all the tracking missus the function and security, it is a mozilla hack browser. Chrome unfortunately rules. I do not use Explorer because it has problems and is not moving in the right direction. Microsoft is fading as a company and will probably become deprecated by one I start. I will probably make a software company based like Microsoft and develop technology except it will work. I have strong thoughts and feelings on this. There are things about all OSes that do not make sense to me. They seem to be more about style or "philosophy" than functional. I do not want to join a cult or tribe I just want the computer to obey me and not be restrictive in allowing me to do what I want especially when I know that it is capable of performing it.)


 This method will also work with external stylesheets (separate CSS files). The examples below are for an HTML file using an internal

Using Css

<!DOCTYPE html>

body {
        color: red;
h1 {
        color: #00FF00;
p {
        color: rgb(0,0,255)

<h1>This header will be green.</h1>
<p>This paragraph will be blue.</p>
This body text will be red.

Define a CSS class instead of changing an element. You can define a class and then apply it to any element you'd like throughout the page to instantly add
the class style. For example, in the following file the ".redtext" class will make any element it's applied to use red text:

<!DOCTYPE html>

.redtext {
        color: red;
</style> </head> <body> <h1 class="redtext">This heading will be red</h1> <p>This paragraph will be normal.</p> <p class="redtext">This paragraph will be red</p> </body> </html> Open your HTML file. You can use inline style attributes to change the style of a single element on your page. This can be useful for one or two quick changes to the style, but is not recommended for widespread use. For comprehensive style changes, use the previous method.[2] Method 2 -Using Inline Style attributes <!DOCTYPE html> <html> <body> <h1 style="color:#FFFF00;">This header is now yellow</h1></pre> </body> </html>

Me: You should learn how to do Method 1 first then Method 2. Learning method 2, "inline", is easy but becomes a dependancy. "Inline" will change one line at a time while "Internal" will change many elements depending on how you assign class or id to them. Internal uses more code for less elements and less code for more elements. This is why you need to know how to use each. There is no "better".

The theory is when you begin you want black text and white background to keep it clean. To learn how to change color and font you are probably only wanting to do it to one or two lines. For this you would type <font color="purple"> Here is my targeted text to color</font>. This is how to use "font tag" to color text but it is "deprecated". Deprecation means a group is trying to force their opinion on others and usually this leads to backlash. I used font a lot in the beginning but will switch to using span instead. Span is associated with Css just like font is associated with html.Font and span both work and there is no difference visually. To follow specification use <span style=color:purple;> Here is my targeted text to color</span> instead.

It seems to me that using font builds from the inside out and is traditionally how websites were made. Span seems to build from the outside in and is how sites that rely on photos for backgrounds and content work. So Html is writing information and Css is for layering graphics with no content, mostly used by ad sites (looks better). Html is for writers and Css is for designers. My writing is getting more complex so I need to illustrate it better and that is why I am switching to Css. I will start teaching the Css methods only because I have a focus on learning c++ and Css seems more advanced so instead of managing two style focus on the more complicated one and spend the rest of my time working on c++ for backend and embedded systems. Designing webpages is rather trivial for me. I would just hire designers to make it look pretty but this site is to help beginners learn so that they are not excluded. I cover both styles and explain why to use the certain code instead of just being a code snob. If you are poor you can not afford to go to school to learn this and if you are poor you can not afford to hire someone to do it for you. I want to make programming accessible for all.

External sheets at used for styling multiple subdomains so the website has a consistent feel to it. Without continuity jumping from page to page leads to not being sure if you are on the same site. In the early '90's hobbists played with code and used different pages to be expressive and free. The wanted to experiment with different styles and save the pages as a form of keeping templates for different uses. This online method of note taking led to unprofessional looking pages. Since they were hobbyists and not running a business this was perfectly acceptable.

The problem began when businesses used this approach. While their pages were not ugly or decomstructed in any way there was a lack of overall theme. Hackers exploited this by using redirect scripts (probably mostly written in perl and maybe javascript) to reroute traffic to counterfeit sites. They then did bad things. So the problem was not ugly pages but security. Security was breached when visitors went from the safe site to the redirected one. One the fake one they would be asked for credit cards or personal info. It is hard to say whether you on on the right site just from design so checking the address helps and may even foil these attacks. For the pages to be compromised (which they are) internally they would need a virus (script written in a "glue" language) to store data in a database different than the correct one. This means that if you can put a redirect virus on a page you could put any virus on a page. Instead of writing a redirect virus one could write a change forms virus to steal login/form information. If a company is using tons of lines of code it is to obscure how their page is designed that would prevent competitors from copying their looks but could run a security problem. I have no idea how companies track their code but it must use some form of automation because it is impossible to check it manually. They have too many lines and scripts running.

When using an external css sheet on a personal site to blog you are dependant on others code. This code consists of programming language. If you do not know how to write a webpage in html there is no hope for you to understand command functions of stronger typed languages. If you use a cms on your webpage then they can update it at anytime. How will you know the old code from the new? can you validate it some how? Of course not you are going by blind trust. If some program acting behind the scenes has control of your page you are at it's mercy. When the script and functions change you do not know if it is because of a friendly bot or a malicious hacker writing a virus. Therefore while automated scripts to handle large flows of data from multiple clients (servers or browsers) may be appropriate for large business it is not for personal pages. On a personal page you should know how to create style sheets but understand their only real use, and therefore the teaching of it's use, is to have people create them for their boss in a professional setting. External stylesheets "look" sophisticated when source code is viewed so that lets you know that the site in question is reputable. They have "pros" on the job. This encourage to this preference trains people to enter the work force as a it professional for someone else, however it doe not benefit them in their own personal lives. All it does is complicate things so that you have more code to type to effect the same result. That is stupid and the illusion of sophistication becaus etrue sophistication would put code where t belonged not where it is used for hype or pretentiousness.

The selling point of external css was,"it saves you time...think about what happens in 6 months when your site takes off and you have to recode everything.". It wastes time. You waste time by struggling to learn how to code, learning one time fixes for each instance but always having to come back to the same problems with bandaid solutions. Learning all the code on every one of your pages is simple and elegant. Elegance trumps messy javacript competing with python, perl, and others for runtime/access to memory etc. This is when code breaks. In isolation on a emulated jsfiddle it appears to work but in the wild (true connected physical systems) the more you pile on the more liking it is for something to not work. Never have code you do not fully understand. Period. Fully understand it. Do not copy other's code because they may not understand it either. That is called hacking and uses dirty code for quick cheap and dirty fixes.

Exceptions are made for business because they do not matter and are stupid. They have unrealistic expections combined with unscrupulous motives and harsh demands placed on their programmers. Programmers write shit code they stole from somewhere else to fix problems implementing dumb "innovations" corporate wanted. Programmers had to use dirty fixes because the changes they were asked to make were unsound and their deadlines were unfair. To force a solution is to make compromises, with the compromise being bad coding policies. If your small business takes off then hire professionals to code it, why the hell are you are you doing it yourself?

If people just need an online presence for their small business them google or dex is sufficient. If they need a small business website then their small business may look more professional or it may attract more business through greater exposure but it is not like they are dealing with high volumes of traffic. Why wold you need to change the physical appearance of a site simply because you have more viewers? Why would you need to recode anything? What are they talking about?

Google, Microsoft, Quora, Facebook, Twitter, Instagram, have thousands of pages. Users have account pages that need to have a similar look and feel to them for navigation purposes. I do not know what is being taught in school these days but it does not ring true with reality. Is the purpose school=programming skills=build a social media site? If that is the only focus then it is short sighted. First of all a popular website does not equal financial gain. That is confusing profitabilty with prestige. Someone needs to go back and restudy economics. The most popular sites take years to turn a profit. Netflix went 10 before it saw a dime. And the only reason for that was bias in overly promoting it's brand through shameless cross promotion. Ever device was measured if it was netflix ready and the hype of cable cutting. To watch netflix you use a hdmi cable from any tower or pc with hdmi port and put it to your tv. This is the best way to do it. Microsoft in their foolish attempt to corner the market implemented the dumbest offers of Tv/pc combinations ever saw. As a result Silverlight was a gd flop. They were the keyguitar (I do not even remember the spelling) of pc media. In 2009 I had a Toshiba 18.4" laptop with bluray player hooked up to a 52" Sony Bravia and was playing San Andreas PC on it. I could easily use that for dvds or stream. The problem with Netflix at the time was their videos lacked warmth and had too much blue coloration in it and I was forced to rent through the mail from them. All in all the industry wants devices seperate while lowering the total enjoyment of both personal computing and media viewing.

If you are learning external style sheets it is for bs corporate marketing purposes and does not serve personal sites. Personal sites lack content and volume to constantly need uniformity. They do not have enough pages. It is an obstruction to learning html. Learning html to be a corporate programming it nuts. Businesses treat programmers baad.

Internal style sheets are good for performing layout on your pages before you write anything. Web editors like coffeecup put their own code at top and bottom to dicate how syntax should be structured. It sames you the trouble of writing to first few lines of code or having to copy and paste from text files. These few lines are insignificant and do not account for bloat however I have had problems with word processors creating large files. This means it has been wrapping my lines of text with other information causing bloat and leading to files that would take longer to download. Files that take long to download require users upgrade their service. This cause congestion on networks. It is simliar to selling cars with poor mileage to sell more gas. It is wrong and corrupt. whether or not someone has sufficent speed should not be an excuse for you to bloat newtorks and slowing speed for everyone. This leads to more destructive mpact on enviroment and more ground dug up and cables installed to handle growing internet traffic. The traffic only grew because your services and content is bloated. Example bitmap versus svg. Bitmap uses ugly raster low resolution graphics with file sizes too big for internet transfer. As a result we have to use jpeg files for photos and this causes compression artifacts in our pictures. This is nuts. Blender uses high quality resolution svg files but this format is not commonly supported anywhere. Windows does not offer support and neither does Linux. Gimp uses bitmap with limited support for svg only through plugins. We need to build better products and services and the only way to do that is to abandon loyalty to leaders who guide industry down a dark path. Business is currently lead by imbeciles.

The problem with coffecup for me is that they use alphanumeric color codes and I am not used to that syntax. Using different syntax is confusing to beginners. Telling the that #FFFF00= yellow is too complicated. The unsupported html <font> uses yellow=yellow. Rapid tables explains the different uses of alphanumeric coding and I like it and will need to use that for other projects (I am painting a house and need custom colors through Ben Sherman. PPG invented this computerized color scheme in the 1950's to produce topology for car paint) but unless you are an art person or designer this may be too much. If I had to tell you what the color was you would not understand and would not like to use that syntax. It would be wrong to force you to learn something new when you were not ready. You would not be able to go at your own pace and would get slowed down learning things that are fluff instead of functional. Learn how the code works first then add the needed complexity and sophistication later. Combining different syntax to different parts of the problem as happens on comment sites leads to too many chefs in the kitchen adding too many ingredients and ruining the flavor the dish.


Download HTTrack

Select "file>new project" then "next" on startup screen

  • Existing/New project:"Write the name of the website here"
  • Project category:"Select top option html site
  • Click "next"
  • Action:"Select top option download website(s)"
  • Click "next"

    It starts downloading your site to the folder you specified. It is helpful to download this to your documents.

    After it finishes click the error log button and view logs. Read logs and look for broken links then test your site to see if it is accurate.

    If you want to see your website offline open htttrack and select "file>browse sites". Your HTTrack opens in your browser showing a list of your downloaded sites and you can look at your site.