Want to learn some HTML? by tbaumer2

View this thread on: hive.blog | peakd.com | ecency.com

technology · @tbaumer2 · Nov 22 '17 (edited)

$0.58

Want to learn some HTML?

<html>
<h3>Introduction</h3>
<p>Hello Steemians! I was recently encouraged to begin teaching people about the basics of code. In this lesson, I'd like to go over the basics to HTML. Please feel free to leave a comment on anything I missed in this blog. One note before I begin: If you're familiar with writing these posts and have ever written a post using the "Raw HTML" editor, then this will appear very similar!</p>
<p><img src="http://www.innovafire.com/sites/default/files/blog/html.jpg"/></p>
<h3>The Basics</h3>
<p>Firstly, HTML stands for Hyper-Text-Markup-Language</p>
<p>To begin an HTML document, start with this template and save the file as a .html file. &lt;-- Very important</p>
<p><code>!DOCTYPE html</code>&lt;-- Indicating an HTML document</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<code>html</code>&lt;-- The beginning of a document</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<code>head</code>&lt;-- The part of an HTML document where all image references, stylesheet references, and more are stored. (More on this later)</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<code>/head</code></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<code>body</code>&lt;-- The part of an HTML document where all actual code exists!</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<code>/body</code></p>
<p><code>/html</code></p>
<p><br></p>
<p>&nbsp;In HTML, you write with tags. For instance, if I wanted to make a paragraph on a website, I'd use the "p" tag. Most tags have a beginning AND an end tag. The tag of any element you're writing in starts with a less-than symbol, (&lt;) then the tag name, (p) and lastly a greater-than symbol. (&gt;) After this tag, your content would be written. Once you have everything you want after the tag, you have to indicate to the HTML wizards that the line is ended. To do this, you must do the following: Start the same way with the beginning tag, but insert a backslash before the name of the tag. If I am terrible at explaining things, which I know I am, this example may offer some help:</p>
&lt;p&gt;</em>Hello World!<em>&lt;/p&gt;
<p>This would print out as:</p>
<p>Hello World!</p>
<p><br>
Here are some necessary tags to learn/memorize. Don't worry - the more you use/write in the language, the easier it becomes. There are <em>hundreds </em>of tags in HTML. Nobody expects anyone to memorize them all. In all coding languages, Google is your best friend!</p>
<ul>
  <li>div - Serves as a separator for different lines</li>
  <li>span - Serves as an inline separator</li>
  <li>a - Hyperlink tag - click <a href="https://www.w3schools.com/TAGs/">HERE </a>is an example
    <ul>
      <li>Example: <a href="domain to go to">CLICK ME</a></li>
    </ul>
  </li>
  <li>img - Image tag - used for inserting images into a website
    <ul>
      <li>An image tag is a special exception to me saying that "Almost all tags have an ending tag." Do NOT put at the end!</li>
    </ul>
  </li>
  <li>h1 - Largest sized heading
    <ul>
      <li>Note: h1, h2, h3, h4, h5, and h6 are all different sized titles on a website. Note: the heading tag only goes from 1-6!</li>
    </ul>
  </li>
  <li>p - Ordinary text tag - This post was written with p tags everywhere!</li>
  <li>hr - horizontal divider on a website</li>
  <li>br - use inside of a text tag to move text to a new line</li>
</ul>
<p>These are just a few tags that are most frequently used in HTML. <a href="https://www.w3schools.com/TAGs/">This website</a> features many of the available tags in HTML. Here is an example of a good HTML skeleton. Make sure to add structure to your work. (I'll be going over this in more detail later)</p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/HTML_source_code_example.svg/1280px-HTML_source_code_example.svg.png" width="1280" height="1016"/></p>
<h3>A Challenge:</h3>
<p>Today, tomorrow, and for the next week, my challenge to fellow Steemians reading this blog: I challenge you to try writing your blogs WITHOUT the text editor; try writing them in HTML for the week! If you are able, feel free to comment a link to your post!</p>
<h3>Conclusion</h3>
<p>If you have any questions, comment them! I'll answer as quickly as possible. If you liked this new type of post, please comment and upvote! I'd also love some feedback :)<br>
<img src="https://steemitimages.com/DQmWpisRXDF56mV3DgzzPUxb3R2ozseR48YVr2YKtwtrBcV/DQmWpisRXDF56mV3DgzzPUxb3R2ozseR48YVr2YKtwtrBcV.gif" width="480" height="270"/></p>
<p>Sources:</p>
<ul>
  <li><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/HTML_source_code_example.svg/1280px-HTML_source_code_example.svg.png">Source 1</a></li>
  <li><a href="http://www.innovafire.com/sites/default/files/blog/html.jpg">Source 2</a></li>
