Tech

Making Your Own Web Page is Easy – A Tutorial (Part 2)

MAKING WEB PAGE : Type the above in your mywebpage.html inside the body tags, save and revive your program. That’s the table on the web. Alluding to the above html codes, width alludes to the width of the entire table (you may also utilize pixel here like “800”).

Published

3 weeks ago

June 5, 2019

Buyung Afrianto

Presently, Let’s proceed with Part 2. We will talk about the accompanying here:

Creating tables. Utilizing CSS boxes as webpage layout. Here’s how:

#1 Creating Tables

Tables are extremely valuable in the presentation of data. Coming up next are the html tags to be utilized to create a basic table:

Single-segment table:

</table>

Type the above in your mywebpage.html inside the body tags, save and revive your program. That’s the table on the web. Alluding to the above html codes, width alludes to the width of the entire table (you may also utilize pixel here like “800”), fringe is the outside line or layout of the table, cellspacing is the space between the phones, cells are where the data are located, cellpadding is the space among outskirt and cells. You may change the values of these table attributes or properties based on your inclination or necessity.

In spite of the fact that the above table html codes are as yet working, W3C.org requires the table properties or attributes be characterized in the templates or CSS. Utilizing CSS, the above table properties could be displayed as pursues:

Inside style tags in the head:

.type1 {

width: 400px;

padding: 4px;

margin: 2px;

}

.outskirt {

outskirt: 1px strong #000;

}

At that point, inside the body tags:

</table>

Taking a gander at the codes, “type1” is gone before by spot (.), meaning it is a class selector. For the following kind of table properties or attributes, you may label it as type2, at that point type3 and so on or with different names you like. “fringe” is also a class selector and “outskirt: 1px strong #000” is the thickness (1px), fringe type (strong) and shading (#00f) of the fringe. There are more talks of CSS in “Creating CSS boxes as web page layout” and in “Utilizing CSS in styling your web pages“

In the event that you want to attempt the above, at that point type the codes inside the style and body tags as noted, save it and invigorate your program. It must be the same as the first.

Presently, we should make a 2-section or multi-segment table:

</table>

Type the above in your mywebpage.html inside the body tags, save and invigorate your program. That’s the 2-segment table on the web. To add a section, simply embed <td></td> after </td>. 1 <td></td> is one section, 1 <tr></tr> is one line and 1 <table></table> is one table.

Presently, lets make a table with 1 main heading and 3 subheadings:

<tr><td colspan=”3″>Main Heading</td></tr>

<tr><td>Subheading 1</td>

<td>Subheading 2</td>

<td>Subheading 3</td></tr>

</table>

Type the above in your mywebpage.html inside the body tags, save and revive your program. Isn’t it obvious? Indeed, simply use colspan to consolidate the segments. To blend 2 sections, use colspan=”2″ and for 3 segments, use colspan=”3″ and so on.

On the off chance that you want to union columns, use rowspan instead of colspan. See this example:

<tr><td rowspan=”2″>merge push data</td>

</table>

Presently, type the above in your mywebpage.html inside the body tags, save and revive your program. Presently, you see that 2 pushes in your first section were consolidated. Have a go at creating your own table utilizing various values to familiarize yourself in manipulating tables.

#2 Creating CSS Boxes for Web Page Layout

Previously, tables are being utilized as layout of a web page. In this way, the header, right bars, left bars, main substance areas and footer are within a table. This hinders the loading of the page as the program should finish first the table before it will display the substance. Your visitor may have already left before your page could be displayed. In the event that you want to utilize table as your layout, you have to avoid utilizing huge tables. You better utilize small tables to allow the program display your page gradually however faster.

Despite the fact that table could at present be utilized, W3C requires CSS boxes to be utilized for layout instead of tables because of the issue of accessibility. CSS boxes load faster than tables. These could be controlled inside the templates that could be inside the head tags or in separate CSS record. The most critical part in css boxes is the situating. Along these lines, I’ll explain to you the situating properties of these crates, based on my experience:

position: absolute – You have to characterize the x-axis and y-axis as perspective of the edge of the crate. x-axis is either left or right and y-axis is either top or bottom. You have to characterize also the width or the left and right margin or padding of the crate. The case isn’t affected by the former or ensuing boxes. In like manner, the crates going before or following the containers that are situated as absolute are also not affected. float: left or right – You have to fix the width. You also need to choose assuming left or right. The case will lean as an afterthought you chose. It will lean on the case going before it if there is sufficient space for it. This is affected by the different boxes aside from the absolutely situated boxes.

no position or position: static or fixed – This pursues the normal stream. This is also affected by the different boxes aside from the absolutely situated ones. You have to characterize the width or the left and right margin. Presently, see the illustration beneath that will create 5 boxes, namely: headerbox, leftbox, centerbox, rightbox and footerbox. These are fluid boxes, which automatically adjust in width when the display window size of the PC is changed:

body {

content align: focus;

margin: 1px;

}

#headerbox {

width: 100%;

stature: 15%;

background-shading: #9cf;

fringe: 1px strong #00f;

padding: 0px;

margin: 0px;

}

#rightbox {

float: right;

width: 20%;

margin-top: 5px;

content align: focus;

background-shading: #cff;

fringe: 1px strong #00f;

stature: 100%;

}

#leftbox {

float: left;

margin-top: 5px;

width: 20%;

content align: focus;

background-shading: #cff;

fringe: 1px strong #00f;

stature: 100%;

}

#centerbox {

width: 99%;

margin-top: 5px;

content align: focus;

background-shading: #cff;

outskirt: 1px strong #00f;

tallness: 100%;

}

#footerbox {

width: 100%;

content align: focus;

tallness: 15%;

vertical-align: center;

margin-top: 5px;

background-shading: #9cf;

outskirt: 1px strong #00f;

}

</style>

</head>

<body>

HEADERBOX content area

LEFTBOX content area

RIGHTBOX content area

CENTERBOX content area

FOOTERBOX content area

</body>

Initially, you type the above html codes to you mywebpage.html inside the head, style and body tags as noted in the above. At that point, save it and invigorate your program or open the document with your program. Are you seeing the headerbox on the top, the leftbox, rightbox and centerbox in the center and footerbox at the bottom? Endeavor to change the width of your program window. Could it be any more obvious? The width of the crates are also adjusting and that is phenomenal as your page will auto-adjust contingent upon the program window size of your visitors! That is because I utilized %s in characterizing the width of boxes.

Presently, let me explain the above codes for creating boxes as your layout.

headerbox

– went before with #, meaning it is an id selector and could be utilized just once per page; float: left means the case will lean on the left whenever fit; width: 100% means the container is 100% of the program window and that is the reason why it is fluid; stature: 15% means the case is 15% of the program window; content align: focus is the alignment of the articles or characters inside the case; background-shading: #9cf is the shade of the space inside the crate; fringe: 1px strong #00f is same as talked about in Creating Tables.

rightbox

– same explanations in the above aside from the float: right which means the case will lean on the privilege and margin-top: 5px is the distance from the bottom line of the case above (headerbox).

leftbox

– same explanations in the above.

centerbox

– same explanations in the above with the exception of that it has no position characterized, meaning it will pursue the normal. It will fit itself based on the available space. This will be its 100% or full size. More than this point of confinement will distort the crate alignment.

footerbox

– same explanations in the above with the exception of the vertical-align: center, which means that the articles or characters inside the container will be vertically-aligned in the center.

Take a stab at changing the values of the values of the css boxes above, at that point save. Revive your program and familiarize yourself with the impact of each change. Please note, however that there may be minor contrasts if the above css boxes are displayed with programs other than web traveler like firefox and opera

Buyung Afrianto

