More Related Content
What's hot
What's hot (20)
Similar to Introduction to web development - HTML 5
Similar to Introduction to web development - HTML 5 (20)
Recently uploaded
Recently uploaded (20)
Introduction to web development - HTML 5
- 2. Hello! I am Ayoub Ghozzi
- 4. Editor
- 5. GIT Download From : https://gitforwindows.org/ Open command prompt : 1. git config --global user.name "Votre nom ou pseudo" 2. git config --global user.email "votre@email.com"
- 6. GitHub
- 7. GIT & GitHub
- 8. Web Development Front End Back End Database Basics Librairies Frameworks
- 9. About HTML ... HyperText Markup Language 1991 Tim Berners-Lee
- 10. Tags < >
- 11. Comments <!-- --> <!-- this is a comment -->
- 12. Basic structure <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Titre </title> </head> <body> </body> </html>
- 13. Paragraphs <p> Hello Formalab </ p>
- 14. Titles <h1>Titre très important</h1> <h2>Titre important</h2> <h3>Titre un peu moins important </h3> <h4>Titre pas trop important</h4> <h5>Titre pas important</h5> <h6>Titre pas vraiment important</h6>
- 15. Ordered List <ol> 1. Je me lève, <li>Je me lève.</li> 2. Je mange et je bois. <li>Je mange et je bois.</li> 3. Je retourne me coucher. <li>Je retourne me coucher.</li> </ol>
- 16. Unordered List <ul> ▪ Fraises <li>Fraises</li> ▪ Framboises <li>Framboises</li> ▪ Cerises <li>Cerises</li> </ul>
- 17. Links <a href="https://formalab.tn" target= "_blank"> Formalab </a>
- 18. Links
- 19. Images <img src = "images/formalab.jpg" alt = "Photo of Formalab" />
- 20. Audios <audio src="music.mp3" controls> </audio>
- 21. Videos <video src=” Video.webm” controls width="600"> </video>
- 22. Exercise
- 23. Tables <table> <thead> <!-- En-tête du tableau --> <tr> <th>Nom</th></tr> </thead> <tfoot> <!-- Pied de tableau --> <tr> <th>Nom</th></tr> </tfoot> <tbody> <!-- Corps du tableau --> <tr><td>FormaLab</td></tr> </tbody> </table>
- 24. Forms <form name="…" method="…" action="…" > <!-- inputs here --> </form> NAME : Name of the form. ACTION : Address (URL or e-mail) to which the data entered will be sent. METHOD : There are two types of methods for sending form content: ● GET : It corresponds to a sending of the coded data in the URL. ● POST : The form content is sent to the server as a data block.
- 25. Inputs
- 26. Input type text <input type="text" name="nom_du_champ" /> Other attributes :
- 27. Input type password <input type="password" name="nom_du_champ" /> Other attributes :
- 28. Other Inputs <input type="email" /> <input type="number" /> <input type="date" /> <input type="file" /> <input type="range" /> <input type="color" /> <input type="search" />
- 29. Input type checkbox <input type="checkbox" value="php" checked>PHP<br> <input type="checkbox" value="java">Java<br> <input type="checkbox" value="html" checked>HTML<br> <input type="checkbox" value="css">CSS<br> <input type="checkbox" value="bootstrap">Bootstrap<br>
- 30. Input type radio <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female
- 31. Select <select> <option value="news" selected> News</option> <option value="sports"> Sports </option> <option value="music"> Music </option> <option value="java"> Java </option> <option value="web"> Web</option> </select>
- 32. Textarea <textarea rows="x" cols="y"> Text … ( opt ) </textarea>
- 33. Buttons <input type="button" value=" Click here !" onClick="JSfunction()" /> <button> Click Me </button> <input type="submit" value =" Envoyer " /> <input type="reset" value =" Effacer"/>
- 34. Exercise