Web technology is no longer an uncommon issue. As are many others, you also have a clear desire to acquire the knowledge and skills necessary to exploit the benefits of this area of technology. That is the reason we will see topics like this one and not just pass by without taking a peep at the least.
However, the purpose of this thread is firstly amongst others to create a classroom of sort for purely beginners to web programming where learning will be by conversation, also to bring together a group of people with a common interest like a programmers community where growth is influenced by the people within and answers will be given to questions that arise.
In this light I welcome you, and urge you to contribute in questions, answers or comments as we continue. It is time to get professional training, experience and necessary resources in website design and development, start and complete a project yourself, become confident to take offers and place a value on your web development skills.

Powered by Programmers community...

Websites are medium of modern communication in our present technology-driven society. The internet which has been an integral part of technological improvements serves like a bank in the web business: holding all websites and webpages in its safe or vault and releasing those pages as requested by people. So the difference here is that it is more of an open account to anyone willing to agree with the websites terms and conditions and also pay whatever amount is requested as due.
The capacity of the internet will certainly build greater over time as with the relevance of websites. Today people from different circles engage website privileges to gain of its numerous merits, a few outstanding ones being:
reaching out to desired audience,
communicating ideas,
promoting business through website and blog posts or adverts,
meet and greet business partners (both new and existing),
learn skills, attend seminars and webinars, amongst a lot others.
So the issue of website building is one that will go on for a longer time than it has already. As more persons become aware of these inherent merits and more, web developers and tech assistants become increasingly significant and necessary in their fields.
Designing and developing a website is no child's play, it's business, so also it is not climbing mount Everest, quite less daunting. However, perfection in simplicity and professionalism comes with learning and repitition; perfection here meaning suiting the job to its purpose accurately. Website building while I can say it takes dedication, truly it puts the fulfilment into career.
You've read this long essay to this point, you really do want this. So I'm here to not just encourage with words. Let's get down to business.

Powered by Programmers Community...

The fact that you are currently in a section called 'programming' in order to have viewed this post means the word is not sounding in your ears... or rather read with eyes, for the first time. The term 'programming' comes from the word 'program'.

Program in a computer or electronics classroom can be explained as a piece of work that was created to perform specific function(s) in compueter or electrical components. It is also the act of creating such works. A program is not a physical thing that can be touched but it is every bit a tangible thing as it is real, can be understood and controlled.

The components on which the program works or operate are physical, they are usually called hardwares. The program is the application. The relationship can be likened to humans and air. We need air (oxygen) to function, we are the hardware, components on which the program 'air' runs. It is that simple.

Every person who can design a website is called a PROGRAMMER.., more accurately, a WEB PROGRAMMER.

There is no need to be confused here. You might have heard people called by that term before. It simply means they can put together texts, figures, other characters, images, audios, videos, shapes, colors, lines in a clean, orderly and sensible manner to create a page on the internet that will serve to pass or collect information or do both over the internet. A good and very present example is the platform you are on currently, reading this article s which I have written before time for you.

Through it all, you will come to understand and take grip of this one truth at least: Communication is the goal. Yes, it is the end and beginning of it all. Where one line of communication end, another might begin. There is much to talk about, next we will get to know how web building started... or you can now say WEB PROGRAMMING.

Powered by Programmers Community...

Before we continue I would like to answer one recurring question from most people: Can I design a website?
Or sometimes in a less direct form: Can anyone design a website?
Same question actually, so same answer.
Yes! Yes! A thousand times yes!
And that being very honest.

We will go straight to the next important question: How can I?
Answer: You learn. And it's not like climbing mount Everest.
Building a website does not take a genius, and truly each one of us i a genius in his or her own rights. Though a tick technical, the basics of designing a website can not be lost on anyone who puts his or her mind to it. A computer system (or a good phone) with a curious mind is all the resource you need to begin this journey. You are welcome to comment and ask questions as we continue.

Powered by Programmers Community...

OK.. This will be interesting

If you have done some research on the issue of programming, or heard programmers talk, it is possible to have heard the term coding. It is a common word with programmers. Coding is the act of writing codes. These codes are series of simple instructions telling the computer or electronic component how to behave or respond to different actions.

It is like telling a robot to sit and it sits. That means the robot has been instructed via code to perform the action of sitting when told to sit. This instruction was written into the memory of the robot. So it remembers to respond appropriately. You can think of the memory as your phone internal memory. For more details check out : http://en.wikipedia.org/wiki/Computer_programming

There are however several fields and branches of programming. I will give a list.

Competitive programming
Open source software development (desktop and console)
Web development
Application development (mobile)
Machine learning and Embedded systems
Data science
Miscellaneous fields such as networking, gaming and cyber security.