</ul>
</html>

👍 dv8, bumper, businessbot, moonbot, nairadaddy, valorforfreedom, perennial, originalworks, steemitqa, businesswri, ubg, asksteem, businessquo, sosmeditations, tbaumer2, curiositybot, samhughes, marnix1

`author`	tbaumer2
`permlink`	learning-html-blog-1
`category`	technology
`json_metadata`	"{"tags":["technology","science","code","html","steemit"],"image":["http://www.innovafire.com/sites/default/files/blog/html.jpg","https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/HTML_source_code_example.svg/1280px-HTML_source_code_example.svg.png","https://steemitimages.com/DQmWpisRXDF56mV3DgzzPUxb3R2ozseR48YVr2YKtwtrBcV/DQmWpisRXDF56mV3DgzzPUxb3R2ozseR48YVr2YKtwtrBcV.gif"],"app":"steemit/0.1","format":"html","links":["https://www.w3schools.com/TAGs/","domain to go to","https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/HTML_source_code_example.svg/1280px-HTML_source_code_example.svg.png","http://www.innovafire.com/sites/default/files/blog/html.jpg"]}"
`created`	2017-11-22 19:32:45
`last_update`	2017-11-22 20:53:54
`depth`	0
`children`	14
`last_payout`	2017-11-29 19:32:45
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.538 HBD
`curator_payout_value`	0.045 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	4,686
`author_reputation`	180,675,398,363
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,230,109
`net_rshares`	234,231,524,668
`author_curate_reward`	""

properties (23)vote details (18)

voter	rshares	pct
ubg	220,344,563	1%
steemitqa	2,590,732,427	6%
asksteem	130,514,339	100%
businesswri	2,143,433,202	6%
originalworks	3,991,773,351	1.5%
perennial	6,086,822,018	39%
valorforfreedom	7,836,729,762	100%
dv8	104,686,647,044	100%
samhughes	51,652,643	100%
curiositybot	52,266,996	100%
tbaumer2	52,687,453	100%
businessquo	95,673,141	100%
businessbot	27,210,964,207	100%
moonbot	11,732,500,838	6%
nairadaddy	8,080,759,742	22%
sosmeditations	81,778,127	100%
bumper	59,186,244,815	100%
marnix1	0	100%

@haxmat · Nov 22 '17 (edited)

Just a bit of Advice, If you are going to do this again... Please make the text work for people that use dark and light mode. I found it hard to read

👍 bumper, businessbot, asksteem, businessquo, sosmeditations

`author`	haxmat
`permlink`	re-tbaumer2-learning-html-blog-1-20171122t193701965z
`category`	technology
`json_metadata`	{"tags":["technology"],"app":"steemit/0.1"}
`created`	2017-11-22 19:37:03
`last_update`	2017-11-22 19:37:18
`depth`	1
`children`	4
`last_payout`	2017-11-29 19:37:03
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	149
`author_reputation`	138,308,411,475
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,230,484
`net_rshares`	1,790,034,150
`author_curate_reward`	""

properties (23)vote details (5)

voter	rshares	pct
asksteem	130,514,339	100%
businessquo	95,673,141	100%
businessbot	425,171,315	1.5%
sosmeditations	81,778,127	100%
bumper	1,056,897,228	1.5%

@tbaumer2 · Nov 22 '17

The whole post just got erased.

