KHÓA HỌC

HTML + CSS + JAVASCRIPT

Người thực hiện: Nguyễn Ngọc Lâm
Quy định khóa học
1. Tham gia và làm bài tập đầy đủ

2. Sử dụng họ và tên đầy đủ trong nhóm

3. Mạnh dạn nêu ý kiến cá nhân

4. Tôn trọng các thành viên trong nhóm

MỘT SỐ KIẾN THỨC
CƠ BẢN VỀ WEBSITE
Mô hình Client – Server
Static vs Dynamic Web
TỔNG QUAN VỀ HTML
HTML là gì ?

• HTML được viết tắt Hyper Text Markup Language

• HTML là ngôn ngữ chuẩn để tạo ra trang Web

• HTML mô tả cấu trúc chuẩn của một trang web

• HTML chứa danh sách các thẻ HTML

Cấu trúc HTML
Cấu trúc HTML
Cú pháp HTML cơ bản

<elementname>
Nội dung
</elementname>
Cú pháp HTML cơ bản
Cú pháp HTML có thuộc tính

<elementname attributename=“value”>
Nội dung
</elementname>
Cú pháp HTML có thuộc tính
CÁC THẺ CƠ BẢN
TRONG HTML
NHÓM THẺ VỀ TEXT

• PARAGRAPH :
<p> Nội dung </p>

• HEADING :
<h1> Nội dung </h1>
<h2> Nội dung </h2>
<h3> Nội dung </h3>
<h4> Nội dung </h4>
<h5> Nội dung </h5>
<h6> Nội dung </h6>
NHÓM THẺ VỀ TEXT

• UNORDERED LISTS :
<ul>
<li> Serif</li>
<li> Sans-serif </li>
<li> Script </li>
<li> Display </li>
<li> Dingbats </li>
</ul>
NHÓM THẺ VỀ TEXT

• ORDERED LISTS :
<ol>
<li> Gutenberg develops moveable type (1450s) </li>
<li> Linotype is introduced (1890s) </li>
<li> Photocomposition catches on (1950s) </li>
<li> Type goes digital (1980s) </li>
</ol>
NHÓM THẺ VỀ TEXT

• DESCRIPTION LISTS :
<dl>
<dt> Linotype </dt>
<dd> Line-casting allowed type to be selected, used, then recirculated into the
machine automatically. This advance increased the speed of typesetting and printing
dramatically.
</dd>
<dt> Photocomposition </dt>
<dd> Typefaces are stored on film then projected onto photo-sensitive paper. Lenses
adjust the size of the type.
</dd>
</dl>
Một số thẻ đặc biệt trong HTML

Tên thẻ Ý nghĩa

<b>Nội dung</b> Bôi đậm nội dung
<i>Nội dung</i> In nghiêng nội dung
<u>Nội dung</u> Gạch chân nội dung
<q>Nội dung</q> Trích dẫn “Nội dung”
_{Nội dung} Chỉ số dưới (VD: H2O)
^{Nội dung} Chỉ số trên (E = MC2)
<span>Nội dung</span> Kết hợp CSS để định dạng nội dung
<hr> Vẽ đường gạch ngang
<br> Xuống dòng
Một số ký tự trong HTML
Một số ký tự trong HTML
NHÓM THẺ VỀ HÌNH ẢNH

IMAGE :
<img src=" " alt=" " width=" " height=" "></img>

PICTURE :
<picture>
<source media=" " src=" ">
<img src=" " alt=" " >
</picture>
NHÓM THẺ VỀ MEDIA

AUDIO
<audio controls>
<source src=" " type="">
<source src=" " type="">
</audio>

VIDEO
<video width="320" height="240" controls>
<source src=" " type="">
<source src=" " type="">
</video>

NHÚNG NỘI DUNG

<iframe src=" " width=" " height=" "></iframe>
THẺ LIÊN KẾT TRANG

CHUYỂN TRANG
<a href=" " target=" "> Nội dung </a>
THẺ TABLE

TABLE
<table>
<tr>
<th colspan=“”>Title</th>
</tr>
<tr>
<td rowspan=“”>Content</td>
</tr>
</table>
THẺ TABLE
THẺ TABLE
THẺ TABLE
BÀI TẬP 01 : Heading
BÀI TẬP 02 :Table
BÀI TẬP 03 : Link
BÀI TẬP 04 : Màu nền
BÀI TẬP 05 : Image
Tài liệu tham khảo

1. Learning Web Design: A Beginner's Guide to HTML, CSS,

JavaScript, and Web Graphics - Jennifer Robbins

2. https://www.w3schools.com/html/default.asp
Xin chân thành cảm ơn !