I Want To Build Websites All By Myself. Can I? - Webmasters (2)

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,153,217 members, 7,818,738 topics. Date: Sunday, 05 May 2024 at 11:39 PM

I Want To Build Websites All By Myself. Can I? - Webmasters (2) - Nairaland

Nairaland Forum / Science/Technology / Webmasters / I Want To Build Websites All By Myself. Can I? (4455 Views)

I Build Websites...... Any Kind Of Websites @cheap Rates / Build Websites For Your Business, E-commerce And Many More At Cheap Rates....... / What Can I Use To Build Websites Like This One (2) (3) (4)

(1) (2) (3) (4) (5) (Reply) (Go Down)

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:22pm On Aug 31, 2020

*The HTML Style Attribute*

Remember we established Attributes as additional information placed in opening tags to cause the element display in different manners. The style Attribute and style sheet do the same thing: they allow you the programmer to 'style' elements the way you want them to appear giving the page an overall defined outlook; they provide beauty and layout to the web page.

Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax:
style="property:value;"

The property is a CSS property. The value is a CSS value. At this point you would want to ask want is CSS? That is a topic for later and we will expound on it at the appropriate time. Let's apply the syntax mentioned above.

*HTML Background Color*
The background-color property defines the background color for an HTML element; example below.

*HTML Text Color*
The color property defines the text color for an HTML element; example below.

*HTML Fonts*
The font-family property defines the font to be used for an HTML element; example below.

*HTML Text Size*
The font-size property defines the text size for an HTML element, units can be in percentage or pixels; example below.

*HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element to left, right or center; example below.

This example sets the background for a page to yellow, both headers centred while the colour of first header is red, the first paragraph is in Verdana font, second and third paragraph are formatted in text sizes to 160 percent and 17 pixels respectively:

<body style="background-color: yellow;">

<h1 style="color: red; text-align: center;" >This is a heading</h1>
<p style="font-family: verdana;">This is a paragraph.</p>
<p style="font-size: 160%;">This is another paragraph.</p>

<h2 style="text-align: center;"> Sub-heading </h2>
<p style="font-size: 17px;"> New paragraph</p>

</body>

Your page should appear on your browser like what you see in the image uploaded below.

This is a peek into styling a web page which is really interesting. Now you have an idea what style sheets and style attribute can do. Pay around with the properties and values for a bit. It's quite fun to learn, easy as breathing.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 9:25pm On Sep 01, 2020

*HTML – COMMENTS*

Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability.

HTML comments are placed in between tags. So, any content placed within  tags will be treated as comment and will be completely ignored by the browser, and not displayed at all. That is: open angle bracket, exclamation mark, hyphen, hyphen, closed then with hyphen, hyphen, close angle bracket.

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>

<p>Document content goes here.....</p>

<p>  </p>
</body>
</html>

Comments do not nest which means a comment cannot be put inside another comment. Second the double-dash sequence "--" may not appear inside a comment except as part of the closing --> tag. You must also make sure that there are no spaces in the start-of-comment string i.e. don't do this: <! -- - ->.

*Multiline Comments*
So far we have seen single line comments, but HTML supports multi-line comments as well. You can comment multiple lines by the special beginning tag  placed before the first line and end of the last line as shown in the given example below.

.
.
.
<body>
<p> Here I am </p>



</body>
</html>

You will notice that unlike the first example, the second example has two elements inside the comments. Comments can hold elements, not just texts alone. Infact comments can hold anything and any number of things. The point is that it will cause the browser to ignore whatever is placed inside. The browser automatically jumps over the text or code and continues as if the content of the comment does not exist in the code. So you can see that Comments allow you to hide parts of code or text- do without them but not do away with them, they still remain in your code.

You might ask why keep code or text I do not want?

The reasons are:
1. You might need it later to be read by the browser.
2. You might want to refer to it later.
3. It might serve as a reminder maybe for a task to be performed, or anything at all.
4. It might be for testing purposes: to see what happens without a section of code when it is commented.
5. Comments can serve to explain parts/sections of code to you or others for future purpose mostly; helps when revisiting a web document for editing or updating. For example:

<!DOCTYPE html>
<html>

<head>
<title>This is document title</title>
</head>

<body>
<p>Document content goes here.....</p>
</body>
</html>

These make Comments a necessary part of our coding practice. It is vital to leave notes in your code explaining sensitive, technical or complex sections of your work in case of future or academic purpose, not just for others but also yourself. Another programmer might have to edit your work in probably maintaining the website and no matter how vast and skilled he/she is, it would make a whole world of difference with comments here and there.

Also I have found myself studying my own code in order to edit or update it, long after I have done and sealed the job. Comments makes things faster, easier and encouraging for others and yourself. Let's apply accordingly and appropriately please.

Powered by Programmers Community...

1 Like 1 Share

Re: I Want To Build Websites All By Myself. Can I? by telleyway: 7:36am On Sep 02, 2020

eesyy:
*HTML – COMMENTS*

Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability.

HTML comments are placed in between tags. So, any content placed within  tags will be treated as comment and will be completely ignored by the browser, and not displayed at all. That is: open angle bracket, exclamation mark, hyphen, hyphen, closed then with hyphen, hyphen, close angle bracket.

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>

<p>Document content goes here.....</p>

<p>  </p>
</body>
</html>

