This article is currently in the process of being translated into Portuguese (~33% done).
If you are fluent in Portuguese, then please help us - just point to any untranslated element inside the article and click the translation button to get started. Or have a look at the current translation status for the Portuguese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
Id's & Classes
Agora que começamos a dividir semanticamente o nosso conteúdo, é hora de introduzir ainda um outro conjunto de atributos/valores. Até agora, nós não trabalhamos com a visualização de sua página, mas mais tarde você poderá querer mudar o visual de sua Web page, e este é o lugar onde os atributos do tipo "Id" e das classes serão estabelecidos.
Este atributo associa um nome (id) ao seu elemento. O nome deverá se único e não poderá ser usado em nenhum outro identificador de elemento em seu documento. O "id" geralmente é uma abreviação do identificador, então, você deverá usar o atributo "id" quando você desejar associar este elemento ao conjunto de regras descritos no identificador.
You could use the id-element to e.g. define columns in your webpage and the HTML markup would look like this:
<div id="right-column">Content of the right column</div> <div id="left-column"> Content of the left column </div>
I said that id-elements would have to be unique and this means you cannot have two with the same value in you markup – the following example would not render correctly in the browser:
<div id="menu">This would be your menu</div> <div id="blog-entry">Your first blog-entry</div> <div id="blog-entry">Your second blog-entry</div>
Classes are used to assign some general properties to your element. This means, that you can have several elements in your document with the same class-name. You do this, because you want them to behave and look the same way. Normally this is used for e.g. links or images – when you want a lot of elements to look the same. Below is an example where we assign different classes to the entire blog-entry and to a specific part of the blog-entry.
<div class="blog-entry"> <p> Just Another Day<br /> Written by Christina<br /> On January 11th </p> <p class="content">This is my second blog entry, and I just wanted to check in on you </p> </div> <div class="blog-entry"> <p> My First Blog Entry<br /> Written by Christina<br /> On January 10th </p> <p class="content">I’m so happy to write my first blog entry – yay!</p> <div>
You can use this in combination with Cascading Style Sheets (CSS). CSS tells the browser how to display a HTML-element, this means that all formatting is (or should be) removed from the HTML-document and stored in a separate file – also referred to as the style sheet. I will not go further into CSS in this tutorial, but it is important that you know there is a thing called style sheets and the design of your webpage is defined in these documents.
What you have learned
- Id’s and classes are attributes
- Id’s are unique to the specific element
- Classes can be used across several elements
- They are normally used in combination with CSS