aboutsummaryrefslogtreecommitdiff
path: root/files/pt-pt/learn/common_questions/what_is_a_url/index.html
blob: c197a3df0a32b11555d16dcf87da5ebf71832630 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
---
title: O que é um URL?
slug: Learn/Common_questions/What_is_a_URL
tags:
  - Infraestrutura
  - Principiante
  - URL
translation_of: Learn/Common_questions/What_is_a_URL
original_slug: Learn/Questoes_comuns/O_que_e_um_URL
---
<div class="summary">
<p>This article discusses Uniform Resource Locators (URLs), explaining what they are and how they're structured.</p>
</div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisites:</th>
   <td>You need to first know <a href="/en-US/docs/Learn/How_the_Internet_works">how the Internet works</a>, <a href="/en-US/docs/Learn/What_is_a_Web_server">what a Web server is</a> and <a href="/en-US/docs/Learn/Understanding_links_on_the_web">the concepts behind links on the web</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objective:</th>
   <td>You will learn what a URL is and how it works on the Web.</td>
  </tr>
 </tbody>
</table>

<h2 id="Resumo">Resumo</h2>

<p><span class="seoSummary">With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, <strong><dfn>URL</dfn></strong> is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</span></p>

<p><strong>URL</strong> stands for <em>Uniform Resource Locator</em>. A URL is nothing more than the address of a given unique resource on the Web. In theory, each valid URL points to a unique resource. Such resources can be an HTML page, a CSS document, an image, etc. In practice, there are some exceptions, the most common being a URL pointing to a resource that no longer exists or that has moved. As the resource represented by the URL and the URL itself are handled by the Web server, it is up to the owner of the web server to carefully manage that resource and its associated URL.</p>

<h2 id="Aprendizagem_Ativa">Aprendizagem Ativa</h2>

<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>

<h2 id="Deeper_dive">Deeper dive</h2>

<h3 id="Basics_anatomy_of_a_URL">Basics: anatomy of a URL</h3>

<p>Here are some examples of URLs:</p>

<pre>https://developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL</pre>

<p>Any of those URLs can be typed into your browser's address bar to tell it to load the associated page (resource).</p>

<p>A URL is composed of different parts, some mandatory and others optional. Let's see the most important parts using the following URL:</p>

<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>

<dl>
 <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt>
 <dd><code>http://</code> is the protocol. It indicates which protocol the browser must use. Usually it is the HTTP protocol or its secured version, HTTPS. The Web requires one of these two, but browsers also know how to handle other protocols such as <code>mailto:</code> (to open a mail client) or <code>ftp:</code> to handle file transfer, so don't be surprised if you see such protocols.</dd>
 <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
 <dd><code>www.example.com</code> is the domain name. It indicates which Web server is being requested. Alternatively, it is possible to directly use an {{Glossary("IP address")}}, but because it is less convenient, it is not often used on the Web.</dd>
 <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
 <dd><code>:80</code> is the port. It indicates the technical "gate" used to access the resources on the web server. It is usually omitted if the web server uses the standard ports of the HTTP protocol (80 for HTTP and 443 for HTTPS) to grant access to its resources. Otherwise it is mandatory.</dd>
 <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
 <dd><code>/path/to/myfile.html</code> is the path to the resource on the Web server. In the early days of the Web, a path like this represented a physical file location on the Web server. Nowadays, it is mostly an abstraction handled by Web servers without any physical reality.</dd>
 <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
 <dd><code>?key1=value1&amp;key2=value2</code> are extra parameters provided to the Web server. Those parameters are a list of key/value pairs separated with the <code>&amp;</code> symbol. The Web server can use those parameters to do extra stuff before returning the resource. Each Web server has its own rules regarding parameters, and the only reliable way to know if a specific Web server is handling parameters is by asking the Web server owner.</dd>
 <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
 <dd><code>#SomewhereInTheDocument</code> is an anchor to another part of the resource itself. An anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. On an HTML document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. It is worth noting that the part after the <strong>#</strong>, also known as the<em> <strong>fragment identifier</strong>, is never sent to the server with the request.</em></dd>
</dl>

<p>{{Note('There are <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">some extra parts and some extra rules</a> regarding URLs, but they are not relevant for regular users or Web developers. Don\'t worry about this, you don\'t need to know them to build and use fully functional URLs.')}}</p>

<p>You might think of a URL like a regular postal mail address: the <em>protocol</em> represents the postal service you want to use, the <em>domain name</em> is the city or town,  and the <em>port</em> is like the zip code; the <em>path</em> represents the building where your mail should be delivered; the <em>parameters</em> represent extra information such as the number of the apartment in the building; and, finally, the <em>anchor</em> represents the actual person to whom you've addressed your mail.</p>

<h3 id="Como_utilizar_os_URLs">Como utilizar os URLs</h3>

<p>Any URL can be typed right inside the browser's address bar to get to the resource behind it. But this is only the tip of the iceberg!</p>

<p>The {{Glossary("HTML")}} language — <a href="/en-US/docs/Learn/HTML/HTML_tags">which will be discussed later on</a> — makes extensive use of URLs:</p>

<ul>
 <li>to create links to other documents with the {{HTMLElement("a")}} element;</li>
 <li>to link a document with its related resources through various elements such as {{HTMLElement("link")}} or {{HTMLElement("script")}};</li>
 <li>to display medias such as images (with the {{HTMLElement("img")}} element), videos (with the {{HTMLElement("video")}} element), sounds and music (with the {{HTMLElement("audio")}} element), etc.;</li>
 <li>to display other HTML documents with the {{HTMLElement("iframe")}} element.</li>
</ul>

<p>Other technologies, such as {{Glossary("CSS")}} or {{Glossary("JavaScript")}}, use URLs extensively, and these are really the heart of the Web.</p>

<h3 id="URLs_absolutos_vs_URLs_relativos">URLs absolutos vs URLs relativos</h3>

<p>What we saw above is called an <em>absolute URL, </em>but there is also something called a <em>relative URL</em>. Let's examine what that distinction means in more detail.</p>

<p>The required parts of a URL depend to a great extent on the context in which the URL is used. In your browser's address bar, a URL doesn't have any context, so you must provide a full (or <em>absolute</em>) URL, like the ones we saw above. You don't need to include the protocol (the browser uses HTTP by default) or the port (which is only required when the targeted Web server is using some unusual port), but all the other parts of the URL are necessary.</p>

<p>When a URL is used within a document, such as in an HTML page,  things are a bit different. Because the browser already has the document's own URL, it can use this information to fill in the missing parts of any URL available inside that document. We can differentiate between an <em>absolute URL</em> and a <em>relative URL</em> by looking only at the <em>path</em> part of the URL. If the path part of the URL starts with the <code>"/</code>" character, the browser will fetch that resource from the top root of the server, without reference to the context given by the current document.</p>

<p>Let's look at some examples to make this clearer.</p>

<h4 id="Exemplos_de_URLs_absolutos">Exemplos de URLs absolutos</h4>

<dl>
 <dt>Full URL (the same as the one we used before)</dt>
 <dd>
 <pre>https://developer.mozilla.org/en-US/docs/Learn</pre>
 </dd>
 <dt>Implicit protocol</dt>
 <dd>
 <pre>//developer.mozilla.org/en-US/docs/Learn</pre>

 <p>In this case, the browser will call that URL with the same protocol as the the one used to load the document hosting that URL.</p>
 </dd>
 <dt>Implicit domain name</dt>
 <dd>
 <pre>/en-US/docs/Learn</pre>

 <p>This is the most common use case for an absolute URL within an HTML document. The browser will use the same protocol and the same domain name as the one used to load the document hosting that URL. <strong>Note:</strong> <em>it isn't possible to omit the domain name without omitting the protocol as well</em>.</p>
 </dd>
</dl>

<h4 id="Exemplos_de_URLs_relativos">Exemplos de URLs relativos</h4>

<p>To better understand the following examples, let's assume that the URLs are called from within the document located at the following URL: <code>https://developer.mozilla.org/en-US/docs/Learn</code></p>

<dl>
 <dt>Sub-resources</dt>
 <dd>
 <pre>Skills/Infrastructure/Understanding_URLs
</pre>
 Because that URL does not start with <code>/</code>, the browser will attempt to find the document in a sub-directory of the one containing the current resource. So in this example,  we really want to reach this URL: <code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code></dd>
 <dt>Going back in the directory tree</dt>
 <dd>
 <pre>../CSS/display</pre>

 <p>In this case, we use the <code>../</code> writing convention — inherited from the UNIX file system world — to tell the browser we want to go up from one directory. Here we want to reach this URL: <code>https://developer.mozilla.org/en-US/docs/Learn/../CSS/display</code>, which can be simplified to: <code>https://developer.mozilla.org/en-US/docs/CSS/display</code></p>
 </dd>
</dl>

<h3 id="URLs_semânticos">URLs semânticos</h3>

<p>Despite their very technical flavor, URLs represent a human-readable entry point for a Web site. They can be memorized, and anyone can enter them into a browser's address bar. People are at the core of the Web, and so it is considered best practice to build what is called <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>semantic URLs</em></a>.  Semantic URLs  use words with inherent meaning that can be understood by anyone, regardless of their technical know-how.</p>

<p>Linguistic semantics are of course irrelevant to computers. You've probably often seen URLs that look like mashups of random characters. But there are many advantages  to creating human-readable URLs:</p>

<ul>
 <li>It is easier for you to manipulate them.</li>
 <li>It clarifies things for users in terms of where they are, what they're doing, what they're reading or interacting with on the Web.</li>
 <li>Some search engines can use those semantics to improve the classification of the associated pages.</li>
</ul>

<h2 id="Passos_seguintes">Passos seguintes</h2>

<ul>
 <li><a href="/pt-PT/docs/Learn/Questoes_comuns/O_que_e_um_nome_de_dominio">Compreender os nomes de domínio</a></li>
</ul>

<div id="SL_balloon_obj" style="display: block;">
<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div>

<div id="SL_shadow_translation_result2" style="display: none;"> </div>

<div id="SL_shadow_translator" style="display: none;">
<div id="SL_planshet">
<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>

<div id="SL_Bproviders">
<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>

<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>

<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
</div>

<div id="SL_alert_bbl" style="display: none;">
<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>

<div id="SL_alert_cont"> </div>
</div>

<div id="SL_TB">
<table id="SL_tables">
 <tbody><tr>
  <td class="SL_td"><input></td>
  <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
  <td class="SL_td">
   <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
  </td>
  <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
  <td class="SL_td">
   <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
  </td>
  <td class="SL_td">
   <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
  </td>
  <td class="SL_td">
   <div id="SL_bbl_font_patch"> </div>

   <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
  </td>
  <td class="SL_td">
   <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
  </td>
  <td class="SL_td">
   <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
  </td>
 </tr>
</tbody></table>
</div>
</div>

<div id="SL_shadow_translation_result" style=""> </div>

<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>

<div id="SL_player2"> </div>

<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>

<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>

<table id="SL_tbl_opt" style="width: 100%;">
 <tbody><tr>
  <td><input></td>
  <td>
   <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
  </td>
  <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
  <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
 </tr>
</tbody></table>
</div>
</div>
</div>