For more details you can check out: https://medium.com/coding-den/fields-of-programming-67e8a0976d4b

Powered by Programmers Community...

Good day to all viewers of this thread, much appreciations for your readership. For this post, I hope to achieve these aims at the end of this post:
*Help you understand the difference in the various fields of programming and see the uniqueness of each.
*Given you an idea of what each of these field entails, requires and rewards.
*Aided in your choice of the programming field you would want to major.
*Mostly inspired you in your desired field. And if it be Web Programming, continue to participate in this thread with greater enthusiasm.

(1) Competitive programming-: is a ‘mind sport’ usually held over the internet or a local network, involving participants (technically called ‘sport programmers’) trying to program the solutions for the logical/mathematical problems provided by the host. Career options include: Participation in ACM-ICPC, high ratings/more stars in Codeforces/Topcoder etc. boost up your resume and help you grab a job in leading tech-companies such as Apple, Google, Adobe, to name a few.

(2) Open source software development-: is the process of developing open-source software (the software product available with its source code under an open source license to study, change and improve its design).
Desktop applications are those applications that run stand alone in a desktop or laptop computer such as Microsoft office, browsers.
Console applications are computer programs designed to be used via a text-only computer interface, such as a text terminal, the command line interface of some operating systems (Unix, DOS, etc.) or the text-based interface included with most Graphical User Interface (GUI) operating systems.
Languages that are used include C, C++, C#, Java, Python, Visual Basic, Visual Basic.NET.
Concerning Career options, Open source collaboration experience enhances your resume. It’s a great platform to get connected with established programmers and developers all round the world. You would definitely pride on working with a team of developers who fixed issues and built a tool that’s being used by thousands of people daily.

(3) Web development-: is developing a website for the internet, mostly by writing markup and coding. One must have a good command over HTML, CSS, JavaScript, web 2.0 skills (e.g. Ajax) and server –side technologies (e.g. PHP, Ruby on Rails, ASP, ASP.NET, Python). Examples of web applications are Facebook, yahoomail, gmail, Nairaland etc.
As for Career options, the three specializations in web-dev are Front-end, back-end and full stack web-dev. Web-developers can earn either as freelancers or get hired by private and government sectors.

(4) Application development-: refers to creation of computer applications for use on mobile devices such as tablets, smart phones and smart watches. C++, C#, Java, python, objective c, swift, HTML5 are the most popular programming languages used by app-developers today. Example of mobile applications are opera mini, UCBrowser, Games etc. Mobile Applications run on different platforms such as iPhone, BlackBerry, Android phone or Windows Phone.
For Career options, the demand for mobile-app development has tremendously increased in today’s IT sector. 

(5) Machine learning and Embedded systems-: is an application of artificial intelligence (AI) that provides systems the ability to automatically learn and improve from experience without being explicitly programmed. It focuses on the development of computer programs that can access data and use it to learn for themselves. Languages such as Python, SQL are necessary.
An embedded system is a multi-agent system and computer system designed for specific control functions within a larger system, often with real-time computing constraints.It is embedded as part of a complete device often including hardware and mechanical parts.
Concerning Career options, you can pursue a research career in AI or become a ML implementation expert. The scope of an amazing career in ML is wide and diversified.

(6) Data science-: is a multidisciplinary blend of data inference, algorithm development and technology in order to solve analytically complex problems. It requires a robust knowledge of database languages like SQL, Python, PHP, Ruby.
Concerning Career options, data scientists are much in demand by each industry- business, e-commerce, finance, government, social networking, healthcare and telecommunications.

(7) Miscellaneous fields (including Cyber-security, gaming, networking) -: are some fields where coding skills are required along with other specific skills.

Hopefully I have answered the questions you might have when you began reading this post. Unavoidably, there might be some new questions risen as a result, please do indulge. If you would rather follow a path other than the issue of this thread which is WEB APPLICATION, there are avenues to learn as long as you still have a good phone and internet access. Thanks, looking forward to conversations. Until the next post...

Powered by Programmers Community...

In coding, there is the use of languages. Coding or programming requires the programmer to communicate with the computer system, telling it what to do under any condition that might exist. 'Instruction' is the word I used in our previous study. The programmer gives instructions to the computer system in the language(s) it understands.

Think of the many different human languages that exist, all for the same main purposes: to unite people of common backgrounds and foster good relationship through effective communication between them. It is the same with computers. Computer languages were created to help the programmers communicate with the computer systems, and each of these languages are used to create applications of common background.

However the portion of language computer systems understands is called 'binary' which is in form of 0s and 1s, very mathematical and unlike any natural human language. The code a programmer will write in any programming language is translated into binary using compilers. Compilers act like interpreters, "speaking the programmer's code in binary" to the computer system so it understands the instructions written within.