Comments do not nest which means a comment cannot be put inside another comment. Second the double-dash sequence "--" may not appear inside a comment except as part of the closing --> tag. You must also make sure that there are no spaces in the start-of-comment string i.e. don't do this: <! -- - ->.

*Multiline Comments*
So far we have seen single line comments, but HTML supports multi-line comments as well. You can comment multiple lines by the special beginning tag  placed before the first line and end of the last line as shown in the given example below.

.
.
.
<body>
<p> Here I am </p>



</body>
</html>

You will notice that unlike the first example, the second example has two elements inside the comments. Comments can hold elements, not just texts alone. Infact comments can hold anything and any number of things. The point is that it will cause the browser to ignore whatever is placed inside. The browser automatically jumps over the text or code and continues as if the content of the comment does not exist in the code. So you can see that Comments allow you to hide parts of code or text- do without them but not do away with them, they still remain in your code.

You might ask why keep code or text I do not want?

The reasons are:
1. You might need it later to be read by the browser.
2. You might want to refer to it later.
3. It might serve as a reminder maybe for a task to be performed, or anything at all.
4. It might be for testing purposes: to see what happens without a section of code when it is commented.
5. Comments can serve to explain parts/sections of code to you or others for future purpose mostly; helps when revisiting a web document for editing or updating. For example:

<!DOCTYPE html>
<html>

<head>
<title>This is document title</title>
</head>

<body>
<p>Document content goes here.....</p>
</body>
</html>

These make Comments a necessary part of our coding practice. It is vital to leave notes in your code explaining sensitive, technical or complex sections of your work in case of future or academic purpose, not just for others but also yourself. Another programmer might have to edit your work in probably maintaining the website and no matter how vast and skilled he/she is, it would make a whole world of difference with comments here and there.

Also I have found myself studying my own code in order to edit or update it, long after I have done and sealed the job. Comments makes things faster, easier and encouraging for others and yourself. Let's apply accordingly and appropriately please.

Powered by Programmers Community...

You are doing a great job here Sir

1 Like

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 9:30am On Sep 02, 2020

telleyway:

You are doing a great job here Sir

Thanks! You're welcome dear...

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 12:33am On Sep 03, 2020

*HTML – IMAGES*

Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages. You can insert any image in your web page by using <img> tag.
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag. Example:

To try following example, let's keep our HTML file 'imagetest.html' and image file in the same
directory i.e. in the same folder. Rename the image file, choose something simple, like testpic.png in this case. The png part refers to the type of image file. Check the properties of the file to know what type it is. For pictures, you might get jpg, png, jpeg as the type. Whatever the type, it becomes the extension, in this case png.

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="testpic.png" alt="Test Image" />
</body>
</html>

You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in srcattribute. Image name is always case sensitive. The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.

*Set Image Location*
Usually we keep all the images in a separate directory. So let's keep HTML file imagetest.html in our home directory and create a subdirectory images inside the home directory where we will keep our image testpic.png. When I say directory, I simply mean folder.
Example
Assuming our image file location is a folder called images which is inside the same home folder as our web page, try the following example:

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="images/testpic.png" alt="Test Image" />
</body>
</html>

*Set Image Width/Height, Border and Alignment*
You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size. By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture. Also by default, image will align at the left side of the page, but you can use align attribute to set it in the center or right.

<!DOCTYPE html>
<html>
<head>
<title>Setting Image Width, Height and Border</title >
</head>
<body>
<p>Setting Image Width and Height</p>
<img src="testpic.png" alt="Test Image" width=”150” height=”100”/>
<img src="testpic.png" alt="Test Image" border=”3” align=”right”/>
</body>
</html>

You can also use the style attribute for the sizing like this:

<img src="images/testpic.png" style="width:150px; height:100px;>
<img src="images/testpic.png" style="width:70%; height:50%;>

*Images on Another Server*
Some web sites store their images on image servers. Actually, you can access images from any web address in the world, like this:

<img src="http://www.tutorialpage.com/images/snapdragon.jpg" alt="tutorials.com">

This is just an example the address in the src attribute refers to the address of the image file online.

*Animated Images*
The GIF standard allows animated images:

<img src="programming.gif" alt="picture here" style="width:48px; height:48px;">

Note that the syntax of inserting animated images is no different from non-animated images.

*Using an Image as a Link*
To use an image as a link, simply nest the <img> tag inside the <a> tag. Example:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px; height:42px; border:0;">
</a>

Note: Best store in a folder all the files including pictures relating to the webpages of he project you are working on.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 12:37am On Sep 03, 2020

*HTML – TABLES*

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.

*Table Heading*
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row.

*Cellpadding and Cellspacing Attributes*
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>

<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
<tr>
<td>Musa Ahmed</td>
<td>4500</td>
</tr>
</table>

</html>
</body>

Browser result is shown on first uploaded picture below. sad

*Tables Backgrounds*
You can set table background using one of the following two ways:
1. Background-color property - You can set background color for whole table or just for one cell.
2. Background attribute - You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

*Table Height and Width*
You can set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.

*Table Caption*
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML. You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.

*Colspan and Rowspan Attributes*
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>

<table border="1" bordercolor=”green” style="background-color:yellow;" width=”400” height=”150”>
<caption>This is the caption</caption>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</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>

</body>
</html>

Or try:

<table border="1" background=”/images/testpic.png” width=”400” height=”150”>

See browser result in second picture uploaded below.

We will try some more examples with the rowspan and colspan attributes, for better understanding of the concept. It's quite simple actually.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:36am On Sep 03, 2020

