The first look at front end web dev! -Part 1

Image for post
Image for post

This is the the first episode in this series, if you didn’t read the introductory article, which i highly recommend, feel free to do so by visiting . If you want the full plan for this series, you can find it .

Definition

HTML or Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. Hypertext means a text that contains references (links) to other texts that viewers can access immediately.

HTML is not a programming language, meaning it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize and format documents, similarly to Microsoft Word.

The History of HTML

HTML was invented by , a physicist at the CERN research institute in Switzerland.

He published the first version of HTML in 1991, consisting of 18 HTML tags. Since then, each new version of the HTML language came with new tags and attributes (tag modifiers) to the markup (currently around 140 tags with HTML version 5 or simply HTML5 ).

How Does HTML Work?

HTML documents are files that end with a .html or .htm extension (if you are not familiar with file extensions it’s just similar to .pdf for pdf files). You can view it using any web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser reads the HTML file and renders its content so that internet users can view it.

Each HTML page consists of a set of tags (also called elements), which you can refer to as the building blocks of web pages. They create a hierarchy that structures the content into sections, paragraphs, headings, and other content blocks.

Most HTML elements have an opening and a closing that use the <tag></tag> syntax.

Also HTML document is case insensitive, which means the browser won’t care if you write <html> or <HTML> or <HtMl>.

Let’s see some examples…

Oh wait, i didn’t tell how can you create an HTML file yet. Actually you can simply use notepad to write some code and then change it’s extension from .txt to .html. But honestly, that’s not practical, so ugly and time consuming, so let’s explore our first tool “Visual Studio Code”.

Why VS code?

Because VS Code is a free source code editor, cross-platform (works on multiple operating systems: Windows, macOS, Linux), fast, supports hundreds of languages and it helps you edit, build, and debug web applications.

There are of course other similar tools, but VS code is my favorite so far and probably i ll write an article about it to get the most out of it. BTW, you can download it from and install it.

Now, let’s go back and create our first HTML file..

Open VS code, go to the menu bar , choose File and then New File. Give a name to your file with .html and hit enter. Now type ‘!’ with your keyboard and hit enter again.

Image for post
Image for post
Wow! with just two key strokes, you created that, good job

That’s the basic content of any HTML5 document .Now, you just need to know that The <head> element contains metadata (which is just data that describes and gives information about other data such as document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user.

The <meta> element is used to specify the metadata to provide browsers and search engines with technical information about the web page.

For example, if you want to specify the author of your document, you may use the <meta> element like this:

<meta name="Author" content="HTML of things Article">

Now if you open your file with any browser, it’s ll be just empty. Why? simply because we just defined the structure of the page and we didn’t add any content. So let’s add some, add this line between <body>and </body> because the browser only shows what you put there.

|<h1>Yayy, my first web page is ready!</h1>

Now refresh the page on the browser or reopen it, you’ll get this:

Image for post
Image for post
Congrats!

Block-Level and Inline Elements

For the purpose of styling, elements are divided into two categories: block-level elements and inline elements.

In summary, a <span> element is used as an inline element and a <div> element as a block level element.

The difference between the two elements is a commonly misunderstood concept of web design but it does not have to be!

Basically, an inline element does not cause a line break (start on a new line) and does not take up the full width of a page. It is usually used within other HTML elements.

Example: let’s try the emphasis <em> tag and the anchor <a> tag and add the following to our code:

we get this:

Image for post
Image for post
Inline element test

As you can see, by using inline elements, we get the result at the same line. However, if we use block-level element,it will always starts on a new line and takes up the full width of a page, from left to right. A block-level element can take up one line or multiple lines

Did you notice? the <h1> tag is a block-level element, it took all the line for itself. Otherwise we would get something like this:

Image for post
Image for post
All the content is in the same line

And because we are lucky, we can go to the next line even if we are using inline elements with the help of our friend the <br> tag.

Image for post
Image for post
Using <br> to break the line

Now, you may be wondering why did we write <br> instead of <br></br> .

Well, don’t worry because in the next episode, we’ll dive deeper into HTML and we’ll see it’s important tags by building a simple project.

Thank you for reading this and stay tuned because the best is yet to come.

Written by

A student who loves to talk about Business and Web Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store