Ask your own question, for FREE!
OpenStudy Feedback 16 Online
OpenStudy (dumbsearch2):

\(\LARGE{BASIC~~HTML~~TUTORIAL}\) (Note that more stuff will be added to this tutorial over time)

OpenStudy (dumbsearch2):

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.}\)

OpenStudy (dumbsearch2):

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.}\)

OpenStudy (dumbsearch2):

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.

OpenStudy (dumbsearch2):

A reference of tags and their attribute are available at https://developer.mozilla.org/en-US/docs/Web/HTML :)

OpenStudy (opcode):

I do love the MDN.

OpenStudy (mind2000):

This was very helpful. Thank you. :D

OpenStudy (dumbsearch2):

I agree. :) For anyone who uses http://w3schools.com/ , check out http://w3fools.com/

OpenStudy (dumbsearch2):

No problem @mind2000 :)

OpenStudy (dumbsearch2):

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.

OpenStudy (dumbsearch2):

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.

OpenStudy (ja1):

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 :)

OpenStudy (dumbsearch2):

I'm going to add to it. But the BEST WAY to learn is through MDN.

OpenStudy (ja1):

MDN is more of reading though, codec is hands on, it all depends what type of learner you are.

OpenStudy (dumbsearch2):

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.

OpenStudy (opcode):

MDN can be hands-on, it is just how you utilize it. :P. @dumbsearch2 Maybe create example link for http://jsfiddle.net/ ?

OpenStudy (dumbsearch2):

Oh yes! Its quite good for testing codes... I can't believe I forgot about that one!

OpenStudy (ja1):

Yes but codec is built around you actually working on the code right there, IDK i just like it better.

Can't find your answer? Make a FREE account and ask your own questions, OR help others and earn volunteer hours!

Join our real-time social learning platform and learn together with your friends!
Can't find your answer? Make a FREE account and ask your own questions, OR help others and earn volunteer hours!

Join our real-time social learning platform and learn together with your friends!