Bài tập cho các kiểu html làm việc độc lập. Công việc thực tế về html và css

Công việc thực tế về HTML

Nhiệm vụ số 1.

Tạo một tệp HTML cơ bản

1. Tạo một thư mục cá nhân nơi bạn sẽ lưu tất cả các tệp trên trang web của mình.

2. Nhấp chuột phải và chọn Mới - Tệp trống.

3. Nhập tên tệp rasp.html.

4. Nhấp chuột phải vào “Mở bằng” - “Bàn di chuột”

5. Nhập một tài liệu html đơn giản:

Tệp hướng dẫn HTML

Lịch học vào thứ Tư.

6. Lưu tài liệu và đóng trình chỉnh sửa.

7. Mở tài liệu rasp.html bằng cách nhấp đúp chuột và kiểm tra kết quả.

Nhiệm vụ số 2.

Kiểm soát vị trí của văn bản trên màn hình

1. Thực hiện theo bước số 4 trong tác vụ trước đối với tệp rasp.html

2. Thực hiện các thay đổi đối với tệp rasp.html, đặt các từLịch học, lớp học vào thứ Tư trên các dòng khác nhau.

Ví dụ:

Lịch trình

các lớp học

vào thứ Tư.

Đừng ngạc nhiên khi giao diện trang Web của bạn không thay đổi.

Nhiệm vụ số 3.

Kiểm soát vị trí văn bản trên màn hình 2

1. Thực hiện theo bước số 4 trong tác vụ đầu tiên đối với tệp rasp.html

2. Thực hiện các thay đổi đối với tệp rasp.html:

Ví dụ:

Lịch trình

các lớp học

vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

Sự xuất hiện của các dòng sẽ thay đổi. Tại sao văn bản thay đổi?

Nhiệm vụ số 4.

Định dạng văn bản

Thẻ nguồn cấp dữ liệu dòng
tách một dòng khỏi văn bản hoặc đồ họa tiếp theo.

Thẻ đoạn văn

cũng phân tách dòng mà còn thêm một dòng trống, điều này trực quan

làm nổi bật một đoạn văn.

Tệp hướng dẫn HTML

Lịch trình

các lớp học

Cho thứ tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

Nhiệm vụ số 5.

Định dạng văn bản

1. Thực hiện các thay đổi đối với tệp RASP.HTML

Tệp hướng dẫn HTML

Lịch trình

các lớp học

vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

5. Trả lời câu hỏi: Thẻ nào dùng để đặt kiểu chữ gạch chân, in nghiêng, in đậm?

Nhiệm vụ số 6.

Đặt kích thước ký tự của trang Web

Có hai cách để kiểm soát kích thước văn bản được trình duyệt hiển thị:

sử dụng các kiểu tiêu đề,

Đặt kích thước phông chữ của tài liệu chính hoặc kích thước phông chữ hiện tại.

Sáu thẻ tiêu đề được sử dụng: từ

trước

(thẻ này gấp đôi, tức là nó yêu cầu đóng).

Mỗi thẻ có một kiểu cụ thể được cài đặt trình duyệt gán cho nó.

1. Thực hiện các thay đổi đối với tệp RASP.HTML

Tệp hướng dẫn HTML

Thời khóa biểu các lớp

vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

5. Thay thế thẻ h1 bằng h2-h6 và xem kích thước tiêu đề thay đổi như thế nào.

Nhiệm vụ số 7.

Đặt kích thước phông chữ hiện tại

Thẻ phông chữ cho phép bạn đặt kích thước của phông chữ hiện tại ở từng vị trí của văn bản trong

nằm trong khoảng từ 1 đến 7.

Tệp hướng dẫn HTML

Thời khóa biểu các lớp

vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

5. Thay thế kích thước phông chữ bằng các kích thước khác và xem kích thước văn bản thay đổi như thế nào.

Nhiệm vụ số 8.

Đặt màu phông chữ

Nhãn cung cấp khả năng kiểm soát kiểu chữ, màu sắc và kích thước văn bản.

Để thay đổi màu phông chữ, bạn có thể sử dụng nó trong thẻ thuộc tính MÀU=”X”. Thay vì

