\(\LARGE{BASIC~~HTML~~TUTORIAL}\) (Note that more stuff will be added to this tutorial over time)
Lesson 1. \(\large{Tags}\) To use tags, do something like: `<b>Bold text goes here</b>` In this case, the tag `b` makes the text surrounding it bold. The result will look something like this: \(\bf{Bold~text~goes~here}\) Another example: `<i>Italic text goes here</i>` In this case, the tag `i` makes the text surrounding it in italics. The result will look something like this: \(Italic~text~goes~here\) Here's an example of a tag used in context of plain text: `Hello. <i>Italic text goes here</i> And more text after.` In this case, the tag `i` makes the text surrounding it in italics. The result will look something like this: \(\rm{Hello.}\) \(Italic~text~goes~here\) \(\rm{And~more~text~after.}\)
Lesson 2. \(\large{Attributes}\) Some tags have attributes: `<font color="blue">Blue goes here</b>` In this case, the tag `font` with the attribute `color` makes the text surrounding it blue when set to blue. The result will look something like this: \(\color{blue}{Blue~goes~here}\) Here's an example of a tag with attributes used in context of plain text: `Hello. <font color="red">Red text goes here</i> And more text after.` In this case, the tag `font` with the attribute `color` makes the text surrounding it red when set to red. The result will look something like this: \(\rm{Hello.}\) \(\color{blue}{Blue~goes~here}\) \(\rm{And~more~text~after.}\)
Test codes, and create websites with a site I recommend called http://pastehtml.com/ :) Its quite nice for testing out codes before you have a hosting provider.
A reference of tags and their attribute are available at https://developer.mozilla.org/en-US/docs/Web/HTML :)
I do love the MDN.
This was very helpful. Thank you. :D
I agree. :) For anyone who uses http://w3schools.com/ , check out http://w3fools.com/
No problem @mind2000 :)
Please note that there was a slight error at the end of the tutorial, the text should have been in red. The code was fine, just the example wasn't. I apologize.
Lesson 3. \(\large{Important~tags~and~attributes}\) The `img` tage allows you to use images: `<img src="http://URLTOPICTURE/">` In this case, the tag `img` creates an image, and the `src` tag defines it's URL. The `a` tag allows you to link to websites: `<a href="http://URLTOPAGE/">Linked text goes here</i>` In this case, the tag `a` creates a link, and the `href` tag defines it's URL.
I love to use http://www.codecademy.com for any coding purposes, and @dumbsearch2 this is pretty basic xD but good for a first lesson :)
I'm going to add to it. But the BEST WAY to learn is through MDN.
MDN is more of reading though, codec is hands on, it all depends what type of learner you are.
MDN is made by Mozzila, so it's obviously more extensive. I agree with you though, it depends what type of learning you want to do.
MDN can be hands-on, it is just how you utilize it. :P. @dumbsearch2 Maybe create example link for http://jsfiddle.net/ ?
Oh yes! Its quite good for testing codes... I can't believe I forgot about that one!
Yes but codec is built around you actually working on the code right there, IDK i just like it better.
Join our real-time social learning platform and learn together with your friends!