These languages allow computers to quickly and efficiently process large and complex swaths of information. For example, if a person is given a list of randomized numbers ranging from one to ten thousand and is asked to place them in ascending order, chances are that it will take a sizable amount of time and include some errors.

The main types of programming languages are:

1. Procedural Programming Language e.g Basic, C.
2. Functional Programming Language e.g Lisp, Haskell
3. Object-oriented Programming Language e.g C#, Java.
4. Scripting Programming Language e.g JavaScript, Python.
5. Logic Programming Language e.g PROLOG, SQL.

There are 100s of existing and active programming languages, the reason being that languages are designed with the aim of simplifying the complexities and at the same time improving the scope/functionalities. I will only give a list of the very commonly used and efficient ones.

1. Python
2. Java
3. Ruby / Ruby on Rails
4. HTML
5. JavaScript
6. C
7. C++
8. C#
9. Objective-C
10. PHP
11. SQL
12. Swift
13. Kotlin
14. Visual Basic

For more studies on Programming Languages check out:
https://www.computerscience.org/resources/computer-programming-languages/
https://careerkarma.com/blog/how-many-coding-languages-are-there/
https://www.besanttechnologies.com/top-10-programming-languages-to-learn
https://www.tutorialspoint.com/index.htm

You should take a look at least at the above links if you need more in-depth analysis and a little bit of story-telling as concerning the subject of this post: PROGRAMMING LANGUAGES. However it is safe to delve at this point into WEB PROGRAMMING strictly. If there be anything you want more light shed on, you can freely say so. Thank you.

Powered by Programmers Community...

*How People Access the Web*
Before we look at the code used to build websites it is important to consider the different ways in which people access the web and clarify some terminology.

*Browsers*
People access websites using software called a web browser. Popular examples include Firefox, Internet Explorer, Safari, Chrome, and Opera. In order to view a web page, users might type a web address into their browser, follow a link from another site, or use a bookmark.
Software manufacturers regularly release new versions of browsers with new features and supporting new additions to languages. It is important, however, to remember that many computer owners will not be running the latest versions of these browsers. Therefore you can not rely on all visitors to your site being able to use the latest functionality offered in all browsers.

*Web Servers*
When you ask your browser for a web page, the request is sent across the Internet to a special computer known as a webserver which hosts the website. Web servers are special computers that are constantly connected to the Internet, and are optimized to send web pages out to people who request them. Some big companies run their own web servers, but it is more common to use the services of a web hosting company who charge a fee to host your site.

*Devices*
People are accessing websites on an increasing range of devices including desktop computers, laptops, tablets, and mobile phones. It is important to remember that various devices have different screen sizes and some have faster connections to the web than others.

*Screen readers*
Screen readers are programs that read out the contents of a computer screen to a user. They are commonly used by people with visual impairments. In the same way that many countries have legislations that require public buildings to be accessible to those with disabilities, many laws have also been passed that require websites be accessible to those with disabilities.

*How Websites Are Created*
All websites use HTML and CSS, but content management systems, blogging software, and commerce platforms often add a few more technologies into the mix.

*What you see*
When you are looking at a website, it is most likely that your browser will be receiving HTML and CSS from the webserver that hosts the site. The web browser interprets the
HTML and CSS code to create the page that you see. Most web pages also include extra content such as images, audio, video, or animations and you will learn how to prepare them for use on the web and then how to insert them into your web pages. Some sites also send JavaScript or Flash to your browser, and you will see how to add JavaScript and Flash in your web pages.
Both of these technologies are advanced topics that you can go on to learn more about once you have mastered HTML and CSS, if you want to.

*How it is created*
Small websites are often written just using HTML and CSS. Larger websites — in particular those that are updated regularly and use a content management system (CMS), blogging tools, or e-commerce software — often make use of more complex technologies on the web server, but these technologies are actually used to produce HTML and CSS that is then sent to the browser.

So, if your site uses these technologies, you will be able to use your new HTML and CSS knowledge to take more control over how your site looks. Larger, more complex sites like these may use a database to store data, and programming languages such as PHP, ASP.Net, Java, or Ruby on the web server, but you do not need to know these technologies to improve what the user sees. The skills you'll learn should be enough to help you on that road.

Next is 'Creating a Page from scratch', on the next post. For now you can check out: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
https://vanseodesign.com/web-design/browser-requests/
https://medium.com/@explorewo/how-files-and-webpages-are-sent-and-received-using-http-and-html-dcbdd42b4799

Till the next.., �

Powdered by Programmers Community...

*Creating a Page from Scratch Part 1*

Using HTML to create a Web page from scratch involves four straight forward steps:

1. Plan your page design.

2. Combine HTML and text in a text editor to make that design a reality.

