Professional Documents
Culture Documents
1 HTML 1
1 HTML 1
1 HTML 1
vn
TỔNG QUAN
1
www.hoasen.edu.vn
Content
Introduce HTML
Introduce CSS
Introduce Javascript
2
www.hoasen.edu.vn
Introduction
3
www.hoasen.edu.vn
HTML 5 CSS
2004 WHATWG started 1996 – CSS 1 W3C Rec
2008 W3C Working Draf 1998 – CSS 2 W3C Rec
2012 (2010) W3C Candidate Rec 1999 – CSS 3 Proposed
2022 W3C Rec 2005 – CSS 2.1 W3C Candidate Rec
2001 – CSS 3 W3C Working Draf
4
www.hoasen.edu.vn
HTML
5
www.hoasen.edu.vn
HTML
HTML stands for HyperText Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph",
"table", and so on
Browsers do not display the HTML tags, but use them to render
the content of the page
6
www.hoasen.edu.vn
8
www.hoasen.edu.vn
HTML Extended
Document Flow: div, section, article, nav, aside, header, footer
Audio, Video and Embed
Canvas: paths, gradients, image manipulation, events
Microdata for semantics and enhanced search engine results
(Google Rich Snippets)
9
www.hoasen.edu.vn
HTML
The DOCTYPE
<!DOCTYPE html>
Character Encoding
<meta charset = "UTF-8">
10
www.hoasen.edu.vn
HTML
HTML5 Elements
<p>...</p>
11
www.hoasen.edu.vn
HTML Document
Header Figure
Navigation
Section
Article
Footer
Image, Video, Quote, Table,
Article etc…
Aside Footer
Article
Footer
Legend
Footer
12
www.hoasen.edu.vn
HTML Document
section − This tag represents a generic document or application
section. It can be used together with h1-h6 to indicate the
document structure.
article − This tag represents an independent piece of content of
a document, such as a blog entry or newspaper article.
aside − This tag represents a piece of content that is only slightly
related to the rest of the page.
header − This tag represents the header of a section.
footer − This tag represents a footer for a section and can
contain information about the author, copyright information, et
cetera.
13
www.hoasen.edu.vn
HTML Document
nav − This tag represents a section of the document intended for
navigation.
dialog − This tag can be used to mark up a conversation.
figure − This tag can be used to associate a caption together
with some embedded content, such as a graphic or video.
14
www.hoasen.edu.vn
HTML Document
Code Output
15
www.hoasen.edu.vn
16
www.hoasen.edu.vn
17
www.hoasen.edu.vn
18
www.hoasen.edu.vn
19
www.hoasen.edu.vn
Custom Attributes
20
www.hoasen.edu.vn
21
www.hoasen.edu.vn
22
www.hoasen.edu.vn
23
www.hoasen.edu.vn
checkbox
3 A set of zero or more values from a predefined list.
radio
4 An enumerated value.
submit
5 A free form of button initiates form submission.
file
6 An arbitrary file with a MIME type and optionally a file name.
24
www.hoasen.edu.vn
button
10 A free form of button which can initiates any event related to button.
25
www.hoasen.edu.vn
Example
26
www.hoasen.edu.vn
27
www.hoasen.edu.vn
28
www.hoasen.edu.vn
29
www.hoasen.edu.vn
Refferences
https://www.tutorialspoint.com
https://www.w3schools.com/
31