Khoa học máy tính: Các thành phần của thẻ HTMl. Xem nội dung của một bài thuyết trình "trình bày"
Một số ngày:
ngôn ngữ HTMLđược phát triển từ quan điểm rằng tất cả các loại thiết bị đều có thể sử dụng thông tin trên Web: những máy tính cá nhân Với hiển thị đồ họa với độ phân giải và số lượng màu sắc khác nhau, điện thoại di động,…
Câu chuyện tạo HTML (Siêu văn bản Ngôn ngữ đánh dấu - ngôn ngữ đánh dấu siêu văn bản)
Một số ngày:
Năm 1945, nhà khoa học người Mỹ và cố vấn khoa học cho tổng thống, Vannevar Bush, đã nảy ra ý tưởng về siêu văn bản.
Năm 1968, Douglas Engelbart (người tạo ra giao diện hộp thoại phần mềm đáp ứng các hành động chỉ số đặc biệt- con trỏ, đồng thời là người tạo ra trình thao tác - chuột) thể hiện hoạt động của các liên kết siêu văn bản trong tác phẩm mà anh ta đã tạo xử lý văn bản.
Lịch sử của ngôn ngữ đánh dấu bắt đầu từ những năm 1960, khi các nhân viên của IBM đảm nhận thử thách chuyển tài liệu giữa các ngôn ngữ đánh dấu. nền tảng khác nhau Và các hệ điều hành. Kết quả của những nỗ lực của họ là ngôn ngữ GML (Ngôn ngữ đánh dấu chung - ngôn ngữ chung markup), được thiết kế để sử dụng trên các máy tính gia đình IBM. Ngôn ngữ GML sau đó đã được mở rộng và vào những năm 80, nó đã được tiêu chuẩn hóa bởi ISO (Tổ chức Tiêu chuẩn hóa Quốc tế). Điều này mạnh mẽ và chế độ phổ quátđánh dấu, được gọi là SGML (Ngôn ngữ đánh dấu chung tiêu chuẩn), được Bộ quân sự Hoa Kỳ sử dụng để thiết kế tài liệu kỹ thuật. Tuy nhiên, SGML không được sử dụng rộng rãi do tính phức tạp và chi phí triển khai cao.
Giai đoạn tiếp theo trong quá trình phát triển ngôn ngữ đánh dấu gắn liền với tên tuổi của các nhà vật lý và nhân viên của CERN (Trung tâm Nghiên cứu Hạt nhân Châu Âu) tại Geneva. Vì vậy, vào cuối những năm 80, Tim Berners-Lee đã đưa ra vấn đề lưu trữ và hiển thị dữ liệu mà đồng nghiệp thu được. Vấn đề là mỗi chuyên gia đến với Trung tâm đều sử dụng phương pháp trình bày thông tin riêng của mình và cần phải tạo ra hệ thống phổ quát, điều này sẽ không phụ thuộc vào nền tảng máy tính được sử dụng và đồng thời sẽ khá đơn giản.
Tim Berners-Lee dựa trên ngôn ngữ đang được phát triển ngôn ngữ SGML và các kỹ thuật làm việc với siêu văn bản, chính điều này đã tạo nên tên gọi của ngôn ngữ mà ông đã tạo ra - HTML. Ngôn ngữ mớiđã sử dụng các cấu trúc SGML cơ bản để mô tả các tài liệu và liên kết siêu văn bản.
Thuật ngữ "siêu văn bản" lần đầu tiên được Ted Nelson đặt ra vào những năm 1960. Thuật ngữ “siêu văn bản” có nghĩa là tài liệu điện tử, chứa các liên kết đến các tài liệu khác.
Sự phát triển của HTML cuối cùng đã dẫn đến công nghệ mới phân phối các tài liệu siêu văn bản trên Internet. Tuy nhiên, để WWW được phổ biến rộng rãi, ngoài ngôn ngữ HTML, cần phải phát triển một giao thức truyền dẫn siêu văn bản HTTP(Giao thức truyền siêu văn bản), cho phép trao đổi tài liệu HTML. Chính giao thức này đã cho phép ứng dụng khách tìm và sử dụng các tài nguyên được lưu trữ trên một máy tính khác. Giao thức HTTP tìm kiếm và tải xuống tài liệu cần thiết.
Các tài liệu HTML đầu tiên được truy cập trên Internet vào đầu những năm 90 chỉ là các tài liệu văn bản. Đây là trường hợp cho đến khi NCSA ( Trung tâm quốc gia nghiên cứu siêu dẫn) Đại học Illinois đã không phát triển được thiết bị đầu tiên GUI(Khảm) cho các tài liệu HTML. Sau đó, với sự ra đời của nhiều phương pháp đơn giản và trình duyệt có sẵn cho Web và các dịch vụ Internet khác bắt đầu kỷ nguyên mới cho HTML. Ngôn ngữ HTML đã trở thành công cụ chính để phổ biến thông tin trên Internet, mặc dù mục đích ban đầu của nó là tổ chức thông tin trong một trung tâm khoa học duy nhất.
Ngôn ngữ HTML được phát triển từ quan điểm rằng tất cả các loại thiết bị đều có thể sử dụng thông tin trên Web: máy tính cá nhân với màn hình đồ họa có độ phân giải và số lượng màu sắc khác nhau, điện thoại di động...
"Công việc thực tế 1"
Công việc thực tế № 1 về chủ đề “Tạo ra sự đơn giản nhấtmạng lưới -trang"
Bài tập 1.Tạo tập tin đơn giảnHTML .
Để tạo của riêng bạn tập tin HTML, hãy làm như sau:
Tạo một thư mục KURS trong đó chúng tôi sẽ lưu các trang web đã tạo.
Khởi chạy chương trình Notepad tiêu chuẩn.
Nhập vào cửa sổ soạn thảo văn bản đơn giản tập tin HTML:
Tệp hướng dẫn HTML
CÁI ĐẦU
THÂN HÌNH
Lịch học vào thứ ba
THÂN HÌNH
HTML
4. Lưu tệp dưới dạng RASP.HTM.
5. Để xem trang web đã tạo, hãy tải xuống trình duyệt Internet của Microsoft Nhà thám hiểm.
6. Chạy lệnh trong menu trình duyệt Tài liệu(Tài liệu), Mở(Mở) Xem
(Duyệt), tìm tệp RASP.HTM trong thư mục KURS và tải xuống.
Đảm bảo rằng tiêu đề của trang web (tệp HTML hướng dẫn) được phản ánh
ở trên cùng dòng trạng thái browser.
Nhiệm vụ 2. Kiểm soát vị trí của văn bản trên màn hình.
Thông tin .
Khi hiển thị tài liệu HTML, trình duyệt sẽ tự động đặt văn bản lên màn hình mà không tính đến bất kỳ ngắt dòng hoặc khoảng trắng liên tiếp nào xuất hiện trong tệp.
1. Nếu cần, hãy hoàn thành bước 5, 6 của nhiệm vụ 1.
2. Mở trang web nguồn - - trong menu trình duyệt, thực hiện lệnh Xem(Xem) Nguồn(Dưới dạng HTML). Một cửa sổ với chương trình tiêu chuẩn sẽ mở ra Sổ tay(Notepad), trong đó trang web của bạn được trình bày dưới dạng các lệnh HTML.
3. Thực hiện các thay đổi đối với văn bản của tệp HTML, đặt các từ “Lên lịch”, “các lớp”, “cho Thứ Ba” vào dòng khác nhau:
Tệp hướng dẫn HTML
Lịch trình
vào thứ ba
Xem nội dung tài liệu
"tóm tắt cơ bản"
____________________________________________________________
____________________________________________________________________
html
mục lục
.
html
)
html -tài liệu
html -code thực thi XEM – dưới dạng NTML
5 F 5)
tên tệp chỉ được có tên Latin với phần mở rộng htm hoặchtml
html
NHÃN -
Cái này_____________________________________________________________________________
______________________________________________________________________________________
Đặc thù:
5. ", ví dụ chiều rộng = "80".
cái đầu ... cái đầu .
thân hình ... thân hình .
Danh sách các phần tửHTML
Nền tảng
| Loại tài liệu | HTMLHTML | bắt đầu và kết thúc tập tin |
| Tên tài liệu | TITLEX/ TIÊU ĐỀ | nên có trong tiêu đề |
| Phần mở đầu | ĐẦU ĐẦU | |
| CƠ THỂ/ THÂN HÌNH | Nội dung từ trang |
Định nghĩa cấu trúc
| Tiêu đề | ?H? | tiêu chuẩn xác định 6 cấp độ |
| với sự liên kết | N ? ALIGN=TRÁI|TRUNG TÂM|PHẢI |
Vẻ bề ngoài
| căng thẳng | bạn/ bạn | thường không được hỗ trợ |
| Chỉ số trên | PHỤ/ PHỤ | |
| Chỉ số dưới | SUP/ SUP | |
| Cỡ chữ | KÍCH THƯỚC PHÔNG CHỮ =?/ FQNT | |
| Màu chữ | MÀU PHÔNG CHỮ ="#$$$$$$" PHÔNG CHỮ | |
| Lựa chọn phông chữ | MẶT PHÔNG CHỮ="***"/ NÉT CHỮ | |
| Căn chỉnh |
| HREF="URL"/ MỘT | ||
| HREF ="URL #***"/A | (ở một tài liệu khác) |
|
| HREF="#***"/ MỘT | (trong cùng một tài liệu) |
|
| IMG SRC="URL" | ||
| Căn chỉnh | ||
| (tính bằng điểm) |
||
| Viền | IMG SRC ="URL " BIÊN GIỚI =? | (tính bằng điểm) |
| (tính bằng điểm) |
Dấu phân cách
| Đoạn văn | ||
| Căn chỉnh | P ALIGN=TRÁI|TRUNG TÂM|PHẢI | |
| (nguồn cấp dữ liệu một dòng) |
||
| Dải phân cách ngang | ||
| Căn chỉnh |
Danh sách
| Rối loạn | UL LI UL | (LI trước mỗi phần tử) |
| gọn nhẹ | UL NHỎ GỌN/ UL | |
| Loại thẻ | (cho toàn bộ danh sách) |
|
| (cái này và cái tiếp theo) |
||
| Đánh số | OL LI/ CV | (LI trước mỗi phần tử) |
| Danh sách các định nghĩa | DL DT DD/ D.L. | (D T=thuật ngữ DD=chia trên) |
Nền và màu sắc
| NỀN TẢNG CƠ THỂ="URL" | ||
| Màu nền | CƠ THỂ BGCOLOR="#$$$$$$" | |
| Văn bản màu | VĂN BẢN CƠ THỂ="#$$$$$$" | |
| BODY_LINK="#$$$$$$" |
Những cái bàn
| Xác định bảng | BÀN/ BÀN | |
| Viền bảng | đường viền bảng=? |
Hàng bảng
TR/ TR
Căn chỉnh
Ô bảng
TD/ TD
(phải ở trong dòng)
Căn chỉnh
Chiều rộng mong muốn
CHIỀU RỘNG TD =?
(tính bằng điểm)
Chiều rộng tính bằng phần trăm
CHIỀU RỘNG TD="%"
phần trăm chiều rộng trang)
Màu tế bào
TD BGCOLOR="#$$$$$$"
Tiêu đề bảng
/TN
Căn chỉnh
CÁNH = TRÁI | PHẢI | TRUNG TÂM | TRUNG TÂM |BOTTQM
tế bào hoa
TN BGCOLOR= "#$$$$$$"
Xem nội dung tài liệu
"danh sách các phần tử HTML"
Danh sách các phần tửHTML
Nền tảng
| Loại tài liệu | HTMLHTML | bắt đầu và kết thúc tập tin |
| Tên tài liệu | TITLEX/ TIÊU ĐỀ | nên có trong tiêu đề |
| Phần mở đầu | ĐẦU ĐẦU | mô tả của tài liệu, chẳng hạn như tên của nó |
| CƠ THỂ/ THÂN HÌNH | Nội dung từ trang |
Định nghĩa cấu trúc
| Tiêu đề | ?H? | tiêu chuẩn xác định 6 cấp độ |
| với sự liên kết | N ? ALIGN=TRÁI|TRUNG TÂM|PHẢI__ |
Vẻ bề ngoài
| căng thẳng | bạn/ bạn | thường không được hỗ trợ |
| Chỉ số trên | PHỤ/ PHỤ | |
| Chỉ số dưới | SUP/ SUP | |
| Cỡ chữ | NÉT CHỮ KÍCH THƯỚC =?/ FQNT | |
| Màu chữ | MÀU PHÔNG CHỮ ="#$$$$$$" PHÔNG CHỮ | |
| Lựa chọn phông chữ | MẶT PHÔNG CHỮ="***"/ NÉT CHỮ | |
| Căn chỉnh |
| HREF="URL"/ MỘT | ||
| HREF ="URL #***"/A | (ở một tài liệu khác) |
|
| HREF="#***"/ MỘT | (trong cùng một tài liệu) |
|
| IMG SRC="URL" | ||
| Căn chỉnh | | |
| | (tính bằng điểm) |
|
| Viền | IMG SRC ="URL " BIÊN GIỚI =? | (tính bằng điểm) |
| IMG SRC ="URL" HSPACE -? VSPACE=? | (tính bằng điểm) |
Dấu phân cách
| Đoạn văn | việc đóng phần tử thường không cần thiết) |
|
| Căn chỉnh | P ALIGN=TRÁI|TRUNG TÂM|PHẢI | |
| Dòng mới | (nguồn cấp dữ liệu một dòng) |
|
| Dấu phân cách ngang_ | ||
| Căn chỉnh |
Danh sách
| Rối loạn | UL LI UL | (LI trước mỗi phần tử) |
| gọn nhẹ | UL NHỎ GỌN/ UL | |
| Loại thẻ | (cho toàn bộ danh sách) |
|
|
QUẢNG TRƯỜNG | (cái này và cái tiếp theo) |
|
| Đánh số | OL LI/ CV | (LI trước mỗi phần tử) |
| Danh sách các định nghĩa | DL DT DD/ D.L. | (D T=thuật ngữ DD=chia trên) |
Nền và màu sắc
| Hình nền | NỀN TẢNG CƠ THỂ="URL" | |
| Màu nền | CƠ THỂ BGCOLOR="#$$$$$$" | (thứ tự: đỏ/xanh/xanh) |
| Văn bản màu | VĂN BẢN CƠ THỂ="#$$$$$$" | |
| BODY_LINK="#$$$$$$" |
Những cái bàn
| Xác định bảng | BÀN/ BÀN | |
| Viền bảng | đường viền bảng=? |
Hàng bảng
TR/ TR
Căn chỉnh
CÁNH- TRÁI|PHẢI| TRUNG TÂM| GIỮA| DƯỚI
Ô bảng
TD/ TD
(phải ở trong dòng)
Căn chỉnh
Chiều rộng mong muốn
CHIỀU RỘNG TD =?
(tính bằng điểm)
Chiều rộng tính bằng phần trăm
CHIỀU RỘNG TD="%"
phần trăm chiều rộng trang)
Màu tế bào
TD BGCOLOR="#$$$$$$"
Tiêu đề bảng
/TN
thích dữ liệu, nhưng kiểu chữ in đậm và căn chỉnh)
Căn chỉnh
TN
ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTQM
tế bào hoa
TN BGCOLOR= "#$$$$$$"
Tiêu đề bảng
Căn chỉnh
đầu/cuối bảng
Khung
| Tài liệu có khung | FRAMESETX/FRAMESEI | thay vì CƠ THỂ |
| Chiều cao hàng | BỘ KHUNG HÌNH | (dấu chấm hoặc %) |
| Chiều cao giữa các dòng | HÀNG= */ KHUNG VÀ | (* = kích thước tương đối) |
| Chiều rộng cột | COLS=* | (dấu chấm hoặc %) |
| Tài liệu | SR C= "URL" | |
| Tên khung | NAME="***"|_blank|_selt| _cha mẹ|_top | |
| Chiều rộng biên giới | KHUNG RỘNG RỘNG=? | (viền phải và trái) |
Xem nội dung tài liệu
"bài học "
Đề tài bài học: “Tạo trang web bằng sử dụng HTML. HTML cơ bản »
Mục tiêu bài học:
giáo dục: học tập Cấu trúc HTML– tài liệu, các khái niệm cơ bản: tag, cấu trúc, công nghệ Tạo web-trang;
Phát triển: khả năng so sánh và khái quát hóa;
giáo dục: giáo dục văn hóa thông tin, thái độ tích cực đối với kiến thức.
Loại bài học: nghiên cứu tài liệu mới và sau đó áp dụng nó vào công việc thực tế.
Loại bài học: bài học lý thuyết
Phương pháp: giải thích và minh họa, sinh sản
Vật liệu được sử dụng:
tin nhắn đã chuẩn bị trên Lịch sử HTML, ở dạng d/z.
lớp học được trang bị PC,
bài thuyết trình,
thẻ,
máy chiếu video,
các tập tin đồ họa trong thư mục c:\foto\comp và usor
thẻ tham khảo thẻ
ghi chú hỗ trợ
trên màn hình nền một tệp có văn bản của chương trình trong Notepad
Kế hoạch bài học.
Xác định mục tiêu bài học.
Cập nhật kiến thức
III Nghiên cứu bài mới.
IV Củng cố kiến thức đã học. Công việc thực tế.
V. Tóm tắt bài học.
Trong các giờ học.
TÔI . Xác định mục tiêu bài học.
Các bạn, mỗi người hãy giúp đỡ điện thoại di động hay kết nối máy tính với Internet, chắc chắn bạn sẽ muốn xem thế giới toàn cầu có những điều thú vị gì mạng máy tính. Bạn đã biết cách sử dụng bằng nhiều cách khác nhau Internet và truy cập các trang web mà bạn quan tâm, trang web của bạn bè bạn. Bất kỳ người dùng nào của thế kỷ 21 đều có thể trình bày thông tin của họ trên Internet.
Có bạn nào muốn tự làm một trang cá nhân, website riêng cho mình không?
Hôm nay chúng ta sẽ bắt đầu xem xét một trong những cách để tạo một trang web. Hãy ghi lại chủ đề của bài học... vào TRỪU TƯỢNG (tóm tắt tham khảo).
II Cập nhật kiến thức
Các trang Web nằm ở đâu? (Trên máy chủ Web)
Web – máy chủ – máy tính trong Mạng Internet, nơi lưu trữ các trang Web và các thông tin liên quan phần mềmđể làm việc với họ.
Thông tin trên máy chủ Web được trình bày dưới dạng... ( Trang mạng)
Một trang web là gì? (Kết hợp các trang Web với một chủ đề)
Những gì khác là điển hình cho một trang web? (Khả dụng trang tiêu đề, được gọi là nhà hoặc chính)
Các trang web chứa thông tin.
Thông tin gì? (Văn bản, đồ họa, âm thanh, video) Các trang web là đa phương tiện.
Trong các trang Web, các trang Web được kết nối như thế nào? (Siêu liên kết)
Để tạo một trang Web, bạn cần phải viết một chương trình.
Bạn biết những ngôn ngữ lập trình nào?
Chúng ta hãy nhớ lại công nghệ tạo chương trình bằng ngôn ngữ lập trình
Chương trình gõ văn bản.
2. Khởi chạy chương trình.
3. Lưu chương trình có tiện ích mở rộng
III Nghiên cứu bài mới.
Bây giờ chúng ta sẽ hành động khác đi. Chúng ta sẽ cần có 2 chương trình:
1. Notepad (để tạo văn bản chương trình)
2. Trình duyệt (sẽ hiển thị thông tin trong cửa sổ làm việc của nó)
! Công nghệ tạo trang Web được học sinh đọc từng điểm một từ ghi chú tham khảo; giáo viên đồng thời biểu diễn trên PC với máy chiếu
Công nghệ tạo trang Web:
1.Nhập nội dung chương trình (bằng Notepad)
2. Lưu chương trình với đuôi *.htm hoặchtml
(nếu điều này trang chủ, thì tập tin này phải có tênmục lục
.
html
)
3. Khởi chạy trình duyệt trình duyệt web IE và mở từ đóhtml -tài liệu
4. Để xem và chỉnh sửahtml -code thực thi XEM – dưới dạng NTML
5 . Sau khi thực hiện thay đổi, hãy chạy Cập nhật (F 5)
tên tệp chỉ được có tên Latin có phần mở rộng htm hoặc html
tất cả các tệp thuộc về một dự án: html -tệp, đồ họa, v.v. phải nằm trong cùng thư mục
Chúng ta sẽ viết chương trình tạo một trang Web bằng ngôn ngữ nào? (Trong HTML).
Trước khi bắt đầu viết một chương trình bằng HTML, chúng ta sẽ tìm hiểu những điều cơ bản về ngôn ngữ HTML.
Đầu tiên, chúng ta hãy làm quen với lịch sử hình thành ngôn ngữ HTML. (tin nhắn của sinh viên).
Các slide được trình chiếu với các câu hỏi mà cả lớp trả lời, một học sinh đọc từ các slide
Khái niệm chính của ngôn ngữ HTML là khái niệm về thẻ. CẦU TRƯỢT
Viết nó vào ghi chú tham khảo
NHÃN - hướng dẫn cho trình duyệt cho biết cách hiển thị thông tin.
Bài tập. Cho các thẻ, xác định các thẻ ghép và đơn. CẦU TRƯỢT
Thẻ được viết bằng bảng chữ cái nào?
Có phải chỉ các chữ cái được sử dụng khi viết thẻ?
Đặc thù: học sinh đọc từ LƯU Ý
1. Văn bản mà chúng ta muốn xem trong cửa sổ trình duyệt được đặt giữa các thẻ.
2. tất cả các thẻ được đặt trong dấu ngoặc đơn.
3. trong các thẻ được ghép nối, thẻ đóng bắt đầu bằng ký hiệu / “dấu gạch chéo”. Các thẻ được ghép nối làm nổi bật một khối văn bản và cung cấp cho nó một số trạng thái trên trang; ví dụ: bằng cách sử dụng thẻ hi ...hi, một khối văn bản sẽ được đánh dấu làm tiêu đề.
4. Hầu hết các thẻ đều có một số thuộc tính được gọi là tham số ; ví dụ: tiêu đề được đánh dấu bằng thẻ hi aiign ="center ” ...hi được đặt ở giữa cửa sổ trình duyệt.
5. Mỗi tham số được trình bày trong mẫu sau: tham số_name="parameter_value" ", ví dụ chiều rộng = "80".
Tất cả các tham số đều nằm trong thẻ mở. Nếu có nhiều tham số thì chúng cách nhau bằng dấu cách. Thứ tự chúng xuất hiện không quan trọng.
6. Thông tin nằm giữa các thẻ cái đầu ... cái đầu , không được hiển thị trong cửa sổ trình duyệt, thẻ tiêu đề trang vẫn ở đó , thẻ cho công cụ tìm kiếm, Mã chương trìnhđược viết bằng ngôn ngữ lập trình như JavaScript, và các thông tin chính thức khác .
7. Tất cả thông tin hiển thị trong cửa sổ trình duyệt được đặt giữa các thẻ thân hình ... thân hình .
CÔNG VIỆC THỰC TẾ.
Thẻ số 1 “Tạo một trang Web đơn giản.”
Hoàn thành nhiệm vụ 1, 2. 10 phút
PHÂN TÍCH CÔNG VIỆC
Lệnh nào sẽ được thực thi sau khi thực hiện thay đổi mã.
Văn bản trên màn hình có thay đổi khi bạn Nhập phím bạn đã chia câu thành đoạn văn chưa?
Hãy nhớ làm việc ở soạn thảo văn bản. Những thông số văn bản nào và chúng tôi đã thay đổi như thế nào - màu phông chữ, kích thước, kiểu dáng, thụt lề đoạn văn, căn chỉnh, v.v.
Để thay đổi kiểu chữ, đoạn văn, làm việc với đồ họa, bảng biểu trong HTML, có đội đặc biệt(thẻ).
Ngoài ra, còn có một lệnh ngăn chương trình trình duyệt thay đổi định dạng văn bản theo bất kỳ cách nào và cho phép bạn tái tạo chính xác một đoạn tệp văn bản được chỉ định trên màn hình.
Các thẻ chính cho công việc được chứa trong bảng ( trong ghi chú của opre sinh viên)
Hãy xem xét một số ví dụ. TRƯỢT
… lớn nhất
…
…
…
…
... nhỏ nhấtThuộc tính: căn chỉnh="giá trị"
Giá trị:
Định dạng văn bản
1) Lựa chọn văn bản:
…
- in đậm
…
- chữ in nghiêng
…
- làm nổi bật bằng cách gạch chân
Xin chào
Thẻ phải có ít nhất một trong ba thuộc tính có thể có:
Cỡ chữ kích cỡ="value" (giá trị là số nguyên từ 1 đến 7)
Màu chữ màu sắc="giá trị"
Giá trị - ví dụ: tên màu hoặc mã thứ 16 của nó
Xin chào
Xin chào
Kiểu chữ (kiểu chữ) KHUÔN MẶT="giá trị", ví dụ
Xin chào (chữ xin chào cỡ 7, màu đỏ, phông chữ Arial).
3. Thẻ đoạn văn:
căn chỉnh="giá trị"
bên trái(dọc theo cạnh trái), Phải(dọc theo cạnh phải), trung tâm(trung tâm) biện minh(chiều rộng).
Dịch dòng:
| RRGGBB | RRGGBB |
||||
| đen | màu tím | màu tím | FF 00FF |
||
| trắng | FFFFFF | màu vàng | FFFF 00 |
||
| FF 0000 | màu nâu | màu nâu | |||
| màu xanh lá | 00FF 00 | quả cam | quả cam | FF8000 |
|
| màu xanh | màu ngọc lam | 00FFFF | màu tím | 8000FF |
|
| màu xanh da trời | 0000FF | xám | |||
Thiết kế nền trang web
Hình nền- Cái này tập tin đồ họa với hình ảnh một chiếc đĩa hình chữ nhật nhỏ. Khi xem trên trình duyệt, đốm màu này được lặp lại nhiều lần, lấp đầy toàn bộ cửa sổ, bất kể kích thước của nó.
Có hai cách để thiết kế nền của trang Web:
Sử dụng màu từ bảng màu cơ bản -
thay thế? dòng xác định màu
Sử dụng nền đồ họa –
thay thế? một dòng chỉ định tên của tệp nền và, nếu cần, vị trí của nó trên đĩa PC
Hình ảnh dùng làm nền trang phải có kích thước nhỏ; Trình duyệt tự động nhân bản sao để lấp đầy toàn bộ bề mặt của trang. Để tạo nền đồ họa của trang, cần sử dụng hình ảnh không ảnh hưởng đến nhận thức trực quan về văn bản và đồ họa. Các tệp được sử dụng làm nền đồ họa phải có phần mở rộng (loại) tệp tương tự như bất kỳ tệp nào hình ảnh đồ họađược sử dụng cho một trang Web tức là ?.gif, ?.jpg. Hình ảnh khi được lặp lại nhiều lần sẽ không có "đường nối", tức là. không có đường viền rõ ràng giữa các hình ảnh
IV Củng cố kiến thức đã học. Công việc thực tế.
Hoàn thành nhiệm vụ 3-10 trên thẻ
Đánh dấu những người hoàn thành nhiệm vụ một cách nhanh chóng và chính xác. Bài tập sẽ được giáo viên đánh giá sau bằng hình thức kiểm tra file đã lưu.
V. Tóm tắt bài học.
Học sinh sử dụng slide để điền miệng những phần còn thiếu.
HTML được dịch như thế nào và nó có ý nghĩa gì?
Một tài liệu HTML có cấu trúc như thế nào?
Sự khác biệt giữa văn bản thuần túy và tài liệu HTML là gì?
Thẻ được sử dụng để làm gì?
Liệt kê các thẻ cần thiết.
Sự khác biệt giữa thẻ là gì
từ thẻ?
Bằng cách nào bạn có thể thay đổi kiểu dáng, màu sắc, kích thước của văn bản hiển thị trên trang HTML?
Làm cách nào bạn có thể xem cấu trúc của một tài liệu HTML?
Trong bài học này, chúng ta mới chỉ thực hiện những bước đầu tiên. Điều thú vị nhất vẫn chưa đến: làm việc với đồ họa, hình ảnh, sáng tạo trang riêng. Tất cả điều này sẽ được đề cập trong các bài học tiếp theo. Tạm biệt!
VI Bài tập về nhà
Trong bài học tiếp theo, chúng ta sẽ tạo các trang Web có đồ họa về chủ đề một câu chuyện về bản thân và sở thích của chúng ta. Mang theo tài liệu văn bản và hình ảnh.
Văn học:
Davydova E.V. Môn học tự chọn “Sáng tạo máy tính. Sự khởi đầu của thiết kế web." // Tin học và giáo dục. 2006. Số 11.
Moiseeva N.N. Khóa học tự chọn "Sự khởi đầu của thiết kế web." // Khoa học máy tính và giáo dục. 2007. Số 10.
Novoselova E.N., Kadyrov I.R. Tạo các trang web bằng HTML .//Tin học và giáo dục. 2004. Số 11, số 12.
Titorov D.Yu. // Tin học ở trường. Bổ sung cho tạp chí "Tin học và Giáo dục". 2007 số 7.
Khái niệm cơ bản về HTML
Xem nội dung trình bày
"bài thuyết trình"
Tạo trang web bằng HTML Khái niệm cơ bản về HTML
Công nghệ tạo trang Web:
1.Nhập nội dung chương trình (bằng Notepad)
Công nghệ tạo trang Web:
3 . Khởi chạy trình duyệt Internet Explorer và mở tệp html từ nó
4. Để xem và chỉnh sửa mã html, thực hiện VIEW - dưới dạng HTML
5. Sau khi thực hiện thay đổi, thực hiện Update (F5)
- tên tệp chỉ được có tên Latin với phần mở rộng htm hoặc html
- tất cả các tệp liên quan đến một dự án: tệp html, đồ họa, v.v. phải nằm trong cùng thư mục
Lịch sử của HTML (Ngôn ngữ đánh dấu siêu văn bản - ngôn ngữ đánh dấu siêu văn bản)
Năm 1945, một nhà khoa học người Mỹ và cố vấn khoa học cho tổng thống, Vannevar Bush, đã bày tỏ ý tưởng……
siêu văn bản.
Năm 1968, Douglas Engelbart (người tạo ra giao diện hộp thoại phần mềm phản ứng với hành động của một con trỏ đặc biệt - con trỏ, đồng thời là người tạo ra trình thao tác - chuột) đã chứng minh ...
công việc của các liên kết siêu văn bản trong trình soạn thảo văn bản do ông tạo ra.
vào những năm 1960, khi các nhân viên của IBM đảm nhận thử thách chuyển tài liệu giữa các nền tảng và hệ điều hành khác nhau. Kết quả của sự nỗ lực của họ là...
Ngôn ngữ GML (Ngôn ngữ đánh dấu chung), được thiết kế để sử dụng trên các máy tính gia đình IBM.
Tim Berners-Lee dựa trên ngôn ngữ đang được phát triển trên...
Ngôn ngữ SGML và các kỹ thuật làm việc với siêu văn bản, đó là lý do tại sao tên ngôn ngữ anh ấy tạo ra là HTML
Thuật ngữ "siêu văn bản" lần đầu tiên được giới thiệu ........
Thuật ngữ “siêu văn bản” có nghĩa là...
Ted Nelson những năm 1960
tài liệu điện tử,
Sự phát triển của HTML cuối cùng đã dẫn đến một công nghệ mới để phân phối các tài liệu siêu văn bản trên Internet. Tuy nhiên, để WWW được sử dụng rộng rãi, ngoài ngôn ngữ HTML, cần phải phát triển ... thứ cho phép trao đổi tài liệu HTML.
Giao thức truyền siêu văn bản HTTP (Giao thức truyền siêu văn bản),
NHÃN – hướng dẫn cho trình duyệt chỉ ra cách hiển thị thông tin.
Cho các thẻ, xác định các thẻ ghép và đơn. ,
,
Đặc điểm:
1. Văn bản mà chúng ta muốn xem trong cửa sổ trình duyệt được đặt giữa các thẻ.
2. tất cả các thẻ được đặt trong dấu ngoặc đơn.
3. trong các thẻ được ghép nối, thẻ đóng bắt đầu bằng ký hiệu / “dấu gạch chéo”. Các thẻ được ghép nối làm nổi bật một khối văn bản và cung cấp cho nó một số trạng thái trên trang ;
ví dụ: sử dụng thẻ... khối văn bản được đánh dấu dưới dạng tiêu đề .
4 . Hầu hết các thẻ đều có một số thuộc tính được gọi là tham số ;
tiêu đề được gắn thẻ ..., nằm ở giữa cửa sổ trình duyệt .
5. Mỗi tham số được trình bày như sau: tham số_name="parameter_value" ", ví dụ chiều rộng="80".
Tất cả các tham số đều nằm trong thẻ mở. Nếu có nhiều tham số thì chúng cách nhau bằng dấu cách. Thứ tự chúng xuất hiện không quan trọng.
6. Thông tin nằm giữa các thẻ ... , không được hiển thị trong cửa sổ trình duyệt, thẻ tiêu đề trang vẫn ở đó và các thông tin chính thức khác .
7. Tất cả thông tin hiển thị trong cửa sổ trình duyệt được đặt giữa các thẻ ... .
HTML hỗ trợ 6 cấp độ tiêu đề nội bộ.
… lớn nhất
…
…
…
…
... nhỏ nhất
- Thuộc tính: căn chỉnh="giá trị"(xác định cách tiêu đề được căn chỉnh theo chiều ngang).
- Giá trị: center (giữa), right (cạnh phải), left (cạnh trái).
- Hãy làm quen - Máy tính(tiêu đề cấp một, căn giữa).
Định dạng văn bản
1) Lựa chọn văn bản:
… - in đậm … - chữ in nghiêng … - làm nổi bật bằng cách gạch chân
Xin chào
- Thẻ phải có ít nhất một trong ba thuộc tính có thể có:
- Cỡ chữ kích cỡ ="value" (giá trị là số nguyên từ 1 đến 7)
- Màu chữ màu sắc ="giá trị"
- Kiểu chữ (kiểu chữ) KHUÔN MẶT ="giá trị", ví dụ
( từ xin chào có kích thước 7, màu đỏ, phông chữ Arial).
3. Thẻ đoạn văn:
căn chỉnh="giá trị"
bên trái(dọc theo cạnh trái), Phải(dọc theo cạnh phải),
trung tâm(trung tâm) biện minh(chiều rộng).
Dịch dòng:
Hình nền - đây là tệp đồ họa có hình ảnh của một khối hình chữ nhật nhỏ
thay thế? dòng chỉ định màu Sử dụng nền đồ họa – Body Background = “?” thay thế? một dòng chỉ định tên của tệp nền" width="640" Có hai cách để thiết kế nền của trang Web:
Sử dụng màu sắc, từ bảng màu cơ bản - Thân BGcolor = “?” thay thế? dòng xác định màu
Sử dụng nền đồ họa – Nền cơ thể = “?” thay thế? một dòng chỉ định tên của tập tin nền
Đồ họa được sử dụng làm đồ họa nền được chỉ định trong thẻ ở đầu tệp HTML.
Hoàn thành cụm từ
phần mở rộng tập tin. . .
thẻ chương trình đầu tiên. .
Tìm kiếm thuận tiện tài liệu dành cho giáo viên
TRONG chương trình mẫu về khoa học máy tính và CNTT về chủ đề “Công nghệ truyền thông” chỉ có 12 giờ được phân bổ và đề xuất tạo một trang Web bằng cách sử dụng các mẫu. 8 giờ được phân bổ cho chủ đề “Công nghệ đa phương tiện”, nhưng nếu khoa học máy tính được học ở cơ sở giáo dục ở cấp độ tuyên truyền đã ở lớp 5, 6 và 7 thì nên hoãn việc học công nghệ đa phương tiện trong một khóa học tuyên truyền và sau đó bạn có thể tăng thời gian học tập Công nghệ truyền thông hay đúng hơn là bạn có thể thêm chủ đề “Tạo trang web bằng HTML” ở lớp 8.
Bạn nên bắt đầu làm chủ công nghệ tạo trang web bằng ngôn ngữ đánh dấu siêu văn bản HTML trong chương trình Notepad, đây là cơ sở cơ bản theo hướng này. Tất nhiên, không thể học toàn bộ ngôn ngữ HTML trong 8 giờ, nhưng bạn có thể chỉ ra mục đích và ứng dụng của các thẻ chính của ngôn ngữ. Nếu một sinh viên quan tâm đến công nghệ tạo trang web, anh ta có thể tiếp tục nghiên cứu tài liệu một cách độc lập hoặc trong các khóa học, câu lạc bộ hoặc môn tự chọn thích hợp.
Đã gửi Bộ công cụđã trải qua bài kiểm tra nhiều lần ở lớp 8 của nhà thi đấu số 441 ở quận Frunzensky của St. Petersburg và bao gồm tài liệu lý thuyết và lớp học thực hành, việc thực hiện đầu tiên được thể hiện thông qua máy chiếu, sau đó học sinh thực hiện độc lập trên máy tính, sử dụng tài liệu phát tay cho bài học.
Đối với những học sinh nhanh chóng hoàn thành nhiệm vụ dự kiến trong bài sẽ được cung cấp thêm nhiệm vụ.
Tài liệu được nắm vững một cách hiệu quả khi học sinh cùng với giáo viên hoàn thành một dự án chung, chẳng hạn như về một chủ đề lịch sử của St. Petersburg “Nhà hát kịch của St. Petersburg”, và sau đó, tác phẩm cuối cùng, tạo ra tài liệu của riêng họ. dự án nhỏ của riêng mình, sử dụng làm mẫu một trang web được tạo cùng với giáo viên.
Là một bài kiểm tra, học sinh trả lời các câu hỏi kiểm tra kiến thức. Thẻ HTML và trình bày một trang web được tạo độc lập.
Mục tiêu chính của đào tạo: hình thành hứng thú nhận thức, phát triển khả năng trí tuệ và sáng tạo trong lĩnh vực công nghệ Web.
giáo dục:
- hình thành hệ thống kiến thức về công nghệ tạo lập trang Web;
- dạy ngôn ngữ đánh dấu siêu văn bản HTML để tạo trang web;
- giới thiệu các giai đoạn của hoạt động dự án.
giáo dục:
- phát triển khả năng sáng tạo để thể hiện bản thân thông qua việc tạo trang web;
- phát triển khả năng so sánh, tìm kiếm kiến thức tương tự và chuyển kiến thức sang kiến thức mới lĩnh vực chủ đề Công nghệ web;
- phát triển kỹ năng máy tính
giáo dục:
- phát triển thái độ tận tâm trong công việc;
- nuôi dưỡng tình bạn thân thiết và trách nhiệm cá nhân đối với địa điểm được tạo ra;
- trau dồi gu nghệ thuật, thẩm mỹ;
- để giáo dục một người sử dụng Internet có năng lực và đúng đắn.
Bài 1
1. Thông tin chung về các trang web và ngôn ngữ HTML
Ấn phẩm ở Mạng toàn cầu (toàn thế giới Web) được triển khai dưới dạng các trang Web. Một trang web có cấu trúc giống như một tạp chí chứa thông tin về một chủ đề hoặc vấn đề cụ thể. Giống như một tạp chí bao gồm các trang in, một trang Web bao gồm các trang Web trên máy tính được liên kết bởi các siêu liên kết. Các trang web có thể chứa văn bản, hình ảnh, bảng biểu, đa phương tiện và các đối tượng động. Các trang web có thể được tạo bằng HTML.
HTML – Ngôn ngữ đánh dấu siêu văn bản - ngôn ngữ đánh dấu siêu văn bản. HTML hoàn toàn không phải là ngôn ngữ lập trình; nó chỉ chịu trách nhiệm sắp xếp các thành phần (văn bản, hình ảnh) trong cửa sổ trình duyệt. HTML là ngôn ngữ để tạo các trang Web trên World Wide Web. Ngôn ngữ HTML bao gồm các lệnh đơn giản - thẻ. Thẻ kiểm soát việc trình bày thông tin trên màn hình khi tài liệu HTML được hiển thị. Thẻ được đặt trong dấu ngoặc nhọn<>…và có cặp và không ghép đôi (đơn<>).
tài liệu HTML- Cái này tập tin văn bản với phần mở rộng. html hoặc. htm, chứa một tập hợp các thẻ.
Trình duyệt – một chương trình để xem các trang Web. Các trình duyệt Microsoft Internet Explorer, Opera, v.v. được sử dụng rộng rãi, khi trình duyệt nhận được một tài liệu HTML, nó sẽ phân tích nó, xây dựng mô hình đối tượng của tài liệu đó và sau đó hiển thị kết quả trên màn hình.
2. Cấu trúc tài liệu HTML
3. Định dạng ký tự
Các ký tự giữa các thẻ sau hiển thị:
Tùy chọn phông chữ
Văn bản được đính kèm giữa các thẻ
Nếu văn bản chứa nhiều khoảng trắng giữa các từ hoặc ký tự tab, trình duyệt chỉ hiển thị một khoảng trắng trên màn hình. Nếu cần thêm khoảng trắng thì giữa các từ bạn cần thêm một ký tự nguyên thủy.
Thẻ đơn
ngắt dòng văn bản và chèn một dòng trống. Một số thẻ này thêm nhiều dòng trống. Khoảng cách dòng là duy nhất.
4. Nhiệm vụ thực tế №1 .
Tạo tài liệu HTML đầu tiên “Nhà hát kịch ở St. Petersburg”, làm việc với phông chữ, cài đặt màu sắc và kích thước phông chữ. Làm chủ công nghệ làm việc.
Bài 2
1. Định dạng văn bản trong đoạn văn
Tag - bắt đầu một đoạn văn trên một dòng mới. Đoạn văn mớiđược phân cách với phần trước bằng khoảng cách dòng đôi.
Căn chỉnh văn bản theo đoạn văn:
2. Đặt màu của tất cả văn bản và nền trong tài liệu
Được mô tả trong thẻ bắt đầu của nội dung tài liệu
CHỮ=màu văn bản >.3. Tiêu đề cấp độ khác nhau
Thẻ
4. Danh sách đơn giản
5.Nhiệm vụ thực tế số 2
Định dạng văn bản trong đoạn văn, màu nền, tiêu đề ở các cấp độ khác nhau, danh sách.
Bài học số 3
1. Chèn đồ họa
Tất cả các trình duyệt hỗ trợ định dạng .gif, .jpg. Các định dạng này là raster. GIF– hỗ trợ độ trong suốt và hoạt ảnh, rất phù hợp cho hình ảnh vẽ tay. JPG– cho hình ảnh đủ màu, rất phù hợp với hình ảnh được quét và ảnh chụp, không hỗ trợ hoạt ảnh.
Thẻ đơn
chèn đồ họa vào luồng văn bản ở bất cứ đâu:
>
Thuộc tính thẻ tùy chọn :
Để giữ hình ảnh ở giữa, bạn có thể sử dụng thẻ
2. Nhiệm vụ thực hành số 3
Chèn và định dạng đồ họa. Độc lập tạo các trang web cho rạp chiếu phim.
Bài học số 4
Giao tiếp với các tài liệu khác được sắp xếp theo thẻ<A>….
>< IMG SRC ='tên tệp đồ họa' >
2. Nhiệm vụ thực hành số 4
Thiết kế danh sách rạp trên trang chính của glavn.htm, dưới dạng hyperlink tới các trang Web tương ứng của rạp.
Bài học số 5
1. Bàn
Chúng không chỉ được sử dụng để sắp xếp dữ liệu trong các ô mà còn nhằm mục đích định vị các đoạn văn bản và hình ảnh so với nhau.
Sử dụng bảng sẽ thuận tiện cho việc tạo điều hướng trang web.
Ví dụ về bảng có hai hàng (hàng) chứa hai ô:
Các ô trong bảng có thể chứa văn bản hoặc hình ảnh cũng như văn bản có thẻ HTML và siêu liên kết. Bạn không nên để trống các ô trong bảng; bạn phải đặt ít nhất một khoảng trắng không ngắt
Thuộc tính thẻ cơ bản
| đặt tham số bảng, hàng hoặc ô:
ALIGN=trái, phải, giữa – căn chỉnh ( BGCOLOR=’màu sắc’ – màu nền ( HSPACE=value – không gian trống ở bên trái và bên phải của bảng tính bằng pixel ( VSPACE=value - không gian trống phía trên và phía dưới bảng tính bằng pixel ( WIDTH=value – chiều rộng bảng (ô) – tính bằng pixel hoặc dưới dạng phần trăm ( CHIỀU CAO =
giá trị - chiều cao của bảng (ô, hàng) - tính bằng pixel hoặc dưới dạng phần trăm ( BORDER= value – độ dày của đường viền xung quanh bảng và các ô của nó, giá trị mặc định=1, nếu giá trị = 0 thì không có đường viền ( BORDECOLOR=’color’ – màu khung ( VALIGH=dưới, giữa, trên – căn chỉnh nội dung theo chiều dọc ( 2. Nhiệm vụ thực hành số 5 Tạo điều hướng trang web dưới dạng bảng một hàng 1. Phần tiêu đề Phần tiêu đề trên mỗi trang chỉ định thông tin về tài liệu được sử dụng để hiển thị nó. Văn bản được đính kèm giữa các thẻ Phần tiêu đề thường chứa một số thẻ.
với nhiều thuộc tính khác nhau cung cấp thông tin bổ sung (siêu thông tin) về trang Web: >
- - (loại bảng mã được chỉ định ( windows-1251, Koi8-R và những thứ khác) được sử dụng để chuẩn bị phần văn bản của tài liệu. - thông tin về Tạo một đoạn văn mới Căn chỉnh một đoạn văn so với một bên Yếu tố đồ họa Những cái bàn |