3. Save your page.

4. View your page in a Web browser.


So break out your text editor and Web browser — and roll up your sleeves...


Step 1: Planning a simple design

We’ve discovered that a few minutes spent planning your general approach to a page at the outset of work makes the page-creation process faster and easier. You don’t have to create a complicated diagram or elaborate graphical display in this step. Just jot down some ideas for

what you want on the page and how you want it arranged. You don’t even have to be at your desk to plan a simple design. Take a notepad and pencil outside and design in the sun, or scribble on a napkin while you’re having lunch. Remember, this is supposed to be fun. The example here is our take on the traditional “Hello World” exercise used in just about every existing programming language:
The first thing you learn when tackling a new programming language is how to display the phrase Hello World on-screen.

In our example, we create a short letter to the world instead, so the page is a bit more substantial and gives you more text to work with.


Step 2: Writing some HTML

You have a couple of different options when you’re ready to create your HTML. In the end, you’ll probably use some combination of these:

1. If you already have some text that you just want to describe with HTML, save that text as a plain-text file and add HTML markup around it.
2. Start creating markup and add the content as you go. To save a Word file as a text document, choose File➪Save As. In the dialog box that appears, choose Text only (*.txt) from the Save As Type drop-down list. The HTML markup includes a collection of markup elements and attributes that describe the letter’s contents:

# The <html> element defines the document as an HTML document.

# The <head> element creates a header section for the document.

# The <title> element defines a document title that is displayed in the browser’s title bar. The <title> element is inside the <head>element.

# The <body> element holds the text that appears in the browser window. The markup that follows the style=” “ attribute inside the <body> element is CSS, otherwise known as the Cascading Style Sheet markup language. It says we want white text on a teal background, where the text is larger than usual, and in a sans-serif font.

# The <h1> element marks the Hello World text as a first-level heading.

# The <p> elements identify each paragraph of the document.

# The <br /> element adds a manual line break after a tag.


Don’t worry about the ins and outs of how the HTML elements work. Also, please note that a Web page can include graphics, scripts, and other elements that we deliberately avoid in this contrived and simple example to keep things . . . well . . . simple! We will cover all these extras in detail later though.

Whatever way you do this, you have to use a text-editor like: # Notepad
# Notepad++
# Sublime text
# Atom
# Bracket
# Visual Studio Code

I would advise you as a beginner to do the work, start writing raw codes with Notepad, and you will learn faster and get a hold of the necessities quicker. After you create a complete HTML page (or the first chunk of it that you want to review), you must save it before you can see your work in a browser. Your page should look somewhat like the page in the image below which is saved with the name "First page.html" as noticed in the top of the image.

Powered by Programmers Community...

*Creating a Page from Scratch Part 2*

Step 3: Saving your page

You use a text editor to create HTML documents and a Web browser to view them, but before you can let your browser loose on your HTML page, you must save that page. When you’re just building a page, you should save a copy of it to your local hard drive and view it locally with your browser.


*Choosing a location and name for your file*

When you save your file to your hard drive, keep the following in mind:

1. You need to be able to find it again.

2. Create a folder on your hard drive especially for your Web pages. Call it Web Pages or HTML (or any other name that makes sense to you), and be sure to put it somewhere easy to find.

3. The name of the file you want to save should make sense to you so you can identify file contents without actually opening the file.

4. The name should work well in a Web browser.
Don’t use spaces in the name. Some operating systems — most notably UNIX and Linux (the most popular Web-hosting operating systems around) — don’t tolerate spaces in filenames; use an underscore (_) or hyphen (-) instead. For example instead of using "first page.html" as a page name, you can use "first-page.html" or "first_page.html" or even "firstPage.html". The last example is called camelCase as used in the page shown in the image below. It’s also a good idea to avoid other punctuation characters in filenames, and in general, to keep them as short as you can.

* .htm or .html *

You can actually choose from one of two suffixes for your pages: .html or .htm. The shorter .htm is a relic from the “8.3” DOS days when filenames could only include eight characters plus a three-character suffix that described the file’s type. Today, operating systems can support long

filenames and suffixes that are longer than three letters, so we suggest you stick with .html.

*Type of file*
Depending on the text-editor you are employing for this task, you will get a variety of options in the select box for type of file. For Notepad, you will get 'Text file' and 'All files' options, choose the 'All files' option. For most other tedt-editors you will have more than 2 options, there will be options for different languages e.g. 'Html file', 'Css file', Javascript file', 'Php file', 'Json file' or options alike, to mention only a few. So logically, since we are working with html, your file type option is 'Html file'.


