Kommunauty
Connexion
Inscription

Notions basiques avec Notepad++ en html


Lucho Messages : 153

Salut la kommunauty,

Dans le cadre de ma formation en BTS de Communication, j'ai aujourd'hui eu un cours basique sur l'appli Notepad++ en html, et je voudrai tout simplement en apprendre un peu plus avant mon prochain cours, la semaine prochaine.

Pour l'instant c'est très (très) basique, et peut être un peu sauvage.

"Hello World !" et lorem ipsum
Fermer ce cadre

<html>

<head>
<title>Yop ! Sissi la Mifa</title>
</head>

<body>
<b>Hello World !</b>

<p>
<u>Paragraphe 1 :</u> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

<p><u>Paragraphe 2 :</u> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</body>

</html>

Est-ce que le p est bien pour aller à la ligne ? (je l'ai trouvé en observant le code d'une page). Je me demande comment intégrer une image (j'ai réussi mais c'était un peu barbare ), ou intégrer une vidéo ; comment modifier basiquement la mise en page (justifié, centré ; mettre des colonnes, cadres) et comment mettre des couleurs (au texte principalement)... bref

Plus simplement, pouvez-vous m'orienter vers un tuto ? Et/ou me donner quelques chtis conseils ?

Merci bien !

mardi 23 septembre 2014 (Dernière édition mardi 23 septembre 2014)

Mizur Messages : 6618

Est-ce que le p est bien pour aller à la ligne ?

Non, le "p" est une balise encadrante :

<p>paragraphe</p>

Il délimite un paragraphe, après en CSS tu peux "facilement" définir des espaces en haut, en bas, etc.

Pour sauter une ligne, c'est :

<br/>

Je te conseille de lire : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Et de t'entrainer, et de regarder le code de sites simples déjà existants

mardi 23 septembre 2014

Lucho Messages : 153

Okay nickel, je regarderai ça ces prochains jours, ça a l'air très bien expliqué. Merci pour ta réponse Mizur.

mardi 23 septembre 2014 (Dernière édition mardi 23 septembre 2014)

Notorius Messages : 589

Pour intégrer une image, si ton image est par exemple dans le dossier media/image/mon-image.jpg :

<img src="/media/image/monimage.jpg">

Pour intégrer une vidéo c'est différent. Intégrer une vidéo externe style video youtube c'est simple, il suffit d'utiliser un iframe comme celui là par exemple :

<iframe width="420" height="315" src="//www.youtube.com/embed/GeNsh536M4w" frameborder="0" allowfullscreen></iframe>

Par contre si tu veux jouer tes propres videos c'est plus compliqué, il vaut mieux que tu commences à apprendre les bases du html et du css

mardi 23 septembre 2014 (Dernière édition mardi 23 septembre 2014)

Lucho Messages : 153

Ah ouai d'accord. J'ai déjà vu le premier code quelque part ; l'iframe aussi, j'ai découvert en juillet mais je n'y pensais pas du tout...

si tu veux jouer tes propres videos c'est plus compliqué

C'est là qu'intervient la nécessité d’héberger si j'ai bien compris (?). Bien parfait, j'ai de quoi m'occuper alors.

Merci !

mardi 23 septembre 2014

Notorius Messages : 589

Oui le principe est que tu héberges toi-même ta vidéo. Ensuite pour que les utilisateurs du site puissent la visualiser, il te faut utiliser un lecteur et pour ça tu as (si je dis pas de bêtises) deux solutions.

Soit tu utilises un lecteur flash gratuit que tu va intégrer dans ton site web style jwplayer (http://www.jwplayer.com/).

Soit tu utilises directement la balise video dispo avec html5, tu peux voir des exemples à cette adresse : http://justinwhitney.com/HTML5Example/.

C'est la solution la plus simple mais la moins "portable" car elle ne marchera que sur les navigateurs les plus récents qui supportent le html5.

mercredi 24 septembre 2014

Homer Messages : 1829
Notorius :

Pour intégrer une image, si ton image est par exemple dans le dossier media/image/mon-image.jpg :

<img src="/media/image/monimage.jpg" >

Et la balise fermante ????

<img src="/media/image/monimage.jpg" />
mercredi 24 septembre 2014 (Dernière édition mercredi 24 septembre 2014)

Lucas Messages : 830

Pas en html5

mercredi 24 septembre 2014

Notorius Messages : 589

Ah ouais merci Homer, c'est l'habitude d'écrire du html5 par pure flemme.

Après t'as raison de le souligner parce que je suppose qu'on va apprendre à Lucho à utiliser une version qui passe sur un plus grand nombre de navigateurs.

D'ailleurs Lucho tu va avoir le plaisir de découvrir la diabolique balise de déclaration du doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Quand on voit à quoi ça ressemble en html5

<!DOCTYPE HTML>
mercredi 24 septembre 2014

Lucho Messages : 153

Je préfère la version courte

<!DOCTYPE html>
mercredi 24 septembre 2014

Page suivante »