As we have established:
Tables are defined with the <table> tag and are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. A table row can also be divided into table headings with the <th> tag. Table data <td> are the data containers of the table. They can contain all sorts of HTML elements like text, images, lists, other tables etc.

Most things we did on tables can be done using CSS. Remember CSS? Anytime we say 'style' we use CSS, whether it is used as an attribute or as an element. But we have only used 'style' as an attribute in editing how we want elements to display i.e. in this way:

<!DOCTYPE html>
<html>
<head>
<title> Table Example </title>
</head>
<body>

<table border="1" style="width: 100%; background-color: yellow;">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

</body>
</html>

We can use style as a tag the same way we use the title tag inside the head tag, this way:

<!DOCTYPE html>
<html>
<head>
<title> Table Example </title>

<style>

table, th, td {
border: 1px solid black;
width: 100%;
background-color: yellow;
}

</style>
</head>
<body>

<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

</body>
</html>

You see that style as an element of its own here is placed in-between <head> and </head>. That is to say the <head> element nests both <title> and <style> tags within itself. REMEMBER NESTING, RIGHT? Just in case you can go check our discussion on NESTING to be absolutely clear.

So within the <style> element you see that the table, th and td elements from the body are called. These are known as SELECTORS. SELECTORS are used in a type of CSS to refer to elements inside the body you want to style, I mean edit properties. In this case, the properties of the elements concerned are the border, width and background colour. The value of the border property, '1px solid black' says the thickness of the border lines be 1px, the colour be black and the type of line be solid continuous line while there are also dotted and dashed line types in CSS. Another way to write this would have been:

.
.
.
table, the, td {
border-width: 1px;
border-style: solid;
border-color: black;
width: 100%;
background-color: yellow;
}
.
.
.

The border-width representing the thickness of border lines, border-style representing the type of border lines, border-color representing colour of border lines. So the border property packs together the functions of those three above, therefore we have the value as: 1px solid black. It has to be in that order: thickness before line type, then colour. As for the width and background colour properties, they appear as they have in previous examples of styling, easily understood.

Now let's try some more CSS on tables.

Powered by Programmers Community...

1 Like 1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 12:00am On Sep 04, 2020

*An HTML Table with Collapsed Borders*
If you want the borders to collapse into one border, add CSS border-collapse.

*An HTML Table with Cell Padding*
Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property.

*HTML Table Headings*
Table headings are defined with the <th> tag. By default, all major browsers display table headings as bold and centered. To left-align the table headings, use the CSS text-align property.

For Example:

<!DOCTYPE html>
<html>
<head>
<title> Table CSS </title>

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>

</head>
<body>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

*An HTML Table with Border Spacing*
Border spacing specifies the space between the cells. To set the border spacing for a table, use the CSS border-spacing property. If the table has collapsed borders, border-spacing has no effect. So to use border-spacing, there must be no border-collapse set to collapse, that is:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>

<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the border-spacing to 5px, see the difference.</p>

</body>
</html>

*Table Cells that Span Many Columns*
To make a cell span more than one column, use the colspan attribute:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Smart Kofo</td>
<td>08144157769</td>
<td>08120601164</td>
</tr>
</table>

</body>
</html>

*Table Cells that Span Many Rows*
To make a cell span more than one row, use the rowspan attribute:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Smart Kofo</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>08144157769</td>
</tr>
<tr>
<td>08120601164</td>
</tr>
</table>

</body>
</html>

Another example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Telephone</th>
</tr>
<tr>
<td>Eze</td>
<td>12</td>
<td>08144157769</td>
</tr>
<tr>
<td>Dele</td>
<td rowspan="2">14</td>
<td>08120601164</td>
</tr>
<tr>
<td>Segun</td>
<td>08148582483</td>
</tr>
<tr>
<td colspan="3">Note: These are the best 3</td>
</tr>
</table>

</body>
</html>

Check the browser result in the picture below.

*An HTML Table With a Caption*
To add a caption to a table, use the <caption> tag. The <caption> tag must be inserted immediately after the <table> tag:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<table style="width:100%">
<caption>Result sheet</caption>
<tr>
<th>s/n</th>
<th>Name</th>
<th>Position</th>
</tr>
<tr>
<td>1</td>
<td>Martha Okem</td>
<td>1st</td>
</tr>
<tr>
<td>2</td>
<td>Efe Matthais</td>
<td>2nd</td>
</tr>
<tr>
<td>3</td>
<td>Temi Peters</td>
<td>3rd</td>
</tr>
</table>

</body>
</html>

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 11:40am On Sep 04, 2020

