Whether you’re interested in becoming a professional web developer or you simply want to learn more about how websites work, the first thing you need to study is HTML and it’s a simple language to learn. Once this simple language is learnt, you can progress with more complex languages like CSS and JavaScript.
What Is HTML?
HTML stands for Hypertext markup language where:
HyperText refers to the text that links to other texts, Markup refers to the special symbols that design the text to display it in an interesting manner and Language refers to the idea that the code belongs to one standardized group. These languages can be used to create amazing webpages and applications.
If we put these three definitions together, we could say that HTML is “a programming language that uses unique code which allows you to display linked documents in a browser”.
Why Should You Learn HTML?
HTML code ensures the proper formatting of text and images for your Internet browser. Without HTML, a browser would not know how to display text as elements or load images or other elements. HTML also provides a basic structure of the page, upon which Cascading Style Sheets are overlaid to change its appearance. What if you’re not interested in having a website that looks just like everyone else’s? What happens when you want to make changes to your site that go beyond what’s available using the drag and drop builder?
Do you want to make sites that are unique to your work or put a different creativity to your work? What if you could change every aspect of your site to your personalization? well on HTML you can do that for free!!!
With a basic knowledge of HTML , you can build a truly unique website for free. Fancy earning a six-figure salary as a web developer for a Silicon Valley startup? If you’re interested in learning how to do any web related programming, HTML is the place to start.
How Does HTML Relate To Other Programming Languages?
HTML is the foundation of any site. The HTML code contains the site’s basic structure and content, which includes all the text, links, tables, links to images and other such elements.
CSS (Cascading Style Sheets) is used to define the design of the page, including things like the size of each element and how it looks. With CSS, we apply fonts , the background color width of the border around elements on the page and many more.
JavaScript creates interactive elements on your page. When you click or hover on a product on a shopping website and your shopping cart automatically updates or shows more details, that’s JavaScript doing its magic.
CSS and JavaScript can add design and functionality to a site, but without HTML, you won’t have a site to begin with. In fact, most sites will still display HTML data even if the CSS and JavaScript code is broken.
What Does HTML Code Look Like?
Basically, HTML code looks just like regular text. The most identifiable feature of HTML code is the use of angle brackets. These angle brackets enclose the markup code which tells the browser how to display the document data.
Here’s an example of some simple HTML code:
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
Now obviously There are more line in a html code to print the above lines but that’s for later.
What Programs Can I Use To Write And Edit HTML Code?
One of the best things about learning how to write HTML code is that you don’t need to buy any special software to get started. You can write and edit HTML code in any regular text editor.
Windows users can write code using the Notepad app which comes pre-installed with all versions of the operating system. Mac users can write code using the OSX equivalent which is call TextEdit.
However, if you’re planning to do a lot of coding, it’s probably a good idea to download and install a text editor that is specifically designed for coding
Here are three popular text editors that have a wide variety of functions and are available for different operating systems:
Sublime Text Editor is a lightweight yet powerful editor that has an excellent UI (User Interface) and is available on Linux, Windows and MacOS.
Atom is another powerful text editor that has an approachable design, making it easy to use for beginners. It is highly customizable and hackable. The built-in package manager allows you to easily download and install extensions.
CodeLobster is a free IDE for HTML, as well as PHP, CSS, and JavaScript.
The Basics Of HTML Code
There are three components that form the basic building blocks of HTML code: tags, elements and attributes. Once you’ve learned the rules for how each of these components function, you should have no trouble writing and editing HTML.
HTML Tags
the most notable feature of HTML code was the use of angle brackets. These angle brackets (and the code inside them) are called tags.
Tags are used to separate HTML code from regular text.
Any text written inside the angle brackets will not be displayed in the browser. The text inside the angle brackets is just used to tell the browser how to display or transform regular text located between the opening tag and the closing tag .
For example,
<h1>This is some content.</h1>
In this example, the <h1> is the opening tag and the </h1> is the closing tag.
How To Use Tags
Here’s an example of how we can use tags to transform text.
If we add the sentence “This is some text.” to our HTML file, it will simply display as regular text like this:
This is some text.
But if we want to have the sentence display in bold text, we can add a “bold” tag to the sentence.
If we add
<b>This is some text.</b>
to our HTML file, it will display like this: This is some text.
If we want to have the sentence display in italic text, we can add an <i> opening tag before the text, and an </i> closing tag after the text. As you’ve probably guessed, the “i” stands for “italic”.
If we add <i>This is some text.</i> to our HTML file, it will display like this:
This is some text.
For a link ,
If we add <a href=“www.google.com”>This is some text.</a> to our HTML file, it will display like this:
If we click on this hyperlink, it will take us to a different webpage. If you take a look at the code, you can probably guess which page this text links to.
Let’s put these three examples in to a simple HTML document:
<b>This is some text.</b>
<i>This is some text.</i>
<a href=”www.google.com”>This is some text.</a>
If you save this file and open it in a browser, it should look like this:
Two Important Rules For Using Tags
There are two main rules you need to follow when using tags.
- You must always use angle brackets for tags.
- Tags almost always come in pairs. This means that (except for a few special examples) you must always close a tag after opening it.
HTML Elements
The next thing we’re going to learn about is HTML elements.
An element is an opening tag, a closing tag, and all the content that is included between the two tags.
Let’s take a look at our previous example of how to use bold tags:
<b>This is some text.</b>
When we put it all together, we have an element.
Sounds simple, doesn’t it?
In most cases, elements are simple. The tricky part comes when you start putting elements within elements.
When you start writing very complex code, you might find yourself working with elements nested ten, twenty or even one-hundred levels deep!
Let’s try a quick quiz to see if you understand how elements work.
We’ll start with a basic HTML document that has no content:
We want to add the sentence “This is a very difficult quiz.” between the two p tags (p stands for paragraph), but we want to style it like the following image.
<p>This is a <b>very</b> difficult quiz</p>
The final piece of HTML code we have to learn about is attributes.
HTML Attributes
Attributes are used to define additional information about an element. They are located inside the opening tag, and usually come in name/value pairs (name=“value”).
some attributes are:
href – is to define the link address (Without the href attribute, you can still click on the link but nothing will happen.)
img- is to define the name of the image to be added to the element
src- is to define the source of the file to be added to the element
All HTML elements can have attributes, but for most elements, we only use them when we need to.
Attributes can be used to define things such as the height and width of an image, the style of an element (eg. color, size, font) and the language of the document.
3 Rules of attributes:
- Although you can write attributes in upper case, it’s a good idea to write attributes in lower case only.
- Although it’s not strictly necessary, it’s a good idea to put quotation marks around the value to make it easier to identify.
- Although you can use single quotation marks (‘value’), it’s a good idea to put values in double quotation marks (“value”).
Conclusion
Now we know what html can potentially do and how it can put out on the internet the ideas of the developer. How valuable learning to code in html can be and the need of such developers in the present and the future time. The only question that remains is “Would you like learning such a skill?”
You saw how the HTML/CSS code works and how it is implemented, but did you like reading the above topics? Did it excite you enough to make you want to build your own web-page? If yes, then hope that this blog serves as as inspiration!
