Applet Orchard

HTML 5 Tutorial

[ad_1]
Get Cheat Sheet Here :
Best Book on HTML5 :

Support Me on Patreon :

Everything you can do with HTML 5 and provide numerous examples using CSS, JavaScript and PHP.

00:32 DOCTYPE HTML URL
01:52 HEAD META CHARSET REDIRECT
03:14 DESCRIPTION KEYWORDS ROBOTS
04:45 SCRIPT BASE LINK STYLESHEET
05:45 ICONS TITLE
06:42 VALIDATE HTML5
07:15 BODY ONLOAD DIV WRAPPER
08:16 NOSCRIPT H1 P BR HR
09:23 BLOCKQUOTE CITE Q
10:14 PRE CODE
11:21 JavaScript :
onclick getElementsByTagName innerHTML HexCode
13:44 IMG ID SRC ALT WIDTH HEIGHT
14:36 B STRONG EM I
15:10 SMALL INS DEL SAMP
15:30 ABBR TITLE DFN KBD
16:49 Character Entities
17:35 SUP SUB BDO RUBY RT
18:29 LINKS A HREF
19:01 Link Active States CSS
20:06 CSS background IDs margin
21:12 Linking within Page
22:43 mailto
23:04 JavaScript :
Execute onclick toggle visibility
24:53 Making Image Maps with GIMP
27:15 OBJECT DATA TYPE PARAM Embedding
28:50 Everything you can embed
29:11 IFRAME
29:32 EMBED Flash Plugins
30:05 AUDIO
30:36 VIDEO
30:55 HEADER
31:42 NAV Navigation
32:02 MAIN SECTION ARTICLE ASIDE
33:55 ORDERED & UNORDERED LISTS OL UL
35:36 CSS :
float display padding # text-decoration
38:09 DEFINITION LISTS DL DD DT
39:19 list-style-type for lists
39:56 ORDERED LIST TYPES
40:58 TABLES :
caption thead tr td colspan tfoot tbody
43:51 FOOTER ADDRESS SMALL
44:38 FORMS & PHP GET POST
45:10 Processing Forms with PHP
45:44 INPUT TAGS
47:51 TEXTAREA
48:29 FIELDSET LEGEND
48:49 CHECKBOX
49:18 RADIO BUTTONS
49:55 SELECT BOX OPTION OPTGROUP
51:02 HIDDEN
51:20 UPLOAD FILES
51:37 IMAGE BUTTON
51:59 CANVAS & JavaScript
1:05:14 JavaScript :
geoLocation & localStorage

Posted

in

by

appletorchard

Tags:

Comments

36 responses to “HTML 5 Tutorial”

  1. Protyoi Chakraborty Avatar
    Protyoi Chakraborty

    I was wondering if i should go by the cheat sheet first and then actually go with the video, would that be useful regarding that I am a beginner?

    Reply
  2. Elon Aseneka Avatar
    Elon Aseneka

    Derek is just awesome, I mean how do you grasp all these things?

    Reply
  3. Dark GT Avatar
    Dark GT

    I need to re-watch it 80-90 times more, but I think I got the basic.

    Reply
  4. Helene Ready Avatar
    Helene Ready

    Very nice thank you very much

    Reply
  5. Witty Humour Avatar
    Witty Humour

    content=" 3; url=redirect.html"> ???
    HEAD META CHARSET REDIRECT @ 01:52 !!!!
    I am fairly new at this and Cant find any explanation on HEAD META CHARSET REDIRECT ???
    Can anyone Help

    Reply
  6. Niteesh Harshavardhana Avatar
    Niteesh Harshavardhana

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body{
    background-color:lightblue;
    }
    p{
    color:darkblue;
    text-align:centre;
    font-family:Times
    font-size:60px;
    }
    </style>
    </head>
    <script>
    function myfunction() {
    var x = document.getElementById("demo");
    x.style.display="block";
    x.style.color="lightgreen";
    x.style.fontFamily = "ComicSansMS";
    x.style.fontSize = "125px";
    x.innerHTML="Javascript is the best";
    }
    function myotherfunction() {
    var y=document.getElementById("lol");
    y.style.display="block";
    y.style.color="violet";
    y.style.fontFamily="Zapfino";
    y.style.fontSize="60px";
    y.innerHTML="there are 3 types of people in this world,people who are good at maths,and people who aren't";
    }
    function joke() {
    var j = document.getElementById("lol");
    j.style.display="block";
    j.style.fontSize="300px";
    j.style.fontFamily="Zapfino";
    j.style.color="violet";
    j.innerHTML="you";
    alert("you")
    }

    </script>
    <body>
    <p>click <a href="https://scratch.mit.edu/users/CaptainSparten6"&gt; here </a>to go to my scratch profile</p>
    <p id="lol" style="display:none">Niteesh is the best</p>
    <marquee>press the buttons!</marquee>
    <p id="demo">JavaScript(MADE BY NITEESH)</p>
    <button type="button"onclick='document.getElementById("demo").style.fontSize="100px"'>Enlarge</button>
    <button type="button"onclick='document.getElementById("demo").style.fontSize="40px"'>Shrink</button>
    <button type="button"onclick='document.getElementById("demo").style.color="yellow"'>Yellow</button>
    <button type="button"onclick='document.getElementById("demo").style.color="darkblue"'>Blue</button>
    <button type="button"onclick='document.getElementById("demo").style.display="none"'>Hide</button>
    <button type="button"onclick='document.getElementById("demo").style.display="block"'>Show</button>
    <button type="button"onclick='document.getElementById("demo").style.color="purple"'>Purple</button>
    <button type="button"onclick=myfunction()>Show,Enlarge,change font,change text and change color all at once</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Times"'>Change font to Times</button><button type="button"onclick='document.getElementById("demo").style.fontFamily="ComicSansMS"'>Change font to ComicSansMS</button>
    <button type ="button"onclick='document.getElementById("demo").innerHTML="Thanks JavaScript"'>Change text</button>
    <button type="button"onclick='document.getElementById("demo").innerHTML="JavaScript(MADE BY NITEESH)"'>Change text back</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Menlo"'>Change font to Menlo</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="American Typewriter"'>Change font to American Typewriter</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Avenir Next Condensed"'>Change font to Avenir Next Condensed</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Luminari"'>The best font ever!(Luminari)</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Savoye LET"'>Another great font(Savoye LET)</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Courier New"'>Change font to Courier New</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Marker Felt "'>Change font to Marker Felt</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Didot"'>Change font to Didot</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Noteworthy"'>Change to a "Noteworthy"font(XD puns for days).</button>
    <button type="button"onclick='document.getElementById("demo").style.color="lightgreen"'>Change color to light green</button>
    <button type="button"onclick='document.getElementById("demo").style.color="darkgreen"'>Change color to darkgreen</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Superclarendon"'>Change font to superclarendon(lol wut)</button>
    <button type="button"onclick='document.getElementById("demo").style.color="violet"'>Change color to violet(it look like pink tho)</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Zapfino"'>Change font to Zapfino</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Futura"'>Change font to Futura</button>
    <button type="button"onclick='document.getElementById("lol").style.display="block"'>Show additional text</button>
    <button type="button"onclick='document.getElementById("lol").style.display="none"'>Hide additional text</button>
    <button type="button"onclick=myotherfunction()>Change everything about the additional text</button>
    <button type="button"onclick='document.getElementById("lol").style.fontSize="20px"'>Shrink additional text</button>
    <button type="button"onclick='document.getElementById("lol").innerHTML="Niteesh is the best"'>Change additional text back</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Futura"'>Change additional text font to Futura</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Luminari"'>Change additional text fnt to Luminari</button>
    <button type="button"onclick='document.getElementById("lol").style.color="darkblue"'>Change additional text color to dark blue</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Zapfino"'>Change additional text font to Zapfino</button>
    <button type="button"onclick='document.getElementById("lol").innerHTML="There are 3 types of people in this world,people who are good at maths,and people who arent"'>Change additional text text(Exploding Head on Google Android 8.0)</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Menlo"'>Change additional text font to Menlo
    <button type="button"onclick='document.getElementById("lol").style.color="darkgreen"'>Change additional text color to dark green</button>
    <button type="button"onclick='document.getElementById("lol").style.color="purple"'>Change additional text color to purple</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Didot"'>change additional text font to Didot</button>
    <button type="button"onclick='document.getElementById("lol").style.color="violet"'>Change additional text font to violet(it looks like pink)</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Savoye LET"'>Change additional text font to Savoye LET</button>
    <button type="button"onclick=alert("memes")>One does not simply….</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Trebuchet MS"'>Change additional text font to Trebuchet MS</button>
    <button type="button"onclick='document.getElementById("demo").style.fontFamily="Trebuchet MS"'>Change font to Trebuchet MS</button>
    <button type="button"onclick=joke()>Let the additional text tell you a joke</button>
    <button type="button"onclick='document.getElementById("lol").style.fontFamily="Superclarendon"'>Change additional text font to superman</button>
    </body>
    </html>

    rate my html from 1-10(by the way,i'm only 10 years old)

    Reply
  7. Diego Ponciano Avatar
    Diego Ponciano

    Wow minute 12 and already learned a bunch of stuff I was giving for granted!

    Reply
  8. John Mahugu Avatar
    John Mahugu

    awesome tutorial bro

    Reply
  9. Андрей Кошкаров Avatar
    Андрей Кошкаров

    Thanks. Likes your video for compressed info

    Reply
  10. Ken Sarowiwa Avatar
    Ken Sarowiwa

    how to get start up files?

    Reply
  11. Rocky CPE Avatar
    Rocky CPE

    I watched the whole video and now know the scope what html5 can do.

    Reply
  12. Aankur Choudhary Avatar
    Aankur Choudhary

    These videos are good for revision but not if you are new to this.

    Reply
  13. George Zhu Avatar
    George Zhu

    Isn't it unsafe to use GET method to transfer password?

    Reply
  14. Andy Godfrey Avatar
    Andy Godfrey

    Don't think this could be done any faster. A lot of good info here. I learned a lot from this. Thanks.

    Reply
  15. Louie Padilla Avatar
    Louie Padilla

    I enjoyed watching this video. I know some programming (beginner level) but this has opened up doors to what other functions HTML and JavaScript can do. Thanks for the video!

    One question. What would you recommend when starting a new task? Where should I start?

    Reply
  16. Mike Preset Avatar
    Mike Preset

    Thanks for the tutorial. I like especially how dynamical the tutorial is- not boring/no useless sentences…

    Reply
  17. Patrick O'Dea Avatar
    Patrick O’Dea

    I watched the whole thing 🙂

    Reply
  18. Surajit Das Avatar
    Surajit Das

    Thank you so much for all of your videos you've made for us. Really appreciate it. It will be great if you could get time and made tutorial for """""""""""PSD TO HTML conversion""""""""""" Thanks Again.

    Reply
  19. Swagi has more swag than you Avatar
    Swagi has more swag than you

    what a legend. the amount of work and effort you put in to teach people how to code is heartwarming.

    Reply
  20. Speedo Avatar
    Speedo

    This video is really everything.
    Just to mention, in your cheat sheet, in the randomchangecolor.js you write "img.style.visibility !== "visible";" with a double equation symbol.

    Reply
  21. Danilo Souza Moraes Avatar
    Danilo Souza Moraes

    hey man ive been following your channel for about 4 years now and its been a pleasure. I learned java from you. I also learned html4 a long time ago and had to learned whats new in html5 for a new project. your video is perfect as always. I never have to question myself if there is a different tag for anything cause you just go through everything. Thanks!

    Reply
  22. Hyo9000 Avatar
    Hyo9000

    I watched it!

    Reply
  23. Cae King Avatar
    Cae King

    Between Derek, Alex (phpacademy) and Bucky at thenewboston. I have learned everything I need to know to design a decent website. Now it's just about getting in some practice and creating a portfolio! Thanks Derek!

    Reply
  24. Antun Hanjilec Avatar
    Antun Hanjilec

    You are f*cking awesome. You explain everything, talk without "aa" ,"ooo"… It is easy to follow you. Thank you for your time. =)

    Reply
  25. John Nunez Avatar
    John Nunez

    Hi Derek, Thank you for the great tutorial. I had an issue with the onload command – WC3 did not validate it? any ideas?

    Reply
  26. Ada Nunez Avatar
    Ada Nunez

    Amazing!!! The only thing I didn't understand is how you use the canvas. Once you made your whatever you made, how do you make it clickable, or how do you retrieve it to use parts of the creations? Or it is just passive stuff?
    Anyway, I'm learning PHP with no html knowledge beforehand, I know I have a long way to go but this was a very useful overview.
    Thank you very, very much.

    Reply
  27. Яна Богданова Avatar
    Яна Богданова

    These videos are great! Usually when I watch tutorials I have to speed them up, but in this channel everything is just great. And in this video I finally see the connection between css, javascript ,php and html. Thank you, Derek!

    Reply
  28. Pat Wicker Avatar
    Pat Wicker

    Derek, if you wanted to create say an online photo album with 100's of pictures, what would you use for storing the pictures? SQL? If so can you show how to code that from HTML?

    Reply
  29. Alan Coates Avatar
    Alan Coates

    Yes, I watched it all! (In 3 sittings) Thanks for an illuminating walk through of HTML5.

    Reply
  30. Nikos King Avatar
    Nikos King

    Derek you are great! 🙂

    Reply
  31. MATEUSZ CZECH Avatar
    MATEUSZ CZECH

    watched it all

    Reply
  32. Oliver Freeman Avatar
    Oliver Freeman

    Thank you, Derek. This was very useful, and yes, I watched it until the end.

    Reply
  33. Oussama Single Avatar
    Oussama Single

    this video is not for really beginner !

    Reply
  34. Vee Son Avatar
    Vee Son

    Man I love these videos

    Reply
  35. rm187loco Avatar
    rm187loco

    Great video please do more videos tips and tricks on coding and common pitfalls newbies will face Thanks

    Reply
  36. Brian Horn Avatar
    Brian Horn

    Excellent, just what i needed. I never realised html was so easy lol

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *