Hướng dẫn lập trình web với PHP - Ngày 2

Hướng dẫn lập trình Web
Ngày 2
Nguyễn Như Tuấn

Nội dung
1. HTML
– Tham khảo
http://www.w3schools.com/html/
2. CSS
– Tham khảo http://www.w3schools.com/css/

1. HTML
1.1) Cấu trúc cơ bản của HTML 5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Cấu trúc cơ bản của HTML</title>
</head>
<body>
Nội dung web site sẽ nằm ở đây
</body>
</html>

1. HTML
1.2) Các thẻ Title
- Thẻ H1 đến H6:
- Định nghĩa các tiêu đề của HTML
- Quy tắc: <h1>…</h1> …và <h6>…</h6>

1. HTML
1.3) Các thẻ layout
- Thẻ P:
- Định nghĩa đoạn văn bản
- Quy tắc: <p>…..</p>
- Thẻ SPAN:
- Định nghĩa một phần, trong văn bản
- Quy tắc: <span>…</span>
- Thẻ DIV:
- Định nghĩa một phần tài liệu
- Quy tắc: <div>…</div>
- Thẻ BR:
- Xuống dòng văn bản
- Quy tắc: <br/>

1. HTML – Các thẻ layout
- Thẻ MAIN:
- Định nghĩa nội dung chính của một tài liệu.
- Quy tắc: <main>…</main>
- Thẻ HEADER :
- Định nghĩa phần đầu của một tài liệu, hoặc của một phân đoạn
(section)
- Quy tắc: <header>…..</header>
- Thẻ FOOTER:
- Định nghĩa phần cuối của một tài liệu, hoặc của một phân đoạn
(section)
- Quy tắc: <footer>…</footer>
- Thẻ SECTION:
- Định nghĩa một phần của một tài liệu, nhóm những thông có
liên quan đến nhau vào trong một phân đoạn
- Quy tắc: <section>…..</section>

- Thẻ ARTICLE:
- Định nghĩa một bài viết. Có thể sử dụng trong forum,
blog, tạo một news story hoặc là comment.
- Quy tắc: <article>…</article>
- Thẻ ASIDE:
- Định nghĩa ra một nội dung khác, liên quan đến nội
dung chính
- Quy tắc: <aside>…</aside>
- Thẻ DETAIL:
- Định nghĩa nội dung chi tiết được ẩn đi, và chỉ hiển thị
khi click vào nút show lên.
- Quy tắc: <details>…</details>, thường sử dụng thẻ
summary kèm theo.

- Thẻ FIGURE:
- Định nghĩa ra minh họa cho nội dung chính của văn
bản. Ví dụ: Bản đồ, hình ảnh…
- Quy tắc: <figure><img></figure>
- Thẻ FIGCAPTION:
- Định nghĩa chú thích cho hình ảnh, đi cùng với thẻ
figure.
- Quy tắc: <figure> <img…> <figcaption>…</figcaption>
</figure>
- Thẻ MARK:
- Sử dụng để highlight một phần văn bản
- Quy tắc: <mark>…</mark>

- Thẻ NAV:
- Định nghĩa ra các liên kết chính của văn bản.
Không nên đặt tất cả các liên kết vào nav, chỉ đặt
những liên kết chính thôi.
- Quy tắc: <nav>…</nav>
- Thẻ TIME:
- Cung cấp thêm thông tin ngày giờ cho một đoạn
văn bản
- Quy tắc: <time datetime="yyyy-mm-dd
H:i">...</time>

1. HTML
1.4) Các thẻ Text
– Thẻ B, STRONG: Chữ đậm
– Thẻ I, EM: Chữ nghiêng
– Thẻ U, INS: Chữ gạch chân
– Thẻ Sub: Chữ thụt dưới, ví dụ khi viết số 2
trogn chữ H2O
– Thẻ Sup: Chữ ở trên, ví dụ khi viết [1] trong
chữ WWW[1]
– Thẻ Del: chữ gạch ngang blue

1. HTML
1.5) Các thẻ Media
– Thẻ A: liên kết đến trang web hoặc email
• Quy tắc: <a href=“…” title=“…” target=“…”></a>
• Href: url web site, hoặc mailto: email
• Target: _blank, _self
• Title: Tiêu đề làm rõ ý hơn cho thẻ
• Ví dụ: <a
href="mailto:tuanquynh0508@gmail.com">tuanqu
ynh0508@gmail.com</a>
• Event: hover, visited, focus, active

