Hướng dẫn advanced html codes for notepad - mã html nâng cao cho notepad

Một trang web chỉ đơn giản là một tập hợp các trang web. Một trang web hoặc tài liệu web được viết trong

<h2><a name="night-spots">Local Night Spots</a></h2>
2. Các trang web này có thể được xem bằng cách sử dụng bất kỳ trình duyệt web và internet nào.

Ngôn ngữ HTML được sử dụng để viết mã và chương trình để tạo trang web. Thật dễ dàng để tạo một trang web và bạn có thể tìm hiểu nó với một vài bước cơ bản được đề cập dưới đây:

Chương trình hoặc trang HTML có thể được tạo bởi nhiều trình soạn thảo HTML hoặc văn bản. Các trình chỉnh sửa này là phần mềm giúp chúng tôi viết mã của chúng tôi với giao diện người dùng dễ dàng. Hôm nay, chúng ta sẽ xem cách tạo HTML hoặc trang web bằng trình chỉnh sửa Notepad.

Trình chỉnh sửa Notepad là trình soạn thảo văn bản tích hợp trong máy tính Windows. Bạn cũng có thể tìm thấy các biên tập viên tương tự trong hệ điều hành MAC và Linux.

Có nhiều trình soạn thảo hoặc phần mềm HTML nâng cao cũng có sẵn. Tuy nhiên, chúng tôi sẽ khuyên bạn nên sử dụng trình soạn thảo mặc định và đơn giản như Notepad cho người mới bắt đầu. Đó luôn là một cách tốt để bắt đầu học HTML.


Tạo một trang HTML đơn giản bằng trình soạn thảo Notepad

Thực hiện theo bốn bước dưới đây để tạo trang web đầu tiên của bạn với Notepad.

Bước 1: Mở Notepad (Windows)

Windows 8 trở lên: Mở màn hình bắt đầu và tìm kiếm (Nhập Notepad)
Open the Start Screen and Search (Type Notepad)

Windows 7 hoặc Windows trước: ________ 43

<h2><a name="night-spots">Local Night Spots</a></h2>
3


Bước 2: Tạo một tài liệu mới

Chuyển đến menu Notepad: ________ 44

Một tài liệu trống mới sẽ được mở và bạn có thể bắt đầu viết chương trình HTML đầu tiên của mình tại đây.


Bước 3: Viết một số mã hoặc chương trình HTML

Viết một số mã HTML. Nếu bạn chưa biết về HTML, hãy đọc một vài chương trong phần Hướng dẫn HTML.

Viết mã HTML của riêng bạn hoặc chỉ cần sao chép chương trình HTML đơn giản sau vào tài liệu Notepad.

<!DOCTYPE html>
<html>
<body>
 
<h2>My First Heading</h2>
 
<p>My first paragraph.</p>
 
</body>
</html>

Bước 4: Lưu trang HTML

Chuyển đến menu Notepad:

<h2><a name="night-spots">Local Night Spots</a></h2>
5

Nó sẽ yêu cầu bạn lưu tệp trên máy tính của bạn. Đặt tên cho phần mở rộng .html và lưu nó (ví dụ: chương trình.html)

Lưu ý: Trang HTML nên được lưu với

<h2><a name="night-spots">Local Night Spots</a></h2>
6 mở rộng cẩn thận. HTML page should be saved with
<h2><a name="night-spots">Local Night Spots</a></h2>
6 extension carefully.


Bước 5: Xem trang HTML bằng trình duyệt

Trình duyệt web là các chương trình hoặc phần mềm được sử dụng để xem các trang web/trang web. Bạn có thể tìm thấy internet được khám phá theo mặc định nếu sử dụng máy tính Windows. Bạn cũng có thể tải xuống các trình duyệt web phổ biến khác như Google Chrome hoặc Firefox. Sử dụng bất kỳ trong số họ.

Bây giờ chỉ cần, hãy mở tệp HTML đã lưu trong bất kỳ trình duyệt nào: Nhấp đúp chuột vào tệp hoặc nhấp chuột phải vào tệp và chọn Mở mở với tùy chọn để chọn trình duyệt khác.
Double click on the file or right-click on the file and choose “Open with” option to select other browser.

Tệp HTML của bạn sẽ được mở trong trình duyệt web và nó sẽ hiển thị đầu ra dựa trên chương trình HTML của bạn.

Xin chúc mừng nếu bạn có thể chạy chương trình HTML đầu tiên của mình.

Bây giờ bạn có thể tìm hiểu thêm về các thẻ HTML và tạo thêm các trang web HTML. Sử dụng các trang HTML này, bạn cũng có thể dễ dàng tạo trang web của riêng mình.


Tìm hiểu thêm về các chủ đề tương tự:

