1. Trang chủ
  2. » Công Nghệ Thông Tin

Bài giảng Phát triển ứng dụng web 1: Ngôn ngữ HTML – ĐH Sài Gòn

55 65 1

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 55
Dung lượng 3,83 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

Bài giảng Phát triển ứng dụng web 1: Ngôn ngữ HTML cung cấp cho người học các kiến thức: Các bước thiết lập website, thiết kế lập trình website, xây dựng website dưới góc nhìn ngộ nghĩnh. Mời các bạn cùng tham khảo.

Trang 1

Ngôn ngữ HTML

Phát triển ứng dụng web 1

Đại Học Sài Gòn – Khoa CNTT

Trang 2

Nội dung buổi học trước

1 Các bước thiết lập website

2 Thiết kế lập trình website

• Thiết kế giao diện

3 Xây dựng website dưới góc

nhìn ngộ nghĩnh

Trang 4

Giới thiệu về HTML

dấu siêu văn bản, dùng để xây dựng một webpage

browser biết cách hiển thị một webpage

• Dữ liệu (văn bản, âm thanh, hình ảnh, …)

• Các tag (thẻ) HTML để định dạng mô tả cách thức các dữ liệu hiển thị trên trình duyệt

Web browser: phân tích & “hiểu” các tags HTML, hiện thị nội dung web cho người dùng

Trang 5

Trình duyệt – Trình soạn thảo

Web browser – trình duyệt web

Notepad

Dreamweaver

Trang 7

Cú pháp, đặc tính của HTML

<TAG ten_thuoc_tinh=“gia tri” …… > Dữ liệu </TAG>

HTML tag:

 Tên gợi nhớ

 Tag được quy định trong cặp dấu ngoặc <>

 Phần lớn tag gồm 2 phần mở <tag> và đóng </tag>

 Một số tag chỉ có 1 phần & không có dữ liệu: <br>, <hr>

 Cấu trúc lồng

 Thuộc tính của tag cung cấp thông tin bắt buộc/tùy chọn cho tag

 Một số web browser không hiểu một số tag hoặc thuộc tính

 Không phân biệt chữ hoa, thường

 Bỏ qua các khoảng trắng

Trang 9

Cấu trúc 1 tài liệu HTML

<html></html> : Định nghĩa phạm vi của văn bản HTML

Trang 10

Các tag HTML cơ bản

Tag tạo bảng <table>

Tag liên kết trang <a>

Tag hình ảnh <img>

Trang 12

Ví dụ: Tag Heading

Ngôn ngữ HTML Trong trình soạn thảo

Nội dung hiện thị Trong trình duyệt

Trang 13

Ví dụ: Tag Paragraph

Thuộc tính của tag <body>

<body bgcolor=‘pink’>

Trang 14

Horizontal rules

<HR …>

–Thuộc tính :

• align : Canh hàng đường kẻ ngang so với trang web

• width : Chiều dài đường kẻ ngang

• size : Bề rộng của đường kẻ ngang

• noshade : Không có bóng

<HR noshade size=‘5’ align=‘center’ width=‘40%’ ></HR>

<HR size=‘15’align=‘right’ width=‘80%’ ></HR>

Trang 15

Định dạng chữ

Định dạng:

<font>Hello world</font>

<font style="font-family: Verdana, Geneva, sans-serif "

color=" #000099 " size=" 3 "> Hello world </font>

<b>This text is bold</b>

<strong>This text is strong </strong>

<big>This text is big </big>

<em>This text is emphasized </em>

<i>This text is italic </i>

<small>This text is small</small>

This text contains a<sub>2</sub>

This text contains x<sup>2</sup>= a x a

Trang 16

Định dạng chữ

<EM>Computer Sciences</EM>

<STRONG> Computer Sciences </STRONG>

<DFN> Computer Sciences </DFN>

<CODE> Computer Sciences </CODE>

<KBD> Computer Sciences </KBD>

<VAR> Computer Sciences </VAR>

<CITE> Computer Sciences </CITE>

<BLINK> Computer Sciences </BLINK>

<DEL> Computer Sciences </DEL>

<INS> Computer Sciences </INS>

Trang 17

Định dạng theo tag <Pre>

Hiển thị đúng dạng văn bản đã soạn thảo (khoảng trắng, xuống dòng, tag,…)

Trang 18

Các ký tự đặc biệt

Result Description Entity name Entity number

Khoảng trắng &nbsp; &#160;

& Dấu và &amp; &#38;

“ Ngoặc kép &quot; &#34;

< Nhổ hơn &lt; &#60;

> Lớn hơn &gt; &#62; v v

Hiển thị các ký tự đặc biệt

Ví dụ:

Để hiển thị được: <Dai hoc sai Gon> & “SGU”

&lt;Dai hoc sai Gon&gt;&nbsp ;&nbsp;&amp

; &nbsp ;&nbsp;&quot;SGU&quot;

HTML special character  Google

Trang 20

Tag hình ảnh

Giá trị mặc định của 2 thuộc tính width, height là kích thước thật của file ảnh

–Sử dụng thẻ <body background=‘Image Path’>

Trang 21

Tag âm thanh

