HTML lesson #1 and thoughts on learning process #1.

///underconstruction *claminig possession, forgot to login*

you should copy paste this into microsoft office, and add double spaces to it to make easier to read.

λ Always use unicode.

      I can only half garuntee that you will learn something from
this, I reackon the difference would be your commitment and your
underlion filosophies. My spelling and grammar is not the best, and
I'm not a normal person, but I know what I'm talking about. so here
goes, you will get no where without taking notes, and showing and
communicating what you learned with others.

-~-~-HTML notes 1, thoughts on learning. By Jeffrey Eric Gutierrez aka MoonSideMKDS/mƟth∈RNaTi0n!~-~-~

               -~-~-Audience EVERYONE expierence required NONE.-~-~-~-~-~-~

      before learning anything, remember to put time aside for it, to completely focus, simplicity, deep focus on fewer subjects, and understanding why you are doing them, "i.e. I want to design a webpage"; reinforce your understanding even greater with goals; labeled short-term, mid-term, long-term goals.

i.e.

shorterm : I wanna learn basic html.
mid-term : I wanna embed videos, create tables and stylesheets and have multiple web pages for my website/domain.
Long-Term: I wanna show this website to to my peers to get feedback Peer-review, as well as to spread any goodness that I can, etc.

YYY - if you see these 3 Y's, it's something you can skip, or

something you should really read your second time around. The way I teach doesn't just teach you the subject, I will also attempt to show you the way of learning within itself.

Starting off with a general "tip"

Tip: It's important to have two or more ways of referring to something, for the sake of example, say that y is very important in html. we will refer to y by what it's normally called + another name
that is suitable for it, think of header tags for example, in html, another name is headline. A step further will be to add a 3rd, say it outloud, remember what it looks like, etc, take it all in. Don't be
afraid to take extra steps foward and never ever have a doubt with yourself. Doing is understanding.

      These are notes I'm taking for self learning, I will post the

resources I used to learn it, and attempt to write it in a way that communicates the main point. resources I used to take notes on this pastebin.

http://w3fools.com/
http://code.google.com/edu/submissions/html-css-javascript/
http://youtu.be/KIYcgPZqlTk

----------------------------------------------------------------------
------------------------

      HTML is a markup language or formatting language that defines

the meaning, content and structure of a webpage, it's not a

programming language.

   What your silly ass ought'a be learning is not a bunch of fucking

tags and memorizing a clutter-mind fuck number of tags, learn by

methodology, practice, and know WHY and WHAT you will even be doing

with this knowledge, you want to learn HTML because you want to design

a webpage with some flowers on that sun'bitch is a perfect EXAMPLE. I

wanna learn all the tags so I can be HERP DERP EXPERT is not the way,

close this pastebin if you are the latter. learn this MINDSET, it's

IMPORTANT.

                                 Anatomy of html tag

-it is made up of elements, they have attributes, and they are nested in heirarchy.
-An element is the basic unit of html.
-opening tag, with attributes, content and closing tag, not all have closing tags.

"nested" in this sense; you can nest these elements to form a tree or a hierarchy.

exempli gratia; paragraph element; The first example seperated by ---'s shows a sort of "blank" element with no real known values, the second shows how the "paragraph" element would fit in-stead of the

blank element.
example 1:
---------------------------
<tagname attribute="value">
content
</tagname>
---------------------------
example 2:
---------------------------
<p id="id" class="classname">        ←p with opening tag.
Lorem ipsum dolorem...
</p>                                 ←p with closing tag.
---------------------------

p = paragraph element, and it goes in these → < >
/  ←put this son of a bitch in there if it's the closing tag.

i.e. (in order)

p
< >
<p>
</p>

      id and class are "attributes", you must differentiate elements, and
attributes, kay?  they are to differentiate elements, so class and id
are not elements, rather they are attributes that are used to
manipulate elements using css and javascript, which I will also learn
and then teach you what I learned, etc.

Definition of data: Think of an item in a store, and the number they have in stock. Think of several items,

item 1, item 2, item 3. item 1 has 3 of the blue in stock, and 1 of of the red. item 2 is sold out.
item 3 is pending an order.

      This is more or less the data on these item sets, for the sake
of conceptual understanding, leaning more towards computer science a
Definition of data would be more strict and vigorious as with any
informal language.
      They would be the abstractions, behind the letters and the
numbers. think of the placement holder, better yet, compare it to the
definition of content. There are data types, i.e. integer and boolean
datatypes, hexadecimal datatypes. strings. they're all values.
definition of content: What goes on the page, eg pictures,

PROTIP: MAKE IT ORIGINAL CONTENT, FAGGOT.

      As I was saying, here is a compare contrast, this is by no means a professional definition of either word, but rather a way to conceptulize it, as it is important, if you want the strict, rigerous
definition, marriem webster dictionary, stackoverfloow, google, etc. THIS IS VERY WATER DOWNED.

Content.
1.) Apple. 2.) orange.
Data.
tttsappletsnttsorange

where t is token, s is space, orange and apple remain unchanged for sake of example. This is water-downed definition. remember this, just there to remind you that behind what you put on your webpage there are things known as nodes, data type and structure, semantics, etc. Protip: Simplicity, meaningful focus, meaning and purpose, have these things you can learn anything.

so we write our HTML first, for any document.

now, how to use HTML. The purpose? to do it in the best way possible, anyone can write html, fewer can write good html, even fewer? great html. The best HTML writer? Could be you! We let our data, or content inform the markup we use. the best approach - html first focus only on the markup reflects meaning of underlying content, once you move onto css, then you focus on it's presentation.

HTML → Semantics/meaning (not the looks)
CSS → Presentation (the looks)

                                         Conveying the meaning.

                                   headlines/headers, from h1, to h6.

      Think of it like a figure 8, the way artist draw human bodies. and
always keep in mind the order they come in is important, these are not to display a font size, thats a presentation purpose, that is CSS, this is HTML, the structure, meaning and SEMANTICS.

good - h1 → h2 → h3 → h4 → h5 → h6 →
bad  x h2 ← h1 → h6 → l0letc.

do it in order. like the author in the video, "think of it as a term paper for high school". Have sections before sub-sections. Don't use these to declare a font size, that's what css is for. Here are more elements, unordered list, ordered list, and anchor/link

element.

<ul>
    <li>Item 1</li>
    ....
    <li>Item 2</li>
</ul>

      This is a list element, "ul" element contains "li", li is used when few amounts of items will be presented, i.e. a list of all the girlfriends you ever had. ;D  or better yet, since we disregard order,
we will put the girlfriends I had, if we wanted to list the girlfriends of Jeff we would have no choice to use UL element because the order he dated tem doesn't exists, because he cheated on them and went with multiple partners at the same time, an act of adultery Jeff formely and informely regrets both rationally and emotionally. ):< number of items is not significant. All the items are of equal important, therefor, the order is not important.

      An example of an ordered list where order is significant, simple difference (ul, ol); I.e. a list of the greatest people on xat. for example.

<ol>
   <li>jeff</li>
   <li>jeff</li>
   <li>jeff</li>
   ...
</ol>


      Concept of a link element or anchor element is extremely important,
HTTP and links make the web go, but the concept of an anchor is so
crucial, that I can think of no better way to express it than that of
the power bracelet, your mind is crippled if you do not understand
this very fundemental concept; it relates to so many things in our
life, not just HTML.
      We put beeds on a string to create a power bracelet, each beed has a
special meaning. say you woke up the next day after you created it, how would you remember the order, or the placement of each beed? you wouldn't, you would need to apply an anchor beed to it. So the order
is remembered by the MIND.


<a  ←anchor
<href ←attribute to be added.
...
put together.
...
<a href="url">

Where url stands for "uniform resource locator".

i.e,

<a href="http://www.aliasnation.org/">

The browser will display a link, upon clicking it will take you to said webpage.

            VULNERABILTIY ANALYSIS:

understand that the act of clicking, causes your browser to navigate
to another page, think of what the term url stands for, now think of
how that can be manipulated against you, the number of ways is
countless, you could have something on your computer that redirects
you to an attack page where corrupt files are attempted to be
downloaded on your comp, or you could be redirected to a false
"customer information page" as in philse attacks, or the information
you send to the server/website is logged via the device your using,
you click, and if the person who created the url is good enough he
could derive your ip, computer name, and many other vulnerabilities,
understand that importance of mouse clicks is so important that it
generates, influences and circulates $$$CASH MONEY$$$. Do not be
stupid, or better yet, do not be a person like me, who does not care
about security and puts himself in harms way. That's how you get hurt.


example.

<a href="ChocoSannloveeachotherinthebutt.com"></a>

always eyeball what you write, and assume the mind-stance that others
are watching you, your friends, girlfriend, peers, rivals, enemies,
teachers, and ask yourself what they would say if they looked at your
work.

                       Presentation and Content, also, more tags.


<em>Emphasis</em>
<i>Italic</i>
<b>bold</b>
<strong>strong</strong>

difference between em and strong vs b and i is about the relationship
between presentation and content; one of the relationships that was
closer inspected upon paradigm shift. i can only show emphasis, the em
tag however, has properties about it that correspond to an audio
aspect/component.

protip: nothing is learned for good, lots of things change, there
meanings become absolete, it is important to evolve and move with the
times and to be able to change and adapt at a whim. One way to think
of this is to think of a pianist, a good pianist can play on any
piano/keyboard and make it sound brilliant, a wrong-learner is so use
to the curvurture of the piano itself, he is so use to sitting in the
same chair, performing the same shoulder thrust for a forte piano-
stab, that when you get this poor bastard in front of a concert where
a new piano is presented to him, he doesn't know what the fuck he's
doing and he sounds horrid. It's the difference between vladimir
horowitz and your average youtube pianist, and the understanding that
at the top, there is no greatest, there is only a deligant variance.
truth be told, this is a simple belief, and I am simply ascribing to it.