“X”, bạn phải thay thế tên tiếng Anh của màu trong dấu ngoặc kép (“ ”) hoặc hệ thập lục phân của nó

nghĩa. Khi chỉ định một màu là số thập lục phân, bạn phải biểu thị màu đó

bị phân hủy thành ba thành phần: đỏ (R – Red), xanh lục (G – Green), xanh lam (B – blue),

mỗi trong số đó có giá trị từ 00 đến FF. Trong trường hợp này chúng ta đang giải quyết cái gọi là

định dạng RGB.

Ví dụ về viết văn bản ở định dạng RGB được hiển thị trong Bảng 1:

1
. Thực hiện các thay đổi đối với tệp RASP.HTML

Tệp hướng dẫn HTML

Lịch trình

Các lớp học cho thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

5. Thay đổi màu sang màu khác và xem kết quả của thẻ phông chữ.

Nhiệm vụ số 9.

Căn chỉnh văn bản theo chiều ngang.

Căn chỉnh văn bản xác định hình thức của nó và hướng của các cạnh đoạn văn và có thể sang trái, phải, giữa hoặc căn đều. Thẻ đoạn văn thường được sử dụng để thiết lập căn chỉnh văn bản

1. Thực hiện các thay đổi đối với tệp RASP.HTML

Tệp hướng dẫn HTML

Lịch trình

lớp học vào thứ Tư.

3. Lưu văn bản với những thay đổi của bạn trong tệp rasp.html.

4. Mở tài liệu rasp.html bằng cách nhấp đúp và kiểm tra kết quả.

Tạo một trang Web theo ví dụ sau.

Màu của văn bản được chỉ định trong ngoặc. Căn chỉnh văn bản phải có mặt.

Đặt tên cho tập tinbánh quy.html

Reg.ru: tên miền và lưu trữ

Nhà đăng ký và cung cấp dịch vụ lưu trữ lớn nhất ở Nga.

Hơn 2 triệu tên miền đang được sử dụng.

Khuyến mãi, mail tên miền, giải pháp kinh doanh.

Hơn 700 nghìn khách hàng trên khắp thế giới đã đưa ra lựa chọn của mình.

* Di chuột qua để tạm dừng cuộn.

Quay lại phía trước

30 cách thực hành CSS tốt cho người mới bắt đầu

CSS là ngôn ngữ được hầu hết mọi nhà phát triển sử dụng tại một số thời điểm. Mặc dù đôi khi chúng ta coi đó là điều hiển nhiên nhưng nó vẫn là một công cụ mạnh mẽ và có nhiều ứng dụng đa dạng có thể giúp (hoặc cản trở) sự phát triển của thiết kế chất lượng. Dưới đây là 30 đề xuất hay sẽ giúp bạn viết mã chính xác và dễ hiểu, tránh được nhiều lỗi phổ biến.

1. Làm cho nó dễ đọc

Khả năng dễ đọc của tệp CSS là rất quan trọng, mặc dù nhiều người đánh giá thấp điểm này. Khả năng đọc tốt cho phép bạn đơn giản hóa công việc của mình với nó trong tương lai, với sự hỗ trợ của trang web, vì bạn sẽ tìm thấy các yếu tố bạn cần nhanh hơn nhiều lần. Ngoài ra, hãy nhớ rằng tệp của bạn có thể cần được người khác xem xét và sửa chữa.

Ghi chú
Khi viết file CSS, hầu hết các nhà phát triển đều rơi vào hai nhóm, hai thái cực.

Nhóm 1: Tất cả trong một dòng

SomeDiv (nền: đỏ; phần đệm: 2em; đường viền: 1px màu đen; )

Nhóm 2: Mỗi phong cách có một dòng riêng biệt

SomeDiv (nền: đỏ; phần đệm: 2em; đường viền: 1px màu đen; )

Trên thực tế, cả hai cách làm đều khá tốt, mặc dù những bất đồng giữa đại diện của các nhóm này không phải là hiếm! Chỉ cần ghi nhớ - bạn cần chọn tùy chọn mà bạn muốn xem. Đó là tất cả.
Ghi chú

2. Làm cho nó trọn vẹn