properties (22)

`author`	tbaumer2
`permlink`	re-haxmat-re-tbaumer2-learning-html-blog-1-20171122t193933503z
`category`	technology
`json_metadata`	{"tags":["technology"],"app":"steemit/0.1"}
`created`	2017-11-22 19:40:36
`last_update`	2017-11-22 19:40:36
`depth`	2
`children`	3
`last_payout`	2017-11-29 19:40:36
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	31
`author_reputation`	180,675,398,363
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,230,771
`net_rshares`	0

@haxmat · Nov 22 '17

Well, That is Really, **REALLY** weird. have you tried editing it to put the content back?

👍 bumper, businessbot, asksteem, businessquo, sosmeditations, samhughes

`author`	haxmat
`permlink`	re-tbaumer2-re-haxmat-re-tbaumer2-learning-html-blog-1-20171122t194219353z
`category`	technology
`json_metadata`	{"tags":["technology"],"app":"steemit/0.1"}
`created`	2017-11-22 19:42:21
`last_update`	2017-11-22 19:42:21
`depth`	3
`children`	2
`last_payout`	2017-11-29 19:42:21
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	90
`author_reputation`	138,308,411,475
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,230,921
`net_rshares`	1,841,686,793
`author_curate_reward`	""

properties (23)vote details (6)

voter	rshares	pct
asksteem	130,514,339	100%
samhughes	51,652,643	100%
businessquo	95,673,141	100%
businessbot	425,171,315	1.5%
sosmeditations	81,778,127	100%
bumper	1,056,897,228	1.5%

2 replies

@nairadaddy · Nov 23 '17

Hey @tbaumer2, 
I'm actually glad that you took my suggestion. This is awesome. And I hope to see you make a name for yourself with it.
Anyway, since you are assuming that people attending your class have zero knowledge of codes/languages, it better to make it easier.

- Start with a good introduction. Eg about HTML, what are the uses. Why should one spend his time learning it
- Take the topics one by one...you pratically lumped everything and for a newbie ...its gonna be hard.
- Assume you are teaching a 6yr old HTML...how will you do it?

Cheers!

#Hug-Challenge!

👍 tbaumer2

`author`	nairadaddy
`permlink`	re-tbaumer2-learning-html-blog-1-20171123t084831634z
`category`	technology
`json_metadata`	{"tags":["technology","hug-challenge"],"users":["tbaumer2"],"app":"steemit/0.1"}
`created`	2017-11-23 08:49:03
`last_update`	2017-11-23 08:49:03
`depth`	1
`children`	1
`last_payout`	2017-11-30 08:49:03
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	571
`author_reputation`	33,307,954,247,617
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,277,520
`net_rshares`	67,222,646
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
tbaumer2	0 B		67,222,646	100%

@tbaumer2 · Nov 23 '17

Great suggestions. Thanks!

properties (22)

`author`	tbaumer2
`permlink`	re-nairadaddy-re-tbaumer2-learning-html-blog-1-20171123t132719232z
`category`	technology
`json_metadata`	{"tags":["technology"],"app":"steemit/0.1"}
`created`	2017-11-23 13:27:18
`last_update`	2017-11-23 13:27:18
`depth`	2
`children`	0
`last_payout`	2017-11-30 13:27:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	26
`author_reputation`	180,675,398,363
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,297,363
`net_rshares`	0

@perennial · Nov 23 '17

Nice...i have done those manually like 20 years ago...in this webhosting site called fortunecity.com. i still remember my url by hard.

👍 bumper, businessbot, asksteem, businessquo, sosmeditations, samhughes, tbaumer2, curiositybot

`author`	perennial
`permlink`	re-tbaumer2-learning-html-blog-1-20171123t034701679z
`category`	technology
`json_metadata`	{"tags":["technology"],"app":"steemit/0.1"}
`created`	2017-11-23 03:47:03
`last_update`	2017-11-23 03:47:03
`depth`	1
`children`	1
`last_payout`	2017-11-30 03:47:03
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	134
`author_reputation`	10,460,298,003,452
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,259,053
`net_rshares`	2,437,171,780
`author_curate_reward`	""