Hướng dẫn
Không tìm thấy nội dung.
Bài tập & bài tập
Các bước để tạo một trang web trong HTML bằng Notepad
Viết một chương trình HTML để hiển thị Hello World.
Phỏng vấn câu hỏi & câu trả lời
Không tìm thấy nội dung.

Hướng dẫn advanced html codes for notepad - mã html nâng cao cho notepad

HTML cơ bản | Thêm một chút phong cách

& nbsp; & nbsp; các tính năng nâng cao hơn

Dave Raggett.

Đã thành thạo những điều cơ bản, đã đến lúc chuyển sang các tính năng nâng cao hơn. Điều sau đây sẽ dạy bạn cách:

  • lực lượng phá vỡ
  • Giới thiệu không gian không phá vỡ
  • Sử dụng các thực thể cho các ký tự đặc biệt
  • liên kết vào giữa các trang
  • Sử dụng văn bản được định dạng sẵn
  • Dòng chảy văn bản xung quanh hình ảnh
  • Xác định các vùng có thể nhấp trong hình ảnh
  • Tạo bảng
  • Sử dụng cuộn và các thủ thuật khác
  • Cho phép người dùng nghe các tệp âm thanh

P.S. Tôi khuyên bạn nên sử dụng HTML TIDY để giữ cho đánh dấu của bạn sạch sẽ và không có lỗi.

Cách buộc phá vỡ đường dây

Chỉ thỉnh thoảng, bạn sẽ muốn buộc phải phá vỡ dòng. Bạn làm điều này bằng cách sử dụng phần tử BR, ví dụ khi bạn muốn bao gồm một địa chỉ bưu chính:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>

Yếu tố BR không bao giờ cần một thẻ kết thúc. Nói chung, các yếu tố không lấy thẻ cuối được gọi là các yếu tố trống.

Cách giới thiệu không gian không phá vỡ

Trình duyệt tự động bọc văn bản để phù hợp với lề. Line Breaks có thể được giới thiệu bất cứ nơi nào các ký tự không gian xuất hiện trong đánh dấu. Đôi khi bạn sẽ muốn ngăn trình duyệt kết thúc văn bản giữa hai từ cụ thể. Ví dụ giữa hai từ trong một tên thương hiệu như "Coca Cola". Bí quyết là sử dụng & nbsp; Ví dụ: thay cho ký tự không gian: ví dụ:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.

Đó là thực tế xấu để sử dụng các không gian không phá vỡ lặp đi lặp lại để thụt vào văn bản. Thay vào đó, bạn được khuyên nên đặt thụt lề thông qua các quy tắc kiểu.

Cách sử dụng các thực thể cho các ký tự đặc biệt

Đối với thông báo bản quyền, hoặc nhãn hiệu, thông thường bao gồm các dấu hiệu thích hợp:

Biểu tượngThực thểThí dụ
Dấu hiệu bản quyền& sao chép;Bản quyền © 1999 W3C
Thương hiệu đã được đăng ký& reg;Magico ®
Nhãn hiệuWebfarer ™

Lưu ý HTML 4.0 xác định & thương mại; Đối với dấu hiệu nhãn hiệu nhưng điều này chưa được hỗ trợ rộng rãi như ™

Có một số thực thể khác mà bạn có thể thấy hữu ích:

Biểu tượngThực thểThí dụ
Ít hơn& lt;<
Lớn hơn& gt;>
Ampers và& amp;Không có giá trị
Không gian không phá vỡ& nbsp;& nbsp;
Em Dash-
dấu ngoặc kép& quot;"

Và sau đó, có các thực thể cho các ký tự có dấu và các biểu tượng linh tinh trong bộ ký tự Latin-1:

 & nbsp; Ð& Eth;Ð
Ơ& IEXCL;¡N& Ntilde;Ñ
¢& xu;¢Ò& Ograve;Ò
£&pao;£Ó& OACUTE;Ó
¤& Curren;¤Ô& Ocirc;Ô
¥& Yen;¥Õ& Otilde;Õ
¦& brvbar;¦Ö& Ouml;Ö
§& giáo phái;§×& thời gian;×
.& uml;¨Ø& Oslash;Ø
©& sao chép;©Ù& Ugrave;Ù
ª& ordf;ªÚ& Uacute;Ú
«& laquo;«Û& Ucirc;Û
¬&không phải;¬Ü& UUML;Ü
Û&nhát;­Ý& Yacute;Ý
®& reg;®THỨ TỰ&GAI;Þ
Ý& macr;¯ß& szlig;ß
°& deg;°một&ngôi mộ;à
±& PlusMn;±một& Quyền lợi;á
²& sup2;²một& acirc;â
á& sup3;³một& Atilde;ã
´&nhọn;´một& auml;ä
& vi mô;µmột&một chiêc nhân;å
& para;µ& aelig;æ
·& Middot;·c& ccedil;ç
¸& Cedil;¸è& egrave;è
¹& sup1;¹é& eacute;é
º& ordm;ºê& ecirc;ê
»& Raquo;»ë& euml;ë
¼& frac14;¼tôi& igrave;ì
½& frac12;½tôi& Iacute;í
¾& frac34;¾tôi& icirc;î
¿& iquest;¿tôi& iuml;ï
MỘT&Ngôi mộ;Àð& eth;ð
MỘT& Quyền lợi;ÁN& ntilde;ñ
MỘT& Acirc;ÂÒ& ograve;ò
MỘT& Atilde;ÃÓ& OACUTE;ó
MỘT& Auml;Äô& ocirc;ô
MỘT&Một chiêc nhân;Åõ& otilde;õ
ô& Aelig;ÆÖ& ouml;ö
C& Ccedil;Ç.&chia;÷
È& Egrave;ÈØ& Oslash;ø
É& Eacute;Éù& ugrave;ù
Ê& Ecirc;Êú& uacute;ú
Ë& Euml;Ëû& ucirc;û
TÔI& Igrave;Ìü& UUML;ü
TÔI& Iacute;Íý& yacute;ý
TÔI& Icirc;Îthứ tự&gai;þ
TÔI& Iuml;Ïÿ& yuml;ÿ

Bạn cũng có thể sử dụng các thực thể ký tự số cho các chữ cái Hy Lạp và các ký hiệu toán học được xác định trong Unicode. Để biết thêm chi tiết, hãy xem danh sách được chỉ định trong đặc tả HTML 4. Lưu ý rằng tên thực thể cho các ký tự này không được công nhận trong Navigator 4, vì vậy bạn được khuyến nghị bám vào các thực thể số thay thế.

Liên kết vào giữa các trang web

Hãy tưởng tượng bạn đã viết một trang web dài với một bảng nội dung gần đầu. Làm thế nào để bạn thực hiện các mục trong nội dung bảng thành các liên kết siêu văn bản đến các phần tương ứng?

Giả sử rằng mỗi phần bắt đầu bằng một tiêu đề, ví dụ:

<h2>Local Night Spots</h2>

Bạn thực hiện tiêu đề thành một mục tiêu tiềm năng cho một liên kết siêu văn bản bằng cách kèm theo nội dung của nó với ....

<h2><a name="night-spots">Local Night Spots</a></h2>

Thuộc tính tên chỉ định tên bạn sẽ sử dụng để xác định mục tiêu liên kết, trong trường hợp này: "Điểm đêm". Mục lục hiện có thể bao gồm một liên kết siêu văn bản bằng cách sử dụng tên này, ví dụ:

<ul>
  ...
  <li><a href="#night-spots">Local Night Spots</a></li>
  ...
</ul>

Ký tự # là cần thiết trước tên đích. Nếu mục tiêu nằm trong một tài liệu khác, thì bạn cần đặt địa chỉ web của tài liệu đó trước ký tự #. Ví dụ: nếu tài liệu nằm trong "http://www.bath.co.uk/", thì liên kết sẽ trở thành:

<a href="http://www.bath.co.uk/#night-spots">Local Night Spots</a>

Trong tương lai, cuối cùng bạn sẽ có thể xác định các mục tiêu liên kết mà không cần phần tử. Phương pháp mới dễ dàng hơn nhiều, vì tất cả những gì bạn cần làm là thêm một thuộc tính ID vào tiêu đề, ví dụ:

<h2 id="night-spots">Local Night Spots</h2>

Phương pháp này không hoạt động cho thế hệ thứ 4 hoặc các trình duyệt trước đó, vì vậy nó nên được sử dụng cẩn thận trong khi các trình duyệt này vẫn còn được sử dụng!

Văn bản được định dạng trước

Một lợi thế của web là văn bản được tự động được bọc vào các dòng phù hợp trong kích thước cửa sổ hiện tại. Đôi khi, bạn sẽ muốn vô hiệu hóa hành vi này. Ví dụ khi bao gồm các mẫu mã chương trình. Bạn làm điều này bằng cách sử dụng phần tử pre. Ví dụ:

<pre>
    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }
</pre>

Điều nào hiển thị như:

    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

Các văn bản và màu nền được đặt thông qua bảng kiểu. Lưu ý rằng tất cả các giao dịch và khoảng trắng được hiển thị chính xác khi chúng xuất hiện trong HTML. Ngoại lệ là một dòng mới ngay sau khi thẻ bắt đầu và ngay trước thẻ kết thúc, bị loại bỏ. Điều này có nghĩa là hai ví dụ sau được hiển thị giống hệt nhau:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
0

Văn bản được tạo thành thường được hiển thị bằng cách sử dụng phông chữ đơn sắc trong đó mỗi ký tự có cùng chiều rộng. Nếu bạn xác định quy tắc kiểu cho phần tử pre, một số trình duyệt quên sử dụng phông chữ đơn vị, đòi hỏi phải sử dụng thuộc tính gia đình phông chữ. Chẳng hạn, nếu bạn muốn hiển thị tất cả các yếu tố trước màu xanh lá cây, bạn có thể xác định quy tắc kiểu:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
1

Khi đặt màu nền trước cho văn bản, bạn cũng nên đặt màu cho nền. Điều này sẽ ngăn ngừa tai nạn trong đó màu nền khó phân biệt với tiền cảnh. Thay vì đặt màu nền trên phần tử trước, bạn có thể thấy thuận tiện hơn để đặt nó trên phần tử cơ thể, ví dụ:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
2

Văn bản chảy xung quanh hình ảnh

Với HTML, bạn có thể chọn xem bất kỳ hình ảnh nào được coi là một phần của dòng văn bản hiện tại hay được thả nổi bên trái hoặc bên phải. Bạn kiểm soát điều này thông qua thuộc tính căn chỉnh. Nếu thuộc tính căn chỉnh được đặt để bên trái hình ảnh nổi ở lề trái. Nếu nó được đặt thành bên phải hình ảnh nổi ở lề phải. Ví dụ:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
3

Điều nào hiển thị như:

Hướng dẫn advanced html codes for notepad - mã html nâng cao cho notepad
Văn bản này sẽ được chảy xung quanh phía bên phải của đồ họa.

Điều sau đây sử dụng Align = "Right"

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
4

Điều nào hiển thị như:

Hướng dẫn advanced html codes for notepad - mã html nâng cao cho notepad
Văn bản này sẽ được chảy xung quanh phía bên trái của đồ họa.

Để buộc kết xuất để tiếp tục bên dưới hình ảnh nổi, bạn có thể sử dụng phần tử, ví dụ:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
5

Điều nào hiển thị như:

Hướng dẫn advanced html codes for notepad - mã html nâng cao cho notepad
Văn bản này sẽ được chảy xung quanh phía bên phải của đồ họa. Điều này bắt đầu một dòng mới bên dưới hình ảnh nổi.
This starts a new line below the floated image.

Các vùng có thể nhấp trong hình ảnh

Hình ảnh sau đây hoạt động như một bản đồ của một nhóm các trang web. Bạn có thể nhấp vào các vòng tròn để đi đến trang tương ứng.

Hướng dẫn advanced html codes for notepad - mã html nâng cao cho notepad

Đánh dấu cho điều này như sau:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
6

Thuộc tính SRC trên phần tử IMG chỉ định hình ảnh "trang.gif". Thuộc tính usemap tham chiếu một phần tử bản đồ. Nó sử dụng một địa chỉ web để làm như vậy, do đó ký tự #. Thuộc tính đường viền được đặt thành "0" để triệt tiêu đường viền màu xanh xung quanh hình ảnh.

Phần tử MAP chỉ định các vùng nào trong hình ảnh hoạt động như các liên kết siêu văn bản. Thuộc tính tên khớp với thuộc tính Usemap trên phần tử IMG và hoạt động giống như thuộc tính tên trên phần tử. Trong thực tế, phần tử MAP cần phải nằm trong cùng một tệp với phần tử IMG.

Phần tử khu vực được sử dụng để xác định một vùng trên hình ảnh và liên kết nó với địa chỉ web. Thuộc tính hình dạng chỉ định "trực tràng", "vòng tròn" hoặc "poly". Thuộc tính tọa độ chỉ định tọa độ cho khu vực tùy thuộc vào hình dạng.

  • Rect: Left-X, Top-y, Right-X, bottom-y
  • Circle: Center-x, trung tâm-y, bán kính
  • poly: x1, y1, x2, y2, ... xn, yn

Pixel trên cùng bên trái được coi là nguồn gốc của hình ảnh với x và y cả bằng 0, x tăng bên phải trên hình ảnh và y tăng xuống dưới. Hầu hết các công cụ thao tác hình ảnh cho phép bạn tìm tọa độ pixel của bất kỳ điểm nào trong hình ảnh.

Nếu hai hoặc nhiều vùng được xác định chồng chéo, phần tử xác định khu vực xuất hiện sớm nhất trong tài liệu được ưu tiên (nghĩa là, phản hồi với đầu vào của người dùng). Đối với một hình dạng phức tạp như vòng anular, bạn có thể tạo một phần của một khu vực không hoạt động bằng cách phủ nó với một khu vực khác bằng cách sử dụng thuộc tính Nohref, ví dụ::

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
7

Trong đó vòng tròn thứ nhất tạo ra một vùng không hoạt động trong vòng tròn lớn hơn được tạo bởi phần tử khu vực thứ hai. Để có bất kỳ ảnh hưởng nào, hình dạng không hoạt động cần được đặt đầu tiên vì nếu không nó sẽ được ẩn bởi hình dạng hoạt động.

Tại sao bạn cần chỉ định thuộc tính Alt

Thuộc tính ALT trên phần tử khu vực được sử dụng để cung cấp nhãn văn bản cho liên kết. Không có nó, bản đồ hình ảnh không thể truy cập được đối với những người không thể nhìn thấy hình ảnh.

Những cái bàn

Các bảng được sử dụng cho thông tin cũng như cho bố cục. Bạn có thể kéo dài các bảng để điền vào lề, chỉ định một chiều rộng cố định hoặc để nó cho trình duyệt để tự động kích thước bảng để khớp với nội dung.

Các bảng bao gồm một hoặc nhiều hàng ô bảng. Đây là một ví dụ đơn giản:

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 $ 36M

Đánh dấu cho điều này là:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
8

Phần tử bảng đóng vai trò là thùng chứa cho bảng. Thuộc tính đường viền chỉ định độ rộng biên giới tính theo pixel. Phần tử TR hoạt động như một thùng chứa cho mỗi hàng bảng. Các phần tử TH và TD hoạt động như các container cho các tế bào tiêu đề và dữ liệu tương ứng.

Đệm tế bào

Bạn có thể tăng lượng đệm cho tất cả các ô bằng cách sử dụng thuộc tính cellpadding trên phần tử bảng. Chẳng hạn, để đặt phần đệm thành 10 pixel:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>
9

Điều này có tác dụng:

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 $ 36M

Khoảng cách tế bào

Ngược lại, thuộc tính tế bào đặt không gian giữa các ô. Đặt khoảng cách ô thành 10:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
0

có tác dụng:

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 $ 36M

Chiều rộng của cái bàn

Bạn có thể đặt chiều rộng của bảng bằng thuộc tính chiều rộng. Giá trị là chiều rộng tính bằng pixel hoặc giá trị phần trăm đại diện cho tỷ lệ phần trăm của không gian có sẵn giữa lề trái và bên phải. Ví dụ: đặt chiều rộng thành 80% số lề:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
1

có tác dụng nào:

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 $ 36M

Căn chỉnh văn bản trong các ô

Theo mặc định, các tế bào tiêu đề trung tâm của trình duyệt (TH) và các ô dữ liệu căn chỉnh (TD). Bạn có thể thay đổi căn chỉnh bằng cách sử dụng thuộc tính căn chỉnh, có thể được thêm vào từng ô hoặc vào hàng (phần tử TR). Nó được sử dụng với các giá trị "trái", "trung tâm" hoặc "phải":

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
2

với kết quả sau:

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 $ 36M

Thuộc tính Valign đóng vai trò tương tự cho sự liên kết dọc của nội dung tế bào. Nó được sử dụng với các giá trị "trên cùng", "giữa" hoặc "dưới cùng" và có thể được thêm vào từng ô hoặc hàng. Theo mặc định, các ô tiêu đề (TH) định vị nội dung của chúng ở giữa các ô trong khi các ô dữ liệu căn chỉnh nội dung của chúng ở đầu mỗi ô.

Tế bào trống

Một QUIK là cách trình duyệt đối phó với các ô trống, so sánh:

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 $ 36M
2003

with

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 & nbsp;

Cái trước xảy ra khi một tế bào trống:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
3

Để ngăn chặn điều này, bao gồm một không gian không phá vỡ:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
4

Các ô trải dài hơn một hàng hoặc cột

Hãy mở rộng ví dụ trên để phá vỡ doanh số của các khu vực bán hàng ở Bắc và Nam:

NămViệc bán hàng
Phía bắcPhía namTổng cộng
2000 $ 10M$ 8M$ 18M
2001 $ 14M$ 11M$ 25M

Tiêu đề "Năm" hiện đang kéo dài hai hàng, trong khi tiêu đề "Sales" trải dài ba cột. Điều này được thực hiện bằng cách đặt các thuộc tính Rowspan và Colspan tương ứng. Đánh dấu cho những điều trên là:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
5

Bạn có thể đơn giản hóa điều này bằng cách tận dụng thực tế là các trình duyệt không cần thẻ cuối cho các ô và hàng bảng:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
6

Lưu ý rằng khi tiêu đề "Năm" kéo dài hai hàng, phần tử thứ nhất trên hàng thứ hai xuất hiện trên thứ hai thay vì cột thứ nhất.

Bảng không biên giới

Chúng thường được sử dụng để đặt các trang theo kiểu có lưới. Tất cả những gì bạn cần làm là thêm Border = "0" và cellspaces = "0" vào phần tử bảng:

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 $ 36M

Điều này được sản xuất bằng cách sử dụng đánh dấu sau:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
7

Nếu bạn để lại thuộc tính DECTSPACE, bạn sẽ nhận được một khoảng cách mỏng giữa các ô, như được hiển thị bên dưới:

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 $ 36M

Tô màu bàn của bạn

Trang này sử dụng một bảng kiểu để đặt màu nền cho các bảng, với một màu khác cho tiêu đề và ô dữ liệu. Các quy tắc phong cách tôi đã sử dụng như sau:

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
8

Hai dòng cuối cùng ở trên đặt màu nền cho các ô TH và TD cho các giá trị màu đỏ/xanh lá cây/xanh dương. Các số nằm trong phạm vi 0 đến 255 (bão hòa hoàn toàn).

Một cách khác để đặt màu nền là sử dụng thuộc tính BGColor. Điều này hoạt động với gần như tất cả các trình duyệt và không dựa vào hỗ trợ bảng kiểu. Bước đầu tiên là xác định các giá trị thập lục phân cho các thành phần màu đỏ, xanh lá cây và xanh dương của màu bạn muốn sử dụng. Một bộ chuyển đổi được bao gồm trong trang kiểu.

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity.
9

Tập trung các bảng của bạn

Bạn có thể định vị các bảng của mình giữa các lề trái và bên phải bằng cách sử dụng một số CSS. Nếu bảng kiểu của bạn bao gồm quy tắc sau, thì tất cả các bảng sẽ được tập trung:

<h2>Local Night Spots</h2>
0

Bạn có thể làm cho cụ thể này cho một bảng nhất định bằng cách cho nó một giá trị ID hoặc bằng cách đặt một lớp. Ví dụ sau đây áp dụng cho các bảng có giá trị thuộc tính lớp của trung tâm:

Đầu tiên ở đây là quy tắc phong cách:

<h2>Local Night Spots</h2>
1

Và đây là đánh dấu bảng:

<h2>Local Night Spots</h2>
2

Và đây là cách nó được hiển thị trong trình duyệt của bạn:

NămViệc bán hàng
2000 $ 18M
2001 $ 25M
2002 $ 36M

Lưu ý rằng bạn có thể thay thế thuộc tính Border bằng các quy tắc CSS để kiểm soát nhiều hơn về sự xuất hiện của đường viền bảng và ô. Xem hướng dẫn phong cách để biết cách đặt cách đặt kiểu biên giới.

Làm cho bàn của bạn có thể truy cập được

Nếu bạn không thể nhìn thấy bảng thì có thể khá khó để hiểu bảng là gì. Bước đầu tiên là thêm thông tin mô tả mục đích và cấu trúc của bảng. Phần tử chú thích cho phép bạn cung cấp chú thích và định vị điều này ở trên hoặc bên dưới bảng. Phần tử chú thích sẽ xuất hiện trước phần tử TR cho hàng đầu tiên.

Doanh thu bán hàng dự kiến ​​theo năm
NămViệc bán hàng
2000 $ 18M
2001 $ 25M

được sản xuất bởi đánh dấu sau:

<h2>Local Night Spots</h2>
3

Đây là cùng một bảng với Align = "Bottom" được thêm vào phần tử chú thích:

Doanh thu bán hàng dự kiến ​​theo năm
NămViệc bán hàng
2000 $ 18M
2001 $ 25M

Thuộc tính tóm tắt của phần tử bảng nên được sử dụng để mô tả cấu trúc của bảng cho những người không thể nhìn thấy bảng. Ví dụ: "Cột đầu tiên cho năm và thứ hai, doanh thu cho năm đó".

<h2>Local Night Spots</h2>
4

Chỉ định mối quan hệ giữa tiêu đề và ô dữ liệu

Khi một bảng được kết xuất thành âm thanh hoặc chữ nổi, rất hữu ích để có thể xác định các tiêu đề nào mô tả từng ô. Chẳng hạn, một trình duyệt âm thanh có thể cho phép bạn di chuyển lên xuống hoặc trái và phải từ ô này sang ô khác, với các tiêu đề thích hợp được nói trước mỗi ô.

Để hỗ trợ điều này, bạn cần chú thích tiêu đề và/hoặc các ô dữ liệu. Cách tiếp cận đơn giản nhất là thêm thuộc tính phạm vi vào các ô tiêu đề. Nó có thể được sử dụng với các giá trị sau:

  • ROW: ô hiện tại cung cấp thông tin tiêu đề cho phần còn lại của hàng chứa nó.: The current cell provides header information for the rest of the row that contains it.
  • COL: ô hiện tại cung cấp thông tin tiêu đề cho phần còn lại của cột chứa nó.: The current cell provides header information for the rest of the column that contains it.

Áp dụng điều này vào bảng ví dụ đưa ra:

<h2>Local Night Spots</h2>
5

Đối với các bảng phức tạp hơn, bạn có thể sử dụng thuộc tính tiêu đề trên các ô dữ liệu riêng lẻ để cung cấp một danh sách phân tách không gian các định danh cho các ô tiêu đề. Mỗi ô tiêu đề như vậy phải có một thuộc tính ID với một định danh phù hợp.

Một điểm cuối cùng là bạn nên xem xét sử dụng thuộc tính ABBR để chỉ định viết tắt cho các tiêu đề dài. Điều này làm cho nó có thể chấp nhận được khi nghe danh sách các tiêu đề cho từng ô, ví dụ:

<h2>Local Night Spots</h2>
6

Cuộn-overs và các thủ thuật khác

Một chút JavaScript có thể đi một chặng đường dài để làm sinh động các trang của bạn. Bạn sẽ được hiển thị bên dưới cách tạo "Rollover" trong đó sự xuất hiện của một liên kết thay đổi khi bạn di chuyển chuột qua nó. Bạn cũng sẽ học cách tạo quảng cáo biểu ngữ đạp xe giúp hướng khách truy cập vào các trang web của các nhà tài trợ của bạn

Roll-Overs

Ở dạng phổ biến nhất, một cuộn bao gồm một hình ảnh đóng vai trò là một liên kết siêu văn bản. Mặc dù con trỏ chuột nằm trên hình ảnh, nó thay đổi xuất hiện để thu hút sự chú ý đến liên kết. Ví dụ: bạn có thể thêm một hiệu ứng phát sáng, bóng rơi hoặc chỉ đơn giản là thay đổi màu nền. Đây là một ví dụ:

<h2>Local Night Spots</h2>
7

Và đây là những gì nó trông giống như ...

Hướng dẫn advanced html codes for notepad - mã html nâng cao cho notepad

Tôi đã tạo ra những hình ảnh này bằng cách sử dụng một công cụ vẽ phần mềm miễn phí bằng cách thêm hiệu ứng sáp nóng và sau đó là một bóng rơi vào văn bản. Bạn có thể tìm thấy rất nhiều lời khuyên và clipart miễn phí bản quyền trên web thông qua hầu hết các công cụ tìm kiếm.

Quảng cáo biểu ngữ

Nếu trang web của bạn có một số nhà tài trợ, thì bạn có thể sử dụng liên kết hình ảnh lần lượt đi qua từng nhà tài trợ. Bước đầu tiên là tạo một hình ảnh cho mỗi nhà tài trợ của bạn. Tất cả các hình ảnh nên có cùng kích thước. Các URL tương ứng cho các hình ảnh và cho các trang web sau đó được đặt vào các mảng có tên Adimages và Adurls được xác định khi bắt đầu tập lệnh. Phần tử IMG cho liên kết phải được khởi tạo thành hình ảnh đầu tiên trong mảng. Chu kỳ được bắt đầu bằng cách sử dụng sự kiện Onload trên phần tử cơ thể.

<h2>Local Night Spots</h2>
8

Tài trợ của chúng tôi:

Hướng dẫn advanced html codes for notepad - mã html nâng cao cho notepad

Lưu ý: Bạn được khuyến nghị để đảm bảo rằng tất cả các hình ảnh có cùng chiều rộng và chiều cao. Một giải pháp thay thế là thêm các thuộc tính chiều rộng và chiều cao vào phần tử IMG để đảm bảo hình ảnh đều được hiển thị ở cùng kích thước.

Còn các trình duyệt không hỗ trợ kịch bản thì sao?

Nội dung của phần tử NOSCript chỉ được hiển thị nếu trình duyệt không hỗ trợ tập lệnh. Nó nên được sử dụng khi bạn muốn cung cấp cho mọi người quyền truy cập vào thông tin mà nếu không những người có trình duyệt không hỗ trợ kịch bản. Giả sử rằng bạn muốn cung cấp các liên kết cho các nhà tài trợ của bạn có sẵn dưới dạng văn bản:

<h2>Local Night Spots</h2>
9

Có nhiều nguồn thông tin miễn phí về kịch bản, có thể dễ dàng tìm thấy thông qua hầu hết các công cụ tìm kiếm.

Cho phép người dùng nghe các tệp âm thanh

Hãy giả sử rằng bạn và bạn bè của bạn đã cùng nhau ghi lại một số nhạc trong nhà để xe của bạn, và bây giờ bạn muốn đưa nó ra cho công chúng nghe. Bước đầu tiên là nén âm thanh được ghi, ví dụ: Là một tập tin MP3 và tải nó lên trang web của bạn. Đối với mục đích giải thích, giả sử rằng điều này sau đó có sẵn tại:

<h2><a name="night-spots">Local Night Spots</a></h2>
7. Trong các ví dụ dưới đây, bạn nên thay thế điều này bằng vị trí chính xác cho trang web của bạn.

Bước tiếp theo là tạo một tệp danh sách phát với phần mở rộng tệp .M3U. Điều này tránh được sự chờ đợi dài trước khi người dùng bắt đầu nghe nhạc thường xảy ra nếu bạn liên kết trực tiếp với tệp MP3. Bạn có thể tạo danh sách phát với trình soạn thảo văn bản và nó chỉ cần bao gồm URL cho tệp MP3. Đối với tệp âm thanh ví dụ, đây sẽ là:

<h2><a name="night-spots">Local Night Spots</a></h2>
0

Tải lên tệp danh sách phát M3U lên máy chủ web của bạn. Bây giờ bạn có thể thêm một liên kết vào trang web của ban nhạc như sau:

<h2><a name="night-spots">Local Night Spots</a></h2>
1

Bạn cũng có thể cần kiểm tra với người quản lý máy chủ web rằng các loại MIME chính xác được đặt cho cả tệp MP3 và M3U.

  • Tiện ích mở rộng M3U với Audio/X-Mpegurl
  • Tiện ích mở rộng mp3 với âm thanh/mpeg

Lưu ý cách tiếp cận trên hoạt động tốt nhất cho những người có kết nối băng thông rộng. Bạn nên xem xét việc cung cấp phiên bản chất lượng thấp hơn của tệp MP3 cho mọi người về các kết nối tốc độ thấp (nghĩa là ở tốc độ dữ liệu thấp hơn nhiều so với 128k). the above approach works best for people with broadband connections. You should consider providing a lower quality version of the mp3 file for people on low speed connections (i.e. at a much lower data rate than 128K).

Một cách tiếp cận rất giống nhau cũng có thể được sử dụng cho các tệp âm thanh OGG Vorbis (loại MIME "Ứng dụng/OGG" và Tiện ích mở rộng tệp ".OGG"). Chúng có thể được sử dụng với các tệp danh sách phát M3U hoặc PLS, nhưng không phải tất cả các trình phát nhạc sẽ được cấu hình để hỗ trợ điều này. Tham khảo một công cụ tìm kiếm để biết thêm chi tiết về các định dạng âm thanh này và các định dạng âm thanh khác.

Nhận thêm thông tin

Khuyến nghị của W3C cho HTML 4.0 là đặc điểm kỹ thuật có thẩm quyền cho HTML. Tuy nhiên, nó là một đặc điểm kỹ thuật. Đối với một nguồn thông tin kỹ thuật ít hơn, bạn có thể muốn mua một trong nhiều cuốn sách trên HTML, ví dụ như "Raggett trên HTML 4", được xuất bản năm 1998 bởi Addison Wesley. XHTML 1.0 hiện là một khuyến nghị của W3C.

Tốt nhất của may mắn và có được văn bản!

Dave Raggett

Bạn có thể mã HTML trong notepad không?

Nếu bạn sử dụng Windows, bạn không cần mua hoặc tải xuống trình soạn thảo để viết HTML. Bạn có một trình soạn thảo chức năng hoàn hảo được tích hợp vào hệ điều hành của bạn - Notepad. Phần mềm này có những hạn chế, nhưng nó sẽ hoàn toàn cho phép bạn mã HTML.it will absolutely allow you to code HTML.

Notepad ++ nào là tốt nhất cho HTML?

Biên tập viên HTML và CSS tốt nhất..
UltraEdit..
NoteTab..
Notepad++.
Văn bản siêu phàm ..
TextPad..
BBEdit..
Komodo ide ..
Mã Visual Studio ..

Notepad ++ có tốt cho HTML không?

Vâng, nó là tốt vì nó làm cho nền tảng và cơ bản mạnh mẽ hơn. Bởi vì nó ít chiếm dụng với các công cụ được tích hợp hoặc đoạn trích được xác định trước. Notepad ++ là một IDE tốt ... nhưng bây giờ IDE phổ biến là VSCode (Visual Studio Code) .... Because it less occupied with built in stuff or predefined snippets. Notepad ++ is a good IDE... But now popular IDE is VSCode (Visual Studio Code)...

Một đứa trẻ 13 tuổi có thể học HTML không?

HTML và CSS là hai khối xây dựng cơ bản của tất cả các trang web trên web trên toàn thế giới và khóa học này bao gồm các nguyên tắc cơ bản cốt lõi. Thanh thiếu niên ở độ tuổi 13-16 trong tất cả các khả năng đều được chào đón, từ người mới bắt đầu (những người chưa bao giờ viết một dòng mã) cho đến những người có thể có một vài năm kinh nghiệm mã hóa.Teenagers aged 13-16 of all abilities are welcome, from beginners (who have never written a line of code) all the way through to those who may have a few years of coding experience.