HTML Course Tutorial - Part 1 ~ Own Things ~ आफ्नै कुरा

From this post I'm going to Publish HTML Digital Note Book at partially on this blog as part -1, part 2 ... .. I hope that it's useful to readers .... you can leave your queries, suggestion to me as a comment and you can save this notebook on your computer..... if it is useful for you - Thanks.

HTML is easy to learn - You will enjoy with it.

Introduction - HTML
HTML is not a programming language, but rather a markup language. Creating an HTML document is easy. To

begin coding HTML, you need only two things: a simple-text editor, such as Notepad. Notepad is the most

basic of simple-text editors, and you will probably code a fair amount of HTML with it in your early

stages. Notepad++ is another popular favorite among web developers. These innovative text editors are

specialized for writing simple code and they utilize color coding to help you write concise code.
HTML hasn't been around for many years. The first web pages began in November 1990, and back then, there

were little to no HTML standards to follow. As a result, a group called the World Wide Web Consortium

formed to set standards for coding HTML. We will base our teachings around these widely-accepted coding

standards.
We will be using several terms that are unique to HTML. It is important for you to understand what these

words mean, in the context of HTML. 
  Tag - Used to tag or "mark-up" pieces of text. Once tagged, the text becomes HTML code to be

interpreted by a web browser. Tags look like this: <tag> . 1) Empty Tag and 2) Non- Empty Tag. 
  Element - A complete tag, having an opening <tag> and a closing </tag>.
  Attribute - Used to modify the value of the HTML element. Elements will often have multiple

attributes. Eg. <img src=”photo.jpg” alt=”Blog”> at this element ‘alt’ is one of attribute of <img> tag.
For now, just understand that a tag a piece of code that acts as a label that a web browser interprets,

an element is a complete tag with an opening and closing tag, and an attribute is a property value that

customizes or modifies an HTML element.
# Html – Elements 
HTML - <html> Element … </html>
<html> is the element that begins and ends each and every web page. Its sole purpose is to hold each web

element nicely in position and serves the role of book cover; all other HTML elements are encapsulated

within the <html> element. The tag also lets web browsers know, "Hey, I'm an HTML web page!", so that

the browser knows how to render it. Remember to close your HTML documents with the corresponding </html>

tag to signify the end of the HTML document.
# HTML - <head> Element
The <head> is usually the first element contained inside the <html> element. While it is also an element

container that encapsulates other HTML elements, these elements are not directly displayed by a web

browser. Instead they function behind the scenes, providing more descriptive information about the HTML

document, like its page title and other meta data. Other elements used for scripting (JavaScript) and

formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to

utilize those languages.

# HTML - <title> Element
The <title> element adds a title to a web page. Web page titles are displayed at the top of any browser

window or at the top of browser tabs. They are probably the first thing seen by web surfers as pages are

loaded, and web pages you bookmark are saved using the web pages' titles.
A proper title makes a good first impression, and any page caught without a title is considered

unprofessional, at best.
# HTML - <body> Element
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page

is the <body> element. We will be looking at each of these elements in greater detail as the tutorial

progresses, but for now, it's only important to understand that the body element is one of the four

critical web page elements, and it contains all of the page's viewable content.
Normal example :
<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p>
Once upon a time...</p>
<p>
in blogging world</p>
</body>
</html>

1)  HTML Heading Element:
<body>
<h1>
Headings</h1>
<h2>
are</h2>
<h3>
great</h3>
<h4>
for</h4>
<h5>
titles</h5>
<h6>
and subtitles</h6>
</body>
2) HTML Text Formatting Tags:
<b>Bold Text</b>
<i>Emphasized Text</i>
<b>Strong Text</b>
<i>Italic Text</i>
<sup>superscripted Text</sup>
<sub>subscripted Text</sub>
<del>struckthrough Text</del>
<code>Computer Code Text</code>
<br>linebreak
<p>
line Break</p>
3) HTML Pre (Preformatting )Code:
Use the <pre> tag for any special circumstances where you wish to have the text appear exactly as it is

typed. Spaces, tabs, and line breaks that exist in your actual code will be preserved with the <pre>

tag.

<pre>
Roses are Red,
     Violets are blue,
I may sound crazy,
     But I love you!
</pre>
HTML Preformatted Text:
Roses are Red,
     Violets are blue,
I may sound crazy,
     But I love you!
4) HTML Align Attribute Code:
<h2 align="left">
Left-aligned heading</h2>
<h2 align="center">
Centered Heading</h2>
<h2 align="right">
Right-aligned heading</h2>
5) HTML Font :-
The <font> tag provides no real functionality by itself, but with the help of a few attributes, this tag

