Programming with Html5/CSS3

First create a webpage.

This is a step by step tutorial. Do not using puntuation marks inside of html tags as it will show on your page and break your code. I am using them to break the code so it is visible so you can see how it looks so you can use it. Write a heading with the html tags <'h1>This is a heading<'/h1> and paragraphs using <'p> This is a paragraph<'/p>. Everything inside the tags with be displayed but the tags will not. This is used by the web browser to format the page using white space. It puts spaces between headings and paragraphs.

  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> This is a heading<'/h1>. Do not use ' in tags. I forgot how to display tags as text so used them to break the code. Removing them makes the text display exactly like this heading for this page: <'h> Programming for Html5/CSS3.<'/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. View source code is easier to read and better but both work.

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.

<div class="html"> <html> <head><title>Title</title></head> <body> <p>...</p> </body> </html> </div>

Update:1:02 PM 3/5/2019

Working on this page and others. To type tags so that it is visible on webpage use & lt for < (less than) and & gt for > greater than). Someone told me to use <pre></pre> and <code></code>. I do not know what to use them for to make code visible, it still makes it dissapear. It does change < into < which does look nicer.(example text: does look nicer)Those are xml tags and not html5 tags so I will not discuss that here except to say <pre> means preformat and is designed so that people and machines can read it; <code> is instructions that you
type in to give intructions to other people without having the code run. I do not get it.

12:26 PM 3/7/2019 I was working on a step by step and botched it horribly, urrgh! I will have to do it over and maybe just give up and work a different angle. My computer crashed twice and I still have not recieved the two I have ordered or my monitor. Below is some unorganized content and unsuitible for print. I need to put it somewhere so I can organize it later or look back and take it as a learning lesson

step1. Start in a folder like desktop or documents.