Buyung Afrianto (UCLA ’26) is a serial technopreneur who founded Buyung Technologies Co., Ltd, a holdings company that owns: BuyungAfrianto.com™ | The latest daily blog site that presents news of the day and the latest news around the world to finance, lifestyle, automotive and sports news. And a very profitable Instagram channel @BuyungAfrianto also Twitter Account @BuyungCo . By doing what he love for living, he brings new meaning to the art of freedom. If I can be of any help or if you would like to do business with me, don’t hesitate to reach out!

Up Next

Making Your Own Web Page is Easy – A Tutorial (Part 3)

Don't Miss

Making Your Own Web Page is Easy – A Tutorial (Part 1)

Click to comment

Tech

Making Your Own Web Page is Easy – A Tutorial (Part 3)

MAKING WEB PAGE : It is important to create and place hyperlinks in your website to enable your visitors to navigate your webpage from pages to pages. These are the connections displayed in your web pages that will change the web page displayed when clicked by visitors.

Published

3 weeks ago

June 6, 2019

Buyung Afrianto

Here’s the last part of this tutorial. Our topics are:

Connecting different pages and different websites. Utilizing CSS in styling your web pages. How about we start here.

#1 Creating and Placing Hyperlinks

It is important to create and place hyperlinks in your website to enable your visitors to navigate your webpage from pages to pages. These are the connections displayed in your web pages that will change the web page displayed when clicked by visitors. These must be unmistakable and appropriately placed in your pages. If not, your visitors will be befuddled and will eventually leave your site unhappy or unsatisfied. Consequently, he may stay away for the indefinite future. In this way, make beyond any doubt that your hyperlinks are noticeable, spellbinding and precise placed in your pages.

Linking your pages

In page 1, you have to place the accompanying code where you want the visitor to snap to go to your page 2:

<a href=”http://your-domain-name.com/page-2-name” title=”description utilizing relevant keywords”>your connect description</a>

Taking a gander at the codes, “an” is html anchor tag utilized for hyperlinks, “href” is the attribute alluding to the URL of the destination page and “title” alludes to the depiction of your connection. On the off chance that conceivable, utilize relevant watchwords in your portrayal for search motor optimization. Presently, type the above in your mywebpage.html and replace the domain name, web page name, title and connection portrayal with yours. Utilize relevant catchphrases in your connection portrayal for search motor optimization. At that point, save and revive your program to show you how the above is displayed on the web.

To see more, float or place your cursor on the connection. The “title” value will be displayed on the connection while the “href” value or URL of the destination page will be shown at the left half of the bottom bar of program window. It may work just on the off chance that you are on the web and your webpage is already active on the web.

Linking to other websites

You have to place the accompanying code in your website pages where you want your visitors to snap to go to other particular websites:

<a href=”http://other-site-domain-name.com/page-name” title=”description utilizing relevant catchphrases” target=”_blank”>your connect description</a>

In the event that you see, it is the same as connecting your web pages however it is indicating other website. Along these lines, we added the “target” attribute with value of “_blank” to open the destination page into new program window. This will make your webpage remain active or open regardless of whether your visitors click the connection to other website. To attempt it, type the above in your mywebpage.html and replace the domain name, web page name and connection portrayal with yours. Utilize relevant watchwords in your connection portrayal for search motor optimization. At that point, save and revive your program to how the above is displayed on the web. Snap the connection and another program window will open while the page where you tapped the connection remained open.

Hyperlinks with images

You may utilize images in your hyperlinks. In this case, the visitors can click an image in your web pages with connections that will send them to different pages in your webpage or to different websites you have connected to. See the example underneath:

Linking to your other web pages

Linking to other websites

In the event that you see, it is much the same as you are embeddings an image to your web page. The main distinction, it is placed between the anchor tags <a href=”URL”></a>. In this way, in place of connection depiction, you use image. At the point when your visitors click the image, the page will change to the destination page. To attempt the above, place the image that you want to be utilized with hyperlinks in the same directory where your mywebpage.html is located. At that point, type the above codes in your mywebpage.html yet type just the image filename in the “src” value. At that point, save and revive the program to impact the changes. Drift or place your cursor on the image. The “alt” value or the image depiction will be displayed on the image while the “href” value or URL of the destination page will be shown at the left half of the bottom bar of program window.

