If you have come up to this article it is likely that at least know that the HTML is a language for building websites. It is quite possible that you are also interested in finding out about the process for developing websites.
Well, that's it. As a beginner, starting with HTML is the most suitable way, as it will bring you a minimal visual result in a short time of study and because it is the basic language for structuring web pages.
Are you in the mood to learn how to build web pages? So I invite you to continue reading this article that will show you the basic principles of this language that was the starting point for many developers and successful web designers and that may be yours as well.
In this article you will find the definition of elements, attributes, tags, terms these common and related to HTML. You'll know some basic elements and their marking structures. And you'll also understand the structure of a common web page built with pure HTML.
In this article you will see:
- empty elements
- Elements within other elements
- Basic HTML Framework [Building Your First Web Page]
What is HTML?
HTML is an acronym for HyperText Markup Language,which Portuguese means hypertext markup language. It is a markup language that we use to publish content (text, image, video, audio and etc.) on the web.
What is HTML for?
It is for the browser to interpret it, informing you how to structure the web page, and display its content when you access this page over the internet.
HTML integrates the languages that make up the layers of web development
When we access a web page the resulting interface, in most cases, is obtained through 3 layers with different functions. Each layer is represented by a specific language.
HTML - The layer that presents the content
We can say that HTML is the first layer. It is in this layer that we assign semantics to the content. It is where we can say that certain information is a paragraph, that certain text is an article, etc.
HTML is responsible for displaying the content giving it meaning.
CSS - The layer that forms html elements
CSS is a language of stylization, formatting. When you see text with a certain style, a page with a certain background color or a block wrapped around a border knows that all of this was obtained with CSS.
CSS selects an HTML element to style it and present it as a new shape in the browser.
But HTML is the key
Understanding web development layers will help you understand how languages relate and also how the development area assigns roles to your collaborators.
Below I leave a more in-depth material in video that illustrates well the web layers.
Is it worth learning HTML?
If your goal is even to build websites, it's worth learning HTML. Even if you have questions about whether it's difficult or laborious, it's worth at least starting to get in touch with the language for you to evaluate.
Opinions are divided on the level of difficulty in learning HTML. Of course, the absorption of knowledge is not the same in all people, but any fear should not paralyze you in the goal of learning.
In the first contacts with THE HTML you will be able to visualize encouraging results in your browser with the first content exposed. That's what will cheer you up in the course of your studies.
What makes it worthwhile to start learning this language are the facts of you already beginning to understand all the operation that involves making pages, building your first pages, understanding and interpreting codes to maintain websites and know how to communicate with work teams about details that involve coding.
Not to mention that to learn other languages that involve building websites is a prerequisite to already master HTML.
Requirements to learn HTML
For you to learn HTML it is enough to have basic computer skills. It is also necessary that software is installed on your machine that allows the manipulation of codes. Notepad can perform the task and it forces you to learn by having no resource that autocompletes codes.
Software is created and discontinued, so I will indicate two that I use that are active at the time I write this article, and that you can use when you already have a good domain and want something that speeds up your work. It's them; the Sublime Text it's the Notepad ++. But you're free to search about HTML editors until you find the one that brings you the best benefits.
What are tags and what are HTML elements?
When it comes to working with HTML code we keep in mind that there is a logical way to arrange the character set for constructing those codes that will show the content. It's about the syntax. The form worked in HTML is through tags.
Tags are specific tags, instructions that delimit content and inform the browser about what kind of information it is (a title, a paragraph, a list). When you see a visual on a web page, from a text, photo, or video, know that they are inserted through tags.
Every tag contains a name (brand name) and it also gives designation to the HTML element. They are used to mark the beginning and end of an element. From there we can conclude that HTML elements are constructed by tags.
Elements specify how HTML documents should be constructed. Through them it is possible to determine what type of content and where it, within the HTML document, can be inserted and also convey semantic meaning to the inserted content.
Let's now better expose in HTML syntax how tags form HTML elements.
Each element is formed by an opening tag and a closing tag. And between these tags is placed the content.
The opening tag marks the beginning of the element. It starts with the lowest signal <, followed by the name of the tag that represents the element we want to insert in the HTML document and ending with the angle bracket >.
To exemplify let's use the tag that instructs you to insert a paragraph (p).
The closing tag marks the end of the element. It is similar to the aperture tag and differs by the use of a bar after the minor signal. Then it starts with the lowest signal <, followed by the bar sign , then by the name of the tag that represents the element we want to insert into the HTML document and ending with the plus sign >.
The following is another video that illustrates well didactics the web syntax. Check!
Now what is left is to understand how the element forms.
Let's continue to use the paragraph as an example. To develop the element first we put the opening tag , then the information we want to display, and to close the closing tag.
This is a paragraph.
There are some elements that have only the opening tag. They are called empty or null elements. The opening tag of these elements have automatic closing.
Let's see an example with the tag used for line breaks in texts:
av. Itaquera, 1000 - Itaquera
Sao Paulo - SP
In this case we see a paragraph where after the element
; the line is broken and the content continues on the next line.
The use of the void element is as simple as with only one tag. There is no content between open and close tags as in common elements.
In some cases you may find null elements with self-closing. They are usually found in an extensible version of HTML, XHTML. The result of the two versions is the same. The following is the result:
av. Itaquera, 1000 - Itaquera
Sao Paulo - SP
Elements within other elements (Nesting)
It will be common for you, when dealing with HTML code, to see one element within another. To this behavior we call nesting, where it is often said that the element that contains, which houses the inner element is the element "parent" (ancestral element) and the sheltered element is the element "child" (descending element).
Let's take an example:
Web Designer PRO is the official web design course of Chief of Design. Don't take imitations!
In the example above we have a parent element (p) that contains two child elements (strong). Therefore strong, tag used to emphasize snippet of a sentence, is nested within p.
These are extra instructions that we give to an HTML element to perform a specific behavior. These attributes are inserted into the opening tags.
Let's say we want a text to have a red color. We can insert an attribute called "class" into the opening tag. Class if it means "class". With this class we can trigger the tag (which is with the given class) with the CSS formatting language and thus change the color of the text to red.
The attribute is included as follows in the opening tag:
- First enter the minor sign < followed by the tag name of the element to be inserted.
- Then leave an empty space.
- Then put the name of the attribute to be used followed by an equals sign. ₌.
- Right after open two quotation marks and put in a value for the attribute.
- To close, put the greater sign >.
An example of the syntax:
Not all attribute types are used by all elements, some are specific to each element type. When an attribute can be used in any HTML element it is part of the global attributes.
It is important to know the attributes, however at first I advise you to focus on knowing the HTML elements to know the attributes in the second moment. You can see more about attributes neste link.
Basic structure [Building your first web page]
Now I'll explain to you in simple steps how to set up your first web page. Don't expect anything advanced. It's like learning to drive: we start with the first gear. In our case, a page with simple content.
Let's build the most basic structure using common and fundamental structural HTML elements on any page.
What will we need?
You can choose to do what I propose at any time. But anyway I will pass you the process in stages, which in total does not take 5 minutes to execute, and within the steps I explain the function of each element used.
All you need is to open on your machine a notepad style text editor or your favorite editor. Optionally you can even leave prepared a folder to save this file and possible files that you will create as a form of study.
Step 1 - Insertion of the html element
the element html is the root of the document. It is formed by the opening tag and by the closing tag </html>. These tags delimit the document.
Open a new document in your editor and type the html element tags as follows:
In the code above we can notice that we started, in the first line with root element whose opening occurred with the tag and its closure is concretized in the last line with the tag </html>.
Step 2 - Insertion of the head element
the element head is responsible for harboring header elements. It is common to find elements for styles, scripts, and meta tags. It is formed by the opening tag and by the closing tag </head>. These tags delimit the document.
The head element is "child" of the "html" element.
For this second step, place the head tags between the opening and closing tags of the html element as follows:
NOTE: You may notice that before the head tags there are blanks. This behavior is the result of indentation. Indentation consists of organizing your code so that it is aesthetically pleasing and mostly readable.
You can indent your code using the TAB before the tags.
Step 3 - Insertion of the meta tag that tells you the character encoding format
Meta tags are responsible for providing important information about the HTML document. With them you can pass information that describes the content of your page to search engines, tell you what language is used on the page, tell who is the author of the code, among other functions.
In this step we will use a meta tag that tells you the character encoding format. This is so that your page does not get strange characters as in the following image.
In this meta tag we will use the attribute charset and the value utf-8.
Insert the metag tag between the opening and closing tags of the head element.
NOTE: This meta tag is an empty element.
Step 4 - Insertion of the title element
This element is responsible for the title view that you see at the top of your browser (toolbar).
It is formed by the opening tag
Insert between the opening and closing tags of the head element, and just after the meta tag, the title element tags as follows:
My first web page
NOTE: You are free to type content you want between title tags. Take the test.
Step 5 - Insertion of the body element
This is a key element within the HTML document. It illustrates the body of the page. And through it it is possible to display content on the page. Among the tags of this element is that other specific tags will be inserted for inserting content and dividing sections.
The body element is formed by the opening tag and by the closing tag </body>.
Insert between the opening and closing tags of the html element, and just after the closing tag of the head element the body element tags as follows:
My first web page
Step 6 - DOCTYPE Insertion
I promised you to show the fundamental tags on a page. In the steps presented you had contact with them. However there is an important additional element, which is not a tag, and should appear within HTML document, I speak of the DOCTYPE.
DOCTYPE is a statement responsible for telling browsers which version of HTML the document was written to. This statement must be positioned at the beginning of the document.
The most common version found on websites at the time I write this article is HTML5. It is also the simplest version to declare. You can learn the other types of declaration in this link.
Here I will exemplify use of DOCTYE for HTML5. To declares simply that you type the following code in the first line of your editor before the opening tag of the html element.
Here's what the code should look like:
My first web page
Step 6 - Save the HTML document
Save the file to your computer in the folder of your choice.
If you use Notepad, from the menu select "Archive" and then "Save as".
name the file "index.html". You can set up another name for the file, but the extension must be .html.
In type selects the option "All files" and set the encoding to "UTF-8".
Step 7 - View the page in your browser
Go to the location where you saved the HTML document and open the file by double-clicking on it.
You will see the open page in the main browser installed on your machine.
however the steps DO NOT STOP there, because even though we have a ready-made HTML page, you still can't see the content. In the example, you will only see the page title at the top of the browser.
But don't be disappointed. I'll show you two more HTML elements that are widely used in web pages that will finally show your page with content in the next step.
Step 8 - Insertion of elements h1 and p
the element h1 is responsible for displaying the most important title in the body of the page. Do not confuse this title with the title of the title element. As you already know the title displays the title at the top of the browser.
the element p he's an old acquaintance. He is responsible for inserting paragraphs.
These elements will be inserted between the body opening and closing tags. Proceed according to the following code. You can change the contents between element tags if you prefer.
My first web page
My first web page
I learned how to build my first web page with Chief of Design.
Save the file to the same location you saved last time. Your system will alert you if you want to replace the file. Replace.
After that, go to the file and open to view in the browser. You will have a similar result to this:
Of course it is the result obtained was something simple. By acquiring knowledge about other existing tags you can evolve and insert various types of content. With HTML it is possible to insert items that you have definitely interacted browsing the web such as videos, images, lists, forms, tables, audios, among others.
This guide was only the kickoff, but the most constant use fundamental you've ever known. HTML is a fantastic language of the one that when we take taste becomes a knowledge that we always want to apply it and evolve in knowing more.
I hope this article has been helpful and clarified your initial questions. Others will come. So feel free to expose your questions in the comments section.
I also suggest reading the article “18 things about HTML that I wish they had told me when I started creating my first website”. And also know the course of Chief of Design about HTML and CSS. You can access the fluency course in HTML and CSS by clicking here!
I also ask you to share this article with friends who also want to learn about HTML.
hello! This is Ed Francisco, a Chief of Design since its first lines of content and codes.
Speaking of code, I believe HTML is the most remarkable web technology that has allowed me to get to where I am, and also write these lines about me for you.
I have a degree in Production Technology (this is where I got to know HTML) and a Technician in Digital Production, Web and Multimedia (where I improved my knowledge of HTML).
I'm from São Paulo from the East Zone. I ventured trying to unravel the mysteries of the web since 2008.