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

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

Perhaps you're referring to the WordPress install theme-import demo method as "building a website".

The entirety of major websites on the Internet are powered by WordPress while well over 90% of WordPress websites are "install and import demo", custom made solutions EVEN ON WORDPRESS require more than that.

So, technically, your answer is wrong. Anyone can do "install and import" but not everyone can BUILD websites. It takes more than installing and demo importing or page builders to be a website builder or developer as some parade themselves as.

Patiently waiting to learn. I'm here

Thanks to those who have commented, much appreciated.
While I would enjoy talking about the rigours of laying out a well-planned and well-structured website, responsive, interactive and easily navigated, I've found it much more simple and helpful to take out some of the grammar and aim for the results.

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

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

Wow thanks for this info.

ImACow:
Wow thanks for this info.

Welcome man. Great to have a comment... There will be more to come surely.
Powered by Programmers Community...

BillShiphr:
Right now we live in a world where anyone can be and do what he wants, including creating sites, if you actually wanting it. There is the link to site https://www.impulsis.com/ that will help with creating your own. Maybe you have a bussiness that need to promote or you want to make an online store. Anyway their team will help you to high quality desigh for it.

I checked out their site, they seem to have an impressive portfolio. Anyone in need of a website straight up can try them. Thanks.

However for those who are interested in doing stuff with their hands maybe for personal need or for others, you should know, web design is about having a curious mind, patient and attentive to details. Please continue to enjoy the ride.

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

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

following. nice thread

cool...would have been nice to change this title so people can understand exactly whats going on here

Nice1...
Front seat booked

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

Why are you mentioning me nah?

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

mike272:
cool...would have been nice to change this title so people can understand exactly whats going on here

Does anyone else think so too?
Your opinions...

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