Web servers and Web browsers handle both .htm and .html equally well. Stick with one filename option. .html and .htm files are treated the same by browsers and servers, but they’re actually different suffixes, so they create different filenames. (The name my_letter.html is different from my_ letter.htm.) This difference matters a lot when you create hyperlinks.


Step 4: Viewing your page

After you save a copy of your page, you’re ready to view it in a Web browser. Follow these steps to view your Web page in Internet Explorer or any other browser you would prefer. (Steps may be different if you’re not using Internet Explorer.)

1. If you haven’t opened your browser, do that now.

2. Choose File ➪Open.

3. In the Open dialog box that appears, click the Browse button.

4. In the new dialog that appears, navigate your file system until you find your HTML file, and then select it so it appears in the File name area.

5. Click the Open button, you are brought back to the Open dialog box. (Note: Newer versions of IE will warn you they must open a new browser window for your local file, for security reasons, if you’re already connected to the Internet; this is perfectly OK.)

6. Click OK.


The page appears in your Web browser in all its glory. You aren’t actually viewing this file on the Web just yet; you’re just viewing a copy of it saved on your local hard drive. So don’t give anyone the URL (web address) for this file yet — but do feel free to edit the HTML source file and view any

changes you make.


An even faster way to view a Web page locally in a browser is to drag and drop the HTML file into an open browser window. You can do this from Windows Explorer or any other program that gives you file-level access.


*Posting Your Page Online*

After you’re happy with your Web page, it’s time to put it online. This is referred to as hosting your website. It is simply renting a space on the Net to accommodate your web pages for a specified period of time. Just like renting a room, yes. What you pay for it is a subscription for the agreed time like you subscribe for data. This are the steps you take:

1. Find a Web hosting provider to hold your Web pages.Your Web host might be a company Web server or space that you pay an Internet service provider (ISP) for. If you don’t have a host yet, double-check with the ISP you use for Internet access — find out whether you get some Web-server space along with your access. Regardless of where you find space, get details from the provider on where to move your site’s files and what your URL will be.

2. Use an FTP client or a Web browser to make a connection to your Web server. Use the username and password, as specified in the information from your hosting provider, to open an FTP session on the Web server.
3. Copy the HTML file from your hard drive to the Web server.

4. Use your Web browser to view the file via the Internet. Use Internet Explorer to access the site and provided the appropriate name and password, which you get from your ISP. A collection of folders and files will appear. Copy the file to the server with a simple drag-and-drop operation from Windows Explorer to Internet Explorer. The URL for this page is given, and the page is now served from the Web browser instead of from a local file system.

If you do not understand much of what has been explained about the process of building your first web page from scratch, do not be discouraged in any way. This is only a quick overview of the process. You will learn the rudiments as we go on and find it easier and more interesting.

If you did try to do something, which I strongly encourage, please post a snapshot of your web page in your text editor and again when opened on your browser. I will be glad to see anything you can do. Thank you for following through to this point, more to come. Programming gets more interesting from here.

Powered by Programmers Community...

*HTML5 &CSS 3*

Since the web was first created there have been several versions of HTML and CSS — each intended to be an improvement on the previous version. I have therefore chosen to teach you these latest versions. Because HTML5 and CSS3 build on previous versions of these languages, learning these means you will also be able to understand the earlier versions of them. I have added clear notes when the code is new and also when it might not work in older browsers.

*Before You Get Started*
Creating HTML documents differs from creating word-processor documentsusing an application
like Microsoft Word because you end uphaving to use two applications:
1. You create the Web pages in your text or HTML editor.
2. You view the results in your Web browser.
Even though many HTML editors, such as Dreamweaver and HTML-Kit, provide a browser
preview, it’s still important to preview your Web pages inside actual Web browsers (such as Internet Explorer, Firefox, or Safari) so you can see them as your end users do. It might feel a bit unwieldy to edit inside one application and then switch to another to look at your work, but you’ll be switching from text editor to browser and back like a pro in (almost) no time.

*What Web Pages Are Made Of*
Some elements are required for a well-structured HTML document.
1. The <!DOCTYPE html> declaration defines the document type to be HTML.
2. The <html></html> element describes an html document.
3. The <head></head> element carries necessary information about the document.
4. The <title></title> element describes the title of the page. You will see this on the tab of your browser's title bar for any page.
5. The <body></body> elements carries the content of the page to be displayed on the browser window.
6. The text between <h1> and </h1> describes a heading.
7. The text between <p> and </p> describes a paragraph.
8. The <br> element creates a line break, thereby discontinuing a line or giving an empty line space.

Your html page should look like that in the image in the previous post. Remember how to save an html page, right? Read the section about "Choosing a location and name for your file" in the previous post. When you open it in your browser, a page like the one below should display. This means you have started coding. We will get to talk some more about the basic things involved in making a web page.

Powered by Programmers Community...