1. HTML – Các thẻ media
– Thẻ IMG: Hiển thị ảnh
• Quy tắc:
<img src=“…" alt=“…” height="42" width="42“/>
• Src: đường dẫn đến file ảnh
• Alt: Tiêu đề được hiển thị khi di chuột vào ảnh

– Thẻ Video: Play video
• Quy tắc:
<video src=“…" controls>
Your browser does not support the video element.
</video>
• Src: đường dẫn đến file video
• Autoplay: Tự động play
• Loop: Lặp lại video
• Poster: Ảnh đại diện
• Height: Chiều cao
• Width: Chiều rộng

– Thẻ Audio: Play audio
• Quy tắc:
<audio src=“…" controls autoplay loop>
Your browser does not support the audio
element
</audio>
• Src: đường dẫn đến file audio
• Autoplay: Tự động play
• Loop: Lặp lại video

1. HTML
1.6) FORM
– Text box
– Password
– Number
– Range
– Email
– Tel
– Search
– Date
– Datetime
– Datetime-local
– Month
– Week
– Time
– Input data list
– Color
– Checkbox
– Radio box
– Select box
– Textarea
– Button
– Button Submit
– Button Reset
– Output

1. HTML – Form element
– Text input:
<input type="text" name=“fullname" value=""
placeholder="Text box"/>
– Password:
<input type=“password" name=“password" value=""
placeholder=“password"/>
– Number:
<input type="number" name="number" value="10"
min="5" max="18" step="0.5"/>

– Range:
<input type="range" name="range" min="1"
max="100" value="0"/>
– Email, Url, Tel:
<input type=“…" name=“…" value=""
placeholder=“…"/>
• Type: Thay giá trị lần lượt là email, url, tel
– Date:
<input type="date" name="date" value=""
min="2015-01-01" max="2016-12-31" />

– Input datalist:
<input name="country" list="country-names"
type="text">
<datalist id="country-names">
<option label="England" value="England"></option>
<option label="Northern Ireland" value="Northern
Ireland"></option>
<option label="Ireland" value="Ireland"></option>
<option label="Scotland" value="Scotland"></option>
<option label="Wales" value="Wales"></option>
</datalist>

– Checkbox:
<label><input type="checkbox"
name="checkGroup1[]" value="a"> Đáp án
A</label><br/>
name="checkGroup1[]" value="b"> Đáp án
B</label><br/>
name="checkGroup1[]" value="c"> Đáp án
C</label><br/>
name="checkGroup1[]" value="d"> Đáp án D</label>

– Radio box:
<label><input type="radio" name="sex" value="a"
checked> Nam</label>
<label><input type="radio" name="sex" value="b">
Nữ</label>

– Select Box:
<select name="category">
<optgroup label="Nhóm 1">
<option value="1.1">Danh mục 1.1</option>
</optgroup>
<optgroup label="Nhóm 2">
</optgroup>
</select>

– Textarea:
<textarea name="message" rows="10" cols="30">
Nội dung bài viết
</textarea>
– Button:
<button type="button">Button normal</button>
<button type="submit">Button submit</button>
<button type="reset">Button reset</button>

1. HTML
1.7) Form validate
– Required: Bắt buộc nhập
– aria-required: Là attribute có giá trị kiểu
boolean. Có tác dụng cho form submit khi
các giá trị nhập đầy đủ.
– Minlength: Độ dài tối thiếu cần nhập
– Maxlength: Độ dài lớn nhất cần nhập
– Pattern: Validate theo pattern

1. HTML – Form validate
<form action="" method="post">
<div>
<label for="name">Fullname:</label>
<input type="text" id="name" name="name" value="" required aria-required="true">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="" required aria-required="true">
</div>
<div>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" value="" required aria-required="true">
</div>
<div>
<label for="message">Message</label>
<textarea id="message" required aria-required="true" minlength="5" maxlength="1000"
cols="10" rows="5"></textarea>
</div>
<div>
<button type="submit">Send contact</button>
</div>
</form>

Hướng dẫn lập trình web với PHP - Ngày 2

Recommended

Recommended

More Related Content

Similar to Hướng dẫn lập trình web với PHP - Ngày 2

Similar to Hướng dẫn lập trình web với PHP - Ngày 2 (20)

More from Nguyễn Tuấn Quỳnh

More from Nguyễn Tuấn Quỳnh (9)

Recently uploaded

Recently uploaded (18)

Hướng dẫn lập trình web với PHP - Ngày 2