₦airaland Forum

A PICTURE IS WORTH A THOUSAND WORDS

HTML Tables
HTML Tables are used to arrange tabular data on a webpage. It is defined with the <table> tag.
A normal table (on paper) is divided into rows and columns. The intersection of a row(Horizontal) and a column(Vertical) produces a cell. It is in this cell data is inputed.
In HTML, tables are "drawn" row by row. A row is defined with the <tr> (table row) tag. This row can contain any number of cell. This that we refer to as cell is defined with the <td> (tabular data) tag.
Thus, the HTML code for a row containing 2 cells will be
<table>
<tr>
<td>1st Cell</td>
<td>2nd Cell</td>
</tr>
</table>
NOTE: To add another row, include another <tr> tag after the closing </tr> tag of the previous row.

cannonnier: i made a mistake. i switching on my laptop and left the dvd rom open. i did not realise when my little sister drag and remove the dvd rom from the pc which made the sytem hanged and the monitor blinking. i quickly remove the power outlet and the battery.. and on it some minute later, the monitor will not display but the power indicator is there on(meaning the laptop is on), and cant be switched off unless the battery is being removed.
WHAT SHOULD I DO?

This a technical fault and I suggest you give it to a specialist in that field.

slimzz: please i am new and will like to know more. actually a mechanical engineer by profession but i want to divert to information technology. where should i start?

HTML is the foundation of Website Creation. But you have to be more specific- which part of IT?

setraco: Part3 is missing jor

Check the 29th/30th post on page 2 of this thread for the breakdown.

puscifer: pls how do i bold a text

The Bold <b> tag: This tag makes
the selected text bold.
<b>Text</b>

Example of description list in code and browser views.

brownlord: Oga iyenimofe, am having a problem with my pc, is it true that before i can build a website i need to remove all other browser on my system living only internet explorer

? No, you can have as many browsers as you want on your. P.C while coding

brownlord: when am trying to work on html, if i save and want to come later to continue my work, am not able to even thou i go to page source to enable me continue, instead of it to show on a note pad, it will open another tab on which ever browser i use in opening it, abeg sir what can i do

Right click on the HTML file and select “Open with Notepad” and let me know if that works.

3)Description Lists:
This type of list differs a little from the previous two.
The list itself is defined with the <dl> tag. What was called list item in the previous ones, is now called description terms and is defined with the <dt> tag. Each <dt> element can be described further with the <dd> tag.
Syntax
<dl>
<dt>Item</dt>
<dd>Item Description</dd>
<dt>Item</dt>
<dd>Item Description</dd>
</dl>

Code view and Browser view of an example of Ordered lists.

2)Ordered Lists: The differences between ordered and unorderd lists are:
i) Instead of bullets, ordered lists have numbers before them. These numbers are affixed to each list item serially.
ii) The <ul> tag is replaced with the <ol> tag. List items are still defined with the <li> tag.
Syntax
<ol>
<li>List Item</li>
<li>List Item</li>
</ol>

emorse: thanks for confirming my thoughts bro. But how much will it cost me to set up a "professional" website myself? I know it costs 1.5k - 2.5k to register a domain name. What other costs will I incure?

1: Web Hosting (The price varies with services offered and the host company)
2:CMS (Optional and could be free or not)
3:FTP (Optional and could be free or not)
4:Image Editor (If you collaborate with a Graphic s Artist-which will reduce your workload-it won't be necessary)
5:Advertising

Code View and Browser View of An Example of Unordered Lists.

PART 5
Session 1
HTML Lists
In our daily life, we make use of lists largely. Likewise, in HTML lists are used to display sentences, links, images and even other lists. Three types of lists can be created in HTML.
1)Unordered Lists: Unordered here does'nt mean random(scattered) items on your page. Unordered list items are alligned vertically with each list item begining on the next line. Each item has a bullet(bold circle) before it.
Unordered lists are defined with the <ul> tag. Each list item is definfed with the <li> tag.
Syntax
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>

emorse: Ok. Its about google business site builder. I came across it recently and thought it was a good idea to get a cheap, fully functional website(through GNBO). But experience has taught me that nothing good comes easy. I'd like to have your professional opinion on it. Can it truly create "professional" looking websites? If yes, what are its limitations?
NB: I am very new in the website field.

You see Emorse, when some just join this "our" profession, they are tempted to jump unto anything tagged free. There is nothing like "Nothing for Something", even the GNBO charges for some of their services after some time. The GNBO is meant for business owners that want to cut the cost of hiring a webmaster. So the website produced by the site builder, cannot have that professional feel. (Though, I wonder why you'll want to use a site builder, as it'll not build your coding abilities).
However, Google Site builder can be used to create intranets, which are to be used within an organization and not by the public. It is useful in this regard because of Google's other tools. If you use it to create a business website (which'll be publicly accessable), don't put in your name as the webmaster, as the resulting site (with its poorly designed "free" themes) is nothing a true webmaster should be proud about.

emorse: its been three days now and I'm still waiting. Or should I just go ahead and ask my question here? Please respond. Thanks

I think I have but you can post it here, however.

The amazing thing is that some web browsers (if not all) warn the user that a site is not secure for transfer of sensitive information (e.g credit card information) if an ssl certificate is absent. Yet, some will refuse to buy one complaining of the price. Now compare this to the number of customers that will be lost. Some people sha...

Omerian Consult: However, your entire lecture here can be read up in < an hour so try to speed up a little, or can you help we intermediate learners with good self-study materials?