properties (23)vote details (8)

voter	rshares	pct
asksteem	156,617,207	100%
samhughes	54,235,275	100%
curiositybot	52,266,996	100%
tbaumer2	53,778,117	100%
businessquo	114,807,769	100%
businessbot	850,435,436	1.5%
sosmeditations	98,133,752	100%
bumper	1,056,897,228	1.5%

@tbaumer2 · Nov 23 '17

Wow. That sounds much more difficult writing them that way!

properties (22)

`author`	tbaumer2
`permlink`	re-perennial-re-tbaumer2-learning-html-blog-1-20171123t132835293z
`category`	technology
`json_metadata`	{"tags":["technology"],"app":"steemit/0.1"}
`created`	2017-11-23 13:28:33
`last_update`	2017-11-23 13:28:33
`depth`	2
`children`	0
`last_payout`	2017-11-30 13:28:33
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	59
`author_reputation`	180,675,398,363
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,297,464
`net_rshares`	0

@tbaumer2 · Nov 22 '17

@OriginalWorks

properties (22)

`author`	tbaumer2
`permlink`	re-tbaumer2-learning-html-blog-1-20171122t202953094z
`category`	technology
`json_metadata`	{"tags":["technology"],"users":["originalworks"],"app":"steemit/0.1"}
`created`	2017-11-22 20:30:57
`last_update`	2017-11-22 20:30:57
`depth`	1
`children`	1
`last_payout`	2017-11-29 20:30:57
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	14
`author_reputation`	180,675,398,363
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,234,304
`net_rshares`	0

@originalworks · Nov 22 '17

originalworks

The @OriginalWorks bot has determined this post by @tbaumer2 to be original material and upvoted(1.5%) it! 
<center>![ezgif.com-resize.gif](https://steemitimages.com/DQmaBi37A5oTnQ9NBLH8YU4jpvhhmFauyvgg3YRrEJwskM9/ezgif.com-resize.gif)</center> 

To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!

properties (22)

`author`	originalworks
`permlink`	re-re-tbaumer2-learning-html-blog-1-20171122t202953094z-20171122t203231
`category`	technology
`json_metadata`	"{"app": "pysteem/0.5.4"}"
`created`	2017-11-22 20:32:33
`last_update`	2017-11-22 20:32:33
`depth`	2
`children`	0
`last_payout`	2017-11-29 20:32:33
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	350
`author_reputation`	79,292,026,602,057
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,234,407
`net_rshares`	0

@tbaumer2 · Nov 22 '17

@nairadaddy this one's for you :)

properties (22)

`author`	tbaumer2
`permlink`	re-tbaumer2-learning-html-blog-1-20171122t203120400z
`category`	technology
`json_metadata`	{"tags":["technology"],"users":["nairadaddy"],"app":"steemit/0.1"}
`created`	2017-11-22 20:32:24
`last_update`	2017-11-22 20:32:24
`depth`	1
`children`	0
`last_payout`	2017-11-29 20:32:24
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	33
`author_reputation`	180,675,398,363
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,234,399
`net_rshares`	0

@valorforfreedom · Nov 23 '17

Learned all my HTML back when I wrote on my blog on my own website. 

Probably forgot it all by now.

Code is like language, you stop speaking it, you forget it.

👍 tbaumer2

`author`	valorforfreedom
`permlink`	re-tbaumer2-learning-html-blog-1-20171123t163044178z
`category`	technology
`json_metadata`	{"tags":["technology"],"app":"steemit/0.1"}
`created`	2017-11-23 16:30:48
`last_update`	2017-11-23 16:30:48
`depth`	1
`children`	1
`last_payout`	2017-11-30 16:30:48
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	161
`author_reputation`	39,829,992,017,160
`root_title`	"Want to learn some HTML?"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	21,313,611
`net_rshares`	90,750,572
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
tbaumer2	0 B		90,750,572	100%

@tbaumer2 · Nov 23 '17

Indeed

properties (22)