Just to reiterate, web design is about having a curious mind, patient and attentive to details. This is true and vital. It's easier for those using a laptop or desktop to code. Yes! you can code with smaller devices: your tablet or phone. If you can download the necessary applications on the device you can. Sublime text for mobile is a really cool application you can use especially if you are already familiar with the desktop version. However, you can use very easily and comfortably the Quoda application, or QuickEdit. These two are great for anyone.

Clearly, we have gradually approached the 'technical' web design. If you have been practical with this thread, you must have created a simple web page. You can be proud of yourself now, there's however much more to travel, you must know that. The web page we created was made up of little parts known as elements.
Remember this, <h1> Heading </h1>?

It is an h1 element holding the text 'Heading' which displayed as a big bold text on the web page. We would have been able to make it appear smaller in size, using a slightly different element like h2. That is writing something like this: <h2> Heading </h2>. Try that and see the result when you reload the web page on your browser. You can still reduce it further, infact 4 more times using h3, h4, h5 and h6 elements, like this:
<h3> Heading </h3>
<br>
<h4> Heading </h4>
<br>
<h5> Heading </h5>
<br>
<h6> Heading </h6>

Notice how on your web browser, the sizes reduce progressively as you go from h1 to h6? These are elements used to write out headers on a web page, you can determine the size and importance of the header using any one of the elements from h1 to h6, h1 being the biggest and most important while h6 being the smallest and least important. That means if you use h2 for a heading, whatever sub-heading comes under it becomes h3, h5, h5 or h6 depending on your want, but not h1, because h2 comes after h1 in their order of precedence (size and importance). Also looking at the code, you notice another element <br>. It represents a single line break. You use it to discontinue a line and can break down text leaving spaces of lines between them. If you type:
<h3> My Heading </h3>
<br><br><br>
<h3> Another Heading </h3>

you are going to have 3 blank lines in between both headings. These are just two of the many html elements that come in handy to create anything on a web page. There are however, some necessary elements that make up a web page, before the introduction of any other element. We have used them in our first example:

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


</body>
</html>

Looks familiar? This is the structure of an html web page, and will display a blank page on any browser. Compare this with the code from the first example. Notice the text between <title> and </title>, and the other elements written between <body> and </body>, from the first example? The title text displays on your browsers title bar (tab) while the text on your browser window is as a result of the elements in the html document body. Everything in the body of your html page displays on your browser window. The head element holds information about the web page necessary for the correct interpretation of the page by you the user and the browser. These two: head and body are the two distinct parts of an html page. They hold every other element, and are held together by the html element which is defines where the html document begins and ends:
<html>

...
...
.
.
.
</html>

Before anything else I would like you to know the definition of HTML.
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext. As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display. A markup language is a set of markup tags HTML documents are described by HTML tags.

Each HTML tag describes different document content. The tags make up the elements. Most elements have an opening and a closing tag e.g <html>, <head>, <body>, <h1>, <h3>, <p> are all opening tags while </html>, </head>, </body>, </h1>, </h3>, </p> are all closing tags. The difference is the stroke (backslash) that appears in the closing tags. Together the opening and closing tags make up the elements that define the content. There are also some elements with just one tag, like one we have used: <br>, others are <hr> and <img>. These ones can still be closed right in the opening tag like this: <br/>, <hr/>. That is the stroke (backslash) comes last in the brackets.

Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language. We will continue with tags and elements in the next post, thank you for following through to this point.

Powered by Programmers Community...

Great thread, happy to see some real pseudo-code

Roadyroadie:
Great thread, happy to see some real pseudo-code

Awesome of you to say something. Thanks.

To all followers, do the work to know the steps and how much you can actually do, else the journey stops even before it begins and you would have only amassed large quantities of head knowledge; nothing practice-able. Track your progress, communicate your results here, if you please. Your experience starts now, especially in this training. Be practical everytime. It's in your wisdom to do these.

I respect you all, Programmers-In-Training, soon Programmers-To-Teach. You guys are great. It takes guts and will, that I know.
Thumbs up...

*HTML Tags*

As told earlier, HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example, <html>has its closing tag</html>and <body>tag has its closing tag </body>tag etc. To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage. World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4.

We have talked some concerning tags and elements especially those that are essential for a proper html document structure: DOCTYPE declaration, html, head, title and body, including some more like the h1, p and br. From our examples, we have seen how they perform when used. We will continue by mentioning more of these tags and elements.

*Horizontal Lines*
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. Again <hr> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them. For example where you already have a html web document, within the body element you can write:

<! DOCTYPE html>
<html>
<head>
<title> Tags and Elements </title>
</head>
<body>

<h2> Here Again </h2>

<hr>

