Cours pdf html et css

In addition, you can use transformations to round corners or skew and rotate elements. Some are obvious, and some are less so. Can I Still Use Them? You sure can! XHTML documents forced quoted attributes, made you self-close content tags, required that you use lowercase attribute names, and brought well-formed markup onto the World Wide Web.

This is why you see script tags coded with an explicit closing tag, even though a self-closing tag is valid XHTML markup. I like pie better, but cake is pretty good stuff. I prefer cake with frosting on it. Your website can be really good without that stuff, and just like a cake, you need a foundation on which to put your frosting.

They scrape it off the cake. Bake these people a really awesome cake. Then add frosting. Accessibility Our users must be able to interact with our websites, whether they are visually impaired, hearing impaired, on older browsers, on slow con- nections, or on mobile devices.

HTML5 introduces some new elements, such as audio, video, and canvas. Audio and video have always had accessibility issues, but the canvas element presents new challenges.

This creates issues for the visually impaired but also causes problems for the 5 percent of web users who have disabled JavaScript. Deprecated Tags HTML5 has introduced a lot of new elements, but the specification also deprecates quite a few common elements that you might find in your web pages. First, several presentational elements are gone. If you find these in your code, get rid of them! Replace them with semantically correct elements and use CSS to make them look nice. Aside from the presentational elements, support for frames has been removed.

Frames have always been popular in enterprise web appli- cations such as PeopleSoft, Microsoft Outlook Web Access, and even custom-built portals. Despite the widespread use, frames caused so many usability and accessibility issues that they just had to go.

In addition to deprecated elements, there are many attributes that are no longer valid. The profile attribute on the head tag is no longer supported either, and this is something you tend to see in a lot of WordPress templates. Finally, the longdesc attribute for img and iframe elements is gone, which is a bit of a disappointment to accessibility advocates, because longdesc was an accepted way of providing additional descriptive information to users of screen readers.

Be sure to validate your pages with the W3C Validator service,5 because this will help you locate deprecated tags and attributes. Firefox, how- ever, supports ogg files instead of mp3 files.

Eventually these differences will be resolved. In the meantime, we can make smart choices about what we support either by limiting what we implement to the browsers used by our target audiences or by imple- menting things multiple times, once for each browser until the stan- dards are finalized.

While Firefox, Chrome, and Safari have strong HTML5 support, if the specification changes, the browsers will change with it, and this could lead to some deprecated, broken websites. During the course of writing this book, CSS3 box shadows have been removed and re-added to the specification, and the Web Sockets proto- col has been modified, breaking client-server communications entirely.

There are a bunch of new structural tags waiting to meet you over in the next chapter. Divitis—a chronic syndrome that causes web developers to wrap elements with extra div tags with IDs such as banner, sidebar, arti- cle, and footer—is rampant. Developers pass Divitis to each other extremely quickly, and since divs are invisible to the naked eye, even mild cases of Divitis may go unnoticed for years.

The id attributes on these wrapper elements tell us what they do, but you can remove at least one of these wrappers to get the same result. Overuse of markup leads to bloat and pages that are difficult to style and maintain. There is hope, though.

The HTML5 specification provides a cure in the form of new semantic tags that describe the content they contain. Because so many developers have made sidebars, headers, footers, and sections in their designs, the HTML5 specification introduces new tags specifically designed to divide a page into logical regions.

Remember, block elements fall on their own line, whereas inline elements do not force a line break. In the descriptions that follow, browser support is shown in square brackets using a shorthand code and the minimum supported version number.

In the main sec- tion, each article has a header and a footer. An article may also have a pull quote, or an aside. Finally, the page has a footer for contact and copyright information.

Create a new page called index. This is all we need for an HTML5 doctype. Headers Headers, not to be confused with headings such as h1, h2, and h3, may contain all sorts of content, from the company logo to the search box. Each indi- vidual section or article can also have a header, so it can be helpful to use the ID attribute like I did on 1 to uniquely identify your elements.

Semantic markup makes it easy for machines and people alike to understand the meaning and context of the content. The new HTML5 markup tags such as section, header, and nav help you do just that. Footers The footer element defines footer information for a document or an adja- cent section. They usually con- tain information like the copyright date and information on who owns the site. The specification says we can have multiple footers in a doc- ument too, so that means we could use the footers within our blog articles too.

However, like headers, footers on pages often contain other elements, including navigational elements. Navigation Navigation is vital to the success of a website. You often find navigation in your header and in your footer, so now you can identify those explicitly.

The point of these new elements is to describe the content, not to describe how the content looks. Sections and Articles Sections are the logical regions of a page, and the section element is here to replace the abused div tag when it comes to describing logical sections of a page. Use them to logically group your content! We have a more appropriate tag for that.

Articles The article tag is the perfect element to describe the actual content of a web page. The article tag helps you describe that content. Each of our articles will have a header, some content, and a footer. That's why you have to be somewhat aggressive when you're working with a customer, but you have to make sure you don't overdo it and scare them away.

Think of a section as a logical part of a document. Think of an article as actual content, such as a magazine article, blog post, or news item. These new tags describe the content they contain. Sections can have many articles, and articles can also have many sec- tions. A section is like the sports section of a newspaper. The sports section has many articles. Each of those articles may again be divided into its own bunch of sections. Some sections like headers and footers have proper tags.

A section is a more generic element you can use to logically group other elements. Semantic markup is all about conveying the meaning of your content. We can use header and footer elements inside of our articles, which makes it much easier to describe those specific sections. We can also divide our article into multiple sections using the section element. Asides and Sidebars Sometimes you have content that adds something extra to your main content, such as pullout quotes, diagrams, additional thoughts, or re- lated links.

You can use the new aside tag to identify these elements. Asides Are Not Page Sidebars! Our blog has a sidebar on the right side that contains links to the archives for the blog. You could do it that way, but it goes against the spirit of the specification. The aside is Report erratum this copy is P1. Now we can start applying styles to these new elements. First, we create a new style sheet file called style. The meter element lets us semantically describe an actual fixed point on a meter with a minimum and maximum value.

The markup for a progress bar is very similar to the meter element. The only way to make IE style these elements is to use JavaScript to define the elements as part of the document.

That turns out to be really easy. If we reload our page, it looks correct now. We are creating a dependency on JavaScript, though, so you need to take that into consideration. The improved organization and readability Report erratum this copy is P1. This approach is fine for adding support for a handful of elements or for understanding how you can add support. Those days are now over thanks to the introduction of custom data attributes. Custom data attributes all start with the prefix data- and are ignored by the validator for HTML5 documents.

Best of all, you can use custom data attributes right now in nearly every web browser, since they can be easily grabbed with JavaScript. Separating Behavior from Content, or Why onclick Is Bad Over the years, pop-up windows have gotten a bad reputation, and often rightly so. Web application developers often rely on pop-up windows to display online help, additional options, or other important user interface features.

To make pop-ups less annoying, we need to implement them in an unobtrusive manner. In fact, this is the way JavaScript newbies often learn how to make pop- Report erratum this copy is P1. There are a couple of problems that we should address with this approach before moving on, though. Do not ever omit the href attribute or give it a value like this under any circumstances. Give it the address of the resource that would normally pop up. The first step toward building accessible pages is to ensure that all the functionality works without JavaScript.

Abolish the onclick Keep the behavior separate from the content, just like you keep the presentation information separate by using linked style sheets. Instead, give each of the anchors on the page a class that identifies them. The code we pass to the click method will be executed when someone clicks the link. The preventDefault method prevents the default click event behavior.

In this case, it prevents the browser from following the link and displaying a new page. Custom Data Attributes to the Rescue! Situations like this are common when building any JavaScript-enabled application. What we can do instead is embed these attributes as attri- butes on the element. The link now opens in a new window.

Falling Back These attributes work in older browsers right now as long as they sup- port JavaScript. We can identify and disable navigation and article footers very easily using print style sheets. But most important, we mark up content with appropriate tags that describe it so we can write better style sheets and better JavaScript. Custom data attributes give developers the flexibility to embed all sorts of information in their markup.

These attributes allow you to embed real, usable data in your pages, and you can expect to see more and more frameworks and libraries tak- ing advantage of them. And we can help wipe out Divitis once and for all! Supports date, month, or week. Supports datetime, datetime-local, or time.

In addition to the standard text fields, radio buttons, and checkbox elements, you can use elements such as email fields, calendars, color pickers, spinboxes, and sliders. Browsers can use these new fields to display better con- trols to the user without the need for JavaScript. Mobile devices and virtual keyboards for tablets and touchscreens can use the field types to display different keyboard layouts.

Improving the AwesomeCo Projects Form AwesomeCo is working on creating a new project management web application to make it easier for developers and managers to keep up with the progress of the many projects they have going on. There are also fields for the start date, priority, and estimated number of hours the project should take to complete.

Finally, the development manager would like to give each project a color so he can quickly identify each project when he looks at reports. Labels are essential when creating accessible forms. The for attribute of the label references the id of its associated form element. This helps screen readers identify fields on a page.

The ordered list provides a good way of listing the fields without resorting to complex table or div structures. Creating a Slider Using Range Sliders are commonly used to let users decrease or increase a numer- ical value and could be a great way to quickly allow managers to both visualize and modify the priority of the project. You implement a slider with the range type. That will constrain the value of the form field. A spinbox is a control with arrows that increment or decrement the value in the box.

That way, the hours can be easily adjusted. Also notice that you can control the size of the increment step by giving a value to the step parameter. It defaults to 1 but can be any numerical value. Dates Recording the start date of the project is pretty important, and we want to make that as easy as possible.

The date input type is a perfect fit here. Other browsers render a text field. Opera supports most of these new controls right now, as you can see in Figure 3. As time goes on and more browsers support these controls, you can remove the JavaScript hooks.

We locate any input field with the type of color and apply a jQuery plug-in called SimpleColor. Attribute selectors and HTML5 go together quite well. Then, we retrieve the type attribute to see whether the browser allowed us to set the attribute. If it comes back with a value of color, then we have support for that type. Safari 5 and Google Chrome 5 have partially implemented the color type. We still end up with a text field on the page.

So, in our detection method, we set the value for our input field and see whether the value sticks around. It targets a specific set of browsers and only for the color control.

Other controls have their own quirks that you need to learn. Before you start throwing Modernizr in your projects, be sure you take some time to understand how it works. When the next version of Chrome or Firefox comes out, you may have to hack together a solution.

Sliders and date pickers are included as components in the jQuery UI library. Because of the complex- ity involved with detecting these types, Modernizer will be very helpful to you. Aside from new form field types, HTML5 introduces a few other attri- butes for form fields that can help improve usability.

All you have to do is add the autofocus attribute to any form field, like we already did on the profile page we built in Describing Data with New Input Fields, on page A sign-up form with placeholder text is shown in Fig- ure 3. HTML5 introduces an autocomplete attri- bute that tells web browsers that they should not attempt to auto- matically fill in data for the field.

Falling Back You can use JavaScript to put placeholder text on form fields without too much work. When the form receives focus, you clear out the value, and when the field loses focus, you test the value again. You test for placeholder support just like you test for autofocus support. See the sidebar on page 63 to learn how plug-ins work. Firefox Report erratum this copy is P1. You add your own methods on to the jQuery function, and your plug-in seamlessly becomes available to any developer who includes your library.

When we load the page, we pass true to this method, which you can see on line Password fields behave a little differently than other form fields, so we have to handle those differently as well. Take a look at line On line 66, we capture the form submission and clear out the values of any input fields that equal the placeholder values. Sometimes we want a user of our site to edit some information about themselves without having to navigate to a different form.

We traditionally implement in-place editing by watch- ing text regions for clicks and replacing those regions with text fields. These fields send the changed text back to the server via Ajax. It displays their name, city, state, postal code, and email ad- dress. Before we get started, I want you to know that implementing a fea- ture that relies on JavaScript without first implementing a server-side solution goes against everything I believe in when it comes to build- ing accessible web applications.

Simply adding this attribute turns it into an editable field. Users can modify the data on the page easily. Now we have to save it. Persisting the Data Although the users can change the data, their changes will be lost if they refresh the page or navigate away.

We need a way to submit those changes to our back end, and we can do that easily with jQuery. Then, all we have to do is submit the data to our server-side script. When it comes down to it, making a form that does a POST to the same action that handled the Ajax update makes the most sense. How you do this is up to you, but many frameworks let you detect the type of request by looking at the accept headers to determine whether the request came from a regular POST or an XMLHttpRequest.

That way, you keep the server-side code DRY. So, create a new page called edit. We want to hide the link to the edit page and enable the Ajax support only if we have support for editable content.

Now that you know how to implement this interface, remember to implement the fallback solution first. Unlike the other fallback solutions, this particular one cripples functionality if not implemented. The Future Right now, if you add a JavaScript-based date picker to your site, your users have to learn how it works. Imagine, though, if each website used the HTML5 date field, and the browser had to create the interface.

Each site a user visited would dis- Report erratum this copy is P1. Screen-reading software could even implement a standard mechanism to allow the blind to enter dates eas- ily. Placeholder text can help screen read- ers explain to users how form fields should work, and autofocus could help people navigate more easily without a mouse, which is handy for the blind but also for users with motor impairments who may not use the mouse.

The ability for developers to turn any element into an editable region makes it easy to do in-place editing, but it could potentially change how we build interfaces for content management systems. The modern Web is all about interactivity, and forms are an essential part of that interactivity.

The enhancements provided by HTML5 give us a whole new set of tools we can use to help our users. But no more! CSS3 has some amazing selectors that make some of this work trivial. In case you forgot, a selector is a pattern that you use to help you find elements in the HTML document so you can apply styles to those elements.

CSS3 has several new pseudoclasses that make locating elements much easier. Improving an Invoice AwesomeCo uses a third-party billing and invoicing system for products it ships. It would be easier to read if every other row were colored differently.

It would also be helpful if the grand total was a different color so that it stands out more. The code for the table looks like this. Copy it into your own file so you can work with it. This kind of styling is best done in CSS, the presentation layer. Using some new selectors, we can get what we want without changing our markup at all, truly separating presenta- tion from content.

The nth-of-type selector finds every nth element of a specific type using either a formula or keywords. We want to stripe every other row of the table with a different color, and the easiest way to do that is to find every even row of the table and give it a background color. We then do the same thing with the odd rows. CSS3 has even and odd keywords that support this exact situation.

Then find every odd row and color that too. Aligning Column Text with :nth-child By default, all of the columns in our invoice table are left-aligned. This way, our price and quantity columns will be right-aligned and easier to read. To do that, we can use nth-child, but first we have to learn how it works.

The nth-child selector looks for child elements of an element and, like nth-of-type, can use keywords or a formula. You can also use the offset so that you can start further down the table. Bolding the Last Row with :last-child The invoice is looking pretty good right now, but one of the managers would like the bottom row of the table to be bolder than the other rows so it stands out more.

We can use last-child for that too, which grabs the last child in a group. Applying a bottom margin to paragraphs so that they are evenly spaced on a page is a common practice among many web developers.

This can sometimes lead to an extra bottom margin at the end of a group, and that might be undesirable. For example, if the paragraphs are sitting Report erratum this copy is P1. The last-child selector is the perfect tool for this.

We can use it to remove the margin from the last paragraph. This will help the line totals stand out too. The nth-last-child selector works exactly the same way, except that it counts backward through the children, starting at the last child first.

This makes it easy to grab the second-to-last element in a group. It turns out we need to do just that with our invoice table. Earlier, we right-aligned all the columns except for the first column, and although that looks fine for the rows of the table with the item descriptions and prices, it makes the last three rows of the table look a little funny.

If you were using nth-child, this formula would grab every row up to the offset. Our newly styled table, shown in Figure 4. Many of the selectors we used to accomplish this are not yet available to people using Internet Explorer, so we need a workaround for them. You could attach classes to all the cells in the table and apply basic CSS to each class. All we need to do is add a couple of scripts to our page. Download both of those libraries, and then link them to your document.

You can see what it looks like in Figure 4. Although this will require the user to have JavaScript turned on, the table styling is mainly there to make the content easier to see. You will find your code much easier to maintain. However, when you look at a printout of a page, you have absolutely no idea where those links go. AwesomeCo is working up a new page for its forms and policies, and one of the members of the redesign committee insists on printing out a copy of the site each time.

He wants to be able to know exactly where all of the links go on the page so that he can determine whether they need to be moved. We can use some proprietary JavaScript to make it work in IE 6 and 7. The page itself has nothing more than a list of links on it right now. Most of the time, we use the screen type. However, we can use the print type to define a style sheet that loads only when the page is printed or when the user uses the print preview function.

That handles everything except for Internet Explorer 6 and 7. Falling Back Internet Explorer has a couple of JavaScript events that I wish every browser would adopt: onbeforeprint and onafterprint.

Using those events, we can modify the hyperlink text when the printing is triggered and then revert the links when printing is finished. Our users will never notice the difference. This code relies on jQuery, so we have to make sure that we link in the jQuery library as well. You can use this print style sheet as the basis for a more comprehensive one, and you may choose to apply this behavior to only some links on your site, not to every link like we did here. Narrow columns make it easier for readers to read your content, and with displays getting wider, devel- opers are looking for ways to preserve comfortable column widths.

After all, nobody wants to follow multiple lines of text across the monitor any more than they want a line of text to flow across the whole page of a newspaper. There have been some pretty clever solutions in the past ten years, but none of those solutions are as simple and easy as the method provided by the CSS3 specification. Splitting Columns Each month, AwesomeCo publishes a newsletter for its employees. The company happens to use a popular web-based email system.

For a mocked-up version of this new newsletter, see Figure 4. The new director of communications, who has a background in print publications, has decided that she would like the newsletter to look more like an actual newsletter, with two columns instead of one. The first big hurdle you run into is that you have to manually decide where to split the text.

We can take an element and split its contents into multiple columns, each with the same width. We can add more content, and the browser will automatically determine how to split the content evenly. Also, notice that the floated elements float to the columns that contain them.

Your columns must each be the same size. I was a lit- tle surprised too at first, so I double-checked the specification, and at the time of writing, there was no provision for specifying multiple column widths. However, when you think about how columns are traditionally used, it makes sense. Columns are not meant to be a hack to easily make a sidebar for your website any more than tables are.

Columns are meant to make reading long areas of text easier, and equal width columns are perfect for that. However, we can use JavaScript to detect browser support for certain elements.

It may not be perfect, as you can see in Figure 4. Take advantage of conditional comments like we used in Section 7, Use JavaScript, on page 81 to target specific versions of Internet Explorer if needed.

Separating your content into multiple columns can make your content easier to read. However, if your page is longer, your users might find it annoying to have to scroll back to the top to read the columns.

Use this with care. But we can start to do that with style sheets alone. It turns out that the AwesomeCo executive staff have all just dumped their BlackBerry devices for shiny new iPhones. The marketing director would love to see an iPhone-ready version of the blog template we built in Redefining a Blog Using Semantic Markup, on page We can do that very quickly.

Our current blog is a two-column layout, with a main content region and a sidebar. The easiest way to make this more readable on the iPhone is to remove the floating elements so that the sidebar falls be- neath the main content.

What About the Handheld Media Type? Cela simplifie le travail des programmes qui lisent les pages web. C'est interdit. Tout le monde fait des erreurs, alors ne paniquez pas. Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. En HTML, un tableau se construit ligne par ligne. Chaque cellule a sa propre bordure Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait.

En effet, on aimerait qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici. Titre du tableau Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau. Sans titre de tableau, vous le voyez, on est un peu perdu. Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles. Que mettre dans le pied de tableau? En fait, vous vous en servirez surtout si votre tableau est assez gros et que vous avez besoin de l'organiser plus clairement.

Dans certains tableaux complexes, vous aurez besoin de « fusionner » des cellules entre elles. Un exemple de fusion? Un tableau contenant des titres de films www. Il faut savoir qu'il existe deux types de fusion : La fusion de colonnes : c'est ce que je viens de faire dans cet exemple.

La fusion s'effectue horizontalement. On utilisera l'attribut colspan. La fusion s'effectuera verticalement. On utilisera l'attribut rowspan. Et pour la fusion verticale avec rowspan, on fait comment? Cela se complique un petit peu.

On peut ajouter une bordure aux cellules du tableau avec border. L'utilisation de ces balises n'est pas obligatoire. On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec rowspan. Nous arrivons cependant aux limites du langage HTML car il faut ensuite pouvoir analyser les informations que le visiteur a saisies… et cela ne peut pas se faire en langage HTML. On va prendre un exemple pour que les choses soient claires.

Supposons que votre visiteur vienne de taper un commentaire dans votre formulaire, par exemple un message qu'il aimerait publier sur vos forums. Par quel moyen? C'est ce que nous allons voir maintenant. Les zones de saisie basiques Bien, retour au concret. On retrouvera cette balise plusieurs fois dans la suite de ce chapitre. Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo : www. Mais cela ne suffit pas.

Un name et un id sur le champ? Cela ne va-t-il pas faire double emploi? Si, un peu. On peut donner une indication sur le contenu du champ avec placeholder. Un champ de texte avec une indication placeholder Essayer! Une petite zone de saisie multiligne Comme vous pouvez le constater, c'est un peu petit! Mais enfin! De nouveaux types de champs sont en effet apparus avec cette version. Faisons un petit tour d'horizon! Tous les navigateurs ne connaissent pas encore ces zones de saisie enrichies.

Il peut afficher une indication si l'adresse n'est pas un e-mail, c'est ce que fait Firefox par exemple figure suivante. Si vous indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 par exemple 0, 2, 4, 6…. Rien de plus simple! Tout simplement pour que le navigateur sache de quel « groupe » le bouton fait partie. Or, ce n'est pas ce que l'on veut, c'est pour cela qu'on les « lie » entre eux en leur donnant un nom identique.

Finaliser et envoyer le formulaire Nous y sommes presque. C'est celui que vous utiliserez le plus souvent. Rajoutez l'attribut src pour indiquer l'URL de l'image. Nous ne l'utiliserons pas ici.

Certains sites comme swisstools. Il faut utiliser un langage « serveur » comme PHP… Si vous voulez aller plus loin, il va donc falloir apprendre un nouveau langage! Je vais donc simplifier les choses et vous expliquer juste ce que vous avez besoin de savoir.

Les formats audio Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats. Eh non! Nous venons de les voir, on utilise les www. Ogg Theora : un codec gratuit et libre de droits, mais moins puissant que H. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire. Si vous testez ce code… vous ne verrez rien! Utile si vous ne voulez pas gaspiller de bande passante sur votre site. Je vous conseille de proposer une solution de secours en Flash, comme Dewplayer.

Il faut proposer plusieurs versions du fichier audio. En ce qui nous concerne, ce sera largement suffisant! Je vous recommande donc d'indiquer le format H. Ce n'est pas possible. Code : HTML www. Ainsi, min-width signifie « Largeur minimale », max-height « Hauteur maximale », etc.

Essayez de la redimensionner pour voir! Tester ce code www. Vous allez voir qu'on peut faire tout ce qu'on veut! On pourrait bien entendu faire beaucoup d'autres modifications : changer la couleur, la disposition du pied de page, etc.

Nous y ajouterons quelques instructions media queries pour adapter le design. Avec :last-child, on cible uniquement le dernier paragraphe dans le bloc aside celui qui contient les liens vers Facebook et Twitter , pour pouvoir centrer les images. On ne peut donc pas vraiment utiliser handheld pour viser les mobiles. Tout vu? JavaScript n'a aucun rapport avec le langage Java. Seuls les noms se ressemblent. Elles sont nombreuses et on les confond d'ailleurs souvent avec HTML5.

Le logiciel Inkscape est connu pour permettre de dessiner des SVG. Web Storage : permet de stocker un grand nombre d'informations sur la machine du visiteur. C'est une alternative plus puissante aux traditionnels cookies. La plupart de ces technologies s'utilisent avec JavaScript.

NET… Les langages dont nous allons parler ici sont eux aussi des langages de programmation. Comme JavaScript? Tout d'abord, en termes de puissance, un serveur sera bien souvent plus rapide que la machine de vos visiteurs, ce qui permet d'effectuer des calculs plus complexes. Citons-en quelques-uns : PHP : l'un des plus connus. On l'utilise en combinaison avec d'autres technologies Microsoft Windows Server…. Il utilise le puissant framework. Vous aimeriez donc l'envoyer sur le Web, mais… vous ne savez pas comment faire.

Le nom de domaine Savez-vous ce qu'est un nom de domaine? Il s'agit en fait d'une adresse sur le Web : siteduzero. En rouge, le nom de domaine proprement dit.

Il existe grosso modo une extension par pays. Comment dois-je faire? Alors j'ai une bonne et une mauvaise nouvelle. Comme d'habitude, on va commencer par la mauvaise : la mauvaise : ce n'est pas gratuit… la bonne : … ce n'est vraiment pas cher du tout. Le prix peut varier en fonction de l'extension. Ainsi, l'extension.

La plupart du temps, heureusement, le serveur travaille sans broncher. Vous n'aurez que l'embarras du choix. Cochez la case en fonction des extensions que vous voulez utiliser. Si vous en cochez plusieurs, il faudra payer un peu plus. Cliquez simplement sur "Continuer". Dans la partie du haut, vous avez les dossiers et, dans la partie du bas, la liste des fichiers du dossier actuel. On va vous fournir trois informations qui sont indispensables pour que FileZilla puisse se connecter au serveur : L'IP : c'est « l'adresse » du serveur.

Le plus souvent, on vous donnera une information du type ftp. Si vous avez ces trois informations, vous allez pouvoir continuer. Si vous ne les avez pas, il faut que vous les cherchiez, c'est indispensable. Cochez Type d'authentification : Normale pour pouvoir saisir le login et le mot de passe. Vous pouvez envoyer n'importe quel type de fichier. Veuillez noter qu'il faut que votre page d'accueil s'appelle index. Il faut l'envoyer sur le Web pour qu'il soit visible par tout le monde.

Vous trouverez ici un grand nombre de balises HTML. Qu'est-ce que la mise en forme de texte? Combine : font-weight, font-style, font - font-size, font-variant, font-family. Combine : background-image, background - background-repeat, background-attachment, background-position opacity 0. Combine border-width, 3px solid black border-color, border-style.

Existe aussi en version border-top, border-right, border border-bottom, border-left. Combine list-style-type, - list- style list-style-position, list-style-image. Curseur de souris www. Si vous regardez bien, il y a deux balises de commentaires. Le code HTML se trouve en-dehors des balises de commentaires, il sera donc lu par tous les navigateurs… sauf IE, qui lit les commentaires lui demandant de ne pas lire le code HTML qui suit. Mais cela fait alors beaucoup de fichiers.

Ce nom de classe indiquera dans le fichier. Dans ce cas, un seul fichier CSS suffit. Les hacks CSS « Hack » signifie « bidouille » en anglais. Souvent, cela vous permet de comprendre ce qui se passe dans votre page.

Mozilla Firefox : installez l'extension Firebug. Related Papers. By Siassieu Jean Baptiste Douon. Dynamisez vos sites web avec Javascript! Ce PDF vous est offert par. By Rachid Alika. By Hakim sedrati. By Ahmed Mabrouk. Download pdf. Log in with Facebook Log in with Google. Remember me on this computer.

Enter the email address you signed up with and we'll email you a reset link. Need an account? Top clipped slide. Download Now Download Download to read offline. Cours html. Parceiro Programador. Css cascading style sheet. Curso html. Construindo layout de sites com CSS. Related Books Free with a 30 day trial from Scribd. Related Audiobooks Free with a 30 day trial from Scribd. Who Owns the Future? Jaron Lanier. They know how to do an amazing essay, research papers or dissertations.

Meryem Massi. Views Total views. Actions Shares. No notes for slide. MBULA 2.