Webdev CCI Tel U - Introduction to HTML 5.0
Download as PPTX, PDF1 like536 views
The document provides an introduction to HTML 5.0, covering its definition, the basic structure and creation of web pages, and various essential tags used in HTML. It discusses the roles of clients and servers in web development, the function of different types of tags including formatting, image, audio, video, and link tags. Additionally, it includes a reminder for a technical meeting and encourages referencing more information from external sources.
Webdev CCI Tel U - Introduction to HTML 5.0
- 1. INTRODUCTION TO HTML 5.0
- 2. What is It and How did It Get Started?
- 3. Intro HTML 5 – The new standard for HTML
- 4. What would we do today? How the Web Works? What is a Web Page? Creating HTML Page Basic Tags
- 5. How the Web Works? running a Web Browser running Web Server Software Client Server Page request Server response
- 6. What is Web Page? o HTML – Hyper Text Markup Language o A notation for describing: Document structure (semantic markup) Formatting (presentation markup)
- 7. Creating HTML Page Browser – Client Side : Mozilla, Chrome, Safari, Opera and IE Server – Server Side : Apache, Tomcat, IIS, etc. (Recommended) Text Editors : Notepad++, Sublime Text, Bracket, etc. (Sublime text is recommended) HTML Editors* : Adobe Edge, Dreamweaver, Microsoft FrontPage, Expression Web, etc. *HTML Editors is Not Recommended
- 8. Basic Tags <!DOCTYPE> <html> <head> <title> <body> <h1> to <h6> HTML headings <p> <br> <hr> <!-- … --> Document type HTML document Information about document Title of document Document’s body Paragraph Insert a single line break Thematic change in the content Comment
- 9. Basic Tags (Example) <html> <head> <title>My First HTML Page</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 1</h2> <h3>Heading 1</h3> <h4>Heading 1</h4> <h5>Heading 1</h5> <h6>Heading 1</h6> <p>My first paragraph</p> </body> </html>
- 10. Basic Tags (Result) <title> <h1> to <p> <h6> }
- 12. Basic Tags (Task) Clue : Use all of basic tags at 8th slide
- 13. (2 Minutes from Now)
- 14. DO (Finish or Not Finish) Say thanks or respond #FirstMeetWebDevCCI Mention to @webdevccitelu TUTOR @irsyadjamalIJPP
- 15. Formatting Tags <abbr> <address> <b> <bdi> <bdo> <blockquote> <cite> <code> Abbreviation Contact information for the author Bold text Isolates a part of text Overrides the current text direction A section that is quoted from another source The title of work A piece of computer code
- 16. Formatting Tags (cont.) <del> <dfn> <em> <i> <ins> <kbd> <mark> <meter> Text that has been deleted from document A definition term Emphasized text A part of text in an alternate voice or mood A text that has been inserted into a document Keyboard input Marked/highlighted text A scalar measurement within a known range
- 17. Formatting Tags (cont.) <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> Preformatted text Represents the progress of a task A short quotation What to show in browsers that do not support ruby annotations An explanation/pronunciation of characters A ruby annotation Text that is no longer correct Sample output from a computer program
- 18. Formatting Tags (cont.) <small> <strong> <sub> <sup> <time> <u> <var> <wbr> Smaller text Important text Subscripted text Superscripted text A date/time Text that should be stylistically different A variable A possible line-break
- 19. Image Tags <img> <map> <area> <canvas> <figcaption> <figure> An image A client-side image-map An area inside an image map Used to draw graphics, on the fly, via scripting A caption for a figure tag element Specifies self-contained content
- 20. Audio / Video Tags <audio> Sound content <source> Multiple media resources for media elements <track> Text tracks for media elements <video> A video or movie
- 21. Link Tags <a> A hyperlink <link> The relationship between a document and an external resource <nav> Navigations links
- 22. List Tags <ul> <ol> <li> <dl> <dt> <dd> <menu> <menuitem>
- 23. Table Tags <table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col> <colgroup>
- 25. Meta Info
- 26. Programming
- 27. Task Satu Laman Web tentang Materi Hari Ini Reference: http://www.w3schools.com/tags/ref_byfunc.asp
- 28. (10 Minutes from Now)
- 29. DO (Finish or Not Finish) Say thanks or respond #FirstMeetWebDevCCI Mention to @webdevccitelu TUTOR @irsyadjamalIJPP
- 30. 2nd Technical Meeting Time : Fri,19:00 – 21:00 Tutor : Check Twttr We build big tools from simple tags. Because there is not big thing from big thought. Next Tutorial : Cascade Style Sheet (CSS)
- 31. Irsyad Jamal Pratama Putra Twitter @irsyadjamalIJPP Email Irsyadjamal.ijpp@gmail.com Phone Number +6282-3180-5995-9 Web Developer Rumainet
Editor's Notes
- #32: Basic tag, list, table, form