Ultrilliam:
Coding lessons for Elsa
Ultrilliam:
@Elsa213
Elsa213:
huehuehue
Ultrilliam:
Ahoy, are you ready to begin?
Elsa213:
yuss
Ultrilliam:
Goodie, I want to let you know I might have to disappear during this every now and again
Ultrilliam:
Now then, what do you know of syntax?
Elsa213:
Okie nerpp
Ultrilliam:
So you don't know what syntax is? Alright, we will start with this - At is essential in every language, even English. I ask during this you use proper (American) English, Any stray from this and I will not teach you.
Ultrilliam:
Understood?
Elsa213:
Pfft Okay. v.v
Ultrilliam:
Good. Now to start, Syntax is the structure of a language, it must be followed for it to work properly.
Ultrilliam:
Before I show a example of syntax, what programming language would you like to learn? If you want to learn how to make a website - I would recommend we start with HTML
Elsa213:
Which ever language Okay. :3
Ultrilliam:
Alright. Let's begin. To show examples of code, put it in `s like this: \``` Code here \```
Elsa213:
Why three " ` "? o:
Ultrilliam:
Good question!
Ultrilliam:
that is markup, \`\` is already defined for something else, so it is \``` \```
Ultrilliam:
``` <div attributes>div contents</div> ``` <div> and </div> must be there, that is a example of syntax HTML syntax is usually <tag attributes>contents</tag> however for special tags it can be different.
Ultrilliam:
Does that make sense?
Elsa213:
I think so. o:
Ultrilliam:
Good, now lets discuss the blank HTML template. ``` <!DOCTYPE html> <html> <head> </head> <body> </body> </html> ```
Ultrilliam:
the body tag contains what will be what you see on the page, the head tag will contain stuff like stylesheets and javascript as well as meta data, more on that later. All HTML MUST be in the <html> tag Does that make sense?
Ultrilliam:
Elsa?
Elsa213:
e.e Yes.
Ultrilliam:
I will be right back, i'm getting into a class
Elsa213:
Okayy Enjoy. c:
Ultrilliam:
Good, now lets move onto the different tag types: DIV, as the name suggests it divides content into different containers P, this is a paragraph tag SPAN, this is a container tag, it will contain things inline, without dividing H1, H2, and H3, these are header tags, they will style your text into a header like format STYLE, this is a tag for CSS to be SCRIPT, this is a tag for JavaScript to be FORM, this is a tag to contain a form INPUT, a input field IMG, can be used to display images IFRAME, can be used to display other web pages META, can be used to give the page metadata TITLE, to title the page LINK, to include stuff such as CSS indirectly into the page, but also adding a favicon TABLE, this tag is used for tables A, defines a hyperlink B, bolded text CENTER, to center text, however it shouldn't be used. CODE, used to display code UL, a list There are a lot more then this, but I don't want to overwhelm you.
Elsa213:
Do I place that in a code? e.e
Ultrilliam:
what?
Ultrilliam:
Those are the tags for the code <div></div> <h1></h1> <p></p> and so on
Ultrilliam:
Using what I've shown you so far, use the blank HTML document i provided, and put a container tag and a text tag in it, with text in the text tag
Elsa213:
Now you confused me.. e.e
Elsa213:
I tried ;-; Can you give me an example please? c:
Ultrilliam:
Hold on, I'm in a class
Elsa213:
Okay.
Ultrilliam:
``` <!DOCTYPE html> <html> <head> </head> <body> <div> <h1>I am text</h1> </div> </body> </html> ```
Ultrilliam:
now then, open a text editor and paste that into it, hit save and type "test.html" then open it in your browser, what do you see?
Elsa213:
Nothing. e.e
Ultrilliam:
What? You must be doing something wrong ._.
Ultrilliam:
Did you save the file as test.html?
Ultrilliam:
(and were you using notepad?)
Elsa213:
Yes.. Javascript notepad :3
Ultrilliam:
Javascript notepad? What?
Ultrilliam:
What operating system are you using? Windows?
Elsa213:
yes
Ultrilliam:
open notepad
Ultrilliam:
the program notepad, and save the file as test.html
Elsa213:
I did it.. e.e
Ultrilliam:
now open it in chrome
Ultrilliam:
What do you see?
Elsa213:
"I am text"
Elsa213:
e.e
Ultrilliam:
There you go!
Ultrilliam:
That is your introductory lesson, all other lessons will cost 50000$
Ultrilliam:
I kid, I kid! LOL
Ultrilliam:
Now then, try doing one on your own :)
Ultrilliam:
try creating something with HTML based on what I've shown you :) Next i'll show you how to style what you make :P
Elsa213:
There? :3
Ultrilliam:
.... Not quite.
Ultrilliam:
Lemme show you a example of a web page one momment
Elsa213:
Dang it v.v
Ultrilliam:
``` <!DOCTYPE html> <html> <head> <style> #header { top:0; left:0; position:fixed; width:100%; background:#868af3; height:50px; transition:all 500ms; } #header:hover { background:#000; } #logo { position: fixed; left: 0; top: 0; width: 50px; } #header-text { font-family: Comic Sans MS; font-size:25px; color:#fff; position:fixed; top: -15px; transition:all 500ms; left: 35%; } #par1 { left: 10px; position: relative; text-indent: 15px; } #par2 { left: 10px; position: relative; text-indent: 15px; } #paragraphs { position:fixed; top: 50px; font-family:sans-serif; font-size:15px; background: #f1bdb7; width: 100%; left: 0; text-align:left; transition:all 300ms; text-shadow: 2px 2px 5px white; } #paragraphs:hover { } body { background: #f2f2f2 url('images/group-noise.png') repeat; } #footer { position:fixed; bottom:0; background:linear-gradient(#636363, #adadad); padding:8pt; left:0; width:100%; } a:link, a:visited { color: #9d0b3d; text-decoration: none; cursor: auto; transition:all 50ms; } a:link:hover, a:visited:hover { color: #9d0b87; text-decoration: none; cursor: auto; text-decoration: underline; transition:all 50ms; } a:link:active, a:visited:active { color: #0b9d22; transition:all 50ms; } #links-list { position:relative; background: #f1bdb7; font-family:sans-serif; padding: 5px; line-height: 30px; } #links-header { position:relative; background:#faaebb; height:32px } #links-header-text { font-family:sans-serif; position:relative; top:5px; font-size:20px } #links { position:fixed; left:0; top:50px; width: 200px; font-size:15px; } ul { list-style:none; } .link { position:relative; left:5px; } .bgcolor { background-color: #336600; position: relative; top: 42px; z-index: -1; } .tablebg { background-color: #FFFFFF; } .titlegreen { font-family: Arial, Helvetica, sans-serif; font-size: xx-large; font-weight: bold; color: #333300; } .lime { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #99FF00; } .chartreuse { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #CCFF00; font-weight: bold; } .forest { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bolder; color: #006600; } .spring { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #66CC00; } .olive { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #CCCC66; } .bottlegreen { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #33CC00; } .jade { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #33CC99; } .emerald { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #009900; } #table-assignment {} #container {} #ta-body {} #ta-head {} .ta.tr.head.text {} .ta.tr.head {} .ta.td.head {} .ta {} .tr {} .td {} table {} tr,td,th,table,thead,tbody { /*border:1px solid #000;*/ font-family:sans-serif; } td,th { outline:1px solid black; margin:0; padding:0; } </style> <link rel="icon" type="image/ico" href="images/favicon.ico"> <title>Tables Demo</title> </head> <body> <header id="header"> <a href="http://ultrilliam.com/"> <img id="logo" src="images/favicon.ico"></img> </a> <h1 id="header-text">Tables Assignment</h1> </header> <div id="container" style="position:fixed;top:50px;left:0;width:100%;"> <center> <table id="table-assignment" width="80%"> <colgroup> <col span="1" style="background:red;outline: 1px solid black;"> <col style="background:orange;"> <col style="background:yellow;"> <col style="background:white;"> </colgroup> <thead id="ta-head"> <tr> <th><p>Words</p></th> <th><p>Colors</p></th> <th><p>Numbers</p></th> <th><p>Hex</p></th> </tr> </thead> <tbody id="ta-body"> <tr> <td><p>Peanuts</p></td> <td><p>Green</p></td> <td><p>29</p></td> <td><p>#000000</p></td> </tr> <tr> <td><p>Pizza</p></td> <td><p>Blue</p></td> <td><p>125</p></td> <td><p>#ffffff</p></td> </tr> <tr> <td><p>Pineapple</p></td> <td><p>Cyan</p></td> <td><p>00</p></td> <td><p>#ff00ff</p></td> </tr> </tbody> </table> </center> </div> </div> <footer id="footer"> <a href="index.html">Go Back</a> </footer> </body> </html> ```
Ultrilliam:
That is a simple example
Ultrilliam:
well, actually that is more advanced, but still lol
Ultrilliam:
It will give you an idea ^_^
Elsa213:
How will that give me an idea? /.<
Ultrilliam:
It will show you what to structure the HTML like, nest the tags under themselves and create something
Elsa213:
It's confusingg. ;-;
Ultrilliam:
I was afraid you would say that
Elsa213:
I tried and retried but nope
Ultrilliam:
Lemem think about another approach I could go about this
Elsa213:
Thank you. e.e
sammixboo:
Any luck??
Ultrilliam:
I have no idea how to go about this :|
Ultrilliam:
To teach her that is :|
Elsa213:
Because I'm s p e c i a l
Elsa213:
``` <!DOCTYPE html> <html> <head> </head> <body> <div> <h1>Testing Text</h1> </div> </body> </html> ```
Elsa213:
``` <!DOCTYPE html> <html> <head> </head> <body> <div> <b>Test</b> </div> </body> </html> ```
Elsa213:
@Ultrilliam Did I do it correctly? o:
Ultrilliam:
Progress!
Ultrilliam:
now if only it wasn't copy+paste x.x
Elsa213:
The last one wasn't copy paste. o:
Ultrilliam:
ik x'D
Elsa213:
e.e
Ultrilliam:
wow it's been one year for this
Ultrilliam:
Well... I uh
Ultrilliam:
Clearly failed to find a new approach
WeebX:
help
Join our real-time social learning platform and learn together with your friends!
albert14ring:
Can you give me suggestions on the fastest and most organized way to be ready early in the morning to go to school without any confusion or delay? The impor
Twaylor:
how to make good breakfast food ingredients : 1 mother flat bread bananas peanut
lovelove1700:
u00bfA quu00e9 hora es tu clase?Fill in the blanks Activity unlimited attempts left Completa.
glomore600:
find someone says that that one person your talking to doesn't really like you should I take their advice and leave or should I ask the person i'm talking t
Addif9911:
Him I dimmed the light that once felt mine, a glow I never meant to lose. I over-read the shadows, let voices crowd the room where only two hearts shouldu20
EdwinJsHispanic:
Poem to my mom who proved my point "You proved my point, I am a failure. but I kinda wish, you were my savior.
Wolfwoods:
The Modern Princess "you spoke so softly to me, held me close when no one else did, loved me in a way no one else dared to.