empty folder
step2. Left click with mouse to bring up folder options. Select new>Text Document.
step 2
step3. Rename document or leave as is. We are going to leave as is to make it easy to make templates.
step 3
step4. Write this to create a blank template for your pages. The text in angle brackets ("<>"'s) are called html tags I will explain the tags in a moment.
step 4
Step5. To open "save as" dialogue box press: Ctrl+SH+s (fastest, recommended) *correction: not available in notepad only higher level programs.* Or press Alt+f then "a" (slower) *correction actually does not matter* Or use mouse (slowest, not recommeded unless needed) *correction you probably should use this.* 1. Rename the file as "New Text Document.html". We changed the file extension from ".txt" to ".html" In the FILE NAME but not the FILE TYPE. 2. Leave the file type as ".txt". This allows us to open later and modify the .html file if we follow certain hacky procedures. 3. Change the encoding to UTF-8. This lets us save special chararcter sets used in UTF-8 fonts, the standard for webpages. 4. Click save.
step 5
Step6. It created a new file "New Text Document.html" but did not overwrite the text document. We can edit the .html file by opening the .txt later. For now we are going to keep the notepad open. At this point if click on the .html file it will open in a browser and show a blank screen.If we click on the .txt file it will open in notepad. You can have multiple notepads (files) open at once.
step 6
Step7. I spaced out the tags to make it easier to read. "Whitespace" (empty spaces between letters) is useful here.
step 7
Step8. This is what happens when you click on then the .html file. it shows up in browser. Notice the address bar. It follows the file structure of your hard drive. The spaces are replaced with "%20". This is because address bars can not have spaces so uses it as a place holder. File explorer works like Internet explorer. They follow file structure hiearchies. If we did not have a tag the tab would show the url. This is unacceptable because all we would see is "www.xyz" and the domain name would be cut off. Seeing "https://www." is not very usable to our audience.
step 8.
Step9. This is what happens when you click on the .txt file. It opens in a new notepad. We now have two notepads. Either one can modify the .html file. This is messy so close one.
step 9
Step10. This is what happens when you open the .html with notepad. Clicking minimizes first notepad and opens a second one. On your taskbar you can see two notepad files are opened. They are the same file.
step 10
Step11. To open with notepad highlight .html with mouse pointer and left click it. Select "Open with>Notepad".
step 11
Step12. Hover over the taskbar to view your opened notepad files. Close any extra notepad files. We have duplicates of our html .txt file so close one of those then bring up the other one so we can edit it.
step 2
Step13. The first notepad for this file is in the middle. The second one is after it. I was writing the steps down as I was going along in a different notepad which is why there are three files showing.
step 13 Step14. The other notepad. Notice the red square on the first and second one and the file names on both. They are the same file but opened twice. step 14 Step15. We will make the first edit. The title will be changed to reflect what we want to be listed in the tab. When a browser has multiple pages you use the tabs to keep track of your webpages. It helps to manage a cluttered browser. When researching and multitasking tabs are a must! We should put clear information on the tab so that users can know that it corresponds to our page. step 15 Step16. I wrote "My Personal Page". I press Ctrl+s to save it. I have my brower up from before. Look at the tab and how it shows the file name of the file. I go over to my browser and press Fn+F5 to refresh the page. After saving on notepad, refreshing the browser allows the changes to take effect. Now the tab says "My Personal Page". This let's people who use tabs know how to index and find our page out of the many they are viewing in their browser. This is proper Html and not lazy. This is how tag is done. step 16 Step17. This is the after.pic missing. step 17 Step18. side by side comparision. step 18 Step19. Next we use the <h1> tag to write a heading. You should only have one heading so that it stands out from other headings. Other headings are %lth2>,%lth3>,%lt H4>, and so on. The higher the number the smaller the font gets. Lets write a heading. step 19 Step20. I wrote some text. I will delete it since it was just for demonstration. step 20

<Pre> made formatting the space inbetween the pictures easier as I did not have to use padding and complicated syntax. The smoothness of the letters and stronger contrast helped break up the space more. I have to rewrite this whole section because it is confusing, full of error and dubious structure and process. They use bs dyselexic wordplay to destroy learning.

Programming with HTML5

  1. The attribute tags are in green. Attribute tags open and close with <a> and </a>.
  2. Attributes themselves are in red. Thus href= and target= are attributes.
  3. Attributes have equal signs after them to point to the value of the attribute.
  4. "https://malonexchange.com" and "_blank" are values. They are in blue.
  5. Values have quotations around them. The values are what is being referenced by the attribute.

An element is what goes inbetween tags. An element is complete when it has tags. This element has two attributes.
There is no limit to how many attributes you can have in a opening tag.

_blank              Opens the linked document in a new window or tab
_self                 Opens the linked document in the same frame as it was clicked (this is default)
_parent             Opens the linked document in the parent frame
_top                  Opens the linked document in the full body of the window
_framename     Opens the linked document in a named frame




<a href="https://www.malonexchange.com" > title="This text appears when your mouse hovers on it" >This is the text that you see on page</a>

The example above is how to do external links to other pages. To link to different parts of a page use internal links. To do the most boring and basic of internal link use class id attribute inside of anchor tags. Anchor tags are an a with quotations around them like <a>. The syntax of tags varies from spot to spot so it is sometimes hard to keep which style of tags to use so I call then attribute tags because it helps me remember how to do attributes.

Internal links

Use this for skipping down sections of your page to main parts or headings. I did a lot of this for the chapters of my weight lifting book so you can go to that page and see live examples. Links have two parts the part you click is called the source link and the designation link is called the target link.


Here is the source link: <a href="#Benchpress" >Benchpress</a>. Because this is a class id we have to use #. This is simplier than any other way and promotes good syntax for starters.



Here is the target link:  <a name="Benchpress" >Benchpress</a>.The blue values need to match to link them. The href=source goes on top to link to a bottom section (or visa versa) name=target.


Write your source tag then copy it. Paste it where you need and change href= to name=. There are many more different ways to write tages using CSS that use different characters, symbols and even order. I show the easiest way in all my examples in the beginning. This cuts learning curve. Later on these methods will be tedious and we will have to start using internal and then eternal CSS for styling our page.

These are just basics taught in a straight forward way that avoid randomly learning through trial and error. Eventually you will seek to use links in lists, navagation bars, double ended links, and many others.

After this brief introduction you should be able to:

  1. Create a blank webpage using just using notepad.
  2. Fill out you first heading and add paragraphs.
  3. Put links on your page linking them to other webpages you made or places on the same page.

Anywhere a page looks interesting left clck with mouse to bring up options menu and click "view source" to view the source code for that page. All the code is available for view since I do not host a huge site styled with external CSS sheets that use external links hiding that code on another server. Viewing my page shows how it was actually done and is not obscured in anyway. Most other code from sites will break or cause unpredictable results if you tinker with it causing confusion from not recognizing strange syntax and use of tags and elements. While tempting it leads to frustration and eventually a loss of interest because it is made too hard. This of course leads to using premade sites to co the coding for you leaving people less literate than before. You do not want to be dependant on other people's work due to ignorance. Style comes later, in the beginning focus on your message and what you want to say and do. Other peole can help you if you are outgoing enough to connect with the right people.

Further note: Most of the code so far is pretty rudimentary and there are more advanced ways of achieving the same result but would not serve for a very good learning purpose. Try to be efficient in your coding to save time. Trying fancy things that are beyound your ability is a wasted effort. Eventually all programming will be covered but a want a clean chronological order so that children to adults can learn to code correctly without wasting steps. From webpages, web development, hardware and controllers, arduino, raspberry pi, languages like c++ and pascal, operating systems, drones, robotics, nd embedded systems I plan to write about it and give enough information so that an individual has many compentencies and is able to approach such subjects that other tutorials and sites just do not offer. It is better to learn just enough html and then go to javascript, php, sql, c++ then to spend countless time trying to fix someone elses botched code or make it work for your site to get it to look a certain way. There is simply to much to learn to worry about design and syntax issues. I cover that elsewhere for people who actually need it.

If you have questions about any of the content or want to offer advice use the contact page as it is the best way to get in touch.

<a </a> h ref= ''

Links continued

Internal Links

You have internal links that jump to different sections of the same page. Use: <a href= #"Uniqueidnamehere(FollowME!)">I am the starting point. I may be a word in the introduction or part of the directory. Click me!</a>. That is the source link, it is the starting point.

Once you click on the source link it will take you to the target link. Create the target link using the id from the source link but this time do not use a # and use name instead of href like so: <aname= "Uniqueidnamehere(FollowME!)">I am the finishing point. I may be a chapter, or I can be a phrase that is being referenced.font color="green"></a>

TADA ! We can now link from the directory to chapter headings or select parts of paragraphs!

Exciting two way internal links

We are going to make a two way link. Warning! : they say that this is bad for your SEO or search engine optimization but that only applies to external links where corporations cheap by linking their sties back and firth. This confuses the search engine and the search cancels both links to sites. SEO is hooey anyways. To increase SEO get a bunch of people to link to your site and fill out all the meat date on every page. Use a validation service and fix any broken links and correct any errors. Doing this wll bump your rating a little bit. You main concern should be working on the quality of your site, or if you are a business the quality of your products. Sites with high SEO often focus on advertising BS and neglect content and service. SEO is code for "clickbait".

I have a few examples:

And this one may be the best one yet as it is super useful:

How it works

Since we can put as many attributes in a link as we want we follow the same process as a regular link but instead of only assigning "source" and "target" linear path, we "web" the links. This is called multi-linking. This is the best type of links to use if a highly functional navigation route is a priority to you. It makes your site easier to navigate and therefore more enjoyable for users. They never get lost! Using "href" takes to to "name", once at "name" clicking "name" takes to back to "href" because we added a unique "href" to "name". We are going in a circle completing a loop just like on a race track. A clock starts at 12, then goes to 6, only to travel from six back to tweleve. We can have two direct pages or we can have pages in the middle. Using multi links means that instead of having two links for both sections or pages we can use only one, thereby eliminating messy displays and clunky navigation buttons streamlining our site. Really these are all the same link you are just using it differently.

The strategy

For books and large pages use three links. Make a directory at top of page and list your sections. Think of your sections as book chapters. You book has maybe twenty sections/chapters. From directory click a link and jump to that chapter. It should take you to the heading for that chapter. Your mouse should be on the chapter heading ready to click it and go back to the directory. Instead on clicking it you have the option of choosing one of the other two links. To the left (and/or under) of the heading is a link that takes you back one chapter, to the right takes you forward one chapter. It goes: Start at the directory. Click on chapter five. You jump to chapter five. Click on the heading of chapter five. You jump back to the directory. Click on chapter five link again and jump there now click on the left link for chapter four. At chapter four click on the right link to take you up to chapter five and at five click on the right link to go to chapter six. Left links go back one chapter and right links go forward one chapter. The heading always goes back to directory at the top and you could even put a small link under heading to jump to the last chapter at the bottom.

External Links

Okay so know we need to link to pages not on our site. This is the easiest. We could just use < href="www.website.com">www.website.com </a> and than would be okay but if we wan to target a subsection then we need to find a class or id tag to latch onto. Viewing the page using "inspect element" to search for some tag tribute like a "#" or "." object. We need something like that in the area we want to target. If we can find something like that we can add it to the end of the href value like:

<a href="https://www.malonexchange.com/MaloneWeightLifting.html#Benchpress" >Joe's Benchpress article</a>.

Structure

We need to properly structure our our webpages. Html is the same thing as CSS except that CSS is junk and does not work. I will eleborate on this to great extent later but first let's focus on HTML/CSS hybridization. We will use css since we have no chioce since IT IS HTML.

I am going to explain the structure of a html file and explain what to put and why. Others do not do this and their validation systems are wrong. Here is how my pages should look:

<!DOCTYPE html>

→ The ! declares to the browser that it is a webpage. There are other files on the internet other than webpages such as secure traffic.

<head> → You have to put heading here or it is not valid html. This acts like a robot.txt to tell search engine info about your site. Sites without this are dubious(dark web)

<META charset="utf-8">

/* You need at least four meta types. Meta data is used to track and monitor your site. Without it you will not shown up in searches. Not showing up in searches is like being offline. You can store files on your local drive and hackers can get to them, or, you can post them freely and share them. If you are online and noone is viewing them it is as if you never had a website and are simply browsing the net like everyone else. A website is the act of taking private files stored in C://users/you/documents and posting them on a public folder system in the cloud. The cloud is a stupid name for the internet. The internet is harddrives buried underground by the government. As above as below*/

<meta>

The first meta data is dealing with charset. It stands for character set. This determines what letter to out put your data into so it is viewable by humans. For english UTF-8 is standard. Unicode is complicated but refers to how memory is allocated by the operating system in windows and by the kernel in linux. I am not going to discuss clock cycles and write/compute times here. That is backend developer stuff. It is at the very end of my series of programming as I start with frontend with html then progress to writing web apps, then software, then server duties and functions, then building operating systems, then finally processor manufacturing and artichtechure design (the main competitors being Intel and AMD).

META name="viewport" content="width=device-width, initial-scale=1".

The second meta type is viewport. This allows content to be viewed by screens of different sizes. This is not to be confused with "responsive sites" that use special scaling to fit browser under 600px like smartphones and tables. initial scale 1 means that a magnification of one is used. Viewport and viewbox are describing the same thing but with different perspectives similair to the difference between pixels density and dpi (also cymk and rbg).

<meta> the third is keywords.

Again this is to be referenced by search engines to organize lists that share common data. Master ing meta types will solve for most of you SEO. No broken links and fully filled out html pages using the structure I am describing. Anything else is a marketing hack by sites of low quality and repute. They only can about money. Most people do not buy computers and internet serivce to watch commercials. They want access to the information highway so they are not stupid.

<meta>

The fourth data type is description. It provides a readable description on visible internet search pages when people are performing searches.

In the top of page to setup html file with notepad I said to save it as Utf-8. It saves each character as exactly one byte. Writing 32 letters save it as 32 bytes. Using notepad++ and others saves it as 12,229 bytes. Saving as ansi is not permissible because you are creating too small a register to store the value of the integer. Think of it like this; Fonts have different hieghts and widths. They also differ in spacing apart from one another. This is why it is hard to get straight columns of letters in the middle of a page but not at the beginning, you would have to use a monospaced font. In html we often use the <pre&lg tag for related purposes. Because letters and symbols have different sizes they may only take up 7 bytes but the computer will register each character as a full 8 bytes. The page filing system allocates sets of memory in 8-byte chunks so that data can be retrieved faster as it is not allowing it's self to calculate values to the floating point but instead "rounds" to the full 8-bytes such that speed is optimized at a sacrifice of accuratcy. Using a program outside of these norms is ludicrious and sacrifices both speed and performance but bloating values horribly and then having to recall bloated values instead of trim values. There is a bunch of garbage and wasted space in the memory units that these programs are writing to. They are stealing valuable clock cycles that could be better spend at optimizing code for greater performance . It is just bad practice and obivously the work or either a lazy programmer (most likely) or an incompetent programmer (not likely but very possible). If the result was simply a bigger html file viewers would suffer from slower downloads leading to congested networks thus clogging up entire networks, a "traffic jam". If this were to occur a few notes, one people would be forced or tempted into paying for more bandwidth just to access simple information with cost going up and perforamance getting worse and/or compaines would experience trouble on their end because bloated code takes longer to write, compile and everything else. It would lead to increased demands on their server networks requiring that they themselves increase bandwith by buying more leading to raising costs on their end not to mention the time lost compiling versus actually writing new code. Before new code can be tested and implemented they have to first process the old code. Bloated code taking longer would lead to workers wasting companies resources. They are not effienct and are slowing down production in essense steaking from the company. Try ing to rob users of their time and money is a double edged sword that will also rob them as well. Be forewarned.

The memory register in like a container. We have a size 8 container we are going to fill with a size 7 value. The value fits and there is little waste. This is called effiecient computing (clean code as well). If we were to make comparisions we could say that the container is like a shipping box or shoe box. In business shipping accounts for on of the largest expenses such that care is taken to minimize waste through lean manufacturing. You would not ship a small item in an overly large box because oversize shipping would be cost prohibitive and wasteful. To explain this to younger people you would make a comparison that you would not ship, put a size 7 shoe in a size 23 shoe box as it would rattle around and get damaged. To prevent that you would have to add packing copious amounts of packing paper and that adds to cost and a waste of precious natural resources. You are wasting money on wasted space.

Commericialzed products are hype. They do not perform better and in many cases slow you down with there tools. I am typing this on notepad as I speak. If I need to view output I compile and view it as html on the fly. If I need something quicker I will use an online service for the preview feature or I could use an offline editor that I made. All web editors in some form slow me down. When typing an element it has annoying popups offering to autotype a suggested tag. This function eats up memroy as it has to parse my writing then interupt it to suggest something that I am already doing. Popups are just as distracting if not more so when writing as they are in web surfing the only difference being that writing is creating content while web browsing is consuming it. I type to fast to pay attention to what the editor might suggest so while crafting a fine line of prose it is unexpected and jarring to see suggestions interupt me while I am in the middle of a thought and trying to code it. I suppose I could figure out where the setting is to turn off this feature but then I am spent wasting to learn a new something that is less effiecient than my current method. The calling up to memory increaes latency and cause slower response times. i like a fast editor. Lazy programmers who type slow and do not create much content dispise coding want to write as few lines as possible by having some automated process do it for them. This tradeoff of performance for conveinance effects output and and causes lower quality programs and encourages dependancy on tools that are not really optimal for the task at hand. Typings slow just to let the machine catch up is silly. The result is we type slower, think slower, run our software slower and then end up with bloated code. Ignoring percieved speed issues this bloated code I refer to is limiting and not comparable to hand written code optimised for speed and performance. We would in essence be settling for less. to acheive this added bloat the program must be using what I call some sort of wrap or wrappers to embed meta data into its stream so that it can recognize its own edits and output later in a format of it's choice. Great. So now not only is the thing buggy as hell it is now telling us what to do instead of the other way around. The meta data has various monikers such as rich text and such that probably exist n programs like notepad++. I learned barely html in the '90's when i was 16 and coding was real. These days there is far too much dependence on tools that neither explain the job at hand nor provide a way for a user to refine skills to advance to deeper levels of coding and competentcy. I think notepad has a feature where it auto inserts color for text. Now combination of selectors and class did it choose and by what logic did it assign these values? Part of hand coding is to see past the surface layer of what we want and learn how specific selectors, classes, and attributes combine to form creative works in an expressive way that is at once unique and teaches us insight into how we can use untried or thought of solutions to solve design and coding problems in the future. Using a dunb machine just manually digs and digs into the project spitting up bad code whereas we ourselves would not brute force a solution but use intuition, sly, cunning, and come up with news ideas and designs. We would not limit ourselves in the way machines do. They are simply there to automate the boring stuff. Some people like coding and others don't and that's fine. But if someone was serious about coding them they would do good to avoid gimmicks and sales hype and just start coding the honest way so they can recieve more honest output.

<!DOCTYPE html> TELLS BROWSER THAT THIS IS A WEBPAGE AND NOT SAY A DATA STREAM
<head> TELLS BROWSER TO LOOK FOR META DATA
<META charset="utf-8"> DISPLAYS UNICODE CHARACTERS OF THE WESTERN ENGLISH SPEAKING VARIETY AND NOT CHINESE OR INDIAN
<META name="viewport" content="width=device-width, initial-scale=1"> SCALES TO FIT MOST DESKTOP PCS BUT NOT MOBILES
<META name="Keywords" content="...PUT KEYWORDS FOR GOOGLE TO FIND YOU HERE..">
<META name="Description" content="...CREATE A ROBOT (text message, greeting"fun site come in!") HERE TO HELP PEOPLE DECIDE IF YOUR SITE IS FOR THEM. DRAW THE VIEWER IN." >
<title> PUT YOUR TAB HEADING HERE NOT YOUR FAVICON</title> USE DNS FOR FAVICON. MAKE A REPORT RECORD
<style> STYLE GOES HERE FOR CSS. PUT IT HERE
</head> INTERLINK HEAD HER. DO NOT PUT IT AT AFTER THE ENDING STYLE TAG. THIS IS A F'ED UP TRICK THAT HURTS SEO AND CODE<>

/CSS{} PUT YOUR CSS HERE. UNDER <HEAD> AND OVER <STYLE>. OTHER WEBSITES ARE WRONG WHEN THEY SAY TO NEST BOTH STYLE TAGS
INSIDE HEAD. HEAD IS INTERLINKED WITH STYLE SO THAT IT FORCES THE STYLE TO RUN. tHIS IS HOW ALL BROWSWERS ARE SUPPOSEDLY
SUPPOSED TO BE ABLE TO DISPAY WEBPAGES EXACTLY THE SAME. STUPID. WE KNOW THAT CSS IS GARBAGE BUT PUTTING THE END HEAD TAG
WHERE YOU WOULD EXPECT UNDER THE END STYLE TAG CAUSES ERRORS. W3SCHOOLS SHOWS IT IN THE INCORRECT PLACE ON EVERY EXAMPLE
AND SO DOES WIKIHOW. tHEY ARE FANBOYS WE WANT TO PRETEND THERE BS ACTUALLY WORKS CORRECTLY BUT IT DOES NOT. CSS{} CSS{} </STYLE> HERE IS STYLE. i USED TO ATTEMPT TO PUT TITLE IN HERE SOMEWHERE BUT THAT IS DEPRICATED. IT WAS ALLWAYS A GUESSING GAME.
TITLE REALLY DOES MEAN TITLE AT LEAST IT USED TO UNTIL PEOPLE STARTED ABUSING IT AND USING IT FOR TOOLTIPS ALL OVER
THERE PAGES AND BEING RIDICULOUS WITH IT. WHY COULD'NT THEY HAVE JUST MADE A TIP TAG? THERE IS ONLY SUPPOSED TO
BE ONE TITLE TAG BUT WE NEED IT FOR IMG AND HREF AND FOR MOST TO A LESSER EXTENT PUBLISHING. SO OF COURSE USE IT. AT A CERTAIN
POINT CSS FAILS AND WE HAVE TO USE BAD CODE TO FIX THEIR BAD SPECIFICATIONS
<BODY> PUT BODY HERE. THIS OFFICIALLY ENDS CSS. USE CSS IN BODY IF IT CONFLICTS WITH OTHER CSS IN STYLE, THIS HAPPENS ALOT!
USE <BODY STYLE=FONT-FAMILY:TAHOMA;&lG HERE TO CHANGE ALL (HOPEFULLY) ELEMENTS WITH A DIFFERENT FONT. USEFUL!
I PUT MY LINKS AND NAVIGATION BARS HERE AS PUTTING THEM ELSE WHERE BREAKS THEM ESPECIALLY THE STICKY HEADER.
<H1>HELLO</H1> PUT YOUR H1 HEADING HERE. YOU SHOULD ONLY HAVE ONE OF THESE. uSE FONT ON H2 IF YOU NEED BIG AND EQUAL SIZED ONES
IT IS SUPPOSED TO BE ONLY ONE BECAUSE IT IS THE MOST IMPORTANT. IT IS LIKE THE TITLE OF THE PAGE i USED TO MAKE MISTAKES AND
PUT H1 IN THE HEADING. dO NOT DO THIS. i DO NOT THINK THAT WORKS GOOD ANYMORE IF AT ALL. iT USED TO BE THAT IF YOU PUT H1 IN THE
HEADING UNDER TITLE AND FOLLOWED EVERTHING SO FAR AS WRITTEN IT WOULD BE FORCED TO DISPLAYUNDER YOUR NAV LINKS
BUT THIS WAS BAD PRACTICE AND CONFUSED TOO MANY BROWSERS LEADING TO ERRATIC RESULTS. NO LONGER OPTIONAL IT MUST GO HERE

<p></p> PUT YOUR P TAGS HERE AND THE REST OF YOUR BODY CONTENT AND IN LINE CSS AND HTML CONTENT.



<H2></H2> SOME H2,P, AND LI TAGS </BODY> END OF VISIBLE CONTENT WHEN YOU USE BODY TAG. YOU WANT TO PUT JAVASCRIPT IN THE BODY OR I BELIEVE IT WILL NOT LOAD.
ALSO PUT FOOTERS OR BOTTOM LINKS HERE AFTER THIS IS THE END HTML TAG AND THE DOCUMENT IS FINISHED.
</HTML> FIN

!----tue 3sep 7:10am---!

As I get more into programming I with use more automated scripts. To make a professional webpage I with use as many languages as possible an glue them all together. For web use I want HTML5 with CSS3 (or later), Javascript, MySql, PHP, and animations with svg and blender. I also want to illustrate cad drawing for engineering and design.

I do alot of writing and worry about save a backup of my website. Initial attempts used Google Drive, HTTrack and viewing webpage source to copy all and save as a text file with html intact. This is not the best approach. I am writing more and more using OpenOffice and saving all my files in either odt or html. Basically my process now is:

  1. I write and edit offline using writer then save it.
  2. I open a new document with html webpage as type.
  3. I copy all from my odt and paste to my blank webpage then save it.
  4. I log into my web provider account at Ionos.
  5. I open my file editor and place cursor at the end of the last entry and then save and save and exit.

This is my preferred method because it accomplishes a lot of things for me. I get a saved plain text version of my writing that I can easily edit, change style, format and a web ready one. Doing this means I do not have to use pretty code or spend a lot of time typing. I have multiple saves of my writing in a finished odt for easy reading and then one that is web ready to post.

Once I have finished editing a long draft in writer it will need no further revisions and stands alone as a completed article or entry. I save this as my hard copy. I then paste it into a blank .html created by writer and it automatically transcribes and encodes my odt into web format code. I then save this without having to proof it because I am confident in the process. This gives me a backup of of my work in case the web sites loses my files, corrupts them, or I have to move to a different provider and do not want to pay for web migration.

Using this is very fast for me and let's me focus on writing instead of coding. This is the first site I have made and do not know what else I can learn html wise because it is so basic. I could get into CSS for styling but feel that is trivial. I want a databsae and a comment section. I can use javascript or PHP for a comments section. Learning C++ is important to me for building software and os tasks so want to focus on that as it is a critical skill.

Parts of this site I hand wrote are simple and legible because I am not doing much. HTML is fairly limited as a language. I want more function and will have to use java libraries and bootstrap more. This will encourage learning more and break out of learning platueas. UI trust using writer because it has less bloat then other text editors. It puts a lot more code in for simple styling making reading and editing already posted code harder. It is verbose but it does not seem to slow loading speeds down and that is what is important. Since these are finalized copies I am simply pasting at the end of each other readability is not a concern. I would be hesitant to use a MS product or some other proprietay software as I would not trust it very much. Because of the verbosity of using editors, it makes you code look bad, and this is why CSS is preferable to HTML as it does not dependent on inline styling but rather cascading sheets. The inline styling of editors is verbose and looks ungly. When I start injecting more code into the site I will try to be as clean as possible but feel that injected javascript or anything else with make pages way more cryptic than just inlinesyles.

I will post code that I use in clean examples so it does not detract from learning.

I will add whatever webtechnologies I find as I build my site but am going to start actively start pursuing C++ and python using arduino and rasberry pi. When it comes to which you should choose the answer is both. Learn both so you have both at your disposal. I believe arduino to be better than rasperry pi for my applications since it will teach me more of what I want, independance from preexisting software.

Arduino is basic but you can build anything with itlike stem projects that are more hardware related. It is harder and closer to learning circuits, wiring and optimization of memory/archituecture/cpu. Raspberry pi is easier and aimed at children, it is a full working computer that deals with software and libraries more. Python and whatever else it uses is more like kiddie script. Do both since sets are cheap and invest in your self. Do not get stuck in one phase of learning or create glass ceilings for yourself. Use the arduino to learn engineering and the pi to relax and take a break from serious stuff.

I spend most of my time editing technical manuals and writing math books so that takes a priority to showing code. I wish I could post a new example of code once a week but unless I fully understand it and have an application in mind I do not see the validity and fear of being fluff. I could show notes from what I am studying in C++ so that might be a consideration.

(hold Ctrl then press a to select all, then c to copy), switch I