aspnetplex: Tutorials

HTML tutorial-6 : Class, ID and < div > and < span > in HTML

Posted by Unknown at 11/07/2014 11:58:00 AM Be the first to comment!

In this lesson we’ll learn about class and ID attributes, and two tags that are useful for structuring our HTML. If you haven’t followe...

HTML tutorial-5: Adding navigation to a simple HTML page

Posted by Unknown at 11/07/2014 11:25:00 AM Be the first to comment!

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Qzsr-NGxzfrBnbU95TOull61UuqhwNpZDcDsY4t6Bi0F9C-Q2jXzZFpFtoTKoYCmQzBez4HnnGqbMBqKpOd-34GOIKm4NvcXjq9CZIQioDU9X5uPWbxocpDpTkhdVYJ2S2NTkl8m1cOA/s1600/index.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Qzsr-NGxzfrBnbU95TOull61UuqhwNpZDcDsY4t6Bi0F9C-Q2jXzZFpFtoTKoYCmQzBez4HnnGqbMBqKpOd-34GOIKm4NvcXjq9CZIQioDU9X5uPWbxocpDpTkhdVYJ2S2NTkl8m1cOA/s1600/index.jpg"></a></div>
In this lesson we’ll add navigation between our two simple HTML web pages.<br>
If you haven’t followed the lessons up to now then you should start from
 the beginning of the course. For this lesson you’ll want to have your 
“index.html” open in both Notepad and your browser so we can make 
changes to it and refresh the browser to see them, as usual.<br>
Our link at the top looks a little lost and alone. Most websites have 
more than one page, so let’s add an element that lets us navigate 
between multiple pages. In the process we’ll meet some more new tags, 
and even add our first CSS style.<br>
</div>

In this lesson we’ll add navigation between our two simple HTML web pages. If you haven’t followed the lessons up to now then you should...

HTML tutorial-4: Adding Links and Images in HTML page

Posted by Unknown at 11/07/2014 11:22:00 AM Be the first to comment!

In this lesson we’ll learn some HTML tags that allow us to add links and images to our web pages. Do you remember how we created the ind...

HTML tutorial-3: Adding Text to our HTML page

Posted by Unknown at 11/07/2014 11:16:00 AM Be the first to comment!

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7hb9imBHtWiXm_rQOECogmV6pVQUjaISMGxA-TVXIFdH31C-_P-mwTeq790b_HCvxNljZdd30__aO0UjWs7-wxfhV76NsIX-QstjRAsX9UaCiGV1wCIGrIIkezXkKQ8YYQsFqGhA12dF/s1600/index.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7hb9imBHtWiXm_rQOECogmV6pVQUjaISMGxA-TVXIFdH31C-_P-mwTeq790b_HCvxNljZdd30__aO0UjWs7-wxfhV76NsIX-QstjRAsX9UaCiGV1wCIGrIIkezXkKQ8YYQsFqGhA12dF/s1600/index.jpg" /></a></div>
In this lesson we’ll learn about some HTML tags that help us structure text in our web pages.<br />
If you haven’t followed the lessons up to now then you should start from
 the beginning of the course. For this lesson you’ll want to have your 
“index.html” open in both Notepad and your browser so we can make 
changes to it and refresh the browser to see them.<br />
<br />
It’s time to start making our page more interesting. Replace the text in your <body> tag with the following:<br />
<span style="color: red;"><span style="font-family: 'Courier New', serif;"><body></span></span><br />
<div style="padding-left: 30px;">
<span style="color: #7030a0;"><span style="font-family: 'Courier New', serif;"><section></span></span></div>
<div style="padding-left: 60px;">
<span style="color: black;"><span style="font-family: 'Courier New', serif;"><h1>FOTC Website Tutorial</h1></span></span></div>
<div style="padding-left: 60px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> <div></span></span></div>
<div style="padding-left: 90px;">
<span style="color: black;"><span style="font-family: 'Courier New', serif;"><h2>Making our first page</h2></span></span></div>
<div style="padding-left: 90px;">
<span style="color: #1f497d;"><span style="font-family: 'Courier New', serif;"><p>It
 is possible to make websites using these extremely simple tools. This 
is great news as it means everyone can learn to make websites.</p></span></span></div>
<div style="padding-left: 60px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> </div></span></span></div>
<div style="padding-left: 30px;">
<span style="color: #7030a0;"><span style="font-family: 'Courier New', serif;"></section></span></span></div>
<span style="color: red;"><span style="font-family: 'Courier New', serif;"></body></span></span><br />
You will notice that I’ve <i>indented</i> the new tags. This means 
I’ve pressed the TAB key in notepad to leave a gap at the beginning of 
each tag. This makes it easy to tell which tags are <i>nested</i> (contained) within other tags. In this diagram I’ve marked the TAB indentations in<span style="color: #00b050;"> green</span>.<br />
<img alt="Adding Text to our HTML page" class="aligncenter size-full wp-image-4507" height="299" src="http://freeon.wpengine.netdna-cdn.com/wp-content/uploads/media/HTML-5-1.png" title="Adding Text to our HTML page" width="486" /><br />
When our web pages get more complex it’s VERY important to keep the 
HTML as readable as possible. For example, if I didn’t indent the HTML, 
look how messy it could get:<br />
<span style="color: black;"><span style="font-family: 'Courier New', serif;"><body><section><h1>FOTC
 Website Tutorial</h1><div><h2>Making our first 