Omerian Consult, we have to remember that there are people that are just learning HTML for the first time. However, we'll be through with HTML soon (4 more parts). After this, links to a book (by me) that treats HTML exclusively (which is definitely more advanced but explicit), will be posted on this thread. This will be the process for CSS, JavaScript, PHP, SQL, e.t.c.
So just hang around till we get there. Gracia!

omoelu1: you are supposed to save it with a “.html“ extension now.

Simply type the file name and add .htm or .html at the end.

Next, we move to PART 5- Lists and Tables

Image Loading Optimization:
When images are added to a webpage it increases the loading time of the page. This is because when the webpage itself is loaded, the image (being a seperate file) also loads simultaneously. So if your webpage contained 2 images, total number of files that'll be uploaded will be 3 (including the webpage itself). This information being known, it is necessary to optimize an image so as to reduce its loading time. To do this you'll need an image editor. We have many image editors (free and commercial). Examples include Adobe Photoshop, Corel Photopaint, Macromedia Fireworks, e.t.c
TIP: I personally use Macromedia Fireworks as it was created to deal with web based images.
Though, the processes differ according to the program, it should be able to:
1- Reduce the size of the image
2- Crop out unnecesary areas
3- Reducing the number of colours (GIF) or the quality (JPG)
The above processes are explained in the HELP section of each program, as treating such here will constitute to diversion.

PART 4
Session 5
Image Formats
There are numerous image formats but only a few are acceptable on the internet. I will discuss 2 of the acceptable formats.
1-JPG or JPEG (Joint Photographic Experts Group): This format is used with images that contain thousands of colors e.g photographs
2-GIF (Graphics Interchange Format): This image is used for images with few colors and clearly defined lines e.g logos and icons.
To change the format of an image, import it into an image editor e.g Adobe Photoshop and click on "Save As" in the "File" drop-down menu. Just change the extension to .jpg or .gif

Olarewajub: Public Note: This to inform everyone that you are mandated to come with your school fees or you will be driven home.

Olarewajub, this thread is free for all. Though, I wonder how you intend to "drive home" debtors.

exellent91: Pls how can i put price e.g in games and movies,so dat when people download ma games the money wil go to ma account,for site development.pls i need help

You have 2 options:
1) Provide a bank account number for payment on purchased items. This technique is not feasible though (except you can find a bank that has branches in all the countries on earth).
2) Provide payment through credit card: To do this sign up with a merchant involved with such(e.g PayPal). Just go to their site and follow the instructions. Voila!

exellent91: What time does lecture start.

The are no time boundaries, you learn anytime you get here.

Boss, I think you gotta work on the mobile view (considering the amount of users on mobile devices)

exellent91: Pls this class is the only thing that keeps us busy as students during this strike.pls dont also go on strike.cos an idle man is a devils workshop.

No worries, no strike here.

exellent91: My second question is to know when the doctype declaration fall in.whether is after opening ur browser's file on property bar

The <!DOCTYPE> is not visible in the webpage itself or the properties bar. However, you can view the <!DOCTYPE> of a page by viewing the page source.
To do this right-click on a blank space on the webpage and click "view page source"
It would be the first thing you would see on the page.

HTML Images
I have hardly come across a website that does not have an image.This shows that images are very important in increasing the visual appeal of a webpage.
Images are added with the <img> tag.The image appears where the <img> tag appears on the webpage. Like the <a> tag, <img> tag is useless without attributes and values.The most important attributes of the <img> tag are:
1- The src (source) attribute: The src attribute specifies the location of the image. All attributes have values (which are always in quotation marks), and the value of the src attribute is the URL of the image.
Syntax:
<img src="url">
NOTE: You might notice that there is no closing </img> tag. That's not an error. The <img> tag does NOT have a closing tag, thus it is an empty tag.

2- The alt (alternative) attribute: The alt attribute specifies an alternative text that is shown instead of an image due to a problem. This problem may occur if there is an extremely slow internet connection, an error in your coding,e.t.c. The alt value is the text shown when the mouse is hovered across the image and is what is read out by a screen reader (which is used by the disabled). Considering these, it is vital that your alt text adequately describes your image. TIP: The alt text is also useful for Search Engine Optimization.
Syntax:
<img src="imageurl" alt="Alternative Text">

3- The width and height attributes:
The width and height attributes specify the dimensions of an image pixels. If you don't include the width and height attributes the browser would still load the image BUT it will size it anyhow it wishes which may affect the appearance/structure of your page.
Final Syntax for an image:
<img src="imageurl" alt="Alternative Text" width="100" height="100">
NOTE: The value "100" used for the width and height attributes are just examples. You can use any value.

Other attributes of the anchor<a> tag
1- The Target(target) attribute: The target attribute tells the browser where to open the destination page. It could open the destination page in a new tab or in an entirely new window. If the target attribute is not specified the destination page would be opened in the same tab that contained the source document.
2- The id attribute: This attribute is used to link to a particular section in a document. This is how it works. A bookmark is created on the section that is to be linked to. The id attribute is now placed in the <a> tag. Its value is that section that was bookmarked.
Example:
<a href="#learnhtml">Jump to Learn HTML Section</a>
Where "#learnhtml" was placed as a bookmark in the "Learn HTML" section. When the link "Jump to Learn HTML Section" is clicked, it will take the user to that particular section on the page.
This is an example to link to another section on the same page.If the "Learn HTML" section was on another page, it will be
<a href="https://www.nairaland.com/webmasters/.html#learnhtml">Learn HTML</a>.

emorse: @op pls reply my pm. I really need to ask you a question. And i don't want to derail this thread. Thanks

Will definitely reply, please hold on...

exellent91: How can i upload games,videos and music to the website

Is it if you own the website?