is used to change the style, size, and color of HTML text elements. The size, color, and face attributes

can be used all at once or individually, providing users with the ability to create dynamic font styles

for any HTML element.
<font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
 your font to achieve a desired look.</p>
Beauty & Grace:
Customize your font to achieve a desired look.
1) HTML - Hypertext Reference (href)
A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in

order to properly direct a user to a different location. In other words, this Hypertext Reference is

where users will navigate to if they do click on this link. Use the demonstration below as a reference.
HTML Text Link Code:
<a href="http://www.yahoo.com/" target="_blank">Yahoo Home</a>
HTML Image Link Code:
<a href="http://www.espn.com" target="_blank">
<img src="ahman.gif" />
</a>

Link Targets:
Target= Description
_blank Opens new page in a new browser window
_self Loads the new page in the current window
_parent Loads new page into a parent frame
_top Loads new page into the current browser window, cancelling all frames
6) HTML - Ordered Lists
An ordered list is defined using the <ol> tag, and list items placed inside of an ordered list are

preceded with numbers instead of bullets.
HTML Numbered/Ordered List:
<h4 align="center">
Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>
HTML Numbered List:
Goals
1. Find a Job
2. Get Money
3. Move Out

7) HTML Numbered List Start Attribute:
<h4 align="center">
Goals</h4>
<ol start="4">
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>
HTML Numbered List Start - 4:
Goals
4. Buy Food
5. Enroll in College
6. Get a Degree
8) HTML - Images & Pictures
Use the <img /> tag to place an image on your webpage. Like the <br /> tag, <img /> tag does not require

a formal ending tag. Instead, all we need to do to close this tag out with a slash (/) placed just

inside the ending bracket (/>).
HTML Image Code:
<img src="http://www.tizag.com/pics/htmlT/sunset.gif" width=”250” height=”200” alt=”Nature”

align="right">
  Global: http://www.tizag.com/pics/htmlT/sunset.gif
  Local: pics/sunset.gif
# HTML Gifs vs. Jpegs vs. PNGs
Gifs are best used for banners, clip art, and buttons. The main reason for this is that .gif files can

have transparent backgrounds -- a priceless attribute when it comes to web design. On the down side,

.gif files are limited to only 256 colors and any .gif image containing more than a few colors tends to

have a larger file size than their .jpeg or .png counterparts. Large picture files are a plague of web

design!
Jpegs have an unlimited color wheel and a high compression rate, which downsizes your load times and

saves on hard drive space. Although .jpeg (or .jpg) files don't allow for transparent backgrounds, their

size/quality ratio is outstanding. It's best to use .jpeg files for photo galleries or artwork. Avoid

using .jpeg files for graphical designs, though; stick to using them for thumbnails, backgrounds, and

photo galleries.
PNG image files are the best of both worlds. They have a large color wheel, low file size, and allow for

transparencies like .gif images do. With a high-compression rate and transparent coloring, they might

just be the best format for any web graphics.
When in doubt, try saving an image in multiple formats and decide which is better, keeping file size and

quality in mind.

9) HTML - Tables
An HTML table is an element comprised of table rows and columns, much like you'd see when working with

an application such as Excel. Tables are container elements, and their sole purpose is to house other

HTML elements and arrange them in a tabular fashion -- row by row, column by column.
Tables may seem difficult at first, but after working through this lesson, you'll see that they aren't

so horrible. A table element consists of three different HTML tags including the <table> tag,
<tr>

(table rows), and the <td> (table columns) tags.
a) HTML Table Code:
Example – 1.
<table border="1">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
Basic HTML Table Layout:
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
B) HTML Table Code:
Example -2. 
<table border="1" cellspacing="10" cellpadding="10">
<tr title="You are looking at Row 1" bgcolor="silver">
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr title="You are looking at Row 2" bgcolor="aqua">
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
HTML Table Code Example:
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

c) HTML - Tables: Spanning Multiple Rows and Cells
Use rowspan to span multiple rows merging together table rows and colspan to span across multiple

columns.
HTML Table Rowspan Attribute:
Example -3.
<table border="1">
<tr>
<td><b>Column 1</b></td>
<td><b>Column 2</b></td>
<td><b>Column 3</b></td>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
HTML Colspan and Rowspan Attributes:
Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
 Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
HTML Bgcolor Code:
<body bgcolor="silver">
<p>
This page now has a SILVER background!</p>
</body>

