0% menganggap dokumen ini bermanfaat (0 suara)
29 tayangan4 halaman

Panduan Kode Sumber HTML Dasar

Dokumen tersebut memberikan contoh penggunaan berbagai tag HTML untuk membuat format teks seperti paragraf, blockquote, daftar item, subscript, superscript, link, gambar sebagai link, dan tabel.

Diunggah oleh

Lily
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
29 tayangan4 halaman

Panduan Kode Sumber HTML Dasar

Dokumen tersebut memberikan contoh penggunaan berbagai tag HTML untuk membuat format teks seperti paragraf, blockquote, daftar item, subscript, superscript, link, gambar sebagai link, dan tabel.

Diunggah oleh

Lily
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

Source Code HTML

<HTML><BODY> Ini adalah paragraf normal <BLOCKQUOTE> <P>Ini paragraf yang agak masuk ke dalam. <P align="justify">Ini juga contoh paragraf yang agak masuk ke dalam. Dengan kalimat yang agak panjang, kita lihat bahwa <b>semua baris</b> dalam paragraf ini letaknya agak masuk ke dalam. <i>Sama rata sama jauhnya</i>. </BLOCKQUOTE> <P>Nah, paragraf ini kembali normal, karena tag <i>blockquote</i> sudah berlalu alias sudah ditutup di atas. Ngerti, kan? </HTML></BODY>

DAFTAR ITEM (BULLET AND NUMBERING) Ada dua macam daftar item yaitu daftar item tak berurut (bullet) dan daftar item berurut (numbering). Contoh daftar item tak berurut (bullet):

item pertama item kedua item ketiga

Contoh daftar item berurut (numbering): 1. item pertama 2. item kedua 3. item ketiga Untuk membuat daftar item tak berurut kita gunakan tag <UL> sedang untuk membuat daftar item berurut digunakan tag <OL>. Adapun setiap item ditandai dengan tag <LI>. Beginilah kode sumber untuk daftar item tak berurut di atas: <ul> <li>item pertama</li> <li>item kedua</li> <li>item ketiga</li> </ul> Dan beginilah kode sumber untuk daftar item berurut di atas:

<ol> <li>item pertama</li> <li>item kedua</li> <li>item ketiga</li> </ol> Kita pun dapat membuat daftar item bertingkat atau daftar item di dalam daftar item. Contohnya sebagai berikut:

item pertama item kedua o sub item pertama o sub item kedua sub sub item pertama sub sub item kedua sub sub item ketiga o sub item ketiga item ketiga

SUBSCRIPT DAN SUPERSCRIPT Subscript adalah tulisan yang agak kecil dan letaknya agak di bawah sedangkan superscript adalah tulisan yang agak kecil dan letaknya agak di atas. Untuk menulis subscript kita gunakan tag <SUB> sedang untuk menulis superscript kita gunakan tag <SUP>. Inilah contohnya: <HTML><BODY> Tulisan Normal<SUB>Tulisan Subscript</SUB> <P>Tulisan Normal<SUP>Tulisan Superscript</SUP> </HTML></BODY> Beginilah hasilnya dalam browser: Tulisan NormalTulisan Subscript Tulisan NormalTulisan Superscript

LINK ATAU KAITAN Sekarang kita akan belajar membuat link yang merupakan ciri khas dari dokumen web. Link adalah sebuah teks atau gambar yang bila di-klik akan membawa anda ke bagian lain dari dokumen web. Sebuah link biasanya ditandai dengan teks warna biru bergaris bawah atau pointer mouse yang berubah menjadi telunjuk tangan. Untuk membuat sebuah teks atau gambar menjadi sebuah link, kita lakukan dengan mengapitnya dengan tag pembuka <A HREF> dan tag penutup </A>. Jadi rumusnya kira-kira sebagai berikut: <A HREF="lokasi_tujuan">link</A>. MENGGUNAKAN GAMBAR SEBAGAI LINK Masih ada satu lagi fungsi gambar. Gambar juga dapat digunakan sebagai link. Pada prinsipnya untuk membuat link gambar sama saja dengan membuat link teks. Kita tinggal mengganti teks yang bertindak sebagai link itu dengan tag penyisipan gambar (IMG SRC). Misalnya kita punya link seperti ini: email kami. Kode HTML dari link ini adalah: <A HREF="[Link] kami</A> Untuk membuat link gambar, kita tinggal mengganti tulisan email kami dengan tag penyisip gambar yaitu <IMG SRC="[Link]">. Sehingga lengkapnya tertulis: <A HREF="[Link] SRC="[Link]"></A> Inilah gambar yang sudah dijadikan link:

TABEL <TABLE BORDER=1 CELLSPACING=10 CELLPADDING=10> <TR> <TD>kolom 1 dari baris 1</TD> <TD>kolom 2 dari baris 1</TD> </TR> <TR> <TD>kolom 1 dari baris 2</TD> <TD>kolom 2 dari baris 2</TD> </TR> </TABLE> Akan menghasilkan tabel seperti ini:

kolom 1 dari baris 1 kolom 1 dari baris 2

kolom 2 dari baris 1 kolom 2 dari baris 2

Common questions

Didukung oleh AI

Ordered lists are created using the <OL> tag and display items in a numbered format, whereas unordered lists use the <UL> tag and display items with bullet points. Each item in both list types is marked with the <LI> tag .

HTML links are created using the <A HREF> tag, where 'HREF' specifies the destination URL. Text or images used within this tag become clickable links. Images can replace text as the clickable item by including the <IMG SRC> tag within the <A HREF> tags, making the image serve as the link .

HTML allows for nested lists by placing <UL> or <OL> tags within another <LI> item. This feature enables the creation of sublists and hierarchical structures within a list, which is important for representing complex data structures and improving content organization .

The <BLOCKQUOTE> tag is used to define a section that is quoted from another source. In terms of formatting, it typically indents the content, making the paragraphs within it appear as indented sections compared to the surrounding text .

A table in HTML is created with the <TABLE> tag, containing <TR> tags for rows and <TD> tags for cells within those rows. Attributes like BORDER, CELLSPACING, and CELLPADDING can adjust table borders and the space within and between cells. This structure organizes data into a grid layout, facilitating clear data presentation .

The align attribute within HTML tags like <P> affects text alignment, such as left, center, right, or justify, aligning text within its containing element. This is significant for controlling the presentation and readability of text, ensuring it matches the design requirements and enhances the user experience .

The <SUB> tag displays text as subscript, showing it slightly smaller and below the regular text line, while the <SUP> tag displays text as superscript, making it appear smaller and above the regular text line. Both are used to adjust the vertical alignment of specific text segments .

<BLOCKQUOTE> is specifically used for quoted text and typically applies indentation to signal this usage, whereas <DIV> is a general-purpose container for grouping elements. <DIV> does not apply any formatting by default, offering more flexibility for ID, class styling, and layout purposes .

Indentation and spacing enhance the readability and maintainability of source code by visually organizing code into blocks, making it easier to discern the structure and identify code sections. This leads to better collaboration among developers and reduces the likelihood of errors within complex code bases [general programming knowledge].

Excessive nesting of lists in HTML can lead to complex, unwieldy structures, reducing readability and maintainability. This can be mitigated by simplifying list hierarchies and using CSS for styling and visibility control, allowing for a cleaner and more understandable codebase [common web development knowledge].

Anda mungkin juga menyukai