#2 Styling Your Web Page Utilizing CSS

W3C.org requires the website style definitions must be placed in the templates or CSS. Styles are utilized to manipulate the design of the website such text dimensions, hues, textual style face, box properties, table properties, paragraph format, and so forth. Placing your styles inside the head or in a separate CSS record let you control the style of your web pages in only one page. Presently, I will reveal to you the easy way to create your templates inside the head tags and how it is executed in the inside the body tags.

To characterize a style, you have to utilize a selector as a kind of perspective. Basic selectors are body, div, span, li, table, td and p. div is utilized for gathering of paragraphs, p is for one paragraph, span is for chosen characters, words or phrases, li is for records, table is for table and td is for table data. The beneficial thing here is you can make your very own selectors utilizing names you like. Creating templates is the same as what we have done in CSS boxes. Whatever style properties you assigned to those selecters, it will affect area or substance of your web pages where you have utilized the relating selectors. See example beneath:

body {

margin: 10%;

shading: #00f;

background: #ff0;

content align: focus;

}

</style>

In the above style, all your substance inside the body tags (<body> and </body>) will have the above style properties. Attempt it by composing the above in your mywebpage.html inside the head tags. Save it and revive your program and see impact in your web page.

How about we see another example:

p {

margin: 20px;

shading: #cff;

background: #ccc;

content align: right;

}

</style>

All of your substance that you have placed inside <p> and </p> will have the above style properties. Presently, type the above to your mywebpage.html inside the head tags, save and revive your program and see the outcomes. Presently, we should make our own selectors. As explained in creating CSS boxes, we can make an id and a class selectors and execute as pursues:

#ownidselector {

margin: 0px;

content decoration: underline;

background: cff;

}

.ownclassselector {

margin: 10px;

text dimension: 16px;

text style: italic;

shading: #f00;

}

.ownclassselector2 {

text style weight: strong;

text style family: messenger;

fringe: 1px dashed #cff;

}

</style>

<body>

This is an example of utilizing the id selector

This is an example of utilizing the class selector

This is an example of utilizing both the id and class selectors

<span id=”ownidselector”>This is an example</span> of utilizing span with id selector and <span class=”ownclassselector”>class selector</span>

This is an example of utilizing <span id=”ownidselector” class=”ownclassselector”>both the id and class selectors</span>

This is an example of utilizing <span class=”ownclassselector ownclassselector2″>the two class selectors at the same time</span>

</body>

Allows me explain to you the above style properties that are not examined in Creating CSS Boxes:

content decoration: underline – creates underline to the content or characters. You may utilize “none” instead of “underline” to expel the underline.

text dimension: 16px – fixes the extent of the textual style inside the affected selector. You may utilize px, em, pt and % as unit of measure.

textual style: italic – makes the content or characters italic. You may also utilize normal, slanted.

shading: #f00 – characterizes the shade of the content or characters. You may utilize distinctive web hues here. It is advisable to utilize web-safe hues as different PCs or programs couldn’t display different hues.

textual style weight: striking – makes the content or characters intense. You may utilize also normal, bolder, lighter, 100 up to 900.

textual style family: messenger – characterizes the text style sort of the content or characters. Normal text style types are arial, verdana and helvetica.

Type the above codes to your mywebpage.html inside the style and body tags as noted, at that point save and revive your program to see the impacts of the above style properties. You may change the values, at that point save and revive to familiarize yourself with styling properties. For complete web-safe shading codes and complete rundown of style properties, basically visit my webpage. When you have already familiarized yourself with the html and CSS codes, it will be easy for you to create a web page. I expectation you’ve learned something in this tutorial. Simply keep practicing and learning. Research, research, research. There so many free tutorials here on the web. To learn a greater amount of HTML and CSS, search Google by composing “html tutorial” or “css tutorial” – Click Search and you will discover many decisions. For standards, you may visit www.W3C.org