<p> Here is the paragraph text following the header above. Check me out. There is an horizontal line above me. </p>

</body>
</html>

Try the above, save the file, open in a browser and take a screenshot of the browser result, then upload here.

*HTML Images*
HTML images are defined with the <img> tag. The source file (src), alternative text (alt), and size (width and height) are provided as attributes. You will learn more about attributes later. For now, try using the same html file from the above example. But first copy a picture to the same location where your html document file is and rename the picture as 'sample'. Also check out the properties of the picture to make sure the type is jpg.

<! DOCTYPE html>
<html>
<head>
<title> Tags and Elements </title>
</head>
<body>

<h2> Here Again </h2>

<hr>

<p> Here is the paragraph text following the header above. Check me out. There is an horizontal line above me. </p>

<img src="sample.jpg" alt="picture example" width="104" height="142">

</body>
</html>

Notice in the src attribute of the img element the value is same as the name of the picture 'sample' and there is a '.jpg' after the name, which tells the browser to look for a jpg file named sample in the same location as the html file document. Jpg here is the file type and extension. If when you checked the picture properties and saw a different file type like png or jpeg, then in the src attribute we would have to write "sample.png" or "sample.jpeg" respectively depending on which is the picture file type. You can try this out now and upload a screenshot of your browser result here too.

We need to track our progress as we go on. That's the way to know how much we know actually and can do. This is meant to be practical, not all talk and read. So let's be co-operative, thanks so much. We shall learn about nested elements next. Till I write again, stay well!

Powered by Programmers Community...

*Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML element:
Example: the file below is called nesting.html for sake of reference.


<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>

<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined and <b>bold </b> </u> paragraph</p>

</body>
</html>


Consider elements as bowls with lids, the bowls being the opening tags, the lids being the closing tags. When you place a small bowl in a large one, you cover the small bowl first with its own life before covering the big bowl. The small bowl might be holding something inside like a spoon, the big bowl might be holding something else like water apart from the small bowl you placed inside. Now you can carry the big bowl and drop it into a bigger bowl e.g a basket and cover the basket. The basket could be carrying fruits also. This analogy explains elements nesting.

From the above example, take the h1 element as the big bowl and the i element as the small bowl: i carries the text 'italic' while placed inside h1. But before <h1> is closed with its closing tag </h1>, you see <i> is closed first with its own closing tag </i>. Meanwhile h1 element carries text aside the i element inside it. After h1 is p in the same example. P is a bigger bowl; a basket with fruits which is the text inside of it and also another bowl not as big; the u element also with text and a smaller bowl; the b element. The small bowl <b> is first closed with its closing tag </b> to hold its text content, then comes the lid of the <u>, its own closing tag </u> to cover all of its content, text included. The closing tag of <p> comes last which is </p> holding everything together.

So what is NESTING? This is an order of placing elements inside other elements rightly. If you do the example below, you would be wrong:


<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>

<h1>This is <i>italic</h1> heading</i>
<p>This is <u>underlined and <b>bold </p> </u> paragraph</b>

</body>
</html>


Just because an element is opened first doesn't mean it gets closed first. No! Every element inside it is housed by it. So it must be closed last to start and end after those elements inside it has been closed appropriately. Nesting is quite easy to get right.

*Don't Forget the End Tag*
Some HTML elements will display correctly, even if you forget the end tag, but DO NOT rely on this. It might produce unexpected results and/or errors if you forget the end tag.

*Empty HTML Elements*
HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break). Empty elements can be "closed" in the opening tag like this: <br />, <hr/>

HTML5 does not require empty elements to be closed. But if you want stricter validation, or you need to make your document readable by XML parsers, you should close all HTML elements.

*HTML Tip: Use Lowercase Tags*
HTML tags are not case sensitive: <P> means the same as <p>. The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML4, and demands lowercase for stricter document types like XHTML.

W3C means world wide web consortium.
XML means eXtendable Markup Language
XHTML means eXtendable Hyper Text Markup Language.

You can look these up on google, you will learn somethings. Next up: HTML ATTRIBUTES.

Powered by Programmers Community...

*HTML – ATTRIBUTES*
We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p>and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.

An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value:
1. The name is the property you want to set. For example, the paragraph <p>element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
2. The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation. Example:

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>

<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>

</body>
</html>


The four core attributes that can be used on the majority of HTML elements (although not all) are:
1. Id
2. Title
3. Class
4. Style

*The Id Attribute*
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element:

1. If an element carries an id attribute as a unique identifier, it is possible to identify just
that element and its content.
2. If you have two elements of the same name within a Web page (or style sheet), you can
use the id attribute to distinguish between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, let's apply the id attribute to distinguish
between two paragraph elements as shown below.

