create account

Tutorial HTML lesson 6: More HTML tags by sahriarbappy

View this thread on: hive.blogpeakd.comecency.com
· @sahriarbappy · (edited)
$0.36
Tutorial HTML lesson 6: More HTML tags
<p><sup>This text should be lettered in size small<sup></sup></sup></p>
<p>Hello everyone I'm here to add the sixth lesson.</p>
<p>And you? built a few pages as suggested in the previous lesson? No? Yes? Well, the following is an example:</p>
<p> <code>&lt;html&gt;<br />
<br />
	  &lt;head&gt;<br />
	  &lt;title&gt;My website&lt;/title&gt;<br />
	  &lt;/head&gt;<br />
	  &lt;body&gt;<br />
	  &lt;h1&gt;On header &lt;/h1&gt;<br />
	  &lt;p&gt;text, text text, text&lt;/p&gt;<br />
	  &lt;h2&gt;Subtitle&lt;/h2&gt;<br />
	  &lt;p&gt;text, text text, text&lt;/p&gt;<br />
	  &lt;/body&gt;<br />
&lt;/html&gt;</code></p>
<p>And now?</p>
<p>Now we learn seven new Tags.</p>
<p>You already know you can get bold with <code>&lt;b&gt;</code> tag, now know you can get italics - inclined letters - with the <code>&lt;i&gt;</code>. Have you noticed is not ?, &quot;i&quot; stands for &quot;italic&quot;. </p>
<p>Example 1:</p>
<p><code>&lt;i&gt;</code> This text should be italicized<code>.&lt;/i&gt;</code></p>
<p>Will be in the browser like this:</p>
<p><em>This text should be italicized</em></p>
<p>Similarly you can make your text with smaller font using the <code>&lt;/smal&gt;</code></p>
<p>Example 2</p>
<p> <code>&lt;small&gt;This text should be lettered in size small.&lt;/small&gt;</code></p>
<p>Will be in the browser. like this:</p>
<p>This text should be lettered in size smal.</p>
<p>Can I use multiple tags simultaneously?</p>
<p>Yes you can use as many tags you want from that nest conveniently. See how to do this in the example below:</p>
<p>Example 3: </p>
<p>To write a text in bold italics do as follows:</p>
<p><code>&lt;b&gt;&lt;i&gt;Text in bold italics.&lt;/i&gt;&lt;/b&gt;</code></p>
<p>And not so: </p>
<p><code>&lt;b&gt;&lt;i&gt;Text in bold italics.&lt;/b&gt;&lt;/i&gt;</code></p>
<p>Note that in the first example the first opening tag <code>&lt;b&gt;</code> is the last closing tag <code>&lt;/b&gt;</code>, and nesting is right. This avoids confusion for those who write the code and to the browser that reads the code.</p>
<p>More tags! </p>
<p>As stated in Lesson 4 there are tags that are opened and closed in a single tag. These tags are single commands, ie contains no text within them to function. An example is the `&lt;br /&gt; `tag to create a line break:</p>
<p>Example 4: </p>
<p>A text <code>&lt;br/&gt;</code> and some more text in a new line</p>
<p>Will be in the browser like this:</p>
<p>A text </p>
<p>and some more text in a new line</p>
<p>Note that the tag is written as if it were a mixture opening tag and closing with a slash &quot;/&quot; at the end: <code>&lt;br/&gt;</code>. The principle can also write<code> &lt;br&gt; &lt;/br&gt;</code> (void), Why to complicate?</p>
<p> Another command tag is <code>&lt;hr/&gt;</code> which is used to define a horizontal line (&quot;hr&quot; is &quot;horizontal rule&quot; - horizontal rule): </p>
<p>Example 5</p>
<p><code>&lt;hr/&gt;</code></p>
<p>Will be in the browser like this: (Horizontal Line)</p>
<p>Example 6: (unordered list) </p>
<p><code>&lt;ul&gt;</code></p>
<p><code> &lt;li&gt;A list item&lt;/li&gt;</code></p>
<p><code> &lt;li&gt;Another list item&lt;/li&gt;</code></p>
<p><code>&lt;/ul&gt;</code></p>
<p>Will be in the browser like this: </p>
<ul>
  <li>A list item</li>
  <li>Another list item</li>
