Learning HTML and CSS

Learning HTML & CSS is not too difficult! But what do you usually think about when I ask what’s HTML and CSS? Whether you are a novice, online marketer, or WordPress Expert building a custom website, you need to know HTML and CSS as the bare minimum skills. It can be intimidating for someone attempting to code for the first time on paper. However, it’s a lot simpler and less complicated than perceived.

What is HTML?

When talking about HTML, the first thing that comes to mind is what HTML is. How does it differ from other coding languages? The following question that comes to mind is the history of HTML. When was it created, and for what purpose within the world of web development at the time?

HTML, which stands for HyperText Markup Language, is a coding language for web pages. Within HTML, headings and bodies are essential in creating the web page’s structure. In return, this allows a visitor viewing the site to have a better experience; thus, a webpage can become more popular with word of mouth of a visitor telling their friends or family about their experience on the webpage. The modern business market is heading towards a digital trend, so creating web pages to expand and attract new customers is critical. Knowing HTML can help you stay ahead of the curve while giving people a good website experience.

History of HTML

In 1989, Tim Berners-Lee, the web inventor, worked at the European Laboratory for Particle Physics in Geneva, Switzerland, or CERN, when he came up with an idea to enable researchers from remote sites worldwide to organize and pool the information together. Lee came up with making research document files only able to be downloaded to individual computers and linking the text in the files. This meant that you could display another without haste while reading one research paper. With this idea implemented, information about science and mathematics could now be held on the web in electronic form on computers worldwide.

Many versions of HTML were released within the following years as the web grew and grew exponentially to what it is today. Though Tim Berners-Lee came up with HTML, the first version of HTML would not be released until 1993 for similar reasons to Lees. Interest came in sharing information that is readable and accessible through web browsers.

New and improved HTML versions will be released in upcoming years with HTML 2.0, building on the first version of HTML with new features. HTML 3.0, however, brought a whole new part that would be game-changing with that being able to draft on HTML. We are currently running on HTML5, the most advanced of the different versions of HTML that can implement features that previous versions of HTML would need plugins in.

The basic structure of HTML Page

Building an HTML page requires understanding tags. Specifically, its aspects, such as its tags, make up things like the heading and text of a page. Another aspect is the HTML page structure and where to put images and tables to help view the page.

What are the HTML tags?

HTML tags are keywords within a web page that define how a web browser formats and displays content. Most HTML tags come in two parts: the opening and closing parts. An example of this is the “<HTML>” which is the opening tag of HTML followed by a closing tag of “</html>” at the end of the code to ensure all elements within the HTML code are closed. However, within HTML, a web browser has four essential tags to display the code correctly.

As mentioned before, the “<html> and </html>” tag is necessary as all other types of tags fall in between them. Usually below the “<html>” tag in the header or “<header>” and “</header>” tag, which contains information about the document but doesn’t appear on the page. After that, the title or “<title>” and “</title>” tag comes, which defines the title that will appear at the top of the browser. Hint: this is usually the big bolded words on the top of the page that says “Amazon Prime.” Then lastly, there is the body or “<body>” and “</body>” tags which contain all the other elements, such as images, links, and information about the page.

List and Images

When it comes to lists, they are used mostly to simplify information. A paragraph full of information can be simplified by getting to the point quicker with a few bullet points. This allows visitors who may not have much time to view a website to get the information quickly. There are two types of lists in HTML which each use the li or “<li>” and </li>” which are ordered and unordered lists. An ordered list uses the “<ol>” and “</ol>” tags to list things in order. How this would look on a web page is,

Hi
Hello
Hey

An unordered list doesn’t have numbers. It instead displays bullet points. How this would look on a web page is,

Hi
Hello
Hey

Another way to simplify information is through images that can tell as much as a paragraph with a thousand words. Images help spread out information also so when creating a website. More importantly, images can lessen the aggravation of having paragraphs thrown at the visitor, which can cause them to click off the website. Unlike other tags, however, an img tag is not required to be closed. Several elements make up an image tag, most notably the “img src” which is the image displayed based on the specific URL of the image. Then comes the alternate text, which defines the text in place of the image when it cannot load while validating the HTML. The image size is finished off the tag, the height, and the width to which a web developer can type in any number and adjust to the page.

Example of the image tag:

“<img src=’yourimage.jpg’ alt=’Describe the image’ height=’X’ width=’X’>”

Importance of Tables

Tables are a great way of quickly and effectively displaying data to a site visitor. They can get information out quickly and effectively in the list and images without going through paragraphs that last thousands of words. Tables can also divide information within a webpage, allowing visitors to quickly get information from tables while not feeling annoyed and taking time to read the paragraphs explaining information.

There are several elements within a table with the “<table>” and “</table>” tags used to define a table while containing the row and column tags. A heading must come first within the form of a header cell, or “<th> and “</th>” usually appear at the first row of a table. After that comes table row or “<tr> and </tr>” tags. Within the table row tags are table cells or “<td>” and “</td> “tags where the content of the table goes.

Example of a table:

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

HTML Editors

An HTML editor is used to write HTML and CSS and applied to creating a website. Though a text editor could also be used to write HTML and CSS, it doesn’t come with an HTML editor’s features. HTML editors come with added functionalities such as error checking, highlighting syntaxes, etc., to help code HTML and CSS easier when creating a website. HTML editors are a way to ease programming with HTML and CSS for beginners and advanced developers. As mentioned before, the functionalities keep the code functional and clean from error; thus, viewing the code isn’t like figuring out a path in a maze.

There are two types of HTML editors which are WYSIWYG and Textual. WYSIWYG stands for What You See Is What You Get, a type of editor that shows the final working webpage while you’re programming it. This type of editor is the easier of the two, as knowledge of HTML is unnecessary. The other type of HTML editor is the Textual editor, which is text-based and relies on the developer to know HTML. Textual editors give more freedom and personalized options, which can be better when optimizing web pages for search engines.

Regarding HTML editors, there are several types, each with different tools to fit different ways developers want to code CSS and HTML. Examples of HTML editors:

Notepad++
Sublime Text

How to create the basic structure of an HTML page

When creating an HTML page, think of it as putting a sandwich together. You have the bread, the slices that cover the top and bottom, and the tomato, lettuce, ham, etc., which make up the sandwich’s contents. So in terms of HTML, the “<html>” tag would be the top bread slice going at the top of the code above everything else and starting it. Meanwhile, the “</html>” tag would be the bottom bread slice being the tag that closes the whole thing out.

Then comes the “<head>” and “<body>” tags which contain information about the content of the page. The content of the page is things such as the title and paragraphs, which come in the “<p>” and “<title>” tags. Other page content can go in things like lists, images, and tables that can quickly get information to a visitor. Think of it like ketchup or mayonnaise, it’s a cosmetic that can improve your sandwich, but you don’t need it.

Example of Basic Structure of HTML Page.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Homepage Headline</h1>
<p>This is a paragraph.</p>
</body>
</html>

Takeaway

What is HTML? HTML stands for HyperText Markup Language and contains a heading and body to create the web page’s structure. In 1989, the web inventor Tim Berners-Lee created it to pool information by linking research documents files. Several HTML versions have been released over the years, coming with new features. The most recent HTML5, the most advanced of the different versions, can implement features in which previous versions of HTML would need plugins.

A basic structure of an HTML page comes with multiple things, such as tags that create the page’s structure. Things like “<html>” and “</html>” tags are used to open and close the program.

Whether you’re looking for a website or hiring one to develop one. Knowing what HTML is and its basic structure, you now know to become a web developer and start working on your webpage. If your project entails more complexity, check out our web services!