HTML Bgcolor:
This page now has a SILVER background!
HTML - Web Colors
Our example uses the text value, which is one of three different types of color values that can be used

with the bgcolor attribute. Below is a table of the 16 basic HTML color values that are available to

HTML web designers.
HTML Basic Colors:
 Black  Gray  Silver  White
 Yellow  Lime  Aqua  Fuchsia
 Red  Green  Blue  Purple
 Maroon  Olive  Navy  Teal
Tips
  If you are new to HTML, consider sticking with color names for setting your background color.
  There are 256 "true colors" with hexadecimal values. The colors are made out of hex-pairs for

red, green, and blue. Examples: #99FFCC, #33AA44.
  Shades of gray occur when the 3 paired amounts of each color are equal. Example. "rgb

(100,100,100)", "#333333," "#0A0A0A"
  Avoid bright, headache-causing color schemes! Keep your coloring distinct and purposeful.

Red, Green, and Blue Values:
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue
bgcolor="rgb(0,0,0)" Black
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(120,120,120)" Grey
bgcolor="rgb(240,40,120)" Pink
HTML Coloring System - Hexadecimal
The hexadecimal system is complex and difficult to understand at first. Rest assured that the system

becomes much, MUCH easier with practice, and as a blossoming web developer, it is critical that you

understand hexadecimals to be capable of using them in your own websites. They are far more reliable,

and are more widely compatible with web browsers, and are currently the web standard for coloring HTML

elements.
HTML Color: Hexadecimal Code:

bgcolor="#004488"
A hexadecimal is a 6-digit numeric representation of a color, comprised of three different components

(the red, the green, and the blue). The first two digits (00) represent a red value, the next two (44)

are a green value, and the last (88) are the blue value. These three sets of values combined form the

final color shade.
Hexadecimal Formula: 2 digits at a time:
([first_digit]* 16) + ([second_digit]) =  primary color value
Let's apply this formula to an example and see how it works!
HTML Color: Hexadecimal Example Code:
bgcolor="#004488" 
We now know that this six digit value is actually three separate values working together to create a

single shade. Let's separate each value and perform some calculations based on the formula we have

listed above.
  00 - represents the Red value.
  44 - represents the Green value.
  88 - represents the Blue value.
Hexadecimal Formula: Calculated:

(0 * 16) + (0) = 0 red value

(4 * 16) + (4) = 68 green value

(8* 16) + (8) = 144 blue value
By applying this formula to each value pair, we now have a value that resembles the rgb(0,68,144) values

we've seen before. 
But now for the curve ball. Since hexadecimal values are limited to six single digits, you may assume

that the value #999999 is the largest hexadecimal value that is possible. This is not the case. The

hexadecimal system uses letters (A-F) to represent values greater than nine. But why? This is an

excellent question.
It's probably easiest to understand by working through the calculation of our supposed maximum

hexadecimal value #999999.
Hexadecimal Formula: #999999 Calculated:

(9 * 16) + (9) = 153 red value

(9 * 16) + (9) = 153 green value

(9 * 16) + (9) = 153 blue value
Based on the calculations above, we are seeing a maximum value of rgb(153,153,153). This does not

coincide with numeric values that have a maximum value of rgb(255,255,255) and it greatly limits what

would be the available color spectrum. Therefore, letters are deployed to represent numbers and this is

what makes it possible to extend the color wheel threshold to the max.
The table below identifies how each letter (A-F) corresponds to the hexadecimal numeric equivalent.
Hexadecimal Color Values:
Decimal 0 1 2 3 4 5 6 7 8 9 10 11

12 13 14 15
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A

B C D E F
Taking a look at the next few calculations, you should be able to see that, by using letters, we are

able to extend the color wheel giving HTML developers a greater selection of color options for web page

designers.
HTML Color: Hexadecimal Example Code:
bgcolor="#AA93FF" 
Hexadecimal Formula: Calculated:

(10 * 16) + (10) = 170 red value

(9 * 16) + (3) = 147 green value

(15 * 16) + (15) = 255 blue value
HTML Color: Hexadecimal Example #2:
bgcolor="#CC7005"
Hexadecimal Formula: Example #2 Calculated:

(12 * 16) + (12) = 204 red value

(7 * 16) + (0) = 112 green value

(0 * 16) + (5) = 5 blue value
.

HTML Course Tutorial - Part 1

No comments:

Post a Comment

Followers

FOLLOW ME

Translate this blog into your language to read it.

ABOUT

पुराना संग्रहहरु

Top Links Menu