*A Special Table Style Example*
To define a special style for a special table, add an id attribute to the table & you can use the hashtag (i.e. #) indicator in the CSS section (i.e. within the <style> element. Let's see:

<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
td:hover {
background-color: #999;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Grade Point Average</th>
</tr>
<tr>
<td>Kike</td>
<td>Olusegun</td>
<td>77</td>
</tr>
<tr>
<td>Garba</td>
<td>Ahmed</td>
<td>88</td>
</tr>
<tr>
<td>Jackie</td>
<td>Pala</td>
<td>85</td>
</tr>
<tr>
<td>Princess</td>
<td>Pala</td>
<td>76</td>
</tr>
</table>

<br>

<table id="t01">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Grade Point Average</th>
</tr>
<tr>
<td>Kike</td>
<td>Olusegun</td>
<td>77</td>
</tr>
<tr>
<td>Garba</td>
<td>Ahmed</td>
<td>88</td>
</tr>
<tr>
<td>Jackie</td>
<td>Pala</td>
<td>85</td>
</tr>
<tr>
<td>Princess</td>
<td>Pala</td>
<td>76</td>
</tr>
</table>

</body>
</html>

Notice the difference between not tables in your browser. This is as a result of the extra styling applied to the second table in the style sheet in the document <head> section. See every place #t01 occurs? The hashtag (#) points to any element in the document <body> section with an id equal to t01. Let me explain the code relating to id.

table#t01 tr:nth-child(even) {
background-color: #eee;
}

When the browser sees - table#t01 - it goes in search of any table with an id of t01. Remember tr represents table row. nth-child() is a selector that finds a child of an element as indicated with what index comes in the bracket. That is nth-child(0) will point to the first child, nth-child(1) to the second child, nth-child(2) to the third child ... and so on, counting starts from zero in programming. The tr:nth-child(even) refers to every table row of even index, meaning even numbers i.e. the second, fourth, sixth, eighth, tenth ... and so on. <tr> is a child of <table> as it comes directly inside it, <td> and <th> are siblings and children of <tr> as well as grand-children of <table>. Funny? Maybe, but it works. The above code therefore applies the background-color to even rows of the table marked with id t01. With this explanation, you can guess how the next code in the style sheet works.

table#t01 tr:nth-child(odd) {
background-color:#fff;
}

Simply means, every row that occurs in an odd index number inside the table marked with id t01 - first, third, fifth, seventh, ninth, eleventh ... and so on. The above code therefore applies the background-color to odd rows of the table marked with id t01. Now to the last code in the style sheet.

table#t01 th {
background-color: black;
color: white;
}

This automatically adds background-color and get color to the table headers of the table marked with id t01. Remember the stands for table header? Right!

Okay, now a quick recap.

<table> tag: Defines a table.
<th> tag: Defines a header cell in a table.
<tr> tag: Defines a row in a table.
<td> tag: Defines a cell in a table, means table data.
<caption> tag: Defines a table caption.
id attribute: Uniquely defines one element e.g a table.
colspan attribute: Merges a number of columns to span as one as indicated in the value.
rowspan attribute: Merges a number of rows to span as one as indicated in the value.
CSS border property: Defines a border.
CSS border-collapse property: To collapse cell borders.
CSS padding property: To add padding to cells.
CSS text-align property: To align cell text left, right or center.
CSS border-spacing property: To set the spacing between cells when borders are not collapsed.

There is a lot CSS permits you to do. What we have covered concerning styling is a tip of what you can create with CSS. We will do more as we continue. HTML is like a person bathed and clean, adding CSS is like putting on clothes and makeup to look better. I tell you, that's interesting. I have it for you to find out as we continue if you have not yet.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 2:18pm On Sep 04, 2020

*SOME NECESSARY POINTS BEFORE WE GO ON*

*WEB DESIGN LANGUAGES USE AMERICAN ENGLISH*
You would have noticed that the spellings of some words are not correct in our official British English Language, but they are very much correct in the American English Language. These languages were developed in American English.., so, the obvious, e.g color instead of colour

*USE OF SPACE BAR AND TAB TO INDENT NESTED ELEMENTS*
When you nest an element in another and you use multiple lines, you should create space between the start of the line and the nested element i.e. for indenting them e.g

<table>
<tr>
<th> Month </th>
<th> Year </th>
</tr>
<tr>
<td> April </td>
<td> September </td>
</tr>
</table>

Should be like this instead:

<table>
<tr>
<th> Month </th>
<th> Year </th>
</tr>
<tr>
<td> April </td>
<td> September </td>
</tr>
</table>

This is a better way to write code. It is neat, well-arranged & easily-formattable. Anyone can find stuff faster in this. If you are using a laptop, you can use tab key to create these indentations.

<div>
<h1> ... </h1>
<p> ... </p>
</div>
<div>
<p>
<img src="..." alt="..." width="..." height="...">
<span> ... </span>
</p>
</div>

*COUNTING STARTS FROM ZERO IN PROGRAMMING*
Simple: 01234567...
Not: 1234567...

The first number programmers count from is zero - 0.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 4:07am On Sep 05, 2020

*HTML – LISTS*

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may be:
<ul>- An unordered list. This will list items using plain bullets.
<ol>- An ordered list. This will use different schemes of numbers or alphabets to list your items.
<dl>- A definition list. This arranges your items in the same way as they are arranged in a dictionary.

*HTML Unordered Lists*
An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

*The type Attribute*
You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options:

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ul>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ul>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ul>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ul>

</body>
</html>

*HTML Ordered Lists*
If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol>tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

*The type Attribute*
You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is
a number. Following are the possible options:

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type="1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ol>type="I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ol><ol type="i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ol>
<ol type="A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ol>
<ol type="a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ol>

</body>
</html>

*The start Attribute*
You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options:

<ol type="1" start="4"> - Numerals starts with 4.
<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.

HTML Definition Lists
HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list. Definition List makes use of following three tags.
<dl> - Defines the start of the list.
<dt> - A term.
<dd> - Term definition.
</dl> - Defines the end of the list.

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl> Description List
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 6:24am On Sep 05, 2020

*HTML –LINKS 1*