<bgsound> : Không có tag đóng

Thuộc tính của tag <bgsound>

–SRC : Đường dẫn đến file âm thanh

–Loop : Số lần lặp (bằng -1 : Lặp vô hạn)

–<bgsound> Thường đặt trong tag <head> của web

<! Nội dung ghi chú >

Trang 22

Tag danh sách

Types Tags Items in List Ordered List <ol> <li>

Unordered List <ul> <li>

List Item <li>

User-defined List <dl> <dt>, <di>

 Thuộc tính type của các tag danh sách

Xem các ví dụ

Trang 23

Tag danh sách

 Vd: Danh sách có thứ tự:

Trang 24

Danh sách có thứ tự

Trang 25

Danh sách không có thứ tự

 Vd: Danh sách không có thứ tự:

Trang 26

Danh sách tự định nghĩa

Trang 27

Tag liên kết trang - URL

Trang 28

Tag liên kết trang - URL

Trang 29

Tag liên kết trang - URL

Tag liên kết trang – Tag <a> (anchor)

 Thuộc tínht target của tag <a>

• Ví dụ:

Trang 30

Phân loại liên kếtPhân loại:

 Liên kết ngoại (external link)

 Liên kết nội (internal link)

 Liên kết email (email link)

Trang 31

Liên kết ngoại (external link)

Trang 32

Liên kết nội (internal link)

Trang 33

Liên kết email (email link)

Trang 34

Phân loại URL

• Địa chỉ tuyệt đối: là vị trí tuyệt đối so với mạng

/ Trở về thư mục gốc của site

./ Thư mục hiện tại của webpage sử dụng link (mặc định)

/ Quay ra thư mục cha/ đi ngược 1 cấp thư mục

Trang 35

Phân loại URL

file A có link đến file B, vậy file A

./Thumuc1/fileB.html Thumuc1/fileB.html

Trang 36

Phân loại URL

file B có link đến file C, vậy file B

/demo/Thumuc1/Thumuc1_1/fileC.html /Thumuc1_1/fileC.html

Thumuc1_1/fileC.html

Trang 37

Phân loại URL

file C có link đến file D, vậy file C

/demo/Thumuc1/Thumuc1_2/fileD.html / /Thumuc1_2/fileD.html

/Thumuc1_2/fileD.html

Trang 38

Phân loại URL

file D có link đến file F, vậy file D

./ / /Thumuc2/fileF.html / /Thumuc2/fileF.html

Trang 39

Phân loại URL

file F có link đến file E, vậy file F

/demo/Thumuc1/Thumuc1_2/Thumuc1_2_1/

fileE.html /Thumuc1/Thumuc1_2/Thumuc1_2_1/fileE html

Trang 40

Phân loại URL

 URL = / / /fileA.html#positionX

file E có link đến file A ở vị trí xác định X, vậy file E có HTML element:

<a name = “VitriX” </a>

<a href = “URL” >

Liên kết đến A tại X < /a>

Trang 41

Phân loại URL

Trang 42

Tag kẻ bảng - Table

Tên thẻ / T tính Mô tả

<table> </table> Khởi tạo 1 bảng

<tr> …</tr> Tạo 1 dòng, thẻ <tr> nằm trong thẻ <table>

<th> …</th> Tạo 1 ô tiêu để, thẻ <th> nằm trong thẻ <tr>

<td> …</td> Tạo 1 ô, thẻ <td> phải nằm trong thẻ <tr>

Colspan Thiết lập ô có độ rộng bằng bao nhiêu cột

Rowspan Thiết lập ô có độ cao bằng bao nhiêu dòng

Background Thiết lập ảnh nền cho thẻ <table>, <td>, <tr>

Bgcolor Thiết lập màu nền cho thẻ <table>, <td>, <tr>

 Ví dụ minh hoạ

Tên thẻ và các thuộc tính của thẻ

Trang 44

Colspan Table Tag

Trang 45

Rowspan Table Tag

Trang 46

Attribute Table Tag

Trang 47

Một số ví dụ Table

Picture reference from: GV Trần Thị Bích Hạnh (2007) Bài giảng Môn Lập trình và thiết kế web, K.CNTT, ĐHKHTN

Trang 48

Một số ví dụ Table

Trang 50

Ngôn ngữ HTML

Bài thực hành

Đại Học Sài Gòn – Khoa CNTT

Trang 51

Giới thiệu 1 số website tham khảo làm đồ án

Trang 52

Giới thiệu 1 số website tham khảo làm đồ án

Trang 53

Giới thiệu 1 số website tham khảo làm đồ án

Trang 54

Bài thực hành HTML

 Bài tập: HTML cơ bản, Introduction

 Thời gian giao: Cuối Lecture04

 Thời gian làm việc: 1 tuần

 Yêu cầu:

• Viết ít nhất 4 trang *.html (1 homepage)

• Giới thiệu thông tin cá nhân và các sở thích liên quan, chủ đề tuỳ ý.

• Các trang phải liên kết với nhau và sử dụng tất cả các tag đã học.

Trang 55

Thank you !

Ngày đăng: 16/07/2020, 10:44

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

🧩 Sản phẩm bạn có thể quan tâm

w