page</h2><p>It is possible to make websites using these 
extremely simple tools. This is great news as it means everyone can 
learn to make 
websites.</p></div></section></body></span></span><br />
This HTML is <b>exactly</b> the same as the previous example. See how much easier it is to read when we use indentation properly?<br />
You should get into the habit of using indentation to make your HTML 
readable. When you come back to make changes to your website – or if 
another developer needs to – you will thank yourself for putting in the 
time to make your website as clean as possible. Clean HTML is much 
easier to work with.<br />
Now it’s time to save our changes in Notepad and hit refresh (F5) in the browser. You should see this:<br />
<img alt="Adding Text to our HTML page" class="aligncenter size-full wp-image-4508" height="178" src="http://freeon.wpengine.netdna-cdn.com/wp-content/uploads/media/HTML-5-2.png" title="Adding Text to our HTML page" width="850" /><br />
Let’s look in more detail at what we have added.<br />
First we can see several new tags: <b><section>, <div>, <h1>, <h2> and <p></b><br />
<b>The <section> and <div> tags</b><br />
These tags are known as <i>grouping</i> elements, because they group related tags together inside them.<br />
They are very similar tags, but <section> is used to group 
related items together. If you want to create a section of your page 
that contains similar information then you should use a <section> 
tag. For example, a list of blog article titles would be one 
<section>, while the part of the page that contains the actual 
blog articles would be another <section>.<br />
Meanwhile, a <div> tag is used to group elements together that 
aren’t necessarily semantically related. Perhaps they are unrelated 
information that are kept in the same part of a page, or perhaps it’s a 
sub group of data that you want to group. The use of this tag will 
become more clear when we start styling our page using CSS.<br />
<b>The <h1> and <h2> tags</b><br />
These are known as ‘title’ or ‘heading’ tags. They specify different 
levels of heading on the page. The lower the number the more important 
the heading is. For example, <h1> may specify the main heading on 
your page, while <h2> may be used to specify the subtitles of the 
different parts of your page.<br />
As you can see, the headings are automatically displayed in bigger bolder text by the browser.<br />
It is possible to have heading tags for up to 6 different levels of 
heading, from <h1> as the biggest to <h6> as the smallest.<br />
<b>The < p> tag</b><br />
The <p> tag is short for a “paragraph” tag. As the name suggests, you use this tag when you have a paragraph of text.<br />
<b>Putting all this together</b><br />
We can now add some more text to our page, now that we understand the
 new tags we have used. Replace your <body> text with the 
following. Don’t forget to check your indentation!<br />
<span style="color: red;"><span style="font-family: 'Courier New', serif;"><body></span></span><br />
<div style="padding-left: 30px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> <section></span></span></div>
<div style="padding-left: 60px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> <h1>FOTC Website Tutorial</h1></span></span></div>
<div style="padding-left: 60px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> <div></span></span></div>
<div style="padding-left: 90px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> <h2>Making our first page</h2></span></span></div>
<div style="padding-left: 90px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;">
 <p>It is possible to make websites using these extremely simple 
tools. This is great news as it means everyone can learn to make 
websites.</p></span></span></div>
<div style="padding-left: 90px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> <p>For now we only have a simple page, but later we will make it more complex and interesting.</span></span></div>
<div style="padding-left: 60px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> </div></span></span></div>
<div style="padding-left: 60px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> <div></span></span></div>
<div style="padding-left: 90px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> <h2>What have we learned so far?</h2></span></span></div>
<div style="padding-left: 90px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> <p>So far we have learned a few simple tags for placing text onto a page.</p></span></span></div>
<div style="padding-left: 60px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> </div></span></span></div>
<div style="padding-left: 30px;">
<span style="color: red;"><span style="font-family: 'Courier New', serif;"> </section></span></span></div>
<span style="color: red;"><span style="font-family: 'Courier New', serif;"></body></span></span><br />
Now we have some more text to play with. You can see how the headings
 are displayed as headings and how the paragraphs automatically 
separate.<br />
<b>Can I make this look better with just HTML?</b><br />
Technically it is <i>possible</i> to style a page using pure HTML. 
You can add tags that make the text bold, or italic, or change the font 
or the colour. However, <b>this is a very bad idea</b>. As a result, I’m not even going to show you the tags that can do this as <b>you should never style your page using just HTML</b>.<br />
<b>Why can I not style a page using HTML?</b><br />
It’s best not to style a page using HTML for several reasons:<br />
<ol>
<li>Styling a page using HTML is very <b>limited</b>. You can’t make it look very good, however you try.</li>
<li>Styling a page using HTML is <b>a lot of work</b>. It takes way more effort to style using the HTML style tags.</li>
<li>Styling a page using HTML is <b>very difficult to change</b>. Once 
you start changing the layout and the look of your page in HTML it is 
very hard to go back and edit, especially once you add multiple pages to
 a site.</li>
</ol>
As a result, we have to be patient. Currently our pages look ugly, 
but that’s ok – we’re just using them to learn the basic HTML. Later in 
the course once we’ve mastered the simple HTML we will start using the 
power of CSS to make our pages look pretty!<br />
<ins class="adsbygoogle fotc-new-responsive" data-ad-client="ca-pub-1115372332628475" data-ad-slot="1477520298" data-adsbygoogle-status="done" style="display: inline-block; height: 200px; width: 640px;"><ins id="aswift_1_expand" style="background-color: transparent; border: none; display: inline-table; height: 200px; margin: 0; padding: 0; position: relative; visibility: visible; width: 640px;"><ins id="aswift_1_anchor" style="background-color: transparent; border: none; display: block; height: 200px; margin: 0; padding: 0; position: relative; visibility: visible; width: 640px;"></ins></ins></ins><br /></div>

In this lesson we’ll learn about some HTML tags that help us structure text in our web pages. If you haven’t followed the lessons up to ...