Ngoài việc làm cho mã của bạn dễ đọc hơn, hãy làm cho nó nhất quán hơn. Bạn nên bắt đầu phát triển "ngôn ngữ phụ" CSS của riêng mình để cho phép bạn tuân thủ một kiểu đặt tên cụ thể. Có một số lớp nhất định mà tôi hầu như luôn tạo và đặt cho chúng những cái tên giống nhau mỗi lần. Ví dụ, tôi sử dụng .caption-rightđể căn chỉnh hình ảnh ở bên phải.

Hãy suy nghĩ xem liệu bạn có sử dụng dấu gạch ngang và dấu gạch dưới trong tên lớp và ID của mình hay không và khi nào. Khi bạn bắt đầu tạo các tiêu chuẩn CSS của riêng mình, bạn sẽ tiến gần hơn đến việc trở thành một chuyên gia CSS.

3. Bắt đầu với một khuôn khổ

Nhiều người cho rằng bạn không nên sử dụng CSS framework, nhưng tôi nghĩ rằng nếu ai đó dành thời gian và tạo ra một chương trình có thể tăng tốc quá trình phát triển thì tại sao lại phải phát minh lại cái bánh xe? Tôi biết rằng không nên sử dụng các khung công tác ở mọi nơi, nhưng trong nhiều trường hợp, việc sử dụng chúng là khá hợp lý.

Nhiều nhà thiết kế tạo ra các framework của riêng họ khi họ làm việc và đây cũng là một ý tưởng tuyệt vời để giữ cho mã nhất quán và nhất quán giữa các dự án.

Ghi chú
Tôi không đồng ý. CSS framework là một thứ không thể thiếu nhưng chỉ dành cho một số ít, đối với những người biết sử dụng tốt.

“Vấn đề không phải là phát minh lại bánh xe mà là vấn đề hiểu cách thức hoạt động của nó.”

Nếu bạn mới bắt đầu hiểu về Cascading Style Sheets, tôi khuyên bạn nên tránh xa các framework khác nhau trong ít nhất một năm. Bằng không bạn sẽ đơn giản làm lẫn lộn chính mình. Hãy học CSS trước, sau đó tối ưu hóa công việc của bạn với ngôn ngữ này.
Ghi chú

4. Sử dụng số 0

Hầu hết các khung CSS đều có bộ nullifier kiểu tích hợp sẵn, nhưng nếu không có ý định sử dụng nó, bạn có thể sử dụng các bộ nullifier khác. Việc đặt lại kiểu cho phép bạn tránh nhiều vấn đề về hiển thị không đồng đều trong các trình duyệt khác nhau bằng cách đặt các thông số rõ ràng về kích thước phông chữ, tiêu đề, lề, v.v. Việc “zeroing” này cho phép bạn đạt được cùng một màn hình trong tất cả các trình duyệt.

Dưới đây là các liên kết đến một số cài đặt lại phổ biến nhất: MeyerWeb, cài đặt lại dành cho nhà phát triển của Yahoo. Ngoài ra, bạn có thể nghĩ ra “bộ vô hiệu hóa” của riêng mình, sử dụng những điều sau đây làm cơ sở.

5. Cấu trúc các tệp kiểu của bạn từ trên xuống dưới

Việc cấu trúc tệp CSS của bạn luôn có ý nghĩa để bạn có thể nhanh chóng tìm thấy đoạn mã mình cần. Tôi khuyên bạn nên sử dụng cách tiếp cận từ trên xuống, đó là xây dựng biểu định kiểu của bạn theo thứ tự các kiểu được áp dụng trên trang. Ví dụ:

1. Các lớp chung (nội dung, a, p, h1, v.v.) 2. #header 3. #nav-menu 4. #main-content

Đừng quên thêm ý kiến ​​​​cho mỗi phần!

/****** nội dung chính *********/ phong cách ở đây... /****** chân trang *********/ phong cách ở đây...

6. Yếu tố nhóm

Thông thường các phần tử có thể có các kiểu chồng chéo, phổ biến. Thay vì viết lại mã hiện có, tốt hơn là chỉ nhóm các phần tử lại với nhau. Ví dụ: tiêu đề của bạn h1, h2 Và h3 có thể có cùng phông chữ và màu sắc:

H1, h2, h3 (họ phông chữ: tahoma, màu: #333)

7. Tạo đánh dấu HTML trước tiên

Nhiều nhà phát triển tạo tệp CSS song song với việc tạo đánh dấu HTML. Điều này có vẻ hợp lý, nhưng bạn vẫn có thể tiết kiệm rất nhiều thời gian nếu bạn hiểu HTML trước rồi đến kiểu dáng. Cách tiếp cận này cho phép bạn suy nghĩ về toàn bộ trang, suy nghĩ về nơi áp dụng các kiểu nào và kết thúc bằng một tệp kiểu từ trên xuống gắn kết hơn.

8. Áp dụng nhiều lớp cho một phần tử nếu cần thiết

Đôi khi sẽ tốt hơn nếu áp dụng nhiều lớp cho một phần tử cùng một lúc. Giả sử bạn có một thùng chứa div bạn muốn hỏi ai nổi: phải, và bạn đã có một lớp học .Phải trong tệp kiểu của bạn, nó sẽ căn chỉnh mọi thứ đúng cách. Bạn chỉ cần thêm một lớp khác vào vùng chứa của mình div:

Bạn có thể thêm bao nhiêu lớp tùy thích, ngăn cách chúng bằng dấu cách.

Ghi chú
Hãy hết sức cẩn thận khi sử dụng những cái tên như bên trái Và Phải. Hãy tưởng tượng rằng bạn đột nhiên cần căn chỉnh một vùng chứa sang trái. Trong trường hợp này, bạn cần quay lại mã HTML và thay đổi tên lớp - tất cả để thay đổi giao diện trực quan trên trang. Điều này là vô nghĩa. Hãy nhớ: HTML dành cho đánh dấu, CSS dành cho trình bày trực quan.

Nếu bạn cần chỉnh sửa HTML để thay đổi bố cục của trang thì bạn đã làm sai điều gì đó!

9. Sử dụng đúng thẻ Doctype

Các yếu tố thuộc cả hai loại bao gồm:

Span, a, mạnh, em, img, br, đầu vào, abbr, từ viết tắt

Các phần tử khối bao gồm:

Div, h1...h6, p, ul, li, bảng, blockquote, pre, form

13. Sắp xếp thuộc tính theo thứ tự bảng chữ cái

Sử dụng hệ thống sắp xếp thuộc tính như vậy sẽ cho phép bạn tiết kiệm rất nhiều thời gian khi tìm kiếm thuộc tính mong muốn.

#cotton-candy ( color: #fff; float: left; font-weight: Height: 200px; lề: 0; đệm: 0; chiều rộng: 150px; )

Ghi chú
Ơ.., hy sinh tốc độ để cải thiện khả năng đọc một chút.. Hãy tự mình xem nhé..
Ghi chú

14. Sử dụng trình nén CSS

Trình nén CSS giúp bạn giảm đáng kể kích thước tệp biểu định kiểu bằng cách loại bỏ các ngắt dòng không cần thiết và kết hợp các thành phần. Tất cả điều này cho phép trang web của bạn tải nhanh hơn. CSS Optimizer và CSS Compressor là hai dịch vụ trực tuyến tuyệt vời để thực hiện các tác vụ như vậy.

Cùng với việc giảm kích thước tệp, đương nhiên khả năng đọc của nó sẽ bị giảm đáng kể, vì vậy hãy sử dụng các dịch vụ như vậy khi không còn mong đợi thực hiện các thay đổi đối với kiểu.

15. Sử dụng các lớp chung

Bạn sẽ sớm nhận thấy rằng có những phong cách bạn sử dụng đi sử dụng lại nhiều lần. Thay vì thêm kiểu này vào từng ID, bạn có thể tạo các lớp chung và thêm chúng vào ID của các lớp CSS khác (xem đề xuất số 8 trong bài viết này).

Ví dụ, tôi nhận thấy rằng tôi sử dụng nổi: phải Và nổi: trái lặp đi lặp lại trong các thiết kế của tôi. Tôi chỉ đang thêm lớp học .bên trái Và .Phải vào tệp kiểu của tôi và áp dụng nó cho các phần tử.

Trái (float:left) .right (float:right)

Bằng cách này bạn không cần phải viết liên tục nổi: trái cho tất cả các phần tử mà thuộc tính này sẽ được áp dụng.

16. Sử dụng "Margin: 0 auto" để căn giữa thiết kế

Nhiều người mới sử dụng CSS không hiểu tại sao họ không thể sử dụng phao: trung tâmđể đạt được hiệu ứng tập trung cho các phần tử khối. Giá như nó đơn giản như thế! Thật không may, bạn phải làm điều đó như thế này:

Ký quỹ: 0 tự động; /* 0 - cho trên và dưới; tự động - cho trái và phải */

17. Đừng đặt mọi thứ vào DIV

Việc làm những việc như:

Đây có vẻ là một giải pháp khá tốt, nhưng nó sẽ bắt đầu làm lộn xộn tệp kiểu của bạn. Thay vào đó, hãy làm cho nó đơn giản:

Văn bản tiêu đề

Và đã có thẻ h1 bạn có thể thiết lập bất kỳ thiết kế nào bạn cần.

18. Sử dụng Firebug

Bạn có thích tài liệu này và muốn cảm ơn tôi không?
Chỉ cần chia sẻ với bạn bè và đồng nghiệp của bạn!

Các nhiệm vụ Cơ bản về HTML được thiết kế để hợp nhất công việc về một tập hợp các chủ đề sau: Cấu trúc HTML, nhận xét bằng HTML, thẻ chính, nền tảng Thuộc tính HTML. .

Nhiệm vụ cho hình ảnh trong HTML: chèn hình ảnh vào HTML(Mã hình ảnh HTML), Kích thước hình ảnh HTML, căn chỉnh hình ảnh...trong HTML.

Bài tập HTML và CSS nâng cao

Bài tập HTML với Emmet. Bố cục nhanh, Các lệnh Emmet (cái gọi là Bảng cheat Emmet). Sau khi hoàn thành nhiệm vụ với plugin Emmet, tốc độ bố cục/phát triển của bạn sẽ tăng lên đáng kể. .

Nhiệm vụ trên bộ chọn CSS. Bộ chọn CSS: bộ chọn lớp css, bộ chọn thuộc tính css, bộ chọn css liền kề, bộ chọn ngữ cảnh css, bộ chọn con + trong css, mức độ ưu tiên của bộ chọn. .

Công việc Định vị CSS quan trọng để hiểu cách bố trí phức tạp. Dưới đây là các nhiệm vụ cần hiểu và thực hiện: vị trí tuyệt đối, vị trí tương đối, vị trí cố định Và vị trí tĩnh, Thuộc tính CSS trên cùng bên trái dưới cùng bên phải. .

Nhiệm vụ bố trí biểu mẫu

1. Tạo một biểu mẫu xác thực trên trang web, giống như trong Twitter Bootstrap (không sử dụng khung này). Ví dụ, như trong .
2. Tạo biểu mẫu điều phối trên website
3. Kết nối plugin jQuery để chọn ngày/tháng từ trường
4. Tạo một hộp kiểm tương tự như một mạng xã hội.
5. Tạo một mẫu đăng ký khách truy cập trang web
6. Tạo một biểu mẫu tương tự như biểu mẫu sắp xếp sản phẩm trong Yandex.Market

Một trong những nhiệm vụ của người thiết kế bố cục là viết mã trên nhiều trình duyệt. Mã sẽ cho phép các trang trông giống hoặc giống nhau nhất có thể trong số lượng trình duyệt lớn nhất. .

Các khả năng CSS hiện đại cho phép bạn tạo ra những tác phẩm tuyệt vời và làm việc với nền bằng cách tô màu nó Gradient điền. Bộ nhỏ Nhiệm vụ hoạt hình CSS.

Nhiệm vụ cho truy vấn phương tiện (trang web di động). Tạo phiên bản di động của trang web là một phần quan trọng của kỹ năng phát triển web. Các bài tập được dành cho các chủ đề sau: tạo trang web di động, kiểm tra phiên bản di động của trang web. .

Nhiệm vụ về bố cục bố cục psd và khung CSS. Bố cục trang web dựa trên bố cục psd- phần quan trọng nhất trong công việc của một nhà thiết kế web. Trong các bài học HTML, chúng tôi đề cập đến các bước cơ bản bố cục từ psd sang HTML. Nhiệm vụ .