.
.
.
<p id="html">This para explains what is HTML.</p>
<p id="css">This para explains what is Cascading Style Sheet.</p>
.
.
.

Powered by Programmers Community...

*The title Attribute*
The title attribute gives a suggested title for the element. The syntax for the title attribute is similar as explained for id attribute. The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading. Try this:

.
.
.
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
.
.
.

Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.

*The class Attribute*
The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it. The value of the attribute may also be a space-separated list of class names. For example:

.
.
.
<p class="newclass1 anotherclass"> This paragraph is set as the heading below. </p>
<br/>
<h3 class="newclass1"> This heading is set as the above paragraph. </h3>
.
.
.

*The style Attribute*
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element for example:

.
.
.
<p style="font-family:arial; color:#FF0000;">Some text...</p>
.
.
.

At this point of time, we are not learning CSS, so just let's proceed without bothering much about CSS. Here, you need to understand what HTML attributes are and how they can be used while formatting content.

*Single or Double Quotes?*
Double style quotes are the most common in HTML, but single style can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes or vice versa:

.
.
.
<h3 id="newid"> Heading </h3>
<p title='tooltip'> Paragraph </p>
.
.
.

*Generic Attributes*
Here's a table of some other attributes that are readily usable with many of the HTML tags right in the uploaded picture below.

We will see related examples as we will proceed to study other HTML tags

Powered by Programmers Community...

Good day dear readers, I did not write a post yesterday, yes! We'll take it as a lunch break from the classroom. Well we back to work now, I hope you guys had a fulfilled time, and I trust you are fueled and fired up for the next lap. It's getting intense. So gear up and enjoy the journey.
It's good to be back.

~Programmers Community...

*HTML – FORMATTING*


If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

*Bold, Italic and Underlined Texts*
Anything that appears within <b>...</b>element, is displayed in bold, while that appears within <i>...</i> element is displayed in italicized. Anything that appears within <u>...</u> element, is displayed with underline as in example shown below.

*Strike Text*
Anything that appears within <strike>...</strike>element is displayed with strikethrough, which is a thin line through the text as in example shown below.

*Monospaced Font*
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

*Superscript and Subscript Texts*
The content of a ^... element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.The content of a _... element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.

*Inserted and Deleted Texts*
Anything that appears within <ins>...</ins> element is displayed as inserted text. Anything that appears within <del>...</del> element, is displayed as deleted text.

*Larger and Smaller Texts*
The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it while the content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as in example shown below.

<!DOCTYPE html>
<html>
<head>
<title>Formatting Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b>typeface.</p>
<p>The following word uses a <i>italicized</i>typeface.</p>
<p>The following word uses a <u>underlined</u> typeface.</p>
<p>The following word uses a <s>strikethrough</s> typeface.</p>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
<p>The following word uses a ^superscript typeface.</p>
<p>The following word uses a _subscript typeface.</p>
<p>I want to drink <del>cola</del> <ins>wine</ins>.</p>
<p>The following word uses a <big>big</big> typeface.</p>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>

The below uploaded image shows what your browser result should look like.

*Grouping Content*
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page. For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.

This might sound like gibberish right now, but it will become clearer when we talk about style sheet.


Powered by Programmers Community...

You must have observe that no matter the spaces you create between text using the space bar, your browser translates all to one (a single space character). Also you would have noticed that without using the <br/> element you can not break to another line. For example try this and check the result on your browser:

<!DOCTYPE html>
<html>
<head>
<title>Formatting Text Example</title>
</head>
<body>

<p>

I am a man.

I am a son.

I am a father.

I am a friend.

</p>

</body>
</html>

See? All the extra spaces are automatically removed by your browser as what you see in the first uploaded image below. That is how it reads your HTML document. It is correct!

However you can "force" your browser to display text the way you have formatted it in your HTML code, by using the <pre> element. It is called preformatted text. Try the above example again, this time using this element:

<!DOCTYPE html>
<html>
<head>
<title>Formatting Text Example</title>
</head>
<body>

<pre>

I am a man.

I am a son.

I am a father.

I am a friend.

</pre>

</body>
</html>

Hmmm!!! Yes, that's what you get; something like
what you see in the second uploaded image below. That's nice, right?

You can try using this element- <pre> - again and again, it won't change what it does. It keeps preformatted text i.e. retains the format of your text in your HTML code. Really cool.

Powered by Programmers Community...

*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...

*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 <!-- and -->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> <!-- Document content goes here..... --> </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 <!-- and ending 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>

<!--
<p>Document content goes here.....</p>
<p> Here again </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><!-- Document Header Starts -->
<title>This is document title</title>
</head><!-- Document Header Ends -->

<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...

*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...

*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.


*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...

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...

*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...

*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...

*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...

*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...

*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...