webdev cci tel u - introduction to html 5.0
DESCRIPTION
1. Introduction to HTML 5.0 By:Irsyad Jamal Pratama - @irsyadjamalIJPP - [email protected] 2. How the Web Works? 3. What is a Web Page? 4. Creating HTML Page 5. Basic TagsTRANSCRIPT
![Page 1: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/1.jpg)
INTRODUCTION TO HTML 5.0
![Page 2: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/2.jpg)
What is It and How did It Get Started?
![Page 3: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/3.jpg)
Intro
HTML 5 – The new standard for HTML
![Page 4: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/4.jpg)
What would we do today?
How the Web Works?
What is a Web Page?
Creating HTML Page
Basic Tags
![Page 5: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/5.jpg)
How the Web Works?
Client Server
Page request
Server response
running a Web Browser running Web Server Software
![Page 6: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/6.jpg)
What is Web Page?
o HTML – Hyper Text Markup Language
o A notation for describing:
Document structure (semantic markup)
Formatting (presentation markup)
![Page 7: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/7.jpg)
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
![Page 8: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/8.jpg)
Basic Tags
<!DOCTYPE>
<html>
<head>
<title>
<body>
<h1> to <h6>
<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
HTML headings
![Page 9: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/9.jpg)
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>
![Page 10: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/10.jpg)
Basic Tags (Result)
<title>
<h1> to <h6><p>
}
![Page 11: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/11.jpg)
![Page 12: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/12.jpg)
Basic Tags (Task)
Clue :Use all of basic tags at 8th slide
![Page 13: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/13.jpg)
(2 Minutes from Now)
![Page 14: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/14.jpg)
DO (Finish or Not Finish)
Say thanks or respond
#FirstMeetWebDevCCI
Mention to @webdevccitelu
TUTOR @irsyadjamalIJPP
![Page 15: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/15.jpg)
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
![Page 16: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/16.jpg)
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
![Page 17: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/17.jpg)
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
![Page 18: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/18.jpg)
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
![Page 19: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/19.jpg)
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
![Page 20: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/20.jpg)
Audio / Video Tags
<audio>
<source>
<track>
<video>
Sound content
Multiple media resources for media elements
Text tracks for media elements
A video or movie
![Page 21: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/21.jpg)
Link Tags
<a>
<link>
<nav>
A hyperlink
The relationship between a document and an external resource
Navigations links
![Page 22: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/22.jpg)
List Tags
<ul>
<ol>
<li>
<dl>
<dt>
<dd>
<menu>
<menuitem>
![Page 23: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/23.jpg)
Table Tags
<table>
<caption>
<th>
<tr>
<td>
<thead>
<tbody>
<tfoot>
<col>
<colgroup>
![Page 24: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/24.jpg)
Styles and Semantics
![Page 25: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/25.jpg)
Meta Info
![Page 26: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/26.jpg)
Programming
![Page 27: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/27.jpg)
Task
Satu Laman Web tentang Materi Hari Ini
Reference: http://www.w3schools.com/tags/ref_byfunc.asp
![Page 28: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/28.jpg)
(10 Minutes from Now)
![Page 29: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/29.jpg)
DO (Finish or Not Finish)
Say thanks or respond
#FirstMeetWebDevCCI
Mention to @webdevccitelu
TUTOR @irsyadjamalIJPP
![Page 30: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/30.jpg)
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)
![Page 31: Webdev CCI Tel U - Introduction to HTML 5.0](https://reader033.vdocuments.site/reader033/viewer/2022052623/559e04631a28ab366a8b4881/html5/thumbnails/31.jpg)
Irsyad Jamal
Pratama Putra
@irsyadjamalIJPP
Phone Number
+6282-3180-5995-9
Web Developer
Rumainet