</ul>
<p>The <code>&lt;ol&gt; </code>tag defines an ordered list. An ordered list can be numerical or alphabetical.</p>
<p>Use the<code>&lt;li&gt;</code> tag to define list items.</p>
<p>Example 7: (Organized list) </p>
<p><code>&lt;ol&gt;</code></p>
<p><code> &lt;li&gt;First list item&lt;/li&gt;</code></p>
<p><code> &lt;li&gt;Second list item&lt;/li&gt;</code></p>
<p><code> &lt;/ol&gt;</code></p>
<p>Will be in the browser like this: </p>
<ol>
  <li>First list item</li>
  <li>Second list item</li>
</ol>
<p>Wow! That is all?</p>
<p>Yes for now that's all. We recommend again tyou to do the experiences building a few pages using the seven tags. that you learned in this lesson.</p>
<p><br /></p>
<p>       <code>  &lt;i&gt;Italic&lt;/i&gt;</code></p>
<p><code>	&lt;smal&gt;Small Text&lt;/smal&gt;</code></p>
<p><code>	&lt;br /&gt; Break line</code></p>
<p><code>	&lt;hr/&gt; Horizontal line`</code></p>
<p><code>	&lt;ul&gt;Unordered list&lt;/ul&gt;</code></p>
<p><code>	&lt;ol&gt;Organized list)&lt;/ol&gt;</code></p>
<p><code>	&lt;li&gt;List item&lt;/</code>li&gt;</p>
<p>
<table>
  <tr>
    <td><center><a href="https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-1">
<b>Lesson 1 HTML</b> 
</a></center></td>
    <td><center><a href="https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-2-what-is-html">
<b>Lesson 2 What is HTML?</b>
</a></center></td>
    <td><center><a href="https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-3-what-are-html-tags">
<b>Lesson 3 What are HTML tags?</b>
</a></center></td>
  </tr>
  <tr>
    <td><center><a href="https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-4-create-your-first-website">
<b>Lesson 4 Create your first website</b></a></center></td>
    <td><center><a href="https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-5-what-have-you-learned">
<b>Lesson 5 what have you learned? </b></a></center></td>
    <td><center>
<a href="https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-6-more-html-tags">
<b>Lesson 6 More HTML tags? </b></a>
</center></td>
  </tr>

  <tr>
    <td><center>
<a href="url" rel="noopener"><b>Lesson 7 Attributes</b></a></center></td>
    <td><center></center></td>
    <td><center></center></td>
  </tr>
</table>
</p>
<p><br /></p>
👍  , , , , , , ,
properties (23)
authorsahriarbappy
permlinktutorial-html-lesson-6-more-html-tags
categoryhowto
json_metadata{"tags":["howto","html","technology","code"],"links":["https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-1","https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-2-what-is-html","https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-3-what-are-html-tags","https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-4-create-your-first-website","https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-5-what-have-you-learned","https://steemit.com/code/@sahriarbappy/tutorial-html-lesson-6-more-html-tags","url"]}
created2016-07-25 13:41:57
last_update2016-07-26 14:18:21
depth0
children1
last_payout2016-08-26 00:52:03
cashout_time1969-12-31 23:59:59
total_payout_value0.358 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length5,567
author_reputation99,528,996,994
root_title"Tutorial HTML lesson 6: More HTML tags"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id345,794
net_rshares625,051,926,020
author_curate_reward""
vote details (8)
@meesterboom ·
***snigger*** you said "head" ***hurhur***
properties (22)
authormeesterboom
permlinkre-sahriarbappy-tutorial-html-lesson-6-more-html-tags-20160725t134857972z
categoryhowto
json_metadata{"tags":["howto"]}
created2016-07-25 13:49:00
last_update2016-07-25 13:49:00
depth1
children0
last_payout2016-08-26 00:52:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length42
author_reputation1,789,988,586,474,457
root_title"Tutorial HTML lesson 6: More HTML tags"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id345,975
net_rshares0