*TEXT LINKS*
A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage.

*Linking Documents*
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document.

*The target Attribute*
We have used target attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are the possible options:
_blank: Opens the linked document in a new window or tab.
_self: Opens the linked document in the same frame.
_parent: Opens the linked document in the parent frame.
_top: Opens the linked document in the full body of the window.
Targetframe: Opens the linked document in a named target frame.
Example:
Try following example to understand basic difference in few options given for target attribute.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.html" target="_blank">Opens in New</a> |
<a href="/html/index.html" target="_self">Opens in Self</a> |
<a href="/html/index.html" target="_parent">Opens in Parent</a> |
<a href="/html/index.html" target="_top">Opens in Body</a></body>
</html>

*Use of Base Path*
When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

Powered by Programmers Community...

1 Like 1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 2:36pm On Sep 05, 2020

*HTML –LINKS 2*

*Linking to a Page Section*
You can create a link to a particular section of a given webpage by using id attribute. This is a two-step process.
First, id the section you want to go to when the link is clicked:

<h1 id="news"> ... </h1>

Second, create a link to the place where you want to reach within a webpage and id it using <a...> tag as follows:

<a href="#news"> Click to scroll to news </a>

On click of this link, the browser scrolls to the section of the page where that element with the news id is located on that same page.

What if you intend to visit a particular section on a different page? Simple as well! For example the section in question is:

<h2 id="notes"> ... </h2>

and exists on an html page named blog.html on the same directory (i.e folder) as the
h file you are working on, which carries your link text. Just do this on the link:

<p> <a href="blog.html#notes"> Click to see notes </a> </p>

This type of linking is referred to as BOOKMARKS.

*Download Links*
You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple; you just need to give complete URL (web address) of the downloadable file as follows:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<a href="http://www.gigabyteresources.com/files/page.pdf">Download PDF File</a>
</body>
</html>

The URL above shows that the file to be downloaded on click of the link DOWNLOAD PDF FILE, is named page.pdf and located in a folder called files. That folder is on the same folder/directory as the file you are working on.

*HTML – IMAGE LINKS*
It is a cute practice among programmers to use image as links to and bookmarks even. The method is no much different from the usual. It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text as shown below:

<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>

<p>Click following link</p>
<a href="http://www.gigabyteresources.com" target="_self">
<img src="/images/logo.png" alt="Tutorials Point" border="0"/>
</a>

</body>
</html>

*HTML Email Tag*
It is not difficult to put an HTML email link on your webpage but it can cause unnecessary spamming problem for your email account. There are people, who can run programs to harvest these types of emails and later use them for spamming in various ways.

You can have another option to facilitate people to send you emails. One option could be to use HTML forms to collect user data and then use PHP or CGI script to send an email. HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http.

<a href=”mailto: abc@example.com”>Send Email</a>

Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express etc.) installed on your user's computer. There is another risk to use this option to send email because if user do not have email client installed on their computer then it would not be possible to send email.

*Default Settings*
You can specify a default email subject and email body along with your email address. Following is the example to use default subject and body.

<a href=”mailto:abc@example.com?subjectFeedback&body=Message”>
Send Feedback
</a>

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 1:20pm On Sep 07, 2020

Hello all, a good day to you guys. I hope you have been doing some designing on your computer or phone as the case may be. Progress comes with practice guys ... Practice!

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 1:22pm On Sep 07, 2020

*HTML – FRAMES AND IFRAMES 1*

HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.

*Disadvantages of Frames*
There are few drawbacks with using frames, so it's never recommended to use frames in your webpages:
1) Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up.
2) Sometimes your page will be displayed differently on different computers due to different screen resolution.
3) The browser's back button might not work as the user hopes.
4) There are still few browsers that do not support frame technology.

*Creating Frames*
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames.

Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame. Example:
Following is the example to create three horizontal frames:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>

<frameset rows="10%,80%,10%">
<frame name="top" src="top_frame.html" />
<frame name="main" src="main_frame.html" />
<frame name="bottom" src="bottom_frame.html" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>

</html>

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 1:23pm On Sep 07, 2020

*HTML – FRAMES AND IFRAMES 2*

_self: Loads the page into the current frame.

_blank: Loads a page into a new browser window opening a new window.

_parent: Loads the page into the parent window, which in the case of a single frameset is the main browser window.

_top: Loads the page into the browser window, replacing any current frames.

targetframe: Loads the page into a named targetframe.

You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.

The src attribute is used to specify the URL of the document that occupies the inline frame. Example:

Following is the example to show how to use the <iframe>:

<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>

<p>Document content goes here...</p>
<iframe src="table.html" width="555" height="200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>

</body>
</html>

Make sure there is an html document with the name table.html in the same directory/folder as this html document you are working on. Check the below uploaded picture.

The <Iframe> Tag Attributes
Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc,
marginheight, marginwidth, name, scrolling, style, and title behave exactly like the corresponding attributes for the <frame> tag.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 4:47pm On Sep 07, 2020

*HTML – BLOCKS AND INLINE 1*

All the HTML elements can be categorized into two categories
(a) Block Level Elements
(b) Inline Elements.

*Block Elements*
Block elements appear on the screen as if they have a line break before and after them. They will not allow any other element to fall on the same line beside them whether before or after. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that comes before or follows them appears on its own new line.

*Inline Elements*
Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

*Grouping HTML Elements*
There are two important tags which we use very frequently to group various other HTML tags:

(i)<div> tag and (ii) <span> tag

*The <div> tag*
This is the very important block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define different parts (Left, Right, Top etc.) of the page using <div> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS.

Example
Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a
separate chapter but we used it here to show the usage of <div> tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>

<h1> Using The div Tag </h1>


<div style="color: red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
</ul>
</div>


<div style="color: green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>

</body>
</html>

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:53pm On Sep 07, 2020

*HTML – BLOCKS AND INLINE 2*

*The <span> tag*
The HTML <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has more meaning when it is used with CSS.

The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-level elements.

<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>

<h1> Using The span Tag </h1>

<p>This is <span style="color: red; font-style: italic;">red</span> and this is <span style="color:green"> <i>green</i> </span></p>

<span> Carry another span <span>element</span> </span>

</body>
</html>

Notice the font-style property with value of italic, does the same to thing as the <i> tag: makes the text it is addressed to appear slant. So the <span> appear appears within another element (either inline or block), but can only nest (carry within itself) other inline elements or another <span> element or just text.

Next I would like to show you something really interesting, but easy; a simple html tag that creates a marvelous effect you can 'wow' your pals with. Coming up...

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 12:24pm On Sep 08, 2020

*HTML - MARQUEE*

The <marquee> is a quite interesting HTML tag. Why interesting?

I say so because despite how simple it is, it serves a very awesome purpose - it creates somewhat like a special effect. That makes it simply awesome!

I won't try to explain this effect, instead I'll go straight to writing an example; urge you to do same as I do here, then try different content, play around with it. You would definitely be tempted to.

<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>

<style>
h1, h2 {
text-align: center;
}
</style>

</head>
<body>

<h1> Using The marquee Tag </h1>

<marquee> This element causes its content to scroll from right to left in a repeating cycle. </marquee>

<br/><br/>
<h1> CNN NEWS </h2>
<marquee> You have seen something like this in news stations </marquee>

<br/><br/>

<h2> News headline </h2>
<marquee> <img src="fy.jpg" alt="profile picture" style="width: 50px; height: 50px; border-radius: 50%;"> <i>Even other elements like the <img> and <i> can be used inside the marquee as you can see here. </marquee>

</body>
</html>

That's the <marquee> tag, how it works, what it does. I can't possibly demonstrate this effect in a pic. So I'll use several. Turns out I can! Anything is possible.

Awesome! Right?

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:19pm On Sep 09, 2020

*HTML – MARQUEES (continuation)*

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag.
Note: The HTML <marquee> tag may not be supported by various browsers so it is not recommended to rely on this tag, instead you can use JavaScript and CSS to create such effects.

<!DOCTYPE html>
<html>
<head>
<title>HTML Marquee</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<br/><br/><br/><br/>

<marquee width="50%">This example will take only 50% width</marquee>
<br/><br/><br/><br/>

<marquee direction="right">This text will scroll from left to right</marquee>
<br/><br/><br/><br/>

<marquee direction="up">This text will scroll from bottom to up</marquee>

</body>
</html>

Following picture shows a list of important attributes which can be used with <marquee> tag.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 12:18am On Sep 10, 2020

*HTML – BACKGROUNDS 1*

By default, your webpage background is white in color. You may not like it, but no worries. HTML provides you following two good ways to decorate your webpage background.
1) Html Background with Colors
2) Html Background with Images

Now let's see both the approaches one by one using appropriate examples.

*Html Background with Colors*
The bgcolor attribute is used to control the background of an HTML element, specifically page body and table backgrounds. Following is the syntax to use bgcolor attribute with any HTML tag.

Example
Here are the examples to set background of an HTML tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>


<table bgcolor="yellow" width="100%">
<tr>
<td> This background is yellow </td>
</tr>
</table>


<table bgcolor="#6666FF" width="100%">
<tr>
<td> This background is sky blue </td>
</tr>
</table>


<table bgcolor="rgb(255,0,255)" width="100%">
<tr>
<td> This background is green </td>
</tr>
</table>

</body>
</html>

Check out the picture uploaded below.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 12:20am On Sep 10, 2020

*HTML – BACKGROUNDS 2*

The background attribute can also be used to control the background of an HTML element, specifically page body and table backgrounds. You can specify an image to set background of your HTML page or table. Following is the syntax to use background attribute with any HTML tag.

Note: The background attribute is deprecated and it is recommended to use Style Sheet for background setting. The most frequently used image formats are JPEG, GIF and PNG images.

Example
Here is the example to set background images of a table.

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>


<table background="/images/html.gif" width="100%" height="100">
<tr>
<td> This background is filled up with HTML image. </td>
</tr>
</table>

</body>
</html>

Check out the picture uploaded below.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:00am On Sep 10, 2020

*HTML – COLORS 1*

Colors are very important to give a good look and feel to your website. You can specify colors on page level using <body> tag or you can set colors for individual tags using bgcolor attribute.

The <body> tag has following attributes which can be used to set different colors:

1) bgcolor - sets a color for the background of the page.
2) text - sets a color for the body text.
3) alink - sets a color for active links or selected links.
4) link - sets a color for linked text.
5) vlink - sets a color for visited links - that is, for linked text that you have already clicked on.

*HTML Color Coding Methods*
There are following three different methods to set colors in your web page:

1) Color names - You can specify color names directly like green, blue or red.
2) Hex codes - A six-digit code representing the amount of red, green, and blue that makes up the color.
3) Color decimal or percentage values - This value is specified using the rgb() property.

Now we will see these coloring schemes one by one.

*HTML Colors - Color Names*
You can specify direct a color name to set text or background color. W3C has listed 16 basic color names that will valid HTML validator but there are over 200 different color names supported by major browsers.

Note: Check a complete list of HTML Color Name.

*W3C Standard 16 Colors*
The image uploaded below shows the list of W3C Standard 16 Colors names and it is recommended to use them. Remember W3C, right?

World Wide Web Consortium. They are a governing body that serve the world wide web community establishing laws and setting guidelines. They provide a good number of colour names more than what you see below.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:39am On Sep 10, 2020

*HTML – COLORS 2*

*HTML Colors - Hex Codes*
A hexadecimal is a 6 digit representation of a color. The first two digits (RR) represent a red value, the next two are a green value (), and the last are the blue value (BB).

A hexadecimal value can be taken from any graphics software like Corel draw, Adobe Photoshop, Paintshop Pro or MS Paint, or any colour picker application on desktop or phone. Each hexadecimal code will be preceded by a pound or hash sign #. Shown in the first uploaded image below is a list of few colors using hexadecimal notation.

*HTML Colors - RGB Values*
This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.

Note: Not all browsers support rgb() property of color so it is recommended not to use it so much.Shown in the second uploaded image below is a list to show few colors using RGB values.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 1:07pm On Sep 10, 2020

*HTML - COLORS 3*

*Browser Safe Colors*
Here is the list of 216 colors which are supposed to be safest and computer independent colors. These colors very from hexa code 000000 to FFFFFF and they will be supported by all the computers having 256 color palette. Example shown in pictures uploaded below.

There are however certain advantages to using each of these colour indication patterns. That is another topic.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 2:09pm On Sep 11, 2020

*HTML - COLORS 4*

The reason I'm extending our lesson of HTML COLORS is that your understanding of it provides you with some real advantages like creating colours of any shade, using colours without having to know or remember their names, determining intensity of colours, and manipulating the transparency/opacity of colours.

*Colour Names*
Colour names are limited in that there are not enough names to cover all the colours and shades that can be produced. The mixing of the primary colours - red, green, blue - in varying proportions, produces different shades of other colours. Names can not be given to each and every colour shade, there are only less-than-enough we are familiar with today. With the use of HEX and RGB VALUES, this disadvantage is removed. We do no have to know all the existing colour names in order to refer to them, and we can use mixes that exist without names. How does this work? Easy!

Light is a spectrum with particles. The more the particles, the higher the intensity of the light. Science teaches us that everything in this world is made up of particles; small tiny particles in the smallest and simplest of forms and sizes. You can call them atoms. Taking this from our science lessons, light itself has small tiny particles that make up its rays.

In simple terms, put enough light particles together, you will produce light of a certain colour depending on the colour-mix of particles. The three primary colours are mixed to produce all the others. When you give a full red, full green, and full blue, you will get white. So it works with light particles. Black is simply the absence of colour; no colour at all, no red, no green, no blue. This is where RGB and HEX get their mix paterns from.

*HEX VALUE*
The light intensity range is 0 to F, 0 being the least and F being the highest. That is we have: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. When you do #F00, you have given red full intensity and gave no blue nor green, that produces red colour. As you increase an colour from 0 upwards, the colour mixes. Same happens as you reduce from F. Try something yourself, and upload your result.

*RGB VALUE*
The same idea for HEX works for RGB, difference is the range is from 0 to 255; 0 the least, 255 the highest. rgb(0, 255, 0) produces green.

However, there is one advantage in using HEX and one in using RGB.

1) HEX provides double the range of mixture that RGB provides. You double the values for each colour when using HEX. If you do #FF0000, it means FF for red, 00 for green and 00 for blue.

2) RGB provides another property: opacity. rgba(0, 255, 0, 0.5) will produce blue with 50% transparency. The 'a' property added to rgb provides the transparency, ranging from 0 to 1, 0 being full transparency while 1 being no transparency. We have 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.

Note: Forgive me for my inconsistency with my spelling of the word 'colour'. Sometimes I use 'color', because it is American and American English is the language of development of WEB LANGUAGES, like the one we are currently learning: HTML.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:40pm On Sep 12, 2020

*HTML – FONTS 1*

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font>tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.

The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag.

Note: The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this lesson will explain font and basefont tags in detail.

*Set Font Size*
You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3. Fonts can also take numeric values of px, em, cm and % units. Example:

.
.
.
<body>
<font size="1">Font size="1"</font><br />
<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font>
</body>
.
.
.

See the first image uploaded below...

*Relative Font Size*
You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size="+n"> or <font size="-n">. Example:

.
.
.
<body>
<font size="-1">Font size="-1"</font><br />
<font size="+1">Font size="+1"</font><br />
<font size="+2">Font size="+2"</font><br />
<font size="+3">Font size="+3"</font>
</body>
.
.
.

See the second image uploaded below...

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:50pm On Sep 12, 2020

You are a beginner to web programming, you have duly followed this post up to this point, practised as you did, yet you have not found this post helpful. Please quote me, telling me why so. Thanks!

Powered by Programmers Community...

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 10:11am On Sep 13, 2020

*HTML - FONTS 2*

*Setting Font Face*
You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user's computer. Example:

.
.
.
<body>
<font face="Times New Roman" size="5">Times New Roman</font><br />
<font face="Verdana" size="5">Verdana</font><br />
<font face="Comic sans MS" size="5">Comic Sans MS</font><br />
<font face="WildWest" size="5">WildWest</font>
</body>
.
.
.

See the first image uploaded below...

*Specify alternate font faces*
A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma. Example:

.
.
.
<font face="arial,helvetica"> Test alternate fonts </font>
.
.
.

When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.

*Setting Font Color*
You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color. Example:

.
.
.
<font color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
.
.
.

See the second image uploaded below...

*The <basefont> Element*
The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.

The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or -2 for two sizes smaller. Example:

.
.
.
<body>
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size="+2" color="darkgray">
This is darkgray text with two sizes larger
</font></p>
<p><font face="courier" size="-1" color="#000000">
It is a courier font, a size smaller and black in color.
</font></p>
</body>
.
.
.

See the third image uploaded below...

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 5:13pm On Sep 13, 2020

*HTML – MULTIMEDIA*

Multimedia on the web, is sound, music, videos, movies, and animations. Multimedia comes in many different formats. It can be almost anything you can hear or see. Examples include pictures, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats.

*Multimedia Formats*
Multimedia elements (like sounds or videos) are stored in media files. The most common way to discover the type of a file, is to look at the file extension. When a browser sees the file extension .htm or .html, it will treat the file as an HTML file. The .xml extension indicates an XML file, and the .css extension indicates a style sheet file. Pictures are recognized by extensions like .gif, .png and .jpg. Multimedia files also have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

*Common Video Formats*
They include MPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MPEG-4 or MP4. Only MP4, WebM and Ogg video are supported by the newest HTML5 standard, their media types are respectively, video/mp4, video/webm and video/ogg.

*Common Audio Formats*
They include MIDI, RealAudio, WMA, AAC, WAV, Ogg, MP3, MP4 is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music.If your website is about recorded music, MP3 is the choice. Only MP3, WAV, and Ogg audio are supported by the newest HTML5 standard, their media types are respectively, audio/mpeg, audio/wav and audio/ogg.

*Playing Videos on Web*
Before HTML5, there was no standard for showing videos on a web page. Before HTML5, videos could only be played with a plug-in (like flash). The HTML5 <video> element specifies a standard way to embed a video in a web page.

To show a video in HTML, use the <video> element:

.
.
.
<video width=”320” height=”240” controls>
<source src=”movie.mp4” type=”video/mp4”>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
.
.
.

The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads. Text between the <video> and </video> tags will only display in browsers that do not support the <video> element. Multiple <source> elements can link to different video files. The browser will use the first recognized format.
To start a video automatically use the autoplay attribute:

.
.
.
<video width=”320” height=”240” autoplay>
<source src=”movie.mp4” type=”video/mp4”>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
.
.
.

The autoplay attribute however, does not work in mobile devices like iPad and iPhone.

*Playing Audios on Web*
Before HTML5, there was no standard for playing audio files on a web page. Before HTML5, audio files could only be played with a plug-in (like flash). The HTML5 <audio> element specifies a standard way to embed audio in a web page.

To play an audio file in HTML, use the <audio> element:

.
.
.
<audio controls>
<source src=”horse.mp3” type=”audio/mpeg”>
<source src=”horse.ogg” type=”audio/ogg”>
Your browser does not support the audio tag.
</audio>
.
.
.

The controls attribute adds audio controls, like play, pause, and volume. Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element. Multiple <source> elements can link to different audio files. The browser will use the first recognized format. The autoplay attribute also goes for audio as in video.

HTML5 defines DOM methods, properties, and events for the <video> and <audio> elements. This allows you to load, play, and pause videos and audios, as well as setting duration and volume. There are also DOM events that can notify you when a video begins to play, is paused, etc.

Powered by Programmers Community...

1 Share

Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 4:38pm On Sep 14, 2020

*HTML – FORMS 1*

HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

*Form Attributes*
Apart from common attributes, following is a list of the most frequently used form attributes:

action - This points to the Backend script ready to process your passed data.

method - Method to be used to upload data. The most frequently used are GET and POST methods.

target - Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.

enctype - You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are:

1) application/x-www-form-urlencoded - This is the standard method most forms use in simple scenarios.

2) mutlipart/form-data - This is used when you want to upload binary data in the form of files like image, word file etc.

*HTML Form Controls*
There are different types of form controls that you can use to collect data using HTML form:
Text Input Controls
Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Hidden Controls
Clickable Buttons
Submit and Reset Button

Try this:

<! DOCTYPE html>
<html>
<head>
<title> Forms </title>

</head>
<body>

<form action="form_process.php" method="POST">
<label> First name: </label>
<input type="text">
<br/><br/>

<label> Last name: </label>
<input type="text">
<br/><br/>

<label> Email: </label>
<input type="email">
<br/><br/>

<label> Sex: </label>
<b> male </b>
<input type="radio" name="sex">
<b> female </b>
<input type="radio" name="sex">
<br/><br/>

<textarea> Drop your comment here </textarea>
<br/><br/>

<input type="button" value="Submit form">

</form>

</body>
</html>

Powered by Programmers Community...

1 Share

(1) (2) (3) (4) (5) (Reply)

Domain Name Needed For Headtie/Gele Online Shop / Please I Need Monetization Ideas For My Blog / 5 Powerful Steps To Optimize Your Website On Google Search

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 243
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.