browsers render them the same visually.

b and i refer to the qualia. "your color is red"
em and strong refer to the quantitative qualia.

Reason they exists : seperating content from presentation. (: i.e. screen readers see em tags as a rise in pitch, audio vs visual. Browsers interpret html and display it, they each do this with differences,

Thanks to google web developers,

/webdev-course/utilities/tags-meaning.html<this link probably only works in chrome, i'd attatch an /search?=btnI=1 and  http://www.google.com to it just incase. http://www.google.com/search?=btnI=1/webdev-course/utilities/tags-meaning.html

The anatomy and HTTP are seperate, but defanantly useful basis of knowledge for anyone interested in the internet, web design and practice.


The table element, contains tr,th,td elements. A table is useful for many things, an example of a good table, i.e. tabular data; for example, my mario kart 64 timesheet which can be found here that shows you I'm the ill-refuted united states champion since december 2004, I feel that it is important to point out that tables are often referred to in themselves, that is, they are rarely spoken as being elements, even though they are, in spoken it is, "this is a table" as opposed to, "this is a table element"; which is unusual to say the least.

tr = rows ←element
td= columns  ←element

tables are often misused,

http://www.mariokart64.com/mk64/timesheet.cgi?JeffreyGutierrez

use your web developer tools to "inspect the webpage, to see how the elements align and such, here is a foto of me doing it.

http://i1291.photobucket.com/albums/b557/MoonSideMKDS/tabledemonstration.png

an example of a bad table is using it as the structure of your entire website, the layout of your webpage is about how it is presented and viewed, ring any bells? CSS. yes. Here is the code for a bad table, don't distribute.

///from anonymous google developer.

<table>
  <tr>
   <td>Left Nav</td>
   <td>Main Content</td>
   <td>Side Bar</td>
  </tr>
</table>

there using a table to accomplish a 3 coloumn layout, but layout is a property of how content is presented. it has no place in html, this is a job for  css.



if you wanted to use a table for that purpose, that is a job for css. HTML isn't about how it is presented, html is about the meaning/semantical structure.There are far more HTML elements. Google keywords = "HTML reference".Also this, the ones in blue are bad examples of tags in html, the yellow are good. It's all about the relationship between qualia and quantity, presentation and meaning, remember, html = semenatics/meaning/structure and content css = visuals/presentation. know the difference, tell the difference and have good judgement when creating and developing the web, it's no different than being a good

driver, (no I can't drive worth shit, only on video games l0l I can derive however, if that makes up for it. ;D)

line breaks and div elements.
br              <div>

br drops to the next line, *try it and get it*; can be used to convey meaning or presentation, your awareness of this fact will become clear upon expierence and practice and doing.

if you are using polynomial amounts of line breaks to create additional space between two parts of content, then you are using it wrongly,

you should use <div> or <p> for polynomial amoutns of line breaks or to create different sectors. Then use css to control the space and time between them.

Finally...

THere are different types of html.

HTML 5, HTML 4, etc.

you use doctype to declare which version or type of html you are using,  you can use it for a validator to see if it fallows the rules,

http://www.w3.org/

the minimal (HTML5) doctype.

<!DOCTYPE html>

And to end, there will be no "blank html template" posted here, for that is a bad approach, I promise. <3

Also, learning how to use google is also important, you can find searching guides using google directly at google (duh!) or here, where there are also many other amazing resources; hands down, one of the
best resources on the net, and yes it comes from 4chan, and yes I utterly adore and support 4chan in all ways for it is dear to me and treasured my emotional state when I was but a basement dwelling virgin
nerd faggot, now I am just a basement dwelling non-virgin nerd faggot yes, a digital human yes, yes.

https://sites.google.com/site/scienceandmathguide/

goto → google → search "4chan" → click on 4chan → go to /sci/ board on

top of the page where all the boards are listed. → scroll down a couple units and it should present itself as the first stickied post, a link to an absolutely brilliant collobration of information.

      My advice:

      Do not attempt to memorize rote, or "tag names" values, or be

someone who learns by memorizing a lot, remember, that doing is

understanding, the creator of the video places amazing emphasis on

this notion that originated from well known philospopher Aristotle,

keep it simple, know what you want to do or construct and keep it

close to heart, and always remain posistive about it.

      headsup : learn what unicode is, all websites that have a search

bar on the right of the page should be reported to the cyber police

and cyber fbi.

practicing and doing excersizes might be helpful but nothing is a

substitute for the actual doing, create a website, with an original

idea behind it. Make it your job to do this, and you won't need

practice because your life would there-in depend on it. making the

learning process auto-suggestive.

In the next lessons, I will begin working on my webpage;

aliasnation.org, adding content and purpose and finalizing it while

corresponding to these learning sessions. I will spread the good word,

and create something fine from it. In time, all wounds will heal.λ

God Bless,

-Jeff.