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.
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.
Applications of HTML
As mentioned before, HTML is one of the most widely used languages over the web. I'm going to list a few of them here:
Web pages development - HTML is used to create pages which are rendered over the web. Almost every page of web is having HTML tags in it to render its details in the browser.
Internet Navigation - HTML provides tags which are used to navigate from one page to another and is heavily used in internet navigation.
Responsive UI - HTML pages nowadays work well on all platform, mobile, tabs, desktop or laptops owing to responsive design strategy.
Offline support HTML pages once loaded can be made available offline on the machine without any need of internet.
Game development- HTML5 has native support for rich experience and is now useful in gaming development arena as well.
Basic HTML Document
In its simplest form, following is an example of an HTML document −
<!DOCTYPE html><html><head><title>This is document title</title></head><body><h1>This is a heading</h1><p>Document content goes here.....</p></body></html>
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.
Above example of HTML document uses the following tags −
Sr.No
Tag & Description
1
<!DOCTYPE...>
This tag defines the document type and HTML version.
2
<html>
This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags.
3
<head>
This tag represents the document's header which can keep other HTML tags like <title>, <link> etc.
4
<title>
The <title> tag is used inside the <head> tag to mention the document title.
5
<body>
This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc.
6
<h1>
This tag represents the heading.
7
<p>
This tag represents a paragraph.
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.
HTML Document Structure
A typical HTML document will have the following structure −
<html><head>
Document header related tags
</head><body>
Document body related tags
</body></html>
We will study all the header and body tags in subsequent chapters, but for now, let's see what is document declaration tag.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration −
<!DOCTYPE html>
There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE...> tag along with other HTML tags.
HTML - Basic Tags
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.
<!DOCTYPE html><html><head><title>Heading Example</title></head><body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6></body></html>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example −
<!DOCTYPE html><html><head><title>Paragraph Example</title></head><body><p>Here is a first paragraph of text.</p><p>Here is a second paragraph of text.</p><p>Here is a third paragraph of text.</p></body></html>
The main difference between HTML and HTML5 is that the HTML is a standard markup language for creating web pages while the HTML5 is a newer version of HTML with additional features such as web sockets, canvas, and geolocation.
There are millions of web pages available in WWW. HTML, which stands for HyperText Markup Language, describes how the content is structured in a web page. It is the basic language for all other web technologies including CSS, JavaScript, JavaScript libraries like jQuery etc. On the other hand, HTML5 is the latest version of HTML. It supports most web browsers and provides additional features than regular HTML.
Key Areas Covered
1. What is HTML – Definition, Functionality 2. What is HTML5 – Definition, Functionality, Features 3. What is the Relationship Between HTML and HTML5 – Outline of Association 4. What is the Difference Between HTML and HTML5 – Comparison of Key Differences
Key Terms
HTML, HTML5
What is HTML
HTML is a markup language to create the structure of a web page. It consists of tags, and the web browser displays text, tables, lists and other elements on the web page according to these tags. HTML is easier to learn compared to programming languages such as C, C++ and Java. Moreover, a programmer can easily create an HTML file using a text editor like notepad and execute it on a web browser.
There are two main sections in an HTML page. They are the head section and body section. The head section includes the title and the metadata of the page while the body section includes all the visible content of the web page. In addition, HTML has tags to represent various elements such as paragraphs, headings, tables, and, lists. There are various versions of HTML as HTML 1, 2 etc. The latest version of HTML is HTML5.
What is HTML5
HTML5 is the new revision of HTML, superseding HTML 4.01, XHTML 1.0 and XHTML 1.1. It is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). HTML5 supports all web browsers such as Firefox, Chrome, Safari, and, Opera. Furthermore, mobile web browsers pre-installed on iPhones, iPads, and Android also have excellent support for HTML5.
Features of HTML5
HTML 5 provides a number of new features. Some of them are as follows.
Forms 2.0 – Enhancement of HTML web forms. There are new attributes for tag.
WebSocket – Provide bidirectional communication technology for the web application.
Canvas – Supports two-dimensional drawing surfaces to program with JavaScript.
Drag and Drop – Allows dragging and dropping items from one location to another location on the same webpage.
Video and Audio – Allows embedding video and audio on the webpage without using third-party plugins.
Geolocation – Allows the new visitors to share their location with the web application.
Relationship Between HTML and HTML5
HTML5 is the latest version of HTML.
Difference Between HTML and HTML5
Definition
HTML is the major markup language used to display web pages on the Internet. HTML 5 is a major revision of HTML for describing the content and appearance of web pages. Hence, this is the fundamental difference between HTML and HTML5.
Version
Moreover, HTML is an older version whereas HTML5 is a new version.
Browsers
Another difference between HTML and HTML5 is that the HTML works well in older browsers while HTML5 works well in new browsers and also supports older browsers.
Type
Furthermore, HTML is less detailed while HTML5 is more detailed.
Vector Graphics
Vector graphics is another difference between HTML and HTML5. HTML supports vector graphics using other technologies or plugins. However, vector graphics are an integral part of HTML5.
Multimedia
It is difficult to include and handle multimedia in HTML. However, it is easy to include and handle multimedia (audio, video, etc.) in HTML5. Therefore, multimedia usage is an important difference between HTML and HTML5.
Offline Storage Support
Also, the offline storage support attributes to one other difference between HTML and HTML5. The offline storage support is not good in HTML, whereas HTML5 supports offline storage very well.
Support for Web Sockets
Web sockets are not available in HTML. However, web sockets are available in HTML5 and provide full duplex communication. This is another difference between HTML and HTML5.
Geolocation
Additionally, HTML does not support Geolocation, but HTML5 does.
Conclusion
In brief, HTML is a standard markup language for creating web pages and web applications while HTML 5 is markup language which is a newer version of HTML that is used to structure and present content on the World Wide Web (WWW). This is the main difference between HTML and HTML5.
Introduction to Web DevelopmentWeb programming, also known as web development, is the creation of dynamic web applications. Examples of web applications are social networking sites like Facebook or e-commerce sites like Amazon. The good news is that learning web development is not that hard! In fact, many argue it’s the best form of coding for beginners to learn. It’s easy to set up, you get instant results and there’s plenty of online training available. A lot of people learn web coding because they want to create the next Facebook or find a job in the industry. But it’s also a good choice if you just want a general introduction to coding, since it’s super easy to get started. No matter whether you’re looking for a career or just want to learn coding, learning how to develop for the web is for you. It’s one of the smartest decisions you will ever make!
Web Development Overview
There are two broad divisions of web development – front-end development (also called client-side development) and back-end development (also called server-side development). Front-end development refers to constructing what a user sees when they load a web application – the content, design and how you interact with it. This is done with three codes – HTML, CSS and JavaScript. HTML, short for Hyper Text Markup Language, is a special code for ‘marking up’ text in order to turn it into a web page. Every web page on the net is written in HTML, and it will form the backbone of any web application. CSS, short for Cascading Style Sheets, is a code for setting style rules for the appearance of web pages. CSS handles the cosmetic side of the web. Finally, JavaScript is a scripting language that’s widely used to add functionality and interactivity to web pages. Back-end development controls what goes on behind the scenes of a web application. A back-end often uses a database to generate the front-end. Here’s an example. Say you log into your Facebook account, and you are greeted with the latest updates in your News Feed. They’re not going to be the same updates that you saw yesterday. How did the page change? Did a Facebook employee manually edit the page to update your news feed? Of course not. A script on the Facebook back-end would have received the updates and re-generated the front-end accordingly.
Back-end scripts are written in many different coding languages and frameworks, such as…
Without going into more detail, that’s really all there is to web development. So now, here are the best ways to start learning it.
Ways to Learn Web Development
The traditional way to learn web development is to enroll in a university or trade school course. However, it can be costly – and what’s more, the web evolves so fast that schools often can’t keep up! Luckily, there’s plenty of good quality coding training available here on the Internet. What better place to learn web development than the web itself? A particular training recommendation is treehouse. This is because it has a focus on web development, is recommended by many of the world’s most trusted and recognized web developers (such as Chris Coyier) and most of its teachers are themselves web developers. Teach It To Yourself You could also learn web coding by researching it on your own, tweaking website templates and inspecting the source code of other websites. A lot of coders learn HTML and CSS this way, using website editing software to tweak a website template and figuring out the code. However, this method is not ideal. It takes a very long time, and you don’t even know what there is to learn. It’s like having to first find the pieces of a jigsaw puzzle before you can assemble them. You’re better off with training like Treehouse. Another bonus of Treehouse is that it teaches you not only how to build your website, but also how to design your website – something which is explored
Recommended Training – Treehouse
Although this site recommends various training services, our top recommendation is Treehouse. Treehouse is an online training service that teaches web design, web development and app development with videos, quizzes and interactive coding exercises. Treehouse's mission is to bring technology education to those who can't get it, and is committed to helping its students find jobs. If you're looking to turn coding into your career, you should consider Treehouse.
A prototype is an early sample, model or release of a product created with the intention of concept testing and for learning purposes. They help us to learn without fully implementing our solutions. When developing user interfaces for our applications, we have several prototypes before the final interface. Some examples of these are wire-frames, graphical designs and mock-ups. The same applies to writing technical code. Directly writing code for complex purposes might result in time wastage. The causes of this range from improper algorithms to ambiguous program flow. To prevent this, we can use Pseudocode.
What is Pseudocode?
Pseudocode is an informal high-level description of a computer program or algorithm. It is written in symbolic code which must be translated into a programming language before it can be executed.
A statement is defined as an instruction that directs the computer to perform a specific action. In writing pseudocode, we will refer to singular instructions as statements.
When writing pseudocode, we assume that the order of execution of the statements is from top to bottom. This changes when using control structures, functions and exception handling.
Mathematical operations
Mathematical operations are integral to solution development. They allow us to manipulate the values we have stored. Here are common mathematical symbols:Assignment: ← or := Example: c ← 2Ï€r, c := 2Ï€r Comparison: =, ≠, <, >, ≤, ≥Arithmetic: +, −, ×, /, modFloor/ceiling: ⌊, ⌋, ⌈, ⌉a ← ⌊b⌋ + ⌈c⌉Logical: and, orSums, products: Σ Î Example: h ← Σa∈A 1/a
Keywords
A keyword is a word that is reserved by a program because the word has a special meaning. Keywords can be commands or parameters. Every programming language has its own keywords (reserved words). Keywords cannot be used as variable names.
In Pseudocode, they are used to indicate common input-output and processing operations. They are written fully in uppercase.
START: This is the start of your pseudocode.
INPUT: This is data retrieved from the user through typing or through an input device.
READ / GET: This is input used when reading data from a data file.
PRINT, DISPLAY, SHOW: This will show your output to a screen or the relevant output device.
COMPUTE, CALCULATE, DETERMINE: This is used to calculate the result of an expression.
SET, INIT: To initialize values
INCREMENT, BUMP: To increase the value of a variable
DECREMENT: To reduce the value of a variable
PART 3: CONDITIONALS
During algorithm development, we need statements which evaluate expressions and execute instructions depending on whether the expression evaluated to True or False. Here are some common conditions used in Pseudocode:
IF — ELSE IF — ELSE
This is a conditional that is used to provide statements to be executed if a certain condition is met. This also applies to multiple conditions and different variables.
Here is an if statement with one conditionIF you are happy
THEN smile
ENDIF
Here is an if statement with an else section. Else allows for some statements to be executed if the “if” condition is not met.IF you are happy THEN
smile
ELSE
frown
ENDIF
We can add additional conditions to execute different statements if met.IF you are happy THEN
smile
ELSE IF you are sad
frown
ELSE
keep face plain
ENDIF
CASE
Case structures are used if we want to compare a single variable against several conditions.INPUT colorCASE color of red: PRINT "red"
green: PRINT "green"
blue: PRINT "blue"OTHERS
PRINT "Please enter a value color"ENDCASE
The OTHERS clause with its statement is optional. Conditions are normally numbers or characters
PART 4: ITERATION
To iterate is to repeat a set of instructions in order to generate a sequence of outcomes. We iterate so that we can achieve a certain goal.
FOR structure
The FOR loop takes a group of elements and runs the code within the loop for each element.FOR every month in a year Compute number of daysENDFOR
WHILE structure
Similar to the FOR loop, the while loop is a way to repeat a block of code as long as a predefined condition remains true. Unlike the FOR loop, the while loop evaluates based on how long the condition will remain true.
To avoid a scenario where our while loop runs infinitely, we add an operation to manipulate the value within each iteration. This can be through an increment, decrement, et cetera.PRECONDITION: variable X is equal to 1
WHILE Population < Limit Compute Population as Population + Births — DeathsENDWHILE
PART 5: FUNCTIONS
When solving advanced tasks it is necessary to break down the concepts in block of statements in different locations. This is especially true when the statements in question serve a particular purpose. To reuse this code, we create functions. We can then call these functions every-time we need them to run.Function clear monitor
Pass In: nothing
Direct the operating system to clear the monitor
Pass Out: nothing
Endfunction
To emulate a function call in pseudocode, we can use the Call keywordcall: clear monitor
PART 6: PROGRAM WRAPPING
After writing several functions in our pseudocode, we find the need to wrap everything into one container. This is to improve readability and make the execution flow easier to understand.
To do this, we wrap our code as a program. A program can be defined as a set of instructions that performs a specific task when executed.PROGRAM makeacupofteaEND
PART 7: EXCEPTION HANDLING
An exception is an event which occurs during program execution that disrupts the normal flow of the instructions. These are events that are non-desirable.
We need to observe such events and execute code-blocks in response to them. This is called exception handling.BEGIN
statements
EXCEPTION
WHEN exception type
statements to handle exception
WHEN another exception type
statements to handle exception
END
PART 8: CONCLUSION
There are no technical rules for Pseudocode. It is meant to be human readable and still convey meaning and flow.
There are different guide and tutorials which lean more towards language-specific pseudocode, examples of such are Fortran style pseudo code, Pascalstyle pseudo code, C style pseudo code and Structured Basic style pseudo code.
Codecademy is a popular online learning platform hosted on the cloud. They provide what before the Internet could only be achieved through book study or a full University education.
CodeCademy.com is almost a no-cost platform, providing expertly created courses for a variety of computer programming languages. It makes learning to code and designing websites easy and interesting. You can learn a wide range of programming skills, such as JavaScript, CSS, Python, etc. with Codecademy.
Above all, all the courses are free! Yes, you read it right. There is no overhead of a class schedule, specific course times and exorbitant loans to pay.
However, recently incorporated paid plans offer access to advanced learning resources and live support.
CodeCademy Summary and Stats
CodeCademy.com was founded in 2011 and currently boasts over 25 million distinct current and former users of the service. A pair of Columbia University students developed the site to bring code instruction into the information age. Catering to the beginning learner, CodeCademy offers 12 distinct coding tracks:
These offerings are free; however, CodeCademy offers a “pro” option that allows tailored lessons and tutorials for the user as well as live tutoring. To access the features on CodeCademy.com, you create a learner profile and then begin your track in one of the languages above.
Each track begins at the beginning, and users can expect to recreate the ubiquitous “Hello World” example before moving on to more strenuous concepts. For example, on the Python track, you are first greeted with standard input and output. Next, you work with mathematics, and add variables.
Lists and arrays as well as more complex data structures follow, continuing into flow control commands such as loops and case/switch style commands. All in all, the flow is appropriate and closely approximates a classroom approach to the material.Clicking a language begins each course track. An integrated development environment and standard output meet you as well as instructional material and assignments.
The creators put together a introductory video that shows the success of one of their own student that went through some of the training. He speaks to what it felt like writing and creating his first line of code, reading “hello world”
The box at left provides you with background in the lesson, explains the concept to be taught, and gives you a task to perform. You enter your answer in the given IDE, and submit your answer for review when you are done. Each step is lightly harder than the last, and each set of lessons works through a set of ideas such as variables, data types, formatting, and so on.
Deep Dive into a Free Account
Code Cademy when you first visit their website is completely free to sign up and start going through introductory courses. Upon logging in, they suggest you immediately start the free courses with html and css. As well discuss later, there is quite a bit lacking in the context they set you up into the lessons. If you are coming into this membership with the mentality that CodeCademy is a phase in which you can quickly learn a common code language, then it should be a great fit for you.
If you aren’t sure where you want to start, they give you the opportunity to view all the free courses they offer for free. You have the option to sort the courses by what your objective is. The choices currently are web development, languages, tools, APIs, and Data analytics.
For database driven learning, you will find support for MySQL only. Advanced caching methods, like how to use Redis or MongoDB tutorials will not be found here.
One thing that is helpful is the estimated time they think it will take you to go through their course. If you enter one of the courses, you are given a text editor with instructions to start coding as they guide you along the way.
Codecademy keeps learners motivated by awarding badges for their achievements throughout the course. All the skills you’ve mastered so far will be displayed on your dashboard. Each lesson comes with clickable hints to help you if you get stuck.
A dedicated Q&A forum with each lesson serves as a platform to troubleshoot code together with fellow learners. Language glossaries, forum rules, and help center will answer all your general questions.
Each track begins with an overview, and users can expect to recreate the ubiquitous “Hello World” example before moving on to the core concepts. For example, on the Python track, you are first greeted with standard input and output. Next, you work with mathematics, variables, lists and arrays and more complex data structures etc
All in all, the flow is appropriate and closely approximates a classroom approach to the online study material.
Clicking a language begins each course track. An integrated development environment and standard output welcome you along with instructional material and assignments.
The creators put together an introductory video that shows the success of one of their own students who went through some training at Codecademy.
If you aren’t sure where you want to start, they give you the opportunity to view all the free courses they offer for free. You have the option to sort by what your objective is. The choices currently are web development, languages, tools, APIs, and Data analytics. To note thought, for database driven learning we only saw support for mysql. Advanced Caching methods like how to use redis or a in depth mongodb tutorial will not be found here.
One thing that is helpful is the estimated time they think it will take you to go through their course. If you enter one of the courses, you are given a text editor with instructions to start coding as they guide you along the way.
Codecademy Pro Plan
All the courses on Codecademy are free. The free course catalog features hundreds of hours of content that help learners develop skills in their desired programming language.
However, CodeCademy offers a “pro” option that allows tailored lessons and tutorials for the user as well as live tutoring. You get access to premium content such as quizzes, portfolio-building projects and customized learning path. You also get the flexibility to adjust your schedule around your family and your job.
Pro Lessons for Everyone
Codecademy covers different programming languages to help you get started with coding. Recently, they have started developing partnership courses with companies to teach people how to use or develop software for their products.
For example, Amazon and Codecademy together introduced a course to help people develop apps for Amazon’s assistant, Alexa.Within their pro plan, you can pick anything from learning a Sass to learning about javascript frameworks or ruby on rails.
Codecademy keeps their courses up-to-date and develops new courses that are currently high in demand in the industry.
No Stress Set-up Process
When you learn a programming language, you have to download and set up an IDE (Integrated Development Environment). It can be slightly troublesome for absolute beginners.
However, with Codecademy, everything is already set up online. Simply write your code and test it in the integrated browser. It makes learning the coding basics easy and stress-free.
Access to a Student Community
Codecademy gives you access to a community of students who are willing to help you with all your issues during the course. Expect to receive huge support and help from other students in the Codecademy student community.
You are also free to quit at any time and pick back up at the lesson where you left off. Live help and tutoring, as well as custom lesson plans, are available for a fee. It is overall a good place to start with programming without taking the risk of spending a large amount of money on university education or expensive courses.
Benefits
In the benefits column, CodeCademy provides help and hints and caters to students who have a difficult time mastering the material, allowing you to get it right before you go on. The IDE interface will also provide helpful hints but only upon request of the user. In addition, CodeCademy.com offers their 12 tracks free of charge.
You are also free to quit at any time and pick back up at the lesson where you left off. Live help and tutoring as well as custom lesson plans are available for a fee. It is overall a good place to get your feet wet programming without taking the risk of spending a large amount of money.
Codecademy provides help and caters to students who have a difficult time mastering the material, allowing you to get it right before you go on. The IDE interface will also provide helpful hints, but only upon request of the user. In addition, CodeCademy.com offers their 12 tracks free of charge.
Criticisms
On the down side, those who have a strong background in computer science may find the pacing of the lessons to be a little slow and tedious. The pace of the material is geared to the rank beginner, so modules on basic concepts like variables and data structures may seem pedantic. Also, the number of offerings may not include your language of choice.
The free offerings are one-size-fits-all, so if you don’t understand how a certain concept is approached in a module, the only way to get a different approach to the same concept is through the “pro” offering. Due to the free structure that is geared toward beginning coders, it lacks the depth of many other online instruction tools in language.
CodeCademy Alternatives
Team Treehouse
Team Treehouse is specifically geared towards the coding community. Using over 1000 specially crafted video lessons, they are able to deliver classroom-grade content on the desktop. Curricula include web design, coding, game design, and hard programming. Treehouse is a great place for direct interaction with expert instructors and actionable learning.
Lynda
Offering an online library of over 3,000 courses, Lynda is an excellent choice for people wanting to pursue education in a coding or technology track. Courses are created and taught not just by anyone, but by industry-leading instructors and people who are actively involved in the industry.
Udemy
Udemy is a unique marketplace offering coding courses. Instead of being taught in a directed fashion, instructors offer courses in a myriad of different subjects and set their own costs to attend. The subject matter is largely coding and information technology but ranges further than just computer programming.
Summary
Overall, CodeCademy is a good entry-level coding website for the language modules it offers, even if the material seems tedious at times. For those on a budget looking to develop the basic skills of a language, it does shine.
CodeCademy does cover the basics and some more advanced features of the languages to a certain depth, although lack of depth in any one language is notable. CodeCademy appears to be a comprehensive tool for learning coding. In the sense that it provides the concepts inherent in the language, it is comprehensive.
There is just not enough material, and the lessons don’t cover enough ground in their breadth to give you a rich understanding of the languages. However, there are alternatives out there that provide a more comprehensive resource. Some suggestions are listed above.
CodeCademy.com was founded in 2011 and currently boasts over 25 million distinct current and former users of the service. A pair of Columbia University students developed the site to bring code instruction into the information age. Catering to the beginning learner, CodeCademy offers 12 distinct coding tracks:
