Webdev CCI Tel U - Introduction to HTML 5.0

INTRODUCTION TO HTML 5.0

What is It and How did It Get Started?

Intro

HTML 5 – The new standard for HTML

What would we do today?

How the Web Works?

What is a Web Page?

Creating HTML Page

Basic Tags

How the Web Works?

Client Server

Page request

Server response

running a Web Browser running Web Server Software

What is Web Page?

o HTML – Hyper Text Markup Language

o A notation for describing:

Document structure (semantic markup)

Formatting (presentation markup)

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

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

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>

Basic Tags (Result)

<title>

<h1> to <h6><p>

}

Basic Tags (Task)

Clue :Use all of basic tags at 8th slide

(2 Minutes from Now)

DO (Finish or Not Finish)

Say thanks or respond

#FirstMeetWebDevCCI

Mention to @webdevccitelu

TUTOR @irsyadjamalIJPP

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

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


<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


<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

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

Audio / Video Tags

<audio>

<source>

<track>

<video>

Sound content

Multiple media resources for media elements

Text tracks for media elements

A video or movie

Link Tags

<a>

<link>

<nav>

A hyperlink

The relationship between a document and an external resource

Navigations links

List Tags

<ul>

<ol>

<li>

<dl>

<dt>

<dd>

<menu>

<menuitem>

Table Tags

<table>

<caption>

<th>

<tr>

<td>

<thead>

<tbody>

<tfoot>

<col>

<colgroup>

Styles and Semantics

Meta Info

Programming

Task

Satu Laman Web tentang Materi Hari Ini

Reference: http://www.w3schools.com/tags/ref_byfunc.asp

http://www.w3schools.com/tags/ref_byfunc.asp

(10 Minutes from Now)

DO (Finish or Not Finish)

Say thanks or respond

#FirstMeetWebDevCCI

Mention to @webdevccitelu

TUTOR @irsyadjamalIJPP

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)

Irsyad Jamal

Pratama Putra

Twitter

@irsyadjamalIJPP

Email

[email protected]

Phone Number

+6282-3180-5995-9

Web Developer

Rumainet

Education

Webdev CCI